Bildcredit till http://www.cheeseslave.com

Nu är vi tillbaka med full styrka och är återigen redo att ta oss an nya och ny-gamla utmaningar! Hör av er om just du har något du behöver hjälp med – Hemsida eller superskurk spelar ingen större roll.

Länge har vi  på Bombardier Studio har letat efter ett riktigt bra slider-plugin till jQuery, och länge har vi gått bet och skrivit våra egna. Dock ej längre.

Låt oss presentera: Nivo.

Nivo är utvecklad av dev7studio.com och är ett väldigt enkelt och flexibelt plugin. Det har stöd för flera olika funktioner, varav några av de fräckaste är

• Många nya animationer och transitions (övergångar).
• Tonvis med inställningar
• Stöd för thumbnail-navigering
• Stöd för Nästa/föreg. knappar
• Play Pause
• Tangentbordsnavigering
• Bildtexter

Det låter ju grymt! Hur använder man?

Nivo används på samma sätt som i princip alla andra jQuery plugins.

1. Inkludera filerna innanför < head > – taggen

   <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
   

2. Bygg markup-koden för din slider

   <div id="slider">
   <img src="images/slide1.jpg" alt="" />
   <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
   <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
   <img src="images/slide4.jpg" alt="" />
   </div>
   

3. Initiera Nivo-slidern!

   <script type="text/javascript">
   $(window).load(function() {
   $('#slider').nivoSlider();
   });
   </script>
   

All done!

Det läckra är att oftast så räcker de här 30 minuterna för att man skall kunna sköta om sin sida med de mest grundläggande sysslorna, lägga till en nyhet, redigera en mailadress – Ja ni fattar.

Däremot så har vi även märkt att intresset för att lära sig MER än day-to-day-basics är betydligt högre, iallafall här i göteborg där vi verkar, än någon av oss hade kunna tro.

Vad är ett plugin?  Uppdatera, vågar man? Hur lägger jag till ett youtubeklipp i en nyhet?

Vårat förslag…

”Så här kan det ju inte gå till!?” – Tänkte vi, och genast så startade en idé. Om det finns intresse så kan ju vi ta och hålla ”Hur du blir BFF med WordPress”-kurser i Göteborg.

Så om du är ansvarig för ditt företag eller förenings hemsida och vill lära dig att krydda upp den lite själv, så är du välkommen att lämna intresseanmälan (enklast via formuläret på kontaktsidan) så hör vi av oss när vi känner att det är dags, eller när det är tillräckligt med folk.

Foto: Flickr Donncha

Vi tänkte här ta upp några av de största och med hjälpsamma funktionerna som CSS3 erbjuder.

• Gradienter
• Runda hörn
• Skugga

1. Gradienter

Iochmed den nya css-regeln gradient så kan man nu skapa gradienter utan att använda bilder, och enbart med ren kod.

-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,221,0)),
color-stop(1, rgb(251,126,0))
)
-moz-linear-gradient(
center bottom,
rgb(255,221,0) 0%,
rgb(251,126,0) 100%
)

2. Runda hörn

Alla som har jobbat med webbdesign har bråkat med rundade hörn åtmistoende hundra gånger. Den tiden är över – tack och lov.
Med CSS3 så är allt du behöver följande kod

-webkit-border-radius: 5px;
-moz-border-radius:5px 5px 5px 5px;

3. Skugga

Sist men definitivt inte minst så har vi egenskapen som heter box-shadow.

box-shadow: 10px 10px 5px #888;

Thats all!

Sammanfattning

Jag tror att vi utan att överdriva kan säga att CSS3 kommer att förändra vardagen för oss webbdesigners, och det är åt det bättre hållet.

Däremot så har vi av rent praktiska skäl enbart en webbutik där vi säljer bägge två av produkterna. Då vill ju självklart att man skall komma till samma sida oavsett vilken av adresserna man skriver in.

Hacket är inte speciellt avancerat utan är några enkla rader som kopieras in på översta raden i din wp-config.php fil som du hittar i mappen för din wordpress installation!

Då kör vi!

Öppna wp-config.php

Kopiera in följande kod på översta raden under ”< ?php”

//flera domäner
define( 'WP_SITEURL','http://'.$_SERVER['SERVER_NAME'].'/bombardierstudio' );
define( 'WP_HOME','http://'.$_SERVER['SERVER_NAME'].'/bombardierstudio' );
//slut flera domäner

Nu bör det se ut ungefär som i bilden nedan.

Om din webbplats ligger i en undermapp (http://www.dinadress.se/butik/)

Se då till att ändra i bägge raderna enl. bilden nedan, fast byt ut ”Bombardierstudio” till namnet på din mapp.

Om du jobbar med webdesign så har du antagligen redan märkt att man är begränsad till att använda de standardtypsnitt som är webbsäkra. Till de mest använda hör: Arial, Verdana, Trebuchet MS, Times New Roman.

Bakgrunden till detta är helt enkelt att man vill att en webbsida inte skall vara beroende på vilka typsnitt besökaren har installerade på sin egen dator.

Detta hade väl varit ett okej argument för några år sedan, när varje kilobyte fortfarande var viktig för att man inte skulle behöva vänta för länge medans sidan laddade. Idag ser dock verkligheten lite annorlunda ut. Med snabbare internetuppkopplingar, och nyare webbläsare kommer nyare lösningar på problemet.

Metoder

Flera metoder och alternativ finns tillgängliga redan idag, varav vissa är mer lättimplenterade än andra och andra bättre bakåtkompatibla.

Några av de alternativ som finns är Cufon, SIFR, FLIR, typeface.js, CSS3.

Cufon – vårt val.

Idag kommer vi att gå igenom Cufon, vilket är vårat favoritalternativ av alla de olika som vi har testat.
Vi kommer att gå igenom hur man konverterar ett typsnitt, samt hur du implementerar det på din egen sida!

Lets get to it!

Steg 1.  Konvertera ditt typsnitt.

Vi börjar med att välja ut vilket typsnitt vi vill använda. Därefter så går vi till

http://cufon.shoqolate.com/

Om du vill ha svenska tecken så är det bra om du fyller i dessa här, observera att typsnittet måste innehålla dessa tecken för att det skall funka (såklart!)

Implementering

Nu har vi en .js fil som innehåller vårat typsnitt. Då är det dags att lägga till denna på din websida och lägga till den kod som behövs för att sidan skall fungera.

1. Ladda även ner cufon-yui.js ifrån cufons hemsida.
2. Ladda upp filerna till servern och lägg dem i en mapp som heter ”js”

Öppna den fil som innehåller sidhuvudet för din webbsida (i wordpress så är detta header.php).
Tänk på att du måste inkludera dessa filer på alla sidor där du vill använa ditt egna typsnitt!

Kopiera följande två rader och lägg dem någonstans imellan < HEAD > taggarna

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/helvetica-neue_500.js" type="text/javascript"></script>

När detta är gjort så är det dags att välja vilka element vi vill skall bytas ut till ditt typsnitt.

Detta görs med följande kodsnutt – Den byter ut alla Rubriker till ditt typsnitt

<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4', { fontFamily: 'ditt-typsnitts-namn' });
</script>

Nu är det hela klart! OM du har lyckats med alla steg så bör du ha något som ser ut som bilden nedan

Sidan innehåller massor med nyheter, allt ifrån LazyLoad, ny design, genomarbetade texter och fler referensjobb!