CODIFICARE LAYOUT

In questa sezione cercherò di dare un'infarinatura generale su come codificare un layout (praticamente il mettere delle caselle di testo nelle quali si può scrivere su un'immagine). Codificare non va per assoluti, questo è quello che faccio io, altri usano metodi diversi.

Questo qua sotto è il codice "base" da cui partiremo per codificare un layout.

In teoria si possono fare anche senza ricorrere ad alcuna immagine di sfondo, unicamente di codice, ma qui partiremo proprio da un'immagine. Per fare un buon lavoro di solito si prende un'immagine e si crea la base del layout su programmi come Gimp o Photoshop (io ho iniziato da disperata usando PowerPoint e ho visto gente usare Paint, quindi si può usare qualunque cosa, seriamente. Esistono anche editor online, del tutto gratis se non avete nessuno di questi programmi).

Prenderò quindi un'immagine da Google per creare lo sfondo per il nostro layout (!!! - Attenzione alle immagini, alcune non possono essere modificate e con altre bisogna dare credito all'autore, soprattutto attenzione se l'immagine viene da DeviantArt).

Una volta scelta l'immagine non resta che quindi creare lo sfondo per il layout. In questo caso ho deciso di creare un layout per una presentazione piccola (482x292px) e con due caselle di testo.

Piccolo consiglio: caselle di testo delle stesse dimensioni facilitano di molto il lavoro, come anche il conoscere già in partenza la dimensione in pixel delle caselle di testo e la loro posizione. Avendo fatto io l'immagine con Photoshop mi sono regolata come volevo. Andare alla cieca è comunque fattibile, ci vuole solo un po' di più a trovare la dimensione e posizione esatta delle caselle.

Creata l'immagine, bisogna caricarla su un sito di hosting immagini. I più comuni sono Imgur e Tinypic (personalmente consiglio Imgur, che è ormai quello che uso sempre).

A questo punto si può iniziare a codificare. Aprite in una scheda l'immagine e nell'altra un editor HTML (consiglio quello di W3Schools, trovi il link qui). Lì incollate il codice HTML base che ho lasciato sopra.

Iniziamo ora con le basi: sulla prima riga ci sono tre XXX, che sono i primi che andremo a sostituire:

• La prima è l'url dell'immagine di sfondo. L'abbiamo aperta in un'altra scheda, quindi basta semplicemente copiare l'indirizzo della pagina e incollarli lì. Non cancellate le virgolette, l'unica cosa da sostituire sono sempre e solo le XXX. Se dovesse mancare un punto e virgola, una parentesi o qualunque altra cosa, il codice non funzionerà.
• La seconda è la larghezza del layout in pixel. Se non sai già le dimensioni esatte, di solito quando un'immagine è aperta appaiono proprio sulla scheda accanto al nome del file.
• La terza è l'altezza dell'immagine, inserite anche quella.

A questo punto cliccando sul tasto verde (sul mio c'è scritto "Run", non so se sia in italiano per altri), dovreste già vedere qualcosa. Sinceramente prima di farlo però consiglio di iniziare già a smanettare con la prima casella di testo, sulla seconda riga: abbiamo di nuovo larghezza ed altezza, se non le si sa già si può mettere un valore che potrebbe avvicinarcisi o anche qualcosa a caso. A questo punto clicca sul tasto verde.

Questa è all'incirca la situazione che si dovrebbe avere davanti:

A questo punto bisogna sistemare quella casella di testo. Se ti stai chiedendo come mai abbia uno sfondo bianco, ce l'ho messo io, ma è provvisorio, non preoccuparti. Grazie allo sfondo siamo sicuri al 100% delle dimensioni effettive della casella e la possiamo far combaciare il più possibile con quella disegnata sullo sfondo. La prima altra XXX che incontriamo è quella dopo text-align, riguarda l'allineamento del testo. Al suo posto si può scrivere left (come di default a sinistra), center o right in base alle preferenze. Adesso continuiamo.

• Le dimensioni della casella non sono giuste, ma è normale: la prima cosa che faremo sarà cercare di far coincidere il bordo superiore e quello sinistro con quelli della casella.
• Per farlo andiamo a sostituire le prossime due XXX: margin-top dà la distanza dal bordo superiore del layout, margin-left da quello sinistro. Bisogna continuare a sostituirle e a cliccare su "Run" spostando la casella fino a quando non sarà nella posizione corretta.
• Posizionata quella, iniziamo a cambiare i valori di larghezza e altezza della casella fino a farli combaciare con ciò che sta sotto.

Se il layout ha una sola casella di testo, beh, il lavoro è quasi concluso. In questo caso si può già cancellare dal codice del layout background-color: #fff; che serviva per lo sfondo e saltare la parte successiva. Se ha più caselle, mi dispiace ma non è ancora finito.

Per creare il codice della seconda casella, si copia quello della prima (quindi dalla seconda riga fino al penultimo </div> compreso). Se le due caselle sono identiche si è già ad un passo avanti, se erano diverse bisogna ripetere tutto il procedimento di sopra.

C'è però una piccola complicazione: senza alcun apparente criterio logico, o perlomeno uno che ancora non ho trovato, per i pixel da mettere dopo margin-top e margin-left vengono contati o quelli dai bordi del layout o quelli dalla precedente casella di testo. Inizia a spostarla finché non raggiunge la posizione giusta.

Se per qualche motivo non fosse visibile appena dopo averla inserita è probabile che sia o direttamente sopra all'altra, quindi bisogna muoverla un po' per vederla, o, addirittura (ahimè è successo) che è finita direttamente fuori dal layout. Questo però succede a volte quando ce ne sono in gran numero. Per trovarla basta spostare sempre i numeri (mettendo un meno davanti si va anche in negativo, nella direzione opposta).

Posizionata bene? Possiamo andare avanti. Ce ne sono ancora? Bisognerà continuare finché non saranno tutte sistemate.

Se ci sono molte, molte caselle di testo, ad un certo punto il povero HTML Editor non reggerà più e non permetterà di scrivere ulteriormente. Un trucchetto è quello di cancellare tutti i testi chilometrici del "Lorem Ipsum..." e sostituirli con una singola parola, in codice si accorcerà notevolmente. Se ce ne sono davvero troppe ad un certo punto si rifiuterà comunque.

Quindi, ora che tutte le caselle sono sistemate, si può continuare. Come avevo già detto prima, ora si può levare lo sfondo bianco a tutte le caselle di testo.

L'unica cosa rimasta da fare è il sistemare il testo all'interno delle caselle, per farlo:

• Il primo XXX è il font del testo. I font più stravaganti si possono scaricare da internet (consiglio DaFont), ma sappiate che il 99% delle persone non lo vedranno non avendolo scaricato. Conviene quindi andare su scelte più sicure: qui potete trovare una lista di font che sicuramente tutti vedranno, altrimenti anche i font che trovate su Word, PowerPoint ecc... sono abbastanza sicuri.
• font-size è esattamente quello che dice di essere, la grandezza del testo, in pixel.
• Stessa cosa per color, si tratta del colore del testo. Va messo il codice in HTML però, formato da 6 lettere o numeri. Qui trovate un link per l'HTML Color Picker, sempre di W3Schools, dove potrete trovare i codici per tutta la gamma dell'arcobaleno. Visto che sono di solito i più usati, vi anticipo che #000 è il codice per il nero e #fff quello per il bianco. Mi raccomando di scegliere colori che non si confondano con lo sfondo.

Questa operazione va ovviamente ripetuta per tutte le caselle di testo. Congratulazioni per l'avere completamente codificato un layout.

Ecco il nostro layout completato ed, essendo free to use, pronto da mettere in presentazione (cliccateci sopra per il codice).

Ulteriori aggiunte:

• Personalmente preferisco sempre mettere un <center> ad inizio codice ed un </center> alla fine, in modo che sia posizionato al centro nella presentazione invece che attaccato al margine sinistro.
  
• Puoi aggiungere un bordo alla casella di testo usando il codice border: 1px solid #XXX; nel codice della casella (dove si trovano le dimensioni, distanza dai margini ecc...), al posto del XXX va messo il codice HTML del colore che volete per lo sfondo.
• Per l'inserimento nella presentazione e delle info sulla modifica del testo, qui.