Henneo Proyecto 20minutos.es
AMP
Versión: 1.2
Fecha de creación: 20/07/2023
Fecha de actualización: 25/07/2023
Henneo
Proyecto 20minutos es
Índice
1. Introducción
2. Elementos comunes
3. Metadatos ld+json
4. Publicidad
5. Infinite scroll
6. Elementos básicos de article
7. Módulos de article
8. Widgets
9. Módulos en opinión
10. Particularidades de verticales
Versiones del documento
1.0 20/07/2023 Versión inicial
1.1 24/07/2023 Reorganización apartado de módulos y elementos de un article (apartados 6 y 7)
1.2 25/07/2023 Añadir detalle de la publicidad de Cinemanía en el apartado 12.1
1.3 27/07/2023 Añadir galerías. Apartado 11.
Henneo
Proyecto 20minutos es
1. Introducción
En el presente documento se identifican los elementos necesarios para la nueva versión de AMP para las noticias de 20minutos.es.
Esquema del documento amp
<!doctype html>
<html ⚡ lang="es">
<head>
</head>
<body class="" >
<amp-analytics type="googleanalytics" id="analyticsArticleEvent"></amp-analytics>
<amp-analytics type="comscore"> </amp-analytics>
<amp-analytics type="chartbeat"></amp-analytics>
<amp-analytics>{PROMETEO}</amp-analytics>
<amp-sidebar id="sidebar" layout="nodisplay" side="left" class="sections-menu"></amp-sidebar>
<div id="main-container" class="main-container">
<amp-iframe title="User Sync"
src="https://ads pubmatic com/AdServer/js/pwtSync/load-cookie html?pubid=161361&profid=6071&bidders=pubmatic"></div >amp-iframe>
<header class="header header-scroll-section" next-page-replace="header" >
<div class="menu"><button id="toggle-hamburguer-menu" class="fas fa-bars" tabindex="1" on="tap:AMP setState({visible: !visible}), sidebar toggle"></button></div>
<a href="https://www 20minutos es/"><div class="logo"></div></a>
<span class="section-title"></span>
</header>
<main class="page-content">
<article class="article default" data-history-state="0"
data-scroll-url="noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-por-que-no-envejece/" data-title="Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?"" id="article-735">
<div class="top-content-amp">
<div class="supratitle-container-amp"></div>
<div class="title-container-amp"></div>
<div class="epigraph-container-amp"></div>
</div>
<div class="main-media-container-amp"></div>
<div class="article-content">
<div class="content-media-container-amp">
<div class="content-media-amp">
<div class="article-info-container-amp">
<div class="article-info">
<div class="publish-info"></div>
<div class="share-options"></div>
</div>
</div>
<div class="media-modules-amp"></div>
</div>
</div>
<div id="axds-Top" class="container axds"></div>
<div class="content-modules-amp">
<p class="paragraph"></p>
<div id="axds-Right1" class="container axds"></div>
<p class="paragraph"></p>
<amp-embed width=100 height=100 type=taboola data-mode='thumbs-ma-01'></amp-embed> <p class="paragraph"></p>
<p class="paragraph"></p>
<p class="paragraph"></p>
<div id="axds-Right2" class="container axds"></div> <p class="paragraph"></p>
</div>
<div class="article-bottom-content">
<div class="trustproject logo"></div>
<div class="module">
Henneo
Proyecto 20minutos es
<amp-embed width=100 height=100type=taboola data-mode='thumbnails-a-amp'></amp-embed> </div>
<div class="article-bottom-box related-tags"></div>
<div>
<a id="comments" class="bttn"
href="https://www 20minutos es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-por-que-n o-envejece/#show-comments"><span>Comentar</span></a>
</div>
<div class="module module-prometeo" next-page-hide >
<amp-iframe
src="https://d2fu3fnr6zw5wa cloudfront net/widgets?mid=002&source=amp&sec=actualidad&sub=&widgetId=dsZ7nUSQIgtpF WYNzTB8">
</amp-iframe>
</div>
<div class="module module-coupons container-modules" next-page-hide></div> </div>
</div>
</article>
</main>
<div next-page-hide >
<div id="axds-Sticky" class="container axds"></div>
</div>
<div next-page-hide >
<amp-consent id="didomi" layout="nodisplay" type="didomi"></amp-consent>
</div>
</div>
<amp-next-page
src="https://assetsha.s3-eu-west-1.amazonaws.com/TESTs/scroll-infinito/amp next page config local.json?media id=002&cat egory=actualidad&limit=4&scroll=1">
</amp-next-page>
</body>
</html>
Librerías amp
<script async custom-element="amp-analytics" src="https://cdn ampproject org/v0/amp-analytics-0 1 js"></script>
<script async custom-element="amp-social-share" src="https://cdn ampproject org/v0/amp-social-share-0 1 js"></script>
<script async custom-element="amp-sidebar" src="https://cdn ampproject org/v0/amp-sidebar-0 1 js"></script>
<script async custom-element="amp-bind" src="https://cdn ampproject org/v0/amp-bind-0 1 js"></script>
<script async custom-element="amp-accordion" src="https://cdn ampproject org/v0/amp-accordion-0 1 js"></script>
<script async custom-element="amp-anim" src="https://cdn ampproject org/v0/amp-anim-0 1 js"></script>
<script async custom-element="amp-twitter" src="https://cdn ampproject org/v0/amp-twitter-0 1 js"></script>
<script async custom-element="amp-youtube" src="https://cdn ampproject org/v0/amp-youtube-0 1 js"></script>
<script async custom-element="amp-iframe" src="https://cdn ampproject org/v0/amp-iframe-0 1 js"></script>
<script async custom-element="amp-form" src="https://cdn ampproject org/v0/amp-form-0 1 js"></script>
<script async src="https://cdn ampproject org/v0 js"></script>
<script async custom-element="amp-ad" src="https://cdn ampproject org/v0/amp-ad-0 1 js"></script>
<script async custom-element="amp-sticky-ad" src="https://cdn ampproject org/v0/amp-sticky-ad-1 0 js"></script>
<script async custom-element="amp-consent" src="https://cdn ampproject org/v0/amp-consent-0 1 js"></script>
<script async custom-template="amp-mustache" src="https://cdn ampproject org/v0/amp-mustache-0 2 js"></script>
<script async custom-element="amp-next-page" src="https://cdn ampproject org/v0/amp-next-page-1 0 js"></script>
Diseño/mockup
Javier Asuar ha estado trabajando en esta web https://amp-20m.surge.sh/, en ella se puede se puede ver un ejemplo de noticia para 20m con los últimos cambios de diseño.
Henneo
Proyecto 20minutos.es Convención:
Los constantes de proyecto se pintan en amarillo
Los elementos dinámicos que dependen de la noticia se pintan en verde. Ejemplo:
<amp-analytics type="googleanalytics" id="analyticsArticleEvent"> <script type="application/json">
{ "requests": { "pageviewAMP20Min":
"${pageview}&cd6=${seotag}&cd7=${firma}&cd8=${user_logged}&cd9=${createdby}&cd10=${noticia_id}&cd11= ${lastmodify}&cd12=${fechapublicacion}&cd13=${layout}&cd14=${categoria}&cd15=${subcategoria}&cd19=${us er_id}&cd26=${superusuario}&cd27=${keywords}&cd28=${platform}&cd29=${sesionCount}&cd30=${mediatype} &cd32=${gaid}&cd33=${kid}&cd34=${terciariacategoria}&cd35=${scroll}" }, "vars": { "account": "UA-3207705-1", "layout" : "articulo", "categoria_id" : "1", "categoria" : "actualidad", "subcategoria_id" : "", ............
} } } </script> </amp-analytics>
2. Elementos comunes
2.1 Gestión de consentimiento con Didomi
<amp-consent id="didomi" layout="nodisplay" type="didomi"> <script type="application/json">
{ "exposesTcfApi": true, "uiConfig": { "overlay": true }, "clientConfig": { "gdprAppliesGlobally": true, "config": { "notice": { "initialHeight": "60vh" }, "app": { "apiKey": "6e7011c3-735d-4a5c-b4d8-c8b97a71fd01" } }
}, "policy": { "default": { "waitFor": { "didomi": [] }, "timeout": {
Henneo Proyecto 20minutos.es
"seconds": 0, "fallbackAction": "dismiss"
} } }
} </script> </amp-consent>
Henneo
Proyecto 20minutos.es
2.2 Analítica con GA
<amp-analytics type="googleanalytics" id="analyticsArticleEvent"> <script type="application/json">
{ "requests": { "pageviewAMP20Min":
"${pageview}&cd6=${seotag}&cd7=${firma}&cd8=${user_logged}&cd9=${createdby}&cd10=${noticia_id}&cd11= ${lastmodify}&cd12=${fechapublicacion}&cd13=${layout}&cd14=${categoria}&cd15=${subcategoria}&cd19=${us er_id}&cd26=${superusuario}&cd27=${keywords}&cd28=${platform}&cd29=${sesionCount}&cd30=${mediatype} &cd32=${gaid}&cd33=${kid}&cd34=${terciariacategoria}&cd35=${scroll}" }, "vars": { "account": "UA-3207705-1", "layout" : "articulo", "categoria_id" : "1", "categoria" : "actualidad", "subcategoria_id" : "", "subcategoria" : "", "terciariacategoria_id" : "", "terciariacategoria" : "", "lastmodify" : "1", "createdby" : "1", "firma" : "El luchador", "fechapublicacion" : "20230718", "keywords" : "Actualidad,Tag 02", "noticia_id" : "735", "user_logged" : "0", "user_id" : "", "sesionCount" : "", "mediatype" : "imagen,video,galeria,poll,minuto a minuto,html_youtube,html_twitter", "seotag" : "tag-02", "platform" : "AMP", "gaid" : "CLIENT_ID(_ga)", "superusuario" : "CLIENT_ID(_ga)", "kid" : "CLIENT_ID(_kuid_)", "scroll" : "QUERY_PARAM(scroll,0)" },
"triggers": { "trackPageviewWithCustom" : { "on": "visible", "request": "pageviewAMP20Min", "visibilitySpec": {
"repeat": truehttps://docs.google.com/document/d/1EVLUwIGUEcaHwfZfSbEkf7Gd3Y9sF5PY/edit } },
"clickComentarios": { "on": "click", "selector": "#comments", "request": "event", "vars": {
"eventCategory": "detalle_noticia", "eventAction": "comentarios", "eventlabel": "comentar_amp"
} } } }
</script> </amp-analytics>
Henneo Proyecto 20minutos.es
Además, para galerías (deben de mostrarse también el anterior):
<amp-analytics type="googleanalytics" id="analyticsGalleryEvent"> <script type="application/json"> { "requests": {
"pageviewForGalleryEvent":
"${pageview}&cd6=${seotag}&cd7=${firma}&cd8=${user_logged}&cd9=${createdby}&cd10=${noticia_id}&cd11= ${lastmodify}&cd12=${fechapublicacion}&cd13=${layout}&cd14=${categoria}&cd15=${subcategoria}&cd19=${us er_id}&cd26=${superusuario}&cd27=${keywords}&cd28=${platform}&cd29=${sesionCount}&cd30=${mediatype} &cd32=${gaid}&cd33=${kid}&cd34=${terciariacategoria}&cd35=${scroll}" }, "vars": { "account": "UA-3207705-1" }, "triggers": {
"ampCarouselChange": { "on": "amp-carousel-change", "request": "pageviewForGalleryEvent", "vars": {
"layout" : "galeria", "categoria_id" : "1", "categoria" : "actualidad", "subcategoria_id" : "6", "subcategoria" : "internacional", "terciariacategoria_id" : "", "terciariacategoria" : "", "lastmodify" : "2", "createdby" : "2", "firma" : "El becario", "fechapublicacion" : "20191007", "keywords" : "gallery, 8519, of, internacional", "noticia_id" : "320", "user_logged" : "0", "user_id" : "", "sesionCount" : "", "mediatype" : "", "seotag" : "tag-02,tag-04,tag-05", "platform" : "AMP", "gaid" : "CLIENT_ID(_ga)", "superusuario" : "CLIENT_ID(_ga)", "kid" : "CLIENT_ID(_kuid_)", "scroll" : "0"
</script> </amp-analytics>
Henneo
Proyecto 20minutos.es
2.3 Analítica con Comscore
<amp-analytics type="comscore">
<script type="application/json">
{ "vars": { "c2": "8189131" }, "extraUrlParams": { "comscorekw": "amp" } }
</script> </amp-analytics>
2.4 Analítica con Charbeat
No se usa ya
Proyecto 20minutos.es
2.5 Analítica con Hipatia
<amp-analytics>
<script type="application/json">
{ "requests": { "pageview":
"
https://pixel-prometeo.appspot.com/api/v2/event/amp-pageview/?RANDOM&categoria_n1=${categoria_n1} &categoria_n2=${categoria_n2}&categoria_n3=${categoria_n3}&tags=${tags}&layout=${layout}&canonical=${can onicalUrl}&article=${article}&author=${author}&title=${title}&keywords=${keywords}&image=${image}&media_i d=${media_id}&publish_time=${publish_time}&client_id=${clientId(_prometeo)}&hostName=${canonicalHostna me}&path=${canonicalPath}"
}, "triggers": { "trackPageview": { "on": "visible", "request": "pageview", "vars": { "categoria_n1": "actualidad", "categoria_n2": "internacional", "categoria_n3": "" , "layout": "galeria", "article": "320", "publish_time":"2023-07-17 13:03:12", "author": "El becario", "media_id":"002", "title": "Gallery\u00208519\u0020of\u0020Internacional", "keywords": "gallery, 8519, of, internacional", "image":
"https://20minutos.local.es/files/article_amp/uploads/imagenes/2019/10/07/photo_11270.jpg", "tags": "tag-02,tag-04,tag-05"
</script> </amp-analytics>
2.5 GFK NEW
Más info https://redmine.henneo.com/issues/26928
<amp-analytics type='gfksensic' data-block-on-consent='_till_responded'> <script type='application/json'>
{ "requests": { "custom_params": "[custom parameter]" <!-- eg: "cp_c1=example1&cp_c2=example2" --> }, "vars": { "environment": "-preproduction", <!-- delete this line for production --> "regionID": "es", "mediaID": "20MinutosAmp" },
"triggers": { "trackConsent": { "on": "visible",
Henneo Proyecto 20minutos.es
"request": "impression" } } }
</script> </amp-analytics>
Henneo Proyecto 20minutos.es
Henneo
Proyecto 20minutos.es
2.5 Marfeel NEW
Más info https://redmine.henneo.com/issues/26928
<amp-analytics config="https://events.newsroom.bi/amp.v1.json" data-credentials="include" data-block-on-consent="_till_responded"> <script type="application/json" > { "vars" : { "accountId": "000" //USE YOUR PERSONAL ACCOUNT ID } }
</script> </amp-analytics>
Proyecto 20minutos.es
3. Metadatos ld+json
En la página podemos encontrar una serie de datos estructurados
3.1 NewsMediaOrganization (básico)
<script type="application/ld+json">
{ "@context": "http://schema.org", "@type": "NewsMediaOrganization", "name": "20minutos", "foundingDate": "2000-02-03", "missionCoveragePrioritiesPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#mision", "ethicsPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#codigo-etico", "verificationFactCheckingPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#verificacion", "unnamedSourcesPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#fuentes", "correctionsPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#correcciones", "noBylinesPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#firma", "actionableFeedbackPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#lectores", "diversityPolicy": "https://www.20minutos.es/estaticos/buenas-practicas/#diversidad", "diversityStaffingReport": "https://www.20minutos.es/estaticos/buenas-practicas/#diversidad", "masthead": "https://www.20minutos.es/estaticos/buenas-practicas/#estructura", "ownershipFundingInfo": "https://www.20minutos.es/estaticos/buenas-practicas/#codigo-etico", "contactPoint" : {
"@type" : "ContactPoint", "contactType" : "Newsroom Contact", "email" : "20minutoseditora@20minutos.es"
}, "address": {
"@type": "PostalAddress", "name": "20minutos", "telephone":"+34 917 015 600", "email": "20minutoseditora@20minutos.es", "addressLocality": "Madrid", "postalCode": "28027", "streetAddress": "Condesa de Venadito 1, 2a planta", "url" : "https://www.20minutos.es" , "sameAs" : ["https://www facebook.com/20minutos.es","https://twitter.com/20m","https://www youtube.com/user/20min utos/"]
}, "memberOf": [
{
"@type": "Organization", "name": "Henneo", "logo" : "https://www.20minutos.es/images/logo-henneo-azul.png" } ] }
</script>
Henneo
Proyecto 20minutos.es
Pero dependiendo del módulo insertado dentro de una noticia, se pueden encontrar diferentes datos estructurados.
3.2 ReportageNewsArticle (noticia)
<script type="application/ld+json">
{
"@context": "http://schema.org", "@type": "ReportageNewsArticle", "@id":
"https://amp.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-po r-que-no-envejece/",
"headline": "Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: '¿Por qué no envejece?'",
"description": "Con permiso de Charlotte y George de Gales, y, por supuesto, de Carlos Alcaraz, el otro gran protagonista de la final de Wimbledon del pasado domingo fue Brad...", "articleBody": ".............",
"datePublished": "2023-07-18T12:29:11+02:00",
"dateModified": "2023-07-18T12:29:11+02:00", "isAccessibleForFree": "false", "publishingPrinciples": "https://www.20minutos.es/estaticos/buenas-practicas/", "locationCreated": {"@type":"Place", "name":" España"},
"mainEntityOfPage":
"https://amp.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-po r-que-no-envejece/",
"image": { "@type": "ImageObject", "url":
"https://imghandler.20minutos.es/files/article_amp/uploads/imagenes/2023/04/26/tortilla-de-patata-abierta.jp eg", "width": 1200, "height": 675
},
"author": { "@type": "Person", "name": "El luchador" ,"sameAs": "https://www.20minutos.es/autor/el-luchador" },
"editor": { "@type": "Person", "name": "User Admin"
},
"publisher": { "@type": "NewsMediaOrganization", "name": "20minutos", "logo": { "@type": "ImageObject", "url": "https://www.20minutos.es/images/logo_20m.png", "width": "600", "height": "60"
Proyecto 20minutos.es
3.3 LiveBlogPosting (mam)
<script type="application/ld+json">
{
"@context":"http://schema.org", "@type":"LiveBlogPosting", "url":
"https://amp.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-po r-que-no-envejece/",
"headline":"Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: \"¿Por qué no envejece?\"",
"description":"Con permiso de Charlotte y George de Gales, y, por supuesto, de Carlos Alcaraz, el otro gran protagonista de la final de Wimbledon del pasado domingo fue Brad...", "datePublished": "2023-07-18T12:29:11+02:00", "dateModified": "2023-07-18T12:04:00+02:00",
"coverageStartTime":"2023-07-18T12:04:00+02:00", "coverageEndTime":"2023-07-18T12:04:00+02:00", "publisher": {
"@type": "Organization", "name": "20minutos", "logo": {
"@type": "ImageObject", "url":"https://www.20minutos.es/images/logo_20m.png", "width": "600", "height": "60"
}
}, "author": {
"@type": "Person", "name": "El luchador"
}, "editor": { "@type": "Person", "name": "20minutos"
},
"image": { "@type": "ImageObject", "url":
"https://imghandler.20minutos.es/files/og_thumbnail/uploads/imagenes/2023/04/26/tortilla-de-patata-abierta.j peg", "width": "1200", "height": "675" }, "liveBlogUpdate": [ { "@type":"BlogPosting", "headline":"Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: \"¿Por qué no envejece?\"",
"alternateName":"Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: \"¿Por qué no envejece?\"",
"articleBody":"Se abren los colegios electorales de forma puntual en todas las poblaciones de Zaragoza",
"datePublished":"2023-07-18T12:04:00+02:00",
"dateModified":"2023-07-18T12:04:00+02:00", "publisher":{ "@type":"Organization", "name":"20minutos", "logo":{
"@type":"ImageObject", "url":"https://www.20minutos.es/images/logo_20m.png" }
Henneo Proyecto 20minutos.es
}, "author":{ "@type":"Person", "name":"El luchador" },
"image":"https://imghandler.20minutos.es/files/og_thumbnail/uploads/imagenes/2023/04/26/tortilla-de-patata -abierta.jpeg"
} ] }
</script>
3.4 Movie (Ficha de película)
<script type="application/ld+json">
{ "@context": "http://schema.org", "@type": "Movie", "name": "INSIDIOUS - LA PUERTA ROJA", "description": "5º entrega de la saga", "director": { "@type": "Person", "name": "James Wan"
},
"countryOfOrigin": "USA", "genre": "Terror", "image":
"https://imghandler.20minutos.es/files/og_thumbnail/uploads/imagenes/2023/04/26/tortilla-de-patata-abierta.j peg", "author": [
{ "@type": "Person", "name": "El luchador"
} ] }
</script>
Proyecto 20minutos.es
3.5 Product (Ficha de producto)
<script type="application/ld+json">
{
"@context": "http://schema.org", "@type": "Product", "name": "Nunc donec accumsan mauris metus semper primis potenti orci integer vivamus.<br>", "description": " ...", "image":
"https://imghandler.20minutos.es/files/og_thumbnail/uploads/imagenes/2023/04/26/tortilla-de-patata-abierta.j peg", "review": [
{
"@type": "Review", "name": "Nunc donec accumsan mauris metus semper primis potenti orci integer vivamus.<br>", "description": "....", "author": "El luchador, ", "datePublished": "2023-07-18T12:29:11+02:00", "reviewRating": { "@type": "Rating", "ratingValue": 4, "worstRating": 0, "bestRating": 5
3.6 Recipe (Receta)
<script type="application/ld+json"> {
"@context": "https:\/\/schema.org\/", "@type": "Recipe", "name": "Caracoles con tomate", "image": [
"https:\/\/20minutos.local.es\/files\/og_thumbnail\/uploads\/imagenes\/2019\/10\/09\/photo_2240.jpg" ], "author": { "@type": "Person", "name": "El luchador" }, "datePublished": "2023-07-18T12:29:11+02:00", "description": "Con permiso de Charlotte y George de Gales, y, por supuesto, de Carlos Alcaraz, el otro gran protagonista de la final de Wimbledon del pasado domingo fue Brad...", "prepTime": "PT30M", "cookTime": "PT2H", "totalTime": "PT3H", "keywords": "Actualidad,Tag 02", "recipeYield": "2", "recipeCategory": "Tradicional", "nutrition": { "@type": "NutritionInformation", "calories": "120 kcal" }, "recipeIngredient": [ "Nam auctor ut in magna ultricies mollis posuere ligula duis imperdiet", "Nam auctor ut in magna ultricies mollis posuere ligula duis imperdiet" ], "recipeInstructions": [] }
Henneo Proyecto 20minutos.es
</script>
4. Publicidad
4.1 amp-ad (Top, Right1, Right2)
<div id="axds-Top" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true"
width=320
height=100 type="doubleclick"
data-slot="/34616581,22653889300/amp.20minutos.es/actualidad/noticia/Top" data-multi-size="320x50"
data-multi-size-validation="false"
json='{"targeting":{"m20_page":"articulo","m20_secc":["actualidad"],"m20_tags":["tag-02"],"m20_id":"735","po s":"Top"}}'
rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Top"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </div>
<div id="axds-Right1" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true"
width=300
height=600 type="doubleclick"
data-slot="/34616581,22653889300/amp.20minutos.es/actualidad/noticia/Right1"
data-multi-size="300x250,300x300"
data-multi-size-validation="false"
json='{"targeting":{"m20_page":"articulo","m20_secc":["actualidad"],"m20_tags":["tag-02"],"m20_id":"735","po s":"Right1"}}' rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Right1"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </div>
<div id="axds-Right2" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true" width=300 height=600 type="doubleclick"
data-slot="/34616581,22653889300/amp.20minutos.es/actualidad/noticia/Right2" data-multi-size="300x250,300x300"
Henneo
Proyecto 20minutos.es
data-multi-size-validation="false"
json='{"targeting":{"m20_page":"articulo","m20_secc":["actualidad"],"m20_tags":["tag-02"],"m20_id":"735","po s":"Right2"}}'
rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID":
3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Right2"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad>
</div>
4.2 amp-sticky-ad (Sticky)
<div id="axds-Sticky" class="container axds"> <amp-sticky-ad layout="nodisplay">
<amp-ad
data-block-on-consent='_till_accepted'
data-npa-on-unknown-consent="true"
data-enable-refresh="30"
width=320
height=100
type="doubleclick"
data-slot="/34616581,22653889300/amp.20minutos.es/actualidad/noticia/Sticky"
json='{"targeting":{"m20_page":"articulo","m20_secc":["actualidad"],"m20_tags":["tag-02"],"m20_id":"735","po s":"Sticky"}}'
rtc-config='{ "urls":
["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Sticky"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </amp-sticky-ad> </div>
4.3 Pixel de pubmatic
<amp-iframe title="User Sync" width=1 height=1 style="display:block; margin-bottom:-1px"
sandbox="allow-same-origin allow-scripts"
frameborder="0"
src="https://ads.pubmatic.com/AdServer/js/pwtSync/load-cookie.html?pubid=161361&profid=6071&bidders=pu bmatic">
<amp-img layout="fill"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
Henneo
Proyecto 20minutos.es
placeholder></amp-img> </amp-iframe>
Henneo
Proyecto 20minutos.es
5. Infinite scroll
La src de este componente ataca a una url de hipatia y esta retorna un json con los datos. Esto se une a un template de amp-mustache.
Entorno de test:
https://assetsha.s3-eu-west-1.amazonaws.com/TESTs/scroll-infinito/amp_next_page_c onfig_local.json?media_id=002&category=actualidad&limit=4&scroll=1
Entorno de pro:
https://d1yhlktme27cdw.cloudfront.net/sitemap-latest-content-amp/get?media_id=00 2&category=actualidad&limit=4&scroll=1
<amp-next-page
src="https://assetsha.s3-eu-west-1.amazonaws.com/TESTs/scroll-infinito/amp_next_page_config_local.json?m edia_id=002&category=actualidad&limit=4&scroll=1">
<div separator class="infinite-scoll-separator"></div>
<div recommendation-box class="infinite-scroll-recommendation-box">
<template type="amp-mustache">
<div class="recommendation-box-content">
{{ #pages.length }}
<h3 class="title">Te recomendamos...</h3>
<ul>
{{ #pages }}
<li class="recommendation-element">
<a href="{{ url }}">
<amp-img src="{{ image }}" class="recommendation-image" layout="responsive" height="9" width="16"></amp-img>
<span class="recommendation-title"> {{ title }} </span>
</a>
</li>
{{ /pages }}
</ul>
{{ /pages.length }}
</div>
</template>
</div>
<div footer next-page-hide>
<footer>
<section class="container">
<p class="footer-copy">
<a href="https://www.henneo.com/" target="_blank" title="Grupo Henneo" class="logo-footer">
<amp-img src="https://amp.20minutos.es/static/images/logo_henneo_gris.svg" width="60" height="42"></amp-img>
</a>
</p>
<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<ul class="footer-list">
<li itemprop="name">
<h4><a itemprop="url" href="https://www.20minutos.es/documento/privacy/">Política de Privacidad</a></h4>
</li>
<li itemprop="name">
<h4><a itemprop="url" href="https://www.20minutos.es/documento/legal/">Aviso Legal</a></h4>
</li>
<li itemprop="name">
Henneo Proyecto 20minutos.es
<h4><a itemprop="url" href="https://www.20minutos.es/documento/cookie/">Política de Cookies</a></h4>
</li>
<li itemprop="name">
<h4><a itemprop="url"
href="https://www.20minutos.es/especial/corporativo/contacto/">Contacto</a></h4> </li>
<li itemprop="name">
<h4><a itemprop="url"
href="https://www.20minutos.es/especial/corporativo/quienes-somos/">Quiénes somos</a></h4> </li>
</ul> </nav>
<div class="social">
<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement"> <ul>
<li itemprop="name" class="facebook">
<a itemprop="url" href="https://www facebook.com/20minutos.es" target="_blank">
<svg class="icon-facebook">
<use
xlink:href="https://amp.20minutos.es/static/images/henneo-icons.svg#icon-facebook"></use> </svg>
</a>
</li>
<li itemprop="name" class="twitter">
<a itemprop="url" href="https://twitter.com/20m" target="_blank">
<svg class="icon-twitter">
<use xlink:href="https://amp.20minutos.es/static/images/henneo-icons.svg#icon-twitter"></use> </svg>
</a>
</li>
<li itemprop="name" class="instagram">
<a itemprop="url" href="https://www.instagram.com/20m/" target="_blank">
<svg class="icon-instagram">
<use
xlink:href="https://amp.20minutos.es/static/images/henneo-icons.svg#icon-instagram"></use> </svg>
</a>
</li>
<li itemprop="name" class="whatsapp">
<a itemprop="url" href="http://ver.20m.es/f0slr" target="_blank">
<svg class="icon-whatsapp">
<use
xlink:href="https://amp.20minutos.es/static/images/henneo-icons.svg#icon-whatsapp"></use> </svg> </a>
</li> </ul> </nav>
</div> </section> </footer> </div> </amp-next-page>
Proyecto 20minutos.es
6. Elementos básicos de article
6.1 Título (title)
<div class="title-container-amp">
<h1 class="title">
Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?" </h1> </div>
6.2 Entradilla (epigraph-module)
<div class="epigraph-container-amp">
<ul class="rel">
<li>
<a
href="https://amp 20minutos local es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledo n-por-que-no-envejece/" >
Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?" </a> </li> </ul> </div>
6.3 Bloque multimedia (multimedia)
Tiene 3 versiones: imagen, video o html
<div class="media-modules-amp">
<div class="image-container">
<amp-anim
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2240 jpg"
alt="Image 2240 description"
width="654"
height="368"
layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
style="--loader-delay-offset: 338ms !important"
><i-amphtml-sizer
slot="i-amphtml-svc" style="padding-top: 56 2691%"
></i-amphtml-sizer
><img decoding="async"
alt="Image 2240 description"
class="i-amphtml-fill-content i-amphtml-replaced-content"
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2240 jpg" i-amphtml-auto-lightbox-visited="" lightbox="i-amphtml-auto-lightbox-1" on="tap:amp-lightbox-galleryactivate" /></amp-anim>
<figcaption class="caption">Image 2240 description</figcaption> <span class="credits">20MINUTOS ES</span> </div> </div>
Henneo
Proyecto 20minutos.es
7. Módulos de article
7.1 Párrafo (paragraph)
<p class="paragraph">Texto del párrafo</p>
7.2 Ladillo (cintillo)
<h2 class="paragraph">Pero, si nos fijamos en las gradas -y en lo que ha retumbado en las redes sociales en las horas posteriores al partido-, el gran protagonista fue, sin dudas, el actor de Oklahoma (LADILLO) </h2>
7.3 Entrevista (composite interview)
Versión escritorio:
<div class="interview" id="m112-111-113">
<p
class="interview-line" id="m117-116-118"
data-mrf-recirculation="Enlaces en párrafos Noticia"
>
<span id="m122-121-123">3 ENTREVISTA</span
><span id="m127-126-128">respuesta entrevista</span> </p> </div>
Versión amp:
No disponible todavía, hay que generarla
7.4 HTML Libre (freehtml)
Varios ejemplos:
<div class="content-module-free-html">
<amp-twitter height="694" width="486" layout="responsive" data-tweetid="1680653246275133445?ref src=twsrc%5Etfw"></amp-twitter> </div>
<div class="content-module-free-html">
<amp-youtube data-videoid="aDiPVU3ChMs" layout="responsive" height="315" width="560"></amp-youtube> </div>
Tiktok?
Instagram?
<div class="content-module-free-html">
HTML LIBRE AQUÍ
</div>
7.5 Imagen destacada (composite captioned image)
<div class="composite-captioned-image m-b-4">
<div class="image-container">
<figure class="image">
<amp-anim
src="https://20minutos.local.es/files/article_amp/uploads/imagenes/2019/10/09/photo_2240.jpg"
alt="Image 2240 description" width="654"
height="368"
layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 56.2691%"
></i-amphtml-sizer>
<img
decoding="async"
alt="Image 2240 description"
class="i-amphtml-fill-content i-amphtml-replaced-content" i-amphtml-auto-lightbox-visited=""
lightbox="i-amphtml-auto-lightbox-0"
on="tap:amp-lightbox-gallery.activate"
src="https://20minutos.local.es/files/article_amp/uploads/imagenes/2019/10/09/photo_2240.jpg" /></amp-anim>
</figure>
<div class="cont-pie">
<figcaption class="caption">Image 2240 description</figcaption>
<span class="credits">20MINUTOS.ES</span>
</div>
</div>
</div>
7.6
Imagen libre (composite captioned inline image)
<div class="image-container">
<amp-anim
src="https://20minutos.local.es/files/article_amp/uploads/imagenes/2019/10/09/photo_2239.jpg" alt="Image 2239 description" width="654" height="368" layout="responsive"></amp-anim>
<figcaption class="caption">6. IMAGEN LIBRE</figcaption>
<span class="credits">20MINUTOS.ES</span>
</div>
7.7 Vídeo (video
captioned)
Nota, si desaparece el dominio amp.20minutos.es es posible que el src del video se tenga que apuntar a https://iframe-amp.20minutos.es
Henneo
Proyecto 20minutos.es
<div class="composite-captioned-video">
<div class="video-container">
<amp-iframe
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
src="https://20minutos local es/videoplayer/69/b/735"
width="345"
height="195"
frameborder="0"
scrolling="no"
allowfullscreen=""
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 56 5217%"
></i-amphtml-sizer>
<amp-img
layout="fill"
src="https://20minutos local es/uploads/imagenes/2019/10/07/photo 9520 jpg"
placeholder=""
class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-built amp-hidden i-amphtml-layout"
i-amphtml-layout="fill"
i-amphtml-auto-lightbox-visited=""
><img
decoding="async"
src="https://20minutos local es/uploads/imagenes/2019/10/07/photo 9520 jpg"
class="i-amphtml-fill-content i-amphtml-replaced-content"
/></amp-img>
<iframe
class="i-amphtml-fill-content"
name="amp iframe1"
allowfullscreen=""
frameborder="0"
scrolling="no"
allow=""
sandbox="allow-scripts allow-same-origin allow-popups"
src="https://20minutos local es/videoplayer/69/b/735#amp=1"
style="z-index: 0"
></iframe
></amp-iframe>
</div>
</div>
Henneo
Proyecto 20minutos.es
7.8 Galería (related gallery)
<div class="related-gallery m-b-4">
<div class="image-container">
<figure>
<a
href="https://amp 20minutos local es/imagenes/internacional/376-gallery-8520-of-internacional/" >
<amp-anim
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/07/photo 11282 jpg"
alt="Image 11282 description"
width="654"
height="368" layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout" i-amphtml-layout="responsive"
><i-amphtml-sizer
slot="i-amphtml-svc" style="padding-top: 56 2691%"
></i-amphtml-sizer>
<img decoding="async"
alt="Image 11282 description"
class="i-amphtml-fill-content i-amphtml-replaced-content"
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/07/photo 11282 jpg" /></amp-anim>
<div class="fas fa-camera-alt icon100-v1"></div ></a>
</figure>
</div>
<a
class="related-link page-item-link"
href="https://amp 20minutos local es/imagenes/internacional/376-gallery-8520-of-internacional/" > Gallery 8520 of Internacional
</a>
</div>
7.9 Frase (composite phrase)
<div class="composite-phrase m-b-4"> <blockquote class="content-title-phrase "> Ut tristique lacinia dignissim Nunc non nibh nec nisl tincidunt pellentesque tristique nec mi </blockquote> </div>
7.10 Noticia destacada (related page)
<article class="media media-integrated">
<div class="see-also-container">
<div class="see-also-image-container">
<figure class="see-also-image">
<amp-img
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2238 jpg"
alt="Image 2238 description"
width="150"
height="84"
layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
i-amphtml-auto-lightbox-visited=""
Henneo
Proyecto 20minutos es
lightbox="i-amphtml-auto-lightbox-3" on="tap:amp-lightbox-galleryactivate"
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 56%"
></i-amphtml-sizer>
<img decoding="async"
alt="Image 2238 description"
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2238 jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"
/></amp-img>
</figure>
</div>
<div class="see-also-header-container">
<span>
<a class="page-item-link"
href="https://amp 20minutos local es/opinion/noticia/94/0/article-2238-of-opinion/" > Article 2238 of Opinión
</a>
</span>
</div>
</div>
</article>
7.11 Minuto a minuto (mam article module)
Notese que se una un nuevo dominio: https://iframe.amp.20minutos.local.es
<amp-iframe
title="Elecciones generales 2023" width="345"
height="200"
class="mam-iframe"
style="height:200px; position:relative"
frameborder="0"
layout="responsive" resizable
sandbox="allow-scripts allow-same-origin allow-forms allow-top-navigation"
src="https://iframe.amp.20minutos.local.es/mam/736/0/elecciones-generales-2023/">
<div class="mam-ver-mas" overflow tabindex="0" role="button" aria-label="Ver más" style="color: red; position: absolute; bottom: 0; width: 100%; text-align: center">Ver más</div>
<amp-img class="mam-placeholder" placeholder layout="responsive" style="background-color: #0b419b"
src="https://amp.20minutos.es/static/images/logo_amp.svg" width="48" height="52"></amp-img> </amp-iframe>
7.12 Encuesta (composite poll article)
<div class="media media-poll">
<header><h1 class="article-title">Encuesta de sabores</h1></header> <form method="get"
action="https://20minutos local es/poll/vote/7" class="poll-form i-amphtml-form" target=" top" novalidate=""
>
<div class="poll-form-group">
<input type="radio" name="options[]" id="19" value="19" /> <label for="19">Limón</label>
Henneo
Proyecto 20minutos es
</div>
<div class="poll-form-group">
<input type="radio" name="options[]" id="20" value="20" />
<label for="20">Naranja</label>
</div>
<div class="poll-form-group">
<input type="radio" name="options[]" id="21" value="21" />
<label for="21">Manzana</label>
</div>
<div class="poll-button" data-href="#">
<input type="submit" value="votar" class="bttn" />
</div>
<div submit-error="">Selecciona una opción</div> </form>
</div>
7.13 Listado (base-lists)
<div class="paragraph"> <ol>
<li>
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto Lorem Ipsum ha sido el texto de relleno estándar de las industrias </li>
<li>
​Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto Lorem Ipsum ha sido el texto de relleno estándar de las industrias </li>
<li>
​Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto Lorem Ipsum ha sido el texto de relleno estándar de las industrias </li>
</ol>
</div>
7.14 Listado en columnas (lists)
<ul class="dotted-list">
<li>Lorem Ipsum es </li>
<li>Lorem Ipsum es</li>
<li>LoLorem Ipsum es</li>
<li>Lorem Ipsum es</li>
</ul>
7.15 Listado con foto (small-list)
<ul class="article-small-list">
<li>
<article class="media">
<a href="https://amp 20minutos local es/opinion/noticia/266/0/article-2240-of-opinion/" > <figure class="image">
Henneo
Proyecto 20minutos es
<amp-img
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2240 jpg"
alt="Image 2240 description"
width="234"
height="132"
layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
i-amphtml-auto-lightbox-visited=""
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 56 4103%"
></i-amphtml-sizer
><img
decoding="async"
alt="Image 2240 description"
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2240 jpg"
class="i-amphtml-fill-content i-amphtml-replaced-content"
i-amphtml-auto-lightbox-visited=""
/></amp-img>
</figure>
</a>
<div class="media-content">
<header>
<h3>
<a href="https://amp 20minutos local es/opinion/noticia/266/0/article-2240-of-opinion/" >Article 2240 of Opinión</a
>
</h3>
</header>
<div class="author">El becario</div> </div>
</article> </li>
</ul>
7.16 Listado con foto grande (big-list)
Versión escritorio:
<ul class="article-big-list" id="m102-101-103">
<li id="m107-106-108">
<article class="media">
<div>
<span class="list-number" id="m121-120-122">1</span>
<div class="author" id="m126-125-127">LISTADO CON FOTO GRANDE 1</div> </div>
<div class="media-content">
<header>
<h1>
<a id="m131-130-132"
href="/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-por-que-no-envejece/" >Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?"</a
> </h1>
</header> </div>
<figure> <a
Henneo
Proyecto 20minutos es
href="/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-por-que-no-envejece/"
>
<img loading="lazy" height="491"
alt="Image 2240 description"
src="/files/gallery desktop default content/uploads/imagenes/2019/10/09/photo 2240 jpg" data-full-src="/uploads/imagenes/2019/10/09/photo 2240 jpg" width="628"
/></a>
</figure>
</article>
</li>
<li id="m157-156-158">
<article class="media">
<div>
<span class="list-number" id="m167-166-168">2</span>
<div class="author" id="m172-171-173">LISTADO CON FOTO GRANDE 2</div>
</div>
<div class="media-content">
<header>
<h1>
<a id="m177-176-178"
href="/opinion/noticia/266/0/article-2240-of-opinion/" >Article 2240 of Opinión</a
> </h1>
</header>
</div>
<figure>
<a href="/opinion/noticia/266/0/article-2240-of-opinion/">
<img loading="lazy" height="491"
alt="Image 2240 description"
src="/files/gallery desktop default content/uploads/imagenes/2019/10/09/photo 2240 jpg" data-full-src="/uploads/imagenes/2019/10/09/photo 2240 jpg" width="628"
/></a>
</figure> </article> </li> </ul>
Versión amp:
No disponible todavía, hay que generarla
7.17 Ficha con foto (composite personal card)
<div class="card card-personal">
<div class="card-content">
<figure>
<amp-img
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2237 jpg" alt="Image 2237 description" layout="responsive" width="100" height="100"
Henneo
Proyecto 20minutos es
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
i-amphtml-auto-lightbox-visited=""
style="--loader-delay-offset: 2ms !important"
lightbox="i-amphtml-auto-lightbox-3"
on="tap:amp-lightbox-galleryactivate"
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 100%"
></i-amphtml-sizer>
<img
decoding="async"
alt="Image 2237 description"
src="https://20minutos local es/files/article amp/uploads/imagenes/2019/10/09/photo 2237 jpg" class="i-amphtml-fill-content i-amphtml-replaced-content" /></amp-img>
</figure>
<div></div>
</div>
</div>
7.18 Ficha (composite business card)
<div class="card card-business">
<div class="card-content">
<div>
<h2>FICHA DE </h2>
</div>
<ul>
<li>
<span>
El Lorem Ipsum fue concebido como un texto de relleno, formateado de una cierta manera para permitir la presentación de elementos gráficos en documentos, </span>
</li>
</ul>
</div>
</div>
7.19 Archivo (file)
<div class="archive-download">
<a class="icon-file"
href="https://20minutos es/uploads/files/2023/07/18/20m console debug txt">
<svg xmlns="http://wwww3 org/2000/svg" viewBox="0 0 384 512" class="icon-document"><path d="M224 0H0V512H384V160H224V0zm32 0V128H384L256 0zM216 232V334 1l31-31 17-17L297 9 320l-17 17-72 72-17 17-17-17-72-72-17-17L120 286 1l17 17 31 31V232 208h48v24z"/></svg> </a>
<span>test</span>
<a class="enlace-archivo"
href="https://20minutos es/uploads/files/2023/07/18/20m console debug txt">Descargar</a> </div>
7.20 Claves directo (direct keys)
Versión escritorio:
Henneo
Proyecto 20minutos es
<div class="direct-keys" id="m475-474-476" data-mrf-recirculation="Claves Directo Noticia" >
<div>
<span class="direct-keys-title" id="m480-479-481">17 CLAVE DIRECTO</span> </div>
<div class="direct-keys-list" id="m485-484-486">xxxx</div> </div>
Versión amp:
No disponible todavía, hay que generarla
7.21 Ficha de película (composite movie card)
<div class="card movie-card">
<div class="movie-card-content">
<div>
<h2>FICHA TÉCNICA</h2> </div>
<figure class="image poster">
<amp-img
src="https://20minutos local es/files/image 250 375/uploads/imagenes/2019/10/09/photo 2236 jpg"
alt="Image 2236 description"
width="250"
height="375"
layout="responsive"
class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
i-amphtml-layout="responsive"
i-amphtml-auto-lightbox-visited=""
><i-amphtml-sizer
slot="i-amphtml-svc"
style="padding-top: 150%" ></i-amphtml-sizer
><img
decoding="async"
alt="Image 2236 description"
src="https://20minutos local es/files/image 250 375/uploads/imagenes/2019/10/09/photo 2236 jpg" class="i-amphtml-fill-content i-amphtml-replaced-content" /></amp-img>
</figure>
<ul class="movie-data">
<li class="movie-data-row">
<p> <b>Director:</b> James Wan </p> </li>
<li class="movie-data-row">
<p> <b>Género:</b> Terror </p> </li>
<li class="movie-data-row">
<p> <b>País:</b> USA </p>
</li>
<li class="movie-data-row">
<p>
Henneo
Proyecto 20minutos es
<b>Sinopsis:</b>
5º enrega de la saga </p>
</li>
<li class="movie-data-row">
<p>LA PUERTA ROJA </p>
</li> </ul> </div> </div>
7.22 Elemento rating (rating)
<div class="rating product r 3-5">
<div class="rate">
<div class="label-rating"> <strong> Valoración: </strong> </div>
<div class="stars">
<svg
7.23 Receta - Información (content recipe information)
<span class="content-recipe-information">
<span class="module-details">
<span class="recipe-col datasheet-col">
<span class="module-recipe-text">
Henneo
Proyecto 20minutos es
<span class="recipe-col difficulty-col">
<span class="module-recipe-label-text"> Dificultad
</span>
<span class="module-recipe-text"> 5/8
</span> </span>
<span class="recipe-col others-col">
<span class="others-row">
<span class="module-recipe-label-text">
122
</span>
<span class="module-recipe-text"> -
</span>
</span>
<span class="others-row">
<span class="module-recipe-label-text">
Raciones
</span>
<span class="module-recipe-text"> 2
</span> </span>
<span class="others-row">
<span class="module-recipe-label-text">
Calorías
</span>
<span class="module-recipe-text"> 120 kcal
</span>
</span> </span> </span> </span>
7.24 Receta - Ingredientes (content recipe ingredients)
<span class="content-recipe-ingredients">
<span class="modules-top">
<h3 class="module-supra-title">Nunc donec accumsan mauris metus</h3>
<h2 class="module-title">
Nam auctor ut in magna ultricies mollis posuere ligula duis imperdiet </h2>
</span>
<span class="module-text-ingredients">
<p class="module-text bold">
Nam auctor ut in magna ultricies mollis posuere ligula duis imperdiet </p>
<p class="module-text">
Nam auctor ut in magna ultricies mollis posuere ligula duis imperdiet </p>
</span> </span>
7.25 Receta - Elaboración (content recipe elaboration)
<span class="content-recipe-elaboration">
<h2 class="module-title">22 RECETA ELABORACION</h2>
<p class="module-text">Texto 1</p>
<p class="module-text">Texto 2</p>
Henneo
Proyecto 20minutos es
</span>
7.26 Juego qualifio (qualifio-game)
Versión escritorio:
En la versión anterior, no se visualizaba
Versión amp:
No disponible todavía (estamos estudiando cómo implementarlo, posiblemente sea un html)
7.27 Ficha de producto (composite product card)
Versión escritorio:
NUNCA SE HA VISUALIZADO DESDE EL FRONT, SOLO ES PARA DATOS ESTRUCTURADOS
Se utiliza para generar el ld+json de Product
8. Widgets
8.1 Bloque de Hipatia
<div class="module module-prometeo" next-page-hide >
<amp-iframe width=100 height=120
sandbox="allow-top-navigation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" resizable class="pub-amp"
src="https://d2fu3fnr6zw5wa.cloudfront.net/widgets?mid=002&source=amp&sec=actualidad&sub=&widgetId=d sZ7nUSQIgtpFWYNzTB8">
<div overflow tabindex=0 role=button aria-label="Prometeo">loading...</div>
</amp-iframe> </div>
8.2 Bloque de Taboola
<amp-embed width=100 height=100 type=taboola
layout=responsive
data-publisher='henneonetwork-20minutos' data-mode='thumbs-ma-01'
data-placement='Mid Article Thumbnails AMP' data-target_type='mix' data-article='auto' data-url=''>
</amp-embed>
<amp-embed width=100 height=100 type=taboola
layout=responsive
data-publisher='henneonetwork-20minutos' data-mode='thumbnails-a-amp'
data-placement='Below Article Thumbnails AMP'
data-target_type='mix' data-article='auto' data-url=''>
</amp-embed>
9.
9.1 Menús
<amp-sidebar id="sidebar" layout="nodisplay" side="left" class="sections-menu">
<span class="hamburger-menu-icon hamburger-icon-close" tabindex="0" on="tap:sidebar.close" role="button"></span>
<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<ul class="sub-menu menu-first">
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/internacional/" itemprop="url"><span itemprop="name">Internacional</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/deportes/" itemprop="url"><span itemprop="name">Deportes</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/cultura/" itemprop="url"><span itemprop="name">Cultura</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/opinion/" itemprop="url"><span itemprop="name">Opinión</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/gente/" itemprop="url"><span itemprop="name">Gente</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/tv/" itemprop="url"><span itemprop="name">TV</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/edicion_impresa/" itemprop="url"><span itemprop="name">Ed. Impresa</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://amp.20minutos.es/mas" itemprop="url"><span itemprop="name">Más</span></a></li>
</ul>
</nav>
<nav itemscope itemtype="http://www.schema.org/SiteNavigationElement"> <ul class="sub-menu menu-first">
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/" itemprop="url"><span itemprop="name">Portada</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/nacional/" itemprop="url"><span itemprop="name">Nacional</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/internacional/" itemprop="url"><span itemprop="name">Internacional</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/deportes/" itemprop="url"><span itemprop="name">Deportes</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/cultura/" itemprop="url"><span itemprop="name">Cultura</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/opinion/" itemprop="url"><span itemprop="name">Opinión</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/gente/" itemprop="url"><span itemprop="name">Gente</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/television/" itemprop="url"><span itemprop="name">TV</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/economia/" itemprop="url"><span itemprop="name">Economía</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/andalucia" itemprop="url"><span itemprop="name">Andalucía</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/cataluna/" itemprop="url"><span itemprop="name">Cataluña</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/madrid/" itemprop="url"><span itemprop="name">Madrid</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/valencia/" itemprop="url"><span itemprop="name">Valencia</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://amp.20minutos.es/tu ciudad" itemprop="url"><span itemprop="name">Tu Ciudad</span></a></li>
Henneo
Proyecto 20minutos es
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/tecnologia/" itemprop="url"><span itemprop="name">Tecnología</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/motor/" itemprop="url"><span itemprop="name">Motor</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/horoscopo/" itemprop="url"><span itemprop="name">Horóscopo</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://www.20minutos.es/loterias/" itemprop="url"><span itemprop="name">Loterías</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://amp.20minutos.es/mas-secciones" itemprop="url"><span itemprop="name">Más Secciones</span></a></li>
<li itemprop="name"><a itemprop="url" href="https://amp.20minutos.es/servicios" itemprop="url"><span itemprop="name">Servicios</span></a></li>
</ul>
</nav>
</amp-sidebar>
9.2 Share
<div class="share-options">
<amp-social-share type="facebook" width="40" height="40" data-param-app_id="217041948309757" data-param-href="https://www.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos -en-wimbledon-por-que-no-envejece/?utm_source=facebook.com&utm_medium=socialshare&utm_ca mpaign=mobile_amp" data-param-quote="Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?"
https://www.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-po r-que-no-envejece/?utm_source=facebook.com&utm_medium=socialshare&utm_campaign=mobile_a mp"></amp-social-share>
<amp-social-share type="twitter" width="40" height="40"
data-param-url="https://www.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anosen-wimbledon-por-que-no-envejece/?utm_source=twitter.com&utm_medium=socialshare&utm_camp aign=mobile_amp" data-param-text="Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?" via @20m"></amp-social-share>
<amp-social-share type="whatsapp" width="40" height="40" data-param-text="Las imágenes virales de Brad Pitt a sus casi 60 años en Wimbledon: "¿Por qué no envejece?"
https://www.20minutos.es/noticia/735/0/las-imagenes-virales-de-brad-pitt-a-sus-casi-60-anos-en-wimbledon-po r-que-no-envejece/?utm_source=whatsapp.com&utm_medium=socialshare&utm_campaign=mobile_a mp"></amp-social-share>
</div>
10. Módulos en opinión 11. Módulos en galería
Ahora ya no se usa amp-carousel
Henneo Proyecto 20minutos es
Henneo
Proyecto 20minutos es 12. Verticales
A fecha de hoy, estos son los verticales disponibles
● Cinemanía
● Motor
● Tecnología
● Salud
● Viajes
● Gastronomía
● Mujer
● 20decompras
Con respecto a 20minutos, para cada uno de ellos se han personalizado:
● Publicidad (sólo para cinemanía)
● Estilos
● Header/Logo
● Menú
Henneo
Proyecto 20minutos es
12.1 Esquema en cinemanía
<!doctype html>
<html ⚡ lang="es">
<head>
</head>
<body class="" >
<amp-analytics type="googleanalytics" id="analyticsArticleEvent"></amp-analytics>
<amp-analytics type="googleanalytics" id="analyticsArticleCinemaniaEvent"></amp-analytics>
<amp-analytics type="comscore"></amp-analytics>
<amp-analytics type="chartbeat"></amp-analytics>
<amp-analytics>{PROMETEO}</amp-analytics>
<amp-sidebar id="sidebar" layout="nodisplay" side="left" class="sections-menu"></amp-sidebar>
<div id="main-container" class="main-container">
<amp-iframe title="User Sync"
src="https://ads.pubmatic.com/AdServer/js/pwtSync/load-cookie.html?pubid=161361&profid=6071&bidders=pu bmatic"></amp-iframe>
<header class="header header-scroll-section" next-page-replace="header" >
<div class="menu"><button id="toggle-hamburguer-menu" class="fas fa-bars" tabindex="1" on="tap:AMP.setState({visible: !visible}), sidebar toggle"></button></div>
<section class="header-top"></section>
<div class="logo"></div>
</header>
<main class="page-content">
<article class="article default" data-history-state="0" data-scroll-url="cinemania/noti-de-cinemania-740/" data-title="Noti de cinemania" id="article-740">
<div class="top-content-amp">
<div class="title-container-amp"></div>
</div>
<div class="main-media-container-amp">
</div>
<div class="article-content">
<div class="content-media-container-amp">
<div class="content-media-amp">
<div class="article-info-container-amp">
</div>
<div class="media-modules-amp">
</div>
</div>
</div>
<div id="axds-Top" class="container axds"></div>
<div class="content-modules-amp">
<p class="paragraph"></p>
<div id="axds-Right1" class="container axds"></div>
<p class="paragraph"></p>
<amp-embed type=taboola data-publisher='henneonetwork-20minutos' data-mode='thumbs-ma-01' data-placement='Mid Article Thumbnails AMP'></amp-embed>
<p class="paragraph"></p>
<p class="paragraph"></p>
<div id="axds-Right2" class="container axds">
</div>
<p class="paragraph"></p>
<p class="paragraph"></p>
</div>
<div class="article-bottom-content">
<div class="trustproject_logo"></div>
Henneo
Proyecto 20minutos es
<div class="module">
<amp-embed type=taboola data-publisher='henneonetwork-20minutos' data-mode='thumbnails-a-amp' data-placement='Below Article Thumbnails AMP'></amp-embed>
</div>
<div class="article-bottom-box related-tags"></div>
<div>
<a id="comments" class="bttn"
href="https://20minutos.local.es/cinemania/noti-de-cinemania-740/#show-comments"> <span>Comentar</span>
</a>
</div>
<div class="module module-prometeo" next-page-hide >
<amp-iframe
src="https://d2fu3fnr6zw5wa.cloudfront.net/widgets?mid=002&source=amp&sec=cinemania&sub=&widgetId=d sZ7nUSQIgtpFWYNzTB8"></amp-iframe>
</div>
<div class="module module-coupons container-modules" next-page-hide></div>
</div>
</div>
</article>
</main>
<div next-page-hide >
<div id="axds-Sticky" class="container axds">
</div>
</div>
<div next-page-hide >
<amp-consent id="didomi" layout="nodisplay" type="didomi"></amp-consent>
</div>
</div>
<amp-next-page
src="https://assetsha.s3-eu-west-1.amazonaws.com/TESTs/scroll-infinito/amp_next_page_config_local.json?med ia_id=002&category=cinemania&limit=4&scroll=1">
</amp-next-page>
</body> </html>
Henneo
Proyecto 20minutos es
12.2 Publicidad en cinemanía
Las posiciones de publicidad de cinemanía son distintas a las de 20m. En particular cambia el id de algunos de estos elementos. Marcamos en azul los cambios:
<div id="axds-Top" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true"
width=320
height=100
type="doubleclick"
data-slot="/34616581,22653889300/amp.cinemania.es/series/noticia/top" data-multi-size="320x50" data-multi-size-validation="false"
json='{"targeting":{"cm_pag":"articulo","cm_secc":["cinemania","series"],"cm_tags":["tag-cinemania-01","tag-ci nemania-03","tag-cinemania-05"],"cm_id":"695","pos":"Top"}}' rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Top"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </div>
<div id="axds-Right1" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true"
width=300
height=600 type="doubleclick"
data-slot="/34616581,22653889300/amp.cinemania.es/series/noticia/right1" data-multi-size="300x250,300x300" data-multi-size-validation="false"
json='{"targeting":{"cm_pag":"articulo","cm_secc":["cinemania","series"],"cm_tags":["tag-cinemania-01","tag-ci nemania-03","tag-cinemania-05"],"cm_id":"695","pos":"Right1"}}' rtc-config='{ "urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Right1"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </div>
<div id="axds-Right2" class="container axds"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true" width=300 height=600 type="doubleclick"
data-slot="/34616581,22653889300/amp.cinemania.es/series/noticia/right2" data-multi-size="300x250,300x300" data-multi-size-validation="false"
Henneo
Proyecto 20minutos es
json='{"targeting":{"cm_pag":"articulo","cm_secc":["cinemania","series"],"cm_tags":["tag-cinemania-01","tag-ci nemania-03","tag-cinemania-05"],"cm_id":"695","pos":"Right2"}}' rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Right2"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad>
</div>
<div id="axds-Sticky" class="container axds"> <amp-sticky-ad layout="nodisplay"> <amp-ad
data-block-on-consent='_till_accepted' data-npa-on-unknown-consent="true" data-enable-refresh="30"
width=320
height=100
type="doubleclick"
data-slot="/34616581,22653889300/amp.cinemania.es/series/noticia/sticky"
json='{"targeting":{"cm_pag":"articulo","cm_secc":["cinemania","series"],"cm_tags":["tag-cinemania-01","tag-ci nemania-03","tag-cinemania-05"],"cm_id":"695","pos":"Sticky"}}' rtc-config='{
"urls": ["https://cmanager-prometeo.appspot.com/v1/amp/pub/rtc/002?clientId=CLIENT_ID(_prometeo)"], "vendors": {"criteo": {"NETWORK_ID": 3340,"LINE_ITEM_RANGES":"0..10:0.01;10..25:0.05;25..50:0.10;50..100:0.25","PUBLISHER_SUB_ID": "20m_es_amp_Sticky"},"aps": {"PUB_ID": "3661","PARAMS":{"amp":"1"}},"openwrap": {"PROFILE_ID": "6071","PUB_ID": "161361"}}, "timeoutMillis": 999 }'></amp-ad> </amp-sticky-ad> </div>
Henneo
Proyecto 20minutos es 12.3 Estilos
El código de los estilos serán creados en sass (scss) por lo que el sistema los compilará dando como resultado un css que después deberá ser minimizado dentro de la etiqueta <style amp-custom>
Con respecto a los verticales, existirán dos hojas de estilos sass nuevas que machacaran el resultado de la sass general dentro del <style amp-custom>. Estas hojas sobreescribiran los estilos de 20minutos con los generales de verticales y además con los propios de cada vertical.
<style amp-custom>
[estilos de 20m]
[NEW estilos generales verticales]
[NEW estilo vertical] </style>
Para evitar cargar estilos innecesarios, se han segmentado por plantilla y site en la carpeta scss_src
En la carpeta scss se encuentran ya importados los estilos necesarios para cada caso. Estos serán los archivos a compilar y minificar para su uso en la plantilla (style amp-custom)
Henneo
Proyecto 20minutos es 12.4
Header/Logotipo
Existe un fichero en /header/[SLUG-VERTICAL].html.twig para cada vertical. Este es el código que se usa para imprimir el logo para el caso de gastronomía.
Y este es el resultado:
<header class="header header-scroll-section" next-page-replace="header" >
<div class="menu"><button id="toggle-hamburguer-menu" class="fas fa-bars" tabindex="1" on="tap:AMP.setState({visible: !visible}), sidebar toggle"></button></div>
<section class="header-top">
<div class="logo-top">
<a href="https://www.20minutos.es">
<amp-img src=/static/images/logo-horizontal-20m.svg width="30" height="30"></amp-img>
</a>
</div>
</section>
<div class="logo">
<a href="https://www.20minutos.es/cinemania">
<amp-img src="https://amp.20minutos.local.es/static/images/LOGO-CINEMANIA.svg" width="175" height="54"></amp-img>
</a>
</div> </header>
Henneo
Proyecto 20minutos es 12.5 Menú
Se ha creado un menú para cada vertical. Pero en caso de no existir cogerá el de genérico default-hamburguer-amp.
Ejemplo para cinemania:
cinemania (versión desktop) cinemania-amp
{% block amp_sidebar %}
<amp-sidebar id="sidebar" layout="nodisplay" side="left" class="sections-menu">
<span class="hamburger-menu-icon hamburger-icon-close" tabindex="0" on="tap:sidebar.close" role="button"></span>
{% block topics_menu %}
{{ parent() }}
{% endblock %}
{{ vertical.menu(page.category|default(''), vertical|default('')) }}
</amp-sidebar>
{% endblock %}
Dónde
{% block topics_menu %}
{{ menu_macros.menu_topics(page.rootCategory|default('')) }} {% endblock %}
Y .
{% macro menu(category, vertical) %}
{% if category is defined and category != '' and vertical is same as(true) and _context['menu_'~ category.slug|split('/')[0]] is defined %}
{{ render(path('hml_amp_render_menu', { 'slug': _context['menu_'~ category.slug|split('/')[0]]})) }}
{% else %}
{{ render(path('hml_amp_render_menu', { 'slug': 'default-hamburguer-amp'})) }}
{% endif %}
{% endmacro %}
{% macro menu_topics(rootCategory) %}
{% if rootCategory is defined and rootCategory is not empty and rootCategory vertical is same as(true) %}
{% set topics_html = render(path('hml_amp_render_menu', { 'slug': 'topics-' ~ rootCategory.slug|replace({'/':'-'})})) %}
{% endif %}
{% if topics_html is not defined or topics_html is empty %}
{% set topics_html = render(path('hml_amp_render_menu', { 'slug': 'default-topics'})) %}
{% endif %}
{{ topics_html|raw }}
{% endmacro %}