Í þessum fyrsta “greinabálki” mínum hérna á hugi.is/vefsíðugerð ætla ég að fjalla um mál sem er mjög “heitt” um þessar mundir í vefbransanum, en það er gerð “töflulausra” vefsíða.

Upphaflega ætlaði ég nú að hafa þetta eina grein sem fjallaði um fæðingu vefsvæðis alveg frá því að það er bara photoshop skjal og þangað til að það er orðið að fullbúinni, aðgengilegri og töflulausri veflausn.
Áður en ég vissi af þá voru einhverjar flóðgáttir opnaðar og inngangurinn að greininni var orðinn alltof langur. Mér fannst nauðsynlegt að koma með smá söguágrip til kynningar áður en ég dembdi mér í aðal málið. Ég tók því þá ákvörðun að skipta þessu upp í a.m.k 2 greinar.

Hér er semsagt fyrsti hlutinn, smá bakgrunnur semsagt og skilgreining á því sem gæti kallast “töflulaust” og “merkingarbært” HTML.

Í næsta hluta ætla ég mér að skella saman mjög einföldu og stílhreinu útliti í photoshop og sýna svo skref fyrir skref hvernig gott er að koma því yfir á vefinn.

P.S þessi grein er einnig birt á vefnum mínum (http://haukur.hot.is/pages/63), gæti verið þægilegra að lesa hana þar. Hver veit nema Hugi skemmi eitthvað formatteringuna á þessu hjá mér.

Góða skemmtun! :)

Hérna áður fyrr ….

Allir sem eitthvað hafa smíðað vefsíður muna eflaust eftir fyrstu síðunni sem þeir gerðu, mjög líklega í dreamweaver eða frontpage. Ef málum er eins háttað og hjá mér persónulega, þá voru þessar fyrstu síður yfirleitt mjög svipaðar dæmigerðu Word-skjali í uppbyggingu. Það sem ég á við með því er að það var ekki mikið um dálkaskiptingar, heldur var síðan mjög lóðrétt ef svo mætti segja.
Efst kom einhverskonar fyrirsögn, gjarnan lógo, og svo meginmálið fyrir neðan. Ekki var óalgengt að efninu væri skipt upp með því að skella lárréttum línum hér og þar (hr). Á bakvið textann sem yfirleitt var 15px gulur og bold (!) var svo skellt misfallegum bakgrunnsmyndum og svo var mjög algengt að sjá einhverskonar “mailto” tengil sem var gjarnan í formi umslags sem hreyfðist eða hringsnérist í kringum hnött. Þó að þetta hljómi ekki fallega, þá var þetta ótrúlega algeng uppbygging vefsíða á þessum tíma. Nota bene, við erum að tala um c.a 1996-1997.

Mikið var svo gaman þegar maður uppgötvaði töflu-tagið góða! Allt í einu gat maður skellt upp dálkum og röðum, haft lógó-ið í efstu röðinni, skellt colspan=“2” á það og verið með aðra röð fyrir neðan með 2 dálkum, þar sem var valmynd með tenglum og efnið svo þar við hliðina. Með tímanum náði maður ótrúlegri lagni við þetta og með þessari aðferð var hægt að koma hvaða layouti sem vera skyldi yfir á HTML form. Mjög gott mál, eða hvað?

Það sem maður var að gera þarna var ekki alveg nógu sniðugt þrátt fyrir allt. Hugtakið að aðskilja efni og útlit var til dæmis algjörlega fótum troðið þarna. Að taka heilan vef gerðan á þennan hátt og ætla að skipta um útlit var ekkert afskaplega létt verk (skánaði þó til muna með notkun á sniðmátum (E. templates) en það er annað mál).

Þegar CSS kom svo til sögunnar, þá tóku hlutirnir aðeins að breytast. Reyndar held ég að margir geti verið sammála um það að helsti kosturinn sem maður sá við CSS fyrst um sinn var sá að geta miðstýrt leturskilgreiningum og litum, og geta hætt að vesenast með <font>-tög í tíma og ótíma. En það var bara byrjunin á öllu saman …

Hvað er “töflulaus” vefsíða ?

Jú, eins og nafnið gefur til kynna, þá er það vefsíða sem inniheldur ekki töflur …. eða hvað? Málið er kannski ekki alveg það svart/hvítt. Það sem er átt við með þessu er það að við uppsetningu útlits (e. Layout) er ekki stuðst við töflur eins og var svo gjarnan gert áður fyrr. Í stað taflna er CSS notað til að stýra útliti alveg frá A til Ö.
Annað mikilvægt atriði er að nota merkingarbært HTML. Hvað er það? Jú … það er ástæða fyrir því að html-tög eins og ul, ol, h1, h2, h3, address, table (!) o.fl. eru til. Þau hafa ákveðna merkingu.

Í staðinn fyrir að tákna fyrirsagnir með


þá notum við html-tög sem ætluð voru til þess verks, nefnilega H1,H2,H3 o.sv.frv.

Hvort haldiði að myndi hafa meiri merkingu fyrir Google?


Eða …


Að sjálfsögðu seinni aðferðin. Afhverju? Jú, H1 hefur merkingu. Google veit hvað H1 er. Skjálesarar vita hvað H1 er.
Það veit hinsvegar enginn hvað


er, nema við notendur venjulegra vafra, og fyrst eftir að búið er að skilgreina CSS-klassann .fyrirsogn

Ég heyri að það er einhver að kvarta yfir því að H1 sé svo ljótt … stórt og klunnalegt …. nú, þá skilgreinum við útlitið á H1 eins og við viljum hafa það, með CSS.

Ef maður þarf að setja upp töfluleg gögn, eins og t.d lista yfir starfsmenn og símanúmer, þá er fullkomnlega eðlilegt að nota töflur í það, enda er það, það sem töflur voru ætlaðar til.

Kostirnir við ofangreind vinnubrögð eru mý-margir.

Þar ber helst að nefna:

1. Algjör aðskilnaður efnis og útlits - gríðarlegur sveigjanleiki. Gott dæmi um þetta er http://www.csszengarden.com/. Eitt vel upp sett HTML skjal og hver sem er getur búið til grafík og CSS skjal til að sníða útlitið algjörlega að sínu höfði og það án þess að breyta nokkru í HTML-kóðanum.
2. Mun léttari vefsíður - færri kílóbæt af html-kóða - fljótari að sækja síðurnar.
3. Aukinn aðgengileiki - Þeir sem nota t.d frumstæða vafra eins og Lynx, nú eða t.d bara vafra í GSM síma eða lófatölvum geta auðveldlega skoðað vefinn. Svo ekki sé nú talað um t.d blinda og/eða sjónskerta notendur sem nota skjálesara til að vafra.
4. Aukinn sýnileiki á leitarvélum - Tengist auknum aðgengileika beint. Hafa ber í huga að leitarvélar virka í raun eins og blindir notendur þegar þær eru að þræða vefsíður. Ef leitarvél rekst á vefsíðu þar sem HTML-kóðinn er í raun
ekkert annað en töflusúpa og annað HTML sull, þá þarf hún að vinsa viðbjóðinn burt beinlínis í leit að raunverulegu efni síðunnar. Ok, þetta er kannski ekki alveg það dramatískt, en þið skiljið vonandi það sem ég er að meina.

Svona að lokum langar mig að minnast á tvö nýleg vefsvæði nokkuð stórra aðila og biðja fólk um að skoða þau nokkuð gagnrýnum augum með ofangreind atriði í huga.

1. Nýr vefur Íslandsbanka - http://www.isb.is/
2. Nýr vefur Sparisjóðanna - http://www.spron.is/

Helsti munurinn þarna er sá að vefsvæði Íslandsbanka er gert með ofangreind vinnubrögð í huga, en það er hálf-fúlt að segja frá því að nýja vefsvæði Spron er “töflusúpa”.

Til að fá einhverja hugmynd um muninn á þessum vefsvæðum, svona undir húddinu, prófið þá að opna þau í Firefox og slökkva á CSS stuðningi (Þarf reyndar Web-developer toolbar til þess, eða sambærilegt apparat).

Það sem gerist er að þið fáið upp raunverulegt efni vefjanna án útlitsskilgreininga. Vefur Spron breytist lítið, þar sem meirihluti útlits er alveg naglfast í HTML kóðanum. Vefur Íslandsbanka aftur á móti er allt annað mál.

Það sem væri enn betra til að átta sig á muninum er að reyna að skoða þessa vefi t.d í farsíma. Ég er sjálfur með K750i og get skoðað vef Íslandsbanka án vandræða, en það er ekki fræðilegur möguleiki að skoða vef Spron á þann hátt.

Ég verð að taka það fram að ég er alls ekki með eitthvað skítkast í garð vefs Spron, ég er nokkuð hrifinn af vefnum, a.m.k útlitslega séð.

Mér finnst bara mjög skrítið að á þessum tímum þegar um fátt er meira talað í vefbransanum en akkúrat þetta, að jafn stór og virðulegur aðili og Spron réttilega er sé að veita þessum atriðum svona sorglega litla athygli.

Jæja, læt þetta duga í bili … í næstu grein mun ég fara nánar í aðalmálið, þ.e gerð sjálfrar vefsíðunnar, með allt ofangreint að leiðarljósi.

Takk fyrir,
Haukur H. Þórsson (hagur)