Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

HTML5: Outras etiquetas novas

31 Out 2012 por Luis

Comentarios: 5

HTML5

Como continuación ós artigos de introdución a HTML5 e HTML5: novas etiquetas semánticas e estruturais, imos revisar o resto de novas etiquetas que nos trae esta revisión da linguaxe.

A maioría das novas etiquetas engaden valor semántico ó documento, pero algunhas engaden funcionalidades que ata agora só se podían obter usando Javascript ou Flash.

audio, video e source

As etiquetas audio e video serven para reproducir ficheiros de audio e vídeo respectivamente, algo que ata agora só podía facerse con plugins no navegador (Flash, Silverlight, ...).

Dentro destas etiquetas pódese introducir código HTML para que o mostren os navegadores que non as soportan:

<video src="video.mp4">
	<p>Descarga <a href="video.mp4">o vídeo</a></p>
</video>

A etiqueta source serve para poder pór formatos de arquivo alternativos e así cubrir as especificacións dos distintos navegadores (os formatos de audio e vídeo que soportan).

Para usar esta etiqueta, non debe porse o atributo src e debe ser o primeiro que apareza no seu interior.

<video>
	<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40">
	<source src="video.ogv" type="video/ogg; codecs=dirac, vorbis">
	<p>Descarga <a href="video.mp4">o vídeo</a></p>
</video>

O control de audio e vídeo realízase a través de atributos da propia etiqueta (controls, autoplay, ...) e da API de multimedia.

canvas

A etiqueta canvas úsase para crear unha zona da páxina na que se poden xerar imaxes de forma dinámica a través da API de debuxo en canvas.

datalist

A etiqueta datalist úsase para asociar a un input unha lista de opcións predefinidas (como unha lista de autocompletar).

Asignaríase desta forma:

<input list="meu-smartphone">
<datalist id="meu-smartphone">
	<option value="iPhone">
	<option value="iPad">
	<option value="Android">
</datalist>

details e summary

A etiqueta details utilízase para especificar detalles adicionais a un texto (o cal estará dentro da etiqueta summary) que o usuario poderá ver ou ocultar ó facer click no mesmo.

<details>
	<summary>Texto no que pulsar</summary>
	<p>Este texto móstrase/ocultase ó pulsar no texto anterior</p>
</details>

embed

A etiqueta embed úsase para integrar contido externo (normalmente non HTML) ó contido. Esta etiqueta non era estándar en HTML4, pero era soportada pola maioría dos navegadores.

figure e figcaption

A etiqueta figure permítenos marcar ilustracións, diagramas, fotos, exemplos de código, ... ós que se fai referencia directa no contido da páxina web. O anaco de contido así marcado debe ser independente, é dicir, debería poder moverse a outro sitio (por exemplo a un apéndice) e aínda así manter o seu significado.

A etiqueta figcaption úsase para pór un título a este anaco de contido.

A diferenza entre usar figure e usar aside estriba en que figure debe ser parte independente do contido da páxina, mentres que aside está relacionado con este, pero non é parte do mesmo.

Vexamos un exemplo no que usaremos figure e figcaption para marcar varias imaxes:

<figure>
	<img src="iphone3.jpg" alt="iPhone 3">
	<img src="iphone4.jpg" alt="iPhone 4">
	<img src="iphone5.jpg" alt="iPhone 5">
	<figcaption>Distintas versións do iPhone. De esquerda a dereita: iPhone 3, iPhone 4 e iPhone 5</figcaption>
</figure>

keygen

A etiqueta keygen úsase en formularios e xera unha clave privada, que garda no navegador de forma local, e unha clave pública que envía ó servidor. Este mecanismo está deseñado para utilizarse con sistemas de xestión de certificados baseados na web.

Internet Explorer non soporta esta etiqueta e Microsoft manifestou que non ten pensado engadila.

mark

A etiqueta mark úsase para marcar partes do contido de maneira que poida resaltarse e diferenciarse do resto. Esta etiqueta diferénciase de strong e em en que non engade importancia nin énfase ó seu contido, simplemente márcao para resaltalo. Na maioría dos casos estas palabras non estarían resaltadas orixinalmente no contido, senón que se resaltarían por unha acción do usuario (por exemplo, marcar nos resultados as palabras que coinciden ca procura).

menu e command

A etiqueta menu representa unha lista de comandos que se poden executar. O menú pode ser unha barra de tarefas, un menú contextual (o que sae por exemplo ó pulsar o botón dereito do rato) ou unha simple lista.

Para marcar estes comandos pode usarse a etiqueta command. Esta etiqueta úsase para marcar accións que o usuario pode realizar. A súa utilidade estriba en que podemos usala en múltiples partes da páxina web (enlaces, botóns, menús, ... a través do atributo command) e, desactivando o comando, desactivarase en todas as súas aparicións.

Para que command se poida activar debe estar dentro dunha etiqueta menu. Fóra desa etiqueta só será unha marca que poderá utilizarse como atallo de teclado.

Exemplo:

<menu type="toolbar">
	<command id="align-left" label="Esquerda" onclick="setAlign('left')">
	<command id="align-center" label="Centrado" onclick="setAlign('center')">
	<command id="align-right" label="Dereita" onclick="setAlign('right')">
</menu>
...
<input type="button" command="align-left" value=" Aliñar á esquerda">

meter

A etiqueta meter úsase para marcar medidas, sempre que estas sexan parte dunha escala con valores mínimos e máximos. Non se debe usar para marcar valores non acoutados (que non teñen mínimo e/ou máximo). Pode usarse para marcar cousas como: espazo en disco usado, porcentaxe de votos, ...

Os navegadores representan esta etiqueta como unha barra horizontal que se enche segundo o valor dado.

output

A etiqueta output úsase para marcar o resultado dun cálculo ou dunha acción do usuario.

O exemplo clásico é o dunha calculadora de sumas:

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
	<input name="a" type="number" step="any"> +
	<input name="b" type="number" step="any"> =
	<output name="o"></output>
</form>

progress

A etiqueta progress úsase para engadir unha barra de progreso dunha tarefa. Para facer que a barra cambie de forma dinámica ("progrese") deberemos usar Javascript.

ruby, rp e rt

A etiqueta ruby serve para marcar anotacións ruby en linguaxes ideogramáticos (como o chinés ou o xaponés) que serven como guía para a pronuncia.

O texto que vai ser obxecto de anotación vai dentro da etiqueta ruby, acompañado das anotacións marcadas ca etiqueta rt. Tamén se pode engadir a etiqueta rp para marcar os parénteses ó redor da anotación (para os navegadores que non soportan estas etiquetas; os que a soportan non mostran o contido de rp).

Exemplo:

<ruby>草泥馬<rp>(</rp><rt>Cǎo Ní Mǎ</rt><rp>)</rp></ruby>

time

A etiqueta time úsase para marcar datas e horas nun formato que entendan os computadores. Devandita data pode ser o contido da etiqueta ou pode ir no atributo datetime co cal o contido pode ser calquera cousa.

<time>2012-10-31</time>
<time datetime="2012-10-31">Mércores, 31 de Outubro do 2012</time>

wbr

A etiqueta wbr representa un lugar no que se pode facer salto de liña dentro dunha palabra. Serve para que o navegador poida "partir" palabras moi longas se é necesario.

Comentarios

5 comentarios. Comentar.

1. Anónimo o 28 Dec 2012 ás 06:23:45

muy buena

2. Anónimo o 03 Set 2013 ás 19:11:02

exelente.

3. Luis Gamez o 16 Nov 2013 ás 13:31:02

Muy bueno, pero veo un "inconveniente" al poner un video en html5 y es que dándole al bontón derecho te deja la opción de descargar dicho video. ¿Se podría Luis evitar esto?.

Gracias y muy buena contribución.

4. Luis o 18 Nov 2013 ás 11:09:20

Hola Luis Gamez.

Gracias por participar en el blog.

Utilizar otras técnicas (Flash, ...) hace más difícil descargar el vídeo, pero no imposible. Estoy seguro de que sabrías descargarte cualquier video de Youtube.

De todas formas, si estás interesado en cómo complicarle al usuario la descarga del video, puedes ver alternativas en este enlace (en inglés en Stack Overflow): http://stackoverflow.com/a/9756909

Un saludo.

5. daniel o 03 Ago 2015 ás 23:25:54

no funciona la etiqueta TIME

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?