En navnegenerator er god at starte med, hvis man vil lege med programmering. Man kommer hurtigt i gang med at kode, får et brugbart og sjovt resultat, samtidig med at man arbejde med nogle basale ting indenfor programmering. Navnegeneratoren er meget simpel, så den er let at eksperimentere og arbejde videre med.

Navnegeneratoren er skrevet i JavaScript, og kan derfor afvikles i en browser. For et live eksempel se f.eks. min business name generator.

Navnegenerator script

Her er først navnegenerator scriptet i sin helhed:

function generator(){
// Tilføj dine egne ord. Vær omhyggelig med at overholde syntaksen.
var adjectives = ["Cool","Masked","Bloody","Lame"]
var animals = ["Hamster","Moose","Lama","Duck"]

// Tilfældige tal genereres
var randomNumber1 = parseInt(Math.random() * adjectives.length);
var randomNumber2 = parseInt(Math.random() * animals.length);
var name = adjectives[randomNumber1] + ” ” + animals[randomNumber2];

alert(name); //Slet eller udkommentér denne linje, når nedenstående virker.

//Hvis der allerede er et navn bliver det fjernet
if(document.getElementById(“result”)){
document.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
}
// Et div element bliver lavet for at kunne vise det genererede navn.
//Navnet tilføjes en tekst-node. Tekstnoden tilføjes til pladsholderen.
var element = document.createElement(“div”);
element.setAttribute(“id”, “result”);
element.appendChild(document.createTextNode(name));
document.getElementById(“placeholder”).appendChild(element);
}

Men lad os pille koden fra hinanden og se på de enkelte dele hver for sig

Navne og ordlister

Det vigtigste element i en navnegenerator er selvfølgelig ordlisterne. Det er ud fra disse lister af ord, at navnene genereres. Jo flere ord eller navne du tilføjer til ordlisterne, des større variation i det endelige navn. Ordlisterne gemmes i Arrays. Arrays er kort fortalt variabler, der kan indeholde mange elementer. I vores tilfælde er disse elementer ord.

var adjectives = ["cool","masked","bloody","lame"];
var animals = ["hamster","moose","lama","duck"];

For at  hente data ud array’et bruger vi  array-navnet med en tæller i en firkant-parentes som parameter. I programmering tæller man næsten altid fra nul.

Så adjectives[0] returner cool og animals[1] giver moose.

Tilfældige navne

For at vælge tilfældige navne og ord fra ordlisterne bruger vi JavaScripts indbyggede random funktion. Math.random giver os  tilfældige tal mellem 0 og 0.9999999999999.

I vores tilfælde skal vi bruge et tilfældigt tal mellem 0 og 3, da vi har 4 elementer i hvert array. Derfor ganger vi random funktionens tal med 4. Resultatet er et tal mellem o og 3.9999999999996. Men i stedet for selv at skulle tælle antallet af elementer i array’et,  får vi JavaScript til at gøre det med lenght-funktionen.

Endelig bruger vi JavaScript funktionen parseInt() til at runde vores tal ned til det heltal (integer), vi skal bruge til at hente navnene ud af vores 2 arrays.

Det lyder måske en smule kompliceret, men kodemæssigt, er det ret simpelt.

randomNumber1 = parseInt(Math.random() * adjectives.length);
randomNumber2 = parseInt(Math.random() * animals.length);

Visning af navnet

Den simpleste metode til at vise navne generatorens resultat er med alert funktionen. Jeg bruger dog udelukkende alert() til at tjekke det genererede navn, fordi en alert box er meget irriterende at bruge i længden.

I stedet vil vi bruge 7 ekstra linjer på at integrere, dit tilfældige navn i websiden på en mere naturlig måde.

Inden vi går i gang, skal du lave et tomt div-tag i din HTML side, der hvor du gerne vil have dit tilfældige navn vist.  Dette div tag fungerer som en pladsholder for det genererede navn:

<div id=”placeholder”></div>

Og her er de 7 linjer ekstra kode, der skriver resultatet på websiden:

if(document.getElementById(“result”)){
document.getElementById(“placeholder”).removeChild(document.getElementById(“result”));
}

element = document.createElement(“div”);
element.setAttribute(“id”, “result”);
element.appendChild(document.createTextNode(name));
document.getElementById(“placeholder”).appendChild(element);

I denne kodeblok sker følgende:

1. Der tjekkes om der allerede findes et resultat (navn). Hvis ja, bliver det fjernet fra placeholderen
2. Så bliver der skrevet et nyt div element med id’en result, til at vise det nye resultat
3. Navnet bliver tilføjet div tagget som en text node.
4. Tilsidst bliver elementet (div-tag med indeholdende text node) hæftet på placeholderen i HTML’en.

Når denne del fungerer, kan du fjerne alert funktionen fra scriptet, da navnet nu bliver skrevet direkte i HTML’en.

Sæt navnegeneratoren sammen

Scriptet kan du enten inkludere i toppen af dit HTML dokument eller placere i et eksternt script. Så er generator funktionen klar til at blive kaldt fra din HTML side.

Jeg kalder altid scriptet 2 steder. Første gang med en onload event i body tagget. Så bliver navne generator koden afviklet, når siden loader første gang.

<body onload=”generator()”>

Jeg kalder selvfølgelig også generator-funktionen fra en knap, så man kan lave nye navne med et klik.

<input type=”button” value=”Generér navn” onclick=”generator()” />

Lav din egen navne generator

Med scriptet er det let at lave din egen personlige  navne generator. Valget af ord i ordlisterne afgør om din navne generator laver babynavne, piratnavne, kodenavne eller noget helt fjerde.

Generatoren kan selvfølgelig også bruges til andre ting. Hvad med at lave en slogan-generator, avisoverskrifter  eller besynderlige lovforslag fra Dansk Folkeparti? Kun din fantasi sætter grænserne.

Smid endelig en kommentar og et link, hvis du får bakset en sjov eller interessant navne generator sammen.

Navnegenerator ressourcer

Se alle mine egne navnegeneratorer. Pt har jeg 18 forskellige navnegeneratorer til inspiration.

Du kan finde et fikst og færdigt  navnegenerator-script til download på min officielle name generator blog. Scriptet er grundigt kommenteret på engelsk og sammen med denne tutorial, er det super nemt at komme i gang med at kode selv.

Endelig kan mit blogindlæg How to make a  name generator måske også hjælpe.

JavaScript på w3schools er et godt sted, hvis du skal bruge hjælp til javascript.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Her nogle billeder af de klassiske biler fra for-træningen fredag aften.  Først aftenens bedste foto: Full speed ned af Carl Nielsensvej.

Full speed classic race aarhus

Raceofficials med grønt flag og en rød klassiker racende  forbi.

Green flag

Så er vi nået ned til chikanen i bunden af Oddervej. Fed lyd op af bakken og masser af dækhvin ud af svinget

Ræs på Oddervej. Klassiske racerbiler Århus.

Med Århusbugten i baggrunden.

Classic race Århus 2010.

Endelig en klassisk mini cooper i close race med en anden gammel spand.

Mini i close race

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Denne guide til bebugge rettet mod begyndere i programmering.

Jeg vil give konkrete  tips og  idéer samlet i 3 simple trin.  Jeg bruger PHP og JavaScript eksempler, men metoderne til at debugge er universelle, og kan bruges i forbindelse med alle programmeringssprog. 

Baggrunden er, at jeg i forbindelse med mit  gæstebogs script får en del henvendelser om hjælp.

Basal debugging

Basalt set handler debugging om at isolere problemer. Det gør man ved at skille tingene ad og undersøge de enkelte dele. Virker hver enkelt del, som vi forventer?

3 simple trin til debugging

1. Tjek, dobbelt tjek og triple tjek
2. Skriv variabler ud
3. Skil koden ad

1. Tjek  - dobbelt tjek - triple tjek

Start med at tjekke og dobbelt tjekke alle indtastninger, parenteser, tegn etc. Er  variabelnavne identiske?  Er  funktionskald og navne er stavet rigtigt?  Er syntaksen korrekt?  Når det er gjort, så tjek det hele en gang til…

2. Skriv dine variabler ud

Næste trin er at skrive dine variabler ud. Og fylde en masse print statements i din kode. Så kan du se hvilke værdier dine variabler har og hvor meget af koden, der bliver afviklet. Brug f.eks. echo i PHP og alert() i JavasScript:

PHP eksempel:

$brugernavn = $_GET['brugernavn'];
echo $brugernavn;

if($brugernavn == “”){
echo ‘test1′;
do something…
echo ‘test2′;
}else{
do something else …
echo ‘test3′;
}

JavaScript eksempel:

var brugernavn = document.getElementById(‘brugernavn’).value;

alert(brugernavn);

if(brugernavn.length() < 3){
do something …
alert(‘test1′);
}else if{
alert(‘test2′);
do something else …
alert(‘test3′);
}

Super debug metode til at finde ud af, hvor langt du kommer i afviklingen af koden, før det går galt. Bliver koden i  kodeblokkene afviklet, som du forventer?

Hardcode dine variabler

Du kan også prøve at hardcode dine variabler i stedet for at hente dem med dit script.

$brugernavn = “Nikolaj”;

Det er en god metode til at isolere og  afdække, om det er når du henter data eller behandler data, at du får fejl.

3. Skil koden ad og simplificér den

Prøv at pille koden fra hinanden og gør den enkel,  så du kan tjekke de enkelte dele. Prøv f.eks.

if(2 == 2){…

frem for:

if(strlen(trim($_GET['brugernavn'])) > 0 ){…

Så får du debugget om det er dine kodeblokke eller det er de betingelser, du har sat op i if-sætningerne,  der er problemer med.

På samme måde kan du pille kodeblokke helt ud af for-løkker etc. Eller du kan simplificere dem ved at hardcode tallene i løkken som f.eks.:

for(i=0; i<5; i++;) {…

Bonus tips

2 almindelige syntaks fejl

Her er 2 meget almindelige fejl, hvor fejlmeddelelserne ikke umiddelbart afslører problemet.

PHP eksempel:

Parse error: parse error, expecting `’,” or `’;” in C:\wamp\www\test\minSide.php  on line 13

Denne PHP parse error opstår, når du ikke har afsluttet den foregående linje med et semikolon.

JavaScript eksempel:

minFunktion is not defined

Denne JavaScript fejl optræder , når du forsøger at kalde en tidligere defineret funktion. Funktionen kan sagtens være defineret, men  indeholder ´f.eks. en syntaks fejl som en krølle-parantes/tuborg-parantes for meget eller for lidt.

Google din fejlmeddelelser

Du er helt sikkert ikke den første der har problemet. Fjern lokale navne fra din fejlmeddelser og søg på Google. Måske du kan finde hjælp til at indsnævre problemet.

Værktøj til debugging

JavaScript udvikling foregår bedst i en Firefox browser, fordi Firefox har gode værktøjer til debugging af JavaScript. Brug enten Firefox’s indbyggede fejlkonsol eller Firefox plugin’et Firebug. Begge giver gode og overskuelige fejlmeddelelser.

Afrunding

Debugging er en fast bestanddel af al programmering. Når man programmerer laver man også fejl. Heldigvis bliver man som regel bliver både dygtigere og klogere af det. Og næste gang er det nogle helt andre fejl, man laver.

Kender du andre gode begynder tips, så smid endelig en kommentar.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Parrende strandtudser fra en klitsø bag de yderste klitrækker ved Blåvandshuk. Billedet er fra d. 3 april 2010.

I et lille vandhul på ca. 40 m² så vi ca. 50 strandtudser. Ca. 20 par, der parrede sig og så nogle enlige tudser.

De fleste af strandtudser flygtede ud mod midten eller ned mod bunden, da vi gik rundt langs kanten.  Tudserne afbrød ikke parringen uder flugten. Hannen holdt hunnen i et fast greb Men dette ene par var så travlt optagede af parringen, at jeg kunne få lov til at fotgrafere dem i ro og mag.

Da vi senere gik hjemad i regnvejr stødte vi på 2 enlige strandtudser oppe på vejen. Sandsynligvis på vej til samme vandhul for at deltage i forårets parringsritualer.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg har indset, at jeg ikke  får blogget mere og har derfor i løbet af efteråret besluttet at lukke bloggen ned.  Fast arbejde som webudvikler på Statsbiblioteket har gjort, at jeg hverken har tid, eller energi til at fortsætte.

Min blog om webudvikling har samtidig opfyldt sit formål. Den har været en legeplads, hvor jeg har eksperimenteret med webudvikling, programmering,  webdesign, søgemaskineoptimering etc. Og bloggen har fungeret som personlig notesblok, og  jeg  besøger den selv jævnligt. Især bruger jeg:

• Regulære udtryk – en oversigt over regex syntaks  i flere programmeringssprog.
• Lixtalsberegner – online LIX-beregner

Webudviklingen fortsætter

Blandt andet på multimedieforum, hvor jeg ligger meget energi. V i at udveksler , tips, links om webdesign, webudvikling og  multimedier. I dag kan vi f.eks. prale af at have Danmarks største samling af frontend, webudvikling og multimediedesigner links og tips. Så kom endelig over og vær med.

Derudover leger  jeg p.t. med et webmasterprojekt – name generators.  De går i korthed ud på at lege lidt med brugergrænseflade design, adsense og international søgemaskineoptimering. Detaljer om name generator projektet på multimedieforum.

Undtagelser

Tja…  det er ikke utænkeligt, at der  kommer et indlæg eller to, når jeg får behov for lidt ekstra linkjuice på et af mine andre projekter. Man kan jo lige godt udnytte sin credit hos Google.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Som eksempel vil jeg bruge min nyeste name generator: WoW name generator

Trin 1. Domæne navn

Første udfordring var at finde domænenavn til projektet. Helst et med nogle relevante søgeord for projektet.

Jeg købte 3 forskellige:

• online-generator.com
• online-converter.eu
• online calculator.eu

da jeg i denne fase var jeg stadig i tvivl om, hvilken retning projektet skulle have.

Trin 2. Struktur

Med domæne navnet på plads fulgte strukturen på selve sitet. Også her famlede jeg noget i starten og dækkede over de første fejlslagne eksperimenter med at lave 301 redirects gennem min .htaccess.

Jeg endte med følgende struktur: online-generator.com/name-generator/wow-name-generator.php.

Igen var fokus at får brugt de vigtigste søgeord i url’en.  Og derudover at have en overskuelig struktur, der er let at vedligholde og udvide.

Trin 3. Indhold

En masse ressearch med bla. Google søgeordværktøj for at prøve at finde gode søgestrenge. Efterfølgende undersøgelse af konkurencen på de udvalgte søgeord.

Trin 4. God HTML mark-up

Næste trin var at skabe en god HTML struktur på selve siderne.

Det handler i korthed om at:

• Side titler med søgeord (WoW Name Generator)
• Kort og rammende metadesription med de vigtigste søgeord (Generate cool World of Warcraft name with the WoW Name Generator)
• Få og relevante metakeywords (wow,  name, generator, world of warcraft,)
• Overskrift hieraki.
  • H1 (WoW Name Generator)
  • H2 (Names from the WoW name generator)
  • H3 (Random wow names)
• Masser af overskrifter i mange niveauer med tilhørende pragraphs (brug af paragraph istedet for break tagget).
• Brug af søgeord i så mange forskellige html  tags som muligt

WoW name generator

Trin 5. Tekster

Google kan godt li’  tekst og især lange tekster. Derfor er dele af mine tekster tæt på spam.

• Jeg bruger mine søgeord meget. (World of Warcraft names from the WoW name generator)
• Jeg bruger søgeord  mange forskellige sammenhænge. (WoW Gnome names, WoW Orc names and WoW Troll names.)

Søgeoptimeret tekst er gemt af vejen i bunden af siderne. 

Trin 6-8. Justeringer af tekster

Google tager ca. en uge om at indekserer mine nye sider. Efter yderligere ca 14 dage har jeg kunnet bruge Google Analytics til at se, hvilke søgeord der skal satses på.

Dette er blevet gentaget flere gange. Google er også glad hyppige opdateringer.

Trin 9. Linkbuilding

Jeg har i første omgang brugt et par at mine egne små-blogs m.m. til at skaffe de første links. Ellers er jeg ret blank på området.

Så jeg kontaktede en ekspert i linkbuilding, Claus Heinrich,  gennem hans webmaster forum, og spurgte om hjælp til international linkbuilding. Claus har været super hjælpsom både gennem forummet, men har også hjulpet bag kulisserne med at få nogle gode værdifulde links.

Jeg har kun tilmeldt sitet til ganske få link kataloger. Det er en ren jungle, at finde de få kataloger, der har en reel værdi.

Istedet har prioriteret linkbuilding via social bookmarking.  Jeg har oprettet konti ved delicious, digg, stumble upon og et par andre steder.  Her er f.eks. min favo.dk profil.

Social bookmarking er super godt, fordi du kan deeplinke til dine sider, og har selv kontrol over linktekster og tilhørende beskrivelser.

Jeg har også prioriteret at have store iøjnefaldende bookmarkings-knapper på siden, for at understøtte at mine brugere  bookmarker mine generatorer.

Trin 10 ?

Tja…?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg er stødt på problemet  med de  meget brede knapper i IE en del gange efterhånden. Derfor dette blogindlæg.

Løsningen er simpel:

input {
    overflow: visible;
    padding: 0 4px;
}

Efterfølgende skal du så selv sætte en passende padding på dine knapper, da ovenstående fix fjerner paddingen helt.

Du skal dog være opmærksom på at denne løsning kan have visse bivirkninger eller måske ikke virke efter hensigten, hvis din knap er placeret inde i en tabel.

Se evt. denne post for en diskussion af problemer med padding på knapper placeret inde i en tabel:  IE button width fix

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg pinger 20-30 blog nyhedstjenester, som Google crawler uafbrudt. Men at et blogindlæg  uodover at være crawlet også er indekseret og søgbart efter sølle 7  minutter. Det er fanme sejt.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Blandt andet denne solnedgang fredag aften i Spirbakke mile. 

Spirbakke mile, Vindhvarre Mile og Engelsk Mile er nogle af de små miler der ligger syd for Skagen på vejen mod Råbjerg mile

Søndag morgen på  Råbjerg mile. Vi havde hele milen for os selv til klokken ti.  Derefter  blev milen meget hurtigt  overbefolket.

Se flere af mine Billeder fra Danmark .

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

For 1½ måned siden startede jeg Online Name Generator Projektet, der hoster forskellige navne generatorer som f.eks. Project Name Generator.

Projektet er et webmaster projekt, der udspringer af min interesse for:

• Brugergrænse- og applikations-design
• Simpel applikations-programmering
• Søgemaskineoptimering

Dette indlæg giver en hurtig oversigt over projektet. Senere vil jeg skrive mere om de enkelte elementer.

Brugergrænse-design

En webapplikation skal være let, overskuelig og hurtig at bruge. Derfor er brugergrænse-fladen  på name generatoren skrabet for overflødig information.

Se  4 principper for brugervenligt layout.

• Sørge for tydelige hierarkier (navn og generator-knappen er store og centralt placeret på siden)
• Dele siden op i tydeligt definerede områder  (Name Generator, Bookmark-boks, menu, overskrift er tydeligt definerede og adskilte)
• Benytte konventioner, der er opstået omkring Internettet  (understregede links, topmenu, stor knap til vigtig funktion)
• Minimére støj (her er jeg p.g.a. af søgemaskineoptimering og annoncer blevet nødt til at gå på kompromis. Har forsøgt at afbøde ved at benytte de ovennævnte 3 principper)

Derudover har jeg fokuseret på:

• Tydelig stor sidetitel, så brugeren med det samme kan se, hvor han er.
• Navnet bliver generet med kun et klik. Konkurenter kræver ofte indtastning af navn, kategorier.  Og tit “husker websiden”  ikke indtastede og valgte informationer.  

Se Superhero Name Generator som et eksempel.

En mere clean og overskuelig brugergrænseflade kunne være opnået ved at fjerne al den overflødige tekst. Men teksten er nødvendig af hensyn til søgemaskineoptimeringen. Derfor har jeg gjort teksterne meget små eller placeret dem længere nede på siden, hvor ingen alligevel læser dem.

Søgemaskineoptimering

Den internationale konkurrence på Google er stor.  Derfor er god søgemaskineoptimering  alfa og omega for hele projektet.

I korthed er min strategi koncentreret om:

• Et domænenavn med søgeordene “online” og “generator”.
• Masser af tekst, med mange overskrifter i flere niveauer, hvor søgestrengene og søgeord gentages i forskellige sammenhænge
• Udgående links til bla. Wikipedia og andre sites der rangerer højt på relevante (men ikke direkte konkurerende) søgeord.
• Indkommende links. I første omgang sites jeg selv har adgang til at lægge links på. Dernæst udvalgte linkkataloger, og på sigt forhåbentlig  links fra brugerne.

Har overvejet at tilknytte en WordPress blog til online-generator domænet, hvor jeg kan skrive små korte ”nyheder” på.

Programmering

Alle navne generatorer er programmeret i JavaScript. Det har den fordel, at navne genereres på brugerens egen computer. Det gør genereringen af navne lynhurtigt. 

Jeg har opdateret generatorerne flere gange i forløbet, så de er blevet mere komplekse, og laver mere komplicerede navne.

Find f.eks. Vampire names med vampire name generator.

Økonomi

Har tilknyttet en adsense konto til name generatorerne.  Men min stategi er at holde annoncer meget diskrete i starten. Når/hvis der er kommet lidt flere besøgende og nogle flere indkomne links, vil jeg give annoncerne en lidt mere fremtrædende plads.

Økonomien i projektet er dog til grin, og jeg skal være heldig, hvis jeg kan dække udgifter til domænenavn og webhotel. Projektet har udelukkende sin berettigelse i, at jeg synes, det er skide sjovt.

Related posts:

1. Blog om webudvikling lukker ned Bloggen lukker ned Jeg har indset, at jeg ikke  får...

Related posts brought to you by Yet Another Related Posts Plugin.