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 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.