Diarios de la nube Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Qué es AMPHTML



Al navegar por Internet con nuestro móvil, muchas veces nos encontramos con pequeños bloqueos, interrupciones en el dibujado de la página porque se están cargando anuncios, o imágenes... en diversas ocasiones percibimos la navegación como algo poco fluido o inmediato.
La iniciativa de código abierto AMP (Accelerated Mobile Pages) viene a crear un nuevo "ecosistema" de programación que permitirá ofrecer una navegación por Internet o por cualquier aplicación móvil prácticamente instantánea.
Se trata de algo revolucionario porque en mucho tiempo a lo largo de la corta vida de Internet pocas veces editores y publicadores de contenidos se habían puesto de acuerdo con las compañías de tecnología en algo. Es la creación de un nuevo estándar de programación que va a cambiar drásticamente la experiencia de uso de Internet, permitiendo el "dibujado" instantáneo de páginas web y aplicaciones en dispositivos móviles.
AMP consigue en estos momentos ejecutar páginas web bajo su estándar, incluso con conexiones móviles 3G entre un 15% y un 85% en simulaciones realizadas de un Nexus 5 con Speed Index.
Ahora mismo es un proyecto en pleno desarrollo y evolución, la comunidad de software libre está trabajando "a destajo" para implantarlo como un nuevo estándar de programación y las compañías tecnológicas lo esperan como agua de Mayo para mejorar la experiencia y el rendimiento de navegación de sus usuarios.
Ha nacido un nuevo estándar de programación, una nueva forma de construir aplicaciones páginas web y aplicaciones para moviles, ¿quieres conocer un poco más cómo funciona?.

¿Qué es AMP Project ?


AMP Project (Accelerated Mobile Pages) es una iniciativa de software libre basada en diversos acuerdos entre editores de contenidos y compañías tecnológicas para mejorar el ecosistema de contenidos móviles para todo el mundo.
Se encuentra respaldado por toda la comunidad de software libre mundial y además por las principales marcas tecnológicas de contenidos en Internet del mundo:
Compañías Tecnológicas que utilizando AMP HTML:No sólo Google está dando soporte a esta nueva tecnología, compañías como Twitter, Linkedin, Pinterest y muchas más, van acompañando a su lanzamiento:


Editores de contenidos que utilizando AMP HTML:Los editores están muy interesados en una manera de programar la exposición de sus contenidos que proporcione una experiencia fluida y de calidad para sus usuarios. Encontrarás diarios digitales como El País, The Guardian, Financial Times... y van en aumento.


Esta lista va aumentando, si quieres saber todos los que están apoyando visita Ampproject.org¿Cómo se hace un HTML en AMP?
Como muchos proyectos de software libre, tienes toda la documentación necesaria y ejemplos prácticos en Github, en la sección dedicada a AMPHTML.
En Github colaboran millones de programadores de todo el mundo desarrollando software libre. Han dedicado un apartado específico (repositorio) para AMPHTML y responden todas las dudas o incidencias que puedas encontrar mientas estás programando, verás que es una comunidad altamente eficiente que da soporte a todo el que lo necesita.Cómo crear un AMPHTML

La construcción de un HTML código AMP está en construcción, no obstante ya puedes empezar a desarrollar tus propios ejemplos e incluso utilizarlo en tus propios proyectos.
El primer ejemplo lo tienes aquí, avanza por la página hasta que localices el título "How does AMP HTML work?":


1) Crea un HTML estándar y añádele las etiquetas que te voy a marcar en pantalla, de esa manera comenzarás a utilizar AMP de inmediato con el ejemplo que proponen en Github:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
Si te fijas, no hay prácticamente nada nuevo en lo que hemos hecho pero te he marcado en rojo aquello que especifica el uso de AMP en un HTML y que es necesario para que funcione correctamente su implementación:
<html ⚡> La utilización del símbolo ⚡ indica que es un AMPHTML. Puedes poner igualmente amp directamente.
<meta charset="utf-8"> dentro del <head> en AMPHTML es necesario expresar que trabajarás con UTF 8 para tu juego de caracteres.
<link rel="canonical" href="hello-world.html" > dentro del <head> en AMPHTML es necesario expresar la URL canónica de la página.
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> Como AMPHTML es Resposive y funcionará en móviles especialmente, dentro del <head> es necesario marcar el viewport de esta manera.
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> Al indicar este código, activas la función de uso de GPU en el móvil, mejora el rendimiento en esta clase de dispositivos.
<script async src="https://cdn.ampproject.org/v0.js"></script> Es fundamental incluir el cdn.ampproject.org/v0.js que lleva el javascript por medio del cual se está construyendo AMP. Este .js es particularmente necesario dado que lleva todo el código necesario para que AMP funcione y además incorpora el validador que te permite saber si estás implementándolo correcta o incorrectamente.2) Puedes probar AMPHTML con el validador activado. Es decir, si quieres ver si la implementación que estas haciendo es correcta y no tiene errores, activa la función del validador para el javascript que incorpora AMPHTML y podrás ver en la consola del navegador los resultados. Puedes activar la función del validador si pones development en el momento en que declares en tu código el js de AMPHMTL tal como te muestro a continuación:
<script async src="https://cdn.ampproject.org/v0.js" development></script>
Al activar el modo desarrollador podrás ver en pantalla por la consola del navegador la información como te muestro en el pantallazo a continuación:


Al presionar F12 en cualquier navegador que utilices, verás que en la consola te comienza a avisar del uso de AMPHTML.
Cómo añadir una imagen AMP

1) Una vez tienes tu AMPHTML escrito, añadirle una imagen es bastante sencillo, simplemente tienes que añadir la etiqueta AMP-IMG con las especificaciones que aquí te explican Github: AMP-IMG.
Observa el código con el añadido de la imagen:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!
<amp-img alt="Diarios de la nube AMPHTML" src="http://1.bp.blogspot.com/-Df4TGR8Fa5s/VUftNcmaEzI/AAAAAAAAQJU/De2X74Pru2E/s600/Logo_pruebas5.png" width=180 height=42 layout=responsive></amp-img>
</body>
</html>
Se utiliza igual que la etiqueta IMG de HTML pero añadiendo siempre ancho y alto (width y height), así como layout=responsive para hacer la imagen responsive directamente y que encaje perfectamente en el móvil.Cómo añadir anuncios en AMPHTML

Tienes muy buenos ejemplos ya montados para las principales compañías de anuncios en este ejemplo: AMPHTML ADs.
Verás que incorporarlo a tu página es muy sencillo, la etiqueta es amp-ad.
Cómo añadir controles de Twitter, Instagram, etc...

Puedes añadir componentes ya hechos en AMP de Twitter, Instagram, etc... Puedes ver ejemplos con Twitter aquí: AMPHTML Twitter o con Instagram aquí: AMPHTML Instagram.
Son muy parecidos a los controles que utilizas ya de estas compañías pero añadiendo los javascripts propios de AMP.
Un ejemplo de AMPHTML funcionando

Además de los ejemplos que encontrarás en AMPHTML Samples, puedes ver un ejemplo en Diarios de la nube haciendo "clic" en: AMPHTML Diarios de la nube.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: propuestas

Recomendamos

Relacionado

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

general

Creacion de un Game con HTML5 Javascript Utilizando el framework Phaser

En este tutorial iniciaremos un nuevo juego utilizando el Framework "Phaser", usando HTML y CSS3. Phaser es un framewprk/engine muy completo y facil de usar. Hola amigos, como ven en el video, el juego es muy simple de jugar, apenas tenes que comer las frutas para mantenerte en vuelo y cuidar para que las estrellas negras no te toquen o mueres. Si tienen un smartphone Android puden desc ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

Tutoriales Redes Sociales Web

Como Personalizar botones de compartir.

Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia. Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compar ...

rendimiento

Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...

general propuestas

El servicio de Google para realizar el aviso de uso de cookies en tu web: Cookiechoices.

Al navegar por múltiples sitios en Internet todos nos hemos encontrado con algún tipo de aviso o alerta que alude al "uso de cookies" en el sitio por el cual estamos navegando. Este mensaje es fruto de la legislación europea publicada en su directiva 2009/136/CE referente a los derechos de los usuarios y la necesidad de que estos sean informados cuando un sitio web haga uso de las mismas ...

general social

Cómo insertar una publicación de Google+ en tu web

Una publicación e Google+ no es simplemente un mensaje que se comparte en una red social para que lo lean nuestros seguidores. Muchos creadores de contenidos web han descubierto la ventaja en materia de posicionamiento que supone utilizar esta red social. Al encontrarse plenamente integrada con el buscador, ambos forman una sinergia de la que ninguna otra red social del mundo dispone. Los "po ...

Blogger html Trucos

Deshabilitar el botón derecho del ratón

¿Habéis pensado alguna vez en inhabilitar el botón derecho del ratón? Pues hoy os voy a explicar cómo se hace. Es un buen método, para no permitir que te copien, ni coger tus imágenes para guardarlas. Su instalación es tan sencilla que requiere sólo un paso. Veréis: Plantilla-Edición de HTML Dentro del recuadro pulsáis Control + F y dentro de la casilla ponéis </body> Justo antes, pegáis l ...

general propuestas

Save to Drive un botón en tu web para guardar archivos en Google Drive

Google Drive es el servicio de almacenamiento en la nube desarrollado por Google. Hemos visto diversas utilidades que aprovechar con Google Drive para potenciar a Blogger: para alojar y servir una web completa, para alojar hojas de estilo o recursos para nuestra web que no podemos almacenar en Blogger, para crear enlaces de descarga de archivos con los que complementar nuestras entradas (instrucc ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...