HTML5 pasiño a pasiño

De MediaWiki
Ir a la navegación Ir a la búsqueda


Amando HTML5!
Mapa do metro de HTML5
Documento HTML5


Introdución a HTML5

Archivo:Html5-logo.jpg

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 (coma 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

Caracteristicas-html5.PNG

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 (para web semántica) coma article, footer, header, nav, section.
  • Novos controis de formulario coma calendar, date, time, email, url, search.

Profundizando en HTML5

A continuación indícanse varios titorias para aprender en detalle HTML5:

Moitas do explicado neses titoriais detállase tamén nas seguintes seccións.

Declaración de documentos

É importante para que o navegador web poida presentar correctamente o contenido deste tipo de documentos.

Para indicar que o noso documento é un documento html5, simplemente comezaremos antes que nada escribindo a declaración: 

 <!DOCTYPE HTML>

A declaración de codificación de caracteres por defecto será: <meta charset=”UTF-8”> 

<!DOCTYPE HTML>
<html>
 <head>
   <meta charset="UTF-8">
   <title> O meu primeiro título</title>
  </head>
  <body>
    Contido...
  </body>
</html>

Novos elementos incorporados

Incorpóranse en HTML5 novos elementos coma:

  • Para crear la estructura de la página como las cabeceras <heder>, menús de navegación <nav>, secciones <section>, pies de página <footer>, etc.
  • Para insertar elementos multimedia como audio <audio>, video <video>, etc.
  • Agreganse elementos coma o svg para gráficos vectoriais e tamén o elemento canvas.
  • Novos campos para os formularios coma selectores de data, cores, campos de url, etc.
  • barras de progreso, as apis de geolocalización, almacenamento local, drag & drop (arrastrar e soltar elementos), etc.

Elementos eliminados

Sen supoñer a lista exhastiva de [elementos eliminados en HTML5, podemos mencionar os seguintes.

En HTML5 elimináronse elementos (que fan cousas que se poden executar con CSS) coma:

  • <basefont>
  • <big>
  • <blink>
  • <center>
  • <Font>
  • <marquee>
  • <multicol>
  • <nobr>
  • <spacer>
  • <tt>

Elimináronse outros elementos que teñen etiqueta alternativa coma:

  • <acronym> (recomendado <abbr>)
  • <applet> (recomendado <object>)
  • <dir> (recomendado <ul>)
  • <strike> (recomendado <del>)
  • <listing> (recomendado <pre> e <code>

También foron removidos:

  • <iframe>
  • <frameset>
  • <noframes>

Con todo sempre quedarán moitas páxinas con código con estes elementos.

Categorías de contido

En HTML5 existen varias clases, tipos, modelos o categorías de contenido. Dependendo das características, a función que desempeñan e cómo se comporta un determinado elemento, esta pertencerá a unha categoría.

Así podemos clasificar os elementos HTML en varios modelos de contido.

Os contidos metadato

Pertencen a esta categoría os elementos HTML coma son:

  • <style>
  • <script>
  • <meta>
  • <title>
  • <base>
  • <comand>
  • <link>
  • <noscript>

Os contidos metadato caracterízanse por conter información de tipo metadato: determinan o xeito en que se comportan, actúan ou aparecen os elementos do documento HTML.

Xeneralmente están no encabezado e tamén son capaces de establecer comunicación con outros documentos relacionados ou externos.

Os contenidos interactivos

Son aqueles creados para a interacción co usuario, tales coma os enlaces, botóns, campos de entrada de texto, audios, vídeos, etc.

  • <a>
  • <audio>
  • <video>

Os contidos incrustados

Elementos que importan recursos no noso documento:

  • <audio>
  • <video>
  • <canvas>
  • <img>
  • <math>
  • <svg>
  • <object>

Os contidos de título ou encabezado

Conteñen encabezados ou títulos (posúen xerarquía):

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <hgroup>

Os contenidos de expresión ou fraseo

Son elementos en liña:

  • <span>
  • <strong>
  • <br/>
  • <small>
  • <sub>

Os contidos de seccionamento

Son os elementos que limitan e definen o alcance de elementos como a cabeceira, o cuerpo, o pe e u outras seccións da páxina:

  • <article>
  • <aside>
  • <nav>
  • <section>

Contido ou categoría de fluxo

Pertencen a esta categoría a maioría dos elementos HTML.

Contidos relacionados a formularios

Pertencen a esta categoría os elementos que están relacionados aos formularios:

  • <form>
  • <input>
  • <textarea>
  • ...
Dependiendo deo xeito no que se usa un elemento HTML, un mesmo elemento pode ser por exemplo un contido de fluxo, incrustado ou interactivo: isto é, un elemento pode pertencer a máis dun tipo de contido.

Estrutura de páxina HTML5

Un exemplo de estrutura de páxina usando etiquetas semánticas - de w3Schools

A estrutura dunha páxina HTML5 está conformada por unha variedade de elementos que adquiren un alto valor semántico en comparación ás anteriores versións de HTML, xa que contamos con novas etiquetas que posúen significado para estruturar axeitadamente unha páxina web con HTML5

As novas etiquetas semánticas destinadas para crear unha estructura de páxina HTML5:

  • <header>: contén a cabecera
  • <nav>: contén unha barra de navegación ou lista de hipervínculos.
  • <aside>: pode ser un sidebar ou un bloque de contido secundario
  • <article>: o contenido principal
  • <section>: seccións da páxina
  • <footer>: o pé de páxina.

Ventaxas da nova estrutura

Elixindo sección HTML5
  • Organización: HTML5 organiza mellor as partes dunha páxina web. Así cada parte ten un nome e unha etiqueta exclusiva para o seu tipo de elemento.
  • Significado: As etiquetas posúen un significado en comparación con versións anteriores de HTML nas que se emprgeaban por exemplo etiquetas <div> para crear os bloques. Unha etiqueta <div> simplemente representa unha división e non posúe ningunha carga semántica adicional; por exemplo unha etiqueta <div id=”footer”> será interpretada polos navegadores coma unha simple división mentres que a etiqueta HTML5 <footer> ten un significado contundente por ser empregada exclusivamente para o pé de páxina.
  • Posicionamento: os motores de busca guíanse da estrutura duhna página para entender de que trata. as etiquetas html5 facilitan que os motores de búsqueda entendan mellor o que ten un impacto ó momento de aparecer nos resultados de busca: entre unha páxina construida con etiquetas <div> e outra con etiquetas de HTML5, esta última será máis entendible e con maior probabilidade de mellor posicionamento.

Elemento <header>

O elemento <header> prácticamente contén o encabezado onde poden ir elementos coma o logo, o nome do sitio e elementos apropiados para o encabezado.

  • <header> úsase dentro de <body>
  • <head> e <header> son moi diferentes. Non confundir!

Exemplo: 

<!DOCTYPE html>
<html>
  <head>
    <title>Título Cans</title>
  </head>
  <body>
    <header style="background-color:blue;"> 
      <img id="logo" src="can.jpg" width="100px" height="100px"/>
      <h1>Sitio web de cans</h1>
        <p>Un sitio web xenial os amantes dos cans</p>
    </header>
  </body>
</html>

Elemento <nav>

O elemento <nav> contén un conxunto de enlaces ou hipervínculos para a navegación, para ir dunha página ou sección a outra fácilmente.

Exemplo: 

<nav>
  <ul>
    <li><a href="url">Inicio</a></li>
    <li><a href="url">Sobre nós</a></li>
    <li><a href="url">Servizos</a></li>
    <li><a href="url">Contacto</a></li>
  </ul>
</nav>

Elemento <article>

É un elemento semántico e o seu contenido será autónomo e independente; posúe sentido por sí mesmo. 

<article>
  <h1>Los gatitos</h1>
  <p>Los gatitos son animales mamiferos que pertenecen a la familia de felinos...</p>
  <h2>Qué hacen los gatitos</h2>
  <p>Los gatitos hacen las siguientes actividades</p>
  <ul>
    <li>Maullan</li>
    <li>Juegan</li>
    <li>Cazan ratones </li>
    <li>Duermen roncando</li>
  </ul>
  <h2>Razas de gatitos</h2>
  <p>Existen varias razas de gatitos, a continuación nombramos algunos:</p>
    <ul>
    <li>Abisinio</li>
    <li>American Curl</li>
    <li>Bengalí </li>
    <li>Bombay</li>
  </ul>
</article>

<article> podería contener por ejemplo un artículo de un sitio, o la noticia de un sitio de noticias o un comentario de un post. Cuando <article> está dentro de un bloque mayor, entonces el contenido de <article> está relacionado con el contenido del bloque mayor.

Elemento <section>

Elemento que contén unha sección, parte ou peza dun contido. Tamén é un contido semántico. Os elementos que están dentro de <section> están relacionados entre si para formar un contido con significado propio.

Elemento <aside>

En <aside> está o contido secundario, e non é precisamente parte do contido principal.

Cando <aside> se pon dentro de <article> pódese entender que <aside> é un contido complemetario que xa non forma parte do contido principal.

O elemento <aside> poderían ser os sidebar, as barras laterais que algúns sitios web presentan; ou publicidade, banners ou simplemente elementos complementarios.

Os elementos <article>, <section>, <aside> son considerados semánticos xa que dan significado ó contido que engloban, Utilizalos correctamente é moi importante para que os motores de busca entendan e as amosen correctamente e nas mellores posicións.

Elemento <footer>

Este elemento prácticamente contén o pé de páxina, onde dentro poden ir por exemplo iconas de redes sociais, datos de contacto, termos do servizo, etc.

Dependendo dos nosos obxectivos e expectativas podemos utilizar outros elementos html dentro dos elementos <header>, <nav> e <footer>.

Exemplo de código da estructura de paxinas en html5

<!DOCTYPE html>
<html>
<head>
  <title>Titulo</title>
</head>

<body> 
  <header> A etiqueta header contén a cabecera. Preséntase como unha barra na que se amosa informacion, logo, descricion, etc.
    <nav>Contén a barra de navegación duhna páxina web. </nav>
  </header>
  <main>
    <section> Esta é unha sección de contido do bloque principal (MAIN) 
      <article> Isto é un artículo do sitio </article>
      <article> Isto sería un segundo artigo </article>
    </section>
  </main>
  <aside>A etiqueta aside contén información accesoria  que non adoita engadir un valor ssignificativo á temática da páxina. Pode ser usada para a barra lateral na que poden ir elementos de widgets, con calquer contido dentro. </aside>
  <footer>Footer contén o pé de páxina. Pode conter enlaces, mapa do sitio, etc.</footer>
</body>
</html>

Exemplos de <section> e <article>

Para organizar mellor o contido independente, as etiquetas <section> poden ir dentro das etiquetas <article> 

<article> 
  <h2> Aniamles segundo a alimentación</h2> 
  <p> Segundo a súa alimentación os animais clasifícanse en ... </p> 
  <section> 
    <h3> Carnívoros </h3> 
    <p> Comen a outros animales! </p> 
  </section> 
  <section> 
    <h3> Hervívoros </h3> 
    <p >So comen vexetais </p> 
  </section> 
</article>

Noutras ocasións pódese usar un elemento <article> dentro dun elemento <section>. Por exemplo, nunha páxina web que conténe varios artigos sobre diversos temas: 

<section> 
    <h1>Artículos sobre lugares turísticos </h1> 
    <article> 
      <h3>Santo André de Teixido</h3> 
      <p>Un pobo cunha lenda rodeado dos máis altos acantalidados da Europa continental</p>  
    </article> 
    <article> 
      <h3>Praia Sonreiras</h3> 
      <p>Se non botamos en falta palmeiras e cocoteiros, estamos nunha cala exótica do Caribe</p> 
    </article>
</section>

En resumo, <article> é un elemento independente e <section> é preferible utilizaro para partes dun elemento máis grande: por exemplo dentro dun <article>. Con todo é posible que en ocasións, unha vai dentro doutra e viceversa.

Outras etiquetas semánticas

<details> e <summary>

<figcaption> e <figure>

A etiqueta <figure> contido autónomo, coma ilustracións, diagramas, fotos, etc.

A etiqueta <figcaption> define unha lenda para o elemento <figure>. O elemento <figcaption> pode ser ubicado como o primeiro ou último fillo do elemento <figure>.

O elemento <img> define a imaxe/ilustración actual.

Por exemplo: 

 <figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

<main>

Especifica o contido principal do documento.

O contido dentro do elemento <main> debe ser único para o documento. Non debe ter contido que se repite no documento coma sidebars, enlaces de navegación, información de copyright, logos de sitio e formularios de busca. 

Non pode haber máis que un elemento <main> no documento! E non debe ser descendente dos elementos <article>, <aside>, <footer>, <header>, ou <nav>.

<mark>

A etiqueta <mark> define texto que debe ser marcado ou destacado.

Exemplo: 

<p>Do not forget to buy <mark>milk</mark> today.</p>

<time>

A etiqueta <time> define un time ou momento específico(ou datetime).

O atributo datetime deste elemento é usado para traducir o tempo en un formato lexible pola máquina para que os navegadores poidan ofrecer recordatorios de data a través do calendario do usuario, e os motres de búsqueda podan devolver resultados máis intelixentes.

Exemplo: 

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

Etiqueta de audio e video

A etiqueta <audio> serve para insertar un reproductor de sonido en html5. 

<audio src="miaudio.mp3" > este é un elemento de audio non soportado polo teu navegador, proba con outro </audio>

A etiqueta <video> serve para insertar un reproductor de vídeo na nosa páxina HTML, co uso dos atributos axeitados: 

<video src="https://www.videos.con/uploads/video.mp4" controls> Video non soportado... </video>

Podes atopar información máis detallada no artigo de audio con HTML5 e no artigo de vídeo con HTML5.

Barras de progreso

Podemos crear barras de progreso, e en conxunto con Javascript pódense crear barras dinámicas, por exemplo para amosar o avance dunha tarefa, un proceso ou uhna medida.

Coa etiqueta <progress> podemos crear unha barra de progreso.

Os seus atributos:

  • Min: o seu valor será o valor mínimo da barra de progreso.
  • Max: o seu valor será o valor máximo da barra de progreso.
  • Value: o seu valor será un valor entre o valor mínimo e o valor máximo e se reflictirá na barra de progreso.
<progress min="0" max="100" value="75">elemento de progreso non soportado polo teu navegador, proba con outro </progress>

Para crear unha barra de progreso dinámico que obedeza a eventos precísase de coñecementos de programación en javascript.

Gráficos SVG

SVG (Scalable Vector Graphics) significa gráficos vectoriales escalables. A etiqueta <svg> permítenos crear imaxes bidimensionais en formato svg.

Para crear imáxenes svg primeiro crearemos a etiqueta <svg> cos seus respectivos atributos coma width (ancho) e height (alto).

Creamos un lienzo coas súas dimensións e dentro crearemos os nosos gráficos vectoriais escalables. 

<svg  width="240" height="250">...</svg>

Se non se indica width e height o valor por defecto será do 100%.

Svg posee un sistema de coordenadas onde o punto da orixen (0,0) será a esquina superior esquerda, a coordenada x aumenta o seu valor hacia a dereita e a coordenada y aumenta o seu valor hacia abaixo. (0,0)

Dentro de <svg> podemos crear desde simples lineas, figuras xeométricas coma círculos, cadrados, rectángulos, triángulos, polígonos, elipses e traxectorias ata complexas imágenes coma logos.

Además podemos darlle estilo con css e funcionalidades con JavaScript.

Os gráficos resultantes son vectoriales polo que nunca perden a súa resolución ainda que os agrandemos.

Pola extensión que pode acadar esta sección para explicar cómo aprender a crear gráficos en SVG (comezando por simples liñas, rectángulos, círculos, polígonos, elipses e curvas ata figuras híbridas máis complexas), abarcaremos este tema nun artigo separado: SVG pasiño a pasiño

Formularios

Recordemos que para crear formularios faremos uso da etiqueta <form>, e que dentro dela irán todos os campos <input> co seu respectivo atributo type para establecer mediante un valor o tipo de información que debe colocar nese campo. 

<form>
  Texto:<input type="text"/>
</form>

Ademáis dos elementos <input> coñecemos tamén outros coma:

  • <textarea>
  • <option>
  • <select>
  • etc.

Coñecemos tamén valores para o atributo type tales coma:

  • text
  • password
  • checkbox
  • radio
  • submit
  • etc.

Ahora, temos en HTML5 máis tipos de campos e aprenderemos a manexalos (en castelán e en [https://developer.mozilla.org/en-US/docs/Learn/Forms inglés. Podes atopar código con exemplos de formularios e campos no repositorio de MDN. 

IMPORTANTE. Teremos en conta facer uso do atributo name para que os campos dos formularios recopilen e envíen a información correctamente.

Novos tipos de campo para <input> en HTML5

Os novos valores que pode tomar o atributo type para recopilar certo tipo de información son:

  • color: crea un campo cun selector de cor (dependendo do sistema operativo aparecerá unha paleta para escoller unha cor).
  • date: crea un campo data no que se poden colocar día, mes e ano.
  • datetime: permite ingresar información de hora, minuto e segundo. (xa obsoleto)
  • datetime-local: xenera un campo para data e hora, e podemos colocar nela o día, mes, ano e hora.
  • email: para información de correo electrónico.
  • month: xenera un campo para ingresar un mes do año.
  • number: para recopilar datos numéricos.
  • range: crea una barra coun botón desprazable para elixir un rango (por defecto de 0 a 100).
  • search: para xenerar unha caixa de busca.
  • tel: para recopilar información de número telefónico.
  • time: crea un campo para ingresar hora e minuto.
  • url: para información do enderezo URL.
  • week: crea un campo para elixir a semana do ano.

Exemplos de formularios con novas etiquetas HTML5

Campos de formulario HTML5 no exemplo1

Exemplo 1. Veremos o resultado de cada tipo de campo: color, date, datetime, datetime-local, email, month, number 

<form>
  COLOR:<input type="color"/><br><br>
  DATE:<input type="date"/> <br><br>
  DATETIME:<input type="datetime"/> <br><br>
  DATETIME-LOCAL:<input type="datetime-local"/> <br><br>
  EMAIL:<input type="email"/> <br><br>
  MONTH:<input type="month"/> <br><br>
  NUMBER:<input type="number"/>
</form>


Campos de formulario HTML5 no exemplo2

Exemplo 2. Usaremos os valores: search, tel, time, url, week e range. 

<form>
  SEARCH:<input type="search"/><br><br>
  TEL:<input type="tel"/> <br><br>
  TIME:<input type="time"/> <br><br>
  URL:<input type="url"/> <br><br>
  WEEK:<input type="week"/> <br><br>
  RANGE:<input type="range"/> <br><br>
</form>

Atributos HTML5 para formularios

Agregáronse tamén outros atributos para controlar o resultado final dos nosos formularios:

  • autocomplete: o navegador trata de autocompletar os campos que o usuario está completando baseandose na súa actividade no navegador.
  • required: establece que o campo debe ser completado obligatoriamente (en caso contrario non será posible enviar a información do formulario).
  • placeholder: usase para colocar un breve texto que indique ó usuario el tipo de información que debe coloca campo. Adoita usarse en elementos <input> e <textarea>
  • autofocus: enfoca automáticamente o campo desexado cando o formulario se carga.
  • size: establece o tamaño dos campos (un número de caracteres para campos de texto).
  • readonly: a información do campo non podnoa ser modificada, é solo de lectura.
  • disabled: fai que un campo ou control quede deshabilitado, de tal xeito que non se pode facer nada con el.

Exemplos de atributos HTML5

Exemplo 1. 

<form>
  Correo:<input type="email" placeholder="Escribe tu correo aquí."/> <br><br>
  Teléfono:<input type="tel" size="20" autofocus/> <br><br>
  Texto:<input type="text" value="No puedes editar esto." readonly/> <br><br>
  Número:<input type="number" disabled/> <br><br>
</form>

Máis exemplos

En moitas webs podes atopar máis exemplos (1 e 2)

Drag & drop

O atributo draggable permite que os elementos poidan ser arrastrados e soltados. Por exemplo para unha imaxe: 

<img draggable="true">

Podes ver exemplos en w3schools, tutorial republic e web.dev

Geolocation

A API de geolocalización de HTML é usada para coñecer a ubicación dun usuario.

Xa que pode comprometer a privacidade require que o usuario aprobe o seu uso.

O método getCurrentPosition() é usado para devolver a posición do usuario.

Exemplo

O exemplo devolve a latitude e lonxitude da posición do usuario: 

<!DOCTYPE html>
<html>
  <body>
	<p>Fai clic para obter as túas coordenadas.</p>
	<button onclick="getLocation()">Proba!</button>
	<p id="demo"></p>
	<script>
	  var x = document.getElementById("demo");

	  function getLocation() {
		if(navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(showPosition);
		} else {
			x.innerHTML = "O navegador non soporta geolocalización.";
		}
	  }

	  function showPosition(position) {
		x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Lonxitude: " + position.coords.longitude;
	  }
	</script>
  </body>
</html>

O exemplo explicado:

  1. Comproba se Geolocation está soportada
  2. Se e así executa o método getCurrentPosition(). En caso contrario indíca cunha mensaxe o usuario que non está soportada
  3. Se o método getCurrentPosition() ten éxito, devolve un obxecto de coordenadas a función especificada no parámetro showPosition
  4. a función showPosition() da como saída a Latitude e Lonxitude

Este exemplo e básico para comprender o funcionamento de Geolocation, pero non fai xestión de erros! Podes ver aquí exemplo con xestión de erros.

Máis información e exemplos en w3schools.

Exercicios

Referencias

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=HTML5_pasiño_a_pasiño&oldid=21364»