Local blog for Spanish speaking developers in LATAM
AMP como marco de trabajo web
martes, 18 de junio de 2019
Actualización (2/5/2019)
: Se agregó un párrafo a fin de aclarar la compatibilidad con otros marcos de trabajo (para no sugerir un juego de suma cero) y se quitó texto sobre cómo se malinterpretó AMP, dado que no era necesario para transmitir la idea que queríamos dar.
¿Has leído últimamente alguna entrada de blog en la que se comparen los marcos de trabajo más populares? ¿Has participado en alguna encuesta sobre herramientas de frontend? Apostaría lo que sea a que AMP no estaba en la lista. Y eso me parece extraño, considerando los millones y millones de dominios que ejecutan este formato. ¿Cómo es posible?
Aquí encontrarás el contenido de esta entrada de blog en una superproducción de video. Deberías ver esto. Confía en mí. Valdrá la pena.
Cómo llegamos hasta aquí: marcos de trabajo de HTML contra JS, percepción como formato de distribución y AMP sincronizado
La primera razón por la que no se percibe a AMP como un marco de trabajo es porque AMP no es un marco de trabajo de
JavaScript
. Está
escrito
en JS, pero el lenguaje de autor que tú ves es HTML, por lo que técnicamente es un marco de trabajo HTML. La idea de los marcos de trabajo HTML no es nueva, pero siguen siendo bastante raros, por lo que a menudo no se consideran una alternativa seria.
La segunda razón es que muchos comparan a AMP con RSS, y los medios de comunicación lo posicionaron como competidor de otros formatos de contenido multimedia de jardín vallado desarrollados por otras grandes empresas. Esa narrativa no fue de ayuda y, por si sirve de algo, a nosotros, el equipo de AMP, nunca nos gustó esa comparación (aunque también contribuimos confundiendo a los lectores con palabras complicadas como
entorno de ejecución
y
formato HTML de AMP
). Las páginas web ya son un gran formato de distribución, y AMP lo mejora acelerando la entrega mediante cachés y agrupando el contenido principal, por ejemplo, mediante la integración de CSS.
La tercera razón es que la mayoría de los sitios AMP actuales utilizan
AMP sincronizado
, una técnica que habilitamos para
conectar una página web existente que no es de AMP con un equivalente que sí lo es
. AMP sincronizado puede ser útil porque la inversión inicial es mucho menor: si termino de empacar y luego me doy cuenta de que quiero llevar más cosas, puedo hacer otra maleta y viajar con dos, pero eso será una molestia. Lo mismo ocurre con AMP sincronizado. Es muy difícil mantener ambas versiones con el paso del tiempo, y AMP sincronizado no fue concebido para tener un estado final. (Por eso, ahora lo llamamos
Modo transicional
en
AMP para WordPress
).
De Accelerated Mobile Pages a AMP
Incluso nuestro nombre ha causado confusión. Desde hace tiempo, he tenido algunos problemas para explicar correctamente qué
es
AMP, especialmente a aquellos que están familiarizados con su nombre completo: Accelerated Mobile Pages. La realidad es que, desde hace mucho tiempo, AMP es más que lo que indica su nombre:
AMP no brinda solamente
aceleración
, ya que incluye beneficios de UX integrados, como inhabilitar anuncios intersticiales, forzar un subproceso principal independiente para interacciones fluidas, etc.
AMP no es solamente para
dispositivos móviles
, ya que funciona en varios tipos de dispositivos, como computadoras de escritorio y tablets, e incluye
funciones prácticas de diseño responsivo
.
Y AMP ya no es para
páginas
solamente: ahora puedes usarlo en
anuncios
,
correos electrónicos
y
artículos
.
Entonces, ¿cuál es la solución? Es fácil. Como
anunció Malte, líder tecnológico de AMP
, en AMP Conf,
AMP ahora solo es AMP, y ya no significa Accelerated Mobile Pages
(si quieres usar una versión expandida, ¿qué te parece
Awesome Magical Power?
).
De la página al sitio: cómo implementar AMP y utilizarlo como servicio
Los desarrolladores de AMP queremos que se convierta en una opción natural para el desarrollo web moderno de sitios de contenido y que tú puedas elegir AMP como marco de trabajo porque realmente te hace más productivo. Esa es nuestra misión principal de este año, y hemos puesto en marcha un nuevo sitio en
amp.dev
(junto con nuevos contenidos y
cursos para principiantes
) a fin de ayudarte a hacerlo. Entonces, ¿qué obtienes cuando adoptas AMP como marco de desarrollo (además de lo obvio, como velocidad, UX y componentes fáciles de usar)?
Para empezar, te enfocarás más en el diseño, el estilo y el contenido, y menos en el código estándar. El desarrollo web se ha vuelto demasiado difícil, y es más importante que nunca elegir el nivel adecuado de abstracción, con la cantidad justa de flexibilidad para tu caso de uso. Nos encargaremos de mantener JS para todos los componentes y enviaremos actualizaciones compatibles cada dos semanas. A esta forma de reducir la carga de mantenimiento la llamamos "
AMP como servicio
" (mira la
gran charla de Naina
sobre este tema).
Ahora solo mantendrás una versión de cada página haciendo que tu contenido de AMP sea
canónico
, lo que también se conoce como "
AMP primero
", y eso significa que tus páginas se beneficiarán del rendimiento de AMP y de las optimizaciones de UX en computadoras de escritorio, dispositivos móviles y mucho más.
Bento: cómo mezclar y hacer coincidir componentes de AMP en páginas que no son de AMP y brindar interoperabilidad con otros marcos de trabajo
Mira el anuncio de Bento en
What's next in AMP
de AMP Conf '19.
"AMP primero"
no significa que estrictamente todas las páginas de tu sitio deben estar en formato AMP. En ocasiones, es posible que quieras la máxima flexibilidad y que la distribución no sea una gran preocupación, por ejemplo, en un área exclusiva para miembros o un carrito de compras complejo. En ese caso, podrías utilizar JavaScript u otro marco de trabajo para potenciar esa parte de la experiencia.
Para poder reutilizar las plantillas existentes que compilaste con componentes de AMP, estamos trabajando en lo que llamamos
Bento AMP
, la capacidad de utilizar componentes de AMP de forma "no gestionada", sin cargar el archivo JS principal de AMP (v0.js) y coexistiendo con otros componentes y marcos de trabajo web en la misma página.
Esto, junto con marcos de trabajo como Next.js que agregan compatibilidad para AMP y
amp-script
en el lado del servidor, la capacidad de ejecutar JavaScript personalizado en un trabajador web, significa que AMP y otros marcos de trabajo pueden coexistir pacíficamente y pueden fortalecerse mutuamente, lo cual nos entusiasma mucho.
Desarrollo acelerado con compatibilidad para JS y ejecución de componentes de AMP fuera de ese formato
Por supuesto, es posible que no tenga sentido para ti dejar todo y volver a implementar tu sitio en formato AMP justo ahora, ¡y eso está bien! Solo quiero que sepas que hemos crecido bastante y que, cuando te propongas rediseñar o crear algo nuevo, AMP estará aquí para ayudarte a tener éxito.
Con las capacidades de vinculación de estado dinámico de
amp-bind
, la obtención de datos dinámicos de
amp-list
y la capacidad de utilizar JavaScript personalizado mediante
amp-script
, las posibilidades para los sitios de contenido ahora son infinitas. Por último, con el nuevo
régimen de proyectos abiertos
, el futuro de AMP está disponible para que le dé forma todo aquel que quiera que la Web siga floreciendo.
Publicado por Paul Bakaus, desarrollador de AMP
El complemento oficial de AMP para WordPress
martes, 8 de enero de 2019
Publicado por Alberto Medina, desarrollador de AMP y WordPress (Google)
Habilitar una experiencia de AMP de primera clase en WordPress es una de las formas en que esta tecnología pretende brindar una experiencia del usuario primordial a los sitios y al contenido de la Web. Se ha trabajado mucho durante el último año para mejorar la calidad del complemento oficial de AMP y
hoy lanzamos la versión estable 1.0 del
complemento oficial de AMP para WordPress
.
La versión 1.0 del complemento integra la creación de contenido de AMP a la perfección con flujos de trabajo estándar de WordPress, tanto en la edición clásica como en la basada en Gutenberg. En particular, en esta versión se admite una experiencia de AMP nativa, lo que permite que los sitios de WordPress se construyan completamente con AMP, sin una versión duplicada de una página en "modo sincronizado".
Las funciones y capacidades de la versión 1.0 incluyen las siguientes:
Depuradores de contenido
: Ayuda a sustituir las etiquetas HTML por sus componentes de AMP correspondientes, implementa optimizaciones y envía información de validación a la herramienta de compatibilidad del complemento (ver más abajo).
Herramienta de compatibilidad
: Ayuda al desarrollo de las experiencias de AMP al permitir la depuración basada en la exposición de información extensa y detallada sobre los errores de validación que pueden existir, el lenguaje de marcado o las secuencia de comandos que los causan, y los componentes específicos del sitio (por ejemplo, tema, complemento o núcleo), asumiendo la responsabilidad del contenido de esa página.
Eliminación de código CSS obsoleto
: Ayuda a ordenar el código CSS propio en los casos en que las reglas existentes de este lenguaje excedan el límite máximo permitido en páginas AMP individuales.
Compatibilidad con el tema central
: Habilita la validez completa de AMP para cuatro temas predeterminados (es decir, 2015, 2016, 2017 y
2019
).
Integración de Gutenberg
: Permite la creación de contenido AMP totalmente integrado con Gutenberg, la nueva y poderosa experiencia de edición en WordPress.
Soporte de experiencias nativas de AMP
: Permite experiencias de AMP de sitio completo sin sacrificar por un bit la flexibilidad de la plataforma o la fidelidad del contenido.
Una gran cantidad de mejoras en el código, el rendimiento y la experiencia del desarrollador:
Desde la flexibilidad de personalización hasta los mejores flujos de IU, la internacionalización, la accesibilidad, etc. Consulta la lista completa en
la publicación de la versión
.
Compatibilidad con las opciones
para inhabilitar o inhabilitar
: Toda la funcionalidad está disponible para habilitar. Y los usuarios que tienen esta opción pueden hacerlo solo en secciones específicas de su sitio, así como inhabilitar AMP a nivel detallados (p. ej., en una sola publicación).
Aplicación de compatibilidad
: Garantiza que un sitio sea compatible con AMP y que solo publique contenido válido para esta funcionalidad.
Te invitamos a probar el nuevo lanzamiento mediante estos pasos:
Sube el complemento al directorio /wp-content/plugins/ de tu sitio.
Activa el complemento en el menú "Complementos" de WordPress.
Si usas versiones anteriores del complemento en el modo Clásico, migra al modo Sincronización o Nativo.
Obtén más información sobre las funciones mencionadas anteriormente en
el sitio de Complemento
.
Lo que viene
El complemento oficial de AMP para WordPress proporciona herramientas y funciones esenciales que permiten crear contenido de AMP a la manera de WordPress. Es importante tener en cuenta que el complemento no es una solución de llave en mano para "AMPlificar tu sitio", sino que funciona como una tecnología clave que habilita un ecosistema de WordPress totalmente compatible con AMP.
El camino por seguir está relacionado con la adopción del ecosistema. A medida que avancemos, habrá más complementos y temas compatibles al 100% con AMP, y los propietarios de los sitios encontrarán fácilmente componentes compatibles con esta tecnología que les permitan ensamblar sitios completos seleccionando elementos de la página temas/complementos de WordPress.org.
En el futuro, esperamos que haya soluciones de llave en mano que los propietarios de sitios puedan aprovechar para proporcionar fácilmente experiencias increíbles de AMP, independientemente de su nivel de experiencia. Nuestro objetivo final es que el contenido de AMP de alta calidad en los sitios de WordPress sea omnipresente.
Únete a nosotros mientras seguimos viaje y
comparte tus comentarios
sobre la versión más reciente. Nos entusiasma el potencial que tiene el complemento de mejorar la experiencia del usuario en la Web y esperamos con ansias lo que está por venir.
¡Ya se lanzó amp-date-picker!
viernes, 13 de julio de 2018
29 de junio de 2018
amphtml
A principios de este mes,
anunciamos un lanzamiento limitado
de
amp-date-picker
, un selector de fechas interactivo de estilo calendario para entradas en formularios. Con este componente, los usuarios pueden especificar fechas individuales o períodos con una interfaz de calendario que acelera el proceso y lo hace menos propenso a experimentar errores. Después de la gran cantidad de comentarios recibidos de desarrolladores que lo probaron en sus páginas, corregimos algunos errores y agregamos algunas características solicitadas, como la
capacidad de activar o desactivar rápidamente la fecha actual
. Con estas actualizaciones, el selector de fechas ya está disponible para producción.
Consulta el ejemplo en
AMP by Example
para ver cómo usarlo y lo que puede hacer. Como siempre,
envíanos tus comentarios
sobre amp-date-picker o brechas en las características de AMP. ¡Queremos escuchar tu opinión!
Publicado por Eric Lindley, gerente de Producto de AMP
¡Ya se lanzó amp-date-picker!
El estado de la Web en Google I/O 2018
miércoles, 16 de mayo de 2018
La Web es un tesoro global, y tiene muchas ventajas que todos disfrutamos. Es una plataforma de distribución sin igual, que proporciona a las personas en todo el mundo acceso a una amplia variedad de contenido y permite a las empresas llegar a los clientes dondequiera que estén. Detrás del éxito de la Web se encuentran su comunidad y un conjunto de estándares esencialmente abiertos que garantizan que permanezca dinámica y disponible para todos.
Desde PageRank hasta Chromium, Google ha invertido mucho en el éxito continuo de la Web. Esta semana en Google I/O, nuestra conferencia anual para desarrolladores, realizamos una presentación formal para catalogar algunos de los esfuerzos recientes orientados a permitir que la Web continúe prosperando y funcionando bien. Repasamos los temas claves que se mencionan a continuación, pero te recomendamos que veas todas las conferencias
en YouTube
.
Service Worker
La introducción de la
Service Worker API
es una de las mejoras más importantes realizadas a la Web en la historia reciente. Libera a los desarrolladores del ciclo de vida limitado de las páginas, de tener que trabajar en segundo plano para interceptar solicitudes de red y de controlar los eventos entrantes para permitir que las aplicaciones web funcionen sin conexión. Con service workers, tu sitio puede recibir notificaciones push, sincronizar datos en segundo plano y procesar muchas más tareas. Apple implementó compatibilidad con
service workers en Safari 11.1
para
iOS y MacOS
en marzo, y Microsoft Edge
integró service workers
la semana pasada;
esto significa que todos los navegadores modernos más utilizados serán compatibles con el estándar
. El uso de service workers puede implicar un gran cambio en tu arquitectura, de modo que para facilitarlo creamos
Workbox
, que incluye muchos patrones potentes de service worker en una API fácil de usar. Acabamos de lanzar la versión 3 de esta biblioteca, compilada en módulos que te permiten usar solo las funciones que necesites.
App Web Progresiva (PWA)
Service workers proporciona la columna vertebral para muchas de las capacidades de una AWP. Empresas de todo el mundo, en diferentes sectores, han tenido un éxito increíble compilando AWP. Starbucks, quienes lanzaron su sitio de AWP el año pasado, duplicaron sus usuarios activos diarios. De hecho, entre los sitios de publicidad que medimos,
cuando un sitio cambia a una AWP se observa un aumento promedio del 20% en la tasa de conversión móvil.
Muchas de las primeras AWP se centraban en dispositivos móviles, y hoy los beneficios también se extienden a equipos de escritorio. Chrome pronto ofrecerá a sus usuarios instalar AWP en sus escritorios. El sitio tendrá su propio ícono, se iniciará en una ventana independiente y conservará las características eficaces que se esperan de un navegador, como búsquedas en páginas, URL que se puedan compartir y compatibilidad con Google Cast, entre otras. En I/O mostramos la manera en que Spotify implementa su experiencia rich media como una AWP de escritorio. La compatibilidad de instalación para AWP de escritorio llegará a ChromeOS en Chrome 67 a principios de junio, y a Windows y macOS posteriormente durante el año.
WebAssembly
WebAssembly
permite a los sitios web ejecutar códigos de alto rendimiento escritos en lenguajes como C o C++, y ofrece clases de contenido completamente nuevas en la plataforma web. En marzo,
AutoCAD de Autodesk
tomó una base de código de 35 años (anterior a la mismísima Web) y la compiló para ejecutarla directamente en un navegador usando WebAssembly. AutoCAD está ahora a un vínculo de distancia, lo que significa que puedes modificar tu dibujo en CAD directamente en un navegador, independientemente del dispositivo o el sistema operativo. El equipo de ingeniería de AutoCAD tiene una sola base de código C++ compartida, y cuando el equipo de escritorio realiza cambios, estos se integran fácilmente a la app web de AutoCAD.
Si quieres aprender a portar código o escribir el tuyo, échale un vistazo al
codelab de WebAssembly
, que demuestra la interacción entre las bibliotecas C y el DOM. Ya sea que estés usando una biblioteca compleja escrita en C, que quieras incorporar un nuevo códec a la plataforma web o usar un motor como Unity o Unreal Engine, WebAssembly está aquí para ayudarte.
Lighthouse
Lighthouse
es una herramienta que te permite analizar la calidad de tu sitio web, y proporciona mediciones claras del rendimiento de este además de orientación para mejorar la experiencia de tus usuarios. Se puede acceder directamente desde DevTools de Chrome, ejecutarse desde la línea de comandos o integrarse con otros productos de desarrollo. Solo en 2018, medio millón de desarrolladores están ejecutando Lighthouse en sus sitios con frecuencia. Sabemos que la Web cambia rápido y Lighthouse puede ayudarte a permanecer actualizado con las últimas prácticas recomendadas de rendimiento. Lighthouse 3.0, anunciado en I/O, estará disponible en general más adelante durante esta semana.
Lighthouse te brinda claridad con respecto al rendimiento de carga del sitio en un entorno controlado. No obstante, si quieres ver cómo se comporta el sitio para los usuarios reales en el mundo real, lee el
Informe sobre la experiencia del usuario en Chrome
. El informe ahora proporciona métricas de rendimiento a nivel de origen para los cuatro millones de sitios web más visitados. Para obtener más información sobre cómo éstas y otras herramientas pueden ayudarte a obtener un panorama completo del rendimiento de tu sitio, lee nuestra
infografía rápida sobre herramientas
.
AMP
AMP
es una biblioteca y un ecosistema de componentes web para compilar sitios web rápidos y confiables con una excelente experiencia del usuario a escala.
Hoy hay más de seis mil millones de páginas AMP de 46 millones de dominios cuyo tiempo de carga promedio desde la búsqueda de Google es inferior a un segundo.
Las empresas están teniendo éxito con AMP:
AliExpress
, el mercado minorista global en línea, recientemente lanzó un nuevo sitio móvil como app web progresiva impulsada por AMP.
El nuevo sitio logró un increíble aumento del 31% en su tasa de conversión para el tráfico que no proviene de búsquedas.
El consumo de contenido en dispositivos móviles está cambiando, y los formatos diminutos para contar historias en pantalla completa se vuelven cada vez más populares. Para ayudarte a satisfacer las necesidades de los editores web, el proyecto AMP recientemente anunció el desarrollo de
AMP stories
, un conjunto interesante de componentes web creados para contar historias en dispositivos móviles. El formato se encuentra en continuo desarrollo, y te recomendamos intentar
crear tus propias historias
y enviar tus comentarios al equipo de AMP.
Web Packaging
Web Packaging
es un conjunto de tecnologías emergentes que creemos que redefinirán la manera en que el contenido web se distribuye en la red y se comparte entre los usuarios. Permite a los editores agrupar su contenido para la distribución a cargo de otras partes y, al mismo tiempo, conservan las garantías de integridad de HTTPS. Como parte de la exploración de
casos de uso nuevos
a través de Web Packaging, nos dimos cuenta de que existía una oportunidad interesante para AMP. Mediante colaboración con el equipo de AMP y la comunidad web, pudimos diseñar una solución a través de la cual los documentos AMP pueden conservar la URL original del editor al obtenerla del caché de AMP.
Como muestra de nuestros esfuerzos, los colaboradores del proyecto AMP
Food Network
y
Pinterest
han compilado demostraciones de Web Packaging, como la que te mostramos a continuación. Si quieres obtener más información, el equipo de AMP
escribió un artículo en el que se aborda en detalle
la manera en que Web Packaging beneficia a usuarios y editores. Más allá de la aplicación AMP, estamos entusiasmados con las tecnologías que Web Packaging habilitará y esperamos poder definir mejor nuestras ideas con tu ayuda.
Demostración de Web Packaging con una página AMP a partir de una búsqueda de Google.
Polymer
Polymer es una biblioteca JavaScript que te ayuda a crear componentes web personalizados reutilizables que podrás compartir con otros desarrolladores o combinar entre sí para compilar apps de mantenimiento eficaces. En I/O lanzamos la versión 3.0 de la biblioteca, que incorpora algunas actualizaciones importantes al ecosistema de Polymer. Completamos la compatibilidad para usar npm como el sistema de administración de paquetes y módulos ES6 como la unidad de composición, facilitando el uso de componentes web basados en Polymer junto con los demás marcos de trabajo y herramientas de desarrollo web que prefieras.
También incorporamos
LitElement
, una clase básica de componentes web nueva en la que se combinan el poder expresivo de
Lit-HTML
con componentes web que facilitan aún más la creación de componentes reactivos livianos usando sintaxis de plantilla moderna y expresiva.
También lanzamos el
PWA Starter Kit
, un punto de partida integral para compilar PWA basadas en componentes web que sean rápidas, confiables y receptivas, que admitan la incorporación de temas y que ofrezcan el punto más alto en nuestros criterios de rendimiento y de AWP Lighthouse.
Angular
Este año en I/O, el equipo de Angular brindó una descripción general del crecimiento de la comunidad y abordó algunas de las
nuevas e interesantes capacidades que se han incorporado en el marco de trabajo central, CLI y la biblioteca de Angular Material en la versión 6
. Millones de desarrolladores usan Angular, que ha tenido un impulso enorme y ha creado un ecosistema fantástico. Los nuevos comandos que se incorporan en la versión 6, como “ng update” y “ng add”, mantendrán tu aplicación actualizada y ayudarán a los desarrolladores a avanzar más rápido a medida que el equipo de Angular continúa equilibrando estabilidad e innovación.
El equipo de Angular también comentó algo sobre las mejoras que prevé implementar en Angular con
Project Ivy
. Esto facilitará la depuración de Angular y acelerará su compilación y ejecución de un modo que funcione con las aplicaciones existentes. El equipo demostró la utilidad de estas mejoras en una aplicación Hello World pequeña, en la cual las funciones de Angular que no se usaron se eliminaron automáticamente del conjunto JavaScript.
Nuestra misión en Google y en Chrome es trabajar con la comunidad para crear experiencias que sean rápidas, integradas, confiables y atractivas. Estamos entusiasmados con las nuevas capacidades disponibles para la plataforma web abierta, y con el conjunto completo de herramientas que te permiten compilar rápidamente sitios de alta calidad para tus usuarios. Para recibir información actualizada sobre los últimos avances en la Web, visita nuestro
portal para desarrolladores
o mira las charlas del evento I/O de este año en el
canal de Google Developers de YouTube
. Nos complacerá verte en la próxima
Chrome Dev Summit
más adelante, este año.
Publicado por Malte Ubl y Ben Galbraith
Novedades en AMP: Selector de fechas, desarrollo de CSS simplificado y más contenido de AMP By Example
sábado, 3 de marzo de 2018
Regresamos con otra entrada para destacar los cambios más importantes realizados en AMP durante los últimos meses.
Función experimental beta amp-date-picker
Nuestro nuevo selector de fechas ya está disponible para que realices pruebas. Para comenzar, asegúrate de habilitar el canal Dev y ejecutar el siguiente comando en la consola de devtools:
AMP.toggleExperiment(‘amp-date-picker’)
Puedes encontrar información detallada sobre cómo acceder a las funciones experimentales
aquí
. Si bien aún no cuentas con nuestra documentación para este componente, puedes encontrar información básica en la
edición de Github
y consultar nuestros ejemplos de implementaciones (
ejemplo genérico
y
ejemplo de viaje
).
Debido a que este componente todavía es experimental, aún no podrás iniciarlo. Pruébalo y envíanos comentarios en la
edición de Github
.
Paquete de npm replace-important
Los programadores que usan AMP ya conocerán algunas de sus
restricciones para CSS
. Después de recibir comentarios acerca de que algunas de esas restricciones en particular han sido obstáculos, comenzamos a pensar en la manera de facilitar la aplicación de estilo a las páginas de AMP. Uno de los primeros recursos que implementaremos es
un paquete npm que reemplaza los estilos “!important”
(no permitidos en AMP) por reglas equivalentes que realizan validaciones.
Actualizaciones de AMP by Example
Recientemente, realizamos un esprint corto para obtener nuevas muestras en AMP By Example; consulta algunos de los resultados aquí:
Flujo de finalización de compras en comercio electrónico
Aspectos básicos de los efectos de desplazamiento
: ¡un juguete antiestrés creado con AMP!
Cargar más
: un botón que acciona contenido adicional con la interacción del usuario.
Botón de desplazamiento hacia arriba
Botón de favoritos
: un botón “Favoritos” integral y dinámico.
Contenido dinámico después de la interacción con el usuario
y
combinación de datos dinámicos y almacenados en caché
: dos patrones para incorporar datos altamente dinámicos a páginas AMP.
Menús desplegables vinculados
: un ejemplo muy solicitado en el que se demuestra la manera de vincular varios menús desplegables.
Lista paginada
: un patrón que ayuda a los usuarios a recorrer listas largas de contenido dinámico.
amp-timeago
: un ejemplo muy esperado para esta pequeña fabulosa extensión.
Como parte de la compilación de nuestro ejemplo de flujo de finalización de compra, también probamos integraciones con diferentes proveedores de pago. Pudimos compilar con éxito envíos de formularios mediante la integración con Authorize.net, Vantiv, WorldPay y Card Connect. Pero no des simplemente por sentado lo que afirmamos; pruébalo y cuéntanos si tuviste algún problema con la implementación.
Ejemplo de un juguete antiestrés creado durante nuestro último esprint de AMP By Example.
Lo mejor del resto
Lanzamos implementaciones para la
Media session API
, tanto para
amp-audio
como para
amp-video
.
En
AMP Showcase
, en ampproject.org, se destacan los sitios web que usan funciones claves de AMP.
posibilita la aplicación del sistema de diseño de AMP a contenedores arbitrarios.
ahora carga automáticamente las secuencias de comandos para las extensiones AMP que aparecen dentro de las actualizaciones.
Un nuevo
activador de errores
para usar con amp-analytics que puede detectar e informar problemas atribuibles al autor de la página o al software que se usó para publicarla.
Presentamos la capacidad de
incluir anuncios de video con un reproductor de video incorporado
en páginas AMP de Doubleclick y otros proveedores que admiten el IMA SDK.
Los editores ahora pueden programar sus
anuncios para que se actualicen
luego de un intervalo determinado.
El camino por recorrer
Mejoras en
<amp-image-lightbox>
Lanzamiento completo del
selector de fechas
antes mencionado
Más
plantillas
nuevas
y una configuración simple para
AMP Start
Varias mejoras inspiradas en los requisitos de GDPR
Mensajería entre amp-iframe y otros elementos
del documento principal
Funciones de video, como la posibilidad de
minimizarlo en la esquina de la ventana de visualización
Puedes hallar más información en el
plan detallado completo
.
* * *
Gracias a la comunidad de desarrollo AMP por su trabajo y sus comentarios. Como siempre,
cuéntanos
si tienes algún problema o quieres solicitar funciones en
GitHub
.
Publicado por Rudy Galfi, gerente de Producto, AMP Project
Novedades en AMP: Selector de fechas, desarrollo de CSS simplificado y más contenido de AMP By Example
Labels
.app
.dev
.txt
#AMP
#CPU
#DeveloperStudentClubs
#DevFest
#DragonBall
#DSC
#Forsety
#ForsetySecurity
#freeandopen
#GCP
#Google
#GoogleCloud
#GoogleCloudPlatform
#GoogleLaunchpad
#iio2009
#Kubernetes
#MaterialDesign
#OneCommunity
#Security
#TensorFlow
#UPGlobal
#UpLatam
#WithGoogle
+page
10 YEARS
2013
2019
64 bits
A/B Testing
AA
Accelerator
Action on Goolge
actionbar
Actions
Actions Console
AdMob
Ads
adwords
adwords api
AI
AIY
ajax
alarmmanager
ALFA
almacenamiento
alojamiento de proyectos en google code
AMP
AMP Conf
AMP Project
amp-date-picker
amphtml
Analytics
Andorid
android
Android (operating System)
Android 3.1
android 3.3
android 4.2
android 9
Android 9 Pie
Android App Bundle
android design
Android Dev Summit
Android Developers
android Jetpack
Android P
Android SDK
Android Studio
Android Things
Android Wear
AndroidDevStory
androititlan
angelina jolie
Annotation
Announcements
anuncios
API
API Analytics YouTube
Apigee
APIs
Aplicaciones
aplicaciones chrome
app
app engine
App Indexing
app invites
App Server
applications
AppQuality
apps
Apps Script
AR
ARCore
arte
ATLAS
AWP
backend
Base64
batch
Bava
Betatesting
Better Ads Standars
bigdata
BigQuery
Biometrics
blink
bootcamp
BOT
BQ
Business
búsqueda ajax
by Google
byCases
byCommunity
byDevelopers
byGoogle
C++
CALENDAR
Cardboard
case
caso de éxito
Casos de éxito
casos destacados
CCOSS
Century Fox
chat
chrome
chrome web store
chromebook
chromecast
chromium
Cinéfilos
cloud
Cloud Anchors
CLOUD endpoints
Cloud Firestore
Cloud Functions
Cloud IoT Core
Cloud Next
Cloud Scheduler
Cloud services
cloud test lab
Cloud Text-to-Speech
Cloud Translation
CMD en vivo
coconut
code
code-in
code.org
CodeLabs
código
código abierto
Colab
colombia
Communities
Comunidades
concurso google
conference
contenedores
convocatoria
Coordinate
crashlytics
CRE
crear aplicaciones ajax
creatividad
Crowdsource
CSS
cws
daniela robles
dart
dart sdk
dartium
dartlang
Dataset
DCL
denis labelle
desarrolladores
Desarrolladores Google
desarrolladores LatAm
Desarrollar
Design
Design Sprint
Destacados
dev
Dev.f
DevArt
DevBus
DevBusLatAm
Developer Bus
Developer Summit
DeveloperConsole
developers
DevFest
devoxx
dialogflow
diseño UX
Distribuir
DNS
DOM
domain
DonkeyCar
doubleclick
Drive SDK
Drivers
ecommerce
ecosistema
elections
elizalde
Emoticons
emprendedores
empresas
engagement
english
Enhanced Campaigns
enterprise
eventos
Events
evolución de aplicaciones
Excel
ExpertosDicen
Faas
Family
FanBridge
FCM
FCP
Featured
fido
find people
Fintech
firebase
Firebase Cloud Messaging
firebase summit
flu trends
Flutter
Flutter 1.0
flutter 1.7
flutter developers
Flutter Live
FlutterLive
FoundersLab
Freebase
Fuction
Fuctions
Full-Stack
functional programming
G Suite Dev Show
G+
g+ goto gal
G+GotoGal
GAE
game
games
GCloud
gcm
GCP
GCS
GDA
GDE
GDG
GDH
GDL
GDLevent
GDS
Get Inspired
get.app
GitHub
GLP
gmail
golang
GOMO
Google
Google Accelerator
Google AdMob SDK
Google AdWords
Google Analytics
Google APIS
Google App Engine
Google Apps
Google Apps Script
Google Art Project
Google Assistant
google calendar
google cast
Google Charts
Google Chrome
Google Cloud
Google Cloud Console
Google Cloud Messaging
Google Cloud Next
Google Cloud Platform
Google Cloud Platform Newsletter
google cloud platforn
Google Cloud Storage
google code-in
Google Compute Engine
Google Dataset
Google Developer Groups
google developers
Google Developers Academy
google developers expert
Google Developers Hackademy
google dns
Google Drawings
Google Drive
Google Earth
Google for games
Google Forms
google geo
Google Home
google i/o
google i/o extended
google io
Google Keep
Google Kubernetes Engine
Google Launchapad
Google Launchpad
Google Maps
google maps coordinate
Google Maps Platform
Google Mexico
Google Nose
google now
Google Person Finder
google places api
Google Play
Google Play Books
Google Play Developer API
google play games
Google Play Movies
Google Play Protect
Google Play Services
Google Plus
Google Science Fair
google search
Google Sheets
google sign in
Google Top Geek
Google+
Google+ Communities
Google+ Hangouts
google+ sign-in
GoogleAPI
googlecloud storage
GoogleCloudPlatform
googledevs
GooglePlay
Googleplex
Goolge Lunchpad
GTG
Hackademy
hackers
Haiko
Haití
hangouts
Hangouts Remote Desktop
hardcode
Heello
honeycomb
HTML
HTML5
HTTPS
I/O
IA
IAM
IETF
IFAI
in app purchases
in-app
ingles
Ingress
instagram
integración de soluciones
interactive post
Interesante
International
International Women’s Day
IO
io15
io18
io19
iOS
IoT
istio
IU
IVR
J2EE
java
JavaScript
jelly bean
JS
JSON
Juegos
juegos html5
Kit ML
Knative
kotlin
kUBERNATES
Kubernetes
LATAM
latamRegionSur
Launchpad
Launchpad Studio
Lenovo Mirage Solo
lightbox
linux
lucero galindo
machine learning
Made with Code
Mapdata
Mapeo
maps
Maps Ad Unit
Maps API
Maps Engine
Market
Marketing
Marshmallow
MATERIAL DESIG
Material Design
mejores apps 2013
México
michelle marie
MIT
MIT Global Start-up Labs
MIT-AITI
ML
ML Kit
mobile
monetizar
mongoDB
MOOC
Motorola
Mountain View
móvil
MQTT
mr.white
mTLS
natalie villalobos
Navigation
NBA JAM
NES
Next Big Sound
Next Level
nfc
Niantic
Nik
NINTENDO
node.js
NoSQL
nube
OAuth2
Objective-C
OClock
open source
OPenApi
OS
OSS
Paas
PageSpeed
PagesSpeed
parallel18
patrones
patters
performance
permisos
Pipeline API
Pixability
pixel
Píxel
play
Play Console
Playtime
Podcast
pollito pio
Polymer
por lote
Posse
Prediction API
primer
Producto
programación
Propositos
Protocol Buffers
proyecto 20%
Push API
PYMES
python
Q
Q4
quickoffice
Rasberry Pi Zero WH
Raspberry Pi
Realtime
Reflectly
register
Release
Resources
robots.txt
Safe
SDK
Search
Security
seedbank
seguridad
SEO
servidores
Showyou
sign-in
SNES
SO
social media
Spain
SpLATAM
SQL
SQLite
Start
startup grind
Startup Launch
startup weekend
startup weekend for the planet
startupbus
startups
StayAtHome
story
Street View
subtitles
success
sw
SyScan
tablet
Tablet Optimization Tips
tabletas
takeaction
Tango
tendencias 2013
TensorFlow Developer Summit
testing
TextView
TF JAM
The Garage
The Venture City
tips G+
tips gmail
TLD
TLS
Top Experts
Top Geek
top level domain
TopExpert
topics
traducciones
Transparency Report
triggers
Tubular Labs
twilio
Tyka
TypeScript
UAC
udacity
ui
Umbrales
UNAM
unity
Unity3D
universal search
UX
Vector
VectorDrawable
video juegos
vidIQ
ViewPager
Visual Progress
Voicekit
VPC
VR
VSCode
web
Web hosting
Web móvil
WebAssembly
with google
Wizdeo
WizTracker
Women at Google
Women Techmakers
workmanager
WTM
XKCD
XML
Yifat Cohen
youtube
YouTube Analytics API
YouTube API
YouTube Data API
YouTube One Channel
YouTube Player API
Archive
2023
nov
oct
sept
ago
jun
may
abr
mar
ene
2022
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2021
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
2020
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2019
dic
nov
oct
sept
ago
jun
may
abr
mar
feb
ene
2018
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
2017
nov
sept
ago
jul
jun
may
abr
ene
2016
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2015
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2014
dic
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2013
dic
nov
oct
ago
jul
jun
may
abr
mar
feb
ene
2012
dic
nov
oct
sept
ago
jul
2011
nov
oct
may
mar
2010
dic
nov
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2009
dic
nov
sept
ago
jul
jun
may
abr
mar
feb
ene
2008
oct
sept
ago
jul
jun
may
abr
mar
feb
ene
2007
dic
Feed
Desarrolladores
Eventos y Comunidad
Casos Destacados
Dicen los Expertos
Google Accelerator