Howtoweb.it

<link rel="stylesheet" href="css/theme/ui.theme.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>

<input value="Insert your tag here" />

$(function() {var myTags = ["tag1", "tag2", "anotherTag", "simpleTag"];
$("#tags").autocomplete({source: myTags});});

 $("#tags").autocomplete({source: "tagSearch.php"});

//creazione di un array vuoto
$return_arr = array();

//dati di accesso a mysql e al db
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

//definisco la variabile di ricerca dell'utente
$term = $_GET("term");

//connessione al a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);
//se connesso
if ($conn)
{
//query select
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}

}
//chiudo la connessione a mysql
mysql_close($conn);
//restituisco l'array in formato json
echo json_encode($return_arr);

<video></video>

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

AddType video/ogg .ogg .ogv

Lezioni di HTML 5
Lezione 3 – Semantica

Nel precedente articolo abbiamo visto come utilizzare gli elementi semantici dell’HTML 5 nella nostra pagina web.

Oggi approfondiremo gli aspetti relativi alla semantica di questi tag.

Un principale vantaggio derivante dall’utilizzo di questi elementi è la standarizzazione degli elementi, ovvero a differenza dell’HTML 4.01 abbiamo una serie di elementi specifici da utilizzare per diverso scopo.

Questo di fatto evita la definizione di div con classi ed id che risultano generici e variano a seconda delle abitudini di chi sviluppa la pagina.

Oltre a questo l’HTML 5 presenta un nuovo algoritmo per la definizione dell’outline del documento che modifica il normale modo di definire le intestazioni nel file html.

Facciamo un passo indietro, nell’HTML 4.01 l’unico modo per definire l’outline del documento è quello di utilizzare gli elementi h1/h6 con il rispettivo valore semantico.

Per esempio:

<h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

Notate come h1 sia univoco nella pagina e rappresenti il titolo del sito, il sottotitolo del sito è definito con <h2>, mentre h3 e h4 rappresentano rispettivamente titolo e sottotitolo di una sezione/contenuto della pagina.

In HTML 5 possiamo modificare questa situazione come segue:

<header>
 <hgroup>
 <h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>
 </hgroup>
 </header>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

Analizziamo nel dettaglio le differenze.

L’elemento h1 si ripete

Nell’HTML 5 l’utilizzo dell’elemento <article> definisce una sezione indipendente della pagina dove appunto posso riutilizzare l’elemento h1 dove avrà valore di titolo della sezione/contenuto e non della pagina.

Utilizzo di hgroup

L’utilizzo di hgroup ha lo scopo di raggruppare insieme intestazioni diverse, nel caso del primo elemento all’interno dell’header h1 avrà valore di titolo e h2 di sottotitolo, questo permette di utilizzare un’intestazione con valore associato ad altre intestazioni presenti in quel contesto senza che il significato venga mistificato da elementi uguali presenti sulla pagina.

Come abbiamo visto l’HTML 5 tratta diversamente la semantica degli elementi da altri linguaggi di markup ma offre indubbiamente una serie di vantaggi che rendono il codice molto più modulare e semantico.

Nel prossimo articolo vedremo come verificare il supporto delle funzionalità più avanzate dell’HTML5 sul browser dell’utente.

Passate a trovarmi come sempre su howtoweb.it o abbonatevi ai feed rss per rimanere aggiornati sugli ultimi articoli.

Alla prossima

Tag: html, html 5

Lezione di HTML 5
Lezione 2 – Usare i nuovi tag

Nella lezione precedente abbiamo visto come impostare il nostro file in HTML 5 definendo un doctype shorted, un corretto charset e gestendo css e javascript senza enunciazione del mime.

Oggi vedremo invece alcuni tag che utilizzeremo per definire il layout della nostra pagina web.

Prima di procedere, dobbiamo però risolvere un dubbio cruciale.

I nuovi elementi dell’HTML 5 sono supportati dai browser attuali?

La maggior parte dei browser non incontriamo problemi nell’utilizzo di questi tag, normalmente il browser individua l’elemento lo aggiunge al DOM della pagina e gli attribuisce dei valori di default in base alle informazioni in suo possesso e nel caso possiamo sovrascrivere stili customizzati con un normale css.

La vera problematica è Internet Explorer che fino alla versione attuale (8) rappresenta l’elemento sconosciuto nel DOM come un nodo vuoto, rendendo impossibile definire un qualunque stile per l’elemento.

La soluzione per Internet Explorer

Prima di disperarci e tornare ad insultare per l’ennesima volta il browser di mamma Microsoft sappiate che esiste una soluzione molto semplice al problema.

Possiamo infatti pensare di creare un elemento sconosciuto a Internet Explorer prima della creazione del DOM.

Senza aggiungere l’elemento a mano nel codice possiamo utilizzare javascript per creare a priori l’elemento e permetter così di stilizzarlo con i css.

<script>document.createElement("header");</script>

Per fare in modo che il workaround funzioni, è necessario mantenere lo script nell’head della pagina, una buona norma può essere quella di inserire lo script in un commento condizionale per IE.

<!--[if IE]>
<script>document.createElement("header");</script>
<![endif]-->

Lo script creerà così un elemento <header> prima della creazione del DOM solo per IE, permettendo di stilizzare tale elemento con i css.

Una scelta migliore,  HTML5 enabling script

Considerato che i nuovi elementi dell’HTML 5 sono numerosi potremmo pensare di aggiungerli a mano ma una soluzione sicuramente più comoda e più sicura è rappresentata da questo script javascript di Remy Sharp che oltre a velocizzare la realizzazione considera anche problematiche più peculiari come i css per la stampa dove i javascript non vengono eseguiti.

Al markup!

Ora che siamo certi di un funzionamento crossbrowser possiamo iniziare ad aggiungere qualche nuovo tag al nostro file.

Header

L’elemento <header> ha come scopo quello di racchiudere una porzione di codice che avrà ruolo di testata della pagina.

Per esempio

<header>
<!-- il logo ed eventuale intestazione al sito -->
</header>

Hgroup

L’elemento <hgroup> racchiude una porzione di codice composta da intestazioni

<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

Article

L’elemento <article> racchiude una porzione di codice semanticamente indipendente dal resto della pagina e sì possiamo utilizzarla al posto del solito <div> di wordpress :)

<article>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
</article>

Time

L’elemento <time> rappresenta una data di pubblicazione.

<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>

L’attributo datetime accetta sia date che in aggiunta l’ora in formato leggibile per la macchina

L’attributo pubdate determina a scelta la data di pubblicazione di un contenuto specifico (se all’interno di <article>) o la data di pubblicazione della pagina se lasciato all’esterno.

Nav

L’elemento <nav> specifica una porzione di codice destinato ala navigazione per esempio la lista di un menu.

<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Aside

L’elemento <aside> viene utilizzato per definire una porzione di codice destinata correlata al contenuto ma comunque separata come per esempio una sidebar

Footer

L’elemento <footer> definisce una porzione di codice che rappresenta di fatto il piede della pagina o del contenuto specifico.

<footer>Make with love and HTML5!</footer>

un esempio completo della pagina è il seguente.

<!doctype html>
<html>
<head>
<title>titolo della pagina</title>
<meta charset=utf-8>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo del sito</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
</header>
<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>
<p>Testo di prova</p>
</article>
<aside>contenuto relazionato ma indipendente</aside>
<footer>Make with love and HTML 5</footer>
</body>
</html>

Un’ultima nota sui tag visti in questo articolo, la loro funzione è altamente semantica ed è quindi utile sapere come utilizzarli correttamente nel contesto specifico.
Nel prossimo articolo parleremo della semantica nell’HTML 5 e dei cambiamenti che comporta.

Per oggi è tutto, tornate a trovarmi oppure abonatevi agli RSS per rimane aggornati sulle ultime novità.

Alla prossima!

Tag: html, html 5