2009
Oct
30
Per una maggiore visibilità sui motori di ricerca è necessario ottimizzare il contenuto della pagina e indirizzarlo ad un target specifico, ma anche il codice stesso della pagina. Le guide SEO più importanti (soprattutto quelle redatte da Google stessa) indicano le liste HTML come metodo più facile per creare i menu. In effetti sia gli <ol> che gli <ul> rispettano una certa gerarchia, e questo al motore di ricerca facilita di molto l’indicizzazione.
In questo articolo usiamo un piccolo accorgimento per gli stili nei menu verticali formati da liste. Chiaramente con i CSS. [Read more…]
2009
Oct
20
Oggi parliamo di un importante accorgimento da tenere presente nello sviluppo della grafica web. Ci occuperemo di ottenere un perfetto supporto alla trasparenza delle PNG anche usando Internet Explorer 6.
Come molti sapranno in ambito web è indispensabile facilitare la navigazione dell’utente, che può utilizzare qualsiasi tipo di browser. Purtroppo non tutti i browser funzionano allo stesso modo. Questo crea grossi problemi (più che problemi le chiamerei lungagini) ai web designer che devono sviluppare un solo sito per essere compatibile con tutti (o la maggior parte) i browser usati.
Un browser è come se fosse un’auto. C’è il browser più bello, il più veloce, il più funzionale, ed ognuno “sotto il cofano” ha un diverso motore di rendering. Si tratta un software che si occupa della formattazione dei contenuti web e della disposizione dell’output fronte utente. Ad esempio il motore di rendering di Firefox è Gecko, quello di Explorer è Trident, Opera invece utilizza Presto. Un motore rendering non è necessariamente legato ad un browser, il motore di rendering è il programma a cui i browser si appoggiano per funzionare. Come prestazioni i migliori sono Presto e Gecko, come rispetto degli standard XHTML il migliore è KHTML (usato da Konqueror e Safari).
Benché gli output dei browser siano tutti simili (sappiamo che non è cosi, ma è previsto che lo siano) non sono mai uguali, dovrebbero, ma per ragioni diverse risulta difficile che lo siano. Una delle pecche più importanti nella compatibilità dei browser è rappresentata dal mancato supporto alla trasparenza delle PNG in Internet Explorer 6. Questo crea non pochi problemi. Rendiamoci conto che le PNG sono utilizzate in ambito web soprattutto per via della possibilità di rispettare le trasparenze in un’immagine. Gli stessi bordi di questo blog sono “ombreggiati” tramite l’uso delle trasparenze delle PNG.
Di seguito riporto la home page del blog vista da IE6 senza supporto trasparenza per le PNG:
È chiaro a tutti che non è l’effetto desiderato.
Per sistemare il pasticcio che mi crea IE6 sono costretto a ricorrere ad un escamotage che non è considerato standard, ma pare essere il modo meno doloroso modo per risolvere il problema. In poche parole IE6 non rispetta gli standard, e visto che è usato ancora da troppa gente costringe anche me a violare gli standard, perché il navigatore distratto non cada in preda al panico dalla PNG non trasparente.
Esiste un piccolo programmino da implementare tramite CSS, si chiama IE PNG Fix, sviluppato dalla Twin Helix. Il PNG Fix si occupa di “restaurare” la pagina web con le PNG trasparenti visualizzata da IE5.5 ed IE6 in una più gradevole e più rispondente agli standard attuali.
Le istruzioni perché renderizzi il nostro sito sono brevi ed elementari. È necessario l’accesso al server per l’upload dei file.
- download e scompattamento del fix dal sito
- upload dei file “iepngfix.htc” e “blank.gif” sul server web
- modificare la sezione “HEAD” di tutte le nostre pagine con il codice seguente:
(preferite la funzione include(”header.tpl”); piuttosto che modificare tutti gli header)
<!--[if IE 6]>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
Ricordiamoci che il percorso di “iepngfix.htc” è relativo al file HTML, non al CSS.
- se hai messo “blank.gif” in una sottodirectory lo devi specificare nel file “iepngfix.htc” alla voce
IEPNGFix.blankImg = '/images/blank.gif';
ancora una volta è riferito al percorso della pagina HTML. Se sbagli vedrai la classica “X” rossa di “immagine non trovata”.
Nel sito di IE PNG Fix sono anche dettagliatamente descritti alcuni dei problemi più comuni. Potete trovarne una lista (in inglese) nel loro sito alla voce “How to fix common problems“.
2009
Oct
19
Con l’avvento della nuova specifica CSS3, si è cercato di venire incontro al webmaster per quanto riguarda le ombreggiature sui testi. In pratica non sarà più necessario creare i testi ombreggiati con i programmi di grafica per poi includere l’immagine ottenuta nella pagina web, scoraggiando così il navigatore che magari vorrà fare copia-incolla.
L’uso di text-shadow nei CSS3 è il seguente:
#div {
text-shadow:1px 2px 3px #000;
}
“Text-shadow” crea l’ombra sotto al nostro testo, e le misure che ho messo nello specifico significano: spostamento dell’ombra di un pixel verso destra, di due pixel verso il basso, raggio di sfocatura di tre pixel, colore nero.
Interessante come sia possibile creare più ombre su uno stesso testo separando i valori con una virgola:
#div {
text-shadow:1px 2px 3px #000, 4px 5px 6px #fff;
}
Attenzione però, i CSS3 non sono ancora uno standard a tutti gli effetti, facciamo in modo quindi di rispettare la retrocompatibilità alle specifiche CSS2, quindi niente caratteri bianchi, sfumatura colorata e sfondo bianco, perché chi usa i CSS2 vedrà solo un bello sfondo bianco.
Al momento i browser supportati sono: Mozilla Firefox v.3, Opera, Konqueror, iCab. Per vedere se il browser supporta i CSS3 e la specifica text-shadow vi basterà dare un’occhiata al titolo degli articoli in questo sito o al menu laterale.
