Kom på nettet del 5 – Stram op og sorter fra

Dit site afspejler dig

Hver gang jeg kigger på mit eget site, så få jeg dårlig samvittighed.

Alt for meget indhold om for lidt og dog, alt for mange billeder og dog. Virker det som starten på et mere eller mindre skistofrent indlæg?? :)

I gamle dage

Før i tiden der var et website statisk og “kun” et visitkort for firmaet.

Det har så over tiden ændret sig til sites skulle opdateres tit og ofte, for at indholdet ikke blev for gammelt og der altid var noget nyt på sitet.

Nu har vi så bevæget os lidt tilbage imod visitkortet igen (selvfølgeligt afhængigt af sitets type), dog uden at gå hele vejen tilbage.

Grunden til dette er at flere og flere er begyndt at blogge, twitte mm. ;) og derved så få man dynamikken ind på sitet, men ens eget site kan være mere “rent” og overskueligt.

Enkelhed og overskuelighed aka. Usability

Faktum er at alt for mange websites de drukner indhold, det kan være både tekst og billeder.

Der er blevet lavet flere tests der bla. viser at har folk ikke adgang til det de ønsker på meget kort tid, det kan være nemt og overskueligt indhold, via få klik i navigationen eller at det relevante indhold ligger “over linien”.

Med linien så mener jeg det du kan se på skærmen FØR du scroller ned, sørgeligt men sandt, vi lever i en informations kultur for vi flyver igennem hverdagen og vi har ikke tid til at søge eller scrolle.

Jamen så er de væk fra sitet og videre på næste søgeresultat fra google.

Et meget godt eksempel på et, trimmet site er michaelbang.com, han har godt nok kogt hans side ned og der er da et par ting som jeg nok ville gøre anderledes. Men det et ret godt eksempel på for enkelt det kan gøres.

Konklution

Så inden vi går videre med opbygning af website, så skal du i tænke boks. Hvad er dig, hvad skal du have med?

Hvad skal der stå på site om dig?

Vælg en 10-20 billeder ud, huske at vælge dubletter (ens billeder eller billeder af samme model) fra.

Vælg hellere 10 lækre billeder, end 10 lækre billeder og 5 semi gode <- det er nemmelig dem folk husker.

Ligger de semi gode først så kigger de måske ikke på mere end 2-3 billeder og så glipper de de lækre. Ligger de til sidst så tænker de måske “ja ok, en blind høne kan også finde frø”.

Så hold det lækkert og skift billeder løbende :)

Og ja, jeg skal også rydde op på mit site, i nær fremtid :)


april 29, 2010 i Web med 0 kommentare

Kom på Nettet del 4 – SEO 101

Det er lidt tids tiden at jeg sidst har skrevet en artikel om at komme på nettet, men jeg har har haft rimeligt travlt og det tager desværre tid at skrive artiklerne.

Men for at komme lidt videre, så tager jeg hul på Search engine optimization også bedre kendt som SEO, da det kan bruges på nuværende sites, gallerier mm.

Nå du skal findes ude på nettet, f.eks. via Google, så skal din side søgemaskine optimeres. I bund og grund så er det ingen sag at gøre sit site relativt let tilgængeligt i søge resultaterne.

Der er en grund regler man skal huske, søgemaskiner kan ikke læse billeder og kun til dels skal de læse flash filer.

De de er gode til er at læse tekst og følge links, men det kan de også finde ud af. Så det man skal huske er at bruge de forskellige værktøjer som HTML giver dig, samt bruge korrekt navngivning på sider og billeder.

Nå man navngiver, så skal man huske at bruge “-” stedet for ” ” og æøå skal også erstattes med ae oe aa, for desværre så kan vi ikke være sikre på at modtageren har et dansk tastetur.

Og man bør heller ikke bruge en masse underlige tegn i navn givningen, kun bokstaver, tal og “-”.

Sider

Nå vi nu skal lave et site, med et galleri. Så er der mange der formodentligt vil kalde siden galleri.html, og det er egentligt også et godt navn.

Men har man et niche galleri. Så kan man være lidt mere konkret og kalde det portraet-galleri.html, så bliver man lidt mere specifik og det giver søge maskine lidt mere at indeksere og dit galleri vil nu også blive ramt af søge ordet “portræt”.

Eller vil jeg være helt konkret, så kan det hedde jakob-kjoeller-portraet-galleri.html, for så giver jeg virkelig søge maskine noget at tænke over.

Links

Nå man laver et link, på en side så er det vigtigt at huske at bruge “titel” atributten. Titel kan bruges af søgemaskiner, til at fortælle lidt om hvad det det link peger på.

Billeder

Billeder er for os fotografer nok det vigtigste, at vise frem. Derfor så skal navngivningen også være korrekt her (jeg ved godt at mine halter :))

Her her jeg f.eks. et billede af en kollega, billedets navn er noget ala. 2009-08-12-17-15-55.jpg, det er datoen det er taget, det er min standart navngivning ved import, og det gør billedet dejligt unikt i mit system.

Portræt af Dan Tejsner

Problemer er at det også gør det temmelig usynligt på nettet, søge maskinerne ser det og indeksere det.

Men jeg kan ikke bruge den indeksering til noget, da der formodentligt ikke er nogle der søger på en dato og derved bliver mit billede ikke vist i google.

Nu hedder fyren Dan Tejsner og det er et lowkey portræt, det er alle tre ting meget specifikke ting og brugbart for søgemaskiner. Så derfor har jeg omdøbt mit billede til: Portraet-Dan-Tejsner-LowKey.jpg, på den måde så har søge maskiner nogle at arbejde med og der er en real chance for at mit resultat kommer frem ved søgninger på ordene “Dan, Tejsner, Portræt, Lowkey”.

Ligeledes så skal man huske beskrivelser til Titel og alt tagget, for udfylder du dem, så har søge maskinerne endnu mere at arbejde med. Men husk at være præcis, brug beskrivende ord ala. “hund, bil, sol, mm.”

Et eksempel på et “korrekt” implementeret billede tag:

<img title=”Portraet-Dan-Tejsner-LowKey” src=”/wp-content/uploads/2010/04/Portraet-Dan-Tejsner-LowKey.jpg” alt=”Portræt af Dan Tejsner” width=”520″ height=”345″ />

Det samme gælder for logo mm. på din side, brug dit navn, firmanavn mm.

Flash

Kort om flash, skal du optimere din side til søgemaskiner, så undgå for meget flash. Google kan læse tekster i det nu, men det er ikke optimalt.

Man kan sige meget, meget mere om SEO, men jeg vil stoppe her, for gør du overstående, så kommer du langt. Og vil du højere op på listen, så skal du nok ud og købe dig til søgemaskine optimering.

En bonus ting, gør du alt overstående, så optimere du også dit site til bla. synshandikappede og derved gør siden mere tilgængelig og forståelige for dem.

Jeg håber at det hele gav mening :)

april 24, 2010 i Web med 0 kommentare

Kom på Nettet del 3 – Grundlæggende HTML

En hjemmeside er bygget op med en masse HTML og CSS.

Dette er meget enkelt, da jeg prøver at holde det så “uteknisk” som muligt.

HTML er “grundstenen” i koden på en hjemmeside. Det er det din browser (Internet Expore, Firefox, Safari, mm.) tolker og oversætter til en side på nettet med tekst og billeder.

En typisk HTML start side hedder index.html eller index.htm, om den hedder .htm eller .html er sådan set lige meget, de virke lige godt.

HTML er bygget på på en lang række “Tags”, disse tags bliver så tolket af browseren og vist på en bestemt måde.

Et tag er f.eks. <div>, altså det starter med et “<” og slutter med et “>”. Dette står dog ikke alene, det skal aflsuttes igen med et “</..>, ellers vil din side knække efter tagget. Altså et korrekt tag kommer til at ligene dette “<..>noget tekst</..>”.

Tags er altid med små bokstaver, aldrig med store.

Typisk så ser koden til en HTML side således ud:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”> <!– html tagget starter siden –>
<head><!– Header tagget indeholder metadata–>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Den overskrift som står i toppen af browseren</title>
</head>
<body><!– Body tagget indeholder alle de ting der bliver vist på siden –>
<div>
Et område hvor man kan putte en masse andre tags og informationer ind i. Divs kommer du til at arbejde    med. <br /> <!– <br/> er linie skift–>
Nå man afslutter et div, og starter et nyt, så bliver der automatisk skiftet linie.
</div><span>Det er det samme som div, ofte bliver det brugt til mindre områder. Og nå det bliver afsluttet, så skifter det ikke linie</span>

<p>Paragraf, tekst område, der laver afstand før og efter tagget, lige som afsnit i en bog</p>

<h1>Stor overskrift</h1>
<h2>mindre overskrift</h2>
<h3>lille overskrift</h3>

<a href=”http://www.kjollers.dk/blog” titel=”Titel på link, godt for døve”>et link, der linker til en anden side</a><br />

<img src=”/wp-content/themes/Jakob/Jakob/images/Jakob.jpg” alt=”Tekst som vises  hvis billedet ikke kan vises. Samt det er beskrivende for synshæmmede”/>
<ul>
<li>punkt 1</li>
<li>punkt 2</li>
<li>punkt 3</li>
</ul>

</body>
</html>

Download eller se filen her, vil du downloade så højreklik på linket og tryk “Gem desitination”.

Prøv at pille i filen og se hvad der sker, lige nu er det ikke så meget :)

Umidlbart, så er nedestående skellettet til en HTML side og det skal der ikke pilles for meget ved.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>.. Titel her…</title>
</head>
<body>
.. Indhold her …</body>
</html>

Den overstående fil, indeholde de fleste html tags vi kommer til at bruge i den næste tid.

<!– –> tagget, udkommenterer det der bliver pakket ind i tagget, så det ikke bliver vist på siden.

Et tag kan indeholde attributter som id, class mm. men dem kommer vi ind på efterhånden.

Dette er et meget enkelt eksempel på hvordan bruger tagsene, og resultatet af dem er “ren” HTML, næste gang kigger vi på CSS og hvordan man gør det lidt pænere at se på :)

Prøv evt. at højre klikke på denne side og vælg “Vis Kildekode” og se hvad der er med til at lave denne side.

Læs meget mere om HTML på HTML.dk, de har nogle gode guides til hvordan man kommer i gang med HTML

marts 18, 2010 i Web med 0 kommentare

Kom på nettet del 2 – Planlægning

Før du går i gang med at bygge websitet op, så skal websitet planlægges. Grunden til at det er vigtigt at du planlægger hvad der skal være, er for at forhindre at du skal lave for mange ting om undervejs.

Det vil aldrig kunne forhindres at du kommer til at lave noget om, men det er vigtigt at sørge for at du kan gå målrettet i gang,uden for mange forhindringer.

Sitet

Hvad er det for et site du skal til at lave? Det er din næste udfordring.

  • Er det et almindeligt website, blog eller en portal?
  • Hvilken type site skal det være, privat eller buisness?
  • Er det et niche site, dvs. skal det kun indeholde en slags billeder?

Lige for kort at skitsere forskellene på det første spørgsmål:

  • Website: Dette er et site, der indeholder information om et givent emne/person/virksomhed ofte uden de store ændringer fra dag til dag
  • Blog: Formålet med en blog, er at den bliver opdateret/udgivet ofte, lige som et tidskrift.
  • Portal: Dette en samligt af information/viden, links mm.

For at kunne klare dette nogenlunde enkelt, så svare vi her: Website, privat/small buisness site.

Indhold

Nu skal du for alvor til at tænke dig om, det er nu på tide at finde ud af hvad du ønsker at så med på siden af indhold.

Det kan f.eks. være:

  • En velkomst
  • Om mig
  • Gallerier
  • Kontakt
  • Referencer
  • CV
  • Andre relevante punkter for dig.

De overstående punkter er kun eksempler, så tag den derfra og skriv alt ned på et stykke papir.

Så til næste gang, skal du skrive alle de ting du øsnker dig ned på nogle stykker papir, et “indhold” et stykke papir.

Nå du har gjort dette, så sortere du sedlerne i bunker efter kortsorterings methoden.

Den går kort forklaret ud på at:

  1. Du tager alle dine papir lapper frem en af gangen.
  2. Kikker på lappen og sammenligner den med de lapper der ligger på brodet
  3. Matcher den en lap, så ligger du den sammen med denne. Gør den ikke så ligger du den for sig selv.
  4. Nå du er alle lapperne igenne, så har du x bunker og hver bunke giver du en ny lap med overskrift
  5. Tag et billede af resultatet til senere dokumentation.
  6. Har du mulighed for det, så gentag gerne denne test på 2-3 test personer.

Resultatet er navigationen på dit website.

Stjæl med arme og ben ;)

Ok, måske ikke helt bokstavligt. Men det korte af et lang er, at der ikke er nogen grund til at genopfinde den dybe tallerken.

Så brug nogle timer de næste dage, til at finde andre fotosites på nettet, noter dig deres stærke og svage sider, hvad du kan lide også hvad du ikke kan lide.

Jeg er til enkelt og lyst design, så jeg kan personligt godt lide sider som:

Flere af disse sites, er lavet i Flash, men det meste af det vil du kunne lave nå vi er færdige, uden den store brug af flash.

I må meget gerne sende de resultater I kommer frem til undervejs, på jakob@kjollers.dk, for så vil jeg prøve at dreje kurset den retning som matcher flest af læserene.

God arbejdslyst og vi “ses” igen onsdag :)

marts 13, 2010 i Web med 0 kommentare

Side 1 af 212»