La tecnica dell’azzeramento degli stili CSS è stata introdotta per la prima volta da Eric Meyer allo scopo di avere uno spazio di lavoro idealmente bianco dove definire da zero tutti gli stili necessari senza dover tener conto della formattazione di default di un dato stile.
Perché il reset.css funzioni è necessario includerlo prima del CSS principale. Vediamo come: [Read more…]
Come molti sapranno i CSS3 non sono ancora stati completamente implementati dai browser, non ce ne serviremo nella prima parte di questa breve guida. Già implementata dalla specifica CSS2 era la proprietà “outline“. Vediamone un esempio:
p.test {
border: 1px solid #000000;
outline: 3px solid #6374AB;
width: 20em;
}
Navigando per caso nel sito di Webmin, mi sono imbattuto nel footer che rimanda ad un piccolo portale che offre template web standard.
Il sito in questione è “Styleshout.com“, e i template che offre sono divisi in due grosse categorie: “Website templates“, i template liberamente usabili, e “Premium templates“, i template a pagamento. I template gratuiti sono rilasciati sotto licenza CreativeCommons, che oltre a richiedere di preservarne l’autore ed a mostrarne il relativo nome, obbliga ad inserire un link (linkback) al sito dell’autore stesso.
Non ho idea del principio base che porta all’inserimento nell’una o nell’altra categoria, quello che posso notare è che i template standard sono ugualmente usabili, e validati per l’XHTML che per il CSS.
L’articolo di oggi illustra le funzioni del plugin “xMontyGIMP“, un plugin in Python per Gimp che “divide” i livelli dell’immagine creata per esportare in XHTML e regole CSS. xMonthyGIMP è un plugin molto semplice, per ogni livello viene creato un “div” differente. [Read more…]
Come qualcuno (i più attenti) certamente noterà, da oggi ho impostato il blog in modo che lo sfondo cambi ad ogni refresh della pagina. Per fare ciò non ho chiesto aiuto a javascript, bensì a PHP e ad i miei CSS. [Read more…]
Con il post di oggi ci occupiamo dei pattern grafici da usare come sfondo ripetuto. Questa tecnica viene spesso usata nei siti per dare l’idea di un’immagine “infinita” dello sfondo.
Per il download dei pattern suggerisco il sito squidfingers che nella sezione “pattern” mette a disposizione una scelta grafica vasta e (a mio avviso) ottima. [Read more…]
Oggi parliamo di web design e di design tipografico. Da poco mi sono documentato circa l’inclusione delle font utente (dette “custom“) all’interno della pagina web. Fin’ora per la pagina web, il webdesigner ha sempre dovuto usare le font di sistema (arial, verdana, courier new, times, ecc.), o creare delle immagini apposite per i titoli, o nei casi più eclatanti (con grande dispendio di energie) sostituendo ogni lettera con l’immagine corrispondente alla font custom tramite javascript. [Read more…]
Qualche articolo fa si è parlato di come creare un menu laterale tramite liste (<ol> e <ul>) e CSS, dell’importanza che un menu fatto tramite lista ricopra nell’indicizzazione del sito (anziché usare per esempio le tabelle).
Con lo stesso metodo è possibile creare un menu orizzontale (top menu, footer o sitemap per i visitatori). Vediamo come. [Read more…]
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…]
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.
<!--[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.
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“.
