Nilalaman
- 01. Parola
- 02. Polimer
- 03. Mga API Explorer
- 04. Flutter
- 05. Google GitHub
- 06. Puppeteer
- 07. Workbox
- 08. Codelabs
- 09. Kulay ng Kasangkapan
- 10. Mga Disenyo ng Sprint
- 11. People + AI Guidebook
- 12. Google Assistant
- 13. Mga Pananaw sa PageSpeed
- 14. AMP sa Google
- 15. Google DevTools
- 16. Materyal na Disenyo
Ang pagtatrabaho sa web ay karaniwang nangangahulugang nakikipagtulungan ka sa Google sa ilang hugis o form. At ang pagtingin na ang Google Chrome ay mga lansangan nang una sa kompetisyon, ang mga taga-disenyo at developer ay kailangang mag-isip tungkol sa kung paano gagana ang kanilang proyekto sa browser. Paano ito magiging hitsura? Anong mga teknolohiya ang sinusuportahan nito, gaano ito ka-secure at paano ito gagampanan?
Sa kasamaang palad, ang Chrome ay nagbibigay ng mga tool upang matiyak na ang anumang site o app ay magiging pinakamahusay dito. Pinapagana ng mga DevTool ang mga tagadisenyo at developer upang makakuha ng pananaw sa isang web page: maaari mong manipulahin ang DOM, suriin ang CSS, mag-eksperimento sa mga disenyo na may live na pag-edit, i-debug ang JavaScript at suriin ang pagganap. (Tingnan ang higit pa tungkol sa kung paano gamitin ang mga tool sa web ng Google dito, at kung nagsisimula ka mula sa simula tingnan din ang aming listahan ng mga nangungunang tagabuo ng web,).
Ngunit ang Google ay nag-aalok ng higit pa sa browser. Mayroon itong mga tool at mapagkukunan upang tulungan ang halos lahat ng aspeto ng iyong disenyo at buhay sa pag-unlad. Nais bang malaman kung paano mapabuti ang pagganap? Ang parola ay narito upang tumulong. Nais na bumuo ng mas mahusay na gumaganap na mga mobile site? Pagkatapos kamustahin ang AMP. Naghahanap ka ba upang makabuo ng magagandang PWAs? Pagkatapos Flutter, Disenyo ng Materyal at Workbox ay handa nang pumasok.
Ang kagandahan ng paggamit ng mga tool, mapagkukunan, aklatan at balangkas ng Google ay alam mong gagana ang mga ito sa browser ng Chrome - ang pinakatanyag na browser sa planeta. Para sa higit pang mga tool, tingnan ang pag-ikot ng aming mga tool sa disenyo ng web.
01. Parola
Ang pagganap ay isang pangunahing kadahilanan sa tagumpay ng isang site at ang Lighthouse ay tool ng Google para sa pagpapabuti ng kalidad ng mga web page (makakatulong din ang tamang serbisyo sa web hosting). Kaya paano mo magagamit ang Lighthouse at ano ang magagawa nito? Sa pinakasimpleng form nito, maaari mong patakbuhin ang Lighthouse mula sa tab na Mga Audits at pumili mula sa isang pagpipilian ng mga pagpipilian kabilang ang desktop o mobile, bilang karagdagan sa mga tick box para sa pagganap, kakayahang mai-access at SEO, upang makabuo ng isang pangwakas na ulat na may iminungkahing pagpapabuti.
02. Polimer
Kilalang-kilala ang Polymer sa gawain nito sa mga bahagi ng web ngunit pinalawak ng proyekto ang repertoire nito upang yakapin ang isang koleksyon ng mga aklatan, tool at pamantayan. Ano ang kasama? Ang LitElement ay isang editor na ginagawang madali upang tukuyin ang mga bahagi ng web, habang ang lit-html ay isang HTML templating library na nagbibigay-daan sa mga gumagamit na magsulat ng mga susunod na gen na template ng HTML sa JS. Dagdag pa, mahahanap mo rin ang isang PWA Starter kit, ang orihinal na Polymer library at mga hanay ng mga bahagi ng web.
03. Mga API Explorer
Ang Google ay may malawak na silid-aklatan ng mga API na magagamit sa mga developer ngunit ang paghahanap ng kailangan mo ay hindi madaling gawain. Dito pumapasok ang Explorer ng API ng Google upang mag-alok ng tulong. Mayroong isang mahabang listahan na maaaring mai-scroll sa pamamagitan ng ngunit, para sa mas mabilis na pag-access, mayroong isang kahon para sa paghahanap upang salain ang listahan ng API. Ang bawat entry ay nai-link sa isang pahina ng sanggunian na may higit pang mga detalye sa kung paano gamitin ang API.
04. Flutter
Kung naghahanap ka upang bumuo ng mga magagandang application para sa mobile, web at desktop mula sa isang solong codebase kung gayon ang Flutter ay maaaring para sa iyo. Ang site ay isang kumpletong sanggunian sa pagtatrabaho kasama at pagbuo sa Flutter. Hindi makakuha ng isang bakas kung ano ang gagawin? Ang mga doc ay kumukuha ng isang gumagamit mula sa pag-install hanggang sa paglikha, tinulungan ng maraming mga sample at tutorial.
05. Google GitHub
Tulad ng malalaman ng karamihan, ang GitHub ay ang hosting platform / repository upang maiimbak at magbahagi ng code at mga file. At maligaya ang Google ay may sariling lugar sa platform na may higit sa 260 na mga repositoryo upang masuri. Gamitin ang filter upang mabawasan ang oras ng iyong paghahanap at makalapit sa repository na nais mong maglaro o mag-ambag.
06. Puppeteer
Itinayo sa Node, nag-aalok ang Puppeteer ng isang mataas na antas na API na nagbibigay-daan sa iyo upang ma-access ang walang ulo na Chrome - mabisang Chrome nang walang UI, na maaaring kontrolin ng mga developer sa pamamagitan ng linya ng utos. Kaya ano ang maaari mong gawin sa Puppeteer? Ang ilang mga pagpipilian ay magagamit para sa pagbuo ng mga screenshot at PDF ng mga pahina, i-automate ang pagsusumite ng form at paglikha ng isang awtomatikong kapaligiran sa pagsubok.
07. Workbox
Kung naghahanap ka upang bumuo ng isang PWA pagkatapos ito ay isang mahusay na panimulang punto. Nagbibigay ang Workbox ng isang koleksyon ng mga library ng JavaScript para sa pagdaragdag ng offline na suporta sa mga web app. Ang isang pagpipilian ng mga malalim na gabay ay nagpapakita kung paano lumikha at magparehistro ng isang file ng manggagawa sa serbisyo, mga kahilingan sa ruta, gumamit ng mga plugin at gumamit ng mga bundler sa Workbox. At mayroon ding isang hanay ng mga halimbawa ng mga diskarte sa pag-cache upang mag-check out.
08. Codelabs
Nangangailangan ng praktikal na patnubay para sa isang produkto ng Google? Nagbibigay ang Codelabs ng "isang gabay, tutorial, karanasan sa pag-coding ng hands-on". Ang site ay maayos na hinati sa mga kategorya at kaganapan, ginagawa itong mabilis at madali upang mahanap kung ano ang gusto mo. May kasamang Analytics, Android, Assistant, augmented reality, Flutter, G Suite, Search, TensorFlow at virtual reality. Pumili ng isang pagpipilian at kunin ang code at mga direksyon na kailangan mo upang makabuo ng maliliit na application.
09. Kulay ng Kasangkapan
Ang Tool ng Kulay ay isang prangkahang tool na nagbibigay-daan sa iyo upang lumikha, magbahagi at maglapat ng isang paleta bilang karagdagan sa pag-check sa pagiging naa-access. Maaaring pumili ang mga gumagamit ng isang paunang natukoy na palette mula sa Material palette. Pumili lamang ng isang kulay at pagkatapos ay ilapat ito sa pangunahing scheme ng kulay, lumipat sa pangalawang pagpipilian at pumili muli. Panghuli, pumili ng mga kulay ng teksto para sa parehong mga scheme. Bilang kahalili, lumipat sa Pasadyang upang mapili ang iyong mga kulay. Pagkatapos ay lumipat sa Pag-access upang suriin ang lahat ay mabuti bago, sa wakas, na-export ang palette.
10. Mga Disenyo ng Sprint
Ang Design Sprint Kit ay para sa mga taong natututo kung paano lumahok sa o magpatakbo ng mga sprint sa disenyo. Mukhang masakop ang lahat ng mga base sa kaalaman, mula sa mga first-timer hanggang sa mga bihasang tagapagpadaloy ng sprint. Alamin ang tungkol sa pamamaraan o tumalon nang diretso sa yugto ng pagpaplano, kasama ang pagsulat ng mga salawal, pagkolekta ng data at pagsasaliksik, pati na rin kung ano ang gagawin post-sprint. Kasama rin ang isang host ng mga mapagkukunan tulad ng mga tool, template, recipe at ang pagpipilian upang isumite ang iyong sariling pamamaraan. Gayundin, malamang na kakailanganin mo sa isang lugar upang mag-imbak at magbahagi ng mga mapagkukunan upang matiyak na ang iyong pagpipilian ng cloud storage ay nasa punto.
11. People + AI Guidebook
Ang gabay na ito ay gawa ng People + AI Research na inisyatiba sa Google at mukhang nag-aalok ng tulong sa mga nais na bumuo ng mga produktong AI na nakasentro sa tao. Ang komprehensibong gabay na libro ay nahahati sa anim na mga kabanata na sumasaklaw sa mga pangangailangan ng gumagamit, pagkolekta ng data at pagsusuri, mga modelo ng kaisipan, pagtitiwala, puna at mabuting kabiguan. Ang bawat kabanata ay sinamahan ng mga ehersisyo, worksheet at mga tool at mapagkukunan na kinakailangan upang maganap ito.
12. Google Assistant
Ito ang platform ng developer ng Google Assistant, na nag-aalok ng isang gabay sa kung paano isama ang iyong nilalaman at mga serbisyo sa Google Assistant. Ipinapakita nito sa iyo kung paano pahabain ang iyong mobile app, ipakita ang nilalaman sa mga mayamang paraan para sa Paghahanap at Assistant, mga ilaw ng kontrol, mga machine ng kape at iba pang mga aparato sa paligid ng bahay at bumuo ng mga karanasan sa boses at visual para sa mga matalinong nagsasalita, nagpapakita at telepono.
13. Mga Pananaw sa PageSpeed
Sinusuri ng PageSpeed Insights ang nilalaman ng web at pagkatapos ay nag-aalok ng mga mungkahi sa kung paano ito gawing mas mabilis. Magdagdag lamang ng isang URL, pindutin ang pindutan ng Pag-aralan at hintaying mangyari ang mahika. Suriin ang Docs upang makakuha ng isang mas mahusay na pananaw sa kung paano gumagana ang PageSpeed API at kung paano simulang gamitin ito.
14. AMP sa Google
Ang AMP ay tool ng Google para sa paglikha ng mabilis na pagkarga ng mga mobile page na (sana) makarating sa tuktok ng mga ranggo ng paghahanap. Alamin kung paano lumikha ng mabilis, mga site na unahin ng gumagamit, isama ang AMP sa mga produkto ng Google, gamitin ang Google AMP Cache upang gawing mas mabilis ang mga pahina ng AMP at gawing pera ang mga pahina ng AMP sa iba pang mga produkto ng Google.
15. Google DevTools
Alam ng bawat taga-disenyo at developer (o hindi bababa sa dapat malaman) na ang Chrome ay may kasamang isang hanay ng mga tool na direktang naitayo sa browser. Ang mga DevTool ng Chrome ay perpekto para sa pag-iinspeksyon ng mga elemento na bumubuo sa isang pahina, suriin ang CSS, pag-edit ng mga pahina nang mabilis at marami pa.
Ang tab na Mga Elemento ay ang pagpapakilala sa DevTools. Ipinapakita nito ang HTML code na bumubuo sa napiling pahina. Kumuha ng isang pananaw sa mga katangian ng bawat div o tag mula sa napiling pahina at simulang live na pag-edit. Perpekto ito para sa pag-eksperimento sa mga disenyo. Suriin ang Layout - kung gumagamit ka ng Flexbox o Grid - at tingnan ang mga nauugnay na mga font na may mga halimbawa at suriin ang mga animasyon.
Saanman, maaari mong tingnan at baguhin ang CSS. Ang tab na Mga Estilo sa panel ng Mga Elemento ay nakalista sa mga patakaran ng CSS na inilalapat sa kasalukuyang napiling elemento sa DOM Tree. I-on at i-off ang mga pag-aari (o magdagdag ng mga bagong halaga) upang mag-eksperimento sa mga disenyo. Ito ang perpektong tool para sa pagtiyak na gumagana ang lahat ayon sa inaasahan bago mag-apply ng anumang mga pagbabago sa live na disenyo.
Maaari mo ring i-debug ang JavaScript, i-optimize ang bilis ng website at siyasatin ang bilis ng network. Narito ang isang mabilis na tip na maaari mong gamitin upang agad na mapabilis ang iyong daloy ng trabaho. Tumungo sa tab na Mga Pinagmulan, i-click ang Bagong Snippet at magdagdag ng madalas na ginagamit na code. Pangalanan ang snippet ng code at i-save. Ulitin kung kinakailangan. Ngayon ay maaari mo nang kunin ang code na ito sa halip na isulat ito muli.
Tulad ng bawat mahusay na browser, ang Chrome ay patuloy na nagbabago at ang bawat bagong paglabas ay nagdadala ng mga bagong tampok. Alamin kung ano ang nangyayari sa platform ng katayuan ng Chrome
16. Materyal na Disenyo
Ang pag-unlad ay maaaring makita bilang pinapaboran na anak ng Google ngunit, anuman ang iyong ginagawa, nilikha o binubuo, kailangan itong maging maganda at bigyan ang gumagamit ng isang karanasan na nais nilang gamitin ito. Ang materyal ay isang mas kamakailang karagdagan sa matatag ng Google ngunit isang sistema ng disenyo na naging isang mahalagang bahagi ng disenyo kit.
Tulad ng anumang mahusay na sistema ng disenyo, mayroon itong sariling hanay ng mga alituntunin, na kailangan mong tingnan bago humakbang sa mas kapanapanabik na bagay. Kumuha ng isang pangkalahatang ideya ng kung paano gumamit ng iba't ibang mga elemento, kung ano ang materyal na may tema, kung paano ipatupad ang isang gabay sa tema at kakayahang magamit kabilang ang kakayahang mai-access. Saanman, mayroong isang pananaw sa Material Foundation, na kinabibilangan ng mga pangunahing lugar ng disenyo tulad ng layout, nabigasyon, kulay, palalimbagan, tunog, iconography, paggalaw at pakikipag-ugnayan. Ang bawat kategorya ay nagpapakita ng mga dos at hindi dapat gawin at kung saan mo dapat isaalang-alang ang pag-iingat. Upang magbigay ng isang ideya kung ano ang aasahan, ang kategorya ng Layout ay nag-aalok ng mga seksyon sa pag-unawa sa layout, density ng pixel, kung paano gumana sa isang tumutugong layout kabilang ang mga haligi, gutter at margin, breakpoint, mga rehiyon ng UI at mga pamamaraan ng spacing na pangalanan ngunit iilan.
Higit pa sa seksyon ng Disenyo ay ang Mga Bahagi, na nagbibigay ng pisikal na mga bloke ng gusali na kinakailangan upang lumikha ng isang disenyo. Ano ang kasama dito? Mga pindutan, banner, kard, dayalogo, divider, listahan, menu, tagapagpahiwatig ng pag-unlad, slider, snackbars (ito ay maikling mensahe tungkol sa mga proseso ng app sa ilalim ng screen), mga tab, patlang ng teksto at mga tooltip. Walang alinlangan isang komprehensibong koleksyon ng mga bahagi.
At ang mga developer ay hindi nakalimutan, na may mga detalye at tutorial sa kung paano bumuo para sa iba't ibang mga platform - Android, iOS, Web at Flutter. At, sa wakas, mayroong isang pahina na nakatuon sa isang host ng mga mapagkukunan upang matulungan ang iyong napiling disenyo na mangyari.
Orihinal na lumitaw ang artikulong ito sa net magazine. Bumili ng isyu 326.
