Categorías
HTML5

¿Como eliminar el botón de descarga de la etiqueta vídeo?

Dependiendo de la versión de chrome, tendremos 2 formas.

A partir de la versión de chrome 67.0.3396.62

Añadimos este atributo a la etiqueta HTML5 Video

controlslist="nodownload"

Navegador Chrome sin el atributo controllist=»nodownload»

Navegador chrome con el atributo controllist=»nodownload»

El icono para descargar va depender de la versión de chrome instalada

Para versiones anteriores

Deberemos implementar unas clases CSS para ocultar el botón de descargar

video::-internal-media-controls-download-button {display:none}
video::-webkit-media-controls-enclosure {overflow:hidden}
video::-webkit-media-controls-panel {width: calc(100% + 18px); /* Ajustar los pixeles segun se necesite */}
Categorías
HTML5

Paginación de resultados con rel=»next» y rel=»prev»

De forma similar a como rel=”canonical” indica claramente el contenido duplicado, ahora puedes utilizar los elementos de vinculación HTML rel=»next» y rel=»prev» [inglés] para indicar la relación entre las direcciones URL de los componentes de una serie paginada.

En un sitio web, una serie paginada de contenido puede tener muchas formas, desde un artículo dividido en varias páginas de componentes, hasta una categoría de productos con elementos repartidos a lo largo de varias páginas o un hilo de un foro dividido en una secuencia de direcciones URL.

Ahora, si incluyes los elementos de marcado rel=»next» y rel=»prev» en las páginas de los componentes de una serie, estarás indicando a Google claramente que quieres que:

  • Consolidemos las propiedades de indexación, como los enlaces, desde las direcciones URL o las páginas de los componentes hasta la serie como conjunto (es decir, que los enlaces no deben estar dispersos entre página-1.html, página-2.html, etc., sino que deben estar agrupados con la secuencia).
  • Enviemos a los usuarios a la página o a la URL más relevante, normalmente la primera página de la serie.

Ahora es posible indicar a Google la relación entre las URL de los componentes de una serie mediante rel=»next» y rel=»prev».

Existe una excepción en la implementación de rel=»prev» y rel=»next»: si a lo largo de la serie de contenido también ofreces a los usuarios una página que muestre todo el contenido o si estás considerando incluir una, consulta esta entrada del blog para obtener más información.

Los usuarios suelen preferir las páginas en las que puedan ver todo el contenido, por lo que tratamos de incluir estas páginas en los resultados de las búsquedas en lugar de las páginas de componentes (las páginas de componentes tienen más opciones de aparecer en los resultados si incluyen rel=»next» y rel=»prev»).

Si no dispones de una página que incluya todo el contenido o quieres evitar que Google la muestre, puedes utilizar rel=»next» y rel=»prev» como se describe en esta entrada.

Para obtener información sobre configuraciones paginadas que incluyan una página que muestre todo el contenido, consulta esta entrada del blog.

Opciones disponibles

Si tienes una serie, dispones de tres opciones:

  1. Deja lo que tienes exactamente como está. Existe contenido paginado por toda La Web y seguiremos intentando ofrecer a los usuarios el mejor resultado, independientemente de si se han incluido o no los elementos de marcado HTML rel=»next» y rel=»prev».
  2. Si dispones de una página donde se muestra todo el contenido, o si estás considerando incluir una, consulta esta entrada del blog.
  3. Indica a Google la relación entre las URL de los componentes de tu serie con rel=»next» y rel=»prev». Esto nos ayudará a indexar tu contenido de una forma más precisa y a mostrar a los usuarios la página más relevante (normalmente la primera). A continuación te indicamos de forma detallada cómo implementar estos elementos.

Implementación de rel=»next» y rel=»prev»

Si optas por la opción 3 para tu sitio, a continuación te explicamos cómo hacerlo. Supongamos que tienes contenido paginado en estas direcciones URL:

http://www.example.com/article?story=abc&page=1
http://www.example.com/article?story=abc&page=2
http://www.example.com/article?story=abc&page=3
http://www.example.com/article?story=abc&page=4

En la primera página, http://www.example.com/article?story=abc&page=1, se incluye la sección <head>:

<link rel="next" href="http://www.example.com/article?story=abc&page=2" />

En la segunda página, http://www.example.com/article?story=abc&page=2:

<link rel="prev" href="http://www.example.com/article?story=abc&page=1" />
<link rel="next" href="http://www.example.com/article?story=abc&page=3" />

En la tercera página, http://www.example.com/article?story=abc&page=3:

<link rel="prev" href="http://www.example.com/article?story=abc&page=2" />
<link rel="next" href="http://www.example.com/article?story=abc&page=4" />

Y en la última página, http://www.example.com/article?story=abc&page=4:

<link rel="prev" href="http://www.example.com/article?story=abc&page=3" />

Varios puntos, que hay que tener en cuenta

  • La primera página solo contiene el elemento de marcado rel=»next», no rel=»prev».
  • Las páginas comprendidas entre la segunda y la penúltima deben disponer de vinculación doble con rel=»next» y rel=»prev».
  • La última página solo contiene el elemento de marcado rel=»prev», no rel=»next».
  • Los valores de rel=»next» y rel=»prev» pueden ser URL relativas o absolutas (según permita la etiqueta <link>). Y si se incluye un enlace <base> en el documento, las rutas relativas se resolverán según la URL base.
  • Solo es necesario declarar rel=»next» y rel=»prev» en la sección <head>, no en el documento <body>. Se permite el uso de rel=»previous» como variante sintáctica de los enlaces rel=»prev».
  • rel=»next» y rel=»previous» por un lado y rel=»canonical» por otro constituyen conceptos independientes.
  • Se pueden incluir ambas declaraciones en la misma página.
  • rel=”prev” y rel=”next” actúan como sugerencias para Google, no como directivas absolutas.
  • Si se implementan de forma incorrecta, por ejemplo, si se omite una designación rel=»prev» o rel=»next» en la serie, seguiremos indexando las páginas y nos basaremos en nuestra heurística para comprender el contenido.
Categorías
HTML5

Rutas de exploración

Una ruta de exploración segun la especificación HTML5 está formada por varios enlaces que reflejan la estructura jerárquica de un sitio web y permiten que el usuario la explore.

Permitiendo marcar el orden y nombre de los elementos en los resultados de búsquedas de los principales buscadores entre ellos Google, Microsoft y Yahoo! ya lo comprender y lo muestran en sus resultados.

Ejemplo:

<div class="navega">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://megazona.com" title="megazona.com" itemprop="url" rel="index">
<span itemprop="title">megazona</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/ title="Html5" itemprop=url>
<span itemprop=title>html5</span></a>
</span>
»
<span itemscope itemtype=http://data-vocabulary.org/Breadcrumb>
<a href=http://megazona.com/html5/microdatos/ title="Microdatos" itemprop=url>
<span itemprop=title>microdatos</span></a>
</span>
</div>
Categorías
HTML5

Nuevas etiquetas de HTML5

Nuevos elementos semánticos / Estructural

EtiquetaDescripción
<article>Define un artículo
<aside>Define el contenido aparte del contenido de la página
<bdi>Aísla una parte del texto que pueda ser formateada en una dirección distinta de otro texto fuera de ella
<command>Define un botón de comando que un usuario puede invocar
<details>Define los detalles adicionales que el usuario pueda ver u ocultar
<summary>Define un título visible para un elemento <details>
<figure>Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listas de códigos, etc
<figcaption>Define un título para un elemento <figure>
<footer>Define un pie de página de un documento o sección
<header>Define un encabezado de un documento o sección
<hgroup>Agrupa un conjunto de etiquetas desde los <h1> hasta los <h6> cuando un título tiene varios niveles
<mark>Define el texto marcado / resaltado
<meter>Define una medida escalar dentro de una gama.
<nav>Define vínculos de exploración
<progress>Representa el progreso de una tarea
<ruby>Define una anotación de rubí (para el Este de la tipografía de Asia)
<rt>Define una explicación / pronunciación de los caracteres (para el Este de la tipografía de Asia)
<rp>Define lo que se muestra en los navegadores que no son compatibles con anotaciones de rubí
<section>Define una sección de un documento
<time>Define una fecha / hora
<wbr>Define una posible ruptura del verso

Nuevos para medios de comunicación / Media

EtiquetaDescripción
<audio>Define el contenido de sonido
<video>Define un vídeo o una película
<source>Define los recursos de medios múltiples para <video> y <audio>
<embed>Define un contenedor para una aplicación externa o de contenido interactivo (un plug-in)
<track>Define las pistas de texto para <video> y <audio>

El nuevo elemento <canvas>

EtiquetaDescripción
<canvas>Se utiliza para dibujar gráficos sobre la marcha a través de secuencias de comandos (normalmente JavaScript)

Nuevos elementos de formulario

EtiquetaDescripción
<datalist>Especifica una lista de opciones predefinidas para los controles de entrada
<keygen>Define un campo generador de par de claves (para las formas)
<output>Define el resultado de un cálculo

Elementos eliminados de la version anterior de HTML

Los siguientes elementos o etiquetas DE LA VERSION HTML4 fueron eliminados y su uso no sera correcto para la nueva version de HTML5

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <NOFRAMES>
  • <strike>
  • <tt>