Niels Gamborgs online notesbog

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 | 20 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.

Test af gratis online billedbehandling på Internettet

februar 23rd, 2008. Kategori: Foto, Webudvikling | 3 Kommentarer »

Gratis billedbehandling online

I forbindelse med en opgave for statsbiblioteket, skulle jeg finde en gratis online billedbehandler. Kriteriet var at give 20 webredaktører let adgang til en simpel billedbehandling fra deres egen maskine. Kravet til redigeringsprogrammet var, at et billede skulle kunne beskæres, tilpasses netbrug i størrelse og gemmes i jpg format.

Jeg har testet 3 online værktøjer. Her er en kort anmeldelse af dem.

Brugervenlighed fra Picnik.com

Picnik.com blev jeg mødt af en behagelig og overskuelig brugergrænseflade. 

Stilen er behagelig luftig web2.0-agtig med topmenuer og stor skrift. Alt sammen med til at give en følelse af velkendte funktioner og en intuitiv brug af applikationen.

 

Billedbehandling i Picnik

Det er let at beskære billeder i picnik. Crop funktionen åbner en ramme med et gitter, med 3 gange 3 hjælpelinier, og man kan trække rammekanterne, indtil man er tilfreds med sin beskæring.

Resize (give ny billedstørrelse) af billedet er også let. Man indtaster den ønskede maksimumsbredde og picnic sørgede pr. default for at bevare propertionerne.

Efter en resize bliver fotoet en anelse sløret. Men Picnic har en fremragende sharpen funktion, hvor man selv kan justere graden af skarphed. Man skal altid være varsom med sin brug af sharpen, og derfor er det vigtigt, at man selv kan regulere skarpheden.

I Picnik kan man også regulere farvebalance, lys, kontrast og der er en lang række filtre til special effects, hvis man er til den slags.

Når man gemmer sit foto, er der rådgivning om jpg kompresionen. Meget brugervenligt!

Alt i alt har picnik en lækker finish og feel, og programmet virker på alle punkter meget let og intuitivt at bruge.

Photoshop interface fra splashup.com

Splashup.com er den næste i rækken og er ligesom Picnik, også en flash applikation. Men her hører ligheden også op.

Brugergrænsefladen er bygget op som en forsimplet Photoshop. Ikoner for værktøjerne er baseret på Photoshop lignende ikoner og applikationen bruger flydende palletter. Det virker bare ikke efter hensigten.

Første problem er at billedet bliver loadet ind i 100% størrelse, så man kun ser et udsnit af det. Det tog mig en rum tid, før jeg endelig fandt zoom funktionen, gemt væk i et hjørne.

Næste problem var de flydende palletter som dækkede over billedet. Jeg kunne ikke lukke dem, men måtte trække dem væk, så jeg kunne komme til at arbejde.

 

Billedbehandling i Splashup

Crop funktionen i Splashup fungerer dårligt. Så snart man slipper musen bliver billedet beskåret. Altså ingen mulighed for at eksperimentere sig frem til et godt resultat, uden at skulle bruge fortryd knappen.

Når man skal en ny sætte størrelsen bliver ftoet som default forvrænget. Man selv skal markere constrain for bevare propertionerne mellem højde og bredde.

Sharpen er ubrugelig i Splashup, da man ingen indstilingsmuligheder har. Og filtret er indstillet til at at tage alt for kraftigt fat.

Farvebalance, lys, kontrast indstillingerne fungerer dog fint, og der er også effektfiltre til rådighed.

Overordnet set er navigation og brugergrænseflade svær at overskue. Selv med mit kendskab til Photoshop var det vanskeligt at finde rundt. En begynder i billedbehandling vil have det meget svært med Splashup.

MySpace bling-bling billedbehandling

Den sidste applikation er fra MySpace, og hedder Mytheme.

Førstehåndsindtrykket er en rodet og svært overskuelig brugergrænseflade. Mange funktioner, billeder, reklamer og tekst på for lidt plads. Alt i bedste Myspace stil.

Billededitoren er html baseret, og det viser sig straks. Siden refresher hver gang man vælger et nyt værktøj og det giver lange ventetider.

 

Billedbehandling i Mytheme

Beskæringen i Mytheme fungerer ved at man trækker en ramme om det ønskede område. Man kan dog ikke regulere denne ramme, men må trække en ny, hvis man ikke er tilfreds med sin beskæring.

Helt galt går det, når man skal resize et billede. Man kan simpelthen ikke sætte faste propertioner. Altså skal man have gang i en lommeregner for ikke at forvrænge sit foto. Denne ene manglende feature er nok til at gøre programmet ubrugeligt til seriøs billedbehandling.

Skarpheden kan ikke reguleres og er derfor værdiløs i praksis.

Tilgengæld er der spandevis af effekt filtre, animations og spejlingsmuligheder. Så Mytheme kan måske være sjovt at lege med, hvis man er i sine tidlige teenage år, og synes pink sommerfugle lagt på forvrængede portrætter er fed grafik.

De mange effekter og filtre give mange menuer med 30-40 valgmuligheder, hvilket gør navigationen til et helvede.

Konklusion

Kort og godt: Picnik.com er klasser foran de andre, og et fantastisk gratis værktøj. Man kan købe sig til ekstra funktioner, men alle de basale til en hurtig omgang billedbehandling er gratis.

MySplash kan sagtens bruge med gode resultater til følge. Den kan dog ikke følge med piknic i forhold til interface og brugervenlighed.

Mytheme er fis og ballade, og har nogle sjove effekter, men kan ikke bruges til seriøs billedbehandling.

Alle services i testen giver forøvrigt også mulighed for både at uploade og gemme på PC’en, men også til en lang række af mere eller mindre trendy web 2.0 services som Flikcr, Facebook, Picassa etc.

Display bug i CMS’en Plone. Elementer, der forsvinder i Internet Explorer 6 (IE6)

februar 19th, 2008. Kategori: Browser bugs and fixes, Webudvikling | Ingen kommentarer »

Displaybug i Plone

For 3 gang i løbet af 6 måneder løb jeg atter ind i Internet Explorers display bug. Denne gang var det indholdet af nogle tabeller på statsbiblioteket’s CMS (Plone), der var problemet. Som webudvikler blandt en masse dataloger, fik jeg “æren” af at løse problemet med vore sallesammens yndlingsbrowser IE6.

Det skulle da også være en smal sag, dag jeg efterhånden kender flere løsninger på display bugs og endda har prøvet et par af dem i virkelighed.

Løsning 1

Som regel skyldes bug’en manglende dimensioner på et element, så jeg gik frisk til sagen og prøvede at tilføje en line-height til de tabelceller, hvor indholdet forsvandt fra. Intet held, så frisk videre.

Se min beskrivelse af line-height løsningen.

Løsning 2

Endnu et forsøg på at tilføje en dimension:

/* Hides from IE5-mac \*/
* html .problemboks {height: 1%;}
/* End hide from IE5-mac */

Denne løsning er beskrevet som en magic bullet på diverse forskellige displaybugs, men virkede dog ikke i Plone.

Her min tidligere artikel om denne løsning.

Løsning 3

3. gang var lykkens gang. Denne gang med den højst usandsynlige løsning, der bestod af at tilføje en position: relative, som denne:

/* Hides from IE5-mac \*/
* html table.tabelklasse_med_display_problem{
position:relative;
}
/* End hide from IE5-mac */

Det hele pakket ind i stjerne hack (* html), så kun IE 5 0g 6 kan læse det. Det så nu ikke ud til at påvirke Firefox, men bare for en sikkerheds skyld.

Læs mere om display bugs i denne fremragende artikel: How To Attack An Internet Explorer (Win) Display Bug.

Hvorfor fixer Plone det ikke for os?

Meningen med et CMS er vel at slippe for alt bøvlet? Tjaa. Plone påstår også, at de gennem en masse indbyggede fixes klarer alle de kendte Explorer bugs.

Men måske skyldes miseren, at statsbiblioteket kører en ældre Plone 2.5. Eller måske er årsagen en hjemmeudviklet template, der ikke måske ikke er helt efter bogen.

Vis relaterede artikler. Et nyttigt WordPress plugin

februar 17th, 2008. Kategori: Wordpress | 4 Kommentarer »

Yet Another Related Posts Plugin

Faldt over dette nyttige WordPress plugin, som viser beslægtede artikler på din WordPress blog.

Yet Another Related Posts Plugin

Pluginet viser automatisk en liste med relaterede artikler nederst på hver side med kun  en post. Plugin baserer sin resultater på en sammeligning af tekstindholdet mellem de forskellige wordpress indlæg.  Det skulle efter sigende giver et mere relevant resultat end, hvis man sammenlignede på tags og kategorier, som  andre “related posts” WordPress plugins bygger på.

Installation og konfiguration

“Yet Another Related Posts Plugin”  er let at installere. Mappen skal bare smides i WordPress’s plugin-mappe, og derefter aktiveres plugin’et fra kontrol panelet.

Default opsætningen virker fint for mig. Jeg ændrede kun lidt på teksterne for at få dem på dansk. Men ellers er der mange konfigurations muligheder, og kontrol panelet er let og intuitivt at gå til. F.eks. kan man selv bestemme, hvor mange relaterede indlæg der skal vises, hvor relaterede de skal være for at blive vist, hvordan de skal vises og om der evt skal vises små bidder af indlægget.

Endlig kan du også selv bestemme, hvor listen over artiklerne vises. Det kræver, at du piller lidt i dine WordPress filer, men dokumentationen virker rimelig grundig. 

YouTube video der validerer og overholder w3 XHTML standard

februar 16th, 2008. Kategori: Webudvikling | 6 Kommentarer »

YouTube bryder W3 standarden

De html tags som YouTube anbefaler til at vise deres video, overholder ikke W3 standard og validerer derfor ikke.

Problemet er at YouTube bruger “embed”-tagget, som er et gammelt html tag opfundet af netscape. Metoden med embed virker ganske vist i alle browsere, men embed tagget er ikke en del af XHTML standarden.

Det holder selvfølgelig ikke, at en enorm virksomhed som YouTube ignorerer alle standarder og er ligelade med validering. Med denne politik spreder de dårlig kode ud over millionvis af Internetsider.

Kode der validerer

Men når YouTube ikke vil, så må vi jo selv løse problemet.

Denne simple løsning virker i alle gængse browsere. Du skal bare skiftet YouTube linket ud med det du vil bruge.

<object type=”application/x-shockwave-flash” style=”width:212px; height:175px;” data=”http://www.youtube.com/v/qJGDjnthhMw&rel=1″>
  <param name=”movie” value=”http://www.youtube.com/v/qJGDjnthhMw&rel=1″ />
 </object>

OBS: Vær opmærksompå at hvis du copy-paster kode fra en wordpress blog, kan du få problemmer med at anførelsestegn og apostrofer ikke validerer!

Metoden er beskrevet af Bernin Zimmerman i Embedding YouTube Videos as Valid XHTML 1.0. (validerer også i XHTML1.1.)

AJAX, MySQL og dansk tegnsæt. Når æ, ø og å forsvinder.

februar 15th, 2008. Kategori: Webudvikling | 4 Kommentarer »

AJAX og MySQL

AJAX giver ofte problemer med at æ, ø og å forsvinder. Især optræder problemet, når AJAX skal hente informationer fra databaser.

Det er med PHP og MySQL, jeg har oplevet problemerne. Både når jeg har hentet data fra min egen MySQL database, men også, når jeg har hentet oplysninger fra PHPBB forums’s MySQL database.

Der er flere tegnsæt, som kan håndtere æ, ø og å, men det er min fornemmelse, at problemet ofte opstår, når der kommer konflikt mellem forskellige tegnsæts deklarationer. Og det gør der f.eks., hvis du bruger et tegnsæt i din MySQL database, og et andet på dine HTML sider.

Tegnsætsproblemer kan drille meget, og løsningerne ligger sjældnet lige for, så ofte skal man eksperimentere kraftigt for at løse dem og få sine æ’er ø’er og å’er tilbage. 

En let løsning

Den lette løsning (som heldigvis også virker i mange tilfælde) er at sende en tegnsætsdeklaration med tilbage i headeren af den fil, der leverer data til AJAX requesten.

header(“Content-Type: text/xhtml+xml; charset=iso-8859-1”);

En besværlig løsning

Hvis alt andet ikke virker, kan en besværlig løsning være at konvertere dine æ, ø og å til “html – special characters”:

æ = &aelig
ø = &oslash
å = &aring
OBS. Husk at sætte et semicolon efter hvert tegn.

Denne løsningen er meget bøvlet, og er sjældent et realistisk alternativ, men kan være redningen i enkelte tilfælde.

Browser Hack. Endnu en margin og padding bug i Internet Explorer 7

februar 6th, 2008. Kategori: Browser bugs and fixes, Webudvikling | Ingen kommentarer »

Igen opdagede jeg en  margin og padding bug i IE7 på min hjemmeside. Og igen må jeg konstatere, at det er en prøvelse at arbejde med Internet Explorer. Det er en ringe trøst at IE7 måske følge standarden bedre og er en bedre browser end IE6,  når den bare volder andre og helt nye problemer. 

Suk! Så nu er det pinedød nødvendigt at tjekke i 3 forskellige browsere, de næste mange år.

Hacks

Hacks til at løse browser problemer og fejl,  er som regel en dårlig idé. Hacksene er bøvlede at vedligholde, efterhånden som nýe generationer af browsere kommer til. Så normalt løser jeg  bugs ved, ved at eksperimentere med margin og padding.

Men da jeg fik 3 forskellige resultater i 3 forskellige browsere (IE 6, IE7 og Firefox 2.0), måtte jeg giver op ty til et browser hack, der skjuler en blog/style i stylesheetet for IE6.

Efter lidt spredet søgning fandt jeg denne Oversigt over hacks, til internet explorer og mozilla bugs . Alle hacksene er overskueligt ordnet og godt beskrevet. Listen mangler hacks for de nyeste browsere (feks IE7), så hvis nogen kender en nyere liste, så sig endelig til.

Min løsning 

Det hack, jeg endte med at bruge var

 attribut metoden:

#indhold[id]{ /*  HACK DER SKJULER DENNE BLOK FOR IE6 */
         padding-right: 5px;
}

der effektivt fik kureret buggen.

Opdatering af WordPress. Problemer med æ, ø og å. Forsvundne danske bogstaver.

januar 19th, 2008. Kategori: Wordpress | 11 Kommentarer »

Problemer med de danske tegn æ, ø og å

Efter at have opdateret min wordpress fra 2.0 til 2.3.2, blev alle mine æ, ø og å‘er  lavet om til ulæselige tegn. Jeg havde tidligere kørt en engelsk udgave af wordpress. Jeg ved ikke om det har været årsagen eller medvirkende til problemet.

En søgning viste, at det er et kendt problem, at de danske tegn bliver ændret eller forsvinder, når man opdaterer sin wordpress. Der findes en række mere eller mindre fantasifulde løsninger, lige fra manuel rettelse af alle sine gamle indlæg, over geninstallation af database og worpress, til diverse plug-ins, der angivelige skulle kunne løse problemet.

Tegnsætsproblemer kan drille meget, men jeg var heldig. Database opdateringerne havde tilsyneladende ikke ødelagt mine data. Skulle bare ændre tegnsættet i wp-config.php fra utf8 til ISO-8859-1.

Løsningen

wp-config.php før:

define(‘DB_NAME’, ‘minDatabase’); // Databasenavnet
define(‘DB_USER’, ‘minDatabase’); // Dit MySQL-brugernavn
define(‘DB_PASSWORD’, ‘mitKodeOrd’); // … og kodeord
define(‘DB_HOST’, ‘localhost’); // 99% chance for at du ikke skal rette her

define(‘DB_CHARSET’, ‘utf8);
define(‘DB_COLLATE’, ”);

wp-config.php efter:

define(‘DB_NAME’, ‘minDatabase’); // Databasenavnet
define(‘DB_USER’, ‘minDatabase’); // Dit MySQL-brugernavn
define(‘DB_PASSWORD’, ‘mitKodeOrd’); // … og kodeord
define(‘DB_HOST’, ‘localhost’); // 99% chance for at du ikke skal rette her

define(‘DB_CHARSET’, ‘ISO-8859-1’);
define(‘DB_COLLATE’, ”);

Ganske simpelt og alle mine ø, æ og å’er var tilbage. På nær i denne ene “undskyld jeg roder, mens jeg opdaterer WordPress” – post, som jeg havde nået at lave med utf8 tegnsættet.

En mere elegant løsning

Anders Saugstrup har senere gjort mig opmærksom på, at dette tegnsætsproblem kan løses langt lettere og mere elegant.

define(‘DB_NAME’, ‘minDatabase’); // Databasenavnet
define(‘DB_USER’, ‘minDatabase’); // Dit MySQL-brugernavn
define(‘DB_PASSWORD’, ‘mitKodeOrd’); // … og kodeord
define(‘DB_HOST’, ‘localhost’); // 99% chance for at du ikke skal rette her
define(‘DB_CHARSET’, ‘utf-8);
define(‘DB_COLLATE’, ”);

Løsningen er ganske simpelt at skrive utf-8. Altså med en bindestreg. Det løser hele tegnsætsproblemet, og du har både dine æ, ø og å tilbage.

Ifølge Anders kan en medvirkende årsag til de forsvunde danske bogstaver, være at man opdaterer over flere versionsnumre. Så risikoen for at miste æ, ø og å er altså større hvis man opgradere fra f.eks. 2.3 til 2.6. og springer de mellemliggende versioner over.

OBS: Det kan også have betydning, hvordan at uft-8 skrives. Det kan være vigtigt, at det står med små bogstaver. Altså utf-8 og ikke UTF-8. Tak til Jacob for det tip.

Don’t make me think. Anmeldelse af bog om brugervenlighed

januar 13th, 2008. Kategori: Brugervenlighed, Design | 2 Kommentarer »

Brugervenlighed

Steven Krug’s bog om brugervenlighed blev udgivet for mange år siden og derfor er denne boganmeldelse meget forældet. Men bogen er kommet  i anden udgave i 2006, og jeg har først nu fået fat i den.

Bogen er kort, velskrevet og meget velargumenteret. Steven Krug er uhøjtidelig i sin stil og nede på jorden. Selv om der er mange overvejelser at gøre i forhold til brugervenlighed og usability, formår Krug at overbevise om, at man ved at følge nogle ganske få og overskuelige regler, kan komme endog meget langt. 

Don’t make me think

Steven Krug lægger hårdt ud i første kapitel, hvor han lancerer sin vigtigste lov om brugervenlighed: “Don’t make me think“. Vores brugere ikke skal brug tid og energi på at tænke over ligegyldige ting omkring f.eks. søgning, navigation og brug af siden generelt.

Min første AHA-oplevelse.  Jeg havde et menupunkt på min side, der hed “Quicklinks”, som var genveje til nogle af mine informationer. Med Krug i baghovedet rettede jeg det straks til “Genveje”.

Vi læser ikke. Vi scanner

Næste kapitel.  Vi læser ikke websider, vi scanner dem. Og ofte bare klikker på det første link, der bare ligner noget af det , som vi er på jagt efter. Resultetet er selvfølgelig at vi skal fjerne ord og tekst, og istedet skabe klare hierakier, der kan lede vores brugere hen til det de leder efter.  

Igen måtte jeg tilbage til min side. Teksterne på forsiden blev forkortet. Mine mest besøgte links gjorde jeg fede, så mine brugere hurtigere kunne se dem.

Navigation og søgning

Så fulgte et par store afsnit om navigation, formål med siden og søgning. Meget store emner med mange overvejelser bag. Men igen præsenteret med overbevisning og skåret ned til nogle få logiske retningslinier, det er let at følge.

Jeg måtte igen tilbage til min side. Denne gang skulle søgefeltet gives en mere tydelig placering. Og jeg tilføjede en tagline (“NielsGamborg.dk – Teoretisk webdesign og Praktisk programmering”), så mine besøgende i første øjekast kunne se, hvad jeg havde at tilbyde. “Don’t make me think

Lån den – Køb den – Stjæl den

Jeg kan kun tilslutte mig skaren af begejstrede fans. Læs den før din nabo.

Steven krugs hjemmeside

Video interview om brugervenlighed med Steven Krug