Ver el código de «HTML5»

==Introdución a HTML5==
[[Imagen:Html5-logo.jpg|right]]HTML5 é a nova xeración de HTML.

HTML5 será o novo estándar para HTML, XHTML e HTML DOM. A versión anterior de HTML data do ano 1999. A web cambiou moito dende ese ano.

HTML5 está aínda evolucionando pero, con todo, os modernos navegadores de hoxe en día xa teñen soporte para HTML5.

'''Como comezou HTML5?'''

HTML5 é o resultado da cooperación entre o W3C (''World Wide Web Consortium'') e WHATWG (''Web Hypertext Application Technology Working Group''). WHATWG estivo traballando no campo dos formularios e aplicacións, e a W3C estivo traballando con XHTML 2.0. No ano 2006, decidiron cooperar e crear a nova versión de HTML.

Establecéronse algunhas regras para HTML5:

* As novas características estarán baseadas en HTML, CSS, DOM e Javascript.
* Redución da necesidade de uso de plugins externos (como Flash).
* Mellora da xestión de erros.
* Máis emprego de etiquetas para remprazar o scripting.
* HTML5 será independente do dispositivo.
* O proceso de desenvolvemento será visible ao público.

==Novas características==
Algunhas das novas características máis destacables en HTML5:
* O elemento canvas para debuxo.
* Os elementos audio e video para reprodución multimedia.
* Mellor soporte para almacenamento local.
* Novos elementos específicos de contido, como article, footer, header, nav, section.
* Novos controles de formulario como, calendar, date, time, email, url, search.

==Novos elementos en HTML5== 
Internet cambiou moito dende que o HTML 4.01 se converteu en estándar no ano 1999.

Hoxe en día algúns dos elementos HTML 4.01 están obsoletos, non se usan ou non son usados no xeito no que foron definidos. Todos estes elementos foron borrados ou re-escritos no HTML5.

Para xestionar mellor o uso de internet, HTML 5 inclúe novos elementos para estruturar, debuxar, xestionar o contido multimedia e mellorar a xestión dos formularios.

=== Novas etiquetas ===
{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Etiqueta
!  width="100%" | Descrición
|- 
| '''&lt;article&gt;'''
| Para contido externo como novas dun artigo, blogue, forum ou calquera outro tipo de contido externo.
|- 
| '''&lt;command&gt;'''
| Un botón, un radiobutton ou un checkbox.
|- 
| '''&lt;details&gt;'''
| Para describir detalles sobre o documento, ou partes dun documento.
|- 
|''' &lt;summary&gt;'''
| Unha lenda ou sumario dentro dos detalles do elemento.
|- 
| '''&lt;figure&gt;'''
| Para agrupar unha sección de contido autónomo, podería ser un video.
|- 
| '''&lt;figcaption&gt;'''
| A lenda da sección figure.
|- 
| '''&lt;footer&gt;'''
| Para indicar un pe dun documento. Podería incluír o nome do autor, a data do documento, información de contacto e copyright.
|- 
| '''&lt;header&gt;'''
| Para introducir un documento ou sección. Podería incluír a navegación.
|- 
| '''&lt;hgroup&gt;'''
| Para indicar unha sección de cabeceiras, usando h1 ata h6, onde a máis grande é a parte principal da sección e as outras son subcabeceiras.
|- 
| '''&lt;mark&gt;'''
| Para resaltar texto.
|- 
|''' &lt;meter&gt;'''
| Para medir, usado soamente se se coñecen os valores máximo e mínimo.
|- 
| '''&lt;nav&gt;'''
| Para unha sección de navegación.
|- 
| '''&lt;progress&gt;'''
| O estado dun traballo en progreso.
|- 
| '''&lt;ruby&gt;'''
| Para anotacións ruby (notas chinesas ou outros caracteres).
|- 
| '''&lt;rt&gt;'''
| Para explicar a anotación ruby.
|- 
| '''&lt;rp&gt;'''
| Para amosar naqueles navegadores que non soportan o elemento ruby.
|- 
| '''&lt;section&gt;'''
| Para a sección nun documento. Tales como capítulos, cabeceiras, pes ou outras seccións do documento.
|- 
| '''&lt;time&gt;'''
| Para definir unha hora, data ou ambas.
|- 
| '''&lt;wbr&gt;'''
| Para definir un cambio de liña ou continuación de palabra. (word break).
|}

=== Novos elementos multimedia ===

HTML5 proporciona un novo estándar para o contido multimedia:

{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Etiqueta
!  width="100%" | Descrición
|- 
| '''&lt;audio&gt;'''
| Para contido multimedia, sons, música ou outros audio streams.
|- 
| '''&lt;video&gt;'''
| Para contido de video, tales como clips de películas ou outros video streams.
|- 
| '''&lt;source&gt;'''
| Para recursos multimedia definidos dentro dos elementos de  video ou audio.
|- 
| '''&lt;embed&gt;'''
| Para contido embebido, tales como un plug-in.
|}

=== Elemento canvas ===

O elemento canvas emprega Javascript para facer debuxos nunha páxina web.

{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Etiqueta
!  width="100%" | Descrición
|- 
| '''&lt;canvas&gt;'''
| Para facer debuxos cun script.
|}

=== Novos elementos de formulario ===

HTML5 ofrece máis elementos de formulario con máis funcionalidade:

{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Etiqueta
!  width="100%" | Descrición
|- 
| '''&lt;datalist&gt;'''
| Unha lista de opcións para valores input.
|- 
| '''&lt;keygen&gt;'''
| Xenera claves para autenticar a usuarios.
|- 
| '''&lt;output&gt;'''
| Para diferentes tipos de saída tales como a saída que produce un script.
|}

=== Novos tipos de atributos para input ===

A etiqueta input ten novos tipos de atributos para xestionar mellor a entrada de datos antes de envialos ao servidor:


{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Etiqueta
!  width="100%" | Descrición
|- 
| '''&lt;tel&gt;'''
| O tipo de dato introducido é un número de teléfono.
|- 
| '''&lt;search&gt;'''
| O tipo de dato introducido é un campo de busca.
|- 
| '''&lt;url&gt;'''
| O tipo de dato introducido é unha URL.
|- 
| '''&lt;email&gt;'''
| O tipo de dato introducido é unha ou máis direccións de correo electrónico.
|- 
| '''&lt;datetime&gt;'''
| O tipo de dato introducido é unha data e/ou hora.
|- 
| '''&lt;date&gt;'''
| O tipo de dato introducido é unha data.
|- 
| '''&lt;month&gt;'''
| O tipo de dato introducido é un mes.
|- 
| '''&lt;week&gt;'''
| O tipo de dato introducido é unha semana.
|- 
| '''&lt;time&gt;'''
| O tipo de dato introducido é de tipo tempo.
|- 
| '''&lt;datetime-local&gt;'''
| O tipo de dato introducido é de tipo data/tempo.
|- 
| '''&lt;number&gt;'''
| O tipo de dato introducido é un número.
|- 
| '''&lt;range&gt;'''
| O tipo de dato introducido é un número dentro do rango indicado.
|- 
| '''&lt;color&gt;'''
| O tipo de dato introducido é unha cor en formato hexadecimal, como #FF8811
|}

=== HTML5 video ===

O HTML5 proporciona un estándar que nos permite amosar os vídeos de moitas das websites modernas.
Ata agora non había un estándar para amosar vídeos nunha páxina web. Hoxe en día a maior parte dos vídeos amósanse empregando plugins (como Flash), sen embargo non todos os navegadores teñen os mesmos plugins.

HTML5 especifica a forma de incluír video na páxina web, coa etiqueta video.

'''Formatos de vídeo'''

Actualmente, a etiqueta video soporta dous formatos de vídeo: Ogg e MPEG 4.

Ogg=Emprega o codec Theodora e Vorbis audio.
MPEG4= Emprega vídeo en formato H.264 en audio en formato AAC.

'''Como funciona?'''

Para amosar un vídeo en HTML5 o único que necesitamos é:

<source lang="html4strict">
<video src="movie.ogg" controls="controls">
</video>
</source>

O atributo control é para engadir os botóns de play, pause e volume. Tamén é unha boa idea o incluír os atributos width e height. 

Entre as etiquetas <video> </video> inseriremos a mensaxe para aqueles navegadores que non soporten o elemento video de HTML5.

'''Exemplo 1:'''

<source lang="html4strict">
<video src="movie.ogg" width="320" height="240" controls="controls">
O seu navegador non soporta a etiqueta video de HTML5.
</video>
</source>

'''Exemplo 2:'''

<source lang="html4strict">
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
O seu navegador non soporta a etiqueta video de HTML5.
</video> 
</source>

'''Atributos da etiqueta video:'''

{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Atributo
!  Valor
!  width="100%" | Descrición
|- 
| '''&lt;autoplay&gt;'''
| autoplay
| Especifica que o vídeo comezará automaticamente tan pronto estea dispoñible.
|- 
| '''&lt;controls&gt;'''
| controls
| Especifica que se amosarán os controis do vídeo (play, pause, stop..).
|- 
| '''&lt;height&gt;'''
| ''pixels''
| Especifica a altura en píxels do reprodutor de vídeo.
|- 
| '''&lt;loop&gt;'''
| loop
| Especifica que o vídeo estará sempre reproducíndose. Cando remate volverá a comezar automaticamente.
|- 
| '''&lt;preload&gt;'''
| preload
| Especifica que o vídeo comezará a precargarse cando se cargue a páxina web. Si a opción autoplay está presente esta opción será ignorada.
|- 
| '''&lt;src&gt;'''
| ''url''
| Especifica a URL do vídeo a reproducir.
|- 
| '''&lt;width&gt;'''
| ''pixels''
| Especifica o largo en píxels do reprodutor de vídeo.
|}

=== HTML5 audio ===

O HTML 5 proporciona un estándar que nos permite reproducir audio nunha páxina web.

Ata agora non había un estándar para amosar audio nunha páxina web. Hoxe en día a maior parte dos vídeos son amosados empregando plugins (como Flash), porén non todos os navegadores teñen os memos plugins.

HTML 5 especifica a forma de incluír audio na páxina web, coa etiqueta audio.

'''Formatos de audio'''

Actualmente, a etiqueta audio soporta tres formatos de audio: Ogg Vorbis, MP3 e WAV.

'''Como funciona?'''

Para reproducir audio en HTML5 o único que necesitamos é:

<source lang="html4strict">
<audio src="song.ogg" controls="controls">
</audio>
</source>

O atributo controls é para engadir os botóns de play, pause en volume.

Entre as etiquetas de <audio> e </audio> inseriremos a mensaxe para aqueles navegadores que non soporten o elemento video de HTML5.

'''Exemplo 1:'''
Este exemplo funcionará correctamente en Safari, Firefox, Chrome e Opera.

<source lang="html4strict">
<audio src="song.ogg" controls="controls">
O seu navegador non soporta audio en HTML 5.
</audio>
</source>


'''Exemplo 2:'''
O elemento audio soporta múltiples elementos orixe. O navegador empregará o primeiro deles que recoñeza da lista e comezará a reproducilo.

<source lang="html4strict">
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
O seu navegador non soporta audio en HTML 5.
</audio> 
</source>

'''Atributos da etiqueta AUDIO:'''

{| border="1" cellspacing="0" cellpadding="5" align="center" 
!  Atributo
!  Valor
!  width="100%" | Descrición
|- 
| '''&lt;autoplay&gt;'''
| autoplay
| Especifica que o audio comezará automaticamente tan pronto estea dispoñible.
|- 
| '''&lt;controls&gt;'''
| controls
| Especifica que se amosarán os controis do audio (play, pause, stop..).
|- 
| '''&lt;loop&gt;'''
| loop
| Especifica que o audio estará sempre reproducíndose. Cando remate volverá a comezar automaticamente.
|- 
| '''&lt;preload&gt;'''
| preload
| Especifica que o audio comezará a precargarse cando se cargue a páxina web. Si a opción autoplay está presente esta opción será ignorada.
|- 
| '''&lt;src&gt;'''
| ''url''
| Especifica a URL do audio a reproducir.
|}

=== HTML5 canvas ===

O elemento canvas de HTML5 emprega Javascript para facer debuxos nunha páxina web.
Un canvas é unha área rectangular, na que podemos controlar cada píxel que hai dentro dela.
A etiqueta canvas ten varios métodos para debuxar liñas, cadros, círculos, caracteres e engadir imaxes.

'''Crear un elemento canvas.'''

Para engadir un elemento canvas indicando o seu id, largo e alto faremos:

<source lang="html4strict">
<canvas id="areadebuxo" width="200" height="100"></canvas> 
</source>

'''Debuxar con Javascript:'''
Para poder debuxar no canvas teremos que empregar Javascript.

<source lang="javascript">
<script type="text/javascript">
var c=document.getElementById("areadebuxo");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script> 
</source>

Javascript emprega o id para atopar o elemento canvas:

<source lang="javascript">
var c=document.getElementById("areadebuxo");
</source>

A continuación, crea un obxecto:
<source lang="javascript">
var cxt=c.getContext("2d");
</source>

O obxecto getContext("2d") está integrado no HTML5, e dispón de moitos métodos de debuxo.
As seguintes dúas liñas debuxan un rectángulo vermello:

<source lang="javascript">
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</source>

O método fillStyle indica o color vermello, e o método fillRect especifica a forma, posición e tamaño.

'''Entendendo as coordenadas:'''

O método fillRect ten os seguintes parámetros: (0,0,150,75).

Isto quere dicir: debuxar un rectángulo de 150x75, comezando na esquina superior esquerda (0,0).

As coordenadas X e Y empréganse para posicionar os debuxos dentro do canvas.

=== HTML5 almacenamento web ===

O HTML5 ofrece dous novos métodos de almacenar datos no cliente:
* localStorage - almacena datos sen límite de tempo.
* sessionStorage  - almacena datos durante unha sesión.

Anteriormente isto facíase empregando cookies. As cookies non son aconsellables para grandes cantidades de datos, xa que son pasadas en cada petición ao servidor, facéndoas moi lentas e ineficaces.

En HTML5, os datos non son enviados en cada petición ao servidor, soamente se envían cando sexan solicitados. Por iso é posible almacenar grandes cantidades de datos sen que afecte ao rendemento da web.

Os datos almacénanse en diferentes areas para as diferentes webs, e soamente unha web poderá acceder ós datos almacenados por ela mesma.

HTML5 emprega JavaScript para almacenar e acceder ós datos.

'''O método localStorage:'''

O método localStorage almacena os datos sen limitación de tempo. Os datos estarán dispoñibles o seguinte día, semana ou ano.


'''Como crear e acceder ao localStorage:'''

'''Exemplo:'''

<source lang="javascript">
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script> 
</source>

O seguinte exemplo conta o número de veces cun usuario visitou unha páxina:
Exemplo:

<source lang="javascript">
<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
</source>



'''O método sessionStorage:'''

O método sessionStorage almacena os datos durante unha sesión. Os datos serán automaticamente borrados cando o usuario pecha o navegador.

'''Como crear e acceder a sessionStorage:'''

'''Exemplo:'''

<source lang="javascript">
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script> 
</source>

O seguinte exemplo conta o número de veces cun usuario visitou unha páxina, na sesión actual:

<source lang="javascript">
<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script> 
</source>

== window.postMessage en HTML5 ==

No seguinte artigo poderedes ler información sobre intercambio de mensaxes entre dominios diferentes, semellante ao envío de mensaxes en Ajax pero coa vantaxe de poder facerse entre dominios distintos (cousa non permitida en Ajax).

[http://davidwalsh.name/window-postmessage http://davidwalsh.name/window-postmessage]

== Demos e exemplos de HTML5 ==

Visita esta páxina para ver máis demostracións e exemplos de HTML5.

[http://html5demos.com/ http://html5demos.com/]

Outro titorial sobre HTML5 moi interesante:

[http://diveintohtml5.org/ http://diveintohtml5.org/]

== Plantilla para un arquivo novo en HTML5 ==

<source lang="html4strict">
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title></title>
	</head>
	<body>


	</body>
</html>
</source>

* [http://www.1stwebdesigner.com/design/snippets-html5-boilerplate/ Snippets moi útiles en HTML5]

== Introdución ó Responsive Design ==

Enlaces á programación de páxinas web con Responsive Design.

* http://www.genbetadev.com/tag/introduccion-al-responsive-design
* http://www.genbetadev.com/desarrollo-web/responsive-design-introduccion
* http://www.genbetadev.com/desarrollo-web/responsive-design-adaptar-imagenes-y-videos
* http://www.genbetadev.com/desarrollo-web/responsive-design-estructura-adaptable
* [http://mediaqueri.es/ Diferentes ejemplos responsive design]

== Exemplos de Plantillas HTML5 e direccións interesantes ==
* [http://www.creativasfera.com/plantillas-gratis-para-diseno-web-responsive Plantillas Responsive gratuitas]
* https://wrapbootstrap.com/
* [http://subtlepatterns.com/ Backgrounds Fondos de pantalla para web]
* [http://css.dzone.com/articles/html5-code-snippets-take-your HTML5 Code Snippets]

--[[Usuario:Arribi|Jesus Arribi]] 13:21 8 nov 2010 (GMT)

--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 11:45 15 mar 2013 (CET)