Google AMP - Introduzione

Google Accelerated Mobile Pages(Google-AMP) è il nuovo progetto open source di Google appositamente progettato per creare pagine web leggere utilizzando amp html. L'obiettivo principale di questo progetto è assicurarsi che il codice AMP funzioni correttamente e si carichi velocemente su tutti i possibili dispositivi come smartphone e tablet.

AMP è solo un'estensione dell'HTML standard. Pochi tag HTML sono cambiati e AMP ha aggiunto limitazioni al loro utilizzo. In questo capitolo, elencheremo i tag html che sono stati modificati e le limitazioni ad essi aggiunti. Vengono modificati i tag che si occupano del caricamento di risorse esterne, ad esempio immagini, css, js, invio di moduli, video, audio ecc.

Inoltre ci sono molte nuove funzionalità aggiunte ad amp, ad esempio amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox e molte altre che possono essere utilizzate direttamente nelle pagine html. Gli altri che sono pensati per la visualizzazione vengono usati così come sono.

Con tutte queste modifiche e nuove funzionalità, AMP promette di fornire un caricamento più rapido e prestazioni migliori per le pagine se utilizzate in un ambiente live.

Quando cerchi qualcosa nella ricerca di Google sul tuo cellulare, il display che viene visualizzato nel carosello di Google in alto è per lo più pagine di amplificazione come mostrato di seguito:

Quando fai clic sulla pagina AMP, l'URL che ottieni nella barra degli indirizzi è il seguente:

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

L'URL non proviene direttamente dall'editore, ma Google lo indirizza alla propria copia sul server di Google che è una versione memorizzata nella cache e aiuta a rendere il contenuto più veloce rispetto a una pagina non amp. Ciò avverrà solo sui dispositivi o in modalità emulatore di Google.

Pagina Amp di esempio

Di seguito è mostrato un esempio per la pagina amp:

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

Cose da fare e da non fare in una pagina AMP

Cerchiamo di capire alcune cose da fare e da non fare che un programmatore deve seguire in una pagina AMP.

Tag obbligatori

Ci sono alcuni tag obbligatori da includere in una pagina amp come indicato di seguito:

Dobbiamo assicurarci che ci sia amp o ⚡ aggiunto al tag html come mostrato di seguito -

<html amp>
   OR
<html ⚡>

I tag <head> e <body> dovrebbero essere aggiunti alla pagina html.
I seguenti meta tag obbligatori dovrebbero essere aggiunti nella sezione head della pagina; altrimenti fallirà per la convalida dell'amplificatore

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

Link di rel = "canonical" da aggiungere all'interno del tag head

<link rel = "canonical" href = "./regular-html-version.html">

Etichetta stile con amp-boilerplate -

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

Tag noscript con amp-boilerplate -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

Molto importante il tag script amp con async aggiunto come mostrato di seguito -

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

Nel caso in cui desideri aggiungere CSS personalizzati alla pagina, prendi nota qui che non possiamo chiamare foglio di stile esterno nelle pagine di amp. Per aggiungere CSS personalizzati, tutto il tuo CSS deve andare qui come mostrato -

<style amp-custom>
   //all your styles here
</style>

Al tag di stile dovrebbe essere aggiunto l'attributo amp-custom.

Script per componenti AMP

Nota che gli script con src e type = "text / javascript" non sono assolutamente consentiti in una pagina amp. Solo i tag di script che sono asincroni e correlati ai componenti amp possono essere aggiunti nella sezione head.

Questa sezione elenca alcuni script utilizzati per i componenti dell'amplificatore come indicato di seguito:

amp-ad

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

amp-iframe

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Si noti che lo script ha un attributo async e custom-element con il nome del componente amp da caricare. Amp convalida i tag di script in base alla proprietà asincrona e dell'elemento personalizzato e non consente il caricamento di altri script. Ci vuoletype=application/json che abbiamo aggiunto nel file di esempio come mostrato di seguito

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

Lo script sopra può essere utilizzato con altri componenti amp, se necessario, ad esempio per amp-analytics.

Tag HTML

Finora abbiamo visto i tag obbligatori richiesti nella pagina amp. Ora discuteremo gli elementi HTML che sono consentiti / non consentiti e le restrizioni imposte su di essi.

Ecco l'elenco dei tag HTML consentiti / non consentiti:

Suor n	Tag HTML e descrizione
1	img Questo tag è stato sostituito con amp-img. L'utilizzo del tag img diretto non è consentito in una pagina AMP
2	video Sostituito con amp-video
3	audio Sostituito con amp-audio
4	iframe Sostituito con amp-iframe
5	object Non autorizzato
6	embed Non autorizzato
7	form Può essere usato come <form>. Dobbiamo aggiungere lo script per lavorare con il modulo in una pagina AMP. Example − `<script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>`
8	Input elements `Allowed.<input[type = image]>, <input[type = button]>, <input[type = password]>, <input[type = file]> are not allowed`
9	<fieldset> Permesso
10	<label> Permesso
11	P, div, header,footer,section Permesso
12	button Permesso
13	a Il tag <a> è consentito con la seguente condizione, href non deve iniziare con javascript. Se presente, il valore dell'attributo target deve essere _blank.
14	svg Non autorizzato
15	meta Permesso
16	Link Permesso. Ma non consente di caricare fogli di stile esterni.
17	style Permesso. Deve avere l'attributo amp-boilerplate o amp-custom.
18	base Non autorizzato
19	noscript Consentito

Commenti

Non sono consentiti commenti HTML condizionali. Ad esempio:

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

Eventi HTML

Gli eventi che utilizziamo nelle pagine html come onclick e onmouseover non sono consentiti in una pagina AMP.

Possiamo usare gli eventi come segue:

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Ecco un esempio di evento utilizzato sull'elemento di input:

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

L'evento utilizzato è sottoposto a throll di input.

Classi

Non puoi avere classi nelle tue pagine con prefisso come -amp- or i-amp-. Inoltre, puoi usare il nome della classe secondo le tue esigenze.

ID

Non puoi avere ID per i tuoi elementi html con prefisso -amp o i-amp-. Inoltre, puoi utilizzare gli ID per il tuo elemento html secondo le tue esigenze.

Collegamenti

Non è consentito avere JavaScript in href nelle pagine amp.

Example

<a href = "javascript:callfunc();">click me</a>

Fogli di stile

I fogli di stile esterni non sono consentiti nella pagina AMP. È possibile aggiungere gli stili richiesti per la pagina all'interno -

<style amp-custom>
   //all your styles here
</style>

Il tag di stile dovrebbe avere amp-custom attributo aggiunto ad esso.

@-regole

Le seguenti regole @ sono consentite nei fogli di stile:

@ font-face, @keyframes, @media, @page, @ supports. @ l'importazione non sarà consentita. Il supporto per lo stesso verrà aggiunto in futuro.
@keyframes possono essere utilizzati all'interno di <styleamp-custom> . Se ci sono troppi @keyframe, sarà bene creare <styleamp-keyframes> tag e chiama questo tag alla fine del documento amp.
I nomi delle classi, gli ID, i nomi dei tag e gli attributi non devono essere preceduti da -amp- e i-amp- in quanto vengono utilizzati internamente nel codice amp che può causare conflitti se definito nella pagina anche in fase di runtime.
!important la proprietà non è consentita all'interno dello stile poiché amp vuole controllare il dimensionamento degli elementi ogni volta che è necessario.

Caratteri personalizzati

I fogli di stile per i caratteri personalizzati sono consentiti nelle pagine AMP.

Example

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

I caratteri sono autorizzati dalle seguenti origini che possono essere utilizzate nelle pagine AMP.

Fonts.com - https://fast.fonts.net
Google Fonts - https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (sostituire kitId di conseguenza)

Note - I caratteri personalizzati @ font-face sono consentiti nelle pagine amp.

Example

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

Runtime AMP

L'ambiente di runtime di Amp viene deciso una volta caricato il file amp core -

<script async src = "https://cdn.ampproject.org/v0.js"></script>

Il file core si occupa del caricamento delle risorse esterne, decide la priorità di quando caricarle e aiuta anche nella convalida del documento amp quando # development = 1 viene aggiunto all'URL di amp.

Example

http://localhost:8080/googleamp/amppage.html#development=1

L'URL sopra riportato, quando eseguito nel browser, elencherà gli errori se non è riuscito per la convalida di amp o visualizza il messaggio di convalida di amp, se non ci sono errori.

Componenti AMP

Amp ha molti componenti di amplificazione aggiunti. Fondamentalmente sono utilizzati per gestire il caricamento della risorsa in modo efficiente. Contiene anche componenti per prendersi cura dell'animazione, della visualizzazione dei dati, della visualizzazione di annunci, widget sociali ecc.

Esistono 2 tipi di componenti in AMP.

Built-in
External

Note- <amp-img> è un componente integrato e disponibile se viene aggiunto il file core amp js. Componenti esterni come <amp-ad>, <amp-facebook>, <amp-video> e molti altri richiedono il rispettivo file js relativo al componente da aggiungere.

Attributi comuni

Attributi come larghezza, altezza, layout, segnaposto e fallback saranno disponibili per quasi tutti i componenti AMP disponibili. Questi attributi sono molto importanti per qualsiasi componente AMP in quanto decide la visualizzazione del componente nella pagina AMP.

Tutte le funzionalità sopra elencate per AMP sono discusse in dettaglio nei capitoli successivi di questo tutorial.

Tieni presente che tutti gli esempi in questo tutorial sono testati per i dispositivi e utilizzano la modalità Google Mobile Emulator. Impariamo ora questo in dettaglio.

Google Mobile Emulator

Per utilizzare l'emulatore di dispositivi mobili Google, apri il browser Chrome, fai clic con il pulsante destro del mouse e apri la console per sviluppatori come mostrato di seguito:

Possiamo vedere lo strumento per sviluppatori per Chrome come mostrato sopra. Premi il link che vuoi testare nel browser. Osserva che la pagina viene visualizzata in modalità Desktop.

Per ottenere la pagina sopra per testare i dispositivi, fare clic su Attiva / disattiva barra degli strumenti del dispositivo come mostrato di seguito -

Puoi anche utilizzare la scorciatoia da tastiera Ctrl + Maiusc + M. Questo cambierà la modalità desktop in modalità dispositivo come mostrato di seguito -

È possibile visualizzare un elenco di dispositivi come mostrato di seguito:

Puoi scegliere il dispositivo su cui vuoi testare la pagina. Tieni presente che tutte le pagine di questi tutorial sono testate su Google Mobile Emulator come mostrato sopra. La stessa funzione è disponibile anche per Firefox e per i browser Internet Explorer recenti.

↰ Previous page Next page ↱

Google AMP - Introduzione

Pagina Amp di esempio

Cose da fare e da non fare in una pagina AMP

Tag obbligatori

Script per componenti AMP

amp-ad

amp-iframe

Tag HTML

Commenti

Eventi HTML

Classi

ID

Collegamenti

Fogli di stile

@-regole

Caratteri personalizzati

Runtime AMP

Componenti AMP

Attributi comuni

Google Mobile Emulator

Tutorial su Google AMP