Pasquinate: un blog

Premessa

Nella grande maggioranza dei casi, ormai da anni, i siti che realizzo sono dotati di content management; la conseguenza principale di questo è che non devo più realizzare decine di pagine web statiche, ma al contrario tendo a concentrarmi su pochi modelli di pagina che verranno applicati al sistema di gestione dei contenuti. Questo mi ha portato a scrivere tutto il mio codice, con estrema attenzione, a mano, e questo è tanto più vero per quanto riguarda la parte grafica, che demando interamente ai CSS. Con un simile sistema di lavoro un programma mastodontico come DreamWeaver mi è rapidamente finito tra i piedi, ostacolandomi. Poi ho scoperto Coda.

Fase di progettazione

La fase di progettazione di un sito comincia per me con uno schema di massima generalmente fatto a mano su carta. In qualche caso ho utilizzato un applicazione per iPad molto ben fatta che si chiama iMockups, che realizza degli schemi a blocchi molto essenziali e chiari (vedi esempio). La fase successiva passa da Photoshop. Premetto che non mi piace creare mockup completi su Photoshop perché comunque non avranno l’esatta resa di una pagina web, specie per quanto riguarda i font (nessun browser rende i font come fa Photoshop) e la resa delle grafiche, che il programma tende a mostrare troppo raffinate e con bordi sfumati. Quindi, a parte quando me lo chiede espressamente il cliente, preferisco stendere su Photoshop solo le grafiche di massima, e quindi assemblare tutto in una reale pagina HTML/CSS, aggiungendo poi via via le grafiche mancanti. Questo metodo ha anche il pregio di mostrare alcune cose che si vedono solo con l’uso, tipo come funzionano i link o certe animazioni. Ammetto però che questo è un sistema che funziona solo se hai una chiara idea di come verrà assemblata realmente la pagina. Immagino che siano i pregi di essere sia il designer che il coder e potrebbe non funzionare affatto per altri.

Insomma, alla fine ho una cartella “img” piena di immaginette pronte per l’uso. Particolare: non uso e non ho mai usato gli “slice” di Photoshop, preferendo di gran lunga generare i pezzi di grafica come mi pare.

HTML e CSS

Il mio sistema di lavoro è cambiato quando ho incontrato due applicazioni fantastiche. Coda, un eccellente editor per il web, e CSSEdit.

Coda un editor specializzato per web. È fatto molto bene e tende a semplificare molto il lavoro. Non è comunque un editor visuale, e richiede che chi scrive sappia cosa fa, anche se ti assiste autocompletando il codice. Ha anche una sezione fatta molto bene per ospitare pezzi già pronti di codice, pronti per essere riusati alla bisogna.

Purtroppo, dopo che già usavo CSSEdit, mi resi conto che la sezione CSS di Coda, pur se molto migliore di quella di DreamWeaver, non mi piaceva. Per un bel po’ quindi ho lavorato tenendo aperti i due programmi, scrivendo il codice in Coda e creando e modificando live i fogli stile in CSSEdit. Già così la mia produttività fece un grosso balzo.

La casa produttrice di CSSEdit a un certo punto ha prodotto Espresso, un editor abbastanza simile a Coda ma con integrate tutte le funzioni aggiornate del vecchio CSSEdit, con particolare riguardo alla versione 3 dei CSS. Questo gli permette anche di fare modifiche in tempo reale su siti già online, e di salvare i fogli stile aggiornati. In questo modo si risparmiano letteralmente ore di lavoro.

Con minimo sforzo sono passato a Espresso e da allora lo uso con estremo profitto. Mi era rimasto però solo un dubbio. La sezione “ritagli” di Espresso fa un po’ schifo. Poi ho scoperto snippets.

Snippets è un programma che funziona da magazzino unico di tutti i tuoi ritagli di codice, permettendoti di richiamarli da qualsiasi programma tu voglia in maniera molto semplice. Ci sono molti programmi del genere, ma Snippets è l’unico che abbia trovato che funziona anche mediante una “menulet", ovvero una piccola applicazione che risiede nel menu principale, sempre disponibile anche a programma spento. Questo programma è fantastico e lo consiglio a tutti. Visto che poi tutti attendiamo in gloria il prossimo Coda 2.0, potrebbe di nuovo tornarmi utile qualora decidessi di ripassare al vecchio amore, senza impasticciarmi di nuovo a trasferire gli snippet di codice.

Contenuto web

Un discorso differente riguarda i contenuti delle pagine. Creare o adattare il contenuto per il web, specie per quanto riguarda grosse quantità di testo, è un processo noioso se si devono aggiungere le formattazioni a mano.

Qualche mese fa ho scoperto e rapidamente imparato ad usare il Markdown, un semplicissimo sistema di scrittura che permette di formattare rapidamente il testo e generare quindi HTML pulito da usare nei siti. Per dirla tutta questa articolessa è stata scritta interamente su iPad usando il fantastico Writing Kit, mentre sul Mac uso da un po’ il validissimo editor Byword. I due si sincronizzano tra loro usando Dropbox.

Mi basta generare l'HTML su Byword e incollarlo dove voglio, già pronto e a posto. Alé.

Web Design Workflow

6 immagini