Blogg | Webdesign : Recent tags

blogg

2008-06-12 11:25:00

Nu är det så äntligen dags. Twingly öppnar sökmotortjänst för bloggar skriver idg

Efter två månader i betatest öppnar nu Twingly sin bloggsöktjänst. Martin Källström på Twingly lyfter framför allt fram att tjänsten är fri från spam.

- Vi har fått väldigt bra respons från bloggare över hela världen, och uppåt 3500 personer har testat tjänsten under testfasen, säger Martin Källström, vd på Twingly.

twingly

2008-06-12 11:25:00

Nu är det så äntligen dags. Twingly öppnar sökmotortjänst för bloggar skriver idg

Efter två månader i betatest öppnar nu Twingly sin bloggsöktjänst. Martin Källström på Twingly lyfter framför allt fram att tjänsten är fri från spam.

- Vi har fått väldigt bra respons från bloggare över hela världen, och uppåt 3500 personer har testat tjänsten under testfasen, säger Martin Källström, vd på Twingly.

patent

2008-06-03 08:14:00

Hahaha...läst nu på Idg om en av årets mest puckade grejor. Företaget Vuestar anser sig ha patent på att ha miniatyrbilder som man klickar på så att det blir en stor bild. Fenomenet har nästan funnits lika länge som websidor utvecklats men nu skall Vuestar sätta stopp för detta.

[more]

De har redan börjat skicka ut fakturor till dem som använder metoden.

Citerat från Idg.se:
"Patentetansökan som lämnades in i USA 2001 beskriver att man kan ge en förhandsvisning om vad en länk leder till genom att visa en miniatyrversion av materialet, exempelvis en liten version av en bild eller en nedskalad version av webbsidan som länken leder till. Alltså precis den metod som många sökmotorer använder, bland annat Googles bildsök."

Låter som att det är patentverket som gjort en riktig groda att godkänna detta. Men var leder detta då? Finns det någon som tagit patent på den äckelblåa länkfärg som är standard? Eller finns det patent på att ha text på sin hemsida? Vi väntar med spänning på vad som händer härnäst

thumbnails

2008-06-03 08:14:00

[more]

De har redan börjat skicka ut fakturor till dem som använder metoden.

google

2008-06-03 08:14:00

[more]

De har redan börjat skicka ut fakturor till dem som använder metoden.

webdesign

2008-06-03 08:14:00

[more]

De har redan börjat skicka ut fakturor till dem som använder metoden.

hemsidor

2008-05-07 13:45:00

Har du fastnat i ditt hemsidesbyggande?? Själv har man landat i den situationen ett antal gånger. Men vad skall man göra då? Ja är det programmering det handlar om så visst kan man alltid läsa en bok men handlar det om webdesign och grafik, ja då är det svårare.

Själv brukar jag alltid gå till cool homepages och kolla in deras templates. Skitsnygga en del och dessutom kan man få en hel del inspiration till din egen site. Här finns allt från caféer till barnvagnar till flygplan.

Alla fina templates hittar du här

Läs även andra bloggares åsikter om hemsidor, grafik, webbdesign, inspiration, design

inspiration

2008-05-07 13:45:00

Alla fina templates hittar du här

Läs även andra bloggares åsikter om hemsidor, grafik, webbdesign, inspiration, design

grafik

2008-05-07 13:45:00

Alla fina templates hittar du här

Läs även andra bloggares åsikter om hemsidor, grafik, webbdesign, inspiration, design

webbdesign

2008-05-07 13:45:00

Alla fina templates hittar du här

Läs även andra bloggares åsikter om hemsidor, grafik, webbdesign, inspiration, design

css

2008-04-30 08:17:00

Ofta så kan det vara ganska svårt att kunna hitta vettiga menyer att jobba utifrån. Men jag har en källa som brukar fungera väldigt bra, Dynamic Drive. Idag skall jag ta upp hur man gör för att få en snygg horisontell meny.

[more]

Resultatet kommer att se ut så här ungefär:

Bilderna som är använda i menyn är följande:

Ok, då har vi resultatet men nedanför så får vi koden som skall in delvis i css-filen och delvis i html-koden.

Kod som skall in i CSS:en:

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(img/menybg1.jpg) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(img/menybg2.jpg) center center repeat-x;
}

Kod som skall in i din HTML-kod

<div class="indentmenu">
<ul>
<li><a href="http://www.aftonbladet.se">Aftonbladet</a></li>
<li><a href="http://www.twingly.com">Twingly</a></li>
<li><a href="http://www.elfsborg.se">Bästa klubben</a></li>
<li><a href="http://www.va.se">Veckans Affärer</a></li>
</ul>
</div>

Hoppas att ni har nytta av denna menyn. Det har jag haft

Andra bloggar om: webdesign, webbdesign, css, meny, css-meny, dhtml

meny

2008-04-30 08:17:00

[more]

Resultatet kommer att se ut så här ungefär:

Bilderna som är använda i menyn är följande:

Ok, då har vi resultatet men nedanför så får vi koden som skall in delvis i css-filen och delvis i html-koden.

Kod som skall in i CSS:en:

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

Kod som skall in i din HTML-kod

Hoppas att ni har nytta av denna menyn. Det har jag haft

Andra bloggar om: webdesign, webbdesign, css, meny, css-meny, dhtml

listmeny

2008-04-30 08:17:00

[more]

Resultatet kommer att se ut så här ungefär:

Bilderna som är använda i menyn är följande:

Ok, då har vi resultatet men nedanför så får vi koden som skall in delvis i css-filen och delvis i html-koden.

Kod som skall in i CSS:en:

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

Kod som skall in i din HTML-kod

Hoppas att ni har nytta av denna menyn. Det har jag haft

Andra bloggar om: webdesign, webbdesign, css, meny, css-meny, dhtml

veckans affärer

2008-04-30 08:17:00

[more]

Resultatet kommer att se ut så här ungefär:

Bilderna som är använda i menyn är följande:

Ok, då har vi resultatet men nedanför så får vi koden som skall in delvis i css-filen och delvis i html-koden.

Kod som skall in i CSS:en:

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

Kod som skall in i din HTML-kod

Hoppas att ni har nytta av denna menyn. Det har jag haft

Andra bloggar om: webdesign, webbdesign, css, meny, css-meny, dhtml

genomskinlig

2008-04-17 08:57:00

Man ser det nästan överallt numer. Att folk gör speglingar av en text / sak på en tonad bakgrund. Därför har jag fått en hel del frågor om hur det går till. Svaret är alltid att det beror på hur avancerat du vill ha det. - Så lätt som möjligt brukar motsvaret vara. Därför tänker jag idag visa ett väldigt enkelt sätt att göra detta. Alltså en minitutorial till hur en spegling i Photoshop går till.

[more]

1. Öppna ett nytt dokument i photoshop. Sätt det till 400 x 200 pixlar. Gör ett nytt lager och färlägg detta. Tryck sedan på "add a layer style" (har inte svenskt photoshop men hoppas att bilden kan förklara).

2. Tryck där "Gradient overlay" (sv. övertoning). Behåll inställningarna men klicka på rutan med övertoningen och ställ in dessa färger (se bild) genom att dubbeklicka på de markerade fyrkanterna.

3. Bilden borde se ut något liknande detta (denna är förmiskad)

4. Tag fram textverktyget och skriv något (kan vara en bild eller vad det nu kan vara)

5. Duplicera lagret (layer -> duplicate layer)

6. Vänd lagret vertikalt (edit -> transform -> flip vertical) och flytta så att lagret ligger "botten mot botten". Nu borde det se ut som bilden nedan.

7. Ändra opacitet på lagret till 20% så att det ser mer genomskinligt ut.

8. Tryck på knappen "add layer mask" i lagerpaletten

9. Tryck nu på övertoningsverktyget (gradient tool) i verktygspanelen och se till att "foreground to background" är valt. Färgerna skall även vara svart mot vitt (kortkommando "D")

10. Dra från botten av ditt mer genomskinliga lager upp till ungefär hälften.

11. Nu skall det vara klart och resultatet kommer förhoppningsvis se ut som nedan.

Hoppas att denna lilla lektion kommer att vara till nytta för er samt att ni tränar mer på era grafiska kunskaper. Kom ihåg mottot: "ett snyggt yttre är ett bra första intryck".

Andra bloggar om: genomskinlig, spegling, photoshop, övertoning, grafik, tutorial

grafik

2008-04-14 14:08:00

Mycket inom webdesign är att lära sig hur färger hänger ihop med varandra. Det finns många skräckexempel på internet hur sidor INTE skall se ut och desto färre HUR de skall se ut. Det finns däremot lite grundstenar om vad man skall tänka på i första hand.

[more]

Text:
Text skall i förstahand vara mörk på ljus bakgrund, speciellt om det är mycket text det handlar om. Det är både lättare att läsa plus att det ser bättre ut om det är mycket text. Ljus text kan användas på mörk bakgrund men då i första hand när det handlar om kortare stycken eller om det skall ha en effekt.

GUI:
På själva designen skall det i mångt och mycket handla om färger som matchar varandra väl och inte sticker i ögonen. Detta är något man kan träna upp men skulle man inte ha orken till detta så finns det verktyg online för detta. Ett av dessa verktygen finns på colormatch.dk

Som slutord vill jag bara säga att använd ett sådant här verktyg om du är osäker. För chansar du så finns risken att helhetsintrycket förstörs och du framstår som en färgblind fåne.

Andra bloggar om: webdesign, webbdesign, grafik, färglära, colormatch, gui

div

2008-04-14 13:55:00

Yes, nu skall vi beröra ett ämne som många har problem med. Inte för att det är svårt utan att det finns hur många sätt som helst att göra det på. Men vi skall göra på det riktiga sättet så att det funkar i alla browsers. Allt sker ganska lätt med CSS. Nedan följer koden.

.body
{
text-align:center;
}

.centerdiven
{
margin:0 auto;
}

Detta skall funka så att diven ligger centrerat på sidan. Ett litet men fint knep.

Andra bloggar om: div, webdesign, webbdesign, centrera, css

kod

2008-04-10 13:29:00

Som en gammal kodapa har jag sett hur katastrofalt det kan vara att jobba i utvecklingsprojekt där ingen tydlig standard följs vid namngivning av t.ex. variabler. Det kanske låter som en enkel sak, men det finns faktiskt en hel del att tänka på.

Ska man t.ex. programmera på svenska eller engelska? Som svensk är det kanske enklare att hålla sig till det egna språket, men engelska är ju internationellt och kanske bättre lämpat om andra ska in och pilla i koden. Ska man skriva utförliga och självförklarande namn eller förkorta så gott man kan för att hålla nere storleken på det man utvecklar? Hur ska man använda gemener och versaler?

[more]

Det finns ingen universell sanning när det gäller namngivning av kod, däremot finns det vissa tumregler som kan hjälpa dig skriva bra och lättförstådd kod. Jag själv har valt att koda på engelska, men kommer att hålla mig till svenska i inlägget för att vara språkligt konsekvent.

När man namnger en variabel är viktigt att hålla i åtanke att namnet på variabeln bör beskriva vad den är. Ett bra sätt att komma på bra namn är att man med ord uppger vad variabeln representerar, ofta blir just förklaringen ett bra namn som är lätt att förstå eftersom det inte består av några konstiga, halvkryptiska förkortningar. Det är entydigt och beskriver sig självt till fullo, och blir på så sätt svårt att förväxla med något annat.

En variabel som representerar totala antalet bokade sittplatser på ett tåg under ett visst år skulle man alltså kunna namnge som antalBokadeSittplatser2008, medan ett namn som bokningar lätt kan förväxlas med några andra sortersbokningar, och namn som b och s är bara att förkasta. Här ser man dock att det inte alltid funkar så bra att ha så beskrivande namn, det är helt enkelt inte praktiskt.

Den optimala längden för namn sägs vara någonstans mellan längden av b och antalBokadeSittplatser2008. För korta namn förmedlar inte tillräcklig mening, och även om man lyckas luska ut vad b är så vet du inget om relationen mellan b och s. För långa namn å andra sidan är jobbiga att skriva och kan förstöra den visuella kodstrukturen. Man brukar säga att applikationer med variabelnamn på mellan 10 och 16 tecken kräver minimalt med ansträngning att felsöka, men det innebär inte att du måste sätta dig och se till att alla namnen håller sig inom den ramen. Däremot kan du med fördel ta dig en titt på hur du namnger dina variabler och om du ser att de generellt är åt det kortare hållet, ta dig en funderare på om namnen är så tydliga som de behöver vara.

När man sen tittar på hur man skriver namnen finns det ett sätt som brukar användas flitigt av väldigt många - camel case. Principen är att man inleder varje första ordet med en gemen och sedan varje nytt ord med en versal, som vi kunde se i exemplet tidigare; antalBokadeSittplatser2008. Det finns en variant på camel case där man även inleder första ordet med en versal. Denna metoden kallas ibland pascal case.

Det var allt för den här gången, det är inte helt omöjligt att jag fortsätter på den här tråden någon gång framöver.

Andra bloggar om: kod, programmering

div

2008-04-09 16:55:00

Att länka en div tror många är jättesvårt men det är det absolut inte. Många gör det även rätt från början men missar att ändra pekaren och därför ser det inte ut som en länk. Det man då gör är att lägga till en hand som pekare över din div. Koden skall se ut så här:

</div>
</a>

Svårare än så behöver det inte vara

twingly

2008-04-09 16:38:00

Jag som bloggare måste ju säga att jag är ett stort fan av bloggtjänsten Twingly. Där kan man som hemmabloggare göra sig hörd inför den stora massan som läser de utvalda siterna som Twingly har.

I teorin går det till så att man länkar från sin bloggartikel till en speciell adress som t.ex Idg har för sin nyhet. Nu dyker din blogg upp där om du pingar den på Twingly.

Nu skall alltså tjänsten ut i världen och jag önskar de all lycka i framtiden. För detta är verkligen en bra tjänst som alla bloggare borde uppmärksamma och använda sig mer av. För visst vill man att sina åsikter skall synas utåt?

spalter

2008-04-09 10:51:00

Här är ett problem som alla brukar lösa med tabellhantering. Men om du skall göra det på ett bra och riktigt sätt så skall du använda divar. Lösningen på detta är ett kommando som kallas "float".

[more]

Nedan ser du vad vi vill komma åt och även en lösning.

Detta lägger du i din html-sida:

<div class="ruta_1">
<div class="left_1">
<p>Spalt1</p>
</div>

<div class="right_1">
<p>Spalt2</p>
</div>
</div>

Och detta skall ligga in din CSS:

.ruta_1
{
width:400px;
height:200px;
background:#b6b6b6;
padding:5px;
}

.left_1
{
width:220px;
background:#FFF;
height:100%;
text-align:center;
float:left;
}

.right_1
{
width:160px;
background:#FFF;
height:100%;
text-align:center;
float:left;
margin-left:8px;
}

p
{
font-family:verdana, arial;
font-size: 11px;
}

När detta är gjort har du ett lika fint resultat som ovan.

webdesign

2008-04-08 15:56:00

Nu är den äntligen här. Dem ultimata bloggen för webbdesign. Här hoppas jag att kunna blogga vidare mina kunskaper om webbdesign och grafik. Skulle du ha några önskemål om vad som skall stå här så testa att kontakta mig så skall jag se om jag kan skriva ett inlägg om det.

Tveka aldrig att kommentera inläggen för även jag kommer att ha fel och att det finns lättare sätt att göra vissa saker.

Väl mött
Er Webbdesigner