Pulsante DPI del mouse per modificarne al volo la velocità

Gli appassionati di giochi solitamente non usano il mouse per interagire con lo schermo ma preferiscono joystick o consolle, molto più performanti di un semplice puntatore. Chi però usa il cursore è molto attento al livello della sua sensibilità. Per misurarla si usa una unità di misura espressa in DPI, acronimo inglese di dots per inches, che indica il numero di punti che il puntatore percorre sullo schermo quando viene spostato fisicamente di un pollice.

Solitamente le distanze sullo schermo si misurano in pixel e gli spostamenti fisici in centimetri. Per avere una idea e effettuare una conversione approssimativa dei valori di DPI ricordo che un pollice è uguale a 2,54cm. La maggior parte degli schermi sono HD con una larghezza di 1920 pixel che sono equivalenti a 1440 punti. 

Tanto per fare un esempio, se la sensibilità di un mouse fosse di 1440 dpi, per spostare il puntatore da un bordo all'altro dello schermo, si dovrebbe spostare fisicamente di 2,54cm. Ci sono puntatori di qualità molto diverse. Quelli più costosi non vengono installati con il Plug&Play ma mediante un driver con cui l'utente è in grado di impostarne il DPI desiderato. I valori più comuni per i DPI sono 800, 1200, 1600, 1800, 2000, 2400, 2800, 3200, 4000, 5600, 8200. Gli appassionati di gaming utilizzano mouse con sensibilità anche superiore a 2000dpi, ma non sempre è la scelta giusta perché dipende dalla capacità del giocatore e dal tipo di gioco.

Come personalizzare l'aspetto del cursore con una nostra immagine.

L'immagine del cursore dipende dall'oggetto HTML su cui passa sopra. In un modulo ha la forma di una barra verticale lampeggiante mentre quando passa sopra a un link prende l'aspetto di una mano con il dito indice che punta sul collegamento.

Si può personalizzare l'aspetto del mouse con i fogli di stile utilizzando i tag ne-resize, col-resize, progress, text, vertical-text, help., e-resize, se-resize, s-resize, sw-resize, nw-resize, w-resize, move, wait, crosshair, no-drop, row-resize, not-allowed che modificano l'aspetto del cursore in una parte del sito o anche in tutto.

In questo post mostrerò una personalizzazione che ho spesso visto nei blog amministrati da donne che amano molto avere il cursore con una immagine colorata. Queste blogger quasi sempre si rivolgono a siti specializzati che però offrono dei codici con il link al sito sorgente che potrebbe avere delle conseguenze negative dal lato SEO.

Usare il cellulare Android come mouse e tastiera per il PC.

I cellulari hanno una vita media di un paio di anni. Non è che smettono di funzionare ma il mercato dopo un certo tempo offre dei prodotti decisamente più performanti che inducono il consumatore ad acquistare nuovi modelli. Si pone quindi il problema di cosa fare del vecchio smartphone visto che non è più all'avanguardia tecnologica ma è ancora funzionante.

In futuro magari pubblicherò un articolo specifico con le numerose opzioni per un riciclo intelligente dei vecchi cellulari. Una possibile opzione l'ho già presentata in un articolo di ieri su come convertire il cellulare in un cordless da usare per chiamare e rispondere da telefono fisso.

In questo post vedremo un altro interessante utilizzo che però può essere abilitato anche nei cellulari più moderni. Si tratta di usare il telefonino per il controllo remoto del computer convertendolo di fatto in mouse e tastiera Wi-Fi. Avete un computer fisso con grande schermo con cui volete interagire stando comodamente sdraiati sul divano o addirittura sul letto? Si può installare una applicazione che permette di farlo usando il cellulare come sostitutivo di mouse e tastiera.

Cambiare la velocità dello scroll del mouse in Windows 10.

La rotellina del mouse serve oltre che per aprire un link in un'altra scheda quando viene cliccata ma anche per effettuare lo scroll della pagina quando viene ruotata in un senso o nell'altro. Agendo sulla rotellina quindi ci si può spostare all'interno della pagina scorrendola verso il basso o verso l'alto. La rotellina non agisce in modo continuo ma a scatti e le impostazioni di default di Windows 10 sono spesso inadeguate alle nostre esigenze.

Personalmente preferisco uno spostamento piccolo per ogni scatto per posizionare al meglio un contenuto nello schermo. La impostazione che ho trovato su Windows 10 invece prevede uno spostamento di tre righe ad ogni scatto del mouse.

Come riprodurre file audio se si clicca o si passa con il mouse su link o su immagini.

L'effetto di riprodurre audio quando un lettore clicca su un collegamento o passa con il mouse sopra a un link o una immagine è tutt'altro che raro nel web. Anche gli utenti di Blogger possono facilmente implementarlo nel loro sito. I suoni saranno riprodotti se la pagina viene aperta con un browser che supporta HTML5 cioè praticamente da tutti i browser più moderni e aggiornati.

Ovviamente come primo passo bisogna scegliere i file audio da riprodurre. Per non essere troppo invasivi è bene selezionare un audio che duri pochi secondi. Per avere la sicurezza che l'audio venga riprodotto anche da Opera oltre che da Firefox, Chrome, Microsoft Edge e Safari è bene avere due formati dello stesso file cioè quello MP3 e quello OGG.

Come far scorrere in automatico a una data velocità una scheda del browser con il mouse.

Una scheda di qualsiasi browser si può scorrere agendo sulla rotellina del mouse oppure trascinando con lo stesso mouse il cursore presente sulla parte destra della scheda. La rotellina del cursore si sposta a scatti anche nelle schermate dei programmi Windows. Si possono settare questi spostamenti andando cliccando con il destro del mouse sul tasto Start (Windows 8) per poi scegliere Pannello di Controllo > Accessibilità > Centro Accessibilità > Modifica funzionamento del mouse > Impostazioni del mouse. 

Si sceglie la scheda Rotellina e si impostano il numero di righe per lo scorrimento verticale e il numero di caratteri per lo scorrimento orizzontale per ogni tacca della rotellina

Disabilitare il destro del cursore con avviso a tutta pagina.

Continuo nella pubblicazione di metodi per aumentare la protezione dei contenuti del nostro blog. Mi riferisco soprattutto al furto di immagini che colpisce molte tipologie di siti. Come ho già avuto modo di affermare non esiste un sistema sicuro al 100% contro questa pratica che va contro a ogni principio di correttezza. Possiamo però inserire delle procedure per rendere la copia delle foto più difficile e in grado di dissuadere almeno i meno esperti di informatica.

Questa deterrenza viene fatta solitamente con la disabilitazione del destro del mouse per evitare la procedura di copia più semplice. La particolarità del sistema che vado a illustrare sta nell'avviso che riceve il navigatore che non sarà un semplice tooltip ma una immagine mostrata a tutta pagina. L'avviso si visualizza anche se prima si clicca sulla immagine e poi si prova a scaricarla con il destro del cursore.

Come impedire di farci copiare le immagini con il destro del mouse o con il drag & drop.

Premetto che un esperto di informatica può sempre trovare il modo di copiare una immagine magari andando sul sorgente pagina per poi riuscire a trovarne l'indirizzo. Però in genere chi commette furti di foto non è un grande conoscitore di internet altrimenti non rischierebbe una infrazione di questo genere che potrebbe compromettere tutto il suo lavoro visto che ci sono delle norme internazionali molto precise per combattere le violazioni di copyright.

D'altra parte gli autori di siti con immagini molto preziose come potrebbero essere gli artigiani che propongono i loro lavori, le ragazze che si occupano di make-up o di nail-art, i fotografi professionisti o anche chi abbia scattato una foto importante perché si trovava nel posto giusto al momento giusto sono da sempre alle prese con la piaga del furto di immagini. Pensate a una food blogger che impiega ore per la realizzazione di una ricetta e che poi si vede copiare le immagini da un altro sito che oltre a riproporre l'elenco degli ingredienti o la preparazione magari con qualche modifica ne copia integralmente le immagini. Ci sono dei metodi grafici per introdurre degli watermark nelle foto ma per ragioni estetiche vengono quasi sempre inseriti nelle parti esterne e quindi possono essere nascosti mediante un semplice ritaglio.  Mi sono già occupato su come procedere per disabilitare il destro del mouse per impedire che la foto venga copiata o scaricata. Mi è stato però fatto osservare giustamente che si può scaricare una foto non solo con il destro del mouse ma anche trascinandola in una nuova scheda del browser. Con i sistemi operativi Mac la cosa è addirittura molto intuitiva. 

Come modificare la forma del mouse con i fogli di stile.

Vi sarete certamente accorti che la forma del cursore varia a seconda di dove viene posizionato. In linea di massima per esempio se si tratta di un campo di testo allora la forma del mouse sarà quella di una linea verticale intermittente mentre l'aspetto più comune è quello di una freccia bianca leggermente inclinata verso sinistra. Non è raro quando si naviga su internet di vedere il mouse che prende la forma di un punto interrogativo quando per esempio si passa sopra a un paragrafo o un link con delle info.

Anche un blogger alle prime armi può "stupire" i propri lettori mostrando un cursore personalizzato con i CSS a seconda della zona del post in cui lo posizionano. Non mi riferisco alla modifica pura e semplice del mouse che si vede in molti blog femminili con animaletti, oggetti grafici carini e altre amenità. Per questo tipo di modifiche si possono seguire le istruzioni su come personalizzare il cursore.

Come mostrare un tooltip con descrizione sopra le immagini al passaggio del mouse.

Quando si passa con il cursore sopra una immagine ci viene mostrato il testo contenuto all'interno del tag Title che insieme all'altro tag Alt serve per rendere l'immagine più descrittiva aggiungendo un testo pertinente a beneficio dei lettori e dei motori di ricerca.

Il tooltip visualizzato in questo modo è esteticamente poco valido e non si presta a mostrare delle descrizioni troppo lunghe. Vediamo come risolvere il problema e come mostrare al passaggio del cursore un tooltip completamente personalizzato nella posizione, nel colore, nella trasparenza, nella famiglia di font, nello sfondo e in altri parametri.

MOSTRARE UN TOOLTIP DESCRITTIVO SOPRA A UNA IMMAGINE

Come scegliere con il cursore il colore dello sfondo in un blog.

Nel moderno Designer Modelli di Blogger possiamo selezionare il colore di sfondo che più ci piace per il nostro sito. Basta andare su Modello > Personalizza > Sfondo e usare gli sfondi per quel modello. In alternativa  possiamo anche selezionare una immagine di sfondo tra le molte che vengono proposte oppure caricarne una dal nostro computer.

In questo articolo voglio mostrare una personalizzazione decisamente originale che probabilmente interesserà a poche persone ma che ritengo sia comunque interessante proporre. Con le modifiche che andrò a illustrare sarà lo stesso lettore a scegliere il colore dello sfondo del vostro sito con la possibilità di scegliere anche una immagine di background. Potrà farlo semplicemente passando il cursore su una apposita tabella dei colori da mostrare in un widget. Cliccando sopra al colore prescelto questo si attiverà. Questa personalizzazione non ha bisogno di modifiche al template che sono sempre delicate. 

Mostrare immagini in scala di grigi che si colorano al passaggio del cursore.

Mi ero già occupato poco meno di due anni fa dell'effetto che colora le immagini al passaggio del mouse che aveva però il difetto di non funzionare con tutti i browser segnatamente con Firefox. Con gli aggiornamenti che hanno avuto tutti i principali browser e anche con l'introduzione del linguaggio CSS3 è adesso possibile avere questo effetto che funziona con Internet Explorer  9+, con Chrome 19+, con Firefox 3.5+ e con Safari 6+. Praticamente se non si ha un PC Windows XP con IE8 dovremo essere in grado di apprezzarlo.

Andiamo però per gradi e mostriamo come si possa realizzare un effetto applicabile a tutte le immagini del blog su Blogger al passaggio del cursore. Basta usare una struttura di codice in cui nella prima parte si inserisce la durata della transizione e nella seconda l'effetto che deve avvenire al passaggio del mouse e che è determinato dalla regola con img:hover.

Effetto opacità in una o in tutte le immagini.

Per i codici dei colori si può utilizzare il sistema RGB che consente a priori di impostare la opacità e quindi la trasparenza. Si può anche associare l'effetto opacità a un evento del mouse e mostrare una immagine opaca al passaggio del cursore oppure mostrare una foto opaca che si illumina quando il mouse le passa sopra. È anche possibile utilizzare un codice per mostrare tutte le immagini opache per poi schiarirle al passaggio del mouse oppure mostrarle nitide e opacizzarle al passaggio del cursore.

Per rendere le cose più chiare è meglio suddividere il post in sezioni ciascuna delle quali dedicata a uno specifico effetto locale o complessivo.

 

IMMAGINE OPACA CHE SI SCHIARISCE

Abbellire il blog su Blogger con Effetti speciali di Primavera.

Mancano pochi giorni all'equinozio di Marzo con il conseguente inizio della Primavera. Dal punto di vista strettamente meteorologico sembra che sia già arrivata visto la mitezza delle temperature. Come ho già fatto con le ricorrenze di Natale, Capodanno, Halloween e San Valentino vado a presentare degli effetti da installare nei blog su Blogger per festeggiare l'avvenimento.

Non sono particolarmente dotato di senso artistico e allora mi sono limitato ai fiori che è l'iconografia più utilizzata per la Primavera. Gli effetti presentati possono essere installati da Layout senza modificare il template e possono essere utilizzati anche nei blog con dominio personalizzato. Si tratta delle solite cascate di fiori e delle scie floreali disegnate con il cursore. Alla fine dell'articolo illustrerò come si possano modificare i fiori che ho proposto nelle demo.

Come impedire di copiare le immagini con il trascinamento del mouse su Blogger.

La funzione di un blogger è quella di raccogliere le informazioni, filtrarle, elaborarle per poi creare dei contenuti che possano essere apprezzati dai lettori in quanto offrano un plus valore rispetto a altre pagine web in cui contenuti simili siano stati elaborati in modo differente. Probabilmente non sono stato chiaro ma era solo per dire che raramente gli articoli che pubblichiamo sono interamente basati su informazioni di cui siamo i soli depositari. In fondo più o meno tutti ci ispiriamo a notizie e idee che ci hanno illuminato durante la nostra continua opera di documentazione. Quando il contenuto che pubblichiamo è direttamente riconducibile a un post di un collega è buona norma, anche in ottica SEO, linkare il post da cui abbiamo preso l'idea. Questo oggettivamente non sempre è possibile farlo anche perché non si ha sottomano il link di quell'articolo che abbiamo letto su un sito di notizie o visionato solo per un attimo in un lettore di feed.

Come disabilitare il destro del mouse su tutte le immagini.

Avevo già presentato un procedimento per impedire l'apertura del menù contestuale quando con il destro del cursore si cliccava su una singola immagine ma in un commento a tale post mi si è chiesto se fosse possibile disabilitare il menù contestuale su tutte le immagini senza doverlo fare individualmente. Questa operazione serve come deterrenza verso coloro che copiano le foto dei siti o addirittura che ne acquisiscono il link diretto per poi ripubblicarle nei loro blog.

Non sto a ripetere che uno mediamente esperto di informatica riesce comunque a risalire all'URL di una immagine magari andando sul sorgente pagina o usando altri espedienti ma si tratta comunque di una funzionalità che potrebbe scoraggiare molti copiatori non proprio navigati. D'altra parte sono soprattutto quelli che sono alle prime armi a sfruttare il lavoro altrui spesso senza neppure essere consapevoli della non liceità del loro comportamento.

Come mostrare un tooltip sulle immagini al passaggio del mouse.

Tra le funzionalità di Blogger esiste quella di inserire una descrizione della immagine che si è postata tramite Editor. Dopo che si è aggiunta l'immagine basta selezionarla e scegliere Aggiungi didascalia. Si dovrà digitare un testo che sarà visualizzato centralmente al di sotto della stessa immagine. Si possono aggiungere descrizioni anche piuttosto lunghe il cui testo sarà centrato sotto la foto.

In questo articolo vediamo una possibile alternativa o se si vuole una integrazione di questa funzionalità. L'obiettivo è quello di mostrare un tooltip con le informazioni sulla immagine quando ci si passi sopra con il cursore. Si possono settare una gran quantità di parametri e questo metodo può essere usato per una singola immagine oppure si può inserire il codice nel modello e richiamare l'effetto tramite l'identificativo dei fogli di stile che si sono dichiarati. Ecco un esempio di come si visualizza una tale foto

Come disabilitare il destro del mouse in tutto il blog di Blogger o solo in una o più pagine.

Sono molti i blogger che si lamentano di come i loro contenuti vengano copiati da "colleghi" non proprio onesti. Non mi riferisco tanto agli aggregatori che succhiano i feed dei post senza neppure chiedere il consenso ma a chi fa materialmente del copia incolla degli articoli che si sono faticosamente confezionati. Questo tema è particolarmente sentito da chi lavora con immagini che richiedono molto tempo per essere create e due soli click per essere copiate e ripubblicate altrove.

La disabilitazione del destro del mouse rappresenta certamente un deterrente verso i copiatori ma ha la controindicazione di impedire di copiare qualsiasi cosa dal sito senza utilizzare delle tecniche particolari. Per esempio in questo blog se disabilitassi il destro del mouse non si potrebbero copiare i codici che inserisco in moltissimi articoli.

Markerly per condividere sui social immagini e testo dei post.

Lo faccio raramente ma stavolta mi sbilancio e dico che il servizio offerto da Markerly avrà un successo tra i blogger paragonabile a quello avuto da LinkWithin e Whos.amung.us. Si tratta infatti di uno script brevissimo da installare nel modello che consente ai lettori di visualizzare le icone dei social più importanti quando si passa con il mouse sopra a una immagine o quando si seleziona un testo.

I servizi supportati sono Facebook, Twitter, Evernote e Linkedin. C'è anche l'opzione di visualizzare il pulsante per spedire immagine o testo via email. Si possono selezionare tutti i social oppure solo quelli che ci interessano. E' anche possibile impostare il colore di sfondo delle icone tra chiaro, scuro e trasparente. Incollando l'URL del nostro blog e andando su Go si può testare il funzionamento di Markerly anche senza procedere alla installazione.

Effetto trasparenza per le immagini al passaggio del mouse.

Sebbene le immagini siano uno dei fattori che più rallentino la navigazione delle pagine è dimostrato che inserite in una giusta misura nei siti ne favoriscano il posizionamento nei risultati di ricerca. La più bassa velocità di caricamento viene infatti abbondantemente bilanciata dalla superiore tendenza che dei visitatori a soffermarsi su pagine con immagini interessanti, inoltre anche i motori di ricerca sembra che premino la presenza di contenuti diversi da quelli testuali quando siano pertinenti con il tema trattato nella pagina.

Tutti i blogger hanno necessariamente dimestichezza con l'utilizzo di foto da inserire negli articoli. Per distinguersi magari si può pensare di aggiungere un tocco di originalità attraverso l'inserimento del semplice effetto della trasparenza o se si vuole dell'effetto opacità.

Ecco due immagini identiche una inserita la prima in modo normale e l'altra con l'effetto trasparenza