Blog om foto, web og brugervenlighed

Test af gratis online billedbehandling på Internettet

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

På 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)

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

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

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.

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

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.

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

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

KDE og Gnome på samme Ubuntu installation

“Den 6. artikel om en linux begynders test af  Ubuntu” 

En af ulemperne ved at have både Gnome og KDE desktoppene installeret på samme Ubuntu installation, er at menuerne kan blive meget uoverskuelige.

Skil Gnome og KDE applikationer

Gnome menu extended o.6.8 er et fikst lille program der adskiller KDE menuerne fra Gnome menuerne, hvis man bruger Gnome. Det vil sige at KDE applikationerne får deres egen folder med sin helt egen filstruktur.

Når man bruger KDE vil menuerne stadig klumpe sammen, men det er til at leve med for mig, da jeg har besluttet mig for at holde fast i gnome desktoppen som den primære indtil videre, og kun har bevaret KDE’en som supplement.

Download og Installation

Programmet kan hentes på gnome-look.org

Det letteste er at hente programmet  som en “debian package”, gemme det på skrivebordet og så pakke ud  med “GDebi Package Installer”

Installation af KDE desktop på Ubuntu

 “Den 5. artikel om en linux begynders test af  Ubuntu” 

Jeg havde læst lidt om forskellene på Gnome og KDE desktoppen.  KDE skulle efter signede være mere “windows”-agtig og have flere tilpasningsmuligheder end Gnome. Jeg overvejede at installere en anden linux distibution for selv at teste, men efter et tip fra en erfaren Linux bruger, besluttede jeg dog istedet at prøve at installere KDE desktoppen på min Ubuntu.

Installation

Selve installationen var forbavsende enkel. Jeg åbnede terminalen og skrev:

sudo aptitude update && sudo aptitude install kubuntu-desktop

jvf. denne opskrift: http://www.psychocats.net/ubuntu/kde. Forfatteren anbefaler at bruge “aptitude” istedet for “apt-get” som man ser andre steder. Argumentet er at KDE desktoppen skulle være lettere at fjerne igen, hvis man fortryder, når man har installeret med “aptitude”.

Under installationen skulle jeg tage stiling til om jeg for fremtiden ville bruge  KDM(KDE) eller GDM(Gnome) som default desktop manager.

Genstart

Efter installationen af KDE, genstartede jeg Ubuntu. Ved log-in skærmen valgte jeg sessions og valgte at bruge KDE desktop frem for gnome, efter log-in spørger Ubuntu om valgte af KDE desktoppen kun skal gælde for den pågældende session.

KDE-desktoppen virker ganske rigtigt en smule mere windows agtig. Grafisk virker den “rigere” med en masse glas og plastik effekter. Default layout var med en menulinie i bunden ligesom i windows. Jeg er dog blevet glad for Ubuntu/Gnome, hvor den er i toppen. Det synes jeg er mere overskueligt, så jeg flyttede den derop.

En anden forskel jeg faldt over var ikonerne i menuerne. Mange af dem virkede lidt mere anonyme/kedelige i farverne og var derfor vanskeligere at kende fra hinanden, og i defaultopsætningen var der alt for mange til at det var overskueligt.  Og når man kørte musen over dem poppede nogle store web 2.0 agtige oplysningsbokse op.

Konklusion

Efter et par prøvekørsler med KDE, har jeg besluttet mig for at holde fast i Gnome desktoppen. Begge har deres fordele og ulemper, men Gnome vinder på bedre overskuelighed og dermed mere brugervenlighed. Man kan sikkert sagtens konfigurer KDE så den ligner Gnome, men hvorfor bruge tid på det , når Gnome allerede er der fra starten.