Come misurare le distanze nel layout delle pagine del blog.

Il layout di un sito è determinato dal CMS della piattaforma utilizzata (Blogger, Wordpress, Joomla, Drupal, Tumblr, cc) e dal Tema (o Modello) che si è scelto che, attraverso le regole CSS che vi sono state inserite, indicano al browser gli elementi da caricare, il loro posizionamento e la loro dimensione.

Un esperto di codici può quindi aprire i file che determinano l'aspetto del layout di un sito con un programma apposito tipo Notepad++ e controllare direttamente quale siano le dimensioni di un elemento della pagina, quale sia la larghezza della sidebar o l'altezza di una icona.

Conoscere le proprietà e le dimensioni di una immagine con una estensione di Chrome.

Tutti o quasi i browser hanno una opzione nel menù contestuale per aprire l'immagine in un'altra scheda e questo serve per escludere la foto dal contesto della pagina web ma non è sufficiente per determinarne le dimensioni. Per trovare le dimensioni della foto dovremo andare sul destro del mouse e selezionare Salva immagine con nome per poi controllare le dimensioni del file dopo averlo selezionato nella cartella di download. Se si utilizza la ricerca di Google Immagini avremo anche questa informazione ma nelle pagine web questo solitamente non è possibile. Vediamo come ottenere questi dati utilizzando delle estensioni di Chrome progettate proprio per questa funzionalità.

Image Size Info aggiunge al menù contestuale del destro del mouse la voce View Image Info e cliccandoci sopra si aprirà una finestra popup con i dati delle dimensioni della foto e di quelle visualizzate

Come modificare le dimensioni di un video con VirtualDub.

I filmati sono più o meno come le immagini hanno cioè una larghezza e una altezza che sono definite dal numero di pixel come appunto per le foto. Ci può essere l'esigenza di modificare queste dimensioni non solo eventualmente per ridurle ma anche per aumentarle. Per questa operazione si possono seguire due procedimenti distinti. Il primo è quello di usare un software che converta il filmato in un altro formato adatto al player che vogliamo utilizzare mentre il secondo è più generico e ciascun fotogramma viene ricodificato secondo le nostre esigenze.

Se si vuole rendere disponibile un filmato per i cellulari Android o per gli IPhone si può usare iWisoft Video Converter e selezionare il dispositivo con cui deve girare il filmato. Altra opzione gratuita e funzionale è quella di Format Factory, eccellente programma di conversione per video, audio e immagini (vai a Format Factory - vai a iWisoft Video Converter).

Come modificare le dimensioni di una foto con l'Editor di Blogger.

Gli utenti di Blogger sono da sempre alle prese con problemi concernenti l'inserimento di immagini negli articoli. Sono più di quattro anni che posto articoli in siti sulla piattaforma Blogger e il problema delle immagini non è stato ancora risolto. Mi ricordo all'inizio quando dovevamo trascinare con il mouse le foto senza riuscire mai a trovare la giusta collocazione. Con l'Editor aggiornato le cose sono un po' migliorate ma non hanno ancora raggiunto il livello desiderato.

Se si posta con Windows Live Writer possiamo sbizzarrirci come vogliamo con le immagini. Si possono incollare nel post direttamente con il destro del mouse, inserire ombreggiature, bordi, cornici e soprattutto possono essere ridimensionate in modo continuo utilizzando le apposite maniglie.

Con l'Editor di Blogger non è possibile adattare con il mouse la dimensione di una immagine al layout. Selezionando una immagine possiamo sceglierne la dimensione tra Piccola, Media, Grande, Extralarge e Dimensione originale mentre per la posizione ci sono i pulsanti Sinistra, Centra e Destra. E' anche possibile aggiungere una Didascalia e andando su Proprietà anche i tag Alt e Title.

Come fare screenshot e calcolare le dimensioni di parti del layout.

La determinazione delle dimensioni di elementi del layout si può desumere in modo molto preciso se si ha la possibilità di accedere al codice della pagina e se siamo abbastanza esperti di codici. E' anche piuttosto semplice calcolare le dimensioni di una immagine presente su un sito. Basta cliccarci sopra con il destro del mouse e scegliere Salva immagine con nome.

L'immagine verrà scaricata nella cartella che abbiamo impostato come destinazione dei download del browser e cliccando sopra al file potremo conoscere quali siano le sue dimensioni. Ci possono essere dei casi in cui non sia possibile scaricare le immagini o in cui si voglia calcolare le dimensioni di una parte del layout del nostro blog tanto per avere una idea di altezza e larghezza di una certa zona.

Nell'articolo precedente che ho dedicato alle estensioni di Chrome ho parlato brevemente anche di Screen Capture (by Google), una estensione che serve per fare screenshot. Vediamo come si possa usare anche per calcolare in modo empirico le dimensioni di elementi del layout.

Come ingrandire le immagini al passaggio del mouse con il CSS3.

Fino alla comparsa del CSS3 per creare un effetto che ingrandisse le immagini al passaggio del mouse dovevamo installare delle librerie javascript. Ricordo di aver presentato a tale proposito l'Effetto Expando che avevo trovato su Dynamic Drive.

Sulla falsariga del metodo già proposto per ruotare le immagini vado a presentare un codice che serve per ridimensionarle al passaggio del mouse. Può essere utile per creare una galleria di miniature di foto che si mostrano a grandezza naturale quando vengono puntate con il mouse.

In ciascuna immagine può essere inserito un link all'articolo del blog da cui è stata estratta. Il codice della galleria si può incollare per esempio nell'HTML di una pagina statica. E' possibile allineare le immagini utilizzando Windows Live Writer per inserire una tabella di un determinato numero di celle.

Il codice di base per inserire immagini che si ingrandiscono al passaggio del mouse è il seguente:

Come diminuire il peso delle immagini senza perdere in qualità.

Un blog difficilmente può prescindere dalle immagini. Non mi vengono in mente esempi di siti che manterrebbero intatto il loro interesse anche senza utilizzare le foto. Credo che sia più facile fare a meno dei video, che talvolta sono dei semplici riempitivi e che comunque possono essere sempre linkati invece che incorporati. Dal Gennaio del 2010 la velocità di caricamento è entrata a far parte dei più di 200 parametri che usa Google nel suo algoritmo per posizionare le singole pagine nei risultati delle ricerche. La cosa credo sia arcinota a tutti.

Ci sono quindi due esigenze contrapposte tra cui dobbiamo necessariamente trovare un compromesso. Va ricordato infatti che le immagini, specialmente se di grandi dimensioni, sono una delle cause principali nel rallentare il caricamento della pagina. L'obiettivo di un blogger dovrà quindi essere quello di alleggerire il più possibile le immagini senza per questo perdere la loro qualità.

Mi sono occupato altre volte di questo argomento ma con questo post voglio presentare tutti i principali tool tra cui scegliere per ottimizzare il peso delle foto. Tutti gli strumenti che presenterò possono essere utilizzati indifferentemente da chi posta sulla piattaforma Blogger o Wordpress con un unica eccezione.

LoremPixum per inserire immagini casuali nel blog.

Conoscerete certamente Lorem Ipsum, il celebre testo in latino scorretto che viene usato da più di 500 anni per testare la grafica nelle realizzazioni tipografiche. Lorem Pixum vi si ispira ed è un servizio gratuito che permette di inserire delle immagini casuali nel blog che possono essere configurate per dimensioni, colore e argomenti

 

Image Embellisher: effetti speciali per foto e immagini.

Se si hanno immagini di dimensioni, come peso, inferiori a 300KB ci si può divertire a creare effetti speciali originali in modo semplicissimo. Qualsiasi macchina digitale e anche molti telefonini tuttavia creano immagini con una risoluzione maggiore di quella massima consentita dal servizio che vado a illustrarvi. Si può comunque diminuirne il peso fino a 300KB utilizzando un qualsiasi programma di grafica come Photoshop o Gimp o, alternativamente, caricando la foto sull'editor online Pixlr per salvarla con le appropriate dimensioni

Widget per cambiare la dimensione dei caratteri del blog.

Quando si apre una pagina con il browser si può aumentare la dimensione dei font pigiando su Ctrl e sul tasto del più (+). Se invece si vuole diminuire la dimensione dei caratteri si va sempre su Ctrl ma sul meno. Per ritornare alle dimensioni originali occorre cliccare su Ctrl+0. Questo per quanto riguarda gli OS Windows. Può essere carino inserire un widget che consenta al lettore di modificare le dimensioni del testo a sua discrezione mediante un cursore.

Si utilizza lo script MooTools che è già stato usato per il suggestivo Menù Accordion presentato qualche settimana fa. Si va su Design > Modifica HTML e si salva il modello completo. Importante non mettere la flag su Espandi modelli widget. Si cerca la riga </head> e, subito sopra si incolla il codice

Youtube modifica il metodo di incorporamento dei video.

La ragione per la quale c'è stata una modifica del codice per incorporare i video di Youtube forse risale all'introduzione del HTML5 che avrà un grosso impatto proprio nella gestione dei video. Al posto del contenitore object è quindi stato preferito un più flessibile iFrame che del resto verrà tra poco utilizzato anche da Facebook e che manderà in pensione applicazioni che hanno fatto la sua storia come Static FBML.  

Quando si inserisce un video con Windows Live Writer non si noteranno differenze perché, tramite l'apposito plugin, si incollerà solo l'URL del video. Se invece si usano altri metodi di pubblicazione dei post, per inserire un video dovremo andare su Codice da incorporare e sarà visibile un codice molto più corto basato come detto su un iFRame

Come diminuire il peso delle immagini con Photoshop o Smush.it.

E' da ieri possibile inserire uno sfondo personalizzato nel nostro blog utilizzando Blogger in Draft; chi avesse provato a farlo si sarebbe però trovato in difficoltà perché è richiesta una risoluzione minima di 1800x1600 pixel e un peso massimo dell'immagine di 300KB. Queste due cose sono quasi sempre in conflitto.

Purtroppo alcuni strumenti online utilizzati per diminuire i KB delle immagini non è che riescano a toglierne molti se si hanno foto già molto compresse. Con Smush.it, servizio di Yahoo, è possibile ottenere una diminuzione di qualche punto percentuale. Si clicca su Uploader per caricare la foto da ottimizzare oppure su URL se si trova già sul web

successivamente si va su Select Files and Smush, si attende la fine del processo e si clicca su Download Smushed Images per scaricarle

Come inserire i video di Youtube con le dimensioni personalizzate.

Ogni blog ha un suo particolare layout e un'area per gli articoli più o meno larga. Inoltre in questi ultimi tempi su Youtube è possibile caricare anche video in alta qualità e con rapporti diversi dal classico 4:3. Prima la larghezza standard era di 480 pixel adesso è di 560 pixel. Non tutti i blog hanno un layout così ampio e si trovano nella spiacevole situazione di dover adattare il codice manualmente.

E' notizia di poco tempo fa che oltre alle misure standard già disponibili sarà possibile personalizzare il player da incorporare nel sito a seconda delle nostre esigenze di spazio. Quando si clicca su Codice da incorporare, sotto al video, appaiono queste nuove opzioni

JPEG Compress per ridurre la pesantezza delle immagini.

Le dimensioni delle immagini sono espresse generalmente in pixel e riguardano la larghezza e l'altezza. La loro pesantezza è espressa in kilobytes o Megabytes e concerne la dimensione del file. Può essere utile diminuirla per almeno due ragioni: una maggiore facilità  di download e una maggiore velocità di caricamento della pagina, nel caso in cui si posti su un blog.

Il formato più pesante è il GIF mentre quello più leggero è il PNG. Se sia hanno immagini in JPG c'è un semplice tool gratuito online per diminuirne la pesantezza mantenendone inalterata la qualità.

JPEG Compress ha una grafica assolutamente spartana, si carica l'immagine cliccando su Scegli File, quindi si comprime andando su Compress This File

Dividere e riunire file molto grandi con HJ-Split un programma freeware che non ha bisogno di installazione.

Ho già parlato di GSplit che è in grado di spezzettare file di grandi dimensioni (anche piccole!) per rendere più facile spedirli per email o caricarli su hosting che hanno delle limitazioni sulle dimensioni massime dei file da caricare.

HJ-Split è un altro programma che svolge lo stesso compito, è freeware e funziona con tutte le ultime versioni degli OS Windows

• Scarica HJ-Split -

Dopo aver scompattato il file ZIP è sufficiente cliccare sull'unico file .exe e si aprirà una finestra senza bisogno di nessuna installazione

  

                       

Cliccando su Split si aprirà una seconda finestra in cui dovremo

1. Selezionare il file da dividere
2. Scegliere la cartella di uscita
3. Digitare i KB delle dimensioni dei vari pezzi
4. Cliccare su Start per procedere

Dopo pochi secondi il programma ci avvertirà che lo splitting è stato completato e i pezzi in cui è stato diviso il file iniziale saranno contrassegnati da dei numeri progressivi 001, 002, ecc

Non sarà possibile aprire un singolo file ma sarà invece facilissimo ricomporli sempre con l'aiuto di HJ-Split. In questo caso occorre procedere in questo modo

1. Si depositano i pezzi di file tutti nella stessa cartella
2. Si clicca su Join
3. Si seleziona il file contrassegnato dal numero 001
4. Si va su Start nella finestra successiva

 Anche in questo caso l'operazione sarà rapidissima e il file sarà ricomposto perfettamente. I singoli pezzi del file non saranno cancellati e rimarranno a disposizione per una eventuale nuova ricomposizione.

Come modificare le dimensioni del testo nei widget (o gadget) di Blogger.

 Se si digita del testo in un articolo con l'editor di Blogger o con Windows Live Writer si può scegliere la dimensione del carattere in modo molto semplice. La scelta sarà più raffinata in WLW visto che si possono selezionare i pixel del font mentre sarà più all'ingrosso con l'Editor anche aggiornato di Blogger visto che si può scegliere solo tra le opzioni Più piccolo, Piccolo, Normale, Grande, Più Grande.

Quando si deve inserire del testo nella sidebar possiamo andare su Aggiungi un gadget > Testo o Aggiungi un gadget > HTML/Javascript. In entrambi i casi non si possono scegliere le dimensioni dei caratteri

ma si può inserire il grassetto, il corsivo, colorare il testo, inserire un link o una citazione. Sostanzialmente i due tipi di gadget Testo e HTML/Javascripit sono uno soltanto visto che, cliccando rispettivamente su Modifica HTML o Formato RFT, si può passare da uno all'altro.

Per inserire dimensioni diverse in uno stesso widget possiamo utilizzare il seguente codice

<p style="font-size:80%;">Testo da immettere di piccola dimensione</p>
<p style="font-size:130%;">Testo da immettere di grande dimensione</p>

Nel primo caso si avrà un rimpicciolimento del carattere, mentre nel secondo un ingrandimento. Le due percentuali 80% e 130% sono puramente indicative e possono essere sostituite da altre che riteniamo più idonee.

Nel caso in cui oltre al testo avessimo inserito anche del grassetto, del corsivo e dei link, per modificare la dimensione di una parte del testo occorre passare alla Modalità HTML cliccando in alto a destra della finestra Sezioni del sito ed inserire l'espressione font-size:xx%; dopo style=" nella parte del testo che vogliamo ridimensionare. Ecco un esempio su come potrebbe essere un widget di testo con diverse dimensioni di caratteri

Ogni porzione di testo è contrassegnata dal tag iniziale che può essere <p> se si tratta di un paragrafo o <span> se invece non si salta nessuna riga. Nel momento in cui si inseriscono grassetto o corsivo viene a generarsi automaticamente l'attributo style. Per modificare le dimensioni delle singole parti di un testo è sufficiente inserire la percentuale di grandezza del font rispetto a quello di default come mostrato nello screenshot. Per concludere faccio un esempio pratico perché ovviamente questo metodo vale anche per gli articoli e non solo per le sidebar. Il codice 

<p style="font-size:80%;">Testo di piccole dimensioni</p>
<p style="font-size:100%;">Testo di medie dimensioni</p>
<p style="font-size:130%;">Testo di grandi dimensioni</p>

se incollato in Modalità HTML diventa

Testo di piccole dimensioni

Testo di medie dimensioni

Testo di grandi dimensioni

PunyPNG per ottimizzare e ridurre le dimensioni dei file immagine senza perdere in qualità.

Ho già parlato di Smushit, add-on di Firefox, che consente di diminuire le dimensioni delle immagini con beneficio del sito in cui le postiamo. Adesso voglio presentarvi un servizio online che svolge una funzione simile.

PunyPNG ha le seguenti caratteristiche

1. E’ un tool online gratuito per ridurre la dimensione dei file delle immagini
2. Non ci sono limiti al numero di immagini che riesce a ottimizzare
3. Si possono caricare ed ottimizzare più immagini contemporaneamente
4. Supporta i formati GIF, JPG e PNG
5. Massima dimensione consentita per ciascuna foto: 500KB

Per iniziare si clicca sul pulsante verde di Upload Images e si caricano le immagini che si vuole ottimizzare

Per ciascuna immagine caricata sono visibili

1. Dimensione iniziale
2. Dimensione ottimizzata
3. I bytes che sono stati eliminati
4. La percentuale di ottimizzazione
5. Il bottone di download

Si può anche optare per un download complessivo di tutte le immagini ottimizzate cliccando sul bottone più in basso. In questo caso le immagini saranno state raggruppate in un file in formato ZIP. Come vedete in taluni casi il risparmio è veramente notevole.

Questa operazione andrebbe fatta sempre ma è molto importante per le immagini che vengono inserite nella Homepage del blog come per esempio l’header o altre foto che si sono inserite nelle sidebar. Più le immagini pesano maggiore è il tempo di caricamento della pagina e questo dato può penalizzare la posizione sui motori di ricerca.

Adsense da oggi permette di modificare la dimensione del testo degli annunci.

Qualche tempo fa parlai di come fosse possibile modificare il tipo di caratteri degli annunci Adsense spiegando però che le famiglie di font a disposizione erano solamente Arial, Times, Verdana. In  un successivo articolo comunicai che negli USA stavano sperimentando dei formati di testo più grandi.

Adesso è arrivata finalmente la possibilità di gestire il formato del testo degli annunci. Per prima cosa vi mostro gli screenshot degli annunci di default di Adsense e degli annunci con testo in formato grande

         

La differenza tra la dimensione del testo appare evidente ed è probabile che questo configuri un aumento delle performance in termini di click.

Per effettuare la modifica entrare nel proprio account Adsense e cliccare su Impostazioni Adsense > Gestione degli annunci. Cercate l’annuncio che volete modificare attraverso il nome che li avete dato con i criteri di monitoraggio (o canali)

quindi cliccate su Modifica impostazioni annuncio. Nella sezione Tipi di carattere troverete l’opzione per modificare il tipo di font in Famiglia di caratteri, mentre in Font Size c’è questa nuova personalizzazione della dimensione

E’ evidente che scegliere l’opzione Grande è la cosa più saggia da fare se uno vuol ottimizzare le proprie entrate. Successivamente si va in fondo alla pagina e si sceglie Salva Impostazioni. Gli annunci con il nuovo formato saranno visibili dopo 10 minuti.

Come espandere un video di Youtube fino al massimo senza passare alla modalità tutto schermo e come inserirlo nei blog che hanno layout di qualsiasi dimensione.

Per vedere un video di Youtube a tutto schermo basta cliccare su F11 e successivamente su Esc per tornare alla modalità normale. Può però essere interessante vedere il video nella sua ampiezza massima senza arrivare a vederlo a tutto schermo.

Basta modificare leggermente l’URL del video aggiungendo _popup dopo watch come mostrato nell’esempio seguente

www.youtube.com/watch?v=9WjLP837LsY si sostituisce con

www.youtube.com/watch_popup?v=9WjLP837LsY

Ecco come si presenta un video con questa modalità

Con questo sistema si può inserire nel blog un qualsiasi video senza preoccuparci delle dimensioni del nostro modello e quelle dello stesso video. Basta usare un iFrame. Il codice da inserire è il seguente

<iframe src="http://www.youtube.com/watch_popup?v=9WjLP837LsY" align="center" scrolling="yes" width="400" height="300"></iframe>

Dove dopo src= dovete inserire l’URL del video di Youtube a cui avete aggiunto _popup come spiegato in precedenza. I numeri 400 e 300 rappresentano rispettivamente la larghezza e l’altezza e possono essere personalizzati a piacere. Ecco un esempio di questo modo di inserimento

L’unico problema è che risulta difficile inserire il parametro autoplay=”0” per non farlo iniziare automaticamente. Per impedire la riproduzione del video cliccate sul pulsante Pausa.

Come inserire i video in alta qualità nel proprio blog e come modificarne le dimensioni del Player.

In due precedenti articoli ho parlato di come scaricare i video in alta qualità con DownloadHelper, estensione di Firefox, e di come trovarli. Adesso mi occupo di come postarli nel nostro blog. Se avete un account su Youtube andate su Account>altro...

             

Quindi scegliete Impostazione riproduzione e, se avete una connessione veloce, scegliete di riprodurre il video con la qualità superiore se disponibile. Quindi salvate le impostazioni. Per default Youtube riprodurrà il video in modo dinamico a seconda della connessione di chi lo apre. Quindi noi blogger non dobbiamo preoccuparci per nulla di adottare trucchi particolari, fa tutto Youtube automaticamente.

Quando siamo in presenza di video in Alta Qualità che vogliamo embeddare nel nostro sito si può però variare le dimensioni del Player. Youtube ha un player di 425 x 344 pixel. Possiamo aumentare la larghezza e l'altezza in modo proporzionale; volendo possiamo anche ridurla. Ecco qui di seguito una tabellina di possibili dimensioni per il video da embeddare.

Larghezza	Altezza
318	258
425	344
531	430
637	516
743	602

I numeri in rosso sono quelli standard di Youtube.

Nel caso di un video in alta qualità si possono scegliere formati più grandi a seconda del modello che abbiamo. Per modificare la dimensione basta cambiare i numeri delle dimensioni dal codice che abbiamo copiato su Youtube.

 Se noi sostituiamo 425 e 344 con 637 e 516 rispettivamente in tutti e due i posti in cui sono riportati ecco che il video diventa più grande. Ovviamente lo possiamo anche rimpicciolire quanto ci pare se vogliamo inserirlo in un contesto in cui serve più compatto. In ogni caso si può sempre scegliere la modalità a schermo intero che per i video in alta qualità è veramente godibile. Ecco un esempio di un video di dimensioni 637x516 pixel.

Ti è piaciuto l'articolo? Vota Ok oppure No. Grazie Mille! Puoi votare le mie notizie anche in questa pagina.