{"id":12153,"date":"2016-12-16T12:44:56","date_gmt":"2016-12-16T11:44:56","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=12153"},"modified":"2016-12-16T12:44:56","modified_gmt":"2016-12-16T11:44:56","slug":"introduzione-ad-amp-accelerated-mobile-pages","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/introduzione-ad-amp-accelerated-mobile-pages\/","title":{"rendered":"Introduzione ad AMP (Accelerated Mobile Pages)"},"content":{"rendered":"<p>Fruire di contenuti web da mobile non \u00e8 sempre comodo: lentezza, ritardi, mancate connessioni possono rendere l&#8217;esperienza frustrante. Per questo \u00e8 nato l&#8217;<a href=\"https:\/\/www.ampproject.org\/\" target=\"_blank\">Accelerated Mobile Pages Project<\/a>\u00a0in grado di <strong>ottimizzare il rendering dei contenuti web<\/strong>.<\/p>\n<p>Il progetto AMP ruota attorno a<strong> tre componenti<\/strong>:<\/p>\n<ul>\n<li><strong>AMP HTML<\/strong> \u00e8 il formato con cui vengono\u00a0progettate le interfacce. Si tratta in buona parte di tag HTML classici con l&#8217;aggiunta di\u00a0nuovi tag specifici per supportare le innovative caratteristiche di AMP;<\/li>\n<li><strong>AMP JS<\/strong> \u00e8 una libreria Javascript che mette in pratica le linee guida del progetto AMP velocizzando l&#8217;accesso ai contenuti: ad esempio, una delle operazioni che essa svolge \u00e8 rendere asincrono il caricamento delle risorse esterne in modo da non avere pi\u00f9 attivit\u00e0 bloccanti;<\/li>\n<li><strong>Google AMP Cache<\/strong> \u00e8 una cache offerta da Google su Cloud che funziona come una CDN (content delivery network): velocizza l&#8217;accesso alle pagine sfruttando anche le caratteristiche di HTTP\/2, la nuova versione del protocollo principe del Wold Wide Web.<\/li>\n<\/ul>\n<p>Per creare pagine AMP, si deve innanzitutto impostare una serie di elementi nella sezione &lt;head&gt;:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;!doctype html&gt;\r\n&lt;html amp lang=\"en\"&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;La mia prima pagina AMP&lt;\/title&gt;\r\n    &lt;link rel=\"canonical\" href=\"http:\/\/example.ampproject.org\/article-metadata.html\" \/&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"&gt;\r\n    &lt;script type=\"application\/ld+json\"&gt;\r\n      {\r\n        \"@context\": \"http:\/\/schema.org\",\r\n        \"@type\": \"NewsArticle\",\r\n        \"headline\": \"Open-source framework for publishing content\",\r\n        \"datePublished\": \"2015-10-07T12:02:41Z\",\r\n        \"image\": [\r\n          \"logo.jpg\"\r\n        ]\r\n      }\r\n    &lt;\/script&gt;\r\n    &lt;style amp-boilerplate&gt;body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}&lt;\/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;\r\n    &lt;script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"&gt;&lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;!--\r\n          Contenuto della pagina\r\n    --&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>La struttura qui riportata \u00e8 suggerita dalla stessa documentazione del progetto. Si noti, in particolare, l&#8217;apertura con &lt;!doctype html&gt;, il tag &lt;html amp&gt; piuttosto che il classico &lt;html&gt; ed il contenuto alquanto articolato nella sezione &lt;head&gt;.<\/p>\n<p>Questo non \u00e8 che la base per iniziare a realizzare pagine AMP e tutti i successivi strumenti e concetti fondamentali potranno essere acquisiti tramite la <a href=\"https:\/\/www.ampproject.org\/docs\/get_started\/create\" target=\"_blank\">documentazione ufficiale<\/a>, completa ma scorrevole da leggere.<\/p>\n<p>Ed il vostro Web riuscir\u00e0 a diventare pi\u00f9 veloce e mobile-friendly grazie ad AMP?<\/p>\n<p>Sperimentate\u00a0e commentate!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fruire di contenuti web da mobile non \u00e8 sempre comodo: lentezza, ritardi, mancate connessioni possono rendere l&#8217;esperienza&#8230;<\/p>\n","protected":false},"author":561,"featured_media":12631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[481],"tags":[1809,1810,1811],"class_list":["post-12153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse-utili","tag-amp","tag-front-end-web","tag-ottimizzazione-web-mobile"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=12153"}],"version-history":[{"count":5,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12153\/revisions"}],"predecessor-version":[{"id":12632,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/12153\/revisions\/12632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/12631"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=12153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=12153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=12153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}