Programazioaz ikastean, bi fase bereizi daitezke
-
Oinarriak ikastea: programa informatiko baten anatomia aztertzen hasten zara, arazo sinpleak unitate logikoen arabera pentsatzen ikasten eta unitate horiek kode-argibideetan formalizatzen hasten zara. Etapa honetan, gai abstraktuak eta praktika sinpleak ikasten dituzu. Ongi eginez gero eta denbora egokia emanez gero, edonork aukera izango luke programa logiko errazak ulertzeko eta idazteko aukerako hizkuntza erabiliz.
-
Bigarren fasea, jende gehienari apur bat ikaragarriagoa iruditzen zaiona, garapen ekosistema bat ikastean datza: programazio-ezagutza errazak eskuratu ondoren hurrengo urratsa programazio azpidomeinu bat hautatzea da (web garapena, aplikazio mugikorren garapena, sistema txertatuak eta antzekoak). ) eta plataforma zehatz hori erabiliz arazoak nola konpontzen ikasten hasi. Zailtasuna hemen da jada ez dela oinarri multzo bat estaltzea, kontzeptu bakoitza landu eta errepikatzea. Askotan ezinezkoa da tresna guztiak, teknologia guztiak estaltzea eta printzipio guztiak jarraitzea. Horretarako modu egokia esperimentazio eta ikerketa osasuntsu bat egitea da. Litekeena da trebetasun gutxi batzuk besterik ez izatea eta tresna batzuk erabili zeregin errazak egiten hasteko. Maila honetan eroso zaudenean, tresna multzo berri batera zabaltzen eta etengabe eboluzionatzen saia zaitezke. Metodologia honi jarraituz, web garapenaren esparruan oinarri sendo bat eraikitzen saiatuko gara helmuga-orri soilak eraikitzeko erabiltzen diren teknologia eta tresnen esplorazioaren bitartez.
Blog-eko argitalpen honetan, frontend web garapenaren panorama laburra aztertuko dugu, lurreratze orrien garapenean arreta jarriz. Aurki ditzakezun garapen-atal ezberdinetarako aztertzea gomendatzen dizugun baliabideen aukeraketa bat aztertuko dugu. Artikulu honen amaieran, lurreratze orri bat eraikitzeko moduari buruzko irudi askoz argiagoa izango duzu. Begiratu [bideo laguntzaile] hau (https://youtu.be/mTfbzZDSv2I) adibide praktiko bat lortzeko.
Landing Page Garapen Paisaia
Lurreratze orria marketin digitaleko adituek hasieran erabiltzen duten terminoa da, marketin eta publizitate kanpaina helburuetarako erabiltzen den web-orri autonomo bati erreferentzia egiteko. Kontzeptua nahiko sinplea da: enpresa batek emandako produktu edo zerbitzu batean interesa duen bisitari batek aipatutako produktuaren esteka batean klik egiten du, eta gero produktuaren testua, irudiak eta abar konbinatzen dituen deskribapen aberatsa duen web-orri batean "lurratzen" da. zerbitzua. Orrialdeak erosteko botoi bat dauka, "CTA" (Call To Action) deitzen dena, bisitaria ordainpeko bezero bihurtzeko. Espero duzun bezala, erabiltzailearen esperientzia ona sortzea funtsezkoa da bihurketa-tasa ona izateko.
Artikulu honetan zehar, beren eginkizuna betetzen duten helmuga-orriak eraikitzeko aukera emango diguten modu eta tresna asko ezagutuko ditugu. Garrantzitsua da aipatzea SEOrekin (Search Engine Optimization) erlazionatutako lurreratze orriak eraikitzerakoan beste kontu batzuk daudela. SEO etorkizunean landuko da tailerretan.
Diseinuaren inspirazioa
Lurreratze-orriak eraikitzen edo hasi besterik ez zaren arren, askotan zaila da zure webgunea nolakoa izan nahi duzun zehaztea. Era berean, askotan gertatzen da, bezeroekin lan egiten dutenean, ez jakitea zehatz-mehatz zein diseinu nahi duten beren web-orrirako. Normalean, diseinuaren maketa eta prototipoa mota honetako lanetan espezializatutako web diseinatzaile batek garatzaileari emango dizkio. Lagungarria izan daiteke web diseinuen iturri fidagarri bat izatea. Horrelako iturriek diseinu-joerekin eguneratuta egoteko aukera emango dizute, zure sormena bultzatzeko eta... hasteko. Zure hurrengo proiekturako diseinuaren inspirazioa lortzeko erabil ditzakezun baliabide onenetako bi hauek dira: Dribbble eta Behance.
Dribbble
Dribbble web diseinuaren esparruko baliabiderik ezagunena da ziurrenik. Beren lana partekatzen duten diseinatzaileen komunitatea da, beren gaitasunak hobetzeko, elkarri laguntzeko eta iritzi eraikitzaileak jasotzeko. Mundu osoko sormenek egindako diseinu sorta zabala dauka ia edozein gai edo arlotan, komunitatearen iritziekin batera, inspirazioa lortzeko leku aproposa da.
Behance
Behance inspirazioa aurkitzen lagun zaitzakeen beste diseinu komunitate ezagun bat da. Webgune honek bilaketa-funtzio aurreratuak eskaintzen ditu, interesatzen zaizun lan zehatzetara sarbide erraza ematen dizuten gako-hitzak, eremuak eta kolore-paleta erabiliz. Garrantzitsua da, halaber, Behance Adoberen parte dela eta ondo integratzen dela Adobe creative cloud-ekin.
Dribbble eta Behance web-diseinurako inspiraziorako plataforma bikainak dira eta ezin duzu gaizki egin. Diseinuak aztertzen hastera eta zurea egitera animatzen zaitugu!
Diseinuko prototipoak
Talentu handiko diseinatzaileen lanetan inspiratu zarenez, heldu da zure lurreratze orriaren diseinua prototipatzen hasteko ordua. Prototipatzea lurreratze orria eraikitzeko fase garrantzitsu bat da. Ideiak ikusgai dauden egituretan inplementatzen dituzun prozesu esperimental gisa defini daiteke, zure taldearekin edo bezeroarekin hobetu eta baliozkotu ahal izateko. Prototipo-fasearen amaieran, zure helmuga-orrian bizia emateko prest dagoen diseinua izango duzu.
Diseinu-prototipoak eraikitzeko erabil daitezkeen software irtenbide ugari dago. Izan ere, hainbeste daude, non azkar bihur daitekeela tresna bat ebaluatzea, alderatzea eta hautatzea. Figma erabiliko dugu, ux/ui designers erabili ohi baitute. Figma prototipoak egiteko nola erabiltzen ikasi nahi baduzu, ikus dezakezu gure youtuben bertan hemen.
Figma
Figma diseinu-tresna bat da, UX diseinatzaile eta garatzaileei diseinu-prototipoak eraikitzea eta elkarlanean aritzea, arakatzailean oinarritutako eta hodeian ostatatutako plataforma batean. . Figmak sinpletasuna eta erabilera erraztasuna azpimarratzen ditu.
Figmaren interfazeari esker, elementuak sortu eta estiloa ditzakezu orrialdeko testuaren, sareen eta beste osagai batzuen itxura kontrolatuz. Plugin osagarri ugari eskaintzen ditu, hala nola Autoflow erabiltzaile-fluxuak erakusteko, Figmotion animazioetarako eta askoz gehiago.
Ikonoak eta letra-tipoak
Tipografia eta estilo-ikonoak edozein web-orri baten itxura igotzeko erabiltzeko eginbide errazenetako batzuk dira. Letra-tipo eta ikono egokiak erabili nahi dituzu helmuga-orrian, komunikatu nahi duzun ideia orokorrarekin bat etortzeko. Zorionez, erraza da letra-tipo eta ikonoen aukeraketa handi bat aurkitzea eta aplikatzea Font Awesome edo Google Fonts erabiliz.
Letra Ikaragarria
Font Awesome CSS eta Less oinarritutako letra-tipo eta ikono-tresna bat da. . 2020tik aurrera, Font Awesome hirugarrenen letra-tipoen gidoiak erabiltzen dituzten guneen % 38k erabili zuten, Google Fonts-en atzetik bigarren postuan kokatuz (Wikipedia).
Font Awesome frontend liburutegi askok onartzen dute, hala nola Bootstrap-ek, hasiera batean egin baitzen. Font Awesome-k letra-tipoak eta ikonoak web-orri batean integratzea CDN esteka bat sartzea bezain erraza da. Erabilera erraz honek, letra-tipo eta ikonoen aukeraketa handiarekin batera, espazioko soluziorik ezagunena bihurtu zen.
Google Fonts
Google Fonts webguneetan letra-tipoak txertatzeko Google-k eskaintzen duen kode irekiko doako web-zerbitzua da. Integrazio ezin hobeak eta malgutasun eta pertsonalizazio maila handia eskaintzen ditu.
Inplementatu zure helmuga-orria
Orain zure helmuga orria eraiki duzunean, osoarekin partekatzeko garaia da! Azken urratsa zure helmuga-orria zabaltzea da, ostalaritza-hornitzaileen irtenbide bat erabiliz. Github Pages eta Vercel dira gure aukera nagusiak. Ezagunenak dira, eta erabiltzeko errazenak. Vercel gure tailerrean aurkeztutako tresna da, baina Github Pages-ek antzeko moduan funtzionatzen du.
Github orriak
Une honetan kodetzen ikasten ari bazara, litekeena da Github-en berri izatea. Github kode irekiko komunitatearen parte gisa kodea partekatzeko eta ostatatzeko plataforma bat da. GitHub Pages izeneko funtzio bat eskaintzen du, hau da, pertsona eta erakundeek erabil ditzaketen web-orri publikoen ostalaritza-zerbitzua. Orri guztiak libreki ostatatuta daude GitHub-en github.io domeinuan, edo domeinu-izen pertsonalizatu batean jabea bazara. GitHub orrialdeak zure proiektuak doan ostatatzeko modu sinple eta eraginkorra dira dagoeneko Github erabiltzen ari bazara bertsioak kontrolatzeko.
Vercel
Vercel Github Pages alternatiba bat da, funtzio eta konfigurazio ugari eskaintzen dituena. Doako bertsio batekin dator. Vercel proiektu konplexua duen edonorentzat gomendatzen dugu, garatzaileen esperientzia bikaina eskaintzen baitu eta laguntza bikaina eskaintzen baitu. Code Labs Academy bere garapen-prozesuaren zati gisa erabiltzen du.
Ondorioa
Artikulu honek helburu-orria garatzeko tresna erabilgarriak aurkeztu zituen. Berriz ere! Ikasteko modurik onena egitea da, beraz, biziki gomendatzen zaituztegu tresna hauek zure proiektu pertsonalean probatzera! Garatzaile baten lanaren zati handi bat aurkitzen dituzten arazoetarako dauden irtenbideak ikertzea eta gurpila berrasmatzea saihestea da. Programazio komunitatearen gauza bikaina bere lankidetza izaera da. Besteek partekatu duten lana aprobetxatzera eta zurearekin ekarpenak egitera animatzen zaituztegu!
Eta webgune bikainak diseinatzeari eta haiek eraikitzeari buruz gehiago ikasi nahi baduzu, gure UX/UI Design eta Web Development ikusi nahi dituzu. ) Bootcamps!
- Bihurtu Kodeketa Profesionala Zure Erritmoan! Sartu Code Labs Academy-ren Online Part-Time Bootcamp eta kodetzeko trebetasunak. Egokitu ikaskuntza zure ordutegian eta hasi gaur zure bidaia teknologiara!*
