Archive for the 'html' Category

December 19, 2007

Effektiv html og css-editor

Hvilken tekst-editor liker du best til html og css-editering?

På Windows har jeg ofte brukt EditPlus. Mye på grunn av preview-mulighetene (Ctrl+b) og det enkle, kjappe brukergrensesnittet fritt for dikedarer.

Men, nå har jeg fått en ny favoritt, TextMate til OS X, og det kun på grunn av tre enkle ting:

  • Automatisk Preview
    Aktiver forhåndsvisning med Window->Show Web Preview, så vises alle endringer automatisk i preview-vinduet.
  • Validering
    Hotkey for CSS og HTML-validering mot W3C.
  • Subversion-integrasjon
    TextMate har en enorm mengde bundles, og selvfølgelig også for Subversion.

Textmate Web Preview
TextMate viser html-endringer automatisk i preview-vinduet.

posted by andreeide December 19, 2007 3:12 pm     |     read comments (0)
March 23, 2007

Debug nettsidene med Firefox

Firefox har blitt førstevalget for mang en utvikler, og det er ikke uten grunn. Les Kalid Azad flotte introduksjon og tips: How to Debug Web Applications With Firefox, og bli overbevist du også.

posted by andreeide March 23, 2007 1:51 pm     |     read comments (1)
September 18, 2006

Unobtrusive Javascript

I all Ajax-entusiasmen er det lett å glemme de grunnleggende javascript-teknikkene.

Lenge ble javascript sett på som en skjør og problematisk teknikk, man burde bruke med forsiktighet. Så kom Ajax, og vips var javascript stuerent. Men, problemstillingene du må håndtere er de samme som før: bugs i nettleserne, søkemotorer som ikke finner innhold, back-knapper som ikke funker, vinduer som ikke vises, redirects som aldri skjer etc.

I lys av dette er det nyttig å ta ett skritt tilbake til tiden før Ajax-hysteriet, og se på en av de viktigste javascript-teknikkene.

Unobtrusive javascript

Teknikken er like enkel som genial:

  1. Fjern all javascript fra html-koden
  2. Lag en javascript-funksjon som søker gjennom all html-kode, og plugger inn javascriptene for deg.

Uvant og vanskelig? Heldigvis finnes det mange flinke folk der ute som lager slike script.

Hva med konfigurerbare popup-vinduer a’la dette:

<a href="http://www.vg.no" class="popup">vg</a>

Sjekk: Unobtrusive Javascript Popup Windows (demo)

Eller sorterbare tabeller slik:

<table class="sortable-onload-3 rowstyle-alternative no-arrow">
[..]
</table>

Sjekk Unobtrusive Table Sort Script (demo)

Test det ut! Når du først har begynt å bruke slike scripts vil du aldri tilbake til html-javascript-spagettien fra gamle dager.

For en grundig innføring i teknikken, sjekk også Chris Heilmanns glimrende gjennomgang av unobtrusive javascript.

posted by andreeide September 18, 2006 11:30 am     |     read comments (0)
July 17, 2006

Finn feil fortere med <base href=”">

Feilretting av html og css kan være et mareritt, spesielt om man ikke kjenner til noen små smarte triks.

Mitt favorittriks er utvilsomt <base href=”">.

Tenk at du skal rette en feil på f.eks. dagbladet.no, en side som består av hele 146 forskjellige filer.

I stedet for å laste ned alle filene, holder det å hente html-koden.

Jeg bruker Editplus som har “View in Browser”-funksjon, men du kan selvfølgelig bruke en valgfri teksteditor,

Gjør da følgende:

  • Legg Dagbladets html-kode inn i editoren.
  • Plasser linjen <base href=”http://www.dagbladet.no”/>
    like under <head>
    Dette forteller nettleseren at alle filer skal hentes fra serveren www.dagbladet.no
  • Trykk “View in browser” (Ctrl+b i Editplus) og vips får du se html-siden slik den tar seg ut på dagbladet.no

Så da er det bare å sette i gang å rette feilen.

Når jeg eksperimenterer med css-feil, bruker jeg gjerne inline-css a’la:

style="background: red;"

rett på elementet, eventuelt legger jeg css-koden like over </head> slik:

<style type="text/css">body { background: red;}</style>

Les mer om <base href=”">.

posted by andreeide July 17, 2006 2:25 pm     |     read comments (1)
April 29, 2006

Test IE7 Beta 2 uten å fjerne IE6

Oppdatering: Sjekk også installasjon av IE 7 Beta 3

Nå kan du installére IE7 Beta 2 standalone, og starte med testing og feilretting i denne sterkt etterlengtede oppgraderingen av verdens mest brukte nettleser.

NB! Sider med target=”_blank” fungerer ikke.

posted by andreeide April 29, 2006 4:55 pm     |     read comments (0)
April 25, 2006

Validering av HTML, CSS og robots.txt

Nyttige validerings-verktøy strømmer ut om dagen. Spesielt Firefox er velsignet slike geniale plugins.

Her er et lite knippe utvalgte gullkorn som kan lette din hverdag:

  • htmlvalidator.gif
    Firefox HTML Validator

    Integreres lekkert med Firefox og viser validerings-informasjonen mens du surfer. Dobbelt-klikk på ikonet så får du ekstra informasjon med nøyaktig beskrivelse av feil og advarsler.

    NB! Dette verktøyet bruker HTML Tidy og gir nødvendigvis ikke samme resultat som W3C sin validator.

  • Web Developer Toolbar

    Flott toolbar med mange nyttige funksjoner. Debug css-koden direkte, skru av og på elementer, se detaljer om html-koden, størrelser på elementer og mye mer.
    Takk til bza for tipset!

  • Firefox Firebug

    Validerer html-koden automatisk, og viser nyttig info og detaljer om en side. Spesielt kode-granskingen falt jeg for her. Dessverre er gjeldende versjon noe ustabil.

  • Firefox Online W3C HTML validator

    Plugin som legger til menyvalg for sjekk mot W3Cs offisielle tjeneste.

  • Safari Tidy NY

    Safari-versjon av Firefox HTML Validator.

  • Opera-tips: Trykk Ctrl+Alt+v i Opera, så valideres html-koden automatisk.
  • W3C HTML Validator
  • W3C CSS Validator
  • RSS og Atom Feed Validator
  • Robots.txt syntax checker

Så nå har man ingen gode unnskyldninger for å servere dårlig html og css, men noen dårlige har jeg alltids på lager;)

posted by andreeide April 25, 2006 7:58 pm     |     read comments (2)
April 2, 2006

Browsertesting – test ofte, få mindre hodepine

Det trenger ikke være en plagsom hodepine å få nettstedet til å fungere i alle nettlesere. Følger du noen enkle råd, blir arbeidet lettere, morsommere og migrenen borte.

  • Test fra dag én.

    Skal du støtte IE, Opera og Firefox, bør du teste i alle disse fra dag en.
    Dersom du finner dette tungvint, bør du vurdere en html-editor som forenkler slikt arbeid. Selv bruker jeg HTML-kit. HTML-kit søker automatisk opp alle mine installerte nettlesere og knytter disse til en hurtigtast. Dermed kan jeg trykke: F12 for vanlig preview (IE6), Alt+1 for Opera, Alt+2 for Firefox etc.

  • Installér flere IE-versjoner.

    IE7-standalone er nå enkelt å legge inn. Bare følg oppskriften og test i vei.

    Skal du støtte IE5.01 og IE5.5, kan du laste ned IE-5.x standalones.

    NB! Disse gir feil versjonsnummer under menyvalget “hjelp”->”om internet explorer”. For å sjekke versjonen, kan du f. eks. bruke Browserhawk

    Vær oppmerksom på at du må gjøre en fiks for å få Conditional Comments til å fungere.

  • Browsershots

    Gratistjenesten Browsershots viser websiden din i en rekke nettlesere inkludert IE7. Test mot Firefox 1, Safari, Opera, Konqueror (Linux), alle i to forskjellige oppløsninger.

    NB! Dette er en gratistjeneste så kapasiteten er begrenset.

  • Browsercam

    Kommersiell side som viser skjermdump av din nettside i et stort antall nettlesere på seks operativsystemer.

    Kan testes gratis én dag.

  • Lær deg <base href=”"/>

    <base> lar deg angi hvor html-kodens bilder, css og javascript skal hentes fra. Sett at du skal rette en html-feil på dagbladet. Last ned html-koden, og legg inn følgende i <head>

    <base href=’http://www.dagbladet.no’/>

    Les mer om <base href=”"/>

posted by andreeide April 2, 2006 12:09 pm     |     read comments (0)
March 10, 2005

Bli html-ekspert med htmldog.com

I min evige jakt etter gode HTML og CSS-ressurssider kom jeg over denne juvelen:

Den perfekte siden for nybegynnere og erfarne web-utviklere som ønsker å følge standardene. Her finner du:

Kursene er inndelt i kapitler for nybegynnere, viderekommende og proffe brukere.

posted by andreeide March 10, 2005 7:34 am     |     read comments (0)