Kapag natututo tungkol sa programming, maaaring makita ng isa ang dalawang magkakaibang mga yugto
-
Pag-aaral tungkol sa mga pangunahing kaalaman: Magsisimula kang tuklasin ang anatomy ng isang computer program, matutunan kung paano mag-isip tungkol sa mga simpleng problema sa mga tuntunin ng mga logic unit, at simulan mong gawing pormal ang mga unit na ito sa mga tagubilin ng code. Sa yugtong ito, natututo ka tungkol sa mga abstract na paksa at simpleng pagsasanay. Kung gagawin nang tama at bibigyan ng naaangkop na dami ng oras, sinuman ay makakakuha ng matatag na pagkakahawak sa pag-unawa at pagsulat ng mga simpleng lohikal na programa gamit ang isang wikang pinili.
-
Ang ikalawang yugto, na mas nakakatakot sa karamihan ng mga tao, ay binubuo ng pag-aaral ng development ecosystem: ang natural na susunod na hakbang pagkatapos makakuha ng simpleng kaalaman sa programming ay ang pumili ng programming subdomain (web development, mobile application development, embedded system, at katulad na ) at magsimulang matuto tungkol sa kung paano lutasin ang mga problema gamit ang partikular na platform na iyon. Ang kahirapan dito ay hindi na ito isang bagay na sumasaklaw sa isang hanay ng mga pangunahing kaalaman, pagsasanay sa bawat konsepto, at pag-uulit. Kadalasan imposibleng masakop ang bawat tool, bawat teknolohiya, at sundin ang bawat prinsipyo. Ang tamang paraan upang gawin ito ay ang paggawa ng isang malusog na dami ng eksperimento at pananaliksik. Malamang na kakailanganin mo lamang na makakuha ng ilang mga kasanayan, at gumamit ng ilang mga tool upang makapagsimula sa mga simpleng gawain. Kapag kumportable ka na sa antas na ito, maaari mong subukang mag-expand sa isang bagong hanay ng mga tool at patuloy na mag-evolve. Kasunod ng pamamaraang ito, susubukan naming bumuo ng matatag na pundasyon sa domain ng web development sa pamamagitan ng paggalugad ng mga teknolohiya at tool na ginagamit para sa pagbuo ng mga simpleng landing page.
Sa post sa blog na ito, gagawa kami ng maikling pag-explore ng frontend na web development landscape, na may pagtuon sa pagbuo ng landing page. Dadaan kami sa isang seleksyon ng mga mapagkukunan na inirerekomenda naming tingnan mo para sa iba't ibang bahagi ng pag-unlad na maaari mong makaharap. Sa pagtatapos ng artikulong ito, magkakaroon ka ng mas malinaw na larawan kung paano gumawa ng isang landing page. Tingnan ang kasamang video para sa praktikal na halimbawa.
Landscape ng Pag-unlad ng Landing Page
Ang landing page ay isang terminong unang ginamit ng mga eksperto sa digital marketing upang sumangguni sa isang standalone na web page na ginagamit para sa mga layunin ng kampanya sa marketing at advertising. Ang konsepto ay medyo simple: ang isang bisita na interesado sa isang produkto o serbisyo na ibinigay ng isang kumpanya ay nag-click sa isang link ng nasabing produkto, pagkatapos ay "lumapaw" sa isang web page na may maraming paglalarawan na pinagsasama ang teksto, mga larawan atbp. ng produkto o serbisyo. Ang page ay naglalaman ng isang purchase button, na tinatawag na "CTA" (Call To Action) upang ma-convert ang bisita sa isang nagbabayad na customer. Gaya ng maaari mong asahan, ang paglikha ng magandang karanasan ng user ay pinakamahalaga sa pagkakaroon ng magandang rate ng conversion.
Sa buong artikulong ito, malalaman natin ang tungkol sa maraming paraan at tool na magbibigay-daan sa amin na bumuo ng mga landing page na tumutupad sa kanilang tungkulin. Mahalagang banggitin na may iba pang mga pagsasaalang-alang kapag bumubuo ng mga landing page na nauugnay sa SEO (Search Engine Optimization). Sasakupin ang SEO sa hinaharap na workshops.
Inspirasyon sa Disenyo
Kung ikaw ay may karanasan sa pagbuo ng mga landing page o nagsisimula pa lang, makikita mo na kadalasan ay mahirap matukoy nang eksakto kung ano ang gusto mong hitsura ng iyong website. Madalas ding nangyayari, kapag nagtatrabaho sa mga kliyente, na hindi nila alam kung anong disenyo ang gusto nila para sa kanilang web page. Karaniwan, ang disenyong mockup at prototype ay ibibigay sa developer ng isang web designer na dalubhasa sa ganitong uri ng trabaho. Makakatulong ang pagkakaroon ng maaasahang mapagkukunan ng mga disenyo ng web. Ang ganitong mga mapagkukunan ay magbibigay-daan sa iyo na manatiling napapanahon sa mga uso sa disenyo, itulak ang iyong pagkamalikhain, at… makapagsimula ka. Dalawa sa mga pinakamahusay na mapagkukunan na magagamit mo upang makakuha ng inspirasyon sa disenyo para sa iyong susunod na proyekto ay ang Dribbble at Behance.
Dribbble
Dribbble ay marahil ang pinakasikat na mapagkukunan sa espasyo sa disenyo ng web. Ito ay isang komunidad ng mga designer na nagbabahagi ng kanilang trabaho upang mapabuti ang kanilang mga kasanayan, tulungan ang isa't isa, at makakuha ng nakabubuo na feedback. Naglalaman ito ng malawak na hanay ng mga disenyo sa halos anumang paksa o larangan na ginawa ng mga taong malikhain mula sa buong mundo, kasama ang feedback ng komunidad, na ginagawa itong perpektong lugar para makakuha ng inspirasyon.
Behance
Ang Behance ay isa pang sikat na komunidad ng disenyo na makakatulong sa iyong makahanap ng inspirasyon. Nag-aalok ang website na ito ng mga advanced na feature sa paghahanap na nagbibigay sa iyo ng madaling access sa partikular na trabaho na interesado ka, gamit ang mga keyword, field, at color palette. Mahalaga ring tandaan na ang Behance ay bahagi ng Adobe, at maayos na isinasama sa Adobe creative cloud.
Ang Dribbble at Behance ay parehong mahusay na mga platform para sa inspirasyon sa disenyo ng web at hindi ka maaaring magkamali sa alinman. Hinihikayat ka naming simulan ang paggalugad ng mga disenyo at gumawa ng sarili mong disenyo!
Design Prototyping
Ngayong na-inspire ka sa gawa ng mga mahuhusay na designer, oras na para simulan mong i-prototyping ang disenyo ng iyong landing page. Ang prototyping ay isang mahalagang yugto ng pagbuo ng isang landing page. Maaari itong tukuyin bilang pang-eksperimentong proseso kung saan nagpapatupad ka ng mga ideya sa mga nakikitang istruktura, para mapino at ma-validate mo ang mga ito sa iyong koponan o kliyente. Sa pagtatapos ng yugto ng prototyping, magkakaroon ka ng disenyo na handang buhayin sa iyong landing page.
Mayroong isang kalabisan ng mga solusyon sa software na maaaring magamit para sa pagbuo ng mga prototype ng disenyo. Sa katunayan, napakarami na maaaring mabilis na maging mahirap na suriin, ihambing at pumili ng isang tool. Gagamitin natin ang Figma, dahil ito ay karaniwang ginagamit ng ux/ui designers. Kung gusto mong matutunan kung paano gamitin ang Figma para sa prototyping, maaari mong tingnan ang aming crash course sa youtube mismo dito.
Figma
Ang Figma ay isang all-in-one na tool sa disenyo na nagpapadali para sa mga UX designer at developer na bumuo at mag-collaborate sa mga prototype ng disenyo sa isang browser-based, cloud-hosted platform . Ang Figma ay naglalagay ng diin sa pagiging simple at kadalian ng paggamit.
Binibigyang-daan ka ng interface ng Figma na lumikha ng mga elemento at i-istilo ang mga ito sa pamamagitan ng pagkontrol sa hitsura ng text, grids, at iba pang bahagi sa buong page. Nag-aalok ito ng malawak na hanay ng mga pantulong na plugin, tulad ng Autoflow para sa pagpapakita ng mga daloy ng user, Figmotion para sa mga animation, at marami pa.
Mga Icon at Font
Ang Typography at Styling Icon ay ilan sa mga pinakasimpleng feature na gagamitin upang iangat ang hitsura ng anumang web page. Gusto mong gamitin ang tamang font at mga icon sa iyong landing page upang tumugma sa pangkalahatang ideya na gusto mong ipaalam. Sa kabutihang palad, madaling maghanap at maglapat ng malaking seleksyon ng mga font at icon gamit ang Font Awesome o Google Fonts.
Galing ng Font
Ang Font Awesome ay isang font at icon na toolkit batay sa CSS at Mas . Noong 2020, ginamit ang Font Awesome ng 38% ng mga site na gumagamit ng mga script ng font ng third-party, na inilalagay ito sa pangalawang lugar pagkatapos ng Google Fonts (Wikipedia).
Ang Font Awesome ay suportado ng maraming frontend na library gaya ng Bootstrap, kung saan ito unang ginawa. Ginagawa ng Font Awesome ang pagsasama ng mga font at icon sa isang webpage na kasingdali ng pagsasama ng CDN link. Ang kadalian ng paggamit na ito, kasama ang malaking seleksyon ng mga font at icon ay ginawa itong pinakasikat na solusyon sa espasyo.
Mga Font ng Google
Ang Google Fonts ay isang libre, open-sourced na serbisyo sa web na inaalok ng Google para sa mga pag-embed ng font sa mga website. Nag-aalok ito ng tuluy-tuloy na pagsasama at mataas na antas ng flexibility at mga pagpapasadya.
I-deploy ang iyong Landing Page
Ngayong nagawa mo na ang iyong landing page, oras na para ibahagi ito sa kabuuan! Ang huling hakbang ay i-deploy ang iyong landing page gamit ang solusyon sa hosting provider. Ang Github Pages at Vercel ang aming mga top pick. Sila ang pinakasikat, at pinakamadaling gamitin. Ang Vercel ay ang tool na ipinakilala sa aming workshop, ngunit gumagana ang Github Pages sa katulad na paraan.
Mga Pahina ng Github
Kung kasalukuyan kang natututong mag-code, malamang na narinig mo na ang Github. Ang Github ay isang platform para sa pagbabahagi at pagho-host ng code bilang bahagi ng open-source na komunidad. Nag-aalok ito ng feature na tinatawag na GitHub Pages, na isang serbisyo sa pagho-host para sa mga pampublikong web page na maaaring gamitin ng mga indibidwal at organisasyon. Ang lahat ng mga page ay malayang naka-host sa github.io domain ng GitHub, o sa isang custom na domain name kung sakaling nagmamay-ari ka ng isa. Ang Mga Pahina ng GitHub ay isang simple at mahusay na paraan upang i-host ang iyong mga proyekto nang libre kung gumagamit ka na ng Github para sa kontrol ng bersyon.
Vercel
Ang Vercel ay isang alternatibo sa Github Pages na nag-aalok ng malawak na hanay ng mga feature at configuration. Ito ay may libreng bersyon. Inirerekomenda namin ang Vercel para sa sinumang may kumplikadong proyekto, dahil ito ay gumagawa para sa isang mahusay na karanasan sa developer, at nag-aalok ng mahusay na suporta. Ginagamit ito ng Code Labs Academy bilang bahagi ng proseso ng pagbuo nito.
Konklusyon
Ipinakilala ng artikulong ito ang mga kapaki-pakinabang na tool upang bumuo ng isang landing page. muli! Ang pinakamahusay na paraan ng pag-aaral ay sa pamamagitan ng paggawa, kaya mariing hinihikayat ka naming subukan ang mga tool na ito sa iyong sariling personal na proyekto! Ang isang malaking bahagi ng gawain ng isang developer ay ang pagsasaliksik ng mga kasalukuyang solusyon sa mga problemang nararanasan nila, at iwasang muling likhain ang gulong. Ang magandang bagay tungkol sa programming community ay ang pagiging collaborative nito. Hinihikayat ka naming samantalahin ang gawaing ibinahagi ng iba at mag-ambag gamit ang iyong sarili!
At kung gusto mong matuto pa tungkol sa pagdidisenyo ng mga cool na website at pagbuo ng mga ito, gusto mong tingnan ang aming UX/UI Design at Web Development Mga Bootcamp!
