Webbdesign direkt » Guider http://www.webbdesigndirekt.se - blogg om webbdesign och programmering Sat, 12 Jun 2010 21:52:03 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Tangentbordsnavigation med jQuery http://www.webbdesigndirekt.se/slug/ http://www.webbdesigndirekt.se/slug/#comments Sat, 12 Jun 2010 21:51:53 +0000 Mattias http://www.webbdesigndirekt.se/slug/
Remy Sharp har på sin sida Jquery for Designers publicerat en videoguide om hur du kan lägga till tangentbordsstyrning på hemsidan. Guiden kräver att man kan en del om javascript och jQuery men för den som kan det är guiden ett guldkorn. Här finns även en enkel demo där du kan se resultatet.

]]> http://www.webbdesigndirekt.se/slug/feed/ 1 Drop down menu http://www.webbdesigndirekt.se/drop-down-menu/ http://www.webbdesigndirekt.se/drop-down-menu/#comments Tue, 30 Mar 2010 10:16:14 +0000 Mattias http://www.webbdesigndirekt.se/?p=1459 En drop down menu är ett bra sätt att organisera sidlänkar på hemsidan.

Här hittar du nedanstående exempel

Vi börjar med HTML delen.

HTML

<ul id="dropdown">
  <li><a href="#">Länk 1</a>
    <ul>
      <li><a href="#">Länk 1 - 1</a></li>
      <li><a href="#">Länk 1 - 2</a></li>
      <li><a href="#">Länk 1 - 3</a></li>
   </ul>
 </li>
 <li><a href="#">Länk 2</a>
    <ul>
      <li><a href="#">Länk 2 - 1</a></li>
      <li><a href="#">Länk 2 - 2</a></li>
      <li><a href="#">Länk 2 - 3</a></li>
    </ul>
  </li>
  <li><a href="#">Länk 3</a></li>
  <li><a href="#">Länk 4</a></li>
</ul>

Här sätter vi upp strukturen för vår drop down menu.  Menyn består av ett oordnad lista , <ul>, med fyra listelement <li>. I dessa finns först en länk, <a>, och sedan en ny oordnad lista <ul> med egna listelement <li>. De två första länkarna ”Länk 1″ och ”Länk 2″ har varsin drop down menu medan ”Länk 3″ och ”Länk 4″ inte har det.

CSS

#dropdown {
 float: left;
 margin: 0;
 padding: 0;
}
#dropdown li {
 background: #F7F0E0;
 border:1px solid #666;
 float: left;
 list-style: none;
 margin: 0;
 padding:0 0 0 10px;
 position: relative;
 height:20px;
 width:100px;
}
#dropdown li:hover {
 background: #FF2828;
}
#dropdown li a {
 text-decoration:none;
}
#dropdown ul {
 background: #F7F0E0;
 display: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 20px;
 left: -1px;
 z-index: 500;
}
#dropdown ul {
 position: absolute;
}
#dropdown li:hover ul {
 display: block;
}

Hela drop down menyn styrs enbart av CSS. I en senare guide kommer vi att lägga på javascripteffekter med hjälp av jQuery men här nöjer vi oss med CSS.

Drop down menyerna döljs genom att vi till och börja med anger regeln ”display:none”. När sedan muspekaren befinner sig över listelementet som drop down menyerna finns i så visar vi dem med CSS-regeln ”display:block”. Detta sker att använda pseudo-väljaren ”:hover” .

Här kan du lära dig mer om hur du skriver CSS regler!

]]> http://www.webbdesigndirekt.se/drop-down-menu/feed/ 0 jQuery för nybörjare http://www.webbdesigndirekt.se/jquery-for-nyborjare/ http://www.webbdesigndirekt.se/jquery-for-nyborjare/#comments Tue, 23 Mar 2010 21:32:01 +0000 Mattias http://www.webbdesigndirekt.se/?p=1431 jQuery är ett lätt Javascript bibliotek som gör det enklare, snabbare och roligare att använda javascript på din blogg eller webbsida.

Genom enkla men ändå kraftfulla funktioner kan du enkelt skapa animationer och effekter, använda dig av Ajax för att visa RSS-flöden och mycket annat.

Några fördelar med jQuery:

  1. jQuery är betydligt enklare än vanlig javascript!
  2. jQuery minskar mängden kod som behöver skrivas och gör programmeringen snabbare!
  3. jQuery har bra dokumentation och det finns massor av guider och tutorials på internet.
  4. jQuery gör det lätt att använda Ajax som används av bl.a. Google och Facebook
  5. jQuery har mängder av gratis plugins som direkt går att använda.

Kom igång – steg för steg guide

1. Länka till jQuery biblioteket

Det första du måste göra är att länka in jQuery biblioteket på din hemsida. Det finns två sätt att göra detta. Endera kan du ladda hem den senaste versionen från jQuerys hemsida. Sedan lägger du upp jQuery-filen på din server och hänvisar sedan till filen i <head> delen av HTML-dokumentet där biblioteket ska användas.

HTML

<script type="text/javascript" src="jquery.js"></ script>

Det går även att hämta jQuery direkt från Google vilket ofta är att föredra då det bl.a. kortar sidans laddningstid särskilt om det redan finns en version av jQuery lagrad i webbläsarens cacheminnet. För att ladda jQuery från Google skriver du följande HTML-kod mellan <head>-taggarna i HTML-dokumentet.

HTML

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script>

2. Ange (document).ready funktionen

När jQuery biblioteket väl är hämtat kan vi sätta igång att skriva själva koden. För att köra jQuery kod måste den vara skriven inuti en speciell jQuery funktion. Se nedanstående exempel:

HTML

<script type="text/javascript">
   $(document).ready(function () (
       // Skriv koden här...
   ));
</script>

Denna funktion gör så att jQuery koden i HTML-dokumentet körs när webbsidan är färdigladdad. (Mer precis så körs jQuery skripten där webbsidans DOM är redo.)

3. Skriv jQuery koden

Nu kan du hur man länkar in jQuery biblioteket och hur (document).ready funktionen fungerar är du redo att skriva ditt första Följande exempel gör alla paragrafer (HTML p) blåa när man klickar på dem med musen.

HTML

<script type="text/javascript">
   $(document).ready(function () {
       $('p').click(function () {
         $(this).css('color','blue');
      });
   });
</script>

$(’p') är skriptets ”väljare” och fungerar precis som väljaren i CSS. I detta fall anger väljaren att skriptet ska gälla alla paragrafer (HTML p).

Punkten som står direkt efter väljaren behövs för att koppla ihop väljaren med klick-funktionen click(function () { }) som följer direkt efter. Innehållet mellan måsvingarna { } är den kod som ska köras när en användare klickar på väljaren.

$(this) är en speciell väljare som anger att funktionen ska gälla just det element som blev klickat på.

.css(’color’,'blue’) är en funktion som anger en CSS-regel för ett HTML element. I detta fall anges att CSS-egenskapen ”color” ska anta värdet ”blue”. Varje kodbit avslutas med ett semikolon ; som anger att just detta stycke kod är slut.

Här följer ett all kod för ovanstående exempel:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script>
   <script type="text/javascript">
      $(document).ready(function () {
          $('p').click(function () {
            $(this).css('color','blue');
         });
      });
   </script>
</head>
<body>
   <p>Detta är en paragraf som blir blå när man klickar på den</p>
</body>
</html>

Läs vidare om jQuery

]]> http://www.webbdesigndirekt.se/jquery-for-nyborjare/feed/ 0 Flytande citat som i veckotidningar http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/ http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/#comments Sat, 12 Dec 2009 13:46:18 +0000 Mattias http://www.webbdesigndirekt.se/?p=1346 Exempel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros dui, blandit in eleifend in, feugiat ac est. Aenean aliquet neque eget urna mattis porttitor.

Ett citat som flyter till höger

Aliquam mi mauris, tincidunt nec rhoncus sit amet, euismod ut metus. Sed et lectus lacus, ut iaculis purus. Fusce pharetra sollicitudin porttitor. Aliquam hendrerit pellentesque ullamcorper. Mauris nec arcu ligula.

Gör så här:

Börja med att skriva lite text mellan två HTML blockquote taggar.

HTML

<blockquote>Lorem ipsum dolor sit amet
 consectetur adipiscing elit.</blockquote>

Lägg sedan till dessa CSS regler till din stilmall.

CSS

blockquote {
   float:right;
   font-size:130%;
   font-style:italic;
   margin:10px 15px;
   width: 30%;
}

I exemplet ovan anges att citatet ska flyta till höger och uppta 30%  av spaltens fulla bredd.Texten kommer att visas med 16 pixlars storlek och vara kursiv. Texten kommer också att ha en margin, dvs. en tomt område på alla fyra sidor på 10 pixlar.

Läs mer om hur CSS skrivs i vår CSS skola.

]]> http://www.webbdesigndirekt.se/flytande-citat-som-i-veckotidningar/feed/ 0 Genomskinliga bilder med CSS http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/ http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/#comments Mon, 24 Aug 2009 23:03:07 +0000 Mattias http://www.webbdesigndirekt.se/?p=858 Att göra bilder genomskinliga är inte helt enkelt eftersom alla webbläsare  har sitt eget sätt att hantera genomskinlighet. För att genomskinlighet ska fungera i alla webbläsare behövs därför inte mindre än fyra olika CSS regler.

CSS

img.transparent {
   filter:alpha(opacity=40);
   -moz-opacity:0.4;
   -khtml-opacity: 0.4;
   opacity: 0.4;
}

I ovanstående exempel är bilden 40% genomskinlig.

Observera att sidan måste ha en korrekt Doctype för att genomskinlighet ska fungera i Internet Explorer.

CSS egenskap Förklaring
opacity: 0.4; Denna egenskap fungerar i nyare versioner av Firefox, Safari och Opera. Detta är den nuvarande standarden i CSS.
filter:alpha(opacity=40); Denna egenskap används av Internet Explorer
-moz-opacity:0.5; Denna egenskap används av äldre Molzilla webbläsare som Netscape Navigator.
-khtml-opacity: 0.5; Denna egenskap används av äldre versioner av Safari (1.x)
]]> http://www.webbdesigndirekt.se/genomskinliga-bilder-med-css/feed/ 2 Sökmotoroptimering direkt http://www.webbdesigndirekt.se/sokmotoroptimering-direkt/ http://www.webbdesigndirekt.se/sokmotoroptimering-direkt/#comments Sun, 21 Sep 2008 13:05:39 +0000 Mattias http://www.webbdesigndirekt.se/?p=66 1. Gör din sajt sökbar

Det första du måste göra när du ska sökmotoroptimera är att se till att din sajt kan indexeras ordentligt av sökmotorer. När sökmotorernas sökspindlar kommer på besök måste du kunna röra sig smärtfritt genom hela sajten och hitta allt innehåll. De rör sig genom att följa länkar, du måste alltså ha länkar till allt innehåll som ska synas i sökresultaten. Det är också viktigt att du inte använder Frames eller Java/Flash-navigering av samma anledning. Frames gör att alla sidor fragmenteras och i princip blir omöjligt för sökmotorer att indexera ordentligt. Java- och Flashnavigering är dåligt för att de allra flesta sökmotorer inte följer de länkarna.

2. Välj sökord

Nästa steg är att välja vilka sökord som är viktigast för din sajt. Det finns några saker du ska tänka på när du gör det, vilka sökord är det rimligt att söka på om man vill köpa din produkt, vilka sökord inom området har stor sökvolym och hur stor är konkurrensen på dessa sökord? Ta fram de sökord som ligger nära produkten så att du får en hög konverteringsgrad. Se sedan vilka av dessa som har högst volym och matcha mot konkurrensen för att få fram de perfekta sökorden. Det enda som är riktigt svårt av dessa att mäta är konkurrensen och det bästa tipset är att använda sunt förnuft. Titta helt enkelt på vilka sidor som finns i resultaten för sökorden. Det kanske inte är helt smart att satsa på sökord där myndigheter eller andra jättesajter finns.

3. Fixa din sajt

När du väl valt sökord är det dags att få in dem på sajten. Om du bara har något enstaka sökord är det rimligt att satsa på att få in dem på förstasidan. Om du däremot har väldigt många kommer du behöva sprida ut dem på undersidor. Se till att få med sökorden i Title, H1, Description, Keywords, i text och i länkar som pekar till sidan i navigeringen. Du kan ha dem i alt-taggar på bilder om bilderna är relevanta för ämnet och du kan fetstila eller kursivera orden i texten för att förstärka ytterligare.

Sajten sökmotrokonsult.se har tagit fram ett mycket användbart verktyg som berättar för dig vad du behöver göra för att göra din sajt mer sökmotorvänlig! Dessutom är det gratis!

4. Ordna länkar

Nästa steg är att skaffa länkar till sidorna. Länkar är den enskilt viktigaste faktorn när det gäller sökmotoroptimering och det finns massor av sätt att få tag på länkar. Du kan börja med att registrera din sajt i de kataloger som finns. Den förmodligen mest kända katalogen är DMOZ och det kan vara ett bra ställe att börja på. Du kan sen gå vidare till att promota din sajt lite försiktigt på forum och i sociala nätverk. Du kan blogga om den och du kan be andra bloggare att blogga om den. Du kan göra länkbyten med andra webmasters, skicka helt enkelt ett mail till den som står som upphovsman för någon annan sajt på ditt område.

Läs mera

Om du vill veta mer om sökmotoroptimering eller SEO som det också kallas finns det gott om läsning på Internet i bloggar och forum. Mycket är på engelska men det finns en del på svenska också.

]]> http://www.webbdesigndirekt.se/sokmotoroptimering-direkt/feed/ 1 Runda hörn med css http://www.webbdesigndirekt.se/runda-horn-med-css/ http://www.webbdesigndirekt.se/runda-horn-med-css/#comments Wed, 17 Sep 2008 22:03:43 +0000 Mattias http://www.webbdesigndirekt.se/?p=5 Exempel:

Klicka här för att se följande exempel

HTML:

<div class="round"><div><div><div>
<p>Innehållet skrivs här...</p>
</div></div></div></div>

CSS:

.round {
   background:url(images/corners1/lt.gif) 0 0 no-repeat;
   background-color:#003399;
}
.round div {
   background:url(images/corners1/rt.gif) 100% 0 no-repeat;
}
.round div div {
   background:url(images/corners1/rb.gif) 100% 100% no-repeat;
}
.round div div div {
   background:url(images/corners1/lb.gif) 0 100% no-repeat;
   padding: 30px;
}

Bilder:

lt.gif rt.gif rb.gif lb.gif

Boxen består av fyra divisioner inuti varandra med en bild i vardera hörn.

  • Den yttersta (första) div-taggen bestämmer boxens bredd, anger boxens bakgrundsfärg och visar bilden för det övre vänstra hörnet.
  • Den näst yttersta visar bilden med det övre högra hörnet.
  • Nästföljande div placerar bilden i det nedre högra hörnet.
  • Den sista div-taggen visar bilden i nedre vänstra hörnet och anger boxens padding.

För att undvika problem är det viktigt att boxens bredd och eventuell höjd enbart anges i den första div-taggen och att eventuell padding anges i den sista.

]]> http://www.webbdesigndirekt.se/runda-horn-med-css/feed/ 4