Lezioni da Naba I: xhtml, css e costruzione di un wireframe
Credo non ci sia niente di male se voglio condividere con voi le dispensine che elargisco ai miei allievi in Naba, no?
Eheh pertanto per chi è proprio alle prime armi come loro eccovi la prima lezione, in cui c’è un’infarinatura di tutto e niente. Dalla prossima lezione infatti cominciamo veramente a navigare nel codice.
Come vedrete è in forma molto discorsiva e sintetica, si tratta proprio della trasposizione di ciò che è stato spiegato in un paio d’ore di lezione. A seguire il pdf da scaricare!
La professione del webdesigner
E’ paragonabile a quella dell’architetto: della casa (sito) che sta costruendo deve conoscerne la fisica, il terreno, l’idraulica, il sistema elettrico, la fisica, la geometria, ancor prima del design stesso.
Stessa cosa per il webdesign.
Un sito non è altro che la nostra casa, l’html (o xhtml) è la nostra struttura, il css è il design.
Html, xhtml e css
L’html è ciò che viene letto ed interpretato dai browser (i programmi con i quali navighiamo in internet) e sta per hyper text markup language = linguaggio per marcatori di ipertesti.
Gli ipertesti non sono altro che pagine che tramite appositi collegamenti (link) ricollegano ad altre pagine. Il linguaggio per marcatori invece è ciò che ci permette, attraverso appunto i marcatori o tag, di definire, all’interno della pagina, la funzione di determinate porzioni di testo, contenuti, immagini. I tag o marcatori li riconosciamo sempre perchè iniziano e terminano con il simbolo < e > .
Il css è invece un file a parte che, collegato opportunamente tramite un comando apposito al file html, permette al browser di riconoscere ed identificare l’aspetto grafico che dovrà avere il sito.
Css sta invece per Cascading style sheet (foglio di stile a cascata). Il termine cascata si usa per indicare che le regole dettate in questo file valgono in modo ereditario “a cascata” appunto, su tutti i tag contenuti all’interno di un tag “genitore”. Ma è un dettaglio che verrà approfondito più avanti.
L’evoluzione dell’html
L’html seppure non sia un linguaggio di programmazione, ha subito comunque delle evoluzioni ed è passato dalla versione 1.0 alla 4.01, alla quale siamo tuttora fermi.
C’è stato poi un salto generazionale con l’avvento dell’xhtml (extensible hyper text markup language) che permette l’interazione dell’html anche con diverse piattaforme anche non web, tramite appositi files “intermedi” chiamati xml (extensible markup language).
Attualmente siamo alla versione 1.0 di cui esistono due versioni: transitional, più flessibile appunto per l’interazione con altre piattaforme, e lo strict, più rigido ma più “pulito”.
La definizione del tipo di xhtml usato tramite il doctype
Se apriamo una pagina web vuota con Dreamweaver, come prima riga di codice troveremo un <DOCTYPE … etc (attenzione, è l’unico scritto in maiuscolo fra tutti i tag) che definisce proprio il tipo di xhtml che stiamo andando ad usare.
Questa dichiarazione riporta ad un collegamento con un file presente sul sito del W3C (World Wide Web Consortium) sul quale sono dichiarate le regole della versione html che si sta usando. Ciò permette ai browser di interpretarla correttamente senza differenze fra browser e browser seppure abbiano codice uguale.
I wireframe e la loro funzione nella creazione delle pagine html
Il primo processo nella fase di creazione di un sito è la definizione degli “ingombri”. Crearlo su carta inizialmente può aiutare a liberare la mente da alcuni schemi prefissati che ci impone l’uso del computer e ci può servire, in una fase successiva, dopo la stesura della grafica su Photoshop, per definire i singoli elementi che compongono la pagina e
cominciare così a scrivere l’html.
Gli elementi fondamentali come il logo e il menu principale di navigazione devono essere facilmente individuabili. Ciò significa che per noi occidentali, che leggiamo da sinistra verso destra, andremo istintivamente a guardare in alto a sinistra per capire la nostra pagina di cosa tratta. Pertanto è opportuno che il logo o il nome del sito siano sempre
collocati in alto a sinistra, così come il menu, che deve rientrare comunque entro un’area
minima visibile da browser (massimo 640px di altezza).
Nota di approfondimento: nell’esercizio in classe è risultato frequente l’uso di aree chiamate “banner”, poiché è comune vedere nei siti visitati tali pubblicità. In realtà nella creazione di un sito aziendale, personale o di altro tipo all’infuori di blog o portali, essi non hanno ragione di esistere poiché innanzitutto è controproducente pubblicare banner di altre società e perchè su un sito aziendale non si hanno sufficienti visite affinchè un potenziale sponsor desideri pagare lo spazio per pubblicare un proprio banner.
Nella prossima lezione: conosciamo i tag fondamentali dell’html: body, head (meta, link), titoli h1, h2, etc, paragrafi, strong, em, small, cite, blockquote. Prime formattazioni grafiche con i css.
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
17 Commenti
Buon lunedì Lauryn, ho cercato nel dizionario qualche nuovo aggettivo superlativo per definirti..ma non c’è! Grazie per la tua condivisione! Scaricato e letto.
ahhahhah ho pensato che tanto che dovevo comunque scriverle potevo condividerle con voi
Fantastico, grazie Lauryn!
Grazie per la condivisione
Davvero bello, grazie mille!
Anche io a breve forse sarò docente ad un corso di webdesign
Un associazione Onlus me lo ha proposto, stanno organizzando, ma io ne ho proposto anche un altro.
Mi piacerebbe insegnare ai bambini come utilizzare internet affinche sia per loro un mezzo sicuro.
Comunque sono sicuro sarai su di giri. Complimenti e in bocca al lupo
OH! Grazie Lauryn! Finalmente ho capito che lavoro faccio!
PS: Complimenti!!! E grazie per la condivisione!
Boia, bellino! Grazie di cuore!
complimenti, hai fatto bene a condividere, appena ho un attimo divulgo in rete
Brava Laura
Lauryn sei la big mama di tutti i web designer…vai avanti così!!
Interessante e utile, da tenere sempre sott’occhio =)
Ma dove lo trovi il tempo? =)
@Claudia: ho dovuto per forza, insegnando ora preferisco che i miei allievi abbiano anche delle dispense sulle quali ripassare.
sto cercando il modo più divertente per fare entrare in testa queste basi, non è facile per chi proviene dal liceo artistico!!!
Ciao molto interessante ma come faccio ad averli tutti per ordine?
qauli tag devo seguire?
ciao e complimenti
ciao luca,
vai qui: http://www.lauryn.it/didattica e li hai tutti consecutivi
Grazie, scaricato letto e ora vado a leggere le prossime lezioni!
Sei speciale, brava e ti seguo con piacere.
Ciao Fiorstella.
grazie fiordistella :*