Cicklow
Admin
Dseda
Verificado
Verificación en dos pasos activada
¡Usuario popular!
Suscripción a IA
Básicamente la estructura de un sitio con AMP es lo mismo, solo cambia algunas cosas, y como son sitios para mobiles ultra rapidos no tienen un 100% de uso de los TAGS HTML.
Un ejemplo basico de un sitio con APM es:
HTML:
<!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 amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>Si quisiéramos usar imagenes por ejemplo, el HTML básico seria:
HTML:
<img src="imagen.jpg">
HTML:
<amp-img src="imagen.jpg">AMP cachea todo nuestro sitios, haciéndolo mucho mas rápido. Y también tenemos muchas otras mejoras.
Respecto al tema publicidad, AMP tiene soporte para muchas de las publicidades conocidas: A9, Adform, AdReactor, AdSense, AdTech, Dot and Media, Doubleclick, Flite, plista, Smart AdServer, Yieldmo, Revcontent...
Ejemplo:
HTML:
<amp-ad width=300 height=100
type="adsense"
data-ad-client="ca-pub-******"
data-ad-slot="*****">
</amp-ad>
HTML:
<amp-ad width=300 height=100
type="adsense"
data-ad-client="ca-pub-******"
data-ad-slot="*****">
<div fallback>No ADS</div>
</amp-ad>Tenemos soporte para redes sociales, GA, video, embed, carrusel, entre otras cosas mas...
Lo bueno de todo esto que el día 9 de marzo habrá un evento en español sobre AMP (HangOut)
https://plus.google.com/events/cs9s17ncb4st2dv50ilbbgv50ak?authkey=CLiSwfD2-L2ORw
Y también el día 16 de marzo
https://plus.google.com/events/cirnjp8qn08vshghsm6l522e8nc?authkey=CLO4xejXrrPQiwE
Mas información: https://www.ampproject.org/
Blog sobre AMP: https://amphtml.wordpress.com/
GitHub: https://github.com/ampproject/amphtml
AMP no sirve para sitios que tengan tantas cosas metidas (sobrecarga de HTML, JS, etc..) sino mas que nada son para sitios de noticias el cual solo mostraran el texto + imagen + publicidad (alternativo)... U en otros casos el cual se puede armar un sitio desde 0 para mobil usando AMP.
Yo estoy probando de implementar un sitio mobil con AMP, no sirve editar un sitio (diseño) que ya tenemos, sino crear uno desde cero implementando AMP, asi sacamos todo lo que no es soportado por AMP (o sobrecarga nuestro sitio)...
Hasta ahora el sitio va quedando bastante rápido:
El sitio tiene:
- Imágenes
- Publicidad AdSense
- Google Analytics
- CSS Externo (Fuente Roboto)
- Texto
Saludos! :encouragement:
