Hasi proiektu bat
Kasu azterketa / 01

Domusa Teknik 40 MLK

Bederatzi gailur, 65 kilometro eta 4.000 metro positibo Urola bailaran, egun bakar batean. Lasterketaren webguneak 1,35 MB HTML bidaltzen zituen argazki bat kargatu aurretik, eta informazioa PDFetan zeukan sakabanatuta. ZubiLabsek auditatu egin zuen, hiru fasetako plan bat proposatu zuen, eta bilerara prototipo bat eraman zuen martxan. Gaur lasterketaren webgunea da, kudeaketa-panela barne.

  • Bezeroarentzako proiektua
  • 2026
  • Weba
  • Rola: dena
  • Egoera: domusateknik40mlk.com-en argitaratua
Domusa Teknik 40 MLK: hasiera-orria gaztelaniaz, irteerarako atzerako kontaketarekin
01
Domusa Teknik 40 MLK: 40 MLKren altimetria-profila, gailurrekin eta ordu-mugak laranjaz
02
Domusa Teknik 40 MLK: ibilbidearen mapa interaktiboa IGNren ortoargazkiaren gainean, gailur eta anoa-guneekin
03
01 — TestuinguruaBezeroa

Domusa Teknik 40 MLK Lagun Onak MBk Azpeititik antolatzen duen mendi lasterketa da: 40 MLK, 65 kilometrokoa, eta 15 MLK, 26 kilometrokoa, Azpeitia, Errezil, Bidania-Goiatz eta Beizamako gailurretan barrena. Seigarren edizioa 2027ko maiatzaren 8an aterako da, 550 korrikalarirentzako lekuarekin luzean eta 400ekin laburrean.

Haren webgunea WordPress bat da, Avada gaiarekin, bi maketatzaile aldi berean (Elementor eta Fusion Builder), WPML eta Instagrameko plugin bat. Badabil, baina antolatzaileek eskuz mantentzen dute, funtsezko informazioa PDFetan dago eta emaitzak lau leku desberdinetan sakabanatuta daude.

02 — ArazoaBezeroa

Hasiera-orriak 1,35 MB HTML bidaltzen ditu edozein irudi baino lehen, gaiak bere CSS osoa orri guztietan txertatzen duelako. Mendian, estaldura gutxirekin, hain zuzen orduan behar du korrikalari batek fitxa teknikoa. Eta fitxa hori, anoa-gune, desnibel eta ordu-mugekin, mugikorrean zooma egitera behartzen duten taula eta PDFetan zegoen.

Esteka hautsiak daude, aurrizki okerreko bideak, eta ikuslearen gida euskaraz bakarrik dago. Lasterketaren data eskuz editatzen da hainbat lekutan, eta jada ez dator bat hasiera-orriaren eta fitxen artean. Antolatzaileek albisteak, babesleak eta abisuak argitaratu behar zituzten inoren menpe egon gabe, eta gaur WordPressetik editatzen dutena galdu gabe.

03 — IrtenbideaBezeroa

Webgune berri bat, logotipoaren gradientetik ateratako koloreekin eta letra-tipo estu eta kirolzale batekin: irteerarako atzerako kontaketa duen hasiera-orria, lasterketa bakoitzaren fitxa altimetria-profilarekin, anoa-guneekin eta haien ordu-mugekin, edizioz edizioko sailkapenak, galeria, mailaka antolatutako babesleak, albisteak eta harremana. Fitxa bakoitzak ibilbidearen mapa bat ere badu IGNren ortoargazkiaren gainean, osorik gainetik hegan egin daitekeena. Euskara hizkuntza nagusi gisa, gaztelania eta ingelesa, bakoitza bere URLekin.

Antolatzaileek dena editatzen dute /admin helbidean, aplikazio beraren barruan Payloadekin egindako panel batean: albisteak zirriborro, argitalpen programatu eta bertsio-historiarekin, lasterketak, arrastatuz ordenatzen diren babesleak, galeria, edizioaren datuak, formularioko mezuak eta erabiltzaileak. Eremu bakoitzak hizkuntza bakoitzeko bertsioa du pantaila berean, zuzeneko aurrebistarekin. Abisu larri bat klik batean agertzen da orri guztietan.

04 — Rola

Dena. Egungo webgunearen auditoria, hiru fasetan 25 hobekuntza dituen proposamen-dokumentua, logotipotik abiatutako diseinua, testu, fitxa tekniko, albiste eta argazkien migrazioa, Next.js aplikazioa, kudeaketa-panela, Vercel, Turso eta Vercel Blob gaineko azpiegitura, antolatzaileei egindako aurkezpena eta ekoizpenera igotzea.

05 — ArkitekturaIngeniaritza
BROWSEREU · ES · ENNEXT.JS 16Static · VercelPAYLOAD · /ADMINSame appURGENT ALERT BARSVG PROFILESAVE · REVALIDATELIVE PREVIEWOG · SITEMAPTURSO · BLOB

Erabaki nagusiak, eta zergatik:

  • Panela webgunearen barruan bizi da. Payload Next.js aplikazio berean dabil; beraz, ez dago aparteko CMSrik ostatatu, ordaindu edo eguneratzeko. Webguneak geruza bakar baten bidez irakurtzen du edukia, lehen fitxategi estatikoetatik ateratzen ziren mota berak itzultzen dituena, eta osagaiak ia ez ziren aldatu panela konektatzean.
  • Estatikoa, eta gordetzean berritzen da. Orri publiko guztiak buildean aurrez errendatzen dira. Panelean gordetzean, hook batek ukitutako orriak eta sitemapa berritzen ditu; horrela, publikoak segundo gutxitan ikusten du aldaketa, webgunea bisita bakoitzean datu-base baten menpe egon gabe.
  • Datuek marrazten dute fitxa. Altimetria-profila GPX ofizialetik eta fitxa teknikoko anoa-guneetatik sortutako SVGa da, grafiko-liburutegirik gabe eta bezeroan JavaScriptik gabe. Ordu-mugak laranjaz doaz, markaren urdinetik kanpoko kolore bakarra, inork galdu ezin duen informazioa delako.
  • SQLite lokalean, Turso ekoizpenean. Garapenean datu-basea fitxategi bat da eta argazkiak karpeta batera doaz. Vercelen diskoa iragankorra da; horregatik, datuak Tursora doaz, egokitzaile bera duen SQLite ostatatua, eta argazkiak Vercel Blobera proiektuaren OIDC tokenarekin, gorde beharreko gakorik gabe.
06 — Teknologia
WebaNext.js 16 · App Router · React 19 · TypeScript · Tailwind CSS 4
PanelaPayload 3 · Lexical · Live Preview · Bertsioak eta zirriborroak
DatuakSQLite · Turso · Payload migrazioak
MultimediaVercel Blob · sharp
MapaMapLibre GL · IGN: PNOA eta MTN · 5 m-ko lur-eredua
HizkuntzakEU · ES · EN · hreflang · Eremuz eremuko lokalizazioa
SEOnext/og irudiak · Open Graph · JSON-LD · Sitemapa
OpsVercel · OIDC
07 — ErronkakIngeniaritza
  • Ezer galtzen ez duen hasierako karga. Egungo webgunetik migratutako edukia panelera kargatzen da, hedapenean behin bakarrik exekutatzen den migrazio batekin. Lehen aldian Vercel Blob konektatu gabe exekutatu zen, eta argazkiak buildaren disko iragankorrean idatzi ziren: erregistroak existitzen ez ziren fitxategiei begira geratu ziren. Bigarren migrazio batek erregistro beren gainean igotzen ditu berriro, haiek erabiltzen dituzten galeria, albiste eta lasterketak hautsi gabe.
  • Profil zintzoa, lehenik GPXrik gabe. Track ofizialik ez zegoen bitartean, profila anoa-gune eta gailurren altuera ofizialekin eraiki zen, gailur bakoitzaren kilometroa kontrolen artean interpolatuz. GPXarekin, profila eta mapa tracketik ateratzen dira, altuerak IGNren 5 m-ko lur-eredu digitaletik, eta gailurrek beren altuera ofiziala mantentzen dute. Webguneak grafikoaren azpian azaltzen du.
  • Edukia ez dago inoiz JavaScriptaren menpe. Sarrera-animazioek CSSaren scroll timelineak erabiltzen dituzte @supports baten barruan, eta testua beti ikusgai hasten da. Mugikorreko menua, atzerako kontaketa eta mapa dira bezero-osagai bakarrak: JavaScripteko zerbaitek huts egiten badu, webgunea osorik irakurtzen da, eta mugimendua murrizteko hobespena errespetatzen da.
08 — Emaitza

Webgunea domusateknik40mlk.com-en dago argitaratuta, euskaraz, gaztelaniaz eta ingelesez: bi lasterketak beren fitxa, profil eta ibilbide-maparekin, 2022tik aurrerako edizio guztien sailkapenak izen, dortsal edo herriaren arabera bilatzeko, ikuslearen gida hiru hizkuntzetan, galeria, babesleak, albisteak eta harremana. Hasiera-orria 1,35 MB HTMLtik 200 KB baino gutxiagora pasatzen da.

Proposamena 2026ko urrian aurkeztu zitzaien antolatzaileei, eta webgunea hilabete berean argitaratu zen, aurreko webguneko helbideak berrietara eramanez. Ordutik antolatzaileek albisteak, abisuak eta babesleak paneletik argitaratzen dituzte, 2027ko maiatzaren 8ko seigarren ediziorako bidean.

09 — Ikasgaiak
  • Dabilen zerbait eraman. Benetako edukia duen prototipo batek edozein maketak baino gehiago konbentzitzen du. Antolatzaileek ez dute panela imajinatu behar: sartu, testu bat aldatu eta webgunean ikusten dute.
  • Neurtu iritzia eman aurretik. Webgune bat motela dela esateak ez du inor mugitzen; lehen argazkiaren aurretik 1,35 MB HTML izateak, bai. Diagnostikoa zifrekin idatzi zen, egindako lana kritikatu gabe.
  • Datu bat, leku bat. Lasterketaren data ez zetorren bat hasiera-orriaren eta fitxen artean, hainbat lekutan eskuz editatzen zelako. Panelean behin idazten da, eta atzerako kontaketa, fitxak eta partekatzeko irudiak elikatzen ditu.