10 Důležité komponenty zrychlených mobilních stránek (AMP), které byste měli znát

Zrychlené mobilní stránky nebo AMP je iniciativou společnosti Google mobilní web rychleji. K dosažení tohoto cíle standardy AMP omezují, jak můžete používat HTML, CSS a JavaScript, a řídí nakládání s externími zdroji, například obrázky, videa a reklamy prostřednictvím vlastního runtime.

To znamená, že vy nelze použít jakýkoli vlastní JavaScript (napsaný autorem nebo třetí stranou) nebo jakékoli HTML elementy týkající se zdrojů, jako jsou obrázky a videa ve vašich dokumentech AMP.

AMP má k překlenutí propasti mezi potřebami uživatelů a nejlepšími výkonovými postupy specifických komponent můžeš použití namísto těchto vyloučených prvků.

Komponenty AMP jsou specifických HTML tagů. Chová se podobně jako běžné HTML tagy: mají otevírací a zavírací značky, atributy a většina z nich může být stylizována s CSS. Mohou být snadno rozpoznány, stejně jako oni vždy začínejte s amp- předpona.

Existují dva typy komponent AMP: vestavěný a prodloužena Komponenty.

Vestavěné komponenty AMP

Vestavěné jsou zabudovány do runtime programu AMP, takže je nemusíte zvlášť zahrnout.

1. amp-img

nahrazuje štítek v dokumentech AMP HTML. Musíte přidat src a alt atributy, jako když pracujete s pravidelným živel.

má také dva další požadované atributy: vždy potřebujete specifikujte šířka a výška atributy v celočíselných hodnotách pixelů, protože to umožňuje běh programu AMP předem vypočítat rozložení.

Pokud chceš aby obraz odpovídal, přidat layout = "responzivní" atribut. rozložení atribut ovládá rozvržení v dokumentech AMP a může být přidán do všech komponent AMP (více se o tom dozvíte v systému rozvržení AMP).

Můžete také použít srcset atribut tag určete různé obrázky pro různé výřezy a hustoty pixelů. Funguje stejným způsobem jako u jiných snímků než AMP.

2. amp-video

lze použít přímo vložit HTML videa v dokumentech AMP HTML. Nahrazuje v souborech AMP. štítek líný načte videa za účelem optimalizace výkonu.

Zdroj videa musí být obsluhován protokolem HTTPS. Musíte přidat šířka a výška atributy, stejně jako u součástka.

tag má mnoho volitelných atributů, jako je např automatické přehrávání a plakát , které můžete specifikovat pro jemné doladění způsobu zobrazení videa HTML5.

podporuje mp4, webm, ogg a všechny ostatní formáty podporované HTML5

Pokud chcete, můžete také přidat nouzová videa pro uživatele s prohlížeči, kteří nepodporují videa ve formátu HTML5, pomocí ustoupit atribut a HTML tag.

  
 
Váš prohlížeč nepodporuje videa ve formátu HTML5.
 
    

3. amp-ad a amp-embed

vám poskytne karantény iframe ve kterém můžete zobrazte své reklamy. Musíte zobrazovat reklamy prostřednictvím protokolu HTTPS.

Skripty dodané reklamní sítí nelze spustit sami. Místo toho běh programu AMP provede JavaScript dané sítě uvnitř karantény. Vy pouze určit, kterou síť používáte, a přidejte svá data.

součást vyžaduje přidejte rozměry reklamy za použití šířka a výška atributy.

Můžete definovat reklamní síť, kterou používáte typ atribut. Viz seznam podporovaných reklamních sítí.

Každá reklamní síť má vlastní data-* atributy, které potřebujete také přidat. Chcete-li zjistit, který z nich potřebujete, klikněte na výše uvedeném seznamu na svou reklamní síť.

je alias , dokumentace o tom neříká nic jiného než místo toho když to je sémanticky přesnější. Vzhledem k tomu, že společnost Google slibuje, že časem bude vyvíjet komponenty související s reklamou AMP, může se to v budoucnu změnit.

4. amp-pixel

S , můžeš přidat sledovací pixel na vaše dokumenty ve formátu AMP HTML počet zobrazení stránky. Má pouze jeden atribut, požadovaný src atribut, ve kterém potřebujete specifikujte adresu URL patřící k sledovacímu pixelu.

tag umožňuje standardní náhrady URL, což znamená, že můžete generovat náhodnou hodnotu URL sledovat každé zobrazení.

Chcete-li tuto komponentu používat, přečtěte si Příručku pro nahrazování adres URL adresy AMP. Všimněte si, že nelze styl součástka.

Rozšířené komponenty AMP

Jako rozšířené komponenty AMP nejsou součástí běhového prostředí JavaScriptu, vy vždy je třeba dovážet v sekce AMP, na které chcete pouľít.

Poznámka: verze komponent se mohou v budoucnu změnit, takže nezapomeňte zkontrolujte aktuální verzi v dokumentaci.

5. amp-audio

nahrazuje HTML5 tag a umožňuje přímo vkládat zvukové soubory HTML5 na stránkách AMP.

Chcete-li jej použít, musíte zadat src, šířka a výška a můžete také přidat tři volitelné atributy: automatické přehrávání, smyčka a ztlumené.

Také to může být dobrý nápad přidat záložní zvukové soubory pro uživatele s prohlížeči, kteří nepodporují HTML5. Můžete to udělat pomocí ustoupit atribut a tag, stejně jako u výše uvedeného součástka.

Komponenta AMP podporuje stejné audio formáty jako HTML5 tag.

  
 
Váš prohlížeč nepodporuje zvuk HTML5.
 
    

Použít , zahrnout následující skript do část dokumentu AMP:

6. amp-iframe

zobrazí iframe v dokumentech AMP. byl vytvořen tak, aby byl bezpečnější než běžné HTML iframe. Proto jsou ve výchozím nastavení.

Tam jsou některá pravidla se vztahovala k musíte postupovat tak, abyste prošli validací.

Musíte zadat šířka, výška, a pískoviště atributy. pískoviště atribut je ve výchozím nastavení prázdný, ale můžete mu dát různé hodnoty modifikovat chování iframe, napříkladsandbox = "povolit skripty"umožňuje iframe spouštět JavaScript. Můžete také použít atributy standardních iframe.

Zatímco rozměry jsou předdefinovány šířka a výška atributů, existuje způsob, jak ji změnit v běhu. Použití komponentu, přidejte následující skript na stránku AMP:

7. amp-harmonie

Akordeony představují častý vzor uživatelského rozhraní v mobilním designu, protože šetří místo, ale stále zobrazují obsah přístupným způsobem. umožňuje rychle přidat harmoniky na stránky AMP.

Části akordeonu musí používat

  
 
Sekce 1
 
Obsah oddílu 1. \ T
 
 
 
Sekce 2
 
Obsah oddílu 2. \ T
 
 
 
Oddíl 3
 
    
 
  

  Rozšířit