Először a web.dev-t, aztán picivel később az amp.dev-t is nemrég indítottak, amivel a felhasználó az életében először egy AMP - webes komponens keretrendszer használatával kezdőként simán, könnyen létrehozhatja egy profi, villámgyors weboldalt, illetve tanulmányozhatja az egész anyagok segítségével.
Itt megtekinthető az új hivatalos oldal: https://amp.dev
Sok minden megújultak, megszűntek az alábbi régi oldalak: https://www.amptemplates.io/ és https://www.ampproject.org, ezek át lettek átirányítva az új amp.dev reveláns oldalakra.
Itt is rengeteg sok nagyszerű oktatói anyagok vannak, ahol forráskódok vannak, illetve minden ami kell és mellette találhatóak a példák (examples), mint demo oldalak, ahol lehet megnézni az élőben, hogy a bizonyos forráskódok miként működnek.
Jellemzések ez a Google AMP technológiáról
Leegyszerűsített kódolás, kizárólag csak saját AMP-s Javascript aszinkron (async) használata, szigorúan CSS fájlméretének 50kbyte a limit, ezeknek köszönhetően nagyon gyorsan töltődnek be az oldal. Nemcsak a felhasználók számára, hanem a Google is, mert a Google szerverre ezeknek köszönhetően könnyen tárolhatja hozzájuk a AMP weboldal alatt fájlokat, így ki fog emelni a kereső találati listában.
4db amire lettek speciálódva a kategória szerint:
AMP Websites (AMP weboldal)
AMP Stories (AMP történet)
AMP Ads (AMP hirdetés)
AMP Email (AMP interaktív, dinamikus email)
Oktatási anyagokról némi információ
Útmutatók és oktatóanyagok
Itt sok minden információkat megtalálhatja, amely kezdő szinttől haladó szintig, amihez szükséges az AMP weboldalak létrehozásához.
AMP-s fejlesztési munkafolyamata:
Kezdés:
Betanítás alatt az első lépésnél szokásos szerint először Hello World oldalt létrehozzuk és megismertetni vele az AMP HTML felépítését.
Integrálás:
Itt van az útmutató, ez segítségével kombinálhatja, amik nem AMP oldalak, azokat megmutatja, hogy miként lehet integrálni azokat.
Oktatói anyagok:
Sima HTML- ról AMP HTML specifikációra átalakításához megismerhedheti, illetve AMP működésének alapjait elsajátíthatja.
Sebesség optimalizálás és statisztikai mérés:
Itt megtudhatja, hogy miként gyorsítsa fel az oldala betöltési sebeségéről. Megismerheti a webanalitikai beállításokat és létrehozásokat.
Fejlesztés, webdesign, sitebuilder:
Elrendezheti a webhely igényeit, ami minden tartalomhoz és funkciókhoz szükséges.
Létezik olyan CMS, amiben van AMP?
Igen, léteznek. Itt megtudhatja teljes listát:
https://amp.dev/community/platform-and-vendor-partners
Ezek közül jobban ismerem és használok őket: Drupal és WordPress
Angolul tananyag:
https://amp.dev/documentation/guides-and-tutorials/
Az AMP komponens katalógusok
Itt a lehetőség: funkciókat hozzáadni, akár egyet vagy akár többet felhasználhat a kész AMP komponens használatával elkészítheti weboldalára.
Rengeteg funkciók vannak a katalóguson szerint, amelyek az ABC sorrend szerint megtalálhatja, amit keres (egyik baloldalon a menüsorban, másik tartalom alá találhatóak egy lista).
Amikor az ügyfél olyan plugin-t szeretne volna, de AMP JS “törvény” miatt nem enged, ezért itt lehet megkeresni, hogy miként lehet megoldani az által kiválasztott “nem engedett” plugin helyett funkciókat. Ráadásul léteznek az “élő nézet” példák is, amiket a fejlesztők megtudnának mutatni az ügyfélnek, mielőtt belevágnának az idő- és pénzspórolás miatt.
Angolul tananyag:
https://amp.dev/documentation/components/
Rengeteg AMP-es példák vannak, amiket megismerheti
Megismerheti a gyakorlati bevezetéstől - vizuális effektekig a kódokra és az élő demo-ra (élő mintákra) való összpontosítva dolgokat.
Itt simán lehet átnézni, hogy milyen funkciókat lehetőséget biztosít és ez alapján kezdőként elkezdheti a hozzátartozó példákat megismerkedni.
Összegyűjtöttem kategóriákat és egyesével az alá leírtam, hogy mi van benne és miként lehet csinálni vele.
Kategóriák szerint:
- introduction (bevezetés):
Bemutatja, hogy egy szigorú validator szerint mi a helyes az első AMP HTML fájl létrehozásakor és weboldal építésekor - components (komponens):
Saját AMP Javascript és egyébek használata kötelező miatt, itt biztosan megtalálhatja, amivel behelyesítheti: pluginok, font, form, közösségi oldalak beillesztése, stb - guides (útmutatók):
Itt megismerkedheti hreflangot a lokalizálás miatt, illetve megfelelő hivatkozás címkézéshez rel=”canonical” és rel=”alternate” tagokat is. Az URL Api és Google AMP Cache anyagok is itt vannak - advertising-analytics (hirdetés és analitika):
Itt megtudhatja, hogy hogy kell létrehozni a hirdetést és az analitikát, illetve beállítani - e-commerce (elektronikus kereskedelem):
Ha szeretne olyan honlapot készíteni, mint webshopot, mint webáruházat, akkor itt minden segítséget megtalálhatja - interactivity-dynamic-content (interaktivitás dinamikus tartalom):
Itt rengeteg okoskodási dinamikus megoldások vannak, pontosabban olyan az amikre nincs szükség külön plugin js-re. Biztosan megtalálhatja, amit szeretne - multimedia-animations (multimédiás animációk):
Minden ami mediához vagy galériához szükséges, itt megtalálhatja a megoldásokat - news-publishing (hírek publikáció):
Bemutatja, ami hírekhez vagy bloghoz szükséges funkciókat, amivel segíti, hogy több forgalmat hozzon - personalization (a személyre szabott):
Térképek létrehozásakor pontosíthatja, finomíthatja. Illetve AMP alatt bejelentkezési folyamatot is tud biztosítani: OAuth2 Login -> hasonló mint OpenID - style-layout (stílus elrendezés):
Itt inkább 2db-ot bemutatja, hogy az egyik képeket miként rendezheti, másik meg tartalmak lenyílót és lapozást létrehozhatja és beszabhatja - user-consent (felhasználói hozzájárulás):
Itt Cookie illetve Adatvédelem miatt érdemes megismerkedni, hogy hogy lehet létrehozni például a felugró ablakot - visual-effects (vizuális effektek):
Hogy jobban feldobjon a vidámságot, amikor megnézi weblapot a felhasználó, akkor itt megismerkedheti, mert rengeteg effektus megoldások vannak
Angolul tananyag:
https://amp.dev/documentation/examples/
Ingyenes AMP tanfolyamok az online-n
Ha akár kezdő, akár tapasztalt fejlesztők, aki szeretne megismerkedni, tanulni és elsajátítani ez az új technológiát, sőt lehetőleg ingyenesen végezheti el, akkor jó helyen van, hisz itt sok minden megtalálhatja, amikre szüksége lesz.
Angolul tananyag:
https://amp.dev/documentation/courses/
Először itt érdemes elsajátítani a kezdő fejlesztő egy könnyen elkészíthető sablonokkal weblapot
Az újonc felhasználóként (fejlesztőként) gyorsan elkezdheti egy kész kialakítást. Itt van választék, ingyenesen le lehet tölteni és elkészítheti egy egyszerű weblapot. Nemcsak weblapokat, hanem hirdetési bannereket is.
Minden eszközökre tökéletesen optimalizálva vannak.
Későbbiekben ez segítségével lehet nagy komplett, profi, egyedileg weblapokat készítheti.
Angolul példák, élőnézetek:
https://amp.dev/documentation/templates/
Eszközök
Az AMP-s weboldal létrehozásakor és beállításakor szükséges eszközöket megismerheti.
Háromféle kategória szerint:
- Létrehozás és tervezés
- CMS és platformok
- Fejlesztői eszközök
Itt letöltheti szoftvert és elkezdhet dolgozni, amikben olyan programot, amit az AMP támogatja.
Angolul programok, eszközök:
https://amp.dev/documentation/tools
Rengeteg új funkciók bővültek, amiket platformokat támogatják a partnerek
Itt megtudhatja, hogy melyik funkciók az AMP-t támogatja a platformok szerint. Ez nagyon fontos, hisz projektek elkezdése előtt érdemes megvizsgálni, hogy melyik szabad és melyik nem. Különben káosz lesz.
Ads (hirdetések)
171db
Ezek közül legjobban ismerek és használok: AdSence, Google Ads, Facebook Ads, Yahoo
Webanalitika (mérések és statisztikák)
52db
Ezek közül legjobban ismerek és használok: Google Analytics, Google Tag Manager, Facebook Pixel
Keresőmotorok
16db
Ezek közül legjobban ismerek és használok: Google, Bing, Yahoo, LinkedIn, Pinterest, Twitter
CMS (Tartalomkezelő rendszer)
15db, abból 2db-ot ismerek és használok, azok pedig Drupal és WordPress, ez jó hír nekem, amiért támogatják.
Audio / Video
18db
Ezek közül legjobban ismerek és használok: Vimeo és Youtube
2019. június 07.-én számoltam és ez az időpont alatt jegyeztem fel, hogy később tudjuk összehasonlítani, mivel és mennyivel bővülnek majd később.
Amiket használok az én munkáim alatt, ezek szerepelnek az által AMP-t támogatott platformok, ez nagyszerű.
AMP-t támogatott platformok lista:
https://amp.dev/community/platform-and-vendor-partners
Az AMP projekt útiterv
Aki szeretne nyomon követni a projekteket, akkor érdemes oda megnézni, mert folyamatosan hírülnek, hisz ez minden közönség számára létrehozták és együtt tárgyalhatnak az AMP technológiáról.
Itt megtekinthető a AMP fejlesztők klub a github-on keresztül:
https://github.com/ampproject/amphtml/projects/43
Blog - itt nyomon követheti az angolul újdonságokról
Érdemes követni az angolul szakmai blogcikket, mert folyamatosan posztolnak bármit, amelyek az AMP technológiához kapcsolódik a téma.
AMP fejlesztői közösségi blog: https://blog.amp.dev/
Saját Google AMP webshop weboldalam - autókereskedelem
Gyorsan elkészítettem ez az anyag alapján az első demo változat egy kis webáruház weboldalt, mely GPL2 vagy GPLv3 licenccel megnézhetik.
Bár az AMP esetén nem ez az első, amit készítettem, viszont a DEMO esetén igen ez lenne az első. Egyelőre csak technikailaggal foglalkoztam, marketinggel (kulcsszavas és tartalom) pedig NEM, mert ez egy DEMO változat.
Website Name: Car dealers webshop (Autókereskedő webáruház)
Website URL: https://amp.juszkocs.hu
Description: Google AMP - DEMO website ( Google AMP élőnézet (példa) weboldal)
Category: Ecommerce (Elektronikus kereskedelem)
Sector: Car dealers (Autókereskedő)
Version: 1.0
Author: Juszkó Csaba, JUSZKOCS
Author URL: https://www.juszkocs.hu
License: GPL2 vagy GPLv3 -> egyelőre még nincs döntés, még gondolom.
Részletesebben leírtam minden a technikáról és fontos tudnivalókat, itt megtekinthető:
Google AMP webshop
Összefoglalásképpen
Nagyon örülök, hogy végre sokat fejlödtek ez a Google AMP technológiai téren, hisz sok új funkciók bővültek, azokat amelyek még régebben nem voltak, most már igen. Ez nagyon jó hír.
Emiatt elkezdtem bátran érdeklődni, illetve folyamatosan fejlesztem a tudásomat, hisz nagyon lesz szükség rá egy villámgyors, könnyen felhasználóbarát oldalra, mert akkor több forgalmat hozna és Google értékelni fog, mert csak AMP képes hozni belőle jót, mint bármi.
Az ügyféllel való egyeztetési stratégia
Ahogy összefoglalva írtam, hogy bővültek a platformok támogatottságok és ennek köszönhetően elkezdem érdekelni, hogy minél több AMP-s weboldalt elkészíteni.
Bátran mehet, nyugodtan!
Sőt ehhez kelleni fog az ügyféllel való egyeztetési stratégia, mint folyamatmenedzsment.
Csak annyi figyelni kell és felkészülni rá, hogy mondjuk neki, illetve figyelmeztetni az ügyfelet, hogy:
- Ne legyen túl játékosan dizájnolva a szigorú CSS fájl mérete 50kbyte a limitje miatt
- Sajnos nem lehet használni külön JavaScripteket, kizárólag csak AMP-s saját JavaScripteket használhatja, persze csak ami AMP-ben van
Ez a két legfontosabb dolgot nagyon jól, alaposan meg kell tervezni egy jól átgondolt stratégiai folyamatot, hogy elkerüljük a későbbiekben esetleg problémákat. Hisz különben az ügyfél nem fog megérteni, hogy miért nem lehet 50kbyte-nél több és miért nem lehet más plugin js-t felhasználni, mert Google AMP szigorú szabályai miatt érvénytelen lesz a weboldal eredménye.
Felhasznált források:
0 Megjegyzések