Html, come lavorare e sviluppare siti in modo professionale?

htmlimgComincerò col dire qualcosa che ti stupirà sicuramente: creare siti web professionali è difficile. Ci sono moltissime variabili di cui tener conto, tanti piccoli dettagli da curare, anche se il tuo compito riguarda esclusivamente il codice e non il design visuale.
Non credere a tutti quegli articoli che ti promettono di tutto e hanno titoli altisonanti come “Non devi essere un webdesigner per creare un sito e farti pagare migliaia di €!” oppure “Crea il tuo sito completo in 3.25 minuti, inoltre avrai una batteria di pentole in omaggio”.
Ci sono tante piccole cose che differenziano uno sviluppatore professionista da uno amatoriale, eccone alcune.

1. Imparare HTML

screen_imparahtml
Il segreto di ogni professionista è la consapevolezza delle capacità degli strumenti che utilizza.
Un esperto sommozzatore può rimanere sott’acqua anche 20 minuti, solo perché utilizza al 100% la capienza dei suoi polmoni, mentre una persona normale quando respira ne utilizza al massimo il 15%. Naturalmente chiunque può rimanere sott’acqua anche un’ora utilizzando le bombole d’ossigeno, ma questo non fa di lui un esperto sommozzatore.
Così un esperto webdesigner conosce e utilizza al massimo gli strumenti del suo lavoro e tra questi c’è HTML. Naturalmente chiunque può vantarsi di poter creare un sito utilizzando uno strumento visuale – i cosiddetti WYSIWYG (What You See Is What You Get, quello che vedi è quello che ricevi ndr) – ma ciò non farebbe di lui un professionista.
Programmi come Adobe Dreamweaver, Microsoft Expression Web, Quanta Plus, sono ottimi strumenti di supporto, ma il loro utilizzo non può sostituire la conoscenza dell’HTML.

Conoscere l’HTML vuol dire scriverlo a mano, senza uno strumento di generazione automatica. Quindi uno dei primi passi da fare, se vuoi imparare a creare siti web professionali, è sicuramente quello di installare un buon editor di testo. Ne esistono tantissimi per ogni sistema operativo, ad esempio notepad++ per windows, kate o gedit per Linux, TextWrangler per Mac. Prenditi tutto il tempo di cercare quello che più ti si addice, esplora tutte le sue funzioni e comincia a sperimentare.

2. Crearsi un framework personale

screen_framework
Tutti i file HTML condividono la stessa struttura, ovvero ci sono degli elementi base che fanno da stampo per le pagine HTML:

<html>
   <head>
      <title><!-- Inserisci il tuo titolo--></title>
   </head>
   <body>
      <!-- Inserisci il tuo contenuto -->
   </body>
</html>

Questi elementi sono <html>, <head>, <body> e fungono da contenitori per il contenuto della pagina web. Il tag <title>, presente nella sezione <head>, come è ovvio permette di impostare un titolo alla pagina.
Questi elementi vengono preceduti da una dichiarazione di doctype che informa il browser che versione di HTML o XHTML stiamo utilizzando. Esistono diversi tipi di doctype, ma i più utilizzati sono HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

e XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Una volta fissata la struttura di ogni file HTML, non è necessario reinventare la ruota ogni volta che devi creare un sito web. Riscrivere ogni volta il doctype e i vari tag nel giusto ordine ti espone maggiormente al rischio di errori. La miglior dote per un programmatore è la pigrizia, quindi fallo una volta e dimenticatene. Crea una cartella sul tuo hard disk dove conservare i modelli dei vari file HTML, che andrai a modificare di progetto in progetto. Questo ti permetterà di risparmiare tempo prezioso, e ti potrai concentrare maggiormente sul progetto corrente. Ho preparato una struttura d’esempio, ma puoi crearla come preferisci, il solo limite è la tua fantasia!

3. Inserire il tag giusto al posto giusto

screen_giustotag
Gli sviluppatori di HTML hanno cercato di inserire un tag per descrivere ogni tipologia di contenuti, quindi usali! Ogni volta che stai aggiungendo un elemento alla tua pagina, fermati un attimo e prova a chiederti “Che cos’è? Cosa rappresenta?”.
Questa serie di annotazioni:

Comprare il latte
Terminare articolo
Controllare link
Portare a spasso il cane

probabilmente dovrà essere resa con un elenco non ordinato (tag &lt;ul&gt;), dato che è stata scritta senza un ordine particolare, in questo modo:

<ul>
   <li>comprare il latte</li>
   <li>terminare articolo</li>
   <li>controllare link</li>
   <li>portare a spasso il cane</li>
</ul>

Così come una citazione in un paragrafo:

C'era una frase molto simpatica di Einstein mi pare che dicesse:
"Solo due cose sono infinite:l'universo e la stupidità umana".

verrà resa utilizzando il tag <q> di citazioni in riga:

<p>C'era una frase molto simpatica di Einstein mi pare che dicesse:
<q>Solo due cose sono infinite:l'universo e la stupidità umana</q>.</p>

Naturalmente queste operazioni richiedono una conoscenza approfondita del linguaggio HTML. Il vantaggio è che i tuoi documenti saranno più significativi e quindi motori di ricerca e/o altre macchine potranno fare una scansione più efficiente del tuo documento.

4.Lavorare con i contenuti

screen_contenuti
Qual è la cosa più importante di un sito web? Cosa cercano gli utenti quando digitano www.villeggiareamare.esempio nel loro browser? Un design affascinante? Effetti spettacolari? Una (brr) musichetta di sottofondo? Puoi scommettere di no: gli utenti cercano informazioni! (nell’esempio informazioni sul turismo).
Semplici e dirette, un sito deve servire i suoi utenti come fonte di informazioni, e la struttura generale, la grafica, e gli effetti accessori devono essere a supporto delle informazioni e non il contrario. Non si può sviluppare un sito progettando solo l’aspetto grafico per poi ritrovarsi con i testi scollegati ed inservibili.
Quindi, quando possibile, richiedi delle bozze semi-definitive dei contenuti del sito che andrai a sviluppare e su queste costruisci la struttura. Se non è possibile cerca di capire, parlando con il cliente, quali blocchi di informazioni andranno in ogni pagina del sito. Ad esempio, se la pagina “Funzionalità” prevede una tabella che raffronta le varie versioni di un software, oppure se la pagina “Chi siamo” prevede di inserire foto accanto alla descrizione della società. Semplici accorgimenti che possono fare la differenza.

5.Validare il codice

screen_validator
Anche il più esperto degli sviluppatori può commettere errori. Che siano errori di battitura oppure un uso improprio di tag, sono cose che possono accadere. Il World Wide Web Consortium (W3C) offre un servizio per validare le pagine web, il Validator, che evidenzia i vari errori presenti nella pagina, consentendo di correggerli. È uno strumento utilissimo che deve esserre nella cassetta degli attrezzi di ogni webdesigner.
La validazione, però, deve essere un mezzo e non un fine. In un mondo ideale, tutti i browser renderebbero le pagine web alla stessa maniera, senza alcuna differenza. Naturalmente questo non è il mondo ideale.
Il concetto da tenere a mente è che non si crea un sito affinché sia validato, ma perché l’esperienza dell’utente sia la migliore possibile. Con questo non voglio dire che bisogna saltare a piè pari la validazione, ma solo che non bisogna esserne schiavi. È possibile sviluppare un buon sito non valido, purché la causa della non conformità sia ben motivata.
Questo però non deve essere un pretesto per sviluppare un sito non conforme alle specifiche: un professionista sa qual è il suo limite e quando deve superarlo.

6.Studiare studiare studiare

Il segreto di ogni professionista è l’infinita curiosità. Non bisogna mai ritenere di essere arrivati all’apice, soprattutto in un contesto competitivo quale può essere lo sviluppo web. Quindi essere aggiornati è un must per chi vuole intraprendere la professione di webdesigner (e mantenerla per più di un anno).
Anche se l’inizio può essere un po’ avvilente per l’enorme mole di informazioni che si devono apprendere, iniziando dalle cose semplici ed afferrando bene i concetti basilari, vedrai migliorare le tue capacità sempre più velocemente.
Un consiglio che mi sento di darti è quello di iscriverti a molti blog del settore ed utilizzare un feed reader (come ad esempio l’ottimo Google Reader) per tenerti aggiornato sulle ultime novità.
Ad esempio, (se non l’hai già fatto) potresti cominciare iscrivendoti ai feed di Your Inspiration Web!

Tag: ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

5 commenti

Trackback e pingback

  1. Html, come lavorare e sviluppare siti in modo professionale?
    [...] Html, come lavorare e sviluppare siti in modo professionale? venerdì 3 luglio 2009 | Tratto da: https://www.yourinspirationweb.com/ [...]