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

Metatags

metatag Robots, para que sirve

La metaetiqueta «robots» permite utilizar un enfoque granular y a nivel de página para controlar cómo se deben indexar y servir a los usuarios páginas concretas en los resultados de la Búsqueda de Google.

<meta name="robots" content="noindex" />

La metaetiqueta «robots» del ejemplo anterior indica a los buscadores que no muestren esa página en los resultados de búsqueda.

Como el atributo name tiene el valor robots, la directiva se aplica a todos los rastreadores.

Para aplicarla a un rastreador específico, sustituye el valor robots del atributo name por el nombre del rastreador en cuestión.

Los rastreadores específicos también se denominan user-agent (los rastreadores utilizan su user-agent para solicitar acceso a una página).

El nombre de user-agent del rastreador web estándar de Google es Googlebot.

<meta name="googlebot" content="noindex" />

Los buscadores pueden tener distintos rastreadores con propiedades y fines diferentes.

Directivas de la metaetiqueta «robots» y los elementos «data-nosnippet» y «X-Robots-Tag»

all

No hay restricciones de indexación ni de publicación. Esta directiva es el valor predeterminado y no tiene ningún efecto si se utiliza de forma explícita.

noindex

No se muestra la página en los resultados de búsqueda.

nofollow

No se siguen los enlaces de la página.

none

Equivalente a noindex, nofollow.

noarchive

No se muestra ningún enlace en caché en los resultados de búsqueda.

nosnippet

No se muestra ningún fragmento ni la vista previa de ningún vídeo en los resultados de búsqueda de la página. Es posible que se siga mostrando una miniatura de imagen estática (si está disponible) si permite obtener una mejor experiencia de usuario.

Esto se aplica a todas las formas de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes o Discover).

max-snippet:[number]

Se usan un máximo de [number] caracteres como fragmento de texto para este resultado de búsqueda (ten en cuenta que una URL puede aparecer como varios resultados de búsqueda en una página de resultados de búsqueda).

No afecta a las vistas previas de imágenes o vídeos y, además, se aplica a todas las formas de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Descubrir o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página o tiene un acuerdo de licencia con Google, esta configuración no interrumpe los usos permitidos más específicos. Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Valores especiales:

0: no se mostrará ningún fragmento. Equivalente a nosnippet.
-1: no hay límite de longitud de fragmentos.

Ejemplo: max-image-preview:[setting]

Se establece el tamaño máximo de una vista previa de imagen para la página en los resultados de búsqueda.

Valores setting aceptados:

  • none
    No se mostrará ninguna vista previa de la imagen.
  • standard
    Es posible que se muestre una vista previa de la imagen predeterminada.
  • large
    Es posible que se muestre una vista previa más grande de una imagen, hasta el ancho del viewport.

Se aplica a todo tipo de resultados de búsqueda (como la Búsqueda web de Google, Google Imágenes, Discover o el Asistente). Sin embargo, este límite no se aplica en los casos en los que un editor haya concedido permiso por separado para utilizar el contenido.

Por ejemplo, si el editor proporciona contenido en forma de datos estructurados en la página, como AMP y versiones canónicas de un artículo, o tiene un acuerdo de licencia con Google, esta configuración no interrumpirá los usos permitidos más específicos.

Los editores que no quieran que Google muestre imágenes en miniatura de mayor tamaño cuando sus páginas AMP y la versión canónica de un artículo aparezcan en la búsqueda o en Discover deben especificar un valor max-image-preview de standard o none.

Ejemplo: max-video-preview:[number]

Utiliza fragmentos de vídeo de [number] segundos como máximo para los vídeos de esta página en los resultados de búsqueda.

Otros valores admitidos:

0: como máximo, se puede utilizar una imagen estática, de acuerdo con la configuración de «max-image-preview».
-1: no hay límite.

Se aplica a todo tipo de resultados de búsqueda (en la Búsqueda web de Google, Google Imágenes, Google Vídeos, Discover o el Asistente).

Esta directiva se ignora si no se especifica ningún elemento [number] que se pueda analizar.

Ejemplo:

  • notranslate
    No se ofrece una traducción de esta página en los resultados de búsqueda.
  • noimageindex
    No se indexan las imágenes de esta página.
  • unavailable_after: [date/time]
    No se muestra esta página en los resultados de búsqueda después de la fecha y hora especificadas. La fecha y la hora deben especificarse en formatos ampliamente aceptados, como RFC 822, RFC 850 o ISO 8601. Esta directiva se ignora si no se especifica ningún valor [date/time] válido. De forma predeterminada, el contenido no tiene fecha de caducidad.

https://developers.google.com/search/reference/robots_meta_tag

Consulta la lista completa de los rastreadores de Google.

RastreadorToken de user-agent (token de producto)Cadena de user-agent completa
APIs-GoogleAPIs-GoogleAPIs-Google (+https://developers.google.com/webmasters/APIs-Google.html)
AdSenseMediapartners-GoogleMediapartners-Google
AdsBot Mobile Web Android Comprueba la calidad de los anuncios ubicados en las páginas web que se muestran en un dispositivo Android.AdsBot-Google-MobileMozilla/5.0 (Linux; Android 5.0; SM-G920A) AppleWebKit (KHTML, like Gecko) Chrome Mobile Safari (compatible; AdsBot-Google-Mobile; +http:/www.google.com/mobile/adsbot.html)
AdsBot Mobile Web Comprueba la calidad de los anuncios ubicados en las páginas web que se muestran en un iPhone.AdsBot-Google-MobileMozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 (compatible; AdsBot-Google-Mobile; +http:/www.google.com/mobile/adsbot.html)
AdsBot Comprueba la calidad de los anuncios ubicados en las páginas web que se muestran en un ordenador.AdsBot-GoogleAdsBot-Google (+http:/www.google.com/adsbot.html)
Googlebot ImageGooglebot-Image GooglebotGooglebot-Image/1.0
Googlebot NewsGooglebot-News GooglebotGooglebot-News
Googlebot VideoGooglebot-Video GooglebotGooglebot-Video/1.0
Googlebot (ordenadores)GooglebotMozilla/5.0 (compatible; Googlebot/2.1; +http:/www.google.com/bot.html) Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http:/www.google.com/bot.html) Chrome/W.X.Y.Z Safari/537.36

o (se utiliza con poca frecuencia):
  Googlebot/2.1 (+http:/www.google.com/bot.html)
Googlebot (smartphones)Googlebot  Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http:/www.google.com/bot.html)
Mobile AdSenseMediapartners-Google(En varios tipos de dispositivos móviles) (compatible; Mediapartners-Google/2.1; +http:/www.google.com/bot.html)
Mobile Apps Android Comprueba la calidad de los anuncios ubicados en las páginas web que se muestran en aplicaciones para Android. Sigue las reglas de robots de AdsBot-Google.AdsBot-Google-Mobile-AppsAdsBot-Google-Mobile-Apps
FeedfetcherFeedFetcher-Google No sigue las reglas del archivo robots.txt. Averigua por qué.FeedFetcher-Google; (+http:/www.google.com/feedfetcher.html)
Google Read AloudGoogle-Read-Aloud No sigue las reglas del archivo robots.txt. Averigua por qué.User-agent activo:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36 (compatible; Google-Read-Aloud; +https://support.google.com/webmasters/answer/1061943) User-agent antiguo (obsoleto):
google-speakr
Duplex on the WebDuplexWeb-Google Puede que ignore el comodín * en el campo de user-agent. Averigua por qué.Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012; DuplexWeb-Google/1.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Mobile Safari/537.36
Google Favicon Consigue iconos de página de distintos servicios.Google Favicon Ignora las reglas de robots.txt en las solicitudes iniciadas por usuarios.  Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko)  Chrome/49.0.2623.75 Safari/537.36 Google Favicon

Por ejemplo, para mostrar una página en los resultados de búsqueda web de Google, pero no en Google Noticias, utiliza la siguiente metaetiqueta:

<meta name="googlebot-news" content="noindex" />

Para especificar varios rastreadores de forma individual, puedes utilizar varias metaetiquetas «robots»:

<meta name="googlebot" content="noindex">
<meta name="googlebot-news" content="nosnippet">

metatag NOODP, para que sirve

Si tu sitio web está listado en el Open Directory Project (DMOZ), los buscadores puede elegir por utilizar el titulo y la descripción de DMOZ en sus resultados de sus búsquedas y no lo que consta en tu pagina web, unas veces ocurre también por que en tu pagina esta faltando el titulo y/o meta descripción.

Para evitar este comportamiento se debe hacer uso de la meta tag NOODP, si por el contrario si que queremos forzar a que los datos los extraiga de DMOZ debemos poner ODP.

Común para todos los buscadores

<meta name="" content="noodp"> Datos propios
<meta name="" content="odp">  Datos de DMOZ

Buscadores específicos

En el name poner el nombre del robot de búsqueda

Robot de Google

<meta name="googlebot" content="noodp"> No DMOZ
<meta name="googlebot" content="odp"> Si DMOZ

Robot de Yahoo

<meta name="slurp" content="noodp"> No DMOZ
<meta name="slurp" content="odp"> Si DMOZ

Robot de Bing

<meta name="msnbot" content="noodp"> No DMOZ
<meta name="msnbot" content="odp"> Si DMOZ

NOTA: El 17 de marzo de 2017 se dio de baja este servicio, con lo que esta meta no tiene ninguna utilidad a fecha de hoy.

Puedes navegar por lo que era dmoz.org, aqui.

Pantalla de la web dmoz.org después del cierre
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 sería correcto para la nueva versión de HTML5

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <NOFRAMES>
  • <strike>
  • <tt>
Categorías
HTML5

¿Que es apple-touch-icon.png?

Requisitos que tiene que cumplir apple-touch-icon.png

  • El formato en png
  • El ancho y alto del fichero es fijo, los tamaños ha ido aumentado conforme las pantallas han crecido.
  • El nombre del fichero debe llamarse apple-touch-icon.png el propio iphone redondeara las esquinas y le dará el efecto típico de los botones del iPhone, si no deseas que el icono se le apliquen los efectos el iPhone deberás guardarlo con el nombre apple-touch-icon-precomposed.png el teléfono al encontrar este fichero dejara el icono tal cual este.
    NOTA: Aunque esto no es del todo cierto, si no existe la meta el navegador buscara directamente en la raiz del website.

Una vez creado el fichero y subido a nuestra web deberemos añadir el siguiente meta en el header

<link rel="apple-touch-icon" href="https://tudominio.com/apple-touch-icon.png">

El nombre del archivo puede ser distinto y la ubicación en la web también, si lo especificamos en la ruta de la meta.

Metas apple-touch-icon con tamaños en html

<link rel="apple-touch-icon" href="[rutaarchivo]">
<link rel="apple-touch-icon-precomposed" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="57x57" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="60x60" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="72x72" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="76x76" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="114x114" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="120x120" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="128x128" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="144x144" href="[rutaarchivo]"> 
<link rel="apple-touch-icon" sizes="152x152" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="167x167" href="[rutaarchivo]">
<link rel="apple-touch-icon" sizes="180x180" href="[rutaarchivo]">

Ejemplo de apple-touch-icon utilizado en megazona

Generadores de apple-touch-icon online