CINXE.COM
AMP Websites Guides & Tutorials - amp.dev
<!doctype html><html amp lang="es" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="robots" content="noindex,follow"><meta name="description" content="All resources you need to create stunning websites with AMP: Guides, tutorials, reference documentation and examples."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="All resources you need to create stunning websites with AMP: Guides, tutorials, reference documentation and examples."><meta name="twitter:title" content="AMP Websites Guides & Tutorials"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:title" content="AMP Websites Guides & Tutorials"><meta property="og:url" content="https://amp.dev/es/documentation/guides-and-tutorials/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-guide-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads,email"><meta name="page-locale" content="es"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-carousel-0.1.mjs" custom-element="amp-carousel" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" crossorigin="anonymous" custom-element="amp-carousel"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" crossorigin="anonymous" custom-element="amp-youtube"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/es/documentation/guides-and-tutorials/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/guides-and-tutorials/"><title>AMP Websites Guides & Tutorials - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/es/documentation/guides-and-tutorials/ ","name":"amp.dev","headline":"AMP Websites Guides \u0026 Tutorials","description":"All resources you need to create stunning websites with AMP: Guides, tutorials, reference documentation and examples.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-guide-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap-o-translation-hint{position:fixed;z-index:100;width:100%;left:0;bottom:0}@media(max-width:767px){.ap-o-translation-hint{display:none}}.ap-o-translation-hint-wrapper{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;max-width:1440px;margin:0 auto;padding:1em 30px;background-color:#fff;border-top:5px solid #ffdc00;box-shadow:0 -2px 10px 0 rgba(0,0,0,.07)}.ap-o-translation-hint-link{display:inline-block}.-av+.ap-o-translation-hint{bottom:25px}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-tutorial-progress{position:absolute;top:0;left:-4px;height:100%;width:2px;background-color:#e2e5e6}.ap-m-tutorial-progress-finished{background-color:#09a600}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}.ap--video-slider{overflow-x:hidden}@media(min-width:930px){.ap--video-slider{padding:40px 0}}.ap-o-video-slider-text{width:100%}.ap-o-video-slider-carousel amp-youtube{box-shadow:0 15px 30px 0 rgba(0,0,0,.16);margin:30px 0 70px 20px}.ap-o-video-slider-carousel .amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#ebebf0;outline:0}.ap-o-video-slider-carousel .amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}.ap-o-video-slider-carousel .amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}.ap-o-video-slider-carousel .amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}.ap-m-tag{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;text-align:center;display:inline-block;min-width:80px;line-height:30px;padding:0 5px}.ap-m-tag:empty{min-width:26px;padding:4px 0}.ap-m-tag-websites{color:#fff;background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-m-tag-stories{color:#20202a;background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-m-tag-ads{color:#fff;background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-m-tag-email{color:#20202a;background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-m-tag-general{color:#fff;background-color:#005af0}.ap--teaser-highlight-guides{padding:35px 0;grid-column:3/23}.-fk .-rt{position:relative;grid-column:span 12;background-color:#fff;transform:translateZ(0);margin:0;transition:transform .3s ease,box-shadow .3s ease}@media(min-width:1024px){.-fk .-rt{grid-column:span 4;margin:16px 0}}.-fk .-f_{box-shadow:0 15px 30px 0 rgba(0,0,0,.15);padding-top:1px;margin-bottom:20px}@media(min-width:1024px){.-fk .-f_{margin-bottom:0}}.-fk .-f_:hover{transform:translate3d(0,-2px,0);box-shadow:0 25px 60px 0 rgba(0,0,0,.1)}.-fk .-f_:nth-of-type(2){position:relative}.-fk .-fj{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}@media(min-width:1024px){.-fk .-fj{grid-column-gap:30px}}.-fk .-op{position:absolute;right:0;top:0;font-size:0;z-index:1;display:flex;flex-direction:row}.-fk .-op .ap-m-tag{min-width:26px;padding:4px 0}.-fk .-op .ap-m-tag-websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.-fk .-op .ap-m-tag-stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.-fk .-op .ap-m-tag-ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.-fk .-op .ap-m-tag-emails{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.-fk .-fr{display:flex;justify-content:center;align-items:center;height:157px;background-color:#48525c}.-fk .-ov{max-width:108px;fill:#fff}.-fk .-rs{padding:0 20px}.-fk .-rt .guide-tag{display:inline-flex;align-items:center;margin-top:20px;margin-bottom:20px;padding:4px 10px;border-radius:12px;background-color:#ebebf0}.-fk .-rt .guide-tag-icon{fill:#005af0;margin-right:10px}.-fk .-rt .guide-tag-icon-tutorial-nav{display:flex;font-size:medium;box-sizing:initial;justify-content:center;height:14px;width:23px}.-fk .-rt .guide-tag-icon-tutorial-nav svg{height:24px;width:auto}.-fk .-rt .guide-tag-icon-guide{display:flex;font-size:medium;box-sizing:initial;justify-content:center;height:17px;width:15px}.-fk .-rt .guide-tag-text{font-weight:700;font-size:10px}.-fq .-rt{transition:none}.-fq .-f_{box-shadow:none;border:1px solid #e2e5e6}.-fq .-f_:hover{transform:none;box-shadow:none}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap--card-grid{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;margin:0 -30px;padding:40px 30px;background-color:#fff}@media(min-width:600px){.ap--card-grid{flex-direction:row}}@media(min-width:768px){.ap--card-grid{flex-direction:column}}@media(min-width:930px){.ap--card-grid{padding:40px 90px 90px}}@media(min-width:1024px){.ap--card-grid{flex-direction:row}}.ap-o-card-grid-text{width:100%;padding-bottom:10px}.ap-o-card-grid-card{margin:18px 0;position:relative;width:100%;border-bottom:1px solid #e2e5e6}@media(min-width:600px){.ap-o-card-grid-card{max-width:48%}}@media(min-width:768px){.ap-o-card-grid-card{max-width:100%}}@media(min-width:1024px){.ap-o-card-grid-card{max-width:47%}}.ap-o-card-grid-card-icon{position:absolute;top:1.5rem;height:35px;width:35px;fill:#005af0}.ap-o-card-grid-card-headline{font-family:Poppins,system;font-weight:700;padding:10px 0 0 50px}.ap-o-card-grid-card .-n{padding:0 0 10px;width:100%}.ap-o-card-grid-card-tip{margin:0 0 0 5%;border:none}.ap-o-card-grid-card-tip .ap-m-tip{margin:25px 0 0}.ap-o-card-grid-card .ap-a-btn{margin-top:20px}.ap-breadcrumbs,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uo .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}.-fz{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}.-fz .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-fz .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-fz .-uc{grid-column:1/6}}.-fz .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-fz .-tf{padding:0 15px}.-fz .-tf>div,.-fz .-tf section{min-width:0}}@media(min-width:768px){.-fz .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-fz .-tf{padding:0 15px}}.-fz .-t{grid-column:1;position:relative;width:100%;padding-left:30px;padding-right:30px;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05)}@media(min-width:768px){.-fz .-t{grid-column:9/25}}@media(min-width:1024px){.-fz .-t{grid-column:7/25}.-fz .-t p.limit{max-width:70%}}@media(min-width:768px){.-fz .-t{grid-column:8/25}}@media(min-width:1024px){.-fz .-t{grid-column:6/25}}.-fz .-t p.limit{margin-bottom:1.75em}.-fz .-t h1,.-fz .-t h2{margin-bottom:.5em}.-fz .-t .-uo{margin-left:-25px}@media(min-width:768px){.-fz .-t .-uo{margin-left:-30px}}.-fz section.ap--section,.-fz section.ap--video-slider{width:100%}.-fz section.-t{padding:62px 15px;background-color:#fff;box-shadow:0 25px 40px 0 rgba(0,0,0,.05)}@media(min-width:768px){.-fz section.-t{padding:62px}}@media(min-width:930px){.-fz .ap--card-grid{padding:40px 30px 90px}}.-fz .ap-o-video-slider-carousel amp-youtube{box-shadow:0 15px 15px -10px rgba(0,0,0,.3)}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="angle-down-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M0.662 19.607c-0.441-0.412-0.662-0.927-0.662-1.494s0.221-1.082 0.662-1.494c0.883-0.825 2.317-0.825 3.2 0l28.138 26.28 28.138-26.28c0.883-0.825 2.317-0.825 3.2 0s0.883 2.164 0 2.989l-29.738 27.775c-0.883 0.825-2.317 0.825-3.2 0l-29.738-27.775z"/> </symbol><symbol id="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16"><path fill="#005af0" d="M19.5 1.8h-1.4V.5c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1h-5.9c-.7 0-1.4.3-1.8.9C9.6.4 8.9.1 8.2.1H2.3c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v1.3H.5c-.1 0-.2 0-.3.1-.1.1-.1.2-.1.3v10.7c0 .1 0 .2.1.3s.2.1.3.1H5c2.5 0 3.3.7 4.6 2.5.1.1.2.2.4.2s.3-.1.4-.2c1.4-1.8 2.2-2.5 3.7-2.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.2c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.4-.1zM11.8.9h5.5v9.8h-5c-.7 0-1.3.3-1.8.8V2.2c0-.7.6-1.3 1.3-1.3zM2.7.9h5.5c.8 0 1.4.6 1.4 1.3v9.3c-.5-.5-1.1-.9-1.8-.9h-5V.9zm16.4 11.5h-5c-1.9 0-2.9.9-4.1 2.4-1.2-1.5-2.3-2.4-5-2.4H.9V2.6h.9V11c0 .1 0 .2.1.3s.2.1.3.1h5.5c.7 0 1.5.8 1.9 1.5.1.2.2.2.4.2h.1c.1 0 .2-.1.3-.2.4-.7 1.1-1.5 1.9-1.5h5.5c.1 0 .2 0 .3-.1s.1-.2.1-.3V2.6h.9v9.8zm-5.6-8.5c-.3 0-.5-.2-.5-.4s.2-.4.5-.4.5.2.5.4c-.1.2-.3.4-.5.4zm0 4.7c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V5.5c0-.2.2-.4.5-.4s.5.2.5.4v2.7c0 .1 0 .2-.1.3s-.4.1-.5.1zm-9-3.7c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5zm0 2c-.3 0-.5-.2-.5-.4s.2-.4.5-.4h3.2c.3 0 .5.2.5.4s-.2.4-.5.4H4.5z"/></symbol><symbol id="tutorial-nav" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M22.8,32.2c1.5-1.7,3.3-2.7,5.3-2.7c6.2,0,10.5,0,12.9,0L41,2.3l-14.5,0c-1.8,0-3.7,1.9-3.7,3.8l0,0 C22.8,6.2,22.8,32.2,22.8,32.2z M20.5,32.4V6.3c0,0,0-0.1,0-0.1c0-1.9-1.9-3.8-3.7-3.8H2.3v27.1c2.4,0,6.7,0,12.9,0 C17.2,29.5,19,30.6,20.5,32.4z M16.8,0c1.9,0,3.7,1.1,4.8,2.7c1.1-1.6,3-2.7,4.8-2.7l15.2,0c0.9,0,1.6,0.7,1.6,1.6l-0.1,28.5 c0,0.9-0.7,1.6-1.6,1.6c0,0,0,0,0,0c-2.2,0-6.6-0.1-13.5,0c-1.4,0-2.7,0.9-3.9,2.3c-0.6,0.8-1.1,1.6-1.6,2.5c-0.4,0.9-1.7,0.9-2.1,0 c-0.4-0.9-1-1.7-1.6-2.5c-1.2-1.5-2.5-2.3-3.8-2.3c-6.8-0.1-11.3-0.1-13.5,0C0.7,31.8,0,31,0,30.1V1.6C0,0.7,0.7,0,1.6,0H16.8z M30.5,14.1c0-0.6,0.5-1.2,1.1-1.2c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0v8.5c0,0.6-0.5,1.1-1.2,1.1c-0.6,0-1.1-0.5-1.1-1.1V14.1z M30.4,9.6c0-0.7,0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2v0c0,0.7-0.6,1.2-1.2,1.2S30.4,10.4,30.4,9.6L30.4,9.6z M16.2,7.5 c0.6,0,1.1,0.5,1.1,1.2c0,0.6-0.5,1.1-1.1,1.1h-9C6.5,9.8,6,9.3,6,8.7C6,8,6.5,7.5,7.2,7.5H16.2z M16.2,14.5c0.6,0,1.1,0.5,1.1,1.2 c0,0.6-0.5,1.1-1.1,1.1h-9c-0.6,0-1.1-0.5-1.1-1.2c0-0.6,0.5-1.1,1.1-1.1H16.2z M16.2,21.5c0.6,0,1.1,0.5,1.1,1.2 c0,0.6-0.5,1.1-1.1,1.1h-9c-0.6,0-1.1-0.5-1.1-1.2c0-0.6,0.5-1.1,1.1-1.1H16.2z"/> </symbol><symbol id="guide" xmlns="http://www.w3.org/2000/svg"><path d="M7,11.14 L7,16.5 C7,16.7761424 6.77614237,17 6.5,17 C6.22385763,17 6,16.7761424 6,16.5 L6,11.14 L3.59983378,11.14 C2.88403516,11.14 2.18135024,10.9479223 1.56508266,10.5838043 L0.491456975,9.94945897 C0.350125091,9.86595387 0.231524011,9.74893954 0.146122977,9.60874515 C-0.141196124,9.13708195 0.00824429936,8.52180522 0.479907505,8.23448612 L1.54788892,7.58391288 C2.17481675,7.20201253 2.89474912,7 3.62883793,7 L6.00476274,7 C6.00162288,6.97735193 6,6.95421891 6,6.93070684 L6,6.07070684 L5.05278581,6.07070684 L2,6.07070684 C1.44771525,6.07070684 1,5.62299159 1,5.07070684 L1,2.93070684 C1,2.37842209 1.44771525,1.93070684 2,1.93070684 L6,1.93070684 L6,0.82 C6,0.543857625 6.22385763,0.32 6.5,0.32 C6.77614237,0.32 7,0.543857625 7,0.82 L7,1.93070684 L9.42761878,1.93070684 C10.1617076,1.93070684 10.88164,2.13271937 11.5085678,2.51461972 L12.5765492,3.16519296 C13.0482124,3.45251206 13.1976528,4.06778879 12.9103337,4.53945199 C12.8249327,4.67964638 12.7063316,4.79666071 12.5649997,4.88016581 L11.491374,5.51451111 C10.8751065,5.87862912 10.1724215,6.07070684 9.45662292,6.07070684 L7,6.07070684 L7,6.93070684 C7,6.95421891 6.99837712,6.97735193 6.99523726,7 L11.0564567,7 C11.6087415,7 12.0564567,7.44771525 12.0564567,8 L12.0564567,10.14 C12.0564567,10.6922847 11.6087415,11.14 11.0564567,11.14 L8.0036709,11.14 L7,11.14 Z M2,2.93070684 L2,5.07070684 L9.45662292,5.07070684 C9.99347189,5.07070684 10.5204856,4.92664855 10.9826863,4.65356004 L12.0563119,4.01921474 L10.9883305,3.3686415 C10.5181347,3.08221624 9.97818538,2.93070684 9.42761878,2.93070684 L2,2.93070684 Z M11.0564567,8 L3.62883793,8 C3.07827132,8 2.53832205,8.1515094 2.06812617,8.43793466 L1.00014476,9.0885079 L2.07377044,9.7228532 C2.53597113,9.99594171 3.06298482,10.14 3.59983378,10.14 L11.0564567,10.14 L11.0564567,8 Z"/></symbol><symbol id="develop" viewBox="0 0 64 64"> <path d="M13.208 40.225c-1.89-1.694-4.949-4.428-9.176-8.203 1.811-1.624 3.168-2.842 4.074-3.654 2.835-2.541 5.663-5.090 8.498-7.63 0.65-0.578 1.3-1.165 1.942-1.743 0.634-0.57 0.626-1.735 0-2.305-0.674-0.627-1.617-0.611-2.299 0-1.779 1.596-3.559 3.192-5.338 4.788-2.835 2.541-5.663 5.090-8.498 7.63-0.65 0.578-1.3 1.165-1.942 1.743-0.626 0.562-0.626 1.743 0 2.305 1.779 1.596 3.558 3.192 5.338 4.788 2.835 2.541 5.663 5.090 8.498 7.63 0.65 0.578 1.3 1.164 1.942 1.743 0.634 0.57 1.682 0.676 2.299 0 0.569-0.619 0.674-1.694 0-2.305-1.779-1.596-3.559-3.192-5.338-4.788z"/> <path d="M50.792 23.775c2.835 2.541 5.663 5.090 8.498 7.63 0.149 0.133 0.373 0.332 0.67 0.599l-4.067 3.627c-3.775 3.393-6.608 5.937-8.498 7.63-0.65 0.578-1.3 1.164-1.942 1.743-0.634 0.57-0.626 1.735 0 2.305 0.674 0.627 1.617 0.611 2.299 0 1.779-1.596 3.559-3.192 5.338-4.788 2.835-2.541 5.663-5.090 8.498-7.63 0.65-0.578 1.3-1.164 1.942-1.743 0.626-0.562 0.626-1.743 0-2.305-1.779-1.596-3.559-3.192-5.338-4.788-2.835-2.541-5.663-5.090-8.498-7.63-0.65-0.578-1.3-1.165-1.942-1.743-0.634-0.57-1.682-0.676-2.299 0-0.569 0.619-0.674 1.694 0 2.305 1.779 1.596 3.559 3.192 5.338 4.788z"/> <path d="M27.743 50.119c1.162-3.526 2.324-7.044 3.485-10.57 1.397-4.251 2.795-8.494 4.2-12.745 1.211-3.673 2.421-7.345 3.632-11.018 0.577-1.783 1.227-3.559 1.763-5.367 0.008-0.024 0.016-0.049 0.024-0.073 0.268-0.806-0.309-1.816-1.137-2.003-0.894-0.204-1.714 0.269-1.999 1.14-0.487 1.466-0.967 2.932-1.454 4.406-1.162 3.526-2.324 7.044-3.485 10.57-1.397 4.251-2.795 8.494-4.2 12.745-1.21 3.673-2.421 7.345-3.632 11.018-0.577 1.775-1.227 3.551-1.763 5.358-0.008 0.024-0.016 0.049-0.024 0.073-0.268 0.806 0.309 1.816 1.137 2.003 0.894 0.204 1.714-0.269 1.999-1.132 0.487-1.466 0.967-2.932 1.454-4.406z"/> </symbol><symbol id="optimize" viewBox="0 0 64 64"> <path d="M31.97 64c-6.897 0-13.816-2.212-19.603-6.708-0.004-0.004-0.006-0.005-0.010-0.009-1.082-0.853-2.060-1.721-2.991-2.651-0.925-0.927-1.817-1.932-2.651-2.99-9.883-12.718-8.74-30.892 2.651-42.281 12.482-12.481 32.791-12.481 45.272 0s12.481 32.79 0 45.271c-6.204 6.204-14.42 9.368-22.669 9.368zM14.497 54.562c11.333 8.802 27.535 7.782 37.694-2.377 11.132-11.133 11.132-29.244 0-40.376s-29.244-11.133-40.376 0c-10.16 10.159-11.18 26.367-2.374 37.7 0.742 0.94 1.544 1.846 2.375 2.676 0.832 0.833 1.708 1.611 2.681 2.377z"/> <path d="M31.995 44.449c-2.946 0-5.342-2.396-5.342-5.342s2.396-5.342 5.342-5.342c2.946 0 5.342 2.396 5.342 5.342s-2.396 5.342-5.342 5.342zM31.995 37.326c-0.982 0-1.781 0.798-1.781 1.781s0.799 1.781 1.781 1.781c0.982 0 1.781-0.798 1.781-1.781s-0.799-1.781-1.781-1.781z"/> <path d="M31.986 37.326c-0.983 0-1.781-0.796-1.781-1.781v-10.684c0-0.984 0.797-1.781 1.781-1.781s1.781 0.796 1.781 1.781v10.684c0 0.984-0.797 1.781-1.781 1.781z"/> <path d="M12.533 31.764c-0.062 0-0.125-0.003-0.189-0.010-0.978-0.103-1.687-0.979-1.584-1.958 0.415-3.925 1.884-7.639 4.248-10.743 0.657-0.861 1.253-1.553 1.875-2.174 4.037-4.038 9.404-6.262 15.112-6.262s11.074 2.222 15.111 6.26c0.621 0.621 1.215 1.309 1.868 2.168 2.374 3.109 3.843 6.827 4.249 10.755 0.102 0.977-0.609 1.852-1.588 1.954-0.984 0.063-1.854-0.61-1.955-1.589-0.339-3.274-1.562-6.373-3.538-8.96-0.556-0.73-1.051-1.304-1.556-1.81-3.363-3.365-7.835-5.217-12.592-5.217s-9.229 1.854-12.594 5.218c-0.506 0.506-1.002 1.083-1.56 1.815-1.969 2.584-3.193 5.681-3.539 8.959-0.097 0.913-0.869 1.593-1.769 1.593z"/> <path d="M31.986 17.739c-0.983 0-1.781-0.796-1.781-1.781v-3.561c0-0.984 0.797-1.781 1.781-1.781s1.781 0.796 1.781 1.781v3.561c0 0.984-0.797 1.781-1.781 1.781z"/> <path d="M43.317 22.433c-0.456 0-0.911-0.174-1.259-0.522-0.696-0.695-0.696-1.822 0-2.518l2.518-2.518c0.696-0.695 1.822-0.695 2.518 0s0.696 1.822 0 2.518l-2.518 2.518c-0.348 0.348-0.803 0.522-1.259 0.522z"/> <path d="M20.655 22.431c-0.456 0-0.911-0.174-1.259-0.522l-2.518-2.518c-0.695-0.695-0.695-1.822 0-2.518s1.822-0.695 2.518 0l2.518 2.518c0.695 0.695 0.695 1.822 0 2.518-0.348 0.348-0.803 0.522-1.259 0.522z"/> </symbol><symbol id="integration" viewBox="0 0 64 64"> <path d="M18.233 13.89h-6.921c-0.764 0-1.384-0.62-1.384-1.384s0.62-1.384 1.384-1.384v0h6.921c0.764 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> <path d="M18.233 22.195h-6.921c-0.764 0-1.384-0.62-1.384-1.384s0.62-1.384 1.384-1.384v0h6.921c0.764 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> <path d="M30.691 30.501h-19.38c-0.764 0-1.384-0.62-1.384-1.384s0.62-1.384 1.384-1.384v0h19.38c0.765 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> <path d="M30.691 38.806h-19.38c-0.764 0-1.384-0.62-1.384-1.384s0.62-1.384 1.384-1.384v0h19.38c0.765 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> <path d="M33.46 56.802h-31.838c-0.764 0-1.384-0.62-1.384-1.384v0l-0.151-54.033c0-0.764 0.62-1.384 1.384-1.384v0 0l43.063 0.047c0.764 0 1.384 0.62 1.384 1.384v0 20.952c0 0.765-0.62 1.384-1.384 1.384s-1.384-0.62-1.384-1.384v0-19.568l-40.29-0.050 0.147 51.268h30.454c0.764 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> <path d="M38.943 64c-0.764 0-1.384-0.62-1.384-1.384v0l-0.097-34.931c0-0.764 0.62-1.384 1.384-1.384v0 0l23.683 0.030c0.764 0 1.384 0.62 1.384 1.384v0 34.623c0 0 0 0 0 0 0 0.759-0.61 1.375-1.367 1.384h-0.001l-23.587 0.277zM62.529 62.339v0zM40.234 29.068l0.089 32.144 20.822-0.241v-31.874z"/> <path d="M49.858 56.139h-1.268l1.254-7.694h-3.93c-0.351-0.002-0.634-0.287-0.634-0.638 0-0.002 0-0.003 0-0.004v0c0.022-0.155 0.071-0.295 0.142-0.421l-0.003 0.006 6.978-11.794h1.289l-1.285 7.706h3.965c0.001 0 0.002 0 0.003 0 0.348 0 0.63 0.282 0.63 0.63 0 0.147-0.051 0.283-0.136 0.39l0.001-0.001z"/> <path d="M25.154 22.195c-0.764 0-1.384-0.62-1.384-1.384v0-8.306c0-0.764 0.62-1.384 1.384-1.384v0h8.306c0.764 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0h-6.921v6.921c0 0.765-0.62 1.384-1.384 1.384v0z"/> <path d="M34.844 23.579c-0.382-0-0.728-0.155-0.979-0.406l-8.306-8.306c-0.24-0.249-0.389-0.588-0.389-0.962 0-0.764 0.62-1.384 1.384-1.384 0.374 0 0.713 0.148 0.962 0.389l8.305 8.305c0.25 0.25 0.405 0.596 0.405 0.979 0 0.764-0.62 1.384-1.384 1.384v0z"/> <path d="M30.691 47.112h-19.38c-0.764 0-1.384-0.62-1.384-1.384s0.62-1.384 1.384-1.384v0h19.38c0.765 0 1.384 0.62 1.384 1.384s-0.62 1.384-1.384 1.384v0z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/es/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Acerca de <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/es/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">Sitios web de AMP</div> <div class="ap-o-header-flyout-item-description">Cree experiencias web perfectas</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/es/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Historias agradables para todo el mundo</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/es/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">Anuncios AMP</div> <div class="ap-o-header-flyout-item-description">Anuncios súper rápidos en la web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/es/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">Correo electrónico de AMP</div> <div class="ap-o-header-flyout-item-description">Correo electrónico de última generación</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/about/how-amp-works/">Cómo funciona AMP</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/about/mission-and-vision/">Visión y misión</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/about/use-cases/">Casos de uso</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/success-stories/">Historias de éxito</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Documentación <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/documentation/">Comenzar</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Guías y tutoriales</div> <div class="ap-o-header-flyout-item-description">Comience a utilizar AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Componentes</div> <div class="ap-o-header-flyout-item-description">La biblioteca completa de AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Ejemplos</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Cursos</div> <div class="ap-o-header-flyout-item-description">Aprenda AMP con cursos gratuitos</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Plantillas</div> <div class="ap-o-header-flyout-item-description">Listas para usarse</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/es/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Herramientas</div> <div class="ap-o-header-flyout-item-description">Comience a crear</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Comunidad <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/documentation/guides-and-tutorials/contribute/">Colaboración</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/community/roadmap/">Plan de trabajo</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/community/governance/">Gobernanza</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/community/working-groups/access-subscriptions/">Grupos de trabajo</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Eventos <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Soporte <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/support/">Ayuda</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/es/support/faq/">Preguntas frecuentes</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Seleccionar un idioma" tabindex="-1"> <span class="-tw">ES</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/guides-and-tutorials/" role="listitem">English</a> <a class="-tw" href="/de/documentation/guides-and-tutorials/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/guides-and-tutorials/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/guides-and-tutorials/" role="listitem">العربية</a> <a class="-tw" href="/it/documentation/guides-and-tutorials/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/guides-and-tutorials/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/guides-and-tutorials/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/guides-and-tutorials/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/guides-and-tutorials/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/guides-and-tutorials/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/guides-and-tutorials/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/guides-and-tutorials/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/guides-and-tutorials/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/guides-and-tutorials/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Botón de hamburguesa" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Acerca de </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/websites/"> Sitios web de AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/ads/"> Anuncios AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/email/"> Correo electrónico de AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/how-amp-works/"> Cómo funciona AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/mission-and-vision/"> Visión y misión </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/about/use-cases/"> Casos de uso </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/success-stories/"> Historias de éxito </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Documentación </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/"> Comenzar </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/guides-and-tutorials/"> Guías y tutoriales </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/components/"> Componentes </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/examples/"> Ejemplos </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/courses/"> Cursos </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/templates/"> Plantillas </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/tools/"> Herramientas </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Comunidad </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/documentation/guides-and-tutorials/contribute/"> Colaboración </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/community/roadmap/"> Plan de trabajo </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/community/governance/"> Gobernanza </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/community/working-groups/access-subscriptions/"> Grupos de trabajo </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Eventos </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/es/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/es/support/"> Ayuda </a> </li> </ul> </nav> <div class="-ui"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div><main class="ap--main -fz"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></span> <section class="-t"> <label class="-uo -ur ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Mostrar/ocultar la barra lateral</span> </label> <label class="-uo -ul ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Mostrar/ocultar la barra lateral</span> </label> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/es/documentation/">Documentación</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <div class="ap-m-breadcrumbs-crumb">Guías y tutoriales</div> </nav> <section class="ap--section"> <h1>AMP Websites Guides & Tutorials</h1> <p>Here you can find everything you need to build AMP experiences. The sidebar on the left shows you all resources for building <strong>AMP websites.</strong></p> </section> <section class="ap--card-grid"> <h2 class="ap-o-card-grid-text">AMP's development workflow</h2> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#start"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Start</h4> <p class="ap-o-card-grid-card-copy">Building a 'Hello World' page and try adding your first interactive feature to an AMP page.</p> <a href="/es/documentation/guides-and-tutorials/start/create/basic_markup/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Create your AMP HTML page</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#integration"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Integrate</h4> <p class="ap-o-card-grid-card-copy">Combine your pages with non-AMP pages, a PWA, native apps and more.</p> <a href="/es/documentation/guides-and-tutorials/integrate/integrate-with-apps/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Integrate AMP with your app</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Learn</h4> <p class="ap-o-card-grid-card-copy">Get to know how AMP is different and acquire the fundamentals for how AMP works.</p> <a href="/es/documentation/guides-and-tutorials/learn/spec/amphtml/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">AMP HTML Specification</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon ap-o-card-grid-card-icon-emails"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#optimize"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Optimize & Measure</h4> <p class="ap-o-card-grid-card-copy">Make more out of your AMP pages through analytics, optimal delivery and caching.</p> <a href="/es/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Configure analytics</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#develop"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Develop</h4> <p class="ap-o-card-grid-card-copy">Create every content, layout, and feature your website needs.</p> <a href="/es/documentation/guides-and-tutorials/develop/style_and_layout/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Estilo y diseño</span> </a> </div> <div class="ap-o-card-grid-card ap-o-card-grid-card-tip"> <div class="ap-m-tip ap-m-tip-default"> <div class="ap-m-tip-content"> <h4>Using a CMS?</h4> <p>AMP integrates with many publishing platforms and content management systems! Find the full list under <a href="/es/support/faq/platform-and-vendor-partners/">Platform and Vendor Partners.</a></p> </div> </div> </div> <section class="ap--section"> <div class="-fk"> <h2>Highlighted Guides & Tutorials</h2> <div class="-fj"> <div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> <div class="ap-m-tag ap-m-tag-email"></div> </div> <a href="/es/documentation/guides-and-tutorials/develop/style_and_layout/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Estilo y Layout</h4> <p>El estilo y el diseño que se utilizan en las páginas AMP HTML son muy similares a las páginas HTML normales, en ambos casos usará CSS.</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> <a href="/es/documentation/guides-and-tutorials/optimize-and-measure/discovery/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Hacer que una página sea reconocible</h4> <p>In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search ...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div> <div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> <div class="ap-m-tag ap-m-tag-email"></div> </div> <a href="/es/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>CORS en AMP</h4> <p>Descubra más...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> </div> <a href="/es/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Validar páginas AMP</h4> <p>Watch our video about the various validation options. The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages ...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div> <div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> <div class="ap-m-tag ap-m-tag-email"></div> </div> <a href="/es/documentation/guides-and-tutorials/learn/amp-html-layout/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Sistema de diseño AMPHTML</h4> <p>Descubra más...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-ads"></div> </div> <a href="/es/documentation/guides-and-tutorials/develop/animations/introduction_to_animations/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Introducción a las animaciones complejas</h4> <p>Para las animaciones que no pueden basarse en integrar y eliminar clases, AMP ofrece varios componentes específicos para generar animaciones. Estos componentes implementan los principios de AMP para las animaciones ...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div> </div> </div> </section> <section class="ap--section"> <div class="-fk -fq"> <h2>Recent Guides & Tutorials</h2> <div class="-fj"> <div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> <div class="ap-m-tag ap-m-tag-email"></div> </div> <a href="/es/documentation/guides-and-tutorials/contribute/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Cómo contribuir</h4> <p>El proyecto AMP no sería posible sin la ayuda de todos los miembros de la comunidad, ya sean desarrolladores, creadores de contenido o proveedores de servicios relacionados con AMP.</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> </div> <a href="/es/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Integre sus herramientas analíticas con AMP</h4> <p>Descubra más...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div><div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> <div class="ap-m-tag ap-m-tag-stories"></div> <div class="ap-m-tag ap-m-tag-ads"></div> <div class="ap-m-tag ap-m-tag-email"></div> </div> <a href="/es/documentation/guides-and-tutorials/contribute/translations/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Colabore con sus traducciones</h4> <p>La misión de AMP incluye hacer de la web un lugar agradable y de fácil acceso para todos, y no podemos alcanzar este objetivo sin la localización de documentos. Traducir la documentación de AMP es un proceso sumamente importante que ayuda al prestigio y al éxito de la comunidad de AMP.</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> <a href="/es/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Create a UI widget with custom JavaScript</h4> <p>For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's performance.</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div><div class="-rt ap-m-teaser-column-box"> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> <a href="/es/documentation/guides-and-tutorials/develop/custom-javascript/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Cómo utilizar JavaScript de manera personalizada en las páginas de AMP</h4> <p>Para las experiencias web que requieren una gran cantidad de personalización AMP creó amp-script, un componente que le permite usar JavaScript de manera arbitraria en su página de AMP sin afectar el rendimiento general de la página.</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> <div class="-rt -f_"> <div class="ap-m-teaser-double-teaser"> <div class="-op"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> <a href="/es/documentation/guides-and-tutorials/develop/live_blog/"> <div class="-rs"> <div class="ap-m-teaser-content-text"> <h4>Crear un blog en directo</h4> <p>Live blogs are web pages that are updated frequently throughout an on-going event, such as a sporting event or an election. In AMP, you can implement a live blog by using ...</p> </div> <div class="guide-tag"> <div class="guide-tag-icon guide-tag-icon-guide"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guide"/> </svg> </div> <span class="guide-tag-text">Guide</span> </div> </div> </a> </div> </div> </div> </div> </div> </section> <section class="ap--video-slider"> <h2 class="ap-o-video-slider-text">Featured Videos</h2> <p class="ap-o-video-slider-text">See the latest videos about AMP and find out more on our <a href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw">YouTube Channel.</a></p> <amp-carousel class="ap-o-video-slider-carousel i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" type="carousel" height="300" layout="fixed-height" controls="0" style="height:300px;" i-amphtml-layout="fixed-height"> <amp-youtube data-videoid="w_5oyBaOmkE" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="-EDODPxhdd8" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="nnhp4QEiIKI" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="LZcKdHinUhE" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="AtTuKABjctI" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="-wvmgrO-xxI" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="doHpjtIUsVk" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="QJfgwoSbswg" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="SigIbCVMTzU" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="aLuXXHZlUMM" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="oeOFukrBJlU" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="ffPvuBA4KXs" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="gIBlBhKZ6_k" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="H3LoLYZq4h4" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> <amp-youtube data-videoid="XpwvSWFN1jY" width="391" height="220" layout="fixed" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:391px;height:220px;" i-amphtml-layout="fixed"> </amp-youtube> </amp-carousel> </section> </section> </section></div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/es/documentation/guides-and-tutorials/stories/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/es/documentation/guides-and-tutorials/ads/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/es/documentation/guides-and-tutorials/email/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>Comenzar</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/"> <span>Crea tu primera página</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/basic_markup/"> Crear tu página AMP HTML </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/include_image/"> Incluir una imagen </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/presentation_layout/"> Modificación de la presentación y el diseño </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/prepare_for_discovery/"> Prepare su página para su publicación y distribución </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/preview_and_validate/"> Versión preliminar y validación </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/create/publish/"> Últimos pasos antes de la publicación </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/"> <span>Convertir HTML en</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/setting-up/"> Configuración </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/building-page/"> Creación de una página HTML normal </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/resolving-errors/"> Resolución de errores de validación </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/discoverable/"> Hacer que tu página sea detectable </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/converting/congratulations/"> ¡Felicidades! </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/"> <span>Añadir funciones avanzadas de</span> <span class="nav-link-lastword">AMP<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/setting_up/"> Configuración </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/review_code/"> Revisión del código de inicio </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/adding_components/"> Adición de componentes AMP ampliados </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/adding_carousels/"> Adición de carruseles </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/tracking_data/"> Seguimiento del compromiso mediante estadísticas </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/navigating/"> Navegación por su sitio </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/fonts/"> Adición de fuentes </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/start/add_advanced/congratulations/"> ¡Felicidades! </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Aprender</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-actions-and-events/"> Acciones y eventos </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/common_attributes/"> Atributos comunes </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Especificación AMP HTML</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/spec/amphtml/"> AMP HTML Specification </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/spec/amp-boilerplate/"> El código reutilizable en AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/spec/release-schedule/"> Calendario con los lanzamientos de AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/experimental/"> Funciones experimentales </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-html-layout/"> Sistema de diseño AMPHTML </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Flujo de validación</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/validation-workflow/validate_amp/"> Validar páginas AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/validation-workflow/validation_errors/"> Errores de validación de AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Cachés y CORS de AMP</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> Almacenar páginas AMP en caché </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-debugging/"> Depuración de problemas en el caché de AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cache-urls/"> Administración de las solicitudes y el formato URL para el caché de AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/amp-caches-and-cors/amp-cors-requests/"> CORS en AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/learn/combine-amp-pwa/"> Cómo se relacionan entre sí AMP y PWA </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Desarrollar</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/"> <span>Estilo y Layout</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/style_pages/"> Supported CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/control_layout/"> Diseño y media queries </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/placeholders/"> Marcadores de posición y respaldos </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/art_direction/"> Imágenes adaptativas con srcset, sizes & heights </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/responsive_design/"> Crear páginas AMP responsivas </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/style_and_layout/custom_fonts/"> Adición de fuentes personalizadas </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/"> Adición de imágenes y videos </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/third_party_components/"> Inclusión de contenido de terceros </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/media_iframes_3p/iframes/"> Inclusión de iframes </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>Animación y transiciones</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/animations/triggering_css_animations/"> Activar las animaciones y transiciones CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/animations/introduction_to_animations/"> Introducción a las animaciones complejas </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/custom-javascript/"> Cómo utilizar JavaScript de manera personalizada en las páginas de AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/monetization/"> <span>Monetizar tu página AMP con anuncios</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/monetization/ads_vendors/"> Proveedores de anuncios </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/monetization/content_encryption/"> Proteja el contenido de su suscripción mediante el cifrado del lado del cliente </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/"> <span>Crear páginas AMP</span> <span class="nav-link-lastword">interactivas<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/prereqs-setup/"> Setting up </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/get-familiar/"> Familiarización con el código de inicio </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/advanced-interactivity/"> Mejoras en la interactividad </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/remote-data/"> Trabajo con datos remotos </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/interactivity/wrapping-up/"> Conclusión </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg></span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/login_requiring/login/"> Inicio de sesión </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/login_requiring/add_comment/"> Adición de un comentario </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/login_requiring/logout/"> Cerrar sesión </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/login_requiring/summary/"> Summary </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/live_blog/"> Crear un blog en directo <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/develop/seatmap/"> Cómo crear un mapa de asientos <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Integrar</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/amp-in-pwa/"> Inserción y uso de AMP como fuente de datos </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/amp-to-pwa/"> Precargue su aplicación web progresiva (PWA) desde páginas AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/integrate-with-apps/"> Integre AMP con su aplicación </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/embed-stories/"> Cómo insertar historias en páginas web </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>Optimizar y medir</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/publishing_checklist/"> Listas de verificación para las publicaciones de AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/explainer/"> Cómo funciona el optimizador de AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Guía para utilizar el Optimizador de AMP Node.js </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/"> <span>Configurar analíticas</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics-vendors/"> Proveedores de Analytics </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/analytics_basics/"> Analytics: aspectos básicos </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/deep_dive_analytics/"> Información detallada sobre Analytics para AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/configure-analytics/use_cases/"> Casos de uso </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-managing-user-state/"> Cómo administrar el estado del usuario cuando no se autenticó con AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/signed-exchange/"> Cómo obtener los servicios de AMP mediante intercambios firmados </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/discovery/"> Hacer que una página sea reconocible </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/engagement/"> Mejore la participación del usuario </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/secure-pages/"> Cómo protegerse contra los ataques de terceros </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp_to_pwa/"> Convierta su sitio AMP en una Aplicación Web Progresiva (PWA) <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/amp-as-pwa/"> Habilitar las funciones de las aplicaciones web progresivas en páginas AMP </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/optimize-and-measure/tracking-engagement/"> Cómo configurar análisis básicos para sus páginas de AMP <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"/></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/"> Cómo contribuir </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/websites/"> Tipos de documentos </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/websites/"> Guías para formatos y tutoriales </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/integrate-your-analytics-tools/"> Integre sus herramientas analíticas con AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"/></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/es/documentation/guides-and-tutorials/websites/contribute/translations/"> Colabore con sus traducciones </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Por supuesto, ¡este sitio fue creado con AMP!</div> <div class="-l"> <h5 class="-c">Síganos</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Descripción general</h5> <ul class="-y"> <li class="-b"><a href="/es/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Framework AMP</a></li> <li class="-b"><a href="/es/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Casos de uso</a></li> <li class="-b"><a href="/es/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Historias de éxito</a></li> <li class="-b"><a href="/es/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Funcionalidad</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Documentos</h5> <ul class="-y"> <li class="-b"><a href="/es/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Comenzar</a></li> <li class="-b"><a href="/es/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Guías y tutoriales</a></li> <li class="-b"><a href="/es/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Componentes</a></li> <li class="-b"><a href="/es/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Ejemplos</a></li> <li class="-b"><a href="/es/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Plantillas de diseño</a></li> <li class="-b"><a href="/es/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Herramientas</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Comunidad</h5> <ul class="-y"> <li class="-b"><a href="/es/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Socios y proveedores de la plataforma</a></li> <li class="-b"><a href="/es/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Colaboración</a></li> <li class="-b"><a href="/es/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Plan de trabajo</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Eventos</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/es/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">Materiales promocionales de AMP</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Guía de estilo</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logotipos</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Política de Privacidad</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"guides-and-tutorials","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"guides-and-tutorials","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"guides-and-tutorials","event_label":"sidebar","event_name":"sidebar"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Cerrar la ventana de consentimiento"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Aceptar el uso de cookies">¡Entendido!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>