Početna » Mobilni » 10 Važne ubrzane komponente mobilnih stranica (AMP) koje trebate znati
10 Važne ubrzane komponente mobilnih stranica (AMP) koje trebate znati
Ubrzane mobilne stranice ili AMP je Googleova inicijativa za ubrzajte mobilni web. Da bi se postigao ovaj cilj, AMP standardi ograničavaju kako možete koristiti HTML, CSS, i JavaScript, i upravlja učitavanjem vanjskih resursa, kao što su slike, videozapisi i oglasi putem vlastitog vremena izvođenja.
To podrazumijeva da i vi ne mogu koristiti bilo koji JavaScript (autor ili pisac treće strane) ili bilo koje HTML elemente povezane s resursima kao što su slike i videozapisi u AMP dokumentima.
Kako bi se premostio jaz između potreba korisnika i najboljih izvedbenih praksi, AMP ima određene komponente možeš koristiti umjesto tih isključenih elemenata.
AMP komponente su određene HTML oznake. Ponašaju se slično uobičajenim HTML oznakama: imaju otvorene i zatvarajuće oznake, atribute, a većina njih može biti stilizirana pomoću CSS-a. Oni se mogu lako prepoznati, kao i oni uvijek započnite s pojačalo- prefiks.
Postoje dvije vrste AMP komponenti: ugrađen i produžen komponente.
Ugrađene AMP komponente
Built-in su ugrađeni u AMP-ovo JavaScript vrijeme izvođenja, tako da ih ne morate zasebno uključiti.
1. amp-img
zamjenjuje označiti u AMP HTML dokumentima. Morate dodati src i alt atributi kao kad radite s običnim element.
također ima još dva potrebna atributa: uvijek trebate odredite širina i visina atributi u vrijednostima cjelobrojnih piksela, jer to omogućuje AMP runtime do unaprijed izračunajte raspored.
Ako želiš učinite sliku osjetljivom, dodajte Izgled = „osjetljiv” atribut. raspored atribut kontrolira raspored u AMP dokumentima, a može se dodati bilo kojoj AMP komponenti (saznajte više o tome na sustavu AMP Layout System).
Možete koristiti i srcset atribut na oznaka odrediti različite slike za različite prikaze i gustoće piksela. Radi na isti način kao i kod slika koje nisu AMP.
2. pojačalo-Video
može se koristiti izravno ugrađuju HTML videozapise u AMP HTML dokumentima. On zamjenjuje u AMP datotekama. označiti lijeni tereti videa kako bi optimizirali performanse.
Izvor videozapisa mora se posluživati putem HTTPS protokola. Morate dodati širina i visina kao i kod sastavni dio.
oznaka ima mnogo izbornih atributa, kao što je auto Play i poster koje možete odrediti za fino podešavanje prikaza HTML5 videozapisa.
podržava mp4, webm, ogg i sve ostale formate koje podržava HTML5
Ako želite, također možete dodajte zamjenske videozapise za korisnike s preglednicima koji ne podržavaju HTML5 videozapise, pomoću alata rezervna atribut i HTML oznaka.
Vaš preglednik ne podržava HTML5 videozapise.
3. pojačalo-oglas i amp-embed
pruža vam iframe sandboxes u kojoj možete prikazati svoje oglase. Morate prikazati svoje oglase putem HTTPS protokola.
Ne možete sami pokrenuti skripte koje vam daje oglasna mreža. Umjesto toga, AMP runtime izvršava JavaScript dane mreže unutar sandbox-a. Vas trebate samo navesti koju mrežu koristite, i dodajte svoje podatke.
komponenta zahtijeva od vas dodajte dimenzije oglasa koristiti širina i visina atributi.
Možete definirati oglasnu mrežu koju koristite s oznakom tip atribut. Pogledajte popis podržanih oglasnih mreža.
Svaka oglasna mreža ima svoju podaci-* atribute koje trebate dodati. Da biste vidjeli koji vam je potreban, kliknite na svoju oglasnu mrežu na gornjem popisu.
je pseudonim , dokumentacija ne govori mnogo o tome osim o tome da se može koristiti umjesto kada je semantički precizniji. Kako Google obećava da će tijekom vremena razvijati AMP komponente povezane s oglasima, to se može promijeniti u budućnosti.
4. pojačalo-piksela
S , možeš dodati piksel za praćenje na vaše AMP HTML dokumente na brojanje prikaza stranice. Ima samo jedan atribut, potreban src atribut u kojem trebate navedite URL koji pripada pikselu za praćenje.
oznaka dopušta standardne zamjene URL-ova, što znači da možeš generira slučajnu vrijednost URL-a za praćenje svakog pojavljivanja.
Pogledajte Vodič za zamjenu URL-a za AMP ako želite koristiti ovu komponentu. Napominjemo da ne možete stilizirati sastavni dio.
Proširene AMP komponente
Kao proširene AMP komponente nisu dio izvođenja JavaScripta, vas uvijek ih je potrebno uvesti u na stranici AMP na koju ih želite koristiti.
Napomena: verzije komponenti mogu se u budućnosti promijeniti, stoga ne zaboravite provjerite trenutnu verziju u dokumentaciji.
5. pojačalo-audio
zamjenjuje HTML5 oznaku i omogućuje izravno ugrađuju HTML5 audio datoteke na AMP stranicama.
Da biste ga koristili, morate navesti src, širina i visina atribute, a možete dodati i tri izborna atributa: auto Play, petlja i prigušen.
To također može biti dobra ideja dodavanje rezervnih audio datoteka za korisnike s preglednicima koji ne podržavaju HTML5. To možete učiniti pomoću alata rezervna atribut i kao i sa spomenutim sastavni dio.
AMP komponenta podržava iste audio formate kao i HTML5 oznaka.
Vaš preglednik ne podržava HTML5 zvuk.
Koristiti , uključite sljedeću skriptu u odjeljka AMP dokumenta:
6. amp-iframe
prikazuje iframe u AMP dokumentima. je sigurniji od uobičajenih HTML iframeova. Stoga jesu prema zadanim postavkama umetnut u sanduk.
Postoje neka pravila koja se odnose na morate proći provjeru valjanosti.
Morate navesti širina, visina, i kutija s pijeskom atributa. kutija s pijeskom atribut je po defaultu prazan, ali mu možete dati različite vrijednosti kako bi izmijeniti ponašanje iframea, na primjerSandbox = "Dopusti-skripte"omogućuje iframeu pokretanje JavaScripta. Možete koristiti i atribute standardnih iframeova.
Dok dimenzije su unaprijed definirane od strane širina i visina atributa, postoji način da se ona promijeni u vrijeme izvođenja. Za korištenje komponentu, dodajte sljedeću skriptu na svoju AMP stranicu:
7. amp-harmonika
harmonika čine česti obrazac korisničkog sučelja u mobilnom dizajnu, jer štede prostor, ali i dalje prikazuju sadržaj na pristupačan način. omogućuje brzo dodajte harmonike na AMP stranice.
Odjeljci harmonike moraju koristiti HTML5 oznaka i trebate biti izravno dijete od označiti.
Svaki odjeljak moraju imati dvoje djece:
jedan za naslov
jedan za sadržaj (sadržaj može biti i slika)
Koristiti proširen atribut na bilo kojem odjeljku koji želite proširiti prema zadanim postavkama.
Odjeljak 1
Sadržaj Odjeljka 1
Odjeljak 2
Sadržaj Odjeljka 2
Odjeljak 3
Slika za odjeljak 3
Za korištenje komponenta AMP dokumenta, uključite sljedeću skriptu:
8. Okvir za pregled-amp
dodaje lightbox na različite elemente (u većini slučajeva, slike) na ubrzanim mobilnim stranicama.
Kada korisnik stupa u interakciju s elementom, primjerice slavine na njemu, lightbox proširuje i ispunjava cijeli okvir za prikaz. Trebaš dodajte gumb ili neku drugu kontrolu koje korisnik može dotaknuti.
Zapamtite to Okvir za pregled-amp može se koristiti samo s oznakom nodisplay raspored.
Za korištenje komponentu, morate ga uvesti sa sljedećim kodom:
9. amp-vrtuljak
Vrtuljci se često koriste u mobilnom dizajnu, kako to dopuštaju prikazati brojne slične elemente (najčešće slike) duž horizontalne osi. AMP rezultati su također prikazani u obliku vrtuljka u Google pretraživanju.
komponenta omogućuje dodavanje vrtuljaka na vašu web-lokaciju. izravno dijete od komponenta će se smatrati stavke vrtuljka. Morate definirati dimenzije vrtuljka s oznakom širina i visina atributi.
Možete koristiti opciju tip odrediti kako prikazati stavke vrtuljka. Ako je tip atribut uzima "karusel" vrijednosti, prikazat će se stavke kao kontinuirana traka (ovo je zadano), dok je „klizi” vrijednost prikazat će stavke u obliku slajdova.
oznaka ima i druge izborne atribute koji vam mogu pomoći da fino podesite rezultat.
U primjeru ispod, primjetite da su i vrtuljak i sve njegove stavke koristiti isto širina i visina vrijednosti.
komponenta zahtijeva dodavanje sljedeće skripte:
10. AMP analitika
može se koristiti prikupljanje analitičkih podataka na AMP stranicama. trenutno, podržava četiri vrste praćenja događaja, međutim, to se može promijeniti u budućnosti:
prikaz stranice
Sidreni klikovi
Odbrojavanje
pomicanje
Koristiti , trebaš dodajte JSON konfiguracijski objekt unutar a
Dodajte sljedeću skriptu u na stranici AMP HTML za uvoz komponenta:
Završne riječi
U ovom postu, imali smo pogled na sve ugrađene AMP komponente, a neke na proširene. Kako su ubrzane mobilne stranice još uvijek nove, mnoge stvari se mogu promijeniti u budućnosti, tako da je vrijedno pratiti dokumentaciju na Githubu ili na službenoj AMP stranici.
Budući da su te AMP komponente otvorenog koda, možete doprinijeti i razvoju stvaranje vlastite komponente. Ako želite vidjeti kako izgleda kompletna AMP stranica s različitim komponentama, možete pogledati ovih nekoliko primjera na Githubu.
