Categoría: AMP
Página AMP compleja (1)
Empezamos con la plantilla:
<!doctype html>
<html ⚡ lang="es">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Juan Pablo Fuentes - Programador</title>
<link rel="canonical" href="hola-mundo.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>
<h1>Juan Pablo Fuentes - Programador</h1>
</body>
</html>
Añado un google font:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style amp-custom="">
body{
font-family: 'Montserrat', sans-serif;
}
</style>
La página va a disponer de las siguientes secciones. Cada título nos enlaza al artículo que nos permite crearlo:
Cabecera
Un título y una barra lateral que nos enlaza con las secciones
Foto de entrada
Una imagen con un texto que sirve de instroducción
Datos personales
Sección para poner la foto y los datos personales de la biografía.
Experiencia
Nuestros trabajos
Habilidades
Nuestro nivel en diferenets lenguajes de programación
Portfolio
Se explica solo
Educación
Cursos que tenemos
Referencias
Contacto
Voy a utilizar la siguiente librería CSS, se parece al bootstrap pero es más lite. La tendremos que incluir tal cual en la página:
http://github.com/basscss/bassplate
Queda así:
<!doctype html>
<html ⚡ lang="es">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Juan Pablo Fuentes - Programador</title>
<link rel="canonical" href="programador.html">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom="">
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,aside,footer,header,nav,section {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
.h1b {
font-size: 1.8em;
margin: .4em 0;
color:#3B5998;
}
.white{
background-color: white;
}
.grey{
background-color: #EEEEEE;
}
figcaption,figure,main {
display: block
}
figure {
margin: 1em 40px
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace,monospace;
font-size: 1em
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
color:white;
}
a:active,a:hover {
outline-width: 0
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted
}
b,strong {
font-weight: inherit;
font-weight: bolder
}
code,kbd,samp {
font-family: monospace,monospace;
font-size: 1em
}
dfn {
font-style: italic
}
mark {
background-color: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
audio,video {
display: inline-block
}
audio:not([controls]) {
display: none;
height: 0
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
button,input,optgroup,select,textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,input {
overflow: visible
}
button,select {
text-transform: none
}
[type=reset],[type=submit],button,html [type=button] {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
display: inline-block;
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],[type=radio] {
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details,menu {
display: block
}
summary {
display: list-item
}
canvas {
display: inline-block
}
[hidden],template {
display: none
}
.h1 {
font-size: 2.25rem;
color:#3B5998;
}
.h2 {
font-size: 1.25rem
}
.h3 {
font-size: .6875rem
}
.h4,.h5 {
font-size: .875rem
}
.h6 {
font-size: .75rem
}
.font-family-inherit {
font-family: inherit
}
.font-size-inherit {
font-size: inherit
}
.text-decoration-none {
text-decoration: none
}
.bold {
font-weight: 700
}
.regular {
font-weight: 400
}
.italic {
font-style: italic
}
.caps {
text-transform: uppercase;
letter-spacing: .2em
}
.left-align {
text-align: left
}
.center {
text-align: center
}
.right-align {
text-align: right
}
.justify {
text-align: justify
}
.nowrap {
white-space: nowrap
}
.break-word {
word-wrap: break-word
}
.line-height-1 {
line-height: 1rem
}
.line-height-2 {
line-height: 1.42857
}
.line-height-3 {
line-height: 2.0625
}
.line-height-4 {
line-height: 1.81818
}
.list-style-none {
list-style: none
}
.underline {
text-decoration: underline
}
.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.list-reset {
list-style: none;
padding-left: 0
}
.inline {
display: inline
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.table {
display: table
}
.table-cell {
display: table-cell
}
.overflow-hidden {
overflow: hidden
}
.overflow-scroll {
overflow: scroll
}
.overflow-auto {
overflow: auto
}
.clearfix:after,.clearfix:before {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.left {
float: left
}
.right {
float: right
}
.fit {
max-width: 100%
}
.max-width-1 {
max-width: 24rem
}
.max-width-2 {
max-width: 32rem
}
.max-width-3 {
max-width: 48rem
}
.max-width-4 {
max-width: 64rem
}
.border-box {
box-sizing: border-box
}
.align-baseline {
vertical-align: baseline
}
.align-top {
vertical-align: top
}
.align-middle {
vertical-align: middle
}
.align-bottom {
vertical-align: bottom
}
.m0 {
margin: 0
}
.mt0 {
margin-top: 0
}
.mr0 {
margin-right: 0
}
.mb0 {
margin-bottom: 0
}
.ml0,.mx0 {
margin-left: 0
}
.mx0 {
margin-right: 0
}
.my0 {
margin-top: 0;
margin-bottom: 0
}
.m1 {
margin: .5rem
}
.mt1 {
margin-top: .5rem
}
.mr1 {
margin-right: .5rem
}
.mb1 {
margin-bottom: .5rem
}
.ml1,.mx1 {
margin-left: .5rem
}
.mx1 {
margin-right: .5rem
}
.my1 {
margin-top: .5rem;
margin-bottom: .5rem
}
.m2 {
margin: 1rem
}
.mt2 {
margin-top: 1rem
}
.mr2 {
margin-right: 1rem
}
.mb2 {
margin-bottom: 1rem
}
.ml2,.mx2 {
margin-left: 1rem
}
.mx2 {
margin-right: 1rem
}
.my2 {
margin-top: 1rem;
margin-bottom: 1rem
}
.m3 {
margin: 1.5rem
}
.mt3 {
margin-top: 1.5rem
}
.mr3 {
margin-right: 1.5rem
}
.mb3 {
margin-bottom: 1.5rem
}
.ml3,.mx3 {
margin-left: 1.5rem
}
.mx3 {
margin-right: 1.5rem
}
.my3 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.m4 {
margin: 2rem
}
.mt4 {
margin-top: 2rem
}
.mr4 {
margin-right: 2rem
}
.mb4 {
margin-bottom: 2rem
}
.ml4,.mx4 {
margin-left: 2rem
}
.mx4 {
margin-right: 2rem
}
.my4 {
margin-top: 2rem;
margin-bottom: 2rem
}
.mxn1 {
margin-left: -.5rem;
margin-right: -.5rem
}
.mxn2 {
margin-left: -1rem;
margin-right: -1rem
}
.mxn3 {
margin-left: -1.5rem;
margin-right: -1.5rem
}
.mxn4 {
margin-left: -2rem;
margin-right: -2rem
}
.ml-auto {
margin-left: auto
}
.mr-auto,.mx-auto {
margin-right: auto
}
.mx-auto {
margin-left: auto
}
.p0 {
padding: 0
}
.pt0 {
padding-top: 0
}
.pr0 {
padding-right: 0
}
.pb0 {
padding-bottom: 0
}
.pl0,.px0 {
padding-left: 0
}
.px0 {
padding-right: 0
}
.py0 {
padding-top: 0;
padding-bottom: 0
}
.p1 {
padding: .5rem
}
.pt1 {
padding-top: .5rem
}
.pr1 {
padding-right: .5rem
}
.pb1 {
padding-bottom: .5rem
}
.pl1 {
padding-left: .5rem
}
.py1 {
padding-top: .5rem;
padding-bottom: .5rem
}
.px1 {
padding-left: .5rem;
padding-right: .5rem
}
.p2 {
padding: 1rem
}
.pt2 {
padding-top: 1rem
}
.pr2 {
padding-right: 1rem
}
.pb2 {
padding-bottom: 1rem
}
.pl2 {
padding-left: 1rem
}
.py2 {
padding-top: 1rem;
padding-bottom: 1rem
}
.px2 {
padding-left: 1rem;
padding-right: 1rem
}
.p3 {
padding: 1.5rem
}
.pt3 {
padding-top: 1.5rem
}
.pr3 {
padding-right: 1.5rem
}
.pb3 {
padding-bottom: 1.5rem
}
.pl3 {
padding-left: 1.5rem
}
.py3 {
padding-top: 1.5rem;
padding-bottom: 1.5rem
}
.px3 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.p4 {
padding: 2rem
}
.pt4 {
padding-top: 2rem
}
.pr4 {
padding-right: 2rem
}
.pb4 {
padding-bottom: 2rem
}
.pl4 {
padding-left: 2rem
}
.py4 {
padding-top: 2rem;
padding-bottom: 2rem
}
.px4 {
padding-left: 2rem;
padding-right: 2rem
}
.col {
float: left
}
.col,.col-right {
box-sizing: border-box
}
.col-right {
float: right
}
.col-1 {
width: 8.33333%
}
.col-2 {
width: 16.66667%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.33333%
}
.col-5 {
width: 41.66667%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.33333%
}
.col-8 {
width: 66.66667%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.33333%
}
.col-11 {
width: 91.66667%
}
.col-12 {
width: 100%
}
@media (min-width:40.06rem) {
.sm-col {
float: left;
box-sizing: border-box
}
.sm-col-right {
float: right;
box-sizing: border-box
}
.sm-col-1 {
width: 8.33333%
}
.sm-col-2 {
width: 16.66667%
}
.sm-col-3 {
width: 25%
}
.sm-col-4 {
width: 33.33333%
}
.sm-col-5 {
width: 41.66667%
}
.sm-col-6 {
width: 50%
}
.sm-col-7 {
width: 58.33333%
}
.sm-col-8 {
width: 66.66667%
}
.sm-col-9 {
width: 75%
}
.sm-col-10 {
width: 83.33333%
}
.sm-col-11 {
width: 91.66667%
}
.sm-col-12 {
width: 100%
}
}
@media (min-width:52.06rem) {
.md-col {
float: left;
box-sizing: border-box
}
.md-col-right {
float: right;
box-sizing: border-box
}
.md-col-1 {
width: 8.33333%
}
.md-col-2 {
width: 16.66667%
}
.md-col-3 {
width: 25%
}
.md-col-4 {
width: 33.33333%
}
.md-col-5 {
width: 41.66667%
}
.md-col-6 {
width: 50%
}
.md-col-7 {
width: 58.33333%
}
.md-col-8 {
width: 66.66667%
}
.md-col-9 {
width: 75%
}
.md-col-10 {
width: 83.33333%
}
.md-col-11 {
width: 91.66667%
}
.md-col-12 {
width: 100%
}
}
@media (min-width:64.06rem) {
.lg-col {
float: left;
box-sizing: border-box
}
.lg-col-right {
float: right;
box-sizing: border-box
}
.lg-col-1 {
width: 8.33333%
}
.lg-col-2 {
width: 16.66667%
}
.lg-col-3 {
width: 25%
}
.lg-col-4 {
width: 33.33333%
}
.lg-col-5 {
width: 41.66667%
}
.lg-col-6 {
width: 50%
}
.lg-col-7 {
width: 58.33333%
}
.lg-col-8 {
width: 66.66667%
}
.lg-col-9 {
width: 75%
}
.lg-col-10 {
width: 83.33333%
}
.lg-col-11 {
width: 91.66667%
}
.lg-col-12 {
width: 100%
}
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
@media (min-width:40.06rem) {
.sm-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media (min-width:52.06rem) {
.md-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
@media (min-width:64.06rem) {
.lg-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
}
.flex-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.flex-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.items-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.items-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.items-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline
}
.items-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch
}
.self-start {
-ms-flex-item-align: start;
align-self: flex-start
}
.self-end {
-ms-flex-item-align: end;
align-self: flex-end
}
.self-center {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center
}
.self-baseline {
-ms-flex-item-align: baseline;
align-self: baseline
}
.self-stretch {
-ms-flex-item-align: stretch;
-ms-grid-row-align: stretch;
align-self: stretch
}
.justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.justify-around {
-ms-flex-pack: distribute;
justify-content: space-around
}
.content-start {
-ms-flex-line-pack: start;
align-content: flex-start
}
.content-end {
-ms-flex-line-pack: end;
align-content: flex-end
}
.content-center {
-ms-flex-line-pack: center;
align-content: center
}
.content-between {
-ms-flex-line-pack: justify;
align-content: space-between
}
.content-around {
-ms-flex-line-pack: distribute;
align-content: space-around
}
.content-stretch {
-ms-flex-line-pack: stretch;
align-content: stretch
}
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0;
min-height: 0
}
.flex-none {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none
}
.order-0 {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0
}
.order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1
}
.order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2
}
.order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3
}
.order-last {
-webkit-box-ordinal-group: 100000;
-ms-flex-order: 99999;
order: 99999
}
.relative {
position: relative
}
.absolute {
position: absolute
}
.fixed {
position: fixed
}
.top-0 {
top: 0
}
.right-0 {
right: 0
}
.bottom-0 {
bottom: 0
}
.left-0 {
left: 0
}
.z1 {
z-index: 1
}
.z2 {
z-index: 2
}
.z3 {
z-index: 3
}
.z4 {
z-index: 4
}
.border {
border-style: solid;
border-width: 1px
}
.border-top {
border-top-style: solid;
border-top-width: 1px
}
.border-right {
border-right-style: solid;
border-right-width: 1px;
border-color:#BBBBBB;
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px
}
.border-left {
border-left-style: solid;
border-left-width: 1px
}
.border-none {
border: 0
}
.rounded {
border-radius: 3px
}
.circle {
border-radius: 50%
}
.rounded-top {
border-radius: 3px 3px 0 0
}
.rounded-right {
border-radius: 0 3px 3px 0
}
.rounded-bottom {
border-radius: 0 0 3px 3px
}
.rounded-left {
border-radius: 3px 0 0 3px
}
.not-rounded {
border-radius: 0
}
.hide {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px)
}
@media (max-width:40rem) {
.xs-hide {
display: none
}
}
@media (min-width:40.06rem) and (max-width:52rem) {
.sm-hide {
display: none
}
}
@media (min-width:52.06rem) and (max-width:64rem) {
.md-hide {
display: none
}
}
@media (min-width:64.06rem) {
.lg-hide {
display: none
}
}
.display-none {
display: none
}
body {
background: #fff;
color: #252525;
font-family: Montserrat,san serif;
min-width: 315px;
overflow-x: hidden;
font-smooth: always;
-webkit-font-smoothing: antialiased
}
.ampstart-image-fullpage-hero {
color: #000
}
.ampstart-fullpage-hero-heading-text,.ampstart-image-fullpage-hero .ampstart-image-credit {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background: #fff;
padding: 0 1rem .2rem
}
.ampstart-image-fullpage-hero>amp-img {
max-height: calc(100vh - 3.5rem)
}
@media (min-width:52.06rem) {
.ampstart-image-fullpage-hero>amp-img {
height: 60vh
}
}
.ampstart-article-summary header,.ampstart-image-fullpage-hero figcaption {
background: #fff;
opacity: .8
}
.ampstart-image-fullpage-hero figcaption {
margin: 1.5rem;
top: auto
}
.ampstart-readmore {
background: none;
display: block;
margin: 0;
padding: 1rem 0 2rem
}
.ampstart-readmore:after {
content: " ";
border: 2px solid #000;
border-width: 0 2px 2px 0;
bottom: 2rem;
display: block;
height: 10px;
left: calc(50% - 5px);
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px
}
.ampstart-image-credit {
font: 700 .7875rem/1.6 arial,sans-serif;
letter-spacing: .6px
}
.ampstart-image-credit br {
display: none
}
.ampstart-fullpage-hero-heading-text,.ampstart-image-fullpage-hero .ampstart-image-credit {
background: none;
padding: 0
}
.ampstart-headerbar{background-color:transparent;color:#000;z-index:999;}.ampstart-headerbar+:not(amp-sidebar),.ampstart-headerbar+amp-sidebar+*{margin-top:3.5rem}.ampstart-headerbar-nav .ampstart-nav-item{padding:0 1rem;background:transparent;opacity:.8}.ampstart-headerbar-nav{line-height:3.5rem}.ampstart-nav-item:active,.ampstart-nav-item:focus,.ampstart-nav-item:hover{opacity:1}.ampstart-navbar-trigger:focus{outline:none}.ampstart-nav a,.ampstart-navbar-trigger,.ampstart-sidebar-faq a{cursor:pointer;text-decoration:none}.ampstart-nav .ampstart-label{color:inherit}.ampstart-navbar-trigger{line-height:3.5rem;font-size:1.25rem}.ampstart-headerbar-nav{-webkit-box-flex:1;-ms-flex:1;flex:1}.ampstart-nav-search{-webkit-box-flex:0.5;-ms-flex-positive:0.5;flex-grow:0.5}.ampstart-headerbar .ampstart-nav-search:active,.ampstart-headerbar .ampstart-nav-search:focus,.ampstart-headerbar .ampstart-nav-search:hover{box-shadow:none}.ampstart-nav-search>input{border:none;border-radius:3px;line-height:normal}.ampstart-nav-dropdown{min-width:200px}.ampstart-nav-dropdown amp-accordion header{background-color:#000;border:none}.ampstart-nav-dropdown amp-accordion ul{background-color:#000}.ampstart-nav-dropdown .ampstart-dropdown-item,.ampstart-nav-dropdown .ampstart-dropdown>section>header{background-color:#000;color:#fff}.ampstart-nav-dropdown .ampstart-dropdown-item{color:#fff}.ampstart-sidebar{background-color:#000;color:#fff;min-width:300px;width:300px}.ampstart-sidebar .ampstart-icon{fill:#fff}.ampstart-sidebar-header{line-height:3.5rem;min-height:3.5rem}.ampstart-sidebar .ampstart-dropdown-item,.ampstart-sidebar .ampstart-dropdown header,.ampstart-sidebar .ampstart-faq-item,.ampstart-sidebar .ampstart-nav-item,.ampstart-sidebar .ampstart-social-follow{margin:0 0 2rem}.ampstart-sidebar .ampstart-nav-dropdown{margin:0}.ampstart-sidebar .ampstart-navbar-trigger{line-height:inherit}.ampstart-navbar-trigger svg{pointer-events:none}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async=""></script>
<script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async=""></script>
<script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async=""></script>
</head>
<body>
<!-- Start Navbar -->
<header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4 ">
<div role="button" aria-label="open sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger pr2 "><span class="white">☰</span>
</div>
</header>
<!-- Start Sidebar -->
<amp-sidebar id="header-sidebar" class="ampstart-sidebar px3 " layout="nodisplay">
<div class="flex justify-start items-center ampstart-sidebar-header">
<div role="button" aria-label="close sidebar" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger items-start">✕</div>
</div>
<ul class="ampstart-sidebar-faq list-reset m0">
<li class="ampstart-faq-item"><a href="#personal" class="text-decoration-none">Datos personales</a></li>
<li class="ampstart-faq-item"><a href="#experiencia" class="text-decoration-none">Experiencia</a></li>
<li class="ampstart-faq-item"><a href="#habilidades" class="text-decoration-none">Conocimientos</a></li>
<li class="ampstart-faq-item"><a href="#portfolio" class="text-decoration-none">Portfolio</a></li>
<li class="ampstart-faq-item"><a href="#educacion" class="text-decoration-none">Educacion</a></li>
</ul>
<ul class="ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4">
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="22.2" viewbox="0 0 53 49"><title>Twitter</title><path d="M45 6.9c-1.6 1-3.3 1.6-5.2 2-1.5-1.6-3.6-2.6-5.9-2.6-4.5 0-8.2 3.7-8.2 8.3 0 .6.1 1.3.2 1.9-6.8-.4-12.8-3.7-16.8-8.7C8.4 9 8 10.5 8 12c0 2.8 1.4 5.4 3.6 6.9-1.3-.1-2.6-.5-3.7-1.1v.1c0 4 2.8 7.4 6.6 8.1-.7.2-1.5.3-2.2.3-.5 0-1 0-1.5-.1 1 3.3 4 5.7 7.6 5.7-2.8 2.2-6.3 3.6-10.2 3.6-.6 0-1.3-.1-1.9-.1 3.6 2.3 7.9 3.7 12.5 3.7 15.1 0 23.3-12.6 23.3-23.6 0-.3 0-.7-.1-1 1.6-1.2 3-2.7 4.1-4.3-1.4.6-3 1.1-4.7 1.3 1.7-1 3-2.7 3.6-4.6" class="ampstart-icon ampstart-icon-twitter"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="23.6" viewbox="0 0 56 55"><title>Facebook</title><path d="M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43" class="ampstart-icon ampstart-icon-fb"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 54 54"><title>instagram</title><path d="M27.2 6.1c-5.1 0-5.8 0-7.8.1s-3.4.4-4.6.9c-1.2.5-2.3 1.1-3.3 2.2-1.1 1-1.7 2.1-2.2 3.3-.5 1.2-.8 2.6-.9 4.6-.1 2-.1 2.7-.1 7.8s0 5.8.1 7.8.4 3.4.9 4.6c.5 1.2 1.1 2.3 2.2 3.3 1 1.1 2.1 1.7 3.3 2.2 1.2.5 2.6.8 4.6.9 2 .1 2.7.1 7.8.1s5.8 0 7.8-.1 3.4-.4 4.6-.9c1.2-.5 2.3-1.1 3.3-2.2 1.1-1 1.7-2.1 2.2-3.3.5-1.2.8-2.6.9-4.6.1-2 .1-2.7.1-7.8s0-5.8-.1-7.8-.4-3.4-.9-4.6c-.5-1.2-1.1-2.3-2.2-3.3-1-1.1-2.1-1.7-3.3-2.2-1.2-.5-2.6-.8-4.6-.9-2-.1-2.7-.1-7.8-.1zm0 3.4c5 0 5.6 0 7.6.1 1.9.1 2.9.4 3.5.7.9.3 1.6.7 2.2 1.4.7.6 1.1 1.3 1.4 2.2.3.6.6 1.6.7 3.5.1 2 .1 2.6.1 7.6s0 5.6-.1 7.6c-.1 1.9-.4 2.9-.7 3.5-.3.9-.7 1.6-1.4 2.2-.7.7-1.3 1.1-2.2 1.4-.6.3-1.7.6-3.5.7-2 .1-2.6.1-7.6.1-5.1 0-5.7 0-7.7-.1-1.8-.1-2.9-.4-3.5-.7-.9-.3-1.5-.7-2.2-1.4-.7-.7-1.1-1.3-1.4-2.2-.3-.6-.6-1.7-.7-3.5 0-2-.1-2.6-.1-7.6 0-5.1.1-5.7.1-7.7.1-1.8.4-2.8.7-3.5.3-.9.7-1.5 1.4-2.2.7-.6 1.3-1.1 2.2-1.4.6-.3 1.6-.6 3.5-.7h7.7zm0 5.8c-5.4 0-9.7 4.3-9.7 9.7 0 5.4 4.3 9.7 9.7 9.7 5.4 0 9.7-4.3 9.7-9.7 0-5.4-4.3-9.7-9.7-9.7zm0 16c-3.5 0-6.3-2.8-6.3-6.3s2.8-6.3 6.3-6.3 6.3 2.8 6.3 6.3-2.8 6.3-6.3 6.3zm12.4-16.4c0 1.3-1.1 2.3-2.3 2.3-1.3 0-2.3-1-2.3-2.3 0-1.2 1-2.3 2.3-2.3 1.2 0 2.3 1.1 2.3 2.3z" class="ampstart-icon ampstart-icon-instagram"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML pin trest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="28.5" viewbox="0 0 43 51"><title>pinterest</title><path d="M8.134 18.748c0-1.6.2-3 .8-4.4.5-1.4 1.2-2.6 2.2-3.6.9-1 2-1.9 3.2-2.6 1.2-.8 2.5-1.3 3.9-1.7 1.5-.4 2.9-.5 4.4-.5 2.2 0 4.3.4 6.2 1.4 1.9.9 3.5 2.3 4.7 4.1 1.2 1.9 1.8 3.9 1.8 6.2 0 1.4-.1 2.7-.4 4-.2 1.3-.7 2.6-1.2 3.8-.6 1.2-1.3 2.3-2.2 3.2-.8.9-1.8 1.7-3.1 2.2-1.2.6-2.5.9-4 .9-1 0-1.9-.3-2.9-.7-.9-.5-1.6-1.1-2-1.9-.1.5-.3 1.4-.6 2.4-.3 1.1-.4 1.7-.5 2-.1.3-.2.9-.4 1.6-.3.7-.4 1.2-.6 1.5-.1.3-.4.7-.7 1.3-.3.6-.6 1.2-1 1.7-.3.5-.7 1.1-1.3 1.8l-.3.1-.2-.2c-.2-2.2-.3-3.6-.3-4 0-1.3.2-2.8.5-4.4.3-1.7.8-3.7 1.4-6.2.6-2.5 1-3.9 1.1-4.4-.5-.9-.7-2.1-.7-3.6 0-1.2.4-2.3 1.1-3.3.8-1.1 1.7-1.6 2.8-1.6.9 0 1.6.3 2.1.9.4.6.7 1.3.7 2.2 0 .9-.3 2.3-1 4.1-.6 1.8-.9 3.1-.9 4 0 .9.3 1.6 1 2.2.6.6 1.4.9 2.3.9.8 0 1.5-.2 2.2-.5.6-.4 1.2-.9 1.6-1.5.5-.6.9-1.3 1.2-2 .4-.8.6-1.5.8-2.4.2-.8.4-1.6.5-2.4.1-.7.1-1.4.1-2.1 0-2.5-.8-4.4-2.3-5.8-1.6-1.4-3.6-2.1-6.1-2.1-2.8 0-5.2 1-7.1 2.8-1.9 1.9-2.9 4.2-2.9 7.1 0 .6.1 1.2.3 1.8.2.6.4 1.1.6 1.4.2.3.4.7.5 1 .2.3.3.5.3.6 0 .4-.1.9-.3 1.6-.2.6-.5 1-.8 1 0 0-.1-.1-.4-.1-.7-.2-1.3-.6-1.9-1.2-.5-.6-1-1.3-1.3-2-.3-.8-.5-1.6-.7-2.4-.2-.7-.2-1.5-.2-2.2z" class="ampstart-icon ampstart-icon-pinterest"></path></svg></a>
</li>
<li>
<a href="#" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML E-mail"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="18.4" viewbox="0 0 56 43"><title>email</title><path d="M10.5 6.4C9.1 6.4 8 7.5 8 8.9v21.3c0 1.3 1.1 2.5 2.5 2.5h34.9c1.4 0 2.5-1.2 2.5-2.5V8.9c0-1.4-1.1-2.5-2.5-2.5H10.5zm2.1 2.5h30.7L27.9 22.3 12.6 8.9zm-2.1 1.4l16.6 14.6c.5.4 1.2.4 1.7 0l16.6-14.6v19.9H10.5V10.3z" class="ampstart-icon ampstart-icon-email"></path></svg></a>
</li>
</ul>
</amp-sidebar>
<!-- End Sidebar -->
<!-- End Navbar -->
<h1 class="center h1">Juan Pablo Fuentes</h1>
<figure class="center ampstart-image-fullpage-hero m0 relative mb4">
<amp-img width="404" height="720" alt="programador" layout="responsive" src="img/code2.jpg" media="(max-width: 415px)"></amp-img>
<amp-img height="720" alt="programador" layout="fixed-height" src="img/code2.jpg" media="(min-width: 416px)"></amp-img>
<figcaption class="absolute top-0 right-0 bottom-0 left-0">
<header class="p3 mb4">
<h1 class="ampstart-fullpage-hero-heading mb3">
<span class="ampstart-fullpage-hero-heading-text">
Analista programador | Full stack developer
</span>
</h1>
<span class="ampstart-image-credit h4">
Más de veinte años de experiencia desarrollando software a medida
</span>
</header>
<footer class="absolute left-0 right-0 bottom-0">
<a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content"><span class="ampstart-readmore-text px1"></span></a>
</footer>
</figcaption>
</figure>
<div id="content">
<section id="personal">
<p class="center h1 grey p2"><amp-img width="143" height="20" alt="sidebar" src="img/lb.png" media="(min-width: 416px)" ></amp-img> Información personal <amp-img width="143" height="20" alt="sidebar" src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
<div class="flex flex-wrap">
<div class="flex-auto px4 col-2" ><amp-img width="450" height="470" alt="programador" layout="responsive" src="img/foto.jpg" ></amp-img> </div>
<div class="flex-auto flex flex-wrap ">
<div class="px4 mx-auto">
<p class="center h1">Datos personales</p>
<div class="mx-auto max-width-1">
<p><b>Nombre:</b> Juan Pablo Fuentes</p>
<p><b>Email</b> incidencias@gmail.com</p>
<p><b>Teléfono:</b> 666 999 666</p>
<p><b>Nacimiento:</b> 13/08/1982</p>
<p><b>Dirección:</b> Rda. Sant Antoni, 46</p>
<p><b>Web:</b> juanpablofuentes.es</p>
</div>
</div>
<div class="px4 mx-auto">
<p class="center h1">Perfil profesional</p>
<div class="mx-auto max-width-1">
<p>Soy un analista programador, responsable del desarrollo de diferentes proyectos empresariales. En el entorno web soy un full-stack developer, siendo capaz de realizar desarrollos tanto en front como en back-end.</p>
</div>
</div>
</div>
</div>
</section>
<section id="experiencia" class="grey pt1">
<p class="center h1"><amp-img width="143" height="20" alt="sidebar" src="img/lb.png" media="(min-width: 416px)" ></amp-img> Experiencia <amp-img width="143" height="20" alt="sidebar" src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto">
<p class="bold center h2">2015 - actualidad</p>
<p class="center h1">Deedu</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Cofundador</p>
<div class="mx-auto">
<p>Cofundador de la empresa y responsable del desarrollo de los productos. A cargo del equipo de programadores encargados de desarrollar todo.</p>
</div>
</div>
</div>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto">
<p class="bold center h2">2010 - 2015</p>
<p class="center h1">Intelisen</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Responsable área técnica</p>
<div class="mx-auto">
<p>Analista programador en los diferentes proyectos desarrollados por Intelisen</p>
</div>
</div>
</div>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto">
<p class="bold center h2">2004 - 2010</p>
<p class="center h1">Apeiron</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Analista programador</p>
<div class="mx-auto">
<p>Analista programador en los diferentes proyectos desarrollados por Intelisen</p>
</div>
</div>
</div>
</section>
<section id="habilidades" class="grey pt1">
<p class="center h1"><amp-img width="143" height="20" alt="sidebar" src="img/lb.png" media="(min-width: 416px)" ></amp-img> Conocimientos <amp-img width="143" height="20" alt="sidebar" src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
<div class="flex-auto flex flex-wrap mb2" >
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">JavaScript</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">HTML</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">PHP</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">CSS</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">C#</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">Java</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">Phonegap</p>
<p class="center h1 bold">90%</p>
</div>
<div class="px4 col-2 mx-auto white m1">
<p class="bold center h2">SQL</p>
<p class="center h1 bold">90%</p>
</div>
</div>
</section>
<section id="portfolio" class="grey pt1">
<p class="center h1"><amp-img width="143" height="20" alt="sidebar" src="img/lb.png" media="(min-width: 416px)" ></amp-img> Portfolio <amp-img width="143" height="20" alt="sidebar" src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
<!-- Start carousel -->
<amp-carousel width="756" height="580" layout="responsive" type="slides" class="mb1">
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="img/code1.jpg" width="756" height="520" alt="Misiles" layout="responsive" class=""></amp-img>
<figcaption class="h5 mt1 px3">
Control de misiles de la nasa.
</figcaption>
</figure>
<!-- End Image with Caption -->
<!-- Start Image with Caption -->
<figure class="ampstart-image-with-caption m0 relative mb4">
<amp-img src="img/code2.jpg" width="756" height="520" alt="New York street" layout="responsive" class=""></amp-img>
<figcaption class="h5 mt1 px3">
Fidelización Spanair
</figcaption>
</figure>
<!-- End Image with Caption -->
</amp-carousel>
<!-- End carousel -->
</section>
<section id="educacion" class="grey pt1">
<p class="center h1"><amp-img width="143" height="20" alt="sidebar" src="img/lb.png" media="(min-width: 416px)" ></amp-img> Educación <amp-img width="143" height="20" alt="sidebar" src="img/rb.png" media="(min-width: 416px)" ></amp-img></p>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto border-right">
<p class="bold center h2">1996</p>
<p class="center h1b">MIT</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Master IA</p>
<div class="mx-auto">
<p>Master en Inteligencia artificial cursado junto a Cifuentes y Casadi</p>
</div>
</div>
</div>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto border-right">
<p class="bold center h2">1993-1994</p>
<p class="center h1b">UAB</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Doctorado ciencia cognitiva</p>
<div class="mx-auto">
<p>Doctorado en ciencia cognitiva y lenguaje</p>
</div>
</div>
</div>
<div class="flex-auto flex flex-wrap white mb2" >
<div class="px4 col-2 mx-auto border-right">
<p class="bold center h2">1986 - 1992</p>
<p class="center h1b">UPV</p>
</div>
<div class="px4 col-8 ">
<p class="bold h1b">Licenciado en informática</p>
<div class="mx-auto">
<p>Licenciatura en informa´tica especialdiad intelgiencia articial</p>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Página AMP (I)
Primero, la plantilla:
<!doctype html>
<html amp lang="es">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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:
AMP validation successful.
Vamos a añadir antes del amp-boilerplate los metadatos:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@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:
<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:
<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>
AMP
Para empezar deberíamos ir a la página oficial:
https://www.ampproject.org/es/
Aquí la plantilla básica:
https://www.ampproject.org/es/docs/getting_started/quickstart
Y aquí una lista de componentes:
Un tutorial interesante:
https://webdesign.tutsplus.com/tutorials/how-to-make-a-basic-amp-page-from-scratch–cms-26158
Plantillas:
Plugin para wordpress: