Kjære Surfer

Hvis du gjør meg en tjeneste, så skal jeg fortelle deg hvordan surfing kan bli enda hyggeligere.

Verdensveven, som fylte 20 år sist mandag, er bygget av noen få ulike måter å beskrive innholdet på.

Teksten, bildene, lyden, videoen og animasjonene vi ser er beskrevet i et markup-språk. Dette språket, som alle andre språk, har endret seg noe de siste 20årene. Det som ”hovedmål” på Internett i dag er xhtml, det er det vi lærer bort til studenter og bruker når vi lager websider. xHtml ”ligger rundt” innholdet, slik at nettleseren din vet hva den skal vise fram.


<p> p betyr paragraf, eller avsnitt på norsk, og forteller nettleseren at det er en avsnitt med tekst som skal vists</p>

Teksten pakkes inn i en p med slike kråketegn for å viste hvor avsnittet starter og slutter. En overskrift pakkes inn i en h (for header), et element i en liste i li (list item) og så videre.

Xhtml brukes til å beskrive det vi skal vise frem, men hvordan dette skal se ut beskrives i et annet ”språk”, CSS. Cascading Style Sheets eller (kaskaderende) stil-ark på norsk. Det er CSS som bestemmer om teksten skal være blå eller rød, hva slags font-type som skal brukes og hvordan bakgrunnen på websiden skal se ut. Og mange andre ting. Dette betyr at når en side skal ha nytt design, så kan vi i teorien kun skrive ny CSS. Dette er kjempebra, for da kan det samme innholdet vises fram på mange ulike måter. Det er også bra fordi da skiller vi fra hverandre det som skal vises fram, og hvordan det pressenteres. Se for eksempel hvor mange ulike måter denne websiden kan se ut: www.csszengarden.com


p {
color: red;
}

Koden over er css og forteller nettleseren at alle avsnitt skal ha rød tekst.

Alle kan lære html & css. Det er ganske enkelt, det er veldig nyttig og super morsomt.

w3schools.com er et fint sted å starte hvis du vil lære mer.

Nå har vi både beskrevet hva som skal vises fram, og hvordan det skal se ut. Mange wesider har også noen kule effekter. Kanskje du kan dra-og-slippe et element, se en meny som oppfører seg lekent, se et slideshow eller liknende. For å få til slike gøye ting bruker vi ofte enda et språk, javascript.

Javascript er litt mer komplisert enn xhtml og css, men fortsatt ikke vanskeligere enn at en hobbyist kan lage mye flott med det.

For å kunne se disse fine tingene vi lager med disse teknologiene med de krøkkete navnene, så trenger vi en nettleser. En browser. Et surfebrett. Det finnes mange å velge mellom, og det finnes mange virkelig spennende. Om du ikke vet hvilken nettleser du har, eller er usikker på om den er morderne og bra, følg med nå:

For at vi som elsker webben, og vil lage nye og spennende ting på nett skal få til å lage ting som fungerer for alle, så må du bruke en nettleser som leser riktig.

Nettleserne må lese vår CSS, xhtml og javascript likt. Så likt som mulig, slik at alle nettleserne forstår hva vi mener. For å bli enige om dette fant noen opp et sett skriveregler. Vi kaller dem webstandarder, en forklaring på hvordan nettlesere skal tolke koden vi skriver. Vi har et eget organ til å sørge for at det er futt i dette prosjektet, de heter w3c.

Her ser du logoen til tre kjente nettlesere, Firefox, IE8 og Opera

Her ser du logoen til tre kjente nettlesere, Firefox, IE8 og Opera.

Hvis alle nettleserne bare støtter disse, så kan de ellers være så fancy som de vil. Så fancy som du vil ha det. Valg er nettleser kan være ganske personlig, du må finne en du liker. En som snakker det språket som gjelder på internett i dag.

Webben har som sakt nylig fylt 20år, og som alle andre 20åringer så snakker webben et helt annet språk enn da den var 2. Den snakker et ganske annet språk i dag, enn i 2001. I 2001 var nettleseren IE6 ny, og siden den gang har vi fått mange mange oppdateringer i webspråkene, og nye nettlesere og nye bedre måter å gjøre ting på.

Det er på tiden å kaste IE6 i søpla, slapp av, koden er resirkulert og kom ut mye penere etterpå

Det er på tiden å kaste IE6 i søpla. Slapp av, koden er resirkulert og kom ut mye penere etterpå. Bildet er smuglånt av spigotdesign.com

IE6 var en flott nettleser 2001. I dag er IE6 utdatert og hører hjemme på museum.
Så du må gjøre meg en tjeneste: ikke bruk IE6. Bruk noe annet, så lover jeg at vi skal jobbe hard for at internett blir enda mer spennende og morsom i framtiden.

Litt usikker på hva du har å velge i?

  • Opera (den norske)
  • Firefox (min favoritt, den frie)
  • Flock (den sosiale)
  • Chrome (laget av google)
  • Safari (laget av Apple, fancy)
  • IE8 (etterfølgeren til IE6, nesten samme ikon)

Med en av disse får du garantert en bedre opplevelse når du surfer. Mange av disse kan også mye annet. De har faner, de er tryggere, de er penere, de har innstikk (plugins) og de kan tilpasses ditt bruk. Se for eksempel hvor mange innstikk det finnes til Firefox.

Får ikke installere programmer på maskinen du jobber på sier du?

Det er ikke alle nettlesere som trengs å installeres, se for eksempel denne lekre saken her fra Opera. Den kan du kjører rett fra skrivebordet, eller fra en minnepinne, slik at du alltid har en nettleser for handen.

Har vi en deal?

PS: det foregår nå en norsk kampansje for å få folk til å slutte å bruke IE6. Du kan lese mer hos tekniskbeta.no, Aftenposten, BT og dagsavisen. Børge holder trådene samlet i denne saken som vokser seg større og større.

Anders Brenna i TU har også delt en presentasjon med info på saken:

Bille under barken

Jobber du med html/CSS/javascript eller med noen av disse i kombinasjon med et serverside scriptspråk? Da er det en genial plugin du MÅ ha til firefox. En plugin som gjør firefox til den nettleseren som blir uunværlig i ditt arbeid; firebug.

Go getfirebug.com

GetFireBug.com

Hva gjør den?

Med firebug kan du debugge (eller ”avsluse”, som det så pent heter på universitets geek lingo) din kode, for å få enda bedre oversikt over hva som skjer når nettleseren tygger koden din. Vi begynner med det som synes best; CSS.

Flotters.

1. overskriften rendret i normal visning, 2 html-koden for samme overskrift, 3 css-kode som styrer utseende for slike html-elementer

Først klikket jeg på ”inspekt” i firebug-vinduet (1), så på overskriften ”Latin på Upihl” fra forrige post. I vinduet nede til venstre får jeg da opp html’n for denne siden (2) i et tre-utsnitt, med fokus på noden overskriften består av, en <a inni en <h2> inni en div, osv. I vinudet nede til høyre ser vi CSS koden som styrer utseende for denne typen overskrifter (3), rangert etter styrke. Stiler over er skrevet over (svakere stiler) vises med gjennomstreket tekst.

Du kan traversere alle nodene i html-koden, fra <html> og ned til minste barn av barn av barn…, og dermed finne alle noder du har skrevet CSSkode for. Om så noe CSS ikke skulle fungere som forventet; kan du alltids se om stilen blir overskrevet, eller ikke prares pga skrivefeil eller likende.
Det finnes også et layout-view, som viser hvor mye plass de ulike elementene tar, med hele boks-modellen visuallisert. TRouBLe med (top, right, bottom, left) rekke følgen på margin, padding, border, osv er ikke lenger en mare.

inspect med firbugg, nice

Om bare denne modellen hadde vært implementert likt i alle nettlesere..

Et par ting til; lastetid & javascript

En gang i blant begynner kanskje siden din å laste litt treigt, og som vi lærte av Jakob Nielsen for mange år siden; det er ikke bra. Da kan ”net”-tabben være noe å se på. Den viser deg, on-the-fly, hva som lastes i hvilken rekkefølge, hvor lang tid det tar, og hvor mange bytes. Nice.

Lastetid i firebug

Lastetid visuellisert. 1 NET-tabben, 2 antall KB, 3 total lastetid.

Hvordan vet du hvilke variabler og verdier som som sendes asynkront i nye fancy javascriptbaserte webapplikasjoner? Som bruker er jo ikke dette interresant, men når du utvikler er dette veldig nyttig, særlig når hodebunnen begynner å bli sår og tynnslitt.

POSTvariabler i firebug

POST[«manPat»] er alltid tidlig ute.

Console’n forteller meg her at verdien (value) ”Dette er kule saker” og id’n 60 blir sendt til et php-script under stavelin.com/hemmelig/script.php som POST. Det er veldig greit å få presentert i klartekst når det begynner å bli lenge siden forrige kaffekopp.

Du kan gjøre mye mer med firebug, så last ned og finn ut hva som passer din arbeidsmåte best. For meg har firebug gjort at firefox ikke blir byttet ut med noen andre nettlesere som førstevalg med det første. Det finnes konkurrenter til andre nettlesere, men ingen som er så slicke som firebug. Go get.

SpaceTime – en godbit for windowsnerdene

SpaceTime er en nettleser/søkemotorklient I 3D. Den gjør ikke mer enn å laste treffene fra et utvalg søkemotorer som vinduer i et 3Dmiljø, som du kan fly/hoppe/sveve/scrolle deg igennom, ikke vise lenker, men se hele rendrede utgaver av søketreffene.
Det er kanskje ikke veldig nyttig, i alle fall ikke til daglig, men det er veldig moro. Det er nok den gøyeste nettleseropplevelsen så langt, og det ser vakkert ut også!

SpaceTime finnes bare for windows, selv om det lukter Apple av dette. Det krever mye resurser, og ble raskt veldig tregt på UiBs maskiner (2.8ghz, 1bg ram, on board skjermkort), men det funker. Mer om ytelseskrav, download og promovideo finner du her: http://www.spacetime.com/

Legger med noen skjermbilder:

Hostet på photogate

Her ser vi søketreffene på «flower» hos flickr.com. Du ser to tidligere googlesøk bak den raden med treff jeg browser gjennom (fly gjennom) her.

hostet på Photogate

Her ser du (nesten) hele raden med treff fra flickr (10stk av gangen). Med piltastene eller scrollehjulet kan du forflytte deg rundt i søkene.