Tartalom
- 01. Világítótorony
- 02. Polimer
- 03. API-k Explorer
- 04. Hebegés
- 05. Google GitHub
- 06. Bábos
- 07. Workbox
- 08. Codelabs
- 09. Színes eszköz
- 10. Design Sprints
- 11. People + AI Útmutató
- 12. Google Segéd
- 13. PageSpeed Insights
- 14. AMP a Google-on
- 15. Google DevTools
- 16. Anyagtervezés
Az interneten végzett munka általában azt jelenti, hogy valamilyen formában vagy formában fog dolgozni a Google-lal. És mivel a Google Chrome utcákat mutat a verseny előtt, a tervezőknek és a fejlesztőknek át kell gondolniuk, hogy projektjük hogyan fog működni a böngészővel. Hogy fog kinézni? Milyen technológiákat támogat, mennyire biztonságos és hogyan fog teljesíteni?
Szerencsére a Chrome olyan eszközöket biztosít, amelyek biztosítják, hogy bármely webhely vagy alkalmazás a legjobb legyen. A DevTools lehetővé teszi a tervezők és fejlesztők számára, hogy betekintést nyerjenek egy weboldalba: manipulálhatja a DOM-ot, ellenőrizheti a CSS-t, kísérletezhet a terveken élő szerkesztéssel, hibakereséssel és a teljesítmény ellenőrzésével. (Itt többet megtudhat ezeknek a Google webes eszközöknek a használatáról, és ha a semmiből indul, olvassa el a legnépszerűbb webépítők listáját is).
De a Google nem csak a böngészőt kínálja. Olyan eszközökkel és forrásokkal rendelkezik, amelyek a tervezési és fejlesztési élet szinte minden aspektusát segítik. Szeretné tudni, hogyan lehetne javítani a teljesítményt? Világítótorony van itt, hogy segítsen. Jobb teljesítményű mobilwebhelyeket szeretne létrehozni? Akkor köszönj az AMP-nek. Gyönyörű PWA-kat szeretne építeni? Ezután a Flutter, az Material Design és a Workbox készen áll a lépésre.
A Google eszközök, erőforrások, könyvtárak és keretrendszerek használatának szépsége, hogy tudja, hogy jól működnek a Chrome böngészővel - a bolygó legnépszerűbb böngészőjével. További eszközökért tekintse meg a webdesign eszközök összefoglalóját.
01. Világítótorony
A teljesítmény kulcsfontosságú tényező a webhelyek sikerében, a világítótorony pedig a Google eszköze a weboldalak minőségének javításához (a megfelelő webtárhely-szolgáltatás is segít). Tehát hogyan használja a Lighthouse-t és mit tehet? A legegyszerűbb formájában futtathatja a Lighthouse-ot az Auditok fülről, és a teljesítmény, az akadálymentesség és a SEO jelölőnégyzetek mellett választhat az asztali vagy a mobil lehetőségek közül, és készíthet egy végleges jelentést a javasolt fejlesztésekkel.
02. Polimer
A Polymer jól ismert a webkomponensekkel végzett munkájáról, de a projekt mára kibővítette repertoárját, hogy átfogja a könyvtárak, eszközök és szabványok gyűjteményét. Mit tartalmaz? A LitElement egy olyan szerkesztő, amely megkönnyíti a web-összetevők meghatározását, míg a lit-html egy HTML-sablonkönyvtár, amely lehetővé teszi a felhasználók számára, hogy a következő generációs HTML-sablonokat JS-ben írják. Ezenkívül talál egy PWA Starter kitet, az eredeti Polymer könyvtárat és webkomponenseket is.
03. API-k Explorer
A Google az API-k hatalmas könyvtárával rendelkezik, amely elérhető a fejlesztők számára, de megtalálni, amire szüksége van, nem könnyű feladat. Itt lép be a Google API Explorerje, hogy segítő kezet nyújtson. Van egy hosszú lista, amelyet végig lehet görgetni, de a gyorsabb hozzáférés érdekében van egy keresőmező az API-lista szűrésére. Minden bejegyzés hivatkozási oldalra mutat, amely további részleteket tartalmaz az API használatáról.
04. Hebegés
Ha szép megjelenésű alkalmazásokat szeretne létrehozni mobilra, webre és asztali számítógépre egyetlen kódbázisból, akkor a Flutter lehet az Ön számára. Az oldal teljes hivatkozás a Flutterrel való együttműködésre és az azzal való építkezésre. Nincs fogalmad, mit tegyél? A dokumentumok a felhasználót a telepítéstől a létrehozásig viszik, rengeteg minta és oktatóanyag segítségével.
05. Google GitHub
Mint a legtöbben tudják, a GitHub a tárhely és tárhely, amely kódokat és fájlokat tárol és oszt meg. És boldogan a Google-nak megvan a maga helye a platformon, több mint 260 tárolóval, amelyeket át kell szitálni. A szűrő segítségével csökkentheti a keresési időt, és közelebb juthat ahhoz az adattárhoz, amellyel játszani szeretne, vagy amelyhez hozzájárulni szeretne.
06. Bábos
A Node-ban beépített Puppeteer olyan magas szintű API-t kínál, amely lehetővé teszi a fej nélküli Chrome-hoz való hozzáférést - hatékonyan a Chrome-ot felhasználói felület nélkül, amelyet a fejlesztők a parancssoron keresztül vezérelhetnek. Tehát mit lehet csinálni Bábjátékossal? Néhány lehetőség áll rendelkezésre képernyőképek és oldalak PDF-fájljainak létrehozására, az űrlapküldés automatizálására és az automatizált tesztelési környezet létrehozására.
07. Workbox
Ha PWA-t szeretne építeni, akkor ez egy remek kiindulópont. A Workbox a JavaScript könyvtárak gyűjteményét biztosítja az offline támogatás hozzáadásához a webalkalmazásokhoz. A mélyreható útmutatók egy része bemutatja, hogyan hozhat létre és regisztrálhat egy szervizmunkás-fájlt, hogyan továbbíthatja a kérelmeket, hogyan használhatja a beépülő modulokat és hogyan használhatja a kötegeket a Workbox-szal. És van még egy sor gyorsítótárazási stratégia is.
08. Codelabs
Szüksége van gyakorlati útmutatásra egy Google-termékkel kapcsolatban? A Codelabs „vezetett, oktató, gyakorlati kódolási élményt nyújt”. A webhelyet kategorikusan és eseményekre bontják, így gyorsan és egyszerűen megtalálhatja azt, amit szeretne. Tartalmazza az Analytics, az Android, az Asszisztens, a kibővített valóság, a Flutter, a G Suite, a Search, a TensorFlow és a virtuális valóságot. Válasszon egy lehetőséget, és szerezze be a kis alkalmazások létrehozásához szükséges kódot és utasításokat.
09. Színes eszköz
A Color Tool egy egyszerű eszköz, amely lehetővé teszi paletta létrehozását, megosztását és alkalmazását a hozzáférhetőség ellenőrzése mellett. A felhasználók választhatnak egy előre meghatározott palettát az Anyag palettáról. Egyszerűen válassza ki a színt, majd alkalmazza az elsődleges színvilágra, váltson a másodlagos lehetőségre, és válassza újra. Végül válassza ki a szöveg színét mindkét sémához. Alternatív megoldásként váltson az Egyéni lehetőségre a színek kiválasztásához. Ezután váltson a Kisegítő lehetőségre, hogy ellenőrizze, hogy minden jó, mielőtt végül exportálja a palettát.
10. Design Sprints
A Design Sprint Kit azoknak szól, akik megtanulják, hogyan kell részt venni a tervezési sprintekben vagy futni. Úgy néz ki, hogy minden tudásbázist lefed, az elsősöktől kezdve a tapasztalt sprint-segítőkig. Ismerje meg a módszertant, vagy ugorjon egyenesen a tervezési szakaszba, ideértve a rövid leírást, az adatok és kutatások gyűjtését, valamint a sprint utáni teendőket. Tartalmaz egy sor erőforrást, például eszközöket, sablonokat, recepteket és lehetőséget a saját módszerének beküldésére. Valószínűleg szükség lesz valahova az erőforrások tárolására és megosztására, így győződjön meg arról, hogy a felhőalapú tárhelyválasztás pontosan megfelel-e.
11. People + AI Útmutató
Ez az útmutató a People + AI Research kezdeményezés munkája a Google-nál, és segítséget kíván nyújtani azoknak, akik emberközpontú mesterséges intelligencia-termékeket szeretnének építeni. Az átfogó útmutató hat fejezetre oszlik, amelyek a felhasználói igényeket, az adatgyűjtést és -értékelést, a mentális modelleket, a bizalmat, a visszajelzéseket és a kecses kudarcokat foglalják magukban. Minden fejezetet gyakorlatok, munkalapok, valamint a megvalósításához szükséges eszközök és források kísérnek.
12. Google Segéd
Ez a Google Assistant fejlesztői platformja, amely útmutatót nyújt a tartalom és szolgáltatások integrálásához a Google Assistanthoz. Bemutatja, hogyan bővítheti mobilalkalmazását, gazdag módon jelenítheti meg a tartalmat a Keresési és Segédprogramok számára, vezérelheti a fényeket, a kávéfőzőket és más eszközöket otthonában, valamint hogyan építhet hang- és vizuális élményt az intelligens hangszórók, kijelzők és telefonok számára.
13. PageSpeed Insights
A PageSpeed Insights elemzi a webes tartalmat, majd javaslatokat kínál a gyorsabb betöltéshez. Egyszerűen adjon meg egy URL-t, nyomja meg az Elemzés gombot, és várja meg, amíg a varázslat megtörténik. Ellenőrizze a Dokumentumokat, hogy jobb betekintést nyerjen a PageSpeed API működésébe és használatának megkezdésébe.
14. AMP a Google-on
Az AMP a Google eszköze a gyorsan betöltődő mobil oldalak létrehozásához, amelyek (remélhetőleg) a keresési rangsor tetejére kerülnek. Ismerje meg, hogyan hozhat létre gyors, a felhasználók által először kezelt webhelyeket, integrálhatja az AMP-t a Google-termékekbe, hogyan használhatja a Google AMP-gyorsítótárat az AMP-oldalak gyorsabbá tételéhez és az AMP-oldalak bevételszerzéséhez más Google-termékekkel.
15. Google DevTools
Minden tervező és fejlesztő tudja (vagy legalábbis tudnia kell), hogy a Chrome közvetlenül a böngészőbe épített eszközkészlettel rendelkezik. A Chrome DevTool eszközei ideálisak az oldalt alkotó elemek ellenőrzésére, a CSS ellenőrzésére, az oldalak menet közbeni szerkesztésére és még sok minden másra.
Az Elements fül a DevTools bevezetése. Megjeleníti a kiválasztott oldalt alkotó HTML-kódot. Bepillantást nyerhet a kiválasztott oldal egyes div vagy címkéinek tulajdonságaiba, és elkezdheti az élő szerkesztést. Ez tökéletes a tervekkel való kísérletezéshez. Ellenőrizze az Elrendezést - függetlenül attól, hogy Flexbox-ot vagy Rácsot használ-e -, és a kapcsolódó betűtípusokat tekintse meg példákkal és vizsgálja meg az animációkat.
Másutt megtekintheti és módosíthatja a CSS-t. Az Elemek panel Stílusok lapja felsorolja a DOM-fa jelenleg kiválasztott elemére alkalmazott CSS-szabályokat. Kapcsolja be és ki a tulajdonságokat (vagy adjon hozzá új értékeket) a tervekkel való kísérletezéshez. Ez a tökéletes eszköz annak biztosítására, hogy minden a várt módon működjön, mielőtt bármilyen változtatást alkalmazna az élő terven.
Hibakeresheti a JavaScript-et, optimalizálhatja a webhely sebességét és ellenőrizheti a hálózati sebességet. Itt egy gyors tipp, amellyel azonnal felgyorsíthatja a munkafolyamatot. Menjen a Források fülre, kattintson az Új kivonat elemre, és adja hozzá a gyakran használt kódot. Nevezze el a kódrészletet, és mentse. Szükség szerint ismételje meg. Most megragadhatja ezt a kódrészletet, ahelyett, hogy újra megírná.
Mint minden jó böngésző, a Chrome is folyamatosan fejlődik, és minden új kiadás új funkciókat hoz. Tudja meg, mi történik a Chrome állapotplatformján
16. Anyagtervezés
A fejlesztést tekinthetjük a Google előnyben részesített gyermekének, de bármit is készít, készít vagy épít, annak jól kell kinéznie, és olyan élményt kell adnia a felhasználónak, amely arra készteti, hogy használja. Az anyag egy újabb kiegészítés a Google istállóhoz, de olyan tervezési rendszer, amely egy létfontosságú formatervezési készletgé érlelődött.
Mint minden jó tervezési rendszernek, ennek is megvannak a maga útmutatásai, amelyeket meg kell vizsgálnia, mielőtt belevágna az izgalmasabb dolgokba. Áttekintést kaphat a különböző elemek használatáról, mi az Anyag-témakör, hogyan lehet megvalósítani egy témát és használhatósági útmutatókat, beleértve az akadálymentességet is. Másutt van betekintés az Material Foundation-be, amely magában foglalja a tervezés legfontosabb területeit, mint például az elrendezés, a navigáció, a szín, a tipográfia, a hang, az ikonográfia, a mozgás és az interakció. Minden kategória feltárja az adatait és tilalmait, és azt, hogy hol érdemes megfontolnia az óvatosságot. Hogy képet alkothasson a várakozásokról, az Elrendezés kategória szakaszokat kínál az elrendezés megértéséről, a pixelsűrűségről, az adaptív elrendezéssel való együttműködésről, beleértve oszlopokat, ereszcsatornákat és margókat, töréspontokat, felhasználói felület régiókat és térköz-módszereket, csak néhányat említve.
A Tervezés szakaszon túl található az Összetevők, amely a terv elkészítéséhez szükséges fizikai építőelemeket tartalmazza. Mit tartalmaz itt? Gombok, szalaghirdetések, kártyák, párbeszédpanelek, elválasztók, listák, menük, haladásjelzők, csúszkák, snackbars (ezek rövid üzenetek az alkalmazás folyamatairól a képernyő alján), fülek, szövegmezők és eszköztippek. Kétségtelenül az összetevők átfogó gyűjteménye.
A fejlesztőket pedig nem felejtették el, részletekkel és útmutatókkal a különböző platformok - Android, iOS, Web és Flutter - felépítéséhez. És végül, van egy oldal, amely különféle erőforrásoknak szenteli a választott terv megvalósítását.
Ez a cikk eredetileg a net magazinban jelent meg. Vásárolja meg a 326. számot.
