Web diseinu

Web-diseinua informatika arloko diziplina mota bat da, interfazeak eta plataforma digitalak planifikatu, diseinatu eta inplementatzean datzana. Beste era batera esanda, web-orriak sortzeko beharrezkoak diren elementu guztiak biltzen dituen prozesua da.^[1] Hauek dira webgune bat diseinatzean alderdi garrantzitsuenetako batzuk: Interfazeen diseinua, materialen diseinua eta baliabide grafikoak, erabiltzailearen esperientzia, diseinuaren moldagarritasuna gailu mota desberdinekin, eta abar. Horrez gain, interaktibitatea, erabilgarritasuna, baliabideen interakzioak (testua, audio, irudia, bideoa, eta abar) eta bilatzaileen optimizazioa ere badira arlo honetako alderdi garrantzitsuak.

Oro har, jendeak taldean egiten du lan, web-orri baten diseinuan egiten diren alderdi desberdinak estaltzeko. Web-diseinatzaileek orriak sortzen dituzte markatze-lengoaiak erabiliz, hala nola HTML edo XML. HTML lengoaiaz idatzitako elementuak estilizatzeko (Guneen atal bisuala) CSS tresnaren bidez egiten da. Web-orrien garapena errazten duten tresnak daude (CMS), ezagunenetako bat WordPress^[2] da, hainbat eredu eskaintzen dituena.

Historia

Web-diseinuaren historia 90ko hamarkadan hasi zen, geroago web-diseinurako aro ilun bezala ezagutu denaren garaian. Hasieran web-diseinua oso sinplea zen, kolore ukitu bat ematen zuten pixel monokromodun pantaila beltzetan oinarritzen zen. Beste era batera esanda, ez zen web-diseinua existitzen, web-orriak testu hutsez osatuta egoten ziren. 1991 inguruan, "World Wide Web" lehen webgunea argitaratu zen Tim Berners-Leek fisikariaren eskutik. Esaten denez fisikari hori sarearen sortzaile handienetakotzat kontsideratzen da. Fisikariak sortutako webgunearen helburua bakarra World Wide Weba zer zen informatzea zen^[3]. Gaur egun 32 urte geroago, ziurtatu dezakegu, dudarik gabe, bere erabilerak ugaldu egin direla eta web-diseinuaren bilakaera inoiz baino aktiboagoa dela.

Web-diseinuaren lehenengo urratsak 1995ean eman ziren taulen etorrerarekin, edukiari ordena emanez. Denbora luzez taulen metodoa izan zen web-orriak diseinatzeko metodo erabiliena eta era batean horrek diseinuaren eta garapenaren arteko bereizketa sortu zuen. Diseinatzaileak diseinuak sortzen ari ziren bitartean, garatzaileak nola funtzionatzen zuten asmatzen ari ziren. Gainera, 1995ean Javascript agertu zen, eta horrek HTML lengoaiaren hainbat muga konpondu zituen.

Web-diseinuko liburuak liburutegi batean

1996an Flash iritsi zen ikusmen-efektuen aukerarekin, horrek garai hartan web-diseinuan zeuden hesiak haustea ekarri zuen. Tresna bakar baten bidez, artxibo bat bidalita, arakatzailean erakustea lortzen zuelako^[4]. Aro horrek mugarri bat markatu zuen, baina denborarekin argi geratu zen ondorioak eta interakzioak ez zirela HTML indizea duen bilaketetarako irekita, eta prozesatzeko ahalmena kontsumitzeak, denborarekin indarra galtzea suposatu zuen.

1998an CSS lengoaia oso popularra bihurtu zen, edukia HTMLn eta formatua eta itxura CSSn bereizten baitzuen^[5]. CSSek eboluzio-prozesu bat igaro zuen eta hainbat urte behar izan zituen emaitzarik onenak lortzeko. Hasieran, baina, pantailan bisualisatzen zena arakatzailearen arabera aldatzen zen, eta horrek garatzailearen jarduera zailtzen zuen.

2003an erabiltzaileetan oinarritutako informazioaren aroa hasten da eta web 2.0 herrikoia bihurtzen da sare sozial eta blogekin batera. Web-diseinua fase eboluzionatuago batean sartu zen, non erabiltzaileei zein bilatzaileei buruz pentsatzen hasi zen. Geroago, 2007an, sakelako telefonoen diseinua iritsi zen, oso erronka garrantzitsua izan zena. Zer une honetatik aurrera beharrezkoa izan zen webgunearen bertsioak sortzea pantailaren tamainaren arabera. Eta hori posible izan zen sareak eta framework-ak erabiliz.

Azkenik, 2010 eta 2012 tartean agertu zen diseinu sentikorra, gailu adimendunen pantaila ezberdinen tamaina gatazka konpontzeko^[6], informazioa erabiltzaileari modu atseginagoan aurkezteko modu bat aurkituz. Gailu honen bitartez, pantailaren zabalera osoa hartzen duten irudiak erabil daitezke, itxura sinpleago eta garbiagoko web-diseinu minimalistari bidea irekiz. Hau da, edukiak berriro ere protagonismoa hartuz.

Etapak

1. etapa: Analisia

Webgune bat diseinatzerako orduan, garrantzitsuena gure helburuak garbi edukitzea da. Erabaki beharko dugu, zer motatako webgunea nahi dugun, zer merkatutan jardungo garen eta gure sektoreko erabilera ohikoenak. Etapa hau oso garrantzitsua da, analisi hau aldez aurretik ez egiteak kasu askotan webgunearen gabeziak eta estrategia-akatsak agertzea sorrarazten du.

2. etapa: Estrategia diseinua

Etapa honetan webgunea nola sortuko den zehazteko estrategia bat definitzen da, besteak beste:

Webgunea garatzeko CMS bat erabiliko dugun edo neurrira egingo dugun erabakitzea^[2].
Erabaki erabiliko dugun domeinuaren izena.
Erabaki zer ostatatze erabiliko dugun, gure beharren arabera.^[7]
Proiektua prestatzeko datak finkatzea

3. etapa: Web arkitektura

Gure webgunearen arkitektura eta esteken mapa zehaztea da kontuan hartu beharreko beste gakoetako bat. Webgunea gure neurrira sortzea edo CMS bat erabiltzea erabaki dugunaren arabera, lana neketsuagoa edo txikiagoa izan daiteke. Baina, edonola ere, zehaztu behar da zure webgunearen arkitektura zein maila izango dituen eta zein den erabiltzaileak helburu jakin bat betetzeko jarraitu behar duen prozedura.

4. etapa: Edukiak sortzea

Hemen erabat sartzen gara alderdi garrantzitsuenetako batean, zer eduki (irudiak, testuak, bideoak eta abar) erabiliko diren zehaztu beharko dugulako. Edukiak aurkitzea ezinbestekoa da arrazoi sinple batengatik, erabiltzailearen esperientzian eta bihurketan eragiten duelako. Gainera, edukiaren arloan, ez dugu ahaztu behar legezko edukia, zure webgunea datuen babeserako araudia eta cookien legea betetzeko beharrak.

5. etapa: Diseinua eta programazioa exekutatzea

Lehen aipatutako pausoak argi dauzkagunean, diseinatzeko eta programatzeko garaia da. Askotan diseinua estandar bat kontuan hartuko da, baina beste batzuetan probak egiten dira web-eredu desberdinak aztertuz eta eredu horien artean emaitzarik onena zein den eta zure helburuak hobekien betetzen dituena hautatuz. Ziurtatu behar dugu dena gure parametrotara egokitzen dela, kalitate estandarra jarraitzen dugula eta webguneak benetan agintzen duena betetzen duela.

6. etapa: Argitaratzea eta probak egitea

Webgune bat hutsetik garatzen dugunean, ezin dugu erabiltzaileen eskura jarri, kalitate-proba egokiak egin gabe. Horretarako dena ondo ibiltzen dela probatu behar da, erregistro fitxategiak aztertu behar dira, baita webgunearen eskaera eta eragiketa kopuru handi bati ematen dion erantzuna ikustea ere. Era onetan, webgunea erabiltzaileen eskura jarri eta zabaltzen hasi aurretik sor daitezkeen akats ohikoenetako batzuk konpondu ahal izango ditugu.

HTML: Hipertestu etiketa hizkuntza

HTML lengoaia hipertestu dokumentuak sortzeko markatze-lengoaia da, ikasteko oso erraza, eta horri esker, edonork, bere bizitzan inoiz programatu ez badu ere, webgune bat sortzeko zereginari aurre egin ahal izango dio^[8]. Horregatik, menderatzeko erraza den hizkuntza kontsideratzen da. Hizkuntza hau testu-dokumentu batean idatzita dago, horregatik testu-editore bat behar dugu web-orri bat idazteko. Testu-fitxategi mota hauek .html luzapeneko berezitasuna daukate.

Web-orrien edukia definitzeko erabiltzen den hizkuntza da HTML. Funtsean, testua eta web-orri bat osatuko duten beste elementu batzuk definitzeko erabiltzen den etiketa multzo bat da, hala nola irudiak, zerrendak, bideoak eta abar. HTML hasiera batean informazioa zabaltzeko helburuarekin sortu zen testu eta irudien bitartez. Ez zen pentsatu aisialdirako eta kontsultarako gune multimedia bat sortzeko erabiliko zenik. Hala ere, plangintza eskasa izan zuten arren, aldaketak sartu dira denboran zehar erabilera hauei konponbidea emateko (HTML 4.01, HTML 5, eta abar).

CSS

CSS (Cascading Style Sheets) diseinu grafikoko lengoaia bat da, markatze-lengoaia batean idatzitako dokumentu egituratu baten aurkezpena sortzeko eta definitzeko erabiltzen dena.^[5] HTML eta JavaScriptekin batera, CSS webgune askok bisualki erakargarriak diren orrialdeak dira, web aplikazioetarako GUIak sortzeko erabiltzen duten teknologia da.

Teknologia hau dokumentuaren edukia eta aurkezteko modua bereizteko diseinatuta dago, hala nola, geruzak edo diseinuak, koloreak eta letra-tipoak. Bereizketa honek dokumentuen irisgarritasuna hobetu nahi du, malgutasun eta kontrol gehiago eskaintzea aurkezpen-ezaugarriak zehaztean, HTML dokumentu anitzek estilo bakarra partekatzeko aukera ematen dute .css fitxategi batean estilo orri bakar bat erabiliz eta kodearen konplexutasuna eta errepikapena murrizteko. Formatua eta edukia bereizteak aukera ematen du markatutako dokumentu bera estilo ezberdinetan aurkeztea.

Erreferentziak

↑ Leturia, Igor. (2020-09-01). «HTTP/3: webaren komunikazio-protokoloaren bertsio berria» Elhuyar 339.
↑ ^a ^b (Gaztelaniaz) «Herramienta de blog, plataforma de publicación y CMS» WordPress.org España 2023-10-20 (Noiz kontsultatua: 2023-10-25).
↑ (Ingelesez) «W3C» W3C (Noiz kontsultatua: 2023-12-16).
↑ (Gaztelaniaz) Root, Enoch. (2022). «Vida y muerte de Adobe Flash» kaspersky daily.
↑ ^a ^b (Gaztelaniaz) Robledano, Angel. (2019ko ekainaren 26a). Que es CSS y para que sirve. .
↑ (Ingelesez) Marcotte, Ethan. (2010eko maiatzaren 25a). «Responsive Web Design» A LIST APART.
↑ (Ingelesez) G, Domantas. (2022-12-20). «How to Choose a Web Host and Find the Best Hosting Provider» Hostinger Tutorials (Noiz kontsultatua: 2023-12-16).
↑ (Gaztelaniaz) Castellanos, Ezequiel. (2021eko abuztuaren 9a). Aprende las bases de HTML para principiantes en solo 15minutos. FreeCodeCamp.

Bibliografia

Kanpo estekak

Datuak: Q190637
Multimedia: Web design / Q190637

[1] Leturia, Igor. (2020-09-01). «HTTP/3: webaren komunikazio-protokoloaren bertsio berria» Elhuyar 339.

[:0-2] (Gaztelaniaz) «Herramienta de blog, plataforma de publicación y CMS» WordPress.org España 2023-10-20 (Noiz kontsultatua: 2023-10-25).

[3] (Ingelesez) «W3C» W3C (Noiz kontsultatua: 2023-12-16).

[4] (Gaztelaniaz) Root, Enoch. (2022). «Vida y muerte de Adobe Flash» kaspersky daily.

[:1-5] (Gaztelaniaz) Robledano, Angel. (2019ko ekainaren 26a). Que es CSS y para que sirve. .

[6] (Ingelesez) Marcotte, Ethan. (2010eko maiatzaren 25a). «Responsive Web Design» A LIST APART.

[7] (Ingelesez) G, Domantas. (2022-12-20). «How to Choose a Web Host and Find the Best Hosting Provider» Hostinger Tutorials (Noiz kontsultatua: 2023-12-16).

[8] (Gaztelaniaz) Castellanos, Ezequiel. (2021eko abuztuaren 9a). Aprende las bases de HTML para principiantes en solo 15minutos. FreeCodeCamp.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]