E’ possibile provare una versione beta del nuovo Html Validator del W3c, che migliora l’interfaccia grafica e la rende più accessibile anche con l’introduzione dei tasti di scelta da tastiera (accesskey).
Aumenta il numero degli standard riconosciuti nonché la chiarezza degli errori riportati. Disponibili anche suggerimenti da utilizzare nella costruzione delle pagine.
Dopo avere delimitato le zone di interesse, torniamo al nostro layout grafico e individuiamo le aree destinate ad essere salvate come “testo” (No Image) e come “immagini” (Image).
La differenza è molto semplice.
Le prime sono aree di codice Html all’interno della tabella generata dallo Slice Tool, mentre le seconde aree sono “immagini” perché la cella contiene l’immagine precedentemente tagliata.
Seguendo il nostro esempio inizieremo, partendo dall’alto, a delimitare l’immagine che compone il top della pagina.
Dalla toolbar di Photoshop selezioniamo lo “Slice Select Tool“. È uno strumento che, a differenza dello Slice Tool esaminato nella precedente lezione, non permette di tagliare ma soltanto di selezionare e ridimensionare un “taglio” attivo.
Con lo strumento di selezione rendiamo attivo il primo “taglio”, contrassegnato dal numero 1.
Selezioniamo dal menu a comparsa (tasto destro del mouse sull’area selezionata) la voce “Edit Slice Options“.
La funzione principale di questa finestra è quella di poter determinare le opzioni dei tag “Html” di una selezione.
Nella prima parte della finestra “Slice Options” è possibile impostare il tipo di area voluta, che per default Photoshop assegna a “Image“. Nel nostro esempio, il primo taglio è l’immagine che contiene il logo di “Fucinaweb”, quindi lasceremo selezionata l’opzione di default e andremo a determinare soltanto:
Di seguito procederemo determinando le opzioni della top bar della pagina web. Partendo dal primo bottone che compone la top bar (Home), oltre che il nome (Name) dell’immagine e la stringa di testo (Alt Text), determineremo anche le seguenti opzioni:
In questo modo procederemo per tutti i rimanenti bottoni della top bar: “Mappa del sito”, “Chi siamo”, “E-mail“.
Per concludere la struttura della pagina web, determineremo l’area di testo della pagina.
Una volta evidenziata la “sezione” di nostro interesse, all’interno della finestra “Slice Options” selezioniamo dall’elenco a discesa “Slice Type” l’opzione “No Image“.
Come si puo notare, appare un’area di testo (Html), all’interno della quale è possibile inserire il testo che riempirà la “selezione”.
In quest’area è possibile inserire tag Html relativi alla formattazione del testo (<b>, <br>, <i>, ecc…), che saranno automaticamente inseriti all’interno del file Html generato durante il salvataggio del file.
Stabilite le opzioni di tutte le selezioni, passiamo a vedere come si salva il file.
Dal menu “File” selezioniamo “Save for Web“. A questo punto si apre una finestra di salvataggio, dove è possibile impostare il tipo di estensione (Gif o Jpg) da assegnare a ogni singola selezione.
Con lo strumento “Slice Select Tool” selezioneremo l’area di nostro interesse. Automaticamente sulla destra della finestra di salvataggio, sarà possibile determinare le opzioni relative all’immagine. Nel nostro esempio, le immagini verranno salvate con l’estensione Gif.
Sempre all’interno della finestra di salvataggio clicchiamo su “Output setting“: la finestra che si apre consente di personalizzare l’aspetto della pagina, definendo il tipo di codice Html creato, lo sfondo, la certella di destinazione e la nomenclatura delle aree.
E’ possibile determinare il colore di sfondo della pagina web generata da Photoshop, o in alternativa inserire un immagine di sfondo. Nel nostro esempio lasciamo entrambe le opzioni deselezionate.
Questa parte permette di personalizzare e di agire sul nome da assegnare alla singola immagine, oltre che decidere in quale cartella salvare le immagini che compongono la pagina web.
In questa ultima scheda della finestra di salvataggio si imposta il nome che Photoshop deve assegnare ad ogni singolo slice creato durante la selezione.
Personalizzate le opzioni di salvataggio clicciamo su “Ok” e automaticamente apparirà la classica finestra di salvataggio. Per default è attivata l’opzione “Html and images“, in questo modo è possibile salvare la pagina web completa, sia di immagini che di codice Html. In alternativa è possibile salvare solo il codice Html (nel nostro esempio solo la pagina con la relativa tabella), o solo le immagini che compongono la pagina web.
Quello che ci apprestiamo a dire è ovvio. Prendete una pagina Html, togliete tutti gli spazi, i ritorni a capo e i commenti. Otterrete una pagina più leggera, e quindi più veloce da caricare.
Ma come fare a costruire una pagina che sia priva degli spazi inutili, ma leggibile mentre la stiamo scrivendo, nonché quando la stiamo modificando ?
L’idea è di avere due copie di tutte le pagine del sito:
Molto spesso si riesce a guadagnare tra il 10 e il 20% dello spazio totale della pagina: un bel vantaggio se si moltiplica il risparmio per tutti gli utenti del sito. Per quanto poco,
la loro esperienza sul sito sarà comunque più veloce.
Se l’operazione di pulitura fosse fatta a mano, il tempo impiegato la renderebbe improponibile. Esistono però diversi programmi che si occupano
di eliminare spazio inutile nei file Html.
Per le nostre prove abbiamo selezionato un semplice programma freeware: Absolute Html Compressor [nuova finestra], scritto da Michael Serpik.
Questo strumento, dall’interfaccia semplice ed essenziale, comprime i documenti localizzati in una cartella (opzionalmente anche nelle sottocartelle).
Come si vede dall’immagine, su 31 file compressi, il guadagno è stato di quasi 30Kbyte.
Togliendo i commenti e la formattazione, il codice diventa anche più difficile da leggere per quanti vogliano copiare il design delle nostre pagine.
Non solo, ma possiamo inserire tutti i commenti che vogliamo nel codice originale (cioè quello che continueremo a modificare), perché tutti
i commenti saranno eliminati nella versione che pubblicheremo online. Senza paura di appesantire il codice o che qualcuno li possa
leggere esaminando il sorgente della pagina.
Nel ridurre il contenuto di spazi, bisogna prestare attenzione a non comprimere alcuni tipi di dato:
Se privati degli spazi, infatti, il codice e i fogli di stile potrebbero non essere eseguiti o caricati correttamente in tutti i browser.
La soluzione consiste nell’isolare il codice e i CSS in file separati dalla pagina e dotarli di un’estensione personale (es. .inc).
A questo punto i file possono essere importati nella pagina per mezzo di “include”.
Quando eseguiamo la compressione dei file nella cartella, sceglieremo i file di tipo .htm o .asp: in questo modo file con altre estensioni
non saranno interessati dal processo di compressione.
La compressione di file Html consente di guadagnare notevole spazio all’interno della pagina, diminuendo la
quantità di informazione spedita tra il server e il client. È anche un ottimo metodo per
rendere il codice meno leggibile da chi volesse riprodurlo.