L’arte dello scrivere il codice a mano (per webdesigner)

Hand coding, scrivere a mano il codice...

E’ chiaro che l’epoca degli editor visuali per HTML è tramontata e si è affermata con chiarezza che l’unico sistema per codificare un sito web è scriverlo a mano, magari con il blocco note. Il blog di SohTanaka è stato creato proprio per chi sviluppa siti web a mano.

Il titolo è chiaro "The art of Hand Coding", l’arte dello scrivere il codice a mano o meglio, con la tastiera. Ogni post è dedicato ad una tecnica particolare. Per esempio vengono svelati i segreti e i trucchi per creare un footer fisso, cioè che rimane fermo nonostante ci si sposti con la scrollbar. Oppure ci insegna a creare un "tavola dei contenuti" sul web, come compare sui libri.

…e sapete come fare una didascalia di un’immagine che si attiva al passaggio del mouse???

didascalia...

33 template per email HTML: essere sicuri di raggiungere tutti i destinatari

Probabilmente già saprete che spedire un’email in formato HTML potrebbe essere rischioso perchè non si è sicuri che possa essere letta dal ricevente. I molti client di posta in circolazione infatti non interpretano completamente l’HTML o NON lo interpretano secondo gli standard. Ecco perchè si sta cercando di definire alcune linee guida alle cui i client di posta dovrebbero aderire. Email Standards Project è il sito di riferimento in questo ambito: è molto triste vedere che Gmail, Lotus Notes e Outlook, i client penso più usati al mondo, hanno un supporto “povero” agli standard.

Template per email HTML

Vista la situazione attuale, non ci resta che adattarci e cercare di dribblare i possibili problemi trovando un minimo comune denominatore in grado di far leggere la nostra email a tutti i destinatari. Questa è una condizione fondamentale a chi sta lanciando una campagna di email marketing.

Ecco perchè vi segnalo 33 template per email HTML, già fatti, già testati e compatibili con:

  • Outlook, compreso il 2007
  • Apple Mail
  • Windows Live Mail
  • Yahoo! Mail
  • AOL
  • Thunderbird
  • Gmail (vecchia e nuova versione)

I template sono gratuitamente scaricabili e sono divisi in 3 gruppi: con sidebar a sinistra, con sidebar a destra e a colonna singola. Partire da un template già fatto potrebbe essere un buon punto d’inizio.

Snipprl: raccolta di codice 2.0

snipplr 
Snipplr è una raccolta di codice pubblico. L’idea di questo sito è dare un posto per archiviare e mettere a disposizione tutti quei pezzi di codice che si usano tutti i giorni. Inoltre potrete condividere il vostro codice on altri programmatori e designer.

Direi che è un’ottima occasione per imparare cose nuove e contemporaneamente farsi conoscere. Lo sapevate per esempio come far funzionare i PNG su Internet Explorer 6?  O state cercando una classe già fatta in PHP per l’autenticazione utente o il codice per creare un file RSS? Con Snipplr troverete le risposte a tutte queste domane e a molte altre!raccolta di codice 2.0

Regole per scrivere un buon codice HTML

regole per un buon htmlOggi propongo 12 regole che dovrebbero essere le linee guida di chi sta per scrivere una pagina web. Sono indicazioni decisamente utili e coprono gli ambiti della programmazione, dell’ottimizzazione del codice, della divisione tra contenuto e presentazione e della semantica del codice. 

L’articolo è tratto da uno schema in inglese di CSS-Triks, che ho tradotto in italiano.

Eccole, una dopo l’altra:

  1. DOCTYPE dichiarato correttamente
    Spesso è sottovalutato, ma il content type è molto importante. Non solo permette al codice di essere validato, ma consente ai browser di interpretare correttamente l’HTML.
  2. Body con il proprio IDMettendo un ID sul tag BODY sarà possibile vincolare lo stile ad ogni singola pagina. Per esempio, se volete che l’H2 venga visualizzato in modo diverso nell’home page, potete scrivere: #home h2 {…}. Questo non comprometterà la visualizzazione di H2 nelle altre pagine.
  3. DIV principale per ogni paginaMettere tutto il contenuto della pagina in un div contenitore (wrapper), significa aver la possibilità di avere un maggior controllo sulla visualizzazione della pagina. E’ importante soprattutto quando si definisce la larghezza per siti a dimensione fissa, semifluida o fluida.
  4. Contenuto comune incluso
    Gran parte di una pagina ha contenuti comuni con le altre. Pensiamo ai menu, alle sidebar, ai footer, ai box laterali, ecc…
    Questo tipo di contenuto dovrebbe essere incluso dinamicamente, tramite inclusione di altri file o tramite database.
  5. Chiusura dei tag
    Bisogna finire i tag che si cominciano. Non essere superficiali non chiudendo i tag aperti è un grave errore, nonostante la visualizzazione si buona.
  6. Contenuto, contenuto, contenutoIl contenuto della pagina è il motivo d’essere di un codice HTML. Ricordati di usare i paragrafi, punti elenco e le corrette entità HTML (è per indicare il carattere è).
    Evita l’uso di <br/> per formattare la pagina
  7. Corretta definizione dell’HEAD
    Il titolo deve essere impostato. Il charset pure. I fogli di stile correttamente collegati (compresi quelli per la stampa). Script collegati e non scritti nel codice html. I file esterni devono essere inclusi nelle appropriate cartelle (p.e. CSS/, e script/).
  8. Menu semanticamente corretto
  9. Contenuto principale, prima di tutto!
    E’ importante che il contenuto principale della pagina, come il testo dell’articolo, il dettaglio della news, ecc, sia nella parte iniziale del codice HTML. Sidebar, menu di navigazione e footer devono comparire nell’HTML dopo.
  10. Codice correttamente indentato
    Se le parti del codice sono indentate, la struttura risulta molto più leggibile. Codice allineato a sinistra è orribile e di difficile lettura.
  11. H1, h2, h3, ecc… nel corretto ordine
    Usare i tag header (h1, h2, h3, ecc…), così come sono stati ideati, cioè per creare titoli per sezioni. E’ buona norma usarli nel corretto ordine, cioè prima l’h1, poi l’h2, e così via.
  12. Nessuno stile nell’HTML
    Il codice HTML dovrebbe trasportare contenuto e struttura e non lo stile. Mantieni lo stile nel CSS.
    Evita quindi l’uso di tag <font>.

Regole per scrivere una pagina html

Scarica il poster (1600×1200 pixel, 300KB) per poterlo stampare e attaccare nel tuo ufficio!

Editor online: syntax highlight in Javascript

CodePress è un editor web creato per gestire il codice sorgente dei propri progetti. La caratteristica principale è il syntax highlight, ovvero la capacità di colorare in tempo reale parole chiave, operatori, stringhe, valori numerici e molto altro, durante la digitazione stessa del codice sul browser.

 I linguaggi fin qui supportati sono: PHP, Javascript, Java, Perl, SQL, HTML e CSS. Le sue caratteristiche principali sono:

  • Syntax highlighting in tempo reale
  • Code snippets,  per esempio, in modalità PHP digitando "if" e premendo [tab]
  • Completamento automatico, semplicemente scrivendo " o ( o ‘ o [ o {
  • Tasti veloci. In modalità PHP, per esempio, la combinazione [ctrl][shift][spazio] è una combinazione veloce per &nbsp;
  • Finestre multiple. E’ possibile avere più CodePress sulla stessa finestra del browser

syntax highlight

Magic DOM, per mappare l’HTML con il javascript

Magic DOMMagic DOM è una libreria Javascript di soli 2K che mappa il document object model della pagina web con semplicità e in modo intuitivo. L’idea è di scrivere tag html utilizzando javascript, ma mantenendo la sintassi simile all’HTML.

Quindi un tag SPAN di questo tipo:

<span class="babu">Hello world</span>

diventa con Magic DOM il seguente codice in javascript:

SPAN({'class': 'babu'}, "Hello world")

I tag mappati da questa libreria sono:

  • UL, LI, TD, TR, TH,
  • TBODY, TABLE, INPUT, SPAN, B,
  • A, DIV, IMG, BUTTON,
  • H1, H2, H3, BR, TEXTAREA, FORM,
  • P, SELECT, OPTION, OPTGROUP, IFRAME, SCRIPT,
  • CENTER, DL, DT, DD, SMALL,
  • PRE, TN

e la sintassi per poterli utilizzare è:

DOMSHORTCUT({properties}?, ("String" | DOMSHORTCUT)*)

Magic DOM è open source e liberamente scaricabile. L’idea mi è sembrata intelligente e ha meritato un post sul mio blog!