Per combattere insieme la “divite”.

Ecco come nasce La “divite”, questa strana malattia virale che assale all’improvviso i webdesigner alle prime armi. In principio fù […]
Per combattere insieme la “divite”.

Ecco come nasce

La “divite”, questa strana malattia virale che assale all’improvviso i webdesigner alle prime armi. In principio fù il div#wrapper, contenitore di ogni cosa terrena e non…  passano inesorabili minuti ed ore ed ecco che come per incanto, la pagina web in vista codice si ritrova sommersa di div che si incastrano alla perfezione uno nell’altro. Un insieme di #id e .classi che si reggono uno sull’altro come a formare un tetris. Vediamo per progressivi avvicinamenti come guarirne.

Concretizziamo il tutto

Più div vengono usati piu la struttura risulterà solida?
Niente di più sbagliato, otteremo solo un marchingegno complesso di div che non risulterà reattivo ai cambiamenti a cui un sito web spesso è soggetto.

La soluzione?
Trovare un compromesso tra la stabilità e la flessibilità, definendo i div solo là dove la struttura effettivamente lo richiede. Un codice come quello che segue può essere considerato poco “pulito” in quanto utilizza una serie di sovrastrutture inutili che appesantiscono prima di tutto il codice e poi il suo eventuale riutilizzo nel caso di portali web molto complessi.

<div id="wrapper">
    <div id="contenitore_interno">
        <div id="titolo">
            <h2>Titolo</h2>
        </div>
        <div id="contenuto">
            <p>contneuto del div</p>
        </div>
    </div>
</div>

Cerchiamo di evitare di racchiudere in maniera quasi maniacale i contenuti, pensando erroneamente che essi siano cosi più al “sicuro”, piuttosto pensiamo bene a come elaborare una SOLIDA struttura che stia alla base del nostro portale o sito, lasciando più libertà e minori vincoli ai contenuti.

Come Procedere?

Nulla di più semplice, il nostro lavoro comincia nel momento in cui il visual designer ci consegna il progetto in photoshop o fireworks da montare; come? chi è il visual designer? Ma come! Ne abbiamo parlato in un precedente articolo in cui spiegavamo come una agenzia web dovrebbe essere strutturata. Ok, abbiamo il template in formato digitale, che aspettate stampatelo…un A4 andrà benissimo. Questo è il momento piu importante, perchè è proprio in questa fase che andrete a definire le “macroaree strutturali del template” … le colonne portanti del vostro sito web, quei div fondamentali insomma senza i quali il sito crollerebbe in mille pezzi.

Armiamoci di matita e cominciamo a disegnare a grandi linee e in maniera grossolana, i rettangoli che comporranno le parti fondamentali della nostra struttura. Sbagliare in questa fase potrebbe poi portarci a rivedere parecchie cose. Nulla va lasciato al caso, NEANCHE gli improvvisi cambi di rotta dei clienti che porteranno inevitabilmente a dover rivedere alcune cose. Insomma ci ricolleghiamo al discorso di prima, piu una struttura è flessibile e composta da pochi ma importanti div chiave, piu sarete in grado di gestire gli imprevisti del caso.

Vi sono chiare le macroaree? Sono questi i contenitori, riferiti al template poc’anzi analizzato che fanno da fondamento. Sulla base di questi pochi div possiamo organizzare in maniera dinamica il resto dei contenuti. Lo stesso principio di semplicità che abbiamo appena analizzato si applicherà ai contenitori di livello inferiore e cosi via (ad esempio i widget della sidebar); dal generale al particolare la logica è sempre la stessa.

Strutture leggere e flessibili ottime per essere riutilizzate su infiniti livelli di “importanza”. Ecco un esempio di quella che potrebbe essere una possibile sidebar ben strutturata e orientata al riutilizzo del codice. In questo caso il div class container_sidebar che al suo interno contiene un semplice titolo e un paragrafo potrà essere formattato in maniera tale da essere riutilizzato n volte. Semplicità e riutilizzo, due parole chiave per ottenere layout di successo!

E adesso?

Ora che, come dei veri artigiani del web abbiamo definito tutto su carta, andiamo a trasporre la nostra struttura cartacea sotto forma di codice html. Inseriamo alcuni contenuti base per riempire a grandi linee le aree e buttiamo giu per approsimazioni progressive il css che noi di laboratoriocss di solito nominiamo layout.css, in cui vengono definite le linee guide del layout portante e tutti quei layout che ciclicamente si ripetono in un portale di grandi dimensioni. Non vogliamo procedere oltre su questo aspetto in quanto è in lavorazione un articolo ben strutturato sui framework css e sulla loro importanza. In quest’ultima e fondamentale fase, è il css a decretare la vostra vittoria finale o la vostra disfatta. Quì purtroppo entra in gioco la vostra conoscenza delle regole, non possiamo darvi nessun consiglio se non quello di studiare e tenervi sempre aggiornati mettendo costantemente in pratica la teoria.

Partendo per avvicinamenti progressivi, dal generale al particolare, abbiamo portato avanti e concluso in via teorica il montaggio di una pagina web e come abbiamo potuto appurare insieme il passaggio dall’ossessionante “divite” ad un uso normale del markup è molto breve.

Cosa manca?

Mettete subito in pratica quanto letto, analizzate i vostri template realizzati fin’ora per capire quali possano essere stati gli errori commessi. Non c’è nulla di più formativo che cadere in errore, rialzarsi e procedere avanti coscienti del fatto che quello stesso errore adesso vi ha resi più forti e veloci nell’aggirare determinate problematiche. La pratica vince su qualsiasi libro o manuale. Sperimentate quindi, confrontatevi e allenatevi da soli o in gruppo. Arriverete presto a padroneggiare i ragionamenti che stanno alla base del montaggio dei template.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github