Millora l'estructura

HTML5 ofereix nous elements per millorar l'estructura.

Millorar l'estructura del nostre documents millorarà la nostre indexació als motors de búsqueda com Google

Alt + click anywhere to zoom back out.

<header>

<!-- Un encapçalat per un <article>: -->
<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate="" datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

• Especifica una capçalera d'un document o secció.
• Vostè pot tenir diversos elements <header> en un sol document.

S'ha d'utilitzar com a contenidor de continguts introductoris.

<nav>

<!-- Un conjunt de vincles de navegació: -->
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

• Defineix un conjunt d'enllaços de navegació.

Els navegadors, com ara lectors de pantalla per a usuaris amb discapacitat, puguin utilitzar aquest element per determinar si s'ha de ometre la prestació inicial d'aquest contingut

Tingueu en compte que no tots els enllaços d'un document ha d'estar dins d'un element

<section>

<!-- Una secció d'un document, explicant el que WWF és: -->
<section class="future" style="top: -20px; display: none; ">
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

• Defineix les seccions d'un document, com capítols, encapçalats, peus de pàgina o qualsevol altra secció del document.

Un bloc de text al qual perfectament li podríem posar un títol o encapçalament. A més, tot el contingut que engloba ha de guardar certa relació entre si.

<article>

<!-- Un artucle d'un document, explicant els serveis de WWF és: -->
<section class="future" style="top: -20px; display: none; "> 
<header><h1>WWF services</h1></header> 
<article><header><h2>Service 1</h2></header>...</article> 
<article><header><h2>Service 2</h2></header>...</article> 
<article><header><h2>Service 3</h2></header>...</article> 
</section>

• Especifica el contingut independent, autònom...

La documentació oficial es una mica ambigua envers article i secció, per tant si busqueu informació veure-ho que hi ha opinions de tot tipus

Jo soc dels que entenen que una secció es subdivideix en articles

<aside>

<p>My family and I visited The Epcot center* this summer.</p>

<aside>
<h4>*Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

• Relaciona un contingut amb un altre.

Un exemple sería afegir notes o definicions d'una o un grup de paraules

<footer>

<!-- Una secció de peu de pàgina en un document: -->
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

• Defineix un peu de pàgina d'un document o secció.

Un peu de pàgina sol contenir l'autor del document, informació de drets d'autor, enllaços a termes d'ús, informació de contacte, etc

Vostè pot tenir diversos elements <footer> en un sol document.

<mark>

<!-- Ressaltar parts d'un text: -->
<p>Do not forget to buy <mark>milk</mark> today.</p>

• Resalta una part del text.
• Exemple

Com si for amb un marcador o edding groc

<progress >

<!-- Ressaltar parts d'un text: -->
<progress value="22" max="100"></progress>

• Representa el progrés d'una tasca..
• Exemple

valor actual value="22" número max="100", es tracta d'interactuar amb JS

Millora als formularis 1/2

HTML5 Posa a la nostre disposició nous tipus d'entrada de dades.

Només explicaré els nous tipus compatibles amb les últimes versions dels navegadors més importants (firefox, safari chrome opera e IE)

Alt + click anywhere to zoom back out.

<input type="range"

<input type="range" name="points" step="2" min="1" max="10" value="4">

• El tipus de rang s'utilitza per a camps d'entrada que ha de contenir un valor d'un rang de nombres.
• Exemple

valor actual value="22" número max="100"

<input type="email"

<input type="url"

<input type="email" name="email">
<input type="url" name="homepage">

• Afegeix la validació per part del navegador el tipus de dada introduïda

Es tracta d'un camp d'introducció de text normal, només afegeix la funcionalitat de validació per part del navegador

Encara que no es acceptat per Safari, personalment crec que aporta claritat a l'usuari, encara que no ens evita haver de validar la dada introduïda des del backend

Millora als formularis 2/2

HTML5 Posa a la nostre disposició nous atributs als tipus d'entrada de dades.

Només explicaré els nous tipus compatibles amb les últimes versions dels navegadors més importants (firefox, safari chrome opera e IE)

autofocus

<input type="text" name="fname" autofocus="">

• Especifica que un element <input> automàticament ha d'obtenir el focus quan es carrega la pàgina.

Es molt útil afegir-ho vía JS o des del backend a l'hora de fer la validació del formulari i detectar un camp incorrecte

formAction

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>

• L'atribut formAction especifica la URL d'un fitxer que va a processar el control d'entrada quan s'envia el formulari.
• Exemple

Et permet en un mateix formulari afegir dos botons d'enviament per tan d'enviar el formulari a dos destins diferents

formmethod

<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">
</form>

• Defineix el mètode HTTP per enviar les dades del formulari.
• Exemple

El mateix cas que l'anterior però especificant el métode d'enviament de dades Get o Post segons el botó que hem clickat

formtarget

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank" value="Submit to a new window">
</form>

• Especifica el lloc per mostrar la resposta que es rep després d'enviar el formulari.
• Exemple

De la mateixa manera que fins ara podíem obrir un link en una nova pàgina o pestanya; ara podem fer el mateix amb els formularis

multiple

Select images: <input type="file" name="img" multiple="">

• Especifica que permet que l'usuari introdueixi més d'un valor en l'element
• Exemple

Ja podem enviar múltiples arxius en un formulari sense haver d'utilitzar JS

placeholder

<input type="text" name="fname" placeholder="First name">

• Especifica una pista curta que descriu el valor esperat d'un camp d'entrada (per exemple, un valor de mostra o una breu descripció del format esperat)
• Exemple

Ja podem afegir un placeholder en un formulari sense haver d'utilitzar JS

required

Username: <input type="text" name="usrname" required="">

• Especifica que un camp d'entrada ha de ser completat abans d'enviar el formulari.
• Exemple

Encara que safari no ho accepta crec que és de molta utilitat poder indicar fàcilment que un camp es obligatori delegant al navegador aquesta tasca i el mateix que abans, no hem d'utilitzar JS

<Canvas>

S'utilitza per dibuixar gràfics, sobre la marxa, a través de JavaScript.

Wow personalment hem sembla increïble, si això va avançant ens hi portarà molt lluny

S'ha introduït aquest nou element per tal de prescindir de complements com poden ser el Flash player i similars

Alt + click anywhere to zoom back out.

Compatible amb tots els navegadors

1. Crear un llenç

<canvas id="myCanvas" width="200" height="100">
</canvas>

• Especifiqueu sempre un atribut id (que es fa referència en un script), i una amplada i una alçada d'atributs per definir la mida del llenç.
• Exemple

Consell: Podeu tenir diversos elements en una pàgina HTML.

2. Dibuixeu al llenç amb javascript

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(0,0,150,75);
</script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillRect(0,0,150,75);

L'objecte getContext ("2D") és un objecte incorporat HTML5, amb moltes propietats i mètodes per dibuixar traçats, quadres, cercles, text, imatges i més.

El fillRect ( x, i, ample, alt mètode) dibuixa un rectangle farcit amb l'estil de farciment actual.

Així, el mètode fillRect () anterior tenia els paràmetres (0,0,150,75).

Això significa: Comença a la cantonada superior esquerra (0,0) i dibuixeu un rectangle 150x75 píxels.

Veiem aquest component canvas amb més profunditat

Llenç Coordenades

• La cantonada esquerra son les coordenades 0,0
• La cantonada dreta inferior son les coordenades del ample i alçada total del canvas

Dibuixar una línia

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

Dibuixar un cercle

ctx.beginPath();
ctx.strokeStyle="#FF0000";
ctx.arc(95,50,0,0,2*Math.PI);
ctx.stroke();

ctx.beginPath();

ctx.strokeStyle="#FF0000";

ctx.arc(95,50,0,0,2*Math.PI);

ctx.lineWidth = 8;

Afegir text

ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

ctx.stroke(); dibuixa el contorn i fill omple tot l'espai

Afegir imatges

var img=document.getElementById("flashImg");
ctx.drawImage(img,5,5);

ctx.lineWidth = 8;
ctx.strokeStyle="#FF0000";
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
ctx.moveTo(200,0);
ctx.lineTo(0,200);
ctx.stroke();

var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

Alguns exemples espectaculars

L'element canvas obre la porta a un univers de possibilitats, veiem alguns exemples:

http://techslides.com/learning-html5-canvas-through-jsfiddle-examples/

<Video>

Ja podem incrustar vídeos sense necessitat de flash player

Wow personalment hem sembla increïble, si això va avançant ens hi portarà molt lluny

S'ha introduït aquest nou element per tal de prescindir de complements com poden ser el Flash player i similars

Alt + click anywhere to zoom back out.

Com utilitzar-ho?

<video width="320" height="240" controls="">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

L'atribut de control afegeix controls de vídeo, com reproducció, pausa i volum.

Formats de vídeo i Suport del navegador

Actualment, hi ha 3 formats de vídeo compatibles amb l'element; MP4, WebM i Ogg :

Per tal de assegurar la compatibilitat amb tots els navegadors afegim tants tipus de source com faci falta

<Audio>

Ja podem incrustar audio sense necessitat de flash player

Wow personalment hem sembla increïble, si això va avançant ens hi portarà molt lluny

S'ha introduït aquest nou element per tal de prescindir de complements com poden ser el Flash player i similars

Alt + click anywhere to zoom back out.

Com utilitzar-ho?

<audio controls="">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

L'atribut de control afegeix controls de vídeo, com reproducció, pausa i volum.

Formats de àudio i Suport del navegador

Actualment, hi ha 3 formats de àudio compatibles amb l'element; MP3, WAV i OGG :

Per tal de assegurar la compatibilitat amb tots els navegadors afegim tants tipus de source com faci falta