giafai.dev

C'è stata, in questi giorni, una vera invasione di articoli relativi alla futura versione di HTML. Il motivo, molto probabilmente, è l'interesse dimostrato da Google, in occasione del suo Google I/O 2009, durante il quale è stato presentato il nuovo prodotto Google Wave, e contemporaneamente, per enfatizzare l'idea che il futuro del web avrà come piattaforma di riferimento HTML5, sono state proposte delle demo di alcuni elementi già supportati dai browser maggiormente innovativi.

I principali elementi ormai già supportati da browser di ultima generazione (Mozilla Firefox, Seamonkey, Safari, Chrome, Opera) di questa nuova piattaforma sono gli elementi Canvas e Video, le API per la geolocalizzazione, i meccanismi per lo storage locale e i web workers.

Per avere maggiori informazioni su una tecnologia, comunque, ancora in draft, è possibile leggere la documentazione messa a disposizione dal "W3C HTML working group" e dal WHATWG (canvas, video, storage locale, web workers e geolocation)

I Cheat Sheet (o anche Reference Card) sono piccole reference di termini, comandi o simboli relativi ad un unico argomento, organizzati, anche al loro interno, in sotto-argomenti.

Solitamente vengono distribuiti in formati facilmente stampabili, quali file pdf o gif, e contengono alcune note e brevi esempi d'uso.

Ecco una breve lista di Cheat Sheet relativi ad Html + Css + Javascript

• HTML Cheatsheet
• HTML Cheat Sheet
• XHTML Cheat Sheet v. 1.03
• CSS Cheat Sheet (V2)
• CSS Shorthand Cheat Sheet
• CSS Shorthand Cheat Sheet by Example
• JavaScript and Browser Objects - Quick Reference
• JavaScript Reference Card

Altri Cheat Sheet utili, sempre inerenti l'Html:

• Character Entity References in HTML 4 and XHTML 1.0
• Font Chart
• Web Designer's Font Card
• Common fonts to all versions of Windows & Mac equivalents
• Web Safe Color Chart
• The browser safe colors
• Color Reference Guide

Potete segnalare altre reference nei commenti.

La velocità è importante, forse meno di quando tutti navigavamo con modem a 56k, ma nel frattempo i nostri siti e blog si sono arricchiti di sempre più contenuto.

Per questo è importante ottimizzare le varie parti di cui è composta la pagina.

Ci sono diversi tool a disposizione degli sviluppatori, tra questi ne consiglio due.

Il primo è un test online.

WebPageTest permette di testare la velocità del sito simulando 5 tipologie di connessione. Dopo alcuni minuti e 2 test di performance, presenta un report di questo tipo:

Il secondo è firebug, un'estenzione per Firefox che, attivata durante il caricamento della pagina, permette di ottenere un grafico di questo tipo:

Partendo da queste informazioni, è poi possibile cercare di ottimizzare i vari elementi che presentano dei problemi, fino ad ottenere la riduzione dei tempi di caricamento della pagina.

Ieri, nel quotidiano lavoro di correzione di un sito realizzato da altri, mi sono imbattuto in una pagina incentrata su un modulo per la raccolta di alcuni dati. Questo, parte del codice:

<table width="80%" cellspacing="10" cellpadding="0" border="0" align="center">
        <tr>
            <td nowrap width="25%" align="right">* Pubblicazione</td>
            <td><input class="form300" maxlength="200" size="32" name="pubblicazione"></td>
        </tr>
        <tr>
            <td nowrap align="right">Titolo</td>
            <td><input class="form300" maxlength="200" size="32" name="titolo"></td>
        </tr>
        <tr>
            <td nowrap align="right">Autore</td>
            <td><input class="form200" maxlength="30" size="21" name="autore"></td>
        </tr>
        <tr>
            <td nowrap align="right">* Anno</td>
            <td><input class="form50" maxlength="4" size="3" name="anno"></td>
        </tr>
        <tr>
            <td nowrap align="right">* Volume</td>
            <td><input class="form50" maxlength="10" size="3" name="volume"></td>
        </tr>
        <tr>
            <td nowrap align="right">Numero</td>
            <td><input class="form50" maxlength="10" size="3" name="numero"></td>
        </tr>
        <tr>
            <td nowrap align="right">* Pagina</td>
            <td><input class="form50" maxlength="5" size="3" name="pagina"></td>
        </tr>
</table>

A parte il cattivo gusto di utilizzare un layout tabellare, che da parte mia non verrà intaccato per non complicarmi la vita (dovrei rifare tutto) e perché il browser su cui deve funzionare è il nuovissimo Internet Explorer 6 (si, si, avete letto proprio bene!!). A parte il layout, dicevo, non notate nient'altro? No, non è la mancanza del tag form, semplicemente non l'ho riportato.
Quei tag input... hanno il name, hanno il size, hanno addirittura il maxlength e il class, ma manca l'attributo principale: il type! Per fortuna che i browser son gentili e si prendono il type di default ("text"), ma non sarebbe male scrivercelo!