Manuale HTML5: programma il futuro del web.

Chiamata anche Web Applications 1.0, è il nuovo standard di programmazione che si sta diffondendo in rete per la costruzione della pagine web.

HTML5
Programmazione Informatica HTML5

Per il momento il nuovo linguaggio informatico non ha un’ufficialità solenne, ma sta letteralmente spopolando in quanto promette un completo funzionamento e adattabilità a tutti gli apparecchi tecnologici di nuova e di vecchia generazione pc, smartphone, cellulari, tablet. Un formato informatico innovativo che riesce a far adattare tutti gli elementi grafici, testuali e applicativi agli schermi di un qualsiasi dispositivo utilizzato: personal computer, smartphone, tablet, telefoni cellulari…

L’HTML5 è un linguaggio semplice e leggero da utilizzare perché riduce al minimo le indicazioni del precedente XHTML già molto sfruttato. La novità dell’HTML5 è quella di racchiudere una semplicità della struttura della pagina con comandi molto intuitivi, compatto, con grafica sensazionale, navigazione intuitiva, e allo stesso tempo leggero e performante.
Unendo la semplicità, la leggerezza in termini di bytes con gli applicativi javascript e i fogli di stile CCS si riescono ad ottenere delle pagine web dinamiche senza limiti, se non quelli dettati della fantasia del programmatore.

Web Design Reattivo, web responsive.
Il WDR é stato ideato da Ethan Marcotte il quale con la pubblicazione in data 25 maggio 2010, sul blog A list apart di un articolo che descriveva il modo di progettare i siti-web per schermi di dimensioni diverse, basato sulla combinazione di media query, css3, layout, immagini flessibili. Un sistema pensato non solo per gli schermi dei tradizionali desktop, ma anche per quelli dei telefoni cellulari. Luke Wroblewski successivamente esaspererà il concetto con il “Mobile first”, privilegiando la progettazione per i telefoni portatili, con lo scopo di implemantare il traffico ad una pagina web tramite l’uso dello smartphone riducendo all’essenziale i contenuti e le funzionalità e l’applicazione delle nuove tecnologie come la geolocalizzazione.

L’obbietivo delle odierne pagine web è dunque quello di progettare per uno schermo piccolo per smartphone (320 pixel) e rendere il tutto responsive tramite una espansione del layout, progressive enhancement, fino al desktop (960 pixel). Espandere il layout è possibile progettando il sito non più assegnando i normali e rigidi pixel a contenitori e ai loro elementi (testo, immagini e tabelle), ma secondo percentuali e valori em, valutandoli e adattandoli di volta in volta alle Media Queries (MQ) ossia identificando media e caratteristiche del dispositivo che le consulta secondo i break-points o punti di rottura.
per ottenre un testo da 16px dobbiamo dividere il testo del browser 16px per il nostro obbiettivo. Se fosse 16px dovremmo avere 1em come valore. Se si dovesse adattatre un contenitore a tutto schermo dovremmo indicare 60em che deriva dalla massima larghezza del browser 960px/16px. Inoltre un altro esempio illuminante è di introdurre il valore massima larghezza max width che associato al precedente valor ci mette in grado di ottenere un’espansione a schermo intero per tutti browser.

Effetto Parallasse.
Un sito web denominato ad effetto parallasse offre la possibilità di essere visualizzato in una sola pagina web. La tecnica utilizza una combinazione di elementi che fluttuano su livelli e velocità diverse su più backgrounds e sfondi sovrapposti,creando profondità e movimento gradevole alla vista.

Per comprendere il linguaggio HTML5 occorre partire dai predecessori. Per primo ricordare i principali comandi HTML:
è un tag o elemento che racchiude l’intestazione che sarà mostrata sulla barra del browser come titolo, la parte introduttiva;è un tag in cui vengono scritte le operazioni da effettuare per il funzionamento della pagina web e che non appaiono;è la parte del sito in cui vengono posti gli elementi da visualizzare sul sito.

Poi il predecessore XHTML il cui sistema di funzionamento di base è sostanzialmente simile.
Con xhtml la struttura veniva divisa in sezioni con i seguenti livelli di intestazione: header, body, sidebars, footer, menu di navigazione, e i contenuti erano contrassegnati da tag div; l’HTML5 ha aggiunto dei nuovi elementi per identificare questi livelli. Vediamone i principali comandi.

HTML5 Tutorial.
Formattazione semantica dei contenuti.

<header></header> è l’intestazione posta all’inizio della pagina;

<nav>è una sezione del sito che contiene una serie di link o pagine interne o esterne al sito, una barra di navigazione;

<article></article>è una parte del blog secondaria dove inserire testo inerente all’argomento del sito;

<section></section>è un capitolo o sezione del sito principale (article);

<aside></aside>è la parte laterale del sito che contiene dati secondari come sponsor, link esterni o illustrazioni.

<footer></footer>è il fondo estremo della pagina dove va inserito email, copyright ecc.La particolarità del nuovo linguagigo è anche la possibilità di annidare i contenitori con estrema semplicità.

Ci sono poi dei tags nuovi importanti come ad esempio

<figure>è un tag usato per i contenuti visuali come foto, illustrazioni e diagrammi.</figure>Partiamo con il sito web.
Dopo aver capito la struttura da dare e annotata con fumetti, il primo elemento da inserire nella programmazione del nostro script e il doctype che diventa:
&lt;!doctype html&gt;

a seguire le dichiarazioni di lingua e set di caratteri:

<meta charset=”utf-8″ />

poi il titolo che apparirà in testa e sui motori di ricerca:
Moda Amable Y Social

e quindi i meta tags che si assottigliano a descrizioni e poche parole chiave:
<meta name=”description” content=”La desfile general de la Colección La Moda Amable Y Social de la Diseñadora, la prenda Fashion por mimetizarse en los ecosistemas y estar a la vanguardia en la ciudad, hecho a mano en Colombia.” />
<meta name=”keywords” content=”Prenda,Casa,Moda,Fashion,colección,dorado,social,amable,Stylist,Diseñadora,stilista,home,page,sastrería,confección” />

Con il tag seguente indichiamo al browser di tenere in considerazione delle dimensioni dello schermo del nostro apparecchio:

<meta name=”viewport” content=”width=device-width” />

si scrivono gli script di funzionamento fogli di stile CCS (interni o esterni) e javascript e quindi si chiude l’ aperto a inizio pagina.

A questo punto si apre il body dove andremo a scrivere ciò che si visualizza nella nostra pagina.

Quindi si richiama la struttura semantica base secondo le esigenze e la pianificazione della nostra pagina web e si inseriscono tutti i contenuti, box, tabelle, immagini, testo.

<header></header><nav></nav><article></article><footer></footer>poi si chiude il body e il foglio:

A questo punto si va a visualizzare il nostro laovro e si correggono gli eventuali errori.
Per validare il documento HTML5 il W3C Consortium ha inserito un test sperimentale che conferisce una provvisoria abilitazione. Il link è il tradizionale: validator.w3.org.

Infine per comprendere il dialogo tra il nuovo HTML5, fogli di stile e javascript dobbiamo richiamare il funzionamento dei CSS.

CSS. 
Il Cascading Style Sheets [CSS], è un linguaggio informatico utilizzato per definire la rappresentazione di documenti HTML, XHTML e XML.
I fogli di stile sono usati per migliorare l’aspetto visuale ed estetico del sito. Se si utilizzano i fogli di stile per l’impaginazione e i linguaggi scripting come JavaScript, Flash si riesce ad avere l’HTML Dinamico (DHTML), ossia il massimo della bellezza e precisione in fatto di Ipertesti e pagine web.
I fogli di style CSS servono anche per creare animazioni nelle pagine web sfruttando il preciso posizionamento degli oggetti sullo schermo.

I fogli di stile sono inseriti nelle righe html con il loro specifico elemento (tag):

<style><!–
e la sua relativa chiusura
–></style>.
All’interno del tag

<style><!–
vengono digitati i comandi che servono per variare lo stile del documento HTML che andiamo a creare.
I comandi dei fogli di stile devono essere collocati all’interno dei tags <head> e </head> del documento HTML (ad eccezione del foglio di stile direttamente in linea).

Style in linea” serve per modificare una sola parte della pagina.

paragrafo
<div> per andare a capo
<span> alterare il testo

Style incorporato” è definito una sola volta per tutto il documento.

<style> viene posto all’interno della sezione <head>

<style type=”text/css”>
p {text-align: justify; text-indent: 12px;}

<style>
<p style=”text-align: justify; text-indent: 12px;”>…</p>
Commenti all’interno di un foglio di style /* (barra e asterisco) per inizio commento e */ per chiusura.

Foglio di style esterno
E’ un file di testo con estensione finale .css dove al suo interno sono contenute tutte le specifiche che correderanno un file html a cui si richiama. E’ utile nel caso di modifiche delle nostre pagine web.

html, body{
margin-left: .5px;
margin-right: .5%;
color: #000000;
font-family: Verdana, Arial;
font-size: 10pt;
}

a:link{ text-decoration: none; color: #000000 ; }

a:visited{ text-decoration: none; color: Black; }

a:hover{ color: #ff1000; text-decoration: none; }

td{ font-family: “MS Sans Serif”; font-size: 12pt; }

p{ text-align: justify; text-indent: 10px; }

Le  classi  servono per creare delle varianti alla formattazione base, e servono per raggruppare certi comportamenti. Si inseriscono nel documento html con il comando .

.nomedellaclassegenerico {font-family: Verdana, Arial, sans-serif; color: #ff1000; font-size: 10pt; text-align: center; font-style: italic;}

e si richiamano con il comando
<p class=”nomedellaclassegenerico”> …</p>
Il selettore ID o identificatore è una etichetta di un contenitore che può essere richiamato insieme ai valori a lui associati, una sola volta nel foglio di style (esterno o interno).

Il comando per creare l’identificatore:

<style type=”text/css”>
#identificatorescelto {
font-family: Verdana, Arial, sans-serif;
color: #ff0000;
font-size: 10pt;
text-align: center;
font-style: italic;
}
–></style>si richiama con:
<div id=”identificatorescelto”>Qui il tuo testo</div>
L’Id è in generale utilizzato per il posizionamento di files e oggetti grafici.

<style type=”text/css”><!–
#NOSTROIDGENERICO {position: absolute; top: 68px; left: 45px; z-index: 10;}
–></style>e richiamarlo
<div id=”NOSTROIDGENERICO”>Mettere poi l’immagine di seguito</div>
<strong>Immagini.</strong>
Blocco
img {display: block;}
testo che circonda l’immagine:
img#NOSTROIDGENERICOsx {float: right;margin: 10px 10px 10px 10px;}

Un esempio in <a title=”HTML5 nell’ospitalità alberghiera” href=”http://www.hotelspoletoin.it/Servizi/Hotel.html”>HTML5.</a>

Un esempio in <a title=”HTML5 nella Moda” href=”http://www.auramilena.com”>HTML5.</a>

</nav>
</nav>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *