Primero, la plantilla:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!doctype html><html amp lang="es"> <head> <meta charset="utf-8"> <title>Juan Pablo Fuentes</title> <link rel="canonical" href="index.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> </body></html> |
Comprobamos que valida añadiendo ‘#development=1’ al final de la url. Debería salir por consola lo siguiente:
1 | AMP validation successful. |
Vamos a añadir antes del amp-boilerplate los metadatos:
1 2 3 4 5 6 7 8 9 10 11 | <script type="application/ld+json"> { "@type": "WebSite", "headline": "Juan Pablo Fuentes WebSite", "datePublished": "2018-06-13T12:02:41Z", "image": [ "img/photo.jpg" ] } </script> |
El índice va a consistir en tres imágenes una al lado de otra que nos enlazarán con tres secciones. Para ello añadimos el html:
1 2 3 4 5 6 7 8 9 | <h1>Juan Pablo Fuentes</h1> <div id="contenido"> <div> <a href="#"><amp-img src="img/programador.jpg" alt="Programador" height="512" width="512" layout="responsive" ></amp-img><p>Programador</p></a></div> <div> <a href="#"><amp-img src="img/profesor.jpg" alt="Profesor" height="512" width="512"layout="responsive" ></amp-img><p>Profesor</p></a></div> <div> <a href="#"><amp-img src="img/narrador.jpg" alt="Narrador" height="512" width="512" layout="responsive"></amp-img><p>Narrador</p></a></div> </div> |
Ponemos el css que controlará el comportamiento. En este caso la página canónica y la amp son la misma, así que usamos mediaqueries para controlar posición y tamaño:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <style amp-custom> /* Cualquier estilo personalizado va aquí */ body { background: linear-gradient(to right, #00B4DB, #B3E4EB); font-family: Verdana; } #contenido{ display:flex; align-items: center; height: 70vh; } #contenido div{ margin:50px; flex-grow: 1; box-shadow: 5px 5px 15px #BBBBBB; background-color: white; border:1px solid #BBBBBB; } #contenido div p{ text-align: center; } a{text-decoration: none; color:#444444;} a:hover{ font-weight: bold; } h1{ text-align: center; color:#444444; } @media screen and (max-width: 600px) { #contenido { flex-direction: column; } #contenido div{ width:70%; } } </style> |
