En online notesbog

Stylesheet reset. Forebyg browser problemer med reset.css

juni 10th, 2008. Kategori: Browser bugs and fixes, Webudvikling | 3 Kommentarer »

En af mine venner Thor Madsen Holm, gjorde mig igår opmærksom på, en smart måde at udligne nogle af forskellene på IE, Firefox og Safari.

Metoden kaldes stylesheet reset, og oftest bruger man et specielt stylesheet: reset.css
Læs resten af indlægget »

Problemer med blanktegn, mellemrum eller whitespace.

juni 6th, 2008. Kategori: Webudvikling | 3 Kommentarer »

Blanktegn eller mellemrum (whitespaces) kan give en række problemer, når du skriver HTML kode. Hvis man ikke er opmærksom på problemerne kan det være frustrerende at finde disse fejl, da blanktegnene som regel ikke kan ses i vores HTML editor.

De fleste problemer kan dog undgåes på en ganske simpel måde . Det gør måske din kode en anelse mindre overskuelig, men sikrer på den anden side en række uhensigtsmæssigheder. 
Læs resten af indlægget »

Lix, lixtal og læsbarhed.

maj 23rd, 2008. Kategori: Brugervenlighed | 32 Kommentarer »

Lix står for Læsbarhedsindex. Lixtallet siger altså noget om teksts læsbarhed.

Vi kender lix og lixtal fra skolen. Lærerne bruger lixtal til at angive, hvor svære bøger, eleverne skal læse. På skolebibliotekerne er bøgerne mærket med lixtal, så eleverne selv kan finde frem til bøger på et passende niveau.

Lix og lixtal på nettet

Men lix og lixtal kan  også bruges til at give en indikation af, hvor brugervenlige vores tekster på nettet er.
Læs resten af indlægget »

Opdatering af Ubuntu til Hardy Heron

maj 23rd, 2008. Kategori: Linux | Ingen kommentarer »

“En Linux begynder opdaterer Ubuntu. Artikel 7”

En ny version Ubuntu, så dagens lys i april. Så det var på tide at opdatere Ubuntu fra Gutsy Gibbon til Hardy Heron. Jeg havde ventet en måneds tid siden releasen for at give Ubuntu en chance for at fikse de værste bugs.

Belært af tidligere erfaringer med Ubuntu og Linux, satte jeg en fridag af til projektet. 😉
Læs resten af indlægget »

Event objektet i Internet Explorer og Firefox

maj 8th, 2008. Kategori: Browser bugs and fixes, Webudvikling | Ingen kommentarer »

Sad på Statsbiblioteket og skulle lave en logging funktion til den nye søgemaskine Summa. Vi har allerede flere logging funktioner tilknyttet Summa, men nu skulle vi bruge noget der kunne logge alle klik på links med AJAX funktionerne. Problemet med at logge links,  der udfører AJAX kald, er at siden ikke skiftes/opdateres 100%, men kun opdateres lokalt.
Læs resten af indlægget »

Tilgængelighed. Toolbars og andre værktøjer

april 30th, 2008. Kategori: Brugervenlighed | 6 Kommentarer »

Når man arbejder med tilgængelighed, skal værktøjet være i orden. Der findes en lang række forskellige værktøjer, når man skal arbejde med et websites tilgængelighed. Lad os først se på den håndfuld toolbars, der findes. 
Læs resten af indlægget »

Statistik over browsere og skærmopløsninger

marts 25th, 2008. Kategori: Webudvikling | 10 Kommentarer »

Som webudvikler er det vigtigt at have adgang til nogle statistikker over  browser og skærmopløsning.  Vi vil gerne vide, hvor gamle browsere vores design skal understøtte, og hvor stor skærmopløsning vores brugere benytter.  Løsningen er statistik.

Det er vigtigt at  statistikkerne er pålidelige og,  at de statistiske data bygger på et solidt grundlag.
Læs resten af indlægget »

Glasknapper og glaseffekter. En Photoshop tutorial

marts 17th, 2008. Kategori: Design, Webudvikling | 7 Kommentarer »

Simple vellignende glaseffekter

Jeg vil i denne tutorial gennemgå, hvordan man laver en simpel glasknap. Metoden er let at overføre til andre elementer, så du kan bruge den til at lave både glasknapper, glasbjælker og andre glaseffekter.

Når man først forstår og behersker denne simple teknik, er det let at aflure andre og mere avancerede glasteknikker.
Læs resten af indlægget »

PHP og dansk tegnsæt. Æ, ø og å fejl. Fra utf-8 til ISO-8859-1

marts 2nd, 2008. Kategori: Webudvikling | 21 Kommentarer »

Det er min 3. artikel om danske tegnsæts problemer. Igen efter at have oplevet fejl med de danske specialtegn: æ, ø og å. Det er det danske tegnsæt latin1, der driller.

Den tekniske betegnelse for latin1 tegnsættet er ISO-8859-1 eller ISO-8859-15. Og når vi definere vores tegnsæt som et latin1 tegnsæt skal vi bruge de tekniske navne.

PHP. Fra utf-8 til ISO-8859-1

Jeg havde loadet noget XML ind på en webside i form af et RSS feed. Jeg brugte simplexml_load_file() funktionen til denne opgave.  Simple_load_xml leverer XML’en med utf-8 tegnsæt, og det giver problemer, når min hjemmeside er kodet med ISO-8859-1 tegnsæt.  Både overskrifter og indhold var ulæseligt på grund af manglende æ’er, ø’er og å’er.

Heldigvis var løsningen nær, php-funktionen: utf8_decode().

utf8_decode($minTekst);

utf8_decode tager en streng og omdanner den fra utf-8 til ISO-8859-1/latin1. Det kan næsten ikke blive mere simpelt. Og så virker det.

Et eksempel med uft8_decode()

Her er et lidt mere komplekst eksempel fra det virkelige liv.  Scriptet henter et RSS feed fra DR’s kultur sektion.

  <?php
  
   // RSS feeden hentes. Gemmes som obejct i $feed
   $feed = simplexml_load_file(‘http://www.dr.dk/nyheder/service/feeds/kultur’);
   

   //channel og item nodes løbes igennem.
   //Channel er parent, her hentes oplysninger om RSS-feeden
   //Item er child og har selv flere children som feks: title, description, pubDate og link
   //alt kørt igennem utf8_decode() Der returner iso ISO-8859-1

   foreach($feed->channel as $channel){
    print utf8_decode(“Kanal:<a href='{$channel->link}’> {$channel->title}</a><br/>”);
    foreach($feed->channel->item as $item){
      print utf8_decode(“<a href='{$item->link}’>{$item->title}</a><br/>”);
      print utf8_decode(“{$item->pubDate} <br/>”);
      print utf8_decode(“{$item->description} <br/><br/>”);
      } 
   }
   
  ?>

utf8_decode funktionen er brugt på alle print komandoerne, og tegnsætsproblemet er løst … for denne gang. 😉

Skift tegnsæt med iconv()

Hvis ovenstående ikke løste dit tegnsæt problem med de danske bogstaver,  kan du istedet bruge php-funktionen iconv(). iconv-funktionen konverterer mellem forskellige tegnsæt. Og man kan vel og mærke frit vælge de tegnsæt man vil konvertere imellem.

Vil man f.eks. konverterer mellem det danske ISO-8859-1/latin1 tegnsæt og utf-8, ser løsningen sådan ud:

iconv ( (“ISO-8859-1”, “UTF-8”, $minTekst);)

Jeg har f.eks. brugt denne konverterings metode til at finde det rette tegnsæt efter at mine æ, ø og å’er var blevet ødelagt af et AJAX kald. Netop AJAX kan være særlig drilsk, så det kan det være nødvendigt at eksperimentere med forskellige løsninger.

 Se også min tutorial til en simpel RSS reader med PHP

Problemer med Flash, Thickbox og Lightbox ved visning af billeder

februar 24th, 2008. Kategori: Webudvikling | 5 Kommentarer »

Flash og Thickbox

Jeg har tilføjet JavaScript biblioteket Thickbox til mit portfolio. Selvfølgelig for at få en mere lækker præsentation af mine billeder.

På mit portfolio viser jeg samtidig et lille Flash diasshow. I Internet Explorer 7 (IE7) gav Flash problemer sammen med Thickbox. Flashen lagde sig over Thickbox afblændningen, og dækkede også for selve billedet. Problemet opstod ikke i hverken Firefox eller IE 6.

En simpel løsning: sluk Flash og tænd Flash

Løsningen er simpel. Når Thickbox startes op, skal visningen af Flashen stoppes med noget JavaScript. Første skridt var at give mit Flash diasshow en id (‘dias’) i html’en, så jeg kunne få fat i den med JavaScriptet.

Dernæst tilføjede jeg øverst i : funktionen tb_show() i thickbox.js.

document.getElementById(‘dias’).style.display = “none”;

Og for at starte visningen af flashen igen. Stadig i thickbox.js i funktionen tb_remove() tilføjede jeg sidst i funktionen, lige før return false;:

setTimeout(“document.getElementById(‘dias’).style.display = \”block\””,150);

setTimeout(‘kode’,150) er for at forsinke visningen af flashen. Det er nødvendigt da Thickbox, ikke slukker sin afmaskning af baggrunden, men fader den ud. Det går rimeligt hurtigt, men hvis forsinkelsen ikke er der, vil Flashen nå at spring op foran thickbox’s billedboks.  I mit tilfælde var en forsinkelse på 150 millisekunder passende.

Flash og Lightbox

På vej mod løsningen afprøvede jeg også den basale udgave af Lightbox. Men den gav det samme problem. Igen dækkede Flash for  billedet og blev ikke blændet ned. Denne gang endda i både Explorer og Firefox.

Men efter jeg havde løst problemet i Thickbox,  vendte jeg tilbage til Lightbox. Her placerede jeg de to kodelinier i henholdsvis funktionerne showLightbox() og hideLightbox().

Det var endda noget lettere, da koden i Lightbox er grundigere kommenteret og mere overskuelig. Endvidere fader Lightbox ikke sin visningsbox. Den slukker på en gang. Derfor kunne fjerne forsinkelsen og setTimeout(), fra den sidste kodelinie.