Hogy spóroljon az időt, mert nincs ideje gondolkodni, hogy mi legyen amivel kezdetileg üres template-t tudnának létrehozni és minden legyen olyan benne ami fontos, mert későbbiekhez kelleni fog.
Itt van megoldás, a generátor segítségével lehet pipálni amire szüksége van, generálja a HTML forráskódot és azt másolhat bármi fejlesztői eszközbe. Innentől boldogan építhet egy profi, villámgyors AMP-os weboldalt.
Kétféle megoldás létezik:
- online generátor: https://amp.dev/boilerplate/
- szoftver: Visual Studio Code, innen letölthető: https://code.visualstudio.com/download
- kiegészítő programok, amelyek AMP-hoz kelleni fog, itt megtalálhatja
A második megoldás jobb, érdemes ezt használni, mert gyorsabban lehet vele dolgozni, hisz minden funkciók kiegészített telepített programok miatt egyszerre benne vannak, főleg validátor, mert folyamatosan jelzi, hogy mit rontotta el.
Négyféle lehetőséget biztosít az online generátor:
- websites
- stories
- ads
Websites (Weboldal)
Létrehozhatja az életében először és kezdőként weblapot, mely elősegíti, hogy fontos AMP HTML elemek mint fent legyenek.
Itt megtekinthető egy weboldal felépítés (AMP HTML specifikáció), minden elemek alá tettem egy kommentet, hogy mi jelent, miért szükséges és miért olyan fontosak.
AMP HTML dokumentum minta - alapszabályok szerint
Stories (Dinamikus történet)
Létrehozhatja az életről szóló történetét. Hasonlóan mint a facebook-on található “történetek” és dinamikus, úgy működik mint egy filmtekercs és ez idő alatt több képet is lapozgathatja.
Ads (Kampány hirdetés)
Ez egy hirdetés, amivel villámgyors, biztonságos hirdetéseket létrehozhatja a weboldalára.
Email (Dinamikus email)
Létrehozhatja dinamikus email-jét ez segítségével.Visual Studio Code - asztali szoftveres eszköz
Itt letöltheti és telepítheti a szoftvert az asztalra.
Minden operációs rendszert támogat, tehát win, linux és mac egyaránt.
Illetve itt is lehet több kiegészítő szoftvert telepíteni, azokat amire AMP-hoz szerint szükségesek.
Természetesen ezeket mind ingyenesen le lehet tölteni.
AMP fejlesztéshez szükséges kiegészítő programok:
AMP Monitoring Extension
Ez egy megfigyelő eszköz, amely szerkesztéseket és teszteléseket figyeli.
AMP Boilerplate
Ez a minta (AMP HTML Specifikáció), amiket létrehozhatja magától ez segítségével: https://www.ampproject.org/docs/fundamentals/spec#sample-document
amphtml-validator
Ez jobb, kényelmesebb, mert folyamatosan vizsgálja és azonnal jelzi, amikor talál hibát. Ez sokkal jobb, mint chrome böngészőben egyesével URL-be beírni #development=1-t és ezt használni.
Szívem szerint jobban támogatom ez a kiegészítő programot használni, mint Chrome böngészőben unalmasan kézzel beleírni és megvizsgálni.
HTMLAMP
Amikor új fájlt létrehozni és a parancssorba beírja html:amp-t és akkor létrehoz egy gyors előkészített fontos AMP HTML specifikációt.
Google AMP Tools (Visual Studio Code keresőlistában sajnos még nem szerepel)
Ez a gyors parancssor használatával gyorsan lehet programozni, mert minden elemenként magától listázza és kiválaszthatja, amit szeretne megjeleníteni. Pl. amp-i, akkor magától ettől kezdve az “i” betű alapján listázza a többit: amp-img, amp-iframe, amp-install-serviceworker, amp-instagram és ezek közül választhatja.
Hátrány: Sajnos kiegészítő programok lista közül nem szerepel, hanem bonyolultan lehet telepíteni rá.
Összefoglalásképpen
Én jobban szeretem az asztali eszközt, mert több lehetőségek vannak, mint az online-ben, illetve vele gyorsabban lehet haladni a munka.
Lényeg, hogy érdemes használni egy előrekészített template sablont, hogy apróságok nehogy lemaradjon róla.
A Google AMP Tools kiegészítőt mindenképpen használjon, mert azzal is gyorsabban elérhet a munka.
0 Megjegyzések