Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Torrent
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Algebra
    2. Android
    3. Adobe
    4. Bricolaje
    5. Bachillerato
    6. Cursos
    7. Criptomonedas
    1. Criptografia
    2. Diseño Web
    3. Encuestas
    4. Empleo
    5. Electricidad
    6. Electronica
    7. Forex
    1. Fisica
    2. Google
    3. Hardware
    4. Herramientas Ofimaticas
    5. Herramientas
    6. Internet
    7. Idiomas
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    ¿Qué es un rastreador de teléfono y cómo usarlo?

    ¿Qué es un rastreador de teléfono y cómo usarlo?

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    ¿Cómo saber quién te esta llamando?

    ¿Cómo saber quién te esta llamando?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    ¿Cómo sacar el mejor provecho de tu smartphone?

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    WhatsApp dejará de funcionar en estos smartphones a partir de 2023

    Smartphone vivo V25 Pro en busca del equilibrio

    Smartphone vivo V25 Pro en busca del equilibrio

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Consejos para mejorar el rendimiento de la PC en Windows - Archivo de intercambio

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Biostar lanzó las tarjetas de referencia Radeon RX 7900 XTX y RX 7900 XT

    Kerish Doctor 2022 - Licencia gratis

    Kerish Doctor 2022 - Licencia gratis

    GNU/linux

    GNU/linux

    TrueCrypt

    TrueCrypt

    Guía Completa De Icloud Drive

    Guía Completa De Icloud Drive

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Google Chrome comenzará a bloquear la carga de la página a través del protocolo HTTP inseguro

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    TrueCrypt

    TrueCrypt

    El ABC de la detección y prevención del phishing

    El ABC de la detección y prevención del phishing

    Protocolos de seguridad en redes inalambricas

    Protocolos de seguridad en redes inalambricas

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    Prototipo de pantalla de 27 pulgadas para realidad espacial

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

    Galax presenta HOF Extreme 50 SSD de hasta 10 GB/s y módulos de memoria HOF Pro DDR5-8000

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Actividades en pareja para salir de la rutina

    Actividades en pareja para salir de la rutina

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Nunca estás demasiado joven para pensar en un envejecimiento saludable

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Cómo remover las uñas de acrílico en casa

    Cómo remover las uñas de acrílico en casa

    Voluminizadores de Labios naturales para hacerlos tu misma

    Voluminizadores de Labios naturales para hacerlos tu misma

    Beneficios del Té de manzanilla

    Beneficios del Té de manzanilla

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    La grasa corporal y la salud del corazón: una reflexión de su estilo de vida

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    “Sugar Daddy”: ¡Todas las preguntas que quieres hacer!

    El progreso del Yoga antes y ahora

    El progreso del Yoga antes y ahora

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

    Tendencia en 2023 es el cabello largo

    Tendencia en 2023 es el cabello largo

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK Facebook

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Smartphone » Guía para principiantes de páginas móviles aceleradas (AMP)

Guía para principiantes de páginas móviles aceleradas (AMP)


Por omegayalfa - En: Smartphone, Internet, Noticias, Tutorial 0 18-03-18

2.5К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email

Páginas móviles aceleradas es la iniciativa de Google que pretende resolver el mayor problema de la velocidad de la web móvil. Las asombrosas experiencias de usuario que diseñamos con gran cuidado son extremadamente lentas para los dispositivos móviles.


La lentitud no es solo un problema de UX, sino que también reduce las tasas de conversión y perjudica la accesibilidad al excluir a los usuarios con conexiones a Internet más lentas. 


AMP es un esfuerzo de equipo que se lanzó con el objetivo de permitir a los editores  crear contenido optimizado para  dispositivos móviles una vez y  hacer que se cargue instantáneamente en todas partes.


Desde el lanzamiento, muchos editores como BBC, The Economist, Guardian News y Financial Times han implementado la iniciativa, por lo que ahora podemos suponer con seguridad que AMP es una innovación que vale la pena considerar para todos los que quieran seguir siendo competitivos en el dispositivo móvil. web.


AMP en acción


Antes de profundizar en los detalles, aquí está la demostración de AMP , para que pueda verla en acción .

Para ver a AMP en acción, debe hacer dos cosas:


  1. Vea la demostración, ya sea en un dispositivo móvil, o en un simulador móvil, por ejemplo, Chrome DevTools' móvil Simulador de dispositivos .
  2. Ejecuta consulta de búsqueda en la barra de búsqueda. Como Google AMP actualmente trabaja principalmente con el sitio de noticias, la mejor opción es una nueva historia.

En la captura de pantalla a continuación, puede ver lo que obtuve cuando utilicé el término de búsqueda rio olympics.

Demostración acelerada de páginas móviles en IPad Como puede ver, las páginas de AMP aparecen como  Google Rich Cards, un  carrusel de imágenes optimizado para dispositivos móviles, que Google lanzó en mayo de 2016.


Observe cómo Google diferencia las páginas AMP de otras páginas optimizadas para dispositivos móviles  utilizando 2 etiquetas diferentes:  AMP  y  Mobile-friendly. También vale la pena hacer clic en algunos de los resultados para ver cómo se ve una página web de AMP y qué tan rápido se ejecuta en el dispositivo móvil.


Experiencia técnica


AMP es un estándar web  basado en tecnologías web existentes y se centra en contenido estático . Tiene  3 partes diferentes:


  1. AMP HTML: HTML  modificado con  (1)  la restricción de ciertas características regulares de HTML / CSS y  (2)  la introducción de nuevas etiquetas personalizadas (Componentes)
  2. AMP JS:  aplica las mejores prácticas para aumentar el tiempo de carga de la página
  3. AMP CDN :  una memoria caché con un sistema de validación incorporado que optimiza aún más su sitio

AMP HTML


Las páginas móviles aceleradas son páginas HTML regulares que necesitan seguir un conjunto de reglas para hacer que las páginas carguen más rápido y rindan con un rendimiento confiable.


Echemos un vistazo a las cosas más importantes que debe saber al respecto.



Decide si quieres una página AMP separada


Para la misma página de contenido estático, puede tener 2 versiones separadas, una para AMP y otra para la versión que no es de AMP.


También puede elegir tener  una sola versión, la página de AMP, y usarla en todas partes:


- En general, admitimos las 2 versiones más recientes de los principales navegadores como Chrome, Firefox, Edge, Safari y Opera.

- Admitimos la versión de escritorio, teléfono, tableta y vista web de estos navegadores respectivos.


Si aún te preocupa el soporte del navegador, echa un vistazo a la publicación de Paul Irish de Google en Stackoverflow.


En caso de que desee tener dos páginas (AMP y no AMP), debe vincularlas a cada una de ellas para  informar a los motores de búsqueda sobre la existencia de las dos versiones.


Agregue el siguiente código a la <head> sección de la página que no es de AMP:

<link rel = "amphtml" href = "amp-version.html">

También agregue la siguiente línea a la <head> sección de la página que no es de AMP:

<link rel = "canonical" href = "non-amp-version.html">

Si solo tiene una página de AMP, aún necesita  vincularla de la siguiente manera:

<link rel = "canonical" href = "amp-version.html">

Starting Boilerplate


AMP Project ofrece diferentes plantillas iniciales que puede usar para comenzar. Echa un vistazo a la plantilla más simple de AMP HTML a continuación:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/es/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.webp"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Puede ver que el texto estándar vincula la página HTML normal con la  etiqueta <link rel="canonical">

La  etiqueta <script> agrega la  biblioteca AMP JS.


El  <style amp-boilerplate> y las  <noscript> etiquetas (en la misma línea que <style>) son  utilizados por el validador AMP así que no olvide incluirlos.


También puede encontrar estas dos etiquetas por separado en Github como AMP Boilerplate Code: los documentos advierten a los usuarios que  no cambien el código dentro de estas dos etiquetas ya que el Validador de AMP usa expresiones regulares (regex).


Puede encontrar una plantilla repetitiva de AMP HTML más avanzada en el sitio oficial de AMP, además de los elementos necesarios, también contiene el  marcado de schema.org en formato JSON-LD; para que su contenido aparezca en Google Rich Cards, es necesario agregar datos  enriquecidos.


Consulte la marca requerida cada documento HTML de AMP debe seguir en Github. AMP Project también tiene una gran guía paso a paso que lo ayuda a  crear su primera página de AMP. 

Etiquetas AMP HTML


Para aumentar la velocidad, la especificación AMP restringe cómo puede usar HTML. Las etiquetas HTML se pueden dividir en  3 grupos:


  1. Las etiquetas HTML que  se pueden usar sin modificaciones se pueden encontrar en la lista blanca del Anexo de etiquetas HTML de AMP.
  2. Etiquetas HTML prohibidas , como  <embed> y <object>, se pueden encontrar en esta lista más amplia .
  3. Las etiquetas HTML que tienen etiquetas equivalentes específicas de AMP, como  <amp-img> y <amp-video>, también se denominan  componentes de AMP  : permiten  implementar patrones comunes de  manera inteligente para los recursos. (Nos pondremos en contacto con ellos más tarde.)

Diseña tus páginas HTML AMP

En las páginas de AMP, no puede usar hojas de estilo externas, debe agregar sus estilos personalizados como una hoja de estilo en línea en la sección <head> de la siguiente manera:

<style amp-custom> h1 { 
    color: # 333; 
    } 
    // otros estilos personalizados 
</ style>

Solo puede tener una hoja de estilo incrustada, y también hay muchas reglas de estilo no permitido, por ejemplo, no puede usar el calificador !important, la regla @import y las pseudoclases.


No olvide verificar las restricciones de la hoja de estilo antes de comenzar a escribir CSS para sus páginas de AMP.


Hay otra cosa que es importante saber sobre las reglas de estilo de AMP: no puede usar el diseño que desee, ya que uno de los principios de AMP es permitir que el navegador calcule el espacio de cada elemento en la página con anticipación.


AMP JS


Los documentos AMP no pueden incluir jаvascripts escritos por autores ni por terceros, sin embargo, esto no significa que las páginas móviles aceleradas no usen jаvascript en absoluto. La biblioteca de jаvascript de AMP (el tiempo de ejecución de AMP) es responsable de cargar y procesar páginas AMP rápidamente mediante el cumplimiento de las mejores prácticas de rendimiento.


Componentes de AMP


Los componentes de AMP están  definidos por el tiempo de ejecución de AMP. Son las etiquetas HTML específicas de AMP antes mencionadas que debe usar en lugar de su contraparte habitual, como en <amp-img> lugar de la etiqueta <img>.


Cada componente AMP contiene un recurso externo particular (una imagen, un video, una inserción, etc.). Los recursos externos son propensos a ralentizar los sitios web. El objetivo principal de esta solución es administrar la carga de recursos externos de una manera razonable ejecutándose dentro de entornos aislados.


AMP le proporciona  2 tipos de componentes:


  1. Componentes incorporados:  siempre están disponibles en todos los documentos de AMP, están  integrados en el tiempo de ejecución de AMP . Actualmente hay cinco de ellos: <amp-ads> para anuncios <amp-img> para imágenes, <amp-pixel> para el seguimiento de píxeles (utilizado para contar visitas de página), <amp-video> para las incrustaciones directas de archivos de video HTML5, reemplaza la <video>, <amp-embed> para elementos incrustados (se puede usar en lugar de <amp-ad> en ciertos casos)
  2. Componentes ampliados:  componentes adicionales, debe incluirlos explícitamente en su documento de AMP. Hay muchos útiles, como <amp-accordion> y<amp-lightbox>, vea la lista completa. Muchos de ellos se pueden usar para  incorporar contenido de servicios de terceros , como Twitter o Instagram.

Tenga en cuenta que todos los recursos cargados externamente, como  <amp-img> y <amp-video> debe tener un conocido y atributo para permitir que el navegador calcule el diseño de antemano.<height> y <width>


AMP CDN


El AMP CDN es básicamente un caché, llamado Google AMP Cache. Busca documentos de AMP válidos, almacena en caché y los carga. AMP CDN también tiene un  sistema de validación incorporado.

Vale la pena  probar sus páginas AMP antes de permitir que se conecten para pasar el validador de forma segura. Puedes hacerlo de muchas maneras diferentes. 

IMAGEN: Proyecto AMP Es bueno saber que AMP CDN usa el protocolo HTTP/2 para lograr el mejor rendimiento posible.

Herramientas AMP


Existen algunas excelentes herramientas que pueden ayudarlo a implementar páginas móviles aceleradas, echemos un vistazo a algunas de ellas.


Google proporciona a los webmasters una práctica herramienta de informe de estado de AMP que muestra un recuento de páginas AMP correctamente indexadas y también errores relacionados con AMP.


La biblioteca de AMP PHP de Lullabot le  permite convertir sus páginas HTML a AMP HTML, y también informa el cumplimiento de cualquier documento HTML con los estándares de AMP.


También puede consultar el complemento de AMP de Automattic  que le permite habilitar las páginas móviles aceleradas en su sitio de WordPress. 

IMAGEN: WordPress.org

Consideraciones adicionales


Jonathan Abrams, el fundador de Nuzzel, afirma aún mejor, ya que afirma que incluso los sitios optimizados para dispositivos móviles como el New York Times se cargan significativamente más rápido, en  lugar de tardar tres segundos en cargar la página promedio, una página se carga en  menos de la mitad segundo,  cuando las páginas móviles aceleradas de Google están habilitadas .


También puede leer un artículo interesante en Verge sobre la competencia de Google AMP y los Artículos instantáneos de Facebook. Si todavía está buscando una respuesta para "¿cuál es el truco?", Consulte la publicación de Yoast que menciona los temores de que AMP básicamente nos está devolviendo a un momento de Internet anterior al año 2000, y cuestiona si realmente se trata de un estándar abierto.


Si no quiere reflexionar demasiado, solo quiere saltar a la codificación de una vez, el sitio Learn AMP by Example es un buen comienzo.

Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Diseños Creativos De Tabla De Pr...
Articulo siguiente Configuraciones ocultas de Firefo...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: Los cursillos o tutoriales son sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algun procedimiento o los pasos para realizar determinada actividad....
Un tutorial normalmente consiste en una serie de pasos que van aumentando el nivel de dificultad y entendimiento. Por este motivo, es mejor seguir los tutoriales en su secuencia logica para que el usuario entienda todos los componentes

Post Relacionados

Como desbloquear el telefono de su proveedor de servicios inalambricos

Como desbloquear el telefono de su proveedor de servicios inalambricos

Elaborada iCloud Phish utilizara para activar iPhones robados

Elaborada iCloud Phish utilizara para activar iPhones robados

Como agregar un número de teléfono de otro país

Como agregar un número de teléfono de otro país

Cómo superar la adicción digital

Cómo superar la adicción digital

Sony prepara los auriculares VR para Xperia 1 II y 1 III con soporte de video 8K 360 °

Sony prepara los auriculares VR para Xperia 1 II y 1 III con soporte de video 8K 360 °

El mercado de seguridad móvil prosperará debido al uso creciente de los diferentes puntos finales en las empresas

El mercado de seguridad móvil prosperará debido al uso creciente de los diferentes puntos finales en las empresas


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

12-Octubre
Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

Como instalar Windows 11 cuando tu hardware no cumple con los requisitos

10-Octubre
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

18-Mayo
Como activar Windows 10 con KMSAuto

Como activar Windows 10 con KMSAuto

14-Junio

Últimas publicaciones

Anunciate Aqui

Anunciate Aqui

Por Tutoriales En Linea 31-01-23135 562
México: Maneras más simples de pagar Netflix con tarjeta de debito o credito

México: Maneras más simples de pagar Netflix con tarjeta de debito o credito

Por Tutoriales En Linea 31-01-2379
Prototipo de pantalla de 27 pulgadas para realidad espacial

Prototipo de pantalla de 27 pulgadas para realidad espacial

Por Tutoriales En Linea 30-01-2381

Etiquetas

GuiaNoticiasTutoriales En LineaPáginas AMPmovilAMPPrincipianteArticulosPostPaginasDiseñoDiseñadores Web





Sobre nosotros

Tutoriales En Linea

Es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad. Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.