jblog » Web design

Scroll automatico e animato con “scrollTop” e il plugin “easing”

Giacomo — Mon, 24 May 2010 09:00:17 +0000

In questi giorni ho aiutato un amico alle prese con un sito web a pagina singola e prendendo spunto dal sito vanadiumjs.com ho voluto implementare lo scroll automatico e animato. Dopo un giretto sul web ho trovato questo interessante script da cui ho imparato un po’ di cose che ti ripropongo.

Il mio non è stato solo uno sfizio: poiché la pagina era molto lunga mi sembrava utile inserire questa funzionalità al fine di evitare all’utente l’utilizzo prolungato della rotellina del mouse per poter scorrere la pagina. Certo, si poteva realizzare tutto con dei link interni di tipo “#id” evitando codice js e plugin jquery. Lo abbiamo fatto ugualmente perché la pagina era solo una e un po’ di dinamismo non guasta mai!

La proprietà “scrollTop”. La utiliziamo per delineare le caratteristiche dell’animazione all’interno del metodo $.animate(). Questa proprietà deve essere impostata con un valore intero pari alla distanza (in pixel) tra l’inizio della pagina e la posizione di destinazione.

Il plugin “easing”. Non è fondamentare per realizzare lo scroll animato in quanto all’animazione ci pensa già il metodo $.animate(). Questo plugin ci serve per aggiungere a jquery altri tipi di animazione. Per saperne di più visita la pagina del plugin in cui potrai provare tutte le animazioni.

Animazione “easeInOutQuad”. Il vero motivo per cui utilizziamo il plugin “easing” è per sfruttare l’animazione “easeInOutQuad” (uguale a quella di vanadiumjs.com) molto adatta per uno scroll animato: parte lenta, scorre veloce, e inizia a rallentare prima di arrivare sulla destinazione del link.

Aspetti positivi

Nessun problema se javascript è disabilitato. Poiché utiliziamo dei link interni (o ancore) per chiamare l’animazione sullo scroll, in caso di javascript disabilitato questi link funzioneranno comunque e faranno in modo di proiettare l’utente sul blocco con l’id specificato nell’attributo href.

Normale scroll della pagina inalterato. Nonostante l’animazione, il normale scroll della pagina non viene alterato in alcun modo e la barra di scorrimento continua a funzionare come ci si aspetterebbe.

Codice riusabile. Il codice javascript (e jquery) non dipende dal numero di link che devono avviare uno scroll animato. Infatti l’unica operazione richiesta è quella di specificare la classe comune ai link che avviano lo scroll animato.

Al lavoro!

RISULTATO FINALE: http://test.jblog.it/autoscroll/

DOWNLOAD: http://download.jblog.it/autoscroll.zip

1. Includere jquery e jquery.easing


...


...

2. Attribuire una la stessa classe a tutti i link per lo scroll animato


Blocco 1
Blocco 2
Blocco 3
Blocco 4
Blocco 5

3. Copiare il blocco di codice per lo scroll animato

Anche se mi sembra superfluo dirlo, il seguente blocco di codice deve essere inserito fra i tag .

4. Impostare la classe dei link che avviano lo scroll animato

Demo e download

Per provare lo script: http://test.jblog.it/basicconfirm/

Per scaricare lo script: http://download.jblog.it/basicconfirm.zip

Il plugin jConfirmAction

e link (uguale a quello per la classica “confirm”)


   Delete me

Implementazione base di jConfirmAction

<-- CSS per la formattazione della finestra di dialogo -->

Demo e download

Anche se sul sito del plugin c’é una pagina dimostrativa ho voluto creare una demo svuotata di tutte le cose superflue in modo da evidenziare meglio il funzionamento del plugin.

Per provare lo script: http://test.jblog.it/jconfirmaction/

Per scaricare lo script: http://download.jblog.it/jconfirmaction.zip

Grafica

Per visualizzare correttamente il “fumetto” della dialog box abbiamo bisogno di almeno 2 componenti grafici:

contenitore del testo e dei pulsanti “ok” e “annulla”
sfondo del singolo pulsante

CSS

Questo plugin ha bisogno di alcune righe di codice css che naturalmente possiamo sistemare in un apposito file o incollare nel principale file .css del nostro sito (consiglio quest’ultima pratica per evitare la richiesta http dovuta al singolo file .css per il plugin).

CONFLITTUALITA’. Il problema è che i nomi delle classi sono abbastanza comuni e potremmo averli già utilizzati per altre classi. La soluzione è quella di andare a modificare direttamente il codice html della dialog box che si trova all’interno del file .js del plugin, come vedremo in seguito.

/* CONTENITORE PRINCIPALE */
.question {
	position: absolute;
	display: inline;
	text-align: center;
	width: 174px;
	height: 78px;
	font-size: 13px;
	line-height: 1.5em;
	/* immagine del contenitore del "fumetto" */
	background: url('images/bubble.png') left top no-repeat;
	padding: 10px 0 0 0;
	text-shadow: 0px 1px 0px #fff;
	margin-left: -7em;
	margin-top: -6em;
	opacity: 0;
}

/* PULSANTI */
.yes, .cancel {
	margin-top: .5em;
	margin-right: .5em;
	cursor: pointer;
	display: inline-block;
	width: 63px;
	height: 21px;
	color: #fff;
	text-shadow: 0px 1px 0px #000;
	/* immagine del pulsante */
	background: url('images/button.png') left top no-repeat;
}

HTML

L’html relativa al box del “fumetto” è molto semplice, quindi non credo che avrai grossi problemi se andrai a modificare la struttura del box.

Un buon motivo per modificare l’html è quello di evitare le possibili conflittualità con le classi del css, modificando i nomi delle classi associate ai div in nomi meno generici.

Nel file del plugin la parte relativa al codice html del box è questa:

$(this).after(
''+theOptions.question+'

     '+theOptions.yesAnswer+'
     '+theOptions.cancelAnswer+'
');

Un plugin alternativo

Una valida alternativa è il plugin jQuery Confirm sviluppato da Nadia Alramli.

La caratteristica che lo distingue da jConfirmAction è che quando si clicca sul link scompare il link e appare la domanda (con relativi link “ok” e “annulla”).

Sicuramente è molto più leggero di jConfirmAction in quanto non richiede immagini e codice css. Inoltre ha moltissime opzioni che consentono di adattarlo al meglio alle esigenze del sito.

Fra i due plugin (che sostanzialmente fanno la stesse cose) io continuo a preferire jConfirmAction perché esteticamente il fumetto è più bello!

19 pacchetti di icone completi e definitivi

Giacomo — Mon, 07 Dec 2009 05:20:24 +0000

Durante la realizzazione di un sito arriva sempre il momento in cui è necessario utilizzare dei pacchetti di icone, ad esempio per linkare il profilo sui vari social network o per elencare i metodi di pagamento accettati.

Se stai realizzando un cms la scelta del giusto pacchetto di icone può addirittura diventare un problema. Infatti, poiché un generico cms ha molte funzioni alle quali associare l’icona adatta, a meno che tu non voglia prenderle a caso da google immagini, hai bisogno di pacchetti completi in grado di soddisfare le esigenze attuali (e future) del tuo cms.

Il fatto è che non sempre hai il tempo e la voglia di correre su internet per cercare l’icona adatta, anche perché sarebbe difficile trovarne una allineata allo stile di quelle che stai già utilizzando.

Quindi per non avere più preoccupazioni dai uno sguardo ai seguenti pacchetti di icone e scegli quelli più adatti alle tue esigenze!

Una panoramica dei pacchetti

I pacchetti veramente completi che ti eviteranno tutte le preoccupazioni sono:

Fugue Icons, pacchetto completissimo
FamFamFam Silk Icons, pacchetto completo anche se le icone sono meno della metà di quello precedente
Social Network Icon Pack, icone di vari social network (alcuni non molto conosciuti)
FamFamFam Flag Icons, le bandiere di tutti gli stati del mondo
Chalkwork Payments, icone di varie carte di credito e metodi di pagamento

Per siti graficamente leggeri i 3 pacchetti seguenti hanno icone in bianco e nero (o scala di grigi), secondo me molto delicate e gradevoli:

bwpx.icns
Mini Icons 2
Mini Pixel Icon Set v.1.2

Gli altri pacchetti per un motivo o per l’altro meritavano di essere segnalati.

Fugue Icons

Sia graficamente che per il gran numero di icone che contiene, questo è sicuramente il miglior pacchetto.

Sono in una doppia versione grafica (con e senza ombreggiatura) e il gran numero di icone permette di coprire molti ambiti.

Tuttavia, se non dovessero soddisfarti puoi sempre modificarle grazie ai file .psd inclusi nel pacchetto. Un consiglio: fatti un giro nei file .psd, esplora i livelli, guarda i vari elementi che compongono una singola icona… approfittane per imparare a disegnare le tue icone!

Dato che molte delle icone sono simili a quelle di sistemi operativi o famose applicazioni (es. microsoft word), ci sono concrete possibilità che gli utenti conoscano già la funzione associata, il ché fa guadagnare dei punticini in usabilità.

L’unica pecca che sento di segnalare sta nel fatto che, a differenza di altri pacchetti, non sono suddivise in directory e a volte è veramente dura trovare l’icona desiderata!

Url: http://www.pinvoke.com/
Numero di icone: 2360
Formati: psd, png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by/3.0/

FamFamFam Silk Icons

Fortunatamente le icone di questo pacchetto si assomigliano a quelle precedenti, quindi, se non dovessi trovarne una potrai sempre cercarla nell’altro pacchetto (e viceversa).

Un po’ di tempo fa utilizzai queste icone e l’esperienza è stata molto positiva, grazie anche allo stile molto gradevole e ai colori non troppo forti.

Come il pacchetto precedente, il gran numero di icone permette di coprire molti ambiti e l’unica pecca sta nel fatto che, a differenza di altri pacchetti, non sono suddivise in directory ed è un po’ difficile sfogliarle.

Autore: Mark James
Url: http://www.famfamfam.com/lab/icons/silk/
Numero di icone: 1000
Formato: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by/3.0/

Led Icon Set v1.0

Graficamente tra le più belle, sono particolarmente indicate per applicazioni grafiche e di scrittura.

Autore: Aleksandr Kozmenko
Url: http://led24.de/iconset
Numero di icone: 512
Formato: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Splashy Icons

Abbastanza “piatte”, senza troppe ombreggiature e bordi ma con gradienti ben definiti.

Orientate per l’utilizzo in applicazioni “social” e multimediali.

Url: http://splashyfish.com/sketches/comments/splashy-icons-an-icon-library-for-prototyping/
Numero di icone: 512
Formati: png, MacOSx png
Dimensioni: 16 x 16

Flavour Icon set

Sono molto generiche: difficile stabilire in quali ambiti possano essere indispensabili.

Meritano di essere segnalate per la grafica molto curata ma soprattutto per la presenza di tutti i pulsanti della tastiera, a mio avviso difficili da trovare.

Autore: Oliver Twardowski
Url: http://www.smashingmagazine.com/2009/05/20/flavour-extended…
Numero di icone: 452
Formato: psd, png, MacOSx png
Dimensioni: 48 x 48
Licenza: uso personale e commerciale

Diagona Icons

Mi sembrano una specie di “evoluzione grafica” del pacchetto FamFamFam Silk Icons.

Secondo me sono molto adatte a blog e applicazioni “social”.

Url: http://www.pinvoke.com/
Numero di icone: 400
Formato: png
Dimensioni: 16 x 16, 10 x 10
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Mini Pixel Icons

Graficamente molto delicate, particolarmente adatte a siti di ecommerce data la presenza di carte di credito, borse, carrelli, stampanti, shopping bag, ecc.

Url: http://icondock.com/free/mini-pixel-icons
Numero di icone: 322
Formati: gif
Dimensioni: 14 x 14

Free Web Design Icon Set

Non hanno dei particolari campi di applicazione ma mi sono sembrate molto adatte per cms generici in quanto le icone presenti corrispondono alle più classiche funzioni di un cms, che secondo me sarebbero in grado di soddisfarle completamente.

Url: http://semlabs.co.uk/journal/free-web-design-icon-set
Numero di icone: 310
Formati: png
Dimensioni: 16 x 16

bwpx.icns

Questo pacchetto ha icone molto classiche, quindi adatte a cms generici.

Graficamente molto leggere ma originali. L’autore afferma che:

… ogni icona è stata accuratamente creata un pixel alla volta …

sarà vero? Quanta pazienza!

Autore: Paul Armstrong
Url: http://paularmstrongdesigns.com/projects/bwpx-icns/
Numero di icone: 260
Formati: gif
Dimensioni: 18 x 18
Licenza: http://creativecommons.org/licenses/by-sa/3.0/us/

Mini Icons 2

Graficamente semplici, leggere e molto gradevoli sono particolarmente adatte ad applicazioni di scrittura.

Url: http://www.brandspankingnew.net/archive/2006/12/hohoho.html
Numero di icone: 113
Formato: gif
Dimensioni: 10 x 10
Licenza: http://creativecommons.org/licenses/by-sa/2.5/
Note: al momento della scrittura dell’articolo il link per il download non è funzionante; quindi scaricare l’immagine del post.

Mini Pixel Icon Set v.1.2

Semplici e leggere dal punto di vista grafico; l’autore ha pensato bene di adattarle alla dimensione, variandone leggermente il disegno.

Particolarmente adatte a siti di ecommerce e cms generici.

Autore: Paul Olyslager
Url: http://www.paulolyslager.com/free-mini-pixel-web-icons
Numero di icone: 111
Formati: gif, png, psd
Dimensioni: 25 x 25 (dimensioni e stili variabili)
Note: due versioni di design (con e senza antialiasing).

Tango Icon Library

Questo pacchetto di icone nasce per GNOME, ambiente desktop per Linux.

Credo che non possano essere la soluzione definitiva poiché, essendo orientate a sistemi operativi e applicazioni desktop, non hanno molte di quelle icone ampiamente utilizzate nelle comuni applicazioni web.

Tuttavia, meritano di essere segnalate per lo stile interessante ed originale e per la presenza dei file vettoriali .svg.

Url: http://tango.freedesktop.org/Tango_Icon_Library
Numero di icone: 215
Formati: svg, png
Dimensioni: 32 x 32, 22 x 22, 16 x 16

Twotiny Icon Set

Icone molto generiche, adatte a vari ambiti e, benché non siano tantissime, potrebbero essere una buona soluzione.

Url: http://code.google.com/p/twotiny/
Numero di icone: 122
Formati: gif, MacOSx
Dimensioni: variabili, mediamente 16 x 16
Licenza: http://dev.perl.org/licenses/
Note: nella pagina ci sono due pacchetti; il link per il download relativo a questo pacchetto è “twotiny-plus-expansion.zip”.

Social Network Icon Pack

Questo è in assoluto il pacchetto di icone “social” più famoso.

Almeno per quattro ragioni:

è completo di tutti i principali social network (molti pacchetti di questo tipo non avevano addirittura l’icona di last.fm!)
viene aggiornato spesso (c’è già l’icona di Google Wave)
a differenza della maggior parte delle icone “social” non hanno uno
stile particolare e sono facilmente intonabili con qualsiasi grafica
sono molto fedeli al logo originale (molti pacchetti le personalizzano troppo al punto da non essere riconoscibili!)

Url: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
Numero di icone: 60
Formati: png, MacOSx png
Dimensioni: 32 x 32, 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Chalkwork Payments

In questo pacchetto sono presenti molte carte di credito, da quelle più famose a quelle più recenti o meno conosciute.

Di ogni icona, oltre all’icona base, ci sono 5 varianti (aggiungi, modifica, cancella, sicura, condividi).

Url: http://www.mezzoblue.com/icons/chalkwork/payments/
Numero di icone: 21
Formati: png, tif, gif, bmp, ico, icns
Dimensioni: 32 x 32, 24 x 24, 16 x 16
Licenza: http://www.mezzoblue.com/icons/license/

FamFamFam Flag Icons

Le bandiere di tutti gli stati del mondo in una grafica accettabile e sobria.

Autore: Mark James
Url: http://famfamfam.com/lab/icons/flags/
Numero di icone: 247
Formati: png, gif, MacOSx png, MacOSx gif
Dimensioni: 16 x 11

2s-space Emotions v2

Tante emoticons espressive, divertenti, alternative e ben disegnate. Mi ricordano tanto i cartoni animati giapponesi!

Autore: kirozeng
Url: http://kirozeng.deviantart.com/art/2s-space-Emotions-v2-72785912
Numero di icone: 20
Formati: png
Dimensioni: 256 x 256

PNGs Smilies for Wordpress

Questo pacchetto nasce con l’intento di rimpiazzare le emoticons di wordpress.

Rispetto a quelle di wordpress sono più morbide e gradevoli, anche se proprio per queste caratteristiche risulterebbero meno evidenti all’interno del testo. A te la scelta!

Autore: David Lanham
Url: http://vikiworks.com/2007/09/25/pngs-smilies-for-wordpress/
Numero di icone: 19
Formati: png
Dimensioni: 16 x 16
Licenza: http://creativecommons.org/licenses/by-sa/3.0/

Free smiles

Probabilmente starai pensando: “tutto qui?”. In realtà potremmo definirlo come il “framework degli emoticons“.

All’interno del pacchetto ci sono tutti i pezzi per realizzare le proprie emoticons.

Ho calcolato che con tutte le combinazioni dei diversi pezzi si avrebbero fino a 600 emoticons!

Se non ti va di utilizzare programmi di grafica puoi sempre andare su http://icojoy.com/lj/free/smiles/form.php, uno script in cui potrai comporre e scaricare l’emoticons in pochi secondi.

Url: http://www.icojoy.com/articles/18/
Numero di icone: 10
Formati: psd, png, gif, bmp
Dimensioni: 20 x 20

Problemi con i link?

Hai difficoltà a scaricare i pacchetti? Il sito o la pagina non è più disponibile? Nessun problema!

Io conservo tutti i pacchetti di questa lista. Quindi contattami e li metterò a disposizione per il download.

Perfavore, se qualche link non è più funzionante avvertimi e provvederò ad aggiornare l’articolo. Grazie.

Ti è piaciuta questa raccolta?
Conosci altri pacchetti che meritano di essere segnalati?

10 formati di banner e annunci da evitare

Giacomo — Fri, 19 Jun 2009 02:48:17 +0000

Se stai considerando l’idea di inserire un po’ di banner e annunci sul tuo sito ti consiglio di leggere questo interessante articolo pubblicato su Business Insider in cui vengono classificati i formati più odiati dagli utenti.

L’articolo è stato strutturato molto bene in quanto descrive i 10 formati incriminati fornendo lo screenshot del sito che lo utilizza, il tutto all’interno di una bellissima slide-show.

1. Banner sotto l’header

Spacca in due la pagina e sposta più in basso il suo vero contenuto.

2. Annunci simili al contenuto

Sono ingannevoli e causano l’abbandono involontario del sito da parte dell’utente.

3. Annunci animati

Provoca distrazione e, poiché sono di bassa qualità, riduce la credibilità del sito.

4. Annuncio espandibile al centro della pagina

Obbliga l’utente a cliccare sul pulsante “chiudi”, interrompendo fastidiosamente la navigazione.

5. Banner vicini al logo

Anche se ha il vantaggio di non interferire sulla struttura della pagina e, quindi, di non trascinare ulteriormente in basso il contenuto, riduce lo spazio riservato al logo diminuendo la chiarezza e la visibilità del brand.

6. Banner ampio in alto a sinistra

In molti casi, con un banner di questo tipo gli utenti si accorgono subito che non fa parte del reale contenuto della pagina.

7. Google Ads testuali

Interrompono il contenuto della pagina. Naturalmente il gestore del sito spera che vengano confusi con il contenuto e che, di conseguenza, vengano cliccati.

8. Pulsante “chiudi” nascosto

Spesso nei banner graficamente carini e animati si cerca di camuffare il pulsante “chiudi” o di ritardarne la sua apparizione. In questo caso gli utenti sono costretti a perdere tempo a cercarlo o a sorbirsi tutta l’animazione che generalmente è una sgradevole interruzione della navigazione.

9. Banner “a tutto schermo”

Questo tipo di banner occupa tutta l’area della pagina e obbliga l’utente a cliccare su “continua” (o qualcosa di simile) per accedere ai contenuti desiderati. Abbastanza “violenta” come soluzione.

10. Annunci appariscenti e ben amalgamati

Quando un banner o un annuncio assomiglia graficamente al sito e al suo contenuto tende a fondersi con la pagina risultando indistinguibile agli occhi dell’utente. In questo caso l’utente rimane disorientato, soprattutto se è un assiduo visitatore abituato al normale layout del sito.

Questa è solo una sintesi. Per leggere l’articolo originale e osservare i 10 screenshot dei siti che utilizzano questi formati vai su http://www.businessinsider.com/10-online-ad-formats-people-hate-most-2009-6.

Che ne pensi di questa lista? Secondo te è completa o avresti altri esempi negativi da aggiungere?

Ridurre le richieste HTTP con Mime HTML e data:URL

Giacomo — Mon, 01 Jun 2009 03:41:32 +0000

Il Mime HTML e lo schema data:URL sono due importanti ingredienti nella ricetta che ti permetterà di ridurre le richieste HTTP.

Una pagina Mime HTML è un tipo di pagina web in cui è possibile scriverci sia il codice html sia dei dati come immagini, oggetti flash, file audio
Lo schema data:URL è una tecnica grazie alla quale è possibile inserire i dati nella pagina web (che abbiamo già visto nell’articolo Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css e che riprenderò per evitarti di fare su e giù per il blog)

Non utilizzeremo queste due tecniche separatamente ma ci serviranno per creare il mix esplosivo per caricare quanti più dati possibile in una sola richiesta http: quella della pagina web.

Lo schema data:URL

Per capire bene il Mime HTML è necessario sapere come codificare i file in base64 e come utilizzarli all’interno della pagina per poi vedere l’intera struttura di un documento MHTML.

Il vantaggio fondamentale di questa tecnica consiste nel risparmio di tante richieste http quanti sono gli oggetti e le immagini codificati in base64 che inseriamo nella pagina.

Vediamo subito un esempio.

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

utilizzando la funzione mime_content_type, dopo aver abilitato l’estensione php_mime_magic.dll.
leggendo le informazioni del file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente, il che presuppone che si conosca il tipo dell’oggetto o dell’immagine da inserire.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)


;base64," alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Mime HTML

Il termine “Mime HTML” sta per “Multipurpose Internet Mail Extensions HyperText Markup Language“.

Per avere un’idea di quella che può essere una pagina mhtml (di estensione .mht) pensiamo ad un’email con dei file allegati (che possono essere anche delle immagini presenti all’interno del testo). I file che vengono inviati tramite email, sottoforma di allegati, vengono codificati in base64 e successivamente inseriti nell’intestazione dell’email. Quando il nostro client riceve l’email, prima decodifica gli allegati per renderli fruibili ed eventualmente pronti per il download. Una pagina MHTML funziona grosso modo così.

ATTENZIONE. Una pagina MHTML non deve necessariamente essere quella in cui viene scritto il codice html. Infatti può esserlo anche un file css che utilizza delle immagini (che vedremo successivamente).

Struttura di una pagina MHTML

Generalmente una pagina di questo tipo è composta da 3 mattoni fondamentali:

nell’intestazione si specifica che il file è di tipo “multipart/related”, il separatore dei dati codificati in base64 e il tipo di contenuto del file (es. “text/html”)
la seconda parte è quella relativa ai dati codificati in base 64 separati dal separatore specificato nell’intestazione e definiti dai rispettivi campi “Content-Location”, “Content-Type” e “Content-Transfer-Encoding” (naturalmente, quest’ultimo viene impostato con “base64″). Possono trovarsi anche in fondo alla pagina, il che è meglio poiché si da priorità al caricamento del codice
nella terza parte viene scritto il corpo della pagina (o del messaggio, nel caso delle email) in html, css o altro, all’interno del quale verranno richiamati i dati specificati nella seconda parte del documento

Esempio di documento

L’esempio seguente è una pagina web con allegate 2 immagini, e segue lo schema in figura.

Purtroppo Internet Explorer gestisce diversamente i dati allegati e ci costringe a scrivere due versioni di codice. Tuttavia, questa è una delle rare volte in cui preferisco IE poiché con il browser Microsoft i dati in base64 vengono scritti una sola volta e possono essere richiamati infinite volte all’interno del documento grazie alla stringa specificata in “Content-Location”. Con gli altri browser (Firefox, Opera, Safari, Chrome) è necessario scrivere i dati codificati per ogni utilizzo dell’oggetto o immagine, il che rende il tutto più pesante e ci costringe a pensare due volte prima di decidere di inviare un’oggetto all’interno del documento MIME Html.






  Titolo pagina

Il fatto che queste immagini abbiano questo “strano” formato non ci deve assolutamente far preoccupare. Gli utilizzi sono quelli di sempre: all’interno del tag , come sfondo di un elemento grazie alle regole css, ecc.

Compatibilità con IE. Per gestire la compatibilità con il browser Internet Explorer è necessario inserire l’immagine compatibile con IE all’interno dei tag in cui viene specificata l’immagine in un formato compatibile con i restanti browser. I risultati sono i seguenti:

se si accede alla pagina con un browser diverso da IE, il tag object funzionerà correttamente mostrando l’immagine; il tag al suo interno non verrà preso in considerazione dal browser
nel caso in cui si acceda con Internet Explorer, poiché il tag non funzionerà verrà considerato il tag in cui l’immagine specificata è in un formato compatibile con IE

Regole da rispettare. Per concludere vorrei evidenziare alcune importanti caratteristiche riguardo il formato di un documento MHTML:

“Mime Version” e “Content-Type” devono trovarsi obbligatoriamente in testa alla pagina, prima del
Il primo separatore può essere separato a piacere dall’intestazione del documento
Il separatore (boundary) deve trovarsi esattamente fra i dati in base64 dell’oggetto precedente e le intestazioni dell’oggetto successivo, senza ulteriori “a capo”, “spazi”, “tab”, e altri caratteri
I vari oggetti possono essere separati solo da “fine” (–>) e “inizio” ( possono esserci caratteri di escape (a capo, tab, ecc.)
Prima del separatore è necessario inserire due trattini “–”
Riguardo IE, l’indirizzo da scrivere dopo mhtml: deve essere identico all’indirizzo visibile nella barra degli indirizzi. Questo indirizzo si ottiene dalla variabile riservata $_SERVER['REQUEST_URI']

Utilizzare concretamente Mime HTML e data:URL

Ecco come immagino la generazione di un documento Mime HTML con lo schema data:URL.

Prima fase. Gli oggetti e le immagini vengono codificati in base64 e sistemati all’interno del documento.

Seconda fase. Il browser legge il codice html e decodifica i dati allegati portandoli al loro formato primitivo: le immagini ritornano immagini, gli oggetti flash ritornano animazioni, ecc.

La classe MimeHtmlHandler

Per automatizzare il tutto ho sviluppato una piccola classe PHP che con un paio di righe ti permetterà di inserire all’interno del documento MHtml un’immagine precedentemente allegata.

N.B. la proprietà *background-image serve per rimpiazzare la prima background-image nel caso questa non funzionasse. In particolare, la proprietà *background-image viene utilizzata per IE mentre background-image funziona con i restanti browser.

Il codice dell’esempio precedente è stato ottenuto da questo script PHP:

printHeader();

?>



  mhtml test page


  test #1
  test #2

  inc("2.bmp","image/bmp"); ?>">
	  incIE("2.bmp"); ?>" alt="img3" />
  

 ); *background-image:url(incIE("1.bmp"); ?>);">



incAll();
?>

Caratteristiche principali della classe MimeHtmlHandler

La classe ha due array privati: il primo è quello in cui vengono conservati gli oggetti che vengono inseriti nella pagina in modo da evitare di codificarli e impostarli nuovamente per un successivo inserimento; il secondo è quello relativo ai nomi in codice specificati in “Content-Location” quando si stampa la lista dei dati codificati che verrà utilizzata solo da Internet Explorer.

Le funzioni da utilizzare sono solo due: inc e incIE. Queste due funzioni permettono di inserire oggetti in formati compatibili con tutti i browser e con IE. Inoltre, in base al tipo e al numero di argomenti passati è possibile creare da zero un oggetto o richiamarne uno già inserito.

Quando si vuole stampare un’oggetto già inserito precedentemente il nome del file verrà cercato nell’array degli oggetti. La ricerca viene effettuata a partire dall’ultimo elemento in quanto sono molto più probabili gli inserimenti consecutivi di immagini rispetto a quelli richiesti in punti molto diversi e lontani di una pagina.

Le 3 istruzioni fondamentali

Crea l’oggetto della classe specificando l’url di base delle immagini, il separatore (boundary) e la versione MIME
Stampa l’intestazione “Content-Type” e “MIME Version”
In fondo alla pagina viene stampata la lista dei dati in base64 che servono a Internet Explorer, mentre per gli altri browser i dati codificati vengono specificati all’interno del tag in cui si utilizzano

Come inserire un’immagine

Sono state create due funzioni distinte per l’inserimento di un’immagine compatibile con IE o con gli altri browser (rispettivamente incIE e inc). Analizziamo i casi più comuni relativi all’utilizzo di queste funzioni.

Inserire un’immagine in modo che sia compatibile con tutti i browser. Richiamare la funzione inc() all’interno dell’attributo “data” del tag , passando come parametri il percorso del file e il tipo mime. All’interno dei tag e inserire il tag richiamando la funzione incIE() all’interno dell’attributo “src”. Alla funzione incIE basterà passare solo il nome del file grazie al quale verranno recuperati gli altri dati relativi all’oggetto da stampare.
Inserire un’immagine esistente. Alle funzioni inc() e incIE() basterà passare il nome del file.

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml1/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml1.zip

Esempio2. CSS e data:URL

Per utilizzare la classe MimeHtmlHandler all’interno di un file CSS, la prima operazione da fare è impostare il server Apache in modo che processi i file CSS come file PHP. Per fare ciò basterà aggiungere queste righe:


	AddHandler application/x-httpd-php .css

Infine componiamo il file css:

processandolo come file php si perde la natura del file css che ripristiniamo inviando l’header “Content-Type:text/css”
includiamo la classe MimeHtmlHandler, e richiamiamo le prime due funzioni fondamentali (costruttore e printHeader() )
componiamo il corpo del file css utilizzando, dove occorrono, le funzioni inc() e incIE()
infine, richiamiamo l’ultima funzione fondamentale incAll() per stampare la lista dei file che servirà ad Internet Explorer


/*printHeader();
?>*/

#test1 {
  background-image: url("inc("2.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(incIE("2.bmp"); ?>); /* IE < 8 */
}

#test2 {
  background-image: url("inc("1.bmp","image/bmp"); ?>"); /* normal */
  *background-image: url(incIE("1.bmp"); ?>); /* IE < 8 */
}

div {
  width: 100px;
  height: 100px;
  font: bold 24px Arial;
}
/*incAll();

?>*/

Demo e download

Per vedere una demo vai su http://test.jblog.it/mhtml2/

Per scaricare la classe MimeHtmlHandler e l’esempio vai su http://download.jblog.it/mhtml2.zip

Considerazioni finali

Nei precedenti esempi abbiamo visto solo come utilizzare queste tecniche per allegare le immagini, anche perché è questa la situazione più frequente. Tuttavia, nello stesso modo potresti allegare facilmente oggetti flash e applet Java: nello stesso modo!

Compatibilità IE. Ho testato queste tecniche con Internet Explorer, dalla versione 5.5 alla 8 e non ho riscontrato grossi problemi. Una piccola anomalia si verifica quando si aggiorna la pagina più volte e le immagini non vengono caricate. Sinceramente non so da cosa può dipendere.

Queste tecniche, in confronto ai CSS Sprite sembrano “roba da smanettoni” a causa dell’ammasso di numeri e lettere che genera la codifica in base64 e dell’utilizzo (leggero) di php. Non farti ingannare… In fondo cosa c’è di così difficile?!? Dovrai solo pensare alcuni minuti alle immagini da allegare ai documenti (html, css, ecc.) e analizzare un po’ le velocità di caricamento per capire fino a che punto potranno avvantagiarti. Io dico di provarci!

Non escludo che nella classe MimeHtmlHandler ci possano essere dei bug. Per qualsiasi problema, chiarimento e curiosità sarei felice se mi contattattassi. Dimmi com’è andata e se queste tecniche ti sono state utili: non vedo l’ora di sapere gli esiti dei tuoi esperimenti!

Crediti

Phpied.com – data:urls – what are they and how to use them

Phpied.com – MHTML – when you need data: URIs in IE7 and under

Foto1. Vientiane 04 – Pink Dragonfruit shake di Ben Beiske

Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css

Giacomo — Fri, 15 May 2009 15:04:06 +0000

Dopo il precedente articolo su come utilizzare la cache del browser passiamo ad azioni più concrete per ridurre le richieste http: minimizzare il numero di componenti di una pagina. Dico “concrete” perché, mentre i comportamenti e le tecniche relative alla cache possono avere effetti diversi a seconda del browser e delle sue impostazioni, diminuire i componenti di una pagina è qualcosa che dipende esclusivamente dal webmaster, con risultati e prestazioni prevedibili.

Gestire la cache è fatica sprecata?

Assolutamente no! Il fatto è che ogni utente che accede al sito la prima volta deve comunque attendere il caricamento completo della pagina e dei suoi componenti, che vengono subito memorizzati in cache. Il miglioramento di prestazioni si verifica a partire dalla seconda pagina che viene visitata in quanto i componenti vengono letti dalla cache, evitando di effettuare nuove (e inutili) richieste http.

Vantaggi immediati

Diminuire i componenti di una pagina consente di avere un notevole aumento delle prestazioni che migliora l’esperienza tutti gli utenti, vecchi e nuovi, dalla prima all’ultima pagina.

In questo articolo vedremo alcune tecniche che riducono drasticamente il numero e il tempo di caricamento relativo a immagini, script e css. Queste tecniche non fanno altro che combinare questi componenti in modo da caricarne pochi ma più pesanti anziché molti ma leggeri. Parleremo di image maps, sprite css, dello schema data:URL, di generatori di sprite css, di come combinare automaticamente javascript e css, vedremo che a volte è meglio inserire il codice direttamente nella pagina html, e come è possibile evitare gli script duplicati.

Pochi ma buoni

A primo impatto potrebbe sembrare un’assurdità affermare che “è meglio caricare un file da 300 kbyte anziché 10 file da 40kb”. Fortunatamente non lo è!

Infatti, se prendiamo 10 immagini e le copiamo all’interno di un solo file immagine, quest’ultimo file occuperà molto meno rispetto alla somma delle 10 immagini. Il motivo è che nei file vengono memorizzate tantissime informazioni oltre al contenuto che i software ci mostrano.

Ad esempio, se apriamo una fotografia quello che vediamo è semplicemente un’immagine. Tuttavia, quel file contiene anche una serie di informazioni come: modello fotocamera, altezza, larghezza, risoluzione, ecc.

Caricare una sola immagine (ed un set di informazioni) è meglio che caricare dieci immagini (e dieci set di informazioni) perché:

la dimensione del file più grosso è minore della somma di tanti file più piccoli
tante richieste http si riducono a una sola

Mentre sulla riduzione delle richieste http possiamo essere d’accordo, credo che tu abbia qualche dubbio sul fatto che diminuisca la dimensione del file più grande. Bene, fai questo semplice esperimento:

prendi un’immagine e fanne 10 copie
crea un’immagine grande abbastanza da contenere perfettamente 10 immagini uguali
confronta la dimensione dei 10 file immagine con quella del file immagine più grande

I componenti incriminati

Generalmente si focalizza l’attenzione su immagini, javascript e css perché sono presenti in tutte le pagine e, se mal gestiti, non solo provocano un eccessivo numero di richieste http ma rallentano il normale caricamento delle pagine.

Combinare le immagini: “image maps”

Se vogliamo inserire due immagini affiancate basta combinarle in un unico file immagine e inserire quest’ultimo all’interno della pagina.

I problemi nascono nel momento in cui, ad esempio, vogliamo applicare un diverso link a ciascuna immagine. Infatti, essendo un’unica immagine, non possiamo racchiuderla all’interno di un tag , ma dobbiamo “mappare” le immagini.

Prima di illustrare i tre metodi è necessario descrivere gli strumenti a nostra disposizione.

Il tag

Serve per creare le singole aree, cliccabili o meno, dell’immagine. Non richiede il tag di chiusura completo ().

Formato.

Per creare documenti più accessibili, si può utilizzare il tag … con gli stessi attributi di . Infatti, grazie al tag si può specificare un testo alternativo per l’area.

Formato. href="http://example.com/link1.html" shape="..." coords="..." />Area1


shape: (default, rect, circle, poly), cioè (default, rettangolo, cerchio, poligono). Specifica la forma di una regione.
coords: coordinate. Specificano la posizione e la sagoma. Il numero e l’ordine dei valori dipendono dalla forma specificata da shape.

rect: left-x, top-y, right-x, bottom-y. I vertici opposti del rettangolo.
circle: center-x, center-y, radius. Coordinate del centro e lunghezza del raggio.
poly: x1, y1, x2, y2, …, xN, yN. Coordinate di tutti i vertici del poligono.

href: link associato alla regione.
nohref: impostare con true per specificare che la regione non ha link associati, altrimenti non impostare.
Il tag 
Specifica una mappa da far richiamare da un oggetto. È richiesto il tag di chiusura .
All’interno dei tag … si inseriscono tutte le aree relative alla mappa.
name. Assegna un nome alla mappa.
Associare una mappa a un elemento
Utilizzare l’attributo usemap fra gli attributi dell’elemento, specificando un URI.
Ricorda che un URI può essere un indirizzo del tipo http://www.example… o un id del tipo #nome-mappa.
Formato. 
Image maps lato client
La presenza di usemap implica che l’oggetto sia un immagine. Se non lo è, i browser potrebbero comunque implementare un’interazione con l’utente simile a quella per le immagini. Purtroppo non tutti i browser eseguono correttamente la mappatura di un immagine o di un oggetto.
Un blocco  può contenere sia elementi  sia elementi a livello di blocco come  per aumentare la compatibilità con i browser più datati.

Alcune osservazioni

Se sono presenti contemporaneamente  ed , i browser recenti ignorano il tag 

Se due o più regioni si sovrappongono, la prima regione avrà la precedenza sulle altre
L’elemento  non è compatibile con i browser HTML 2.0

Demo e download
Per vedere una demo vai a http://test.jblog.it/imagemap_cs/
In quest’altro esempio le aree sono rettangolari, circolari e poligonali. http://test.jblog.it/imagemap_cs2/
Per scaricare entrambi gli esempi vai a http://download.jblog.it/imagemap_cs_cs2.zip
Esempio 1
Classico esempio con  all’interno dell’oggetto, ed i tag  all’interno di .


	The cool site!
	
	
		
			Navigate the site:
			Access Guide |
			Go |
			Search |
			Top Ten
		
	
	

Esempio 2
Come utilizzare la mappa richiamandola con usemap, senza inglobarla all’interno dei tag .

	The cool site!
	
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	

Esempio 3
Utilizzo degli elementi .

	The cool site!
	
	
	
		Navigate the site:
		
		
		
		
	

Esempio 4
Questo è un utilizzo concreto della condivisione di una mappa fra più immagini. Questo codice carica l’immagine più interna (navbar1.gif) se l’immagine esterna (navbar1.png) non viene processata correttamente dal browser. Ad entrambe le immagini viene associata la stessa mappa.

	The cool site!
	
	
		
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	

Esempio 5
Utilizzo combinato di  e  per avere una maggiore compatibilità. I browser più recenti non considerano gli elementi .


	The cool site!
	
	
	
		Navigate the site:
		
		
		
		
		Access Guide |
		Go |
		Search |
		Top Ten
	

Esempio 6
Come sovrapporre due aree. Da notare l’ultima coordinata specificata, il raggio). I due cerchi hanno lo stesso centro, ma il primo ha un raggio minore del secondo.
Il risultato è che posizionandosi sul primo (che non ha link) non appare la “manina”. Spostandosi leggermente fuori dal primo ci si posiziona sul secondo (che ha un link) ed appare la “manina”. In pratica, l’area specificata prima ha la precedenza sulle altre che sovrascrive.

	Non ho link
	Ho un link

Image maps lato server
A volte la mappatura delle immagini può essere troppo complicata da scrivere come html.
In questi casi è meglio ricorrere a tecniche lato server.
Partiamo dal codice html. Da notare l’attributo ismap.

	The cool site!
	
	
		
	

Come funziona? Quando ci si posiziona sull’immagine, il browser aggiunge all’url di , quindi a map_script.php, le due coordinate. Ad esempio, se ci posizioniamo sul pixel di coordinate (18,46), il link del tag  verrà trasformato automaticamente da map_script.php a map_script.php?18,46.

Lo script lato server ha il compito di leggere i due parametri $_GET relativi alle coordinate e comportarsi a seconda dei valori letti.
=0 && $x<=118) && ($y>=0 && $y<=28))	 include("guide.html");
elseif(($x>118 && $x<=184) && ($y>=0 && $y<=28)) include("shortcut.html");
elseif( ($x>=(184-30) && $x<=(184+30)) && ($y>=(200-30) && $y<=(200+30)) ) include("search.html");
elseif(($x>220 && $x<=280) && ($y>=30 && $y<=54)) include("top10.html");
?>
Nel codice dell’esempio 1, l’area relatva a top10.html è un poligono. Non è semplice controllare se un punto è presente in un poligono. Bisogna trovare e utilizzare appositi algoritmi e funzioni. Potresti trovarli su geometryalgorithms.com (che nel momento in cui scrivo è “temporaneamente sospeso”).
Script, demo e download
Per vedere e scaricare lo script vai a http://test.jblog.it/imagemap_ss/map_script.txt
Per vedere una demo vai a http://test.jblog.it/imagemap_ss/
Per scaricare l’esempio vai a http://download.jblog.it/imagemap_ss.zip
Image maps lato client e lato server
Per avere la compatibilità con i vecchi browser è bene combinare le due tecniche.

	The cool site!
	
	
		
	
	
		Navigate the site:
		Access Guide |
		Go |
		Search |
		Top Ten
	
	

Il testo alternativo
I tag  con il testo all’interno si utilizzano per avere un testo alternativo nel caso in cui l’immagine non venga caricata.

Naturalmente questo comportamento non è gestito dal browser, infatti il testo dei link appare sempre.
Per nasconderlo è necessario operare con i css. Consiglio anche di guardare le tecniche di “image replacement”.
Script, demo e download
Per vedere lo script vai a http://test.jblog.it/imagemap_css/map_script.txt
Per vedere una demo vai a http://test.jblog.it/imagemap_css/
Per scaricare l’esempio vai a http://download.jblog.it/imagemap_css.zip
Lo schema data:URL
Questa tecnica permette di inserire i dati direttamente nel codice html, risparmiando quindi la relativa richiesta http.
Scopriamo le carte e vediamo subito un esempio.

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?
Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.
Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.
L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

utilizzando la funzione mime_content_type. Deve essere abilitata l’estensione php_mime_magic.dll.
leggendo le informazioni su un file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente.
Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)
" alt="Immagine" />
Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

;base64," alt="Immagine" />
Script, demo e download
Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt
Per vedere una demo vai a http://test.jblog.it/img_base64/
Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip
Gli sprite CSS
Partiamo dalla situazione più comune. Supponiamo di voler realizzare un menù composto da 5 pulsanti grafici che cambino colore quando si passa sopra col mouse. La cosa più logica sarebbe quella di creare 10 immagini: 5 per il pulsante in modalita “normale”, 5 per il pulsante in modalità “mouse sopra”.
Poiché caricare 10 immagini significa effettuare 10 richieste http, utilizziamo la tecnica degli sprite CSS.
Questa tecnica consiste nel:

creare un file immagine abbastanza grande da contenere tutte e 10 le immagini del menù (come ho detto all’inizio dell’articolo, è meglio un’immagine grande anziché tante piccole immagini)
impostare questa immagine come sfondo agli elementi del menù (cioè , 
, , ecc.)

per ogni elemento impostare la proprietà background-position per spostare lo sfondo all’interno dell’elemento in modo da avere l’immagine desiderata

Gli utilizzi di questa tecnica sono infiniti: dal menù al singolo rollover, dalla serie di immagini allineate al contenitore con gli angoli arrotondati.
VANTAGGI

riduce notevolmente le richieste http e migliora il caricamento delle pagine
elimina del tutto i ritardi relativi ai rollover poiché non viene caricata una nuova immagine ma viene spostato lo sfondo

SVANTAGGI

richiede un po’ più di lavoro nell’impostazione dei css e nella creazione delle immagini
non è sempre possibile combinare in una sola immagine tutte le immagini del sito, a causa delle difficoltà che si incontrano nel posizionamento dello sfondo con le regole dei css

Esempio 1
Inserire le immagini con il tag . Questo metodo è a dir poco geniale poiché permette di inserire le immagini come si è sempre fatto col vantaggio di ridurre le richieste http. In pratica viene impostato lo sfondo al tag .
L’articolo completo è di CssGlobe. Lo puoi trovare qui.
Abbiamo bisogno di un’immagine gif trasparente 1px x 1px (spacer.gif), e l’immagine sprite (tuttelefoto.jpg).

tuttelefoto.jpg – L’immagine sprite che utilizzeremo

Sprite CSS - Esempio 1

	
	
	


L’immagine trasparente serve per far assumere al tag  il suo normale comportamento (ad es. in modo che quando selezioni l’immagine si colora l’area di ).
Codice css
#foto1, #foto2, #foto3 { background:url(tuttelefoto.jpg) no-repeat; }
#foto1 { width:100px; height:50px; background-position:0px 0px; }
#foto2 { width:120px; height:90px; background-position:0px -50px; }
#foto3 { width:90px; height:130px; background-position:-120px 0px; }
Demo e download
Per vedere una demo vai a http://test.jblog.it/img_sprite1/
Per scaricare l’esempio vai a http://download.jblog.it/img_sprite1.zip
Esempio 2
Un’altro modo per inserire delle immagini è impostarle come sfondo ad elementi flottanti.

spriteimg.png – L’immagine sprite che utilizzeremo

Sprite CSS - Esempio 2

	
	
	


Demo e download
Per vedere una demo vai a http://test.jblog.it/img_sprite2/
Per scaricare l’esempio vai a http://download.jblog.it/img_sprite2.zip
Codice css
#feedburner { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -5px; float:left; width:91px; height:29px; }
#subscribe { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -35px; float:left; width:127px; height:18px; }
#bookmarks { background:url(spriteimg.png) no-repeat -5px -55px; float:left; width:127px; height:18px; }
Esempio 3
Gli sprite css sono ideali per sviluppare menù di navigazione.

spritemenu.png – L’immagine sprite che utilizzeremo

Sprite CSS - Esempio 3

	
		
		
		
		
		
	


Codice css
#navmenu ul { list-style:none; }
#navmenu li { float:left; list-style:none; }
#navmenu a { display:block; height:30px; width:135px; background:url(spritemenu.png) no-repeat;  }

#nav_homepage a:link, #nav_homepage a:visited { background-position:0px 0px; }
#nav_informazioni a:link, #nav_informazioni a:visited { background-position:-270px 0px; }
#nav_catalogo a:link, #nav_catalogo a:visited { background-position:-560px 0px; }
#nav_indirizzi a:link, #nav_indirizzi a:visited { background-position:-420px 0px; }
#nav_contact a:link, #nav_contact a:visited { background-position:-135px 0px; }

#nav_homepage a:hover, #nav_homepage a:focus, #nav_homepage a:active { background-position:0px -30px; }
#nav_informazioni a:hover, #nav_informazioni a:focus, #nav_informazioni a:active { background-position:-270px -30px; }
#nav_catalogo a:hover, #nav_catalogo a:focus, #nav_catalogo a:active { background-position:-560px -30px; }
#nav_indirizzi a:hover, #nav_indirizzi a:focus, #nav_indirizzi a:active { background-position:-420px -30px; }
#nav_contact a:hover, #nav_contact a:focus, #nav_contact a:active { background-position:-135px -30px; }
Demo e download
Per vedere una demo vai a http://test.jblog.it/img_sprite3/
Per scaricare l’esempio vai a http://download.jblog.it/img_sprite3.zip
Generatori di Sprite CSS
I generatori di sprite css semplificano la creazione di un’immagine abbastanza grande da contenere tutte le immagini da utilizzare nel proprio sito. Questi, secondo me, sono i migliori.
Generatore di Sprite CSS

http://spritegen.website-performance.org/

https://launchpad.net/css-sprite-generator (codice sorgente)
CSS Sprites Generator

http://www.csssprites.com/
CSS sprites for humanoid beings (and the like)

http://printf.ru/spritr/
SmartSprites (Alpha!)

http://smartsprites.osinski.name/
Combinare javascript e css
Spesso una pagina richiama più di uno script e più di un css. Per ridurre le richieste http relative ai css (o agli script) basta copiare il contenuto di tutti i file css (o script) in un unico file.
Il bello di questa tecnica è che, a differenza delle immagini, è quasi sempre possibile combinare tutti i file dello stesso tipo in un unico file. Il “quasi” è dovuto al fatto che alcuni script, se inseriti nello stesso file, potrebbero dare dei problemi. Quindi è sempre meglio testare il funzionamento dello script combinato. Se si verificano dei problemi, basta escludere dalla fusione i file “incompatibili”.
La combinazione degli script in un unico file può essere eseguita in due modi:

manualmente, cioé copiando il contenuto di ogni script all’interno di un file più grande
dinamicamente, ricorrendo a semplici script lato server

Gli script lato server che vedremo sono strutturati in 5 fasi:

lettura dei nomi dei file da includere passati come parametri $_GET
impostazione delle opzioni
inclusione effettiva dei file
stampa dei campi di intestazione con la funzione header() per la gestione della cache, il tipo mime, ETag
stampa del contenuto finale del file

Script php: combinare più file css
La particolarità dello script relativo ai file css è che per ogni file da includere è necessario specificare l’attributo media (all, screen, print, ecc.), cioé quell’attributo che indica il tipo di dispositivo per cui deve valere quel file css. Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.
Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.
Codice html

Impostare Apache
Poiché lo script che ha l’estensione .css è necessario impostare il server Apache affinché processi il file combined.css come un file .php. Basterà aggiungere un paio di righe.

	AddHandler application/x-httpd-php .css

Script, demo e download
Per vedere lo script vai a http://test.jblog.it/combine_css/combine.txt
Per vedere una demo vai a http://test.jblog.it/combine_css/combine.css?file1:all&file2:screen&file3:print
Per scaricare l’esempio vai a http://download.jblog.it/combine_css.zip
Script php: combinare più file javascript
Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.
Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.
Codice html

Impostare Apache
Poiché lo script che ha l’estensione .js è necessario impostare il server Apache affinché processi il file combined.js come un file .php. Basterà aggiungere un paio di righe.

	AddHandler application/x-httpd-php .js

Script, demo e download
Per vedere lo script vai a http://test.jblog.it/combine_js/combine.txt
Per vedere una demo vai a http://test.jblog.it/combine_js/combine.js?file1&file2&file3
Per scaricare l’esempio vai a http://download.jblog.it/combine_js.zip
Stampare javascript e css nel codice html
Sappiamo che per utilizzare codice javascript o css ci sono 3 modi:

stamparli direttamente nel codice html
dividerli su più file esterni (da richiamare)
stamparne alcuni e richiamare gli altri

Il terzo metodo
Come succede in tante occasioni, la “via di mezzo” è da preferire. La successiva domanda è: su che criterio si scelgono i file da stampare nel codice html e quelli da richiamare esternamente?
Sinceramente, non saprei dirlo con precisione. Probabilmente esistono degli studi che potrebbero aiutarti in questo. Secondo me, il codice da stampare nel documento html è quello che presumibilmente potrebbe essere utilizzato prima. Ad esempio:

per javascript, il codice e le funzioni che verranno eseguite nell’evento “onload” dell’oggetto “document”
per i css, il codice che serve a formattare gli elementi principali della pagina, come html, layout, contenitori, ecc.

Come automatizzare il tutto
Fortunatamente, questa tecnica si può automatizzare con un paio di righe di codice lato server (php).


Javascript e Css nella pagina













	Javascript e Css nella pagina
	Guarda il codice html


Script, demo e download
Per vedere lo script vai a http://test.jblog.it/inhtml/inhtml.txt
Per vedere una demo vai a http://test.jblog.it/inhtml/
Per scaricare l’esempio vai a http://download.jblog.it/inhtml.zip
Eliminare gli script duplicati
Quando si gestiscono grandi progetti si rischia di stampare e richiamare gli stessi script.
Alcuni browser, come Firefox, evitano di effettuare una nuova richiesta http per un file che è stato già scaricato. Purtroppo Internet Explorer non lo fa. Allora è necessario trovare una soluzione che valga per tutti.
Una semplice soluzione consiste nel fare una funzione php che riceva il nome del file da linkare e si occupi di stampare i tag 
Classe PHP: noDuplicate (per php 4 e php 5)


Ti descrivo brevemente la classe “noDuplicate”.
La struttura
class noDuplicate
{
	/* Array dei file javascript */
	var $js_array = array();

	/* Array dei file css */
	var $css_array = array();

	/* Stampa i file specificati. */
	function incScript() { ... }

	/* Privata: registra il file e stampa il link al file javascript */
	function __js($file) { ... }

	/* Privata: registra il file stampa il link al file css */
	function __css($file) { ... }
}
Creare l’oggetto
$noDuplicateObj = new noDuplicate();
La funzione incScript()

il primo argomento deve essere “js” o “css”
dal secondo argomento in poi accetta da uno a più file dello stesso tipo
se si devono inserire file .css è necessario passarli nella forma [nomefile]:[media] (ad es. “style.css:print”). Se vengono passati nella forma normale (“style.css”,”file.css”) verrà automaticamente impostato “all” come media

// singolo file
$noDuplicate->incScript("css","file2.css:all");
$noDuplicate->incScript("js","file1.js");

// più di un file
$noDuplicate->incScript("css","file2.css:all","mystyle.css:screen");
$noDuplicate->incScript("js","file1.js","jquery.js","prototype.js");

// file css senza specificare il "media"
$noDuplicate->incScript("css","file1.css","file3.css");

Risultato














Script, demo e download
Per vedere lo script vai a http://test.jblog.it/rem_duplicate/rem_duplicate.txt
Per vedere una demo vai a http://test.jblog.it/rem_duplicate/
Per scaricare l’esempio vai a http://download.jblog.it/rem_duplicate.zip
Conclusione
Queste tecniche esprimono la massima utilità e potenza se utilizzate contemporaneamente. La riduzione di richieste http e, quindi, l’abbassamento dei tempi di caricamento saranno notevoli.
Spero di essere stato abbastanza esaustivo e chiaro. Se non lo sono stato basterà dirmelo in modo da ritoccare l’articolo nelle sezioni meno comprensibili.
Hai mai utilizzato una di queste tecniche? Gli script hanno funzionato correttamente? È stato semplice metterle in pratica? Hai avuto concreti miglioramenti?
Prossimo appuntamento
L’ultima questione sull’ottimizzazione dei siti web riguarda appunto l’ottimizzazione dei componenti da caricare cioé:

compressione delle immagini, degli script e dei css
offuscamento del codice javascript
utilizzo di gzip per la compressione delle pagine html, script e css

Non perdere il prossimo articolo sull’ottimizzazione dei componenti delle pagine web: codice html, immagini, script e css.
Crediti

Libro. Creare siti web ad alte prestazioni di Steve Soulders
WebSiteOptimization – Combine Images to Save HTTP Requests
Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
W3C – Objects, Images, and Applets: Image maps
The Internet Engineering Task Force – The “data” URL scheme
CssGlobe – Creating easy and useful CSS Sprites
Foto1: Mast Farm Picnic – 030 di JasonBechtel
Foto2: Davide Rebellin Argento, la prima medaglia italiana di queste Olimpiadi di olimpiadi.blogosfere.it
Foto3: Cats Puzzle di kaibara87
Foto4: icone per sviluppatori
Foto5: Puzzle di Egan Snow
Foto6: Do not duplicate di Sam UL



Mappa del blog
Giacomo — Mon, 13 Apr 2009 13:17:58 +0000



Contattami
Giacomo — Mon, 13 Apr 2009 13:53:41 +0000









NOME (richiesto)


EMAIL (richiesta)


SITO WEB




OGGETTO




 Per favore, inserisci il codice di sicurezza


 



Puoi contattarmi direttamente su 



Bookmarks
Giacomo — Mon, 13 Apr 2009 13:50:48 +0000
Ecco la lista completa di tutti i miei siti, blog, pagine e link preferiti divisi per categoria.
Puoi trovare di tutto: da siti e blog tecnici a servizi web, da tutorial a giochi online.
N.B. per ogni categoria, i link più recenti si trovano all’inizio.
Spero possano esserti utili. Buona navigazione!



In evidenza
Giacomo — Mon, 13 Apr 2009 12:45:54 +0000
Di seguito sono elencati quelli che, secondo me, sono i migliori articoli e i migliori podcast.



Archivi e feed
Giacomo — Sun, 12 Apr 2009 14:03:38 +0000
Hai perso gli ultimi articoli o podcast? Vorresti ritrovare un articolo che hai letto o un podcast di cui non ricordi il titolo? Nessun problema! In questa pagina hai tutto quello che ti serve per ritrovare i contenuti persi.
Articoli: sono divisi per mese, categoria, e tag.
Podcast: nella pagina “podcast” ci sono tutti, e sono divisi in base al formato (audio, video, ecc.)
Feed: tutti i link ai feed di jblog, per restare sempre aggiornato e non perdere nessun articolo, commento, pocast e novità.
Feed di jblog
Non sai cosa sono i feed? In fondo alla pagina c’è una piccola guida che potrebbe esserti utile.
Questo blog ha diversi formati di feed. Iscrivendoti riceverai gli ultimi 15 articoli e podcast pubblicati.
Gli articoli sono riportati per intero, in modo che tu possa leggerli comodamente dal tuo feed aggregator.
Iscriversi ai feed è completamente gratuito (e consigliato   ).
Altri feed? Per ogni articolo c’è la possibilità di iscriversi al feed dei commenti: troverai il link vicino al form. Nell’archivio di ogni categoria, vicino al titolo, troverai il link per iscriverti al feed della categoria. Nell’archivio di ogni tag, vicino al titolo, troverai il link per iscriverti al feed del tag.
Se non sai quale scegliere, ti consiglio “FeedBurner” in quanto è più efficiente e mi consente di tenere d’occhio le iscrizioni ai feed.


Feed: mini guida
I feed sono dei file xml in cui ci sono gli ultimi contenuti pubblicati dal relativo sito/blog (solitamente 10-15 articoli) .
I feed sono raggiungibili tramite un indirizzo, proprio come quello di un sito web (es. http://www.example.com/feed).
Un’ultima cosa… iscriversi ai feed e leggerli è completamente gratuito!
A cosa servono?
Sono utilissimi perchè, grazie a degli appositi software e servizi web, puoi ricevere e leggere gli articoli evitando di visitare il sito/blog,  risparmiando un po’ di tempo.
Cosa devo utilizzare per leggere i feed?
I browser moderni offrono alcuni strumenti semplici e immediati per la ricezione dei feed. Purtroppo la maggior parte dei browser permette di ricevere solo i titoli (con link) degli articoli. Quindi risulta comunque necessario visitare il sito/blog per leggere l’intero articolo. Tuttavia, potresti installare opportune estensioni per il browser che utilizzi ed avere il controllo completo sui feed che ricevi e leggere interamente l’articolo.
In alternativa, esistono tantissimi software e servizi web che ti permettono di leggere e gestire i feed provenienti da più di un sito/blog.

 
Software
 Se vuoi utilizzare un software, eccone alcuni gratuiti:

RSSOwl (con cui mi trovo veramente bene) [win,mac,linux]
Yeah Reader [win]


FeedDemon [win]


NetNewsWire [mac]


Vantaggi: una volta scaricato un feed puoi consultarlo senza la connessione internet, perché rimane memorizzato nel pc.

Svantaggi: puoi consultarli solo utilizzando il tuo pc; quindi se non sei a casa o non hai un notebook non potrai far altro che aspettare di ritornare a casa… 


 
Servizi web-based
Ecco alcuni dei servizi web più famosi:

Google Reader
Bloglines
PageFlakes
Netvibes
MyYahoo!


Vantaggi: in qualunque parte del mondo tu sia, basterà avere una discreta connessione a internet per avere a portata di mano tutti i tuoi feed.

Svantaggi: per consultarli è sempre necessario essere connessi; inoltre, poichè il servizio web non è altro che un sito dovrai attendere il caricamento delle pagine del sito. 

Come faccio ad ottenere l’indirizzo del feed e iscrivermi?
Nei browser moderni per ottenere l’indirizzo del feed del sito/blog che stai visitando guarda intorno alla barra dell’indirizzo e individua l’icona  oppure la parola RSS. Cliccando sul pulsante solitamente compare un menù con i vari feed. Se non trovi nulla, guarda in fondo alla pagina e cerca le parole “entries”, “feed”, “rss”, “xml”, ecc.
Potrebbe esserci più di un feed?!? Certo. Potresti trovare più formati di feed (rss, atom, rdf) per ricevere gli ultimi articoli, oppure dei feed con dei contenuti diversi (es. ultimi articoli di una categoria, gli ultimi commenti di un articolo).
Allora come faccio a scegliere quello giusto? Leggi attentamente le etichette dei vari feed e, per assicurarti che sia quello giusto, clicca e si aprirà la pagina del feed (che sarà totalmente diversa dalle pagine del sito/blog).
Adesso posso finalmente iscrivermi? Ok, ci siamo. Copia l’indirizzo della pagina del feed, apri il tuo software o il servizio web che userai per leggere i feed e clicca su una delle voci “nuovo”, “iscriviti”, “aggiungi”, “new”, “add”, “add bookmarks”, ecc. Tra i vari campi di testo e opzioni l’operazione che dovrai fare sicuramente sarà quella di incollare l’indirizzo del feed all’interno di un campo di testo.
L’ultimo passo. Ora che hai completato l’iscrizione sarà necessario aggiornare il feed cliccando su una delle voci “ricevi”, “aggiorna”, “update”, ecc. N.B. alcuni software/servizi web lo fanno automaticamente nel momento in cui ti iscrivi.



Informazioni
Giacomo — Sun, 29 Mar 2009 14:37:03 +0000
Qui trovi tutte le informazioni su di me, sul blog, sulla gestione dei dati personali, copyright, ecc.



Chi sono
Perché ho deciso di aprire un blog
Di cosa parlo in questo blog
Podcast e contenuti multimediali
F.A.Q. – Domande frequenti
Licenza Creative Commons
Responsabilità
Trattamento dei dati personali
Copyright
Crediti
Plugins

Chi sono
Mi chiamo Giacomo Ratta e sono nato nel 1987. Sono di Porto Cesareo, un paese di mare in provincia di Lecce, ma abito quasi tutto l’anno a Torino per studiare Ingegneria informatica. Ho frequentato l’istituto tecnico industriale a Galatone (LE), dove ho scritto le mie prime righe di codice!
Quali sono i tuoi hobby? Ho la passione per la musica, suono il basso e la tastiera, e spero di ritornare presto a suonare in una band. Mi piace anche gironzolare in mountain bike per le colline torinesi, ma ultimamente è sempre più difficile trovare il tempo per farlo!
La passione per internet e per l’attività di webmaster è nata nel 2006, molto più recentemente rispetto alle altre, frequentando un corso pomeridiano di php offerto dalla scuola.
Da qui è nata una curiosità continua, una voglia irrefrenabile di imparare qualcosa di nuovo che mi permettesse di fare siti migliori, più interattivi e più efficienti.
Spero che anche tu abbia la stessa passione e voglia di imparare.
Perché ho deciso di aprire un blog
I primi due anni dopo il diploma ho deciso di iscrivermi all’università e, contemporaneamente, iniziare a lavorare come webmaster indipendente: lavorando da solo non potevo buttarmi in progetti troppo impegnativi e l’unica possibilità era quella di realizzare dei siti “vetrina”.
Il terzo anno mi sono trasferito a Torino per studiare ed ho lasciato l’attività di webmaster, ma non ho smesso di leggere libri e navigare su internet in cerca di cose interessanti.
Allora ho pensato: “perché non condividere le cose che imparo ogni giorno scrivendole su un blog?”.
In questa scelta mi ha influenzato tantissimo l’esempio di alcuni blogger che hanno rinunciato al “denaro sicuro” per dedicarsi a fare quello che più li piace.
Quello che mi piace fare è:

leggere riviste di informatica, libri e manuali riguardanti internet, che non parlano solo di questioni tecniche, ma anche di argomenti teorici come usabilità, accessibilità, grafica web, ecc.
visitare siti e blog (internazionali e italiani) dai quali imparare il più possibile e avere sempre le ultime notizie

…ma soprattutto fornire dei consigli utili e condividere le mie conoscenze.
Di cosa parlo in questo blog
Innanzitutto ci tengo a precisare che non sono un guru o un esperto, ma ti posso assicurare che ho tanta passione per quello che faccio e cercherò di scrivere articoli sempre più utili e interessanti.
Gli articoli riguardano soprattutto:

php, mysql, apache
javascript, jquery, tecniche ajax e altri framework javascript (es. mootools, prototype, scriptaculous)
programmare con le API (google maps, twitter, facebook, bit.ly, ecc.)
wordpress (personalizzare e ottimizzare)
web design (xhtml, html5, css, usabilità, accessibilità, trends, ispirazioni)
internet news e novità dei principali siti web
twitter, facebook e altri social network
browser e motori di ricerca
ottimizzazioni per motori di ricerca (SEO)

Se sei un webmaster alle prime armi, questo blog fa sicuramente per te!
Podcast e contenuti multimediali
Alcuni dei blog che visito più spesso fanno uso di podcast (audio o video) dei quali si può effettuare il download o la riproduzione in streaming.
Dal primo momento ne ho potuto apprezzare la comodità. Infatti puoi ascoltare un podcast mentre navighi su altri siti, oppure copiarlo nel tuo lettore mp3 e ascoltarlo quando e dove più ti piace. Bello, vero?!? 
Certo, produrre dei podcast di qualità (con background musicale, scritte, immagini, titoli) richiede molto lavoro, ma spero che apprezzerai l’impegno.
Ti fornirò tutti gli strumenti e le informazioni per poter ascoltare, vedere ed effettuare il download dei miei podcast.
Cercherò di produrre questi tipi di podcast:

versione audio per ogni articolo
versione video degli articoli più interessanti
news settimanali, video e audio

F.A.Q. – Domande frequenti
Posso copiare, modificare o citare i tuoi articoli?
Puoi utilizzare tutti i contenuti di questo blog a tuo piacimento e a qualsiasi scopo (che non sia commerciale).
Tuttavia, assicurati di rispettare la licenza Creative Commons e il copyright.
Posso tradurre e pubblicare interamente un articolo nel mio sito?
Solo se viene tradotto e pubblicato in un sito che non è in lingua italiana.
Tuttavia, assicurati di rispettare la licenza Creative Commons e il copyright.
Saresti disponibile a scrivere un “guest post”?
Mi piacerebbe tantissimo, anche perché mi daresti l’opportunità di farmi conoscere da altri lettori. Basterà contattarmi via email per decidere l’argomento dell’articolo.
Posso pubblicare un “guest post” su jblog.it?
Certo, ma solo se l’articolo è in tema con il blog o potrebbe comunque interessare i miei lettori.
Scriveresti un articolo su un particolare argomento a richiesta?
I suggerimenti sono sempre ben accetti. Se vuoi saperne di più su un nuovo linguaggio di programmazione o su una particolare notizia ti basterà contattarmi e se avrò sufficiente materiale a disposizione pubblicherò l’articolo entro qualche settimana. E poi sarei sicuro che  almeno un lettore fosse interessato a ciò che scrivo!  
Saresti disponibile ad aiutare un singolo lettore alle prese con un particolare problema?
Se ne avrò il tempo e la capacità, sarò felice di aiutare chiunque abbia un problema (anche non troppo comune): potrebbe venirne fuori un bell’articolo! Ricordati di frequentare anche i forum: è lì che potresti trovare un aiuto concreto da parte di gente molto più esperta di me.
Puoi aggiungere il mio sito nei tuoi bookmark?
Come per i “guest post”, se è in tema con il blog e può interessare ai lettori il tuo sito sarà il benvenuto nella mia “lista dei preferiti”. Devi sapere che questo non è uno “scambio link”, quindi non pretendo che il mio link compaia nelle pagine del tuo sito. Se ti va, puoi segnalarmi anche siti e blog interessanti che non sono tuoi in modo da farli conoscere anche ad altri.
Licenza Creative Commons
I contenuti pubblicati su jblog sono distribuiti con licenza Creative Commons, eccetto dove diversamente ed esplicitamente indicato.
Oltre alle condizioni della precedente licenza si richiede che:

il contenuto riprodotto non superi il 50% dei caratteri di quello originale
sia indicato chiaramente il nome dell’autore e il link verso l’articolo originale
si possa ottenere in qualsiasi momento l’immediata e incondizionata rimozione dei contenuti

Se ti interessa riprodurre o modificare i contenuti di questo blog non posso far altro che esserne felice.
L’unica cosa che ti chiedo è di inviarmi il link della pagina del tuo sito (oppure un “ping”) in modo da fornirti altri dati, link e risorse che potrebbero esserti utili per fare un articolo migliore del mio.
Responsabilità
jblog non si assume alcuna responsabilità per danni causati, direttamente o indirettamente, dall’utilizzo delle informazioni presenti in questo blog.
jblog non si assume alcuna responsabilità sul contenuto dei siti esterni linkati dagli autori.
Gli autori di questo blog, per quanto cerchino di controllare tutti i contenuti scritti o linkati dagli utenti ed eliminare quelli in cui si manifesti una violazione della legge, non si assumono alcuna responsabilità su di essi.
Trattamento dei dati personali
jblog raccoglie automaticamente l’indirizzo ip nel momento in cui si accede al sito.
jblog raccoglie nome, email, sito web nel momento in cui si scrive un commento o ci si iscrive ad un servizio (es. newsletter).
I dati raccolti non verrano mai utilizzati eccetto in caso di richiesta da parte delle autorità competenti.
jblog è disponibile a fornire tutte le informazioni riguardanti la politica di raccolta e di trattamento dei dati personali.
Copyright
Gli elementi grafici, il codice HTML/XHTML, fogli di stile (.css) e tutti gli script sono da considerarsi di esclusiva proprietà di Wordpress e jblog.it.
Tutti i marchi citati e i loghi riprodotti in questo blog appartengono ai legittimi proprietari, e sono citati a scopo informativo e/o didattico.
Crediti
Wordpress
Cms per la creazione di blog, basato su php e mysql.
Php
Linguaggio di scripting interpretato per lo sviluppo di applicazioni web e stand-alone, con una sintassi simile a C e Perl.
MySql
Database management system relazionale rilasciato gratuitamente ma di proprietà di Sun Microsystems.
jQuery
Framework javascript, Ajax e DHtml.
Aesthetica Icons (di DryIcons)
Pacchetto di oltre 150 icone.
Aesthetica 2.0 Icons (di DryIcons)
Pacchetto di oltre 150 icone.
Classy Icons (di DryIcons)
Pacchetto di circa 300 icone.
Blogging Icons Set
80+ icone di social network con relative miniature.
Social Media Network Icons
Raccolta gratuita di icone “glossy” per il blogging.
Plugins
Akismet (di Matt Mullenweg)
Analizza i commenti per selezionare quelli che potrebbero essere spam.
Audio player (di Martin Laine)
Player mp3 “a traccia singola” altamente flessibile e personalizzabile.
Breadcrumb Navigation XT (di Michael Woehrer)
Visualizza le “briciole di pane” (breadcrumbs) che indicano il percorso fatto per raggiungere la pagina corrente.
Contact Form 7 (di Takayuki Miyoshi)
Permette di aggiungere un form per la scrittura e l’invio delle email direttamente dal blog.
DoFollow (di Kimmo Suominen)
Disabilita l’attributo rel=”nofollow” dei link nei commenti.
Google XML Sitemaps (di Arne Brachhold)
Compone una sitemap nel formato xml, compatibile con i principali motori di ricerca (Google, Yahoo!, Msn, Ask).
Popularity Contest (di Alex King)
Controlla la popolarità dei post basandosi su circa 10 parametri come: commenti ricevuti, letture, trackbacks, ecc.
Related Posts (di Michele Gobbi)
Visualizza una lista di post correlati (basata sulla corrispondenza delle parole chiavi) con la relativa immagine (di cui si possono scegliere le dimensioni).
RSS Includes Pages (di Marios Alexandrou)
Permette di includere le pagine (e non solo i post) all’interno dei feed. Particolarmente utile per chi utilizza Wordpress come un CMS.
Search Unleashed (di John Godley)
Motore di ricerca avanzato che permette una ricerca “Full Text” cercando attraverso post, pagine, commenti, titoli e url. Nella pagina dei risultati vengono evidenziate le diverse parole chiave.
SEO Friendly Images (di Vladimir Prelovac)
Aggiunge alle immagini gli attributi “alt” e “title” per aumentare il traffico proveniente dai motori di ricerca.
SEO Title Tag (di Stephan Spencer, Netconcepts)
Permette di ottimizzare i titoli delle pagine (post, pagine statiche, categoria, tag, url generiche) aggiungendo un titolo personalizzato. Nell’area amministrativa si avrà a disposizione un pannello per la modifica di massa, evitando di aprire un post (o altro) alla volta.
Show Top Commentators (di Nate Sanden)
Visualizza la lista dei lettori del blog che hanno lasciato più commenti, aggiungendo il link verso il proprio sito (senza rel=”nofollow”).
Subscribe To Comments (di Mark Jaquith)
Gestisce l’iscrizione ai nuovi commenti in modo da riceverli via email.
WP-PageNavi (di Lester ‘GaMerZ’ Chan)
Permette di avere una navigazione più avanzata fra le pagine dei post.

jblog » Web design

Scroll automatico e animato con “scrollTop” e il plugin “easing”

Aspetti positivi

Al lavoro!

1. Includere jquery e jquery.easing

2. Attribuire una la stessa classe a tutti i link per lo scroll animato

3. Copiare il blocco di codice per lo scroll animato

4. Impostare la classe dei link che avviano lo scroll animato

Demo e download

Il plugin jConfirmAction

e link (uguale a quello per la classica “confirm”)

Implementazione base di jConfirmAction

Demo e download

Grafica

CSS

HTML

Un plugin alternativo

19 pacchetti di icone completi e definitivi

Una panoramica dei pacchetti

Fugue Icons

FamFamFam Silk Icons

Led Icon Set v1.0

Splashy Icons

Flavour Icon set

Diagona Icons

Mini Pixel Icons

Free Web Design Icon Set

bwpx.icns

Mini Icons 2

Mini Pixel Icon Set v.1.2

Tango Icon Library

Twotiny Icon Set

Social Network Icon Pack

Chalkwork Payments

FamFamFam Flag Icons

2s-space Emotions v2

PNGs Smilies for Wordpress

Free smiles

Problemi con i link?

Ti è piaciuta questa raccolta? Conosci altri pacchetti che meritano di essere segnalati?

10 formati di banner e annunci da evitare

1. Banner sotto l’header

2. Annunci simili al contenuto

3. Annunci animati

4. Annuncio espandibile al centro della pagina

5. Banner vicini al logo

6. Banner ampio in alto a sinistra

7. Google Ads testuali

8. Pulsante “chiudi” nascosto

9. Banner “a tutto schermo”

10. Annunci appariscenti e ben amalgamati

Ridurre le richieste HTTP con Mime HTML e data:URL

Lo schema data:URL

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

Script, demo e download

Mime HTML

Struttura di una pagina MHTML

Esempio di documento

Utilizzare concretamente Mime HTML e data:URL

La classe MimeHtmlHandler

Caratteristiche principali della classe MimeHtmlHandler

Le 3 istruzioni fondamentali

Come inserire un’immagine

Demo e download

Esempio2. CSS e data:URL

Demo e download

Considerazioni finali

Crediti

Ridurre le richieste HTTP (parte 2): come unire e combinare immagini, script, css

Gestire la cache è fatica sprecata?

Vantaggi immediati

Pochi ma buoni

I componenti incriminati

Combinare le immagini: “image maps”

Il tag

Il tag

Associare una mappa a un elemento

Image maps lato client

Alcune osservazioni

Ti è piaciuta questa raccolta?
Conosci altri pacchetti che meritano di essere segnalati?