10 viktige akselererte mobile sider (AMP) -komponenter du bør vite

Accelererende Mobile Pages eller AMP er Googles initiativ for å gjøre mobilnett raskere . For å oppnå dette målet, begrenser AMP-standardene hvordan du kan bruke HTML, CSS og JavaScript, og administrerer lasting av eksterne ressurser, for eksempel bilder, videoer og annonser via egen kjøretid .

Dette innebærer at du ikke kan bruke enten tilpassede (forfatter-skrevet eller tredjepart) JavaScript eller noen ressursrelaterte HTML-elementer som bilder og videoer i dine AMP-dokumenter.

For å bygge bro over gapet mellom brukernes behov og best ytelsespraksis, har AMP bestemte komponenter du kan bruke i stedet for disse ekskluderte elementene .

AMP-komponenter er spesifikke HTML-koder . De oppfører seg som vanlig HTML-koder: de har åpnings- og lukkekoder, attributter, og de fleste av dem kan styles med CSS. De kan lett gjenkjennes, da de alltid starter med prefikset .

Det finnes to typer AMP-komponenter: innebygde og utvidede komponenter.

Innebygd AMP-komponenter

Innebygget er bygget inn i AMPs JavaScript-kjøretid, så du trenger ikke å inkludere dem separat.

1. amp-img

erstatter tag i AMP HTML-dokumenter. Du må legge til src og alt attributter akkurat som når du jobber med det vanlige element.

har også to andre nødvendige egenskaper: du må alltid angi width og høydeattributtene i heltallpikselverdier, da dette gjør at AMP-kjøretiden kan beregne oppsettet på forhånd .

Hvis du vil gjøre bildet responsivt, legger du til layout="responsive" attributt. Layoutattributtet styrer oppsettet i AMP-dokumenter, og det kan legges til noen AMP-komponenter (lære mer om dette på AMP Layout System).

Du kan også bruke srcset attributtet på tag for å angi forskjellige bilder for forskjellige visningsporte og pikseldensiteter. Det fungerer på samme måte som med ikke-AMP-bilder.

2. amp-video

kan brukes til å legge inn HTML-videoer direkte i AMP HTML-dokumenter. Det erstatter

Kilden til videoen må vises via HTTPS-protokollen . Du må legge til width og høydeattributtene, akkurat som med komponent.

De taggen har mange valgfrie attributter, for eksempel autoplay og poster som du kan spesifisere for å finjustere hvordan HTML5-videoen din vises.

støtter mp4, webm, ogg, og alle andre formater som støttes av HTML5

Hvis du vil, kan du også legge til tilbakevendingsvideoer for brukere med nettlesere som ikke støtter HTML5-videoer, ved hjelp av fallback og HTML-tagg.

Nettleseren din støtter ikke HTML5-videoer.

3. amp-ad og amp-embed

gir deg iframe sandkasser der du kan vise annonsene dine . Du må vise annonsene dine via HTTPS-protokollen .

Du kan ikke kjøre skript som leveres av annonsenettet ditt selv. I stedet kjører AMP-kjøretiden JavaScript for det oppgitte nettverket inne i sandkassen. Du trenger bare å spesifisere hvilket nettverk du bruker, og legge til dataene dine.

De komponenten krever at du legger til dimensjonene til annonsen ved hjelp av width og høydeattributtene.

Du kan definere annonsenettverket du bruker med type attributtet. Se listen over støttede annonsenettverk.

Hvert annonsenettverk har sine egne data-* attributter du også må legge til. Hvis du vil se hvilken du trenger, klikker du på annonsenettet ditt i listen ovenfor.

er aliaset av , dokumentasjonen sier ikke mye om det annet enn det kan brukes i stedet for når det er semantisk mer nøyaktig . Som Google lover å utvikle annonserelaterte AMP-komponenter over tid, kan dette endres i fremtiden.

4. amp-pixel

Med , kan du legge til en sporingspiksel i HTML-dokumentene dine for å telle sidevisninger . Den har bare ett attributt, det nødvendige src attributtet, der du må spesifisere nettadressen som tilhører sporingspikselet .

De taggen tillater standard URL-substitusjoner, noe som betyr at du kan generere en tilfeldig URL-verdi for å spore hvert inntrykk.

Se AMPs URL-byttehåndbok hvis du vil bruke denne komponenten. Legg merke til at du ikke kan stile komponent.

Utvidede AMP-komponenter

Siden utvidede AMP-komponenter ikke er en del av JavaScript-kjøretiden, må du alltid importere dem i delen av AMP-siden du vil bruke dem på.

Merk: komponentversjoner kan endres i fremtiden, så ikke glem å sjekke gjeldende versjon i dokumentasjonen.

5. amp-audio

erstatter

For å bruke det, må du angi attributene src, width og height, og du kan også legge til tre valgfrie attributter: autoplay, loop og muted .

Det kan også være en god ide å legge til lydbackfiler for brukere med nettlesere som ikke støtter HTML5. Du kan gjøre dette ved å bruke fallback og tag, akkurat som med det nevnte komponent.

De AMP-komponent støtter de samme lydformatene som

Nettleseren din støtter ikke HTML5-lyd.

Å bruke , inkludere følgende skript i delen av ditt AMP-dokument:

6. amp-iframe

viser en iframe i AMP-dokumenter. har blitt gjort for å være sikrere enn vanlige HTML iframes. Derfor er de som standard sandkassert .

Det er noen regler knyttet til Du må følge for å bestå validering.

Du må angi width, height og sandbox . sandbox er tomt som standard, men du kan gi det forskjellige verdier for å modifisere oppførselen til iframe, for eksempel sandbox="allow-scripts" lar at iframe kjører JavaScript. Du kan også bruke attributter av standard iframes.

Mens dimensjonene til er forhåndsdefinert av width og høydeattributene, er det en måte å endre størrelsen på i kjøretid. For å bruke komponent, legg til følgende skript på AMP-siden din:

7. amp-accordion

Accordions utgjør et hyppig brukergrensesnitt i mobildesign, da de sparer plass, men fremdeles viser innholdet på en tilgjengelig måte. gjør det mulig å raskt legge til akkordjoner på AMP-sider.

Seksjoner av trekkspillet må bruke

HTML5-tag, og må være de direkte barna til stikkord.

Hver seksjon må ha to direkte barn :

1. en for overskriften
2. en for innholdet (innholdet kan også være et bilde)

Bruk det expanded attributtet på et hvilket som helst avsnitt du vil utvide som standard.

Seksjon 1 
 Innhold av Seksjon 1 
Seksjon 2 
Innhold av § 2
Seksjon 3 

For å bruke komponent i ditt AMP-dokument, inkluderer følgende skript:

8. amp-lightbox

legger til en lysboks til forskjellige elementer (i de fleste tilfeller bilder) på Accelerated Mobile Pages.

Når brukeren samhandler med elementet, for eksempel knapper på den, utvides lysboksen og fyller hele visningsporten . Du må legge til en knapp eller en annen kontroll som brukeren kan trykke på.

Merk at amp-lightbox kun kan brukes med nodisplay oppsettet.

 Utvide 

For å bruke komponent, må du importere den med følgende kode:

9. amp-carousel

Karuseller brukes ofte i mobil design, da de tillater å vise mange liknende elementer (oftest bilder) langs den horisontale akse. AMP-resultatene presenteres også i et karusellformat i Google Søk.

De komponent gjør det mulig å legge karuseller til nettstedet ditt. De direkte barna til komponent vil bli betraktet som karusellens gjenstander . Du må definere karusellens dimensjoner med width og høydeattributtene.

Du kan bruke den valgfrie type attributt for å bestemme hvordan du skal vise karusellelementene . Hvis type attributt tar "carousel" -verdien, vil elementene bli vist som en kontinuerlig stripe (dette er standard), mens "slides" -verdien vil vise elementene i lysbildesformat .

De tag har også andre valgfrie attributter som kan hjelpe deg med finjustering av resultatet.

I eksemplet nedenfor merkes at både karusellen og alle dens gjenstander bruker samme width og height .

De komponent krever tillegg av følgende skript:

10. amp-analytics

kan brukes til å samle analysedata på AMP-sider. For tiden, støtter fire typer sporing hendelser, men dette kan endres i fremtiden:

1. Sidevisning
2. Anker klikk
3. Timer
4. rulle

Å bruke , må du legge til et JSON-konfigurasjonsobjekt inne i a

Legg til følgende skript til delen av AMP HTML-siden din for å importere komponent:

Endelige ord

I dette innlegget hadde vi en titt på alle innebygde AMP-komponenter, og noen av de utvidede. Som akselererte mobilsider er fortsatt nye, kan mange ting endres i fremtiden, så det er verdt å holde øye med dokumentasjonen enten på Github eller på den offisielle AMP-siden.

Siden disse AMP-komponentene er åpen kildekode, kan du også bidra til utviklingen, selv ved å lage din egen komponent . Hvis du vil se hvordan en komplett AMP-side ligner på forskjellige komponenter, kan du sjekke ut disse få eksemplene på Github.

Hva er så bra (og ikke) om freelancing

Hva er det å hate om freelancing? Du kommer til å følge hvor din lidenskap ligger, det er uovertruffen fleksibilitet på hvordan du klarer å styre din egen tid og jobb, og viktigst - ingen sjef puster nede i nakken hele dagen ! Du er din egen sjef! Du ville ikke ha det på en annen måte, ville du?Vel, f

(Tekniske og design tips)

Wired UI - Den beste gratis Bootstrap 4 UI-settet

Med den stigende populariteten til Bootstrap 4, er det ingen overraskelse at utviklere hopper over hverandre for å publisere sine egne plugins og add-ons .Den nåværende versjonen av Bootstrap har mange ressurser, inkludert mange gratis temaer og gratis plugins . Vil BS4 se samme bølge av tredjepartsressurser?Så

(Tekniske og design tips)