Pagina principala » Mobil » 10 Componente importante pentru Accelerate mobile (AMP) pe care trebuie să le cunoașteți
10 Componente importante pentru Accelerate mobile (AMP) pe care trebuie să le cunoașteți
Pagini Mobile accelerată sau AMP este inițiativa Google către faceți mobilul mai rapid. Pentru a atinge acest obiectiv, standardele AMP restricționează modul în care puteți utiliza codurile HTML, CSS și JavaScript și gestionează încărcarea resurselor externe, cum ar fi imagini, videoclipuri și anunțuri prin propriile runtime.
Asta înseamnă că tu Nu pot folosi fie orice JavaScript particularizat (scris autor sau scris de terță parte) sau orice elemente HTML legate de resurse, precum imaginile și videoclipurile din documentele AMP.
Pentru a reduce decalajul dintre nevoile utilizatorilor și cele mai bune practici de performanță, AMP a avut componente specifice poti utilizarea în locul acestor elemente excluse.
Componentele AMP sunt anumite etichete HTML. Acestea se comportă similar cu etichetele HTML obișnuite: au etichete de deschidere și închidere, atribute și majoritatea pot fi decorate cu CSS. Ele pot fi ușor recunoscute, așa cum sunt ele începeți întotdeauna cu amp- prefix.
Există două tipuri de componente AMP: built-in și extins Componente.
Componente AMP încorporate
Built-in-uri sunt construite în modul de executare a JavaScript al AMP, deci nu trebuie să le includeți separat.
1. amp-img
înlocuiește etichetă în documente HTML AMP. Trebuie să adăugați src și Alt atributele la fel ca atunci când lucrați cu cei obișnuiți element.
are, de asemenea, două alte atribute necesare: întotdeauna trebuie să faceți specifică lăţime și înălţime atribute în valori ale pixelilor întregi, deoarece acest lucru permite timpul de rulare AMP calculați aspectul în avans.
Dacă dorești face imaginea să răspundă, adaugă aspect = „receptiv“ atribut. schemă atribut controlează aspectul în documentele AMP și poate fi adăugat la orice AMP Components (aflați mai multe despre acest lucru pe sistemul AMP Layout).
De asemenea, puteți utiliza funcția srcset atribut pe eticheta la specificați imagini diferite pentru porturile de vizualizare diferite și densitățile pixelilor. Funcționează la fel ca în cazul imaginilor non-AMP.
2. amp video
poate fi folosit pentru a încorporați direct videoclipuri HTML în documente HTML AMP. Înlocuiește în fișierele AMP. etichetă leneș încărcate videoclipuri pentru a optimiza performanța.
Sursa videoclipului trebuie să fie difuzate prin intermediul protocolului HTTPS. Vi se cere să adăugați lăţime și înălţime atribute, la fel ca și component.
eticheta are multe atribute opționale, cum ar fi Redare automata și poster pe care le puteți specifica pentru a ajusta modul în care este afișat videoclipul dvs. HTML5.
sprijină mp4, webm, ogg și toate celelalte formate acceptate de HTML5
Dacă doriți, puteți, de asemenea adăugați videoclipuri alternative pentru utilizatorii cu browsere care nu acceptă videoclipuri HTML5, utilizând da înapoi atributul și Etichetă HTML.
Browserul dvs. nu acceptă videoclipuri HTML5.
3. amp ad- și amp-embed
vă oferă iframe sandboxes în care poți afișați anunțurile. Trebuie să difuzați anunțurile dvs. prin intermediul protocolului HTTPS.
Nu puteți rula singur scripturile furnizate de rețeaua dvs. publicitară. În schimb, durata de execuție AMP execută JavaScript din rețeaua dată în interiorul spațiului de lucru. Tu trebuie doar să specificați ce rețea folosiți, și adăugați datele.
vă cer adăugați dimensiunile anunțului folosind lăţime și înălţime atribute.
Puteți defini rețeaua de anunțuri pe care o utilizați cu tip atribut. Vedeți lista cu rețele publicitare acceptate.
Fiecare rețea publicitară are propria sa rețea date-* atribute pe care trebuie să le adăugați. Pentru a vedea care dintre ele aveți nevoie, faceți clic pe rețeaua dvs. publicitară din lista de mai sus.
este aliasul lui , documentația nu spune prea multe despre aceasta decât în cazul în care poate fi folosită în loc de când este semantic mai precise. Pe măsură ce Google promite să dezvolte componentele AMP legate de anunțuri în timp, acest lucru se poate schimba în viitor.
4. amp-pixel
Cu , poti adăugați un pixel de urmărire la documentele dvs. AMP HTML la numărați afișările de pagină. Are un singur atribut, cel cerut src atribut, în care aveți nevoie specificați adresa URL a pixelului de urmărire.
eticheta permite substituții standard de adrese URL, ceea ce înseamnă că puteți generează o valoare URL aleatorie pentru a urmări fiecare afișare.
Consultați Ghidul de substituire a adreselor URL al AMP dacă doriți să utilizați această componentă. Rețineți că nu puteți schimba stilul component.
Componente AMP extinse
Ca componente extinse AMP nu fac parte din runtime-ul JavaScript, tu întotdeauna trebuie să le importați în din pagina AMP pe care doriți să le utilizați.
Notă: versiunile componente se pot schimba în viitor, deci nu uitați să faceți asta verificați versiunea curentă în documentație.
5. amp-audio
înlocuiește HTML5 tag, și face posibil să încorporați direct fișiere audio HTML5 în paginile AMP.
Pentru ao folosi, trebuie să specificați src, lăţime și înălţime atribute și puteți adăuga, de asemenea, trei atribute opționale: Redare automata, buclă și dezactivat.
Poate fi o idee bună adăugați fișiere audio alternative pentru utilizatorii cu browsere care nu acceptă HTML5. Puteți face acest lucru folosind da înapoi atributul și tag, la fel ca în cele menționate mai sus component.
Componenta AMP acceptă aceleași formate audio ca și Eticheta HTML5.
Browserul dvs. nu acceptă audio HTML5.
A folosi , includeți următorul scenariu în din documentul AMP:
6. amp-iframe
afișează o iframe în documentele AMP. a fost făcută mai sigură decât cadrele iframe HTML obișnuite. De aceea sunt sandboxed în mod implicit.
Există unele reguli legate de trebuie să urmați pentru a trece validarea.
Trebuie să specificați lăţime, înălţime, și Sandbox atribute. Sandbox atributul este gol în mod prestabilit, dar îi puteți da valori diferite pentru a modificați comportamentul iframe-ului, de exemplusandbox = "permite-script-uri"permite iframe-ului să ruleze JavaScript. Puteți utiliza și atributele rapoartelor standard standard.
În timp ce dimensiunile sunt predefinite de către lăţime și înălţime atribute, există o modalitate de redimensionare a acestuia în timpul rulării. Pentru a utiliza , adăugați următorul script pe pagina dvs. AMP:
7. amp-acordeon
acordeoane constituie un model UI frecvent în designul mobil, deoarece economisesc spațiu, dar afișează încă conținutul într-un mod accesibil. face posibilă adăugați rapid acordeoane la paginile AMP.
Secțiunile acordeonului trebuie să utilizeze HTML5 tag și trebuie să fie copiii direcți din etichetă.
Fiecare secțiune trebuie să aibă doi copii direcți:
unul pentru titlu
unul pentru conținut (conținutul poate fi, de asemenea, o imagine)
Folosește extins atribut pe orice secțiune pe care doriți să o extindeți în mod implicit.
Sectiunea 1
Conținutul secțiunii 1
Sectiunea 2
Conținutul secțiunii 2
Secțiunea 3
Imagine pentru secțiunea 3
Pentru a utiliza componenta din documentul AMP include următorul script:
8. amp-lightbox
adaugă o casetă lightbox la diferite elemente (în majoritatea cazurilor, imagini) pe paginile mobile accelerată.
Atunci când utilizatorul interacționează cu elementul, de exemplu robinetele pe acesta, cutia lightbox extinde și umple întregul port de vizualizare. Trebuie să adăugați un buton sau alt control pe care utilizatorul poate atinge.
Rețineți că amp-lightbox poate fi utilizat numai cu nodisplay schemă.
Pentru a utiliza , trebuie să-l importați cu următorul cod:
9. amp-carusel
Caruselile sunt frecvent utilizate în designul mobil, așa cum le permit afișează numeroase elemente similare (cele mai frecvente imagini) de-a lungul axei orizontale. Rezultatele AMP sunt, de asemenea, prezentate într-un format de carusel în Căutarea Google.
vă permite să adăugați caruseluri pe site-ul dvs. copiii direcți din componenta va fi considerată ca fiind articole de carusel. Trebuie să definiți dimensiunile caruselului cu lăţime și înălţime atribute.
Puteți utiliza opțiunea tip atribut pentru a determina cum să afișați elementele carusel. În cazul în care tip atributul ia "carusel" valoare, elementele vor fi afișate ca bandă continuă (aceasta este valoarea implicită), în timp ce „slide-uri“ valoare va afișa elementele în format diapozitive.
tag-ul are, de asemenea, alte atribute opționale care vă pot ajuta să finalizați rezultatul.
În exemplul de mai jos, observați atât caruselul, cât și toate articolele sale utilizați același lucru lăţime și înălţime valorile.
necesită adăugarea următorului scenariu:
10. amp-analiză
poate fi folosit pentru a colecta date de analiză pe paginile AMP. În prezent, acceptă patru tipuri de evenimente de urmărire, totuși acest lucru se poate schimba în viitor:
Vizualizare pagina
Clicuri ancore
Cronometrul
scrolling
A folosi , trebuie să adăugați un obiect de configurare JSON în interiorul a
Adăugați următorul script la secțiune din pagina HTML AMP pentru a importa componente:
Cuvintele finale
În acest post, am aruncat o privire asupra tuturor componentelor AMP încorporate, precum și asupra unor componente extinse. Pe măsură ce paginile mobile accelerate sunt încă noi, multe lucruri se pot schimba în viitor, deci merită să țineți cont de documentație fie pe Github, fie pe site-ul AMP oficial.
Deoarece aceste componente AMP sunt open source, puteți contribui, de asemenea, la dezvoltarea, chiar creând propria componentă. Dacă doriți să vedeți cum arată o pagină completă AMP cu diferite componente, puteți vedea aceste câteva exemple pe Github.
