June 29th, 2010 | CSS, jQuery 3 Comments »
Sono molti i servizi online che consentono agli utenti di scegliere lo stile delle pagine in base ai propri gusti e/o esigenze. Per consentire questa scelta agli utenti bisogna progettare diversi file CSS (uno per ogni stile diverso) e far scegliere all’utente quello da lui preferito.
Nell’articolo di oggi vedremo come realizzare un semplicissimo switcher di stili utilizzando jQuery e pochissime righe di codice.
June 22nd, 2010 | CSS, Font 11 Comments »
Nell’articolo di oggi vedremo un piccolo trucchetto che sfrutta le potenzialità del CSS3 e soprattutto della regola font-face che ci permetterà di realizzare le icone di un menu senza utilizzare immagini ma solo testo.
Vediamo innanzitutto l’idea alla base del tutorial. Utilizzare la regola @font-face ci consente di utilizzare font non standard all’interno delle nostre pagine web e, con apposite regole, di rendere compatibili questi font a tutti i browser (IE6 compreso). Utilizzando font appositi possiamo quindi sfruttare questa proprietà per evitare l’utilizzo di icone in formato immagine.
Questa tecnica consente di sfruttare molteplici vantaggi, come ad esempio la riduzione di richieste HTTP, la possibilità di personalizzare le dimensioni delle icone e tante altre. Vediamo insieme di cosa abbiamo bisogno.
June 17th, 2010 | Wordpress 3 Comments »
Dopo tanti rinvii finalmente è disponibile la nuova versione di WordPress! Giunto alla versione 3.0 le novità introdotte sono davvero tantissime e, sicuramente, utilissime sia per gli sviluppatori che gli utilizzatori finali del famoso CMS.
Vediamo insieme le novità più importanti partendo proprio dall’installazione.
June 14th, 2010 | CSS, Web Designing, XHTML 8 Comments »
L’articolo di oggi non è prettamente tecnico ma è volto a presentare uno script interessantissimo che consentirà di scrivere codice HTML e CSS in maniera velocissima facendoci risparmiare tantissimo tempo.
Sto parlando di Zen Coding, un plugin compatibile con molti editor che consente di scrivere codice validato e corretto in maniera semplicissima e, soprattutto, velocissima.
Scrivendo, ad esempio, la seguente stringa:
div#page>div.logo+ul#navigation>li*5>a
e premendo una combinazione di tasti (CTRL + ,) si avrà il seguente risultato:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Le sue potenzialità e comodità sono tantissime, basti pensare alla struttura iniziale della pagina compresa di DOCTYPE che ogni volta dobbiamo copiare/incollare da altre pagine.
June 3rd, 2010 | Accessibilità, browser, Web Designing No Comments »
La scorsa settimana mi sono occupato di analizzare alcune semplici linee guida per garantire la corretta visualizzazione delle pagine web anche per browser testuali.
In questo articolo, invece, mi occuperò di analizzare come i browser testuali interpretano i vari tag html. Ho già detto che non viene interpretato il foglio di stile quindi eventuali margini, bordi, padding, ecc vengono del tutto ignorati; così come per il floating degli oggetti e, ovviamente sfondi e colori. I contenuti vengon visualizzati nell’ordine in cui sono presenti nell’html e renderizzati in maniera, ovviamente, solo testuale.
Benvenuto! Mi chiamo Simone D'Amico e sono un web designer, web developer e blogger.
Questo blog contiene articoli su Web Design e Web Development. Quì potrai trovare news su HTML, CSS, PHP, jQuery, Wordpress e molto altro.
Se vuoi restare aggiornato puoi abbonarti ai miei feed RSS oppure seguirmi su Twitter.