Du ved fra din børnelærdom, at hvis du blander gul og blå, får du grøn. Det gælder bare ikke for HTML-farver. De blandes på en anden måde. Men hvordan får du blandet farverne til hjemmesiden?

Du bruger selvfølgelig det smarte værktøj HTML Color Mixer, som du finder online her:

Bare klik og vælg de to farver, eller skriv selv de farvekoder, du vil bruge.

Som resultat får du en stribe farver, der er blandet mere og mere. Du kan bare vælge den kode, du ønsker at bruge.

Kender du det, at du har fundet en farve, du gerne vil bruge til et billede eller et webdesign, men ah … den skal lige være en tone lysere eller mørkere. Hvordan gør man så lige det, når man ikke kan “tilføje” hvid til hex-koden? En farvekode ser ofte sådan her ud nemlig: #6699FF – hvordan tilføjer man hvid for at gøre den lysere? Eller sort for at gøre den mørkere?

Løsningen er en indviklet udregning, men i stedet for at finde et script, der kan gøre det for dig, eller selv lave udregningen, kan du faktisk snuppe koden direkte fra dette geniale online-værktøj, som hedder en HTML Color Picker.

Du finder siden her:

Du kan enten klikke og vælge en farve, eller skrive koden i feltet, hvis du allerede har en farve, du tager udgangspunkt i.

Herefter får du en stribe mørkere og lysere resultater, og du kan bare kopiere den farve-kode, du vælger.

Hvis du er fast læser af Godteposen, så har du nok fundet ud af, at jeg er meget begejstret for DropBox og WordPress. Og hvis du kender mig bare en lille smule, så vil du vide, at det er år siden, at jeg har fået taget backup af noget som helst. Ups, ja, ikke så godt! Især ikke, hvis alt indholdet på mine WordPress-blogs skulle forsvinde. Så da jeg opdagede en plugin, som tager backup af min blog, både design og database, og gemmer filerne direkte i min DropBox, ja så ville begejstringen ingen ende tage (citat: Otto Leisner).

Dette plugin kan endda indstilles til at tage backup automatisk!

Plugin’et hedder WP Time Machine, og når du har installeret det, finder du indstillingerne under Settings i dit WordPress panel. Skriv den e-mail-adresse, du bruger til DropBox, og din adgangskode, og evt. en mappe, hvorefter du er klar til at tage backup. Klik på knappen, og det kører.

Du kan enten hente WP Time Machine fra deres hjemmeside på http://wptimemachine.com/ eller ved at klikke dig frem til den i dit kontrolpanel på bloggen. I så fald skal du søge på navnet WP Time Machine.

Obs! Dette tip skrev jeg for snart to måneder siden, men jeg kunne ikke selv bruge det, fordi vores domæner var hostet på Dreamhost, som desværre ikke fungerer så godt længere, som det gjorde, da vi startede hos dem for nogle år siden. Derfor flyttede vi til Hostgator, og det hele glider bare som i olie. Før situationen med at opdatere blogs, hvilket var et helvede, fordi processen altid gik i stå og skabte problemer, sker nu i løbet af få sekunder uden problemer. Og WP Time Machine fungerer også bare totalt uden problemer. Så hvis du ikke kan få dette plugin til at virke på din blog, kan det skyldes dit webhotel. Hvis du får lyst til at skifte, kan du prøve Hostgator i en måned for $0,01 ved at bruge kupon-koden malkadiscount

Du kender sandsynligvis tricket med at sætte volapyk-tekst på hjemmesiden, når du skal vurdere det nye design, så indholdet ikke distraherer dig i din vurdering. I de fleste tilfælde bruges den latinske tekst “lorem ipsum”. (I øvrigt troede en ikke-for-kvik fransk gymnasie-rektor, at denne tekst var dansk, men det er en helt anden og længere historie.)

Nu kan du få lorem-ipsum billeder – dvs. billeder i lige præcis den størrelse, som du skal bruge til designet, men de er uden motiv, som fx det, der pryder artiklen her. Du kan enten skabe billederne selv, når du kender den enkle formel, eller du kan klikke dig vej til den på en hjemmeside.

Hjemmesiden hedder http://dummyimage.com/, og der vil du kunne angive målene på dit billede, baggrunds- og forgrunds-farve, billedtype og evt. tekst.

Der er en god beskrivelse af, hvordan du selv kan fremstille billeder uden at skulle besøge siden. Fx ser koden til mit ovenstående billede sådan her ud:

Ovenstående kode kan splittes op i linket til hjemmesiden (http://dummyimage.com), størrelsen på mit billede (150×150), baggrundsfarven (c0c0c0), forgrundsfarven (fff), billedtypen (jpg) og den tekst, jeg ville have på (150×150).

Mange af disse faktorer kan udelades, og så bruges i stedet standard. Hvis jeg fx kun havde skrevet 300 i størrelsen, ville jeg få et kvadrat på 300×300.

Prøv at lege med mulighederne. Og hvis du er bekymret for, om denne gratis side skulle forsvinde en dag (det koster penge at have en hjemmeside), så download kildekoden ganske gratis. Den er skrevet i PHP.

Forleden havde jeg brug for en formular med check-boxe. Jeg brugte et program til at skrive blog-indlæg med (Ecto), og det giver ikke mulighed for nemt at lave en formular. Og jeg gad ikke at starte et større program bare for det. Så jeg droppede ideen. Det behøver jeg ikke at gøre næste gang, for min mand fandt en hjemmeside, hvor du ved hjælp af et par klik kan lave de flotteste formular med tekstfelter, check-boxe eller hvad du nu skal bruge.

Du opretter formularen i tre hurtige trin. 1) Vælg farven. 2) Vælg felterne, og skriv teksterne og 3) Download HTML-koden.

Sådan her ser min hurtigt fremstillede formular ud.

Når du er færdig – og du kan få vist formularen, før du henter koden – får du koden udleveret i zippet format, lige til at downloade og indsætte, der hvor du skal bruge den.

Tak til min mand, Cyril Malka, for dette supergode tip.

Dette er desværre ikke et tip til hvordan du gør det selv.. men jeg tror det kan inspirere til at tænke over hvilke muligheder forskellige medier har.
Et reklamefirma har lavet deres hjemmeside som video på Youtube. Ikke bare lagt en video på hjemmesiden, ikke bare lavet en video om hjemmesiden og lagt på Youtube. Næh, en komplet hjemmeside med navigationsknapper og det hele lavet på Youtubes platform. Hvis man skriver deres web-adresse kommer man direkte til youtube.

Det er selvfølgelig gennemført helt, så man kan kontakte dem ved at sende dem en video. Det ved jeg så ikke hvor mange kunder der ret faktisk gør.
Jeg syntes de er sluppet godt fra det med mange små sjove detaljer. Fx ligner “Contact Us” videoen bare et skilt med lidt muzak til, men prøv at lade den køre!

Stilen er lidt barnlig, så man tænker, det kunne jeg da nemt lave selv. På den anden side set bliver det nok et større arbejde en man først lige tror.

Det er lidt af en myte, at blogs på Blogger bliver godt placeret i Google, fordi denne søgemaskine tilfældigvis ejer Blogger. Noget er der selvfølgelig om snakken, men Blogger har en stor brist, når det drejer sig om SEO*. Nah, flere store brister, faktisk, men i dette blog-indlæg vil jeg kun se på en af dem.

Måske den vigtigste.

Og selv om du ikke bruger Blogger, kan du faktisk lære noget af det, for din hjemmeside har måske samme fejl.

* SEO står for Search Engine Optimization, altså optimering af hjemmesiden eller bloggen, så den lettere kan findes i søgemaskinerne.

Hvis du bruger Bloggers indbyggede WYSIWYG-editor, altså den, du opretter dine blogposter med, så vil du begå en grov fejl, når du indsætter billeder.

Jeg har nogle blogs hos Blogger, og jeg tjekkede lige et gammelt billede, som jeg havde sat online på et tidspunkt. Koden ser således ud:

SEO-mæssigt består fejlen i, at der er en tom alt-attribut. Der står kun alt=”" – ingen tekst imellem gåseøjnene.

Du kan nemt rette denne fejl blot ved at klikke på Edit HTML, når du redigerer posten. Herefter kan du skrive en meningsfyldt billedtekst, som fx indeholder dine nøgleord, altså de ord, som du gerne vil have, at folk skal finde din blog-post med.

Søg evt. efter <img for lettere at finde de steder, du skal have enten rettet eller tilføjet en alt-attribut.

Bonus-tip: Vil du gøre det endnu bedre?

I så fald skal du også tilføje en titel til <img>-taggen. Det gør du sådan her:

Den kode skal du selv indsætte. Der er ikke nogen title=”" klar allerede.

Hvis du laver podcast eller dine egne sange, er det smart, hvis du kan have en afspilningsknap ud for linket. Det er ekstra smart, hvis du ikke bagefter behøver at sende folk videre til deres iTunes player, eller Windows player, eller hvad de nu har på deres computer, men kan beholde dem på din side.

Ekstra-ekstra smart er det selvfølgelig, hvis denne player ser godt ud – og hvis den er gratis og nem at bruge … Ja, så er du nærmest i himlen, ikke?

Yahoo! Media Player opfylder alle de ovenfor nævnte ønsker.

Du behøver bare at uploade dine MP3-filer og bagefter linke til dem sådan her:

<a href="http://webside.com/example1.mp3">Link 1</a>
<a href="http://webside.com/example2.mp3">Link 2</a>
<a href="http://webside.com/example3.mp3">Link 3</a>

og at indsætte et stykke javascript i din sidekode.

Lad os lige teste det her …

01_demain_il_pleut.mp3

audiopostcard.mp3

danosongs.com-silvershine.mp3

Har du styr på, hvem der linker til din side?

En af hemmelighederne bag en god placering i søgemaskinerne er de såkaldte “backlinks“, altså links, der peger på din side fra andre hjemmesider.

Du kan gøre det interessant for folk at linke til din side, hvis du tilbyder dem et link tilbage. Desværre kan det give en del bøvl med, at folk linker til dig, får et link tilbage, hvorefter de fjerner deres link. Useriøst og endda skadeligt for din side.

Denne metode her er anderledes. Du skal blot indsætte nogle få linjers tekst på din side, og så vil du hele tiden kunne følge, hvem der linker til dig. Hvis folk fjerner linket, bliver de også fjernet fra din side helt automatisk.

Du kan benytte dig af siden Referer.org til at få mere at vide om, hvem der linker til dig. Du behøver hverken at tilmelde dig eller at opgive din e-mail-adresse. Bare kopier den kode, du får serveret på forsiden, til din egen hjemmeside eller blog, og sæt den på alle de sider, du vil have scannet. Du kan ved at ændre koden lidt vælge, at dine “referers” ikke bliver vist overalt, men fx kun på en side, hvor du siger tak til folk.

Der kan gå et døgns-tid, før listen er opdateret, så hav tålmodighed.

Tak til Hanne Fachmann for tippet.

Prøv engang at køre din mus henover en hjemmeside. Markøren vil blive vist forskelligt afhængigt af, om musen er over tekst, billeder, tomme områder eller links. Men uden brug af grimme koder, snyd eller andet kan du faktisk lege lidt med musemarkørerne. Husk dog altid på at gøre det på en måde, så det vejleder dine gæster og ikke vildleder dem.

Du kan ændre standard-musemarkørerne ved hjælp af stylesheets (også kaldet CSS), selv uden at kende noget til dette begreb i forvejen. Det er ganske enkelt. Du behøver bare at ændre dine tags en smule, fx <p>-taggen, hvis du vil have en anden musemarkør på et stykke tekst.

Men først lidt om dine muligheder …

Musemarkøren kan ligne forskellige ting, som fx et plus (crosshair), en pil (pointer), et ur eller timeglas (wait), et spørgsmålstegn eller en ballon (help), en progress bar eller timeglas (progress), et stort I (text) og så forskellige pile, som viser, at noget kan enten flyttes (move) eller få ændret størrelsen (xx-resize).

Med andre og mere tekniske ord, så har du følgende muligheder, når du selv vil bestemme musemarkørens udseende:

Stop!

Ikke noget med at smutte herfra i panik Nu skal jeg vise dig, hvor enkelt det er at bruge ovenstående kode.

Du kan bruge stylesheets inde i normale tags. Hvis du har en tag, der indeholder et afsnit tekst, vil det se sådan her ud:

Du kan indsætte stylesheets i koden ved at tilføje den til den første p-tag således:

Prøv selv at muse over teksten ovenfor. I stedet for den normale tekstmarkør, vil du kunne se et timeglas eller en måler, der viser udviklingen, afhængigt af dit styresystem.

Nemt, ikke?

Hvis du vil vide mere om stylesheets, og hvordan du kan bruge dem til at lave flotte hjemmesider med smarte menuer og andet, vil jeg anbefale dig min e-bog “Begynd med Stylesheets”.