» Tutorials

Gmail push till iPhone

Nicklas — Mon, 25 Jan 2010 17:59:38 +0000

Gå in i Inställningar och sedan E-post.
Tryck på Lägg till konto.
Välj sedan kontotypen Microsoft Exchange.
Under E-post skriver du in hela Gmail-adressen.
Fyll ej i domän.
Skriv in hela Gmail-adressen under Användarnamn samt ditt lösenord.
Tryck Nästa.
Telefonen försöker ansluta. Sedan dyker fältet Server upp, där skriver du m.google.com.
Välj nästa.
Välj vad du vill synkronisera, om du bara vill ha Gmail väljer du E-post.
Du har nu Gmail-push i din iPhone!

Blinkfri bildhover

Nicklas — Wed, 25 Mar 2009 09:34:32 +0000

En alltför vanlig metod som många använder sig av när de skapar konst på internet är att göra en design i Photoshop, eller motsvarande programvara, som de delar upp i småbilder som i sin tur placeras i en tabell eller vad det nu kan vara. Den lösningen är varken flexibel eller sökmotorsvänlig. Du ska såklart använda dig av CSS!

Självklart kan man använda sig av bilder, men man bör till exempel använda sig av så många textrubriker som möjligt. Som ni kanske vet indexerar sökmotorer html-taggar som h1 och h2 för att kolla om det finns intressanta saker på din hemsida som passar olika sökningar.
Ett enligt mig mycket enerverande problem i dag är att det finns allt för få standardfonter. Man kan alltid surfa runt och ladda hem snygga fonter på hemsidor som DaFont, du kan dock inte applicera dessa fonter på texter på din hemsida utan att göra bilder.

Jag tänkte föreslå ett sätt att göra bilder lite mer sökmotorsvänliga mha css. Vi ska göra en bild med hovereffekt, som också innehåller en header-tag (som tex h1, h2 osv). Det kommer också att visa sig att hovertekniken som vi ska använda klarar av att laddas direkt, vi slipper fula blinkningar etc.

Följande är vad vi ska skapa:

HTML

Beställ här

..Dådå?

Vi använder oss av en länk med en rubrik i. Det skulle också kunna vara en länk med en span-tagg i, det är upp till dig att bestämma. I vissa situationer kan det kännas mer korrekt. Om vi skulle visa detta utan CSS skulle vi bara se en länkad rubrik. Nu ska vi införa bilder och göra så att texten inte längre syns mha CSS!

CSS

#bildklass,
#bildklass h2{
display:block;
width:120px;
height:40px;
position:relative;
overflow: hidden;
}
#bildklass h2{
margin:0px;
height:80px;
text-indent:-9000px;
background-image: url(Untitled-1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#bildklass:hover h2{
top:-40px;
}

So..?

Du ska tolka CSS-koden på följande sätt… tänk dig att a-taggen (bildklass) är ett fönster mot det du ser. Vi sätter en storlek på fönstret och börjar sedan manipulera det vi ska visa (h2).

H2 har en margin som standard, den tar vi bort.
Vi skjuter bak texten på h2-taggen så att den inte syns men ändå finns där i html-koden.
Det som finns bakom fönstret (canvas) utökar vi till bildstorleken
På hover-state skjuter vi upp bakgrunden 40 px och visar vår andra bild
Doneanddone!

Clearfix ?

Nicklas — Tue, 17 Mar 2009 16:43:34 +0000

Ni kanske har hört talas om clearfix tidigare? Det är sätt att lösa ett vanligt förekommande CSS-problem som uppstår för de flesta som bygger hemsidor mha CSS. Jag hade tänkt reda ut vad detta clearfix löser för problem, det är troligt att ni kanske känner igen det.

Jag kommer att beskriva hur man tidigare löst problemet mha en extra html-tagg, idag använder man CSS istället.

Problemet

Till att börja med… det är egentligen ett ganska gammalt problem som har en ”rolig” historia bakom sig som jag tar upp här.

Om du vill använda dig av float för att placera olika element, såsom DIVs, kan ett välkänt problem uppstå. Om objektet du väljer att flyta (float) ligger i en annan

kommer inte floatens vertikala dimension att påverka DIV-objektet. Detta kan i sin tur medföra att flytobjektet ligger utanför DIV-objektet enligt bilden nedan.

Gammal lösning (HTML)

Random text i float

Text utanför float

Förklaring

Man löser problemet genom att lägga en DIV-tagg efter den DIV som flyter.
DIV-taggen drar ner botten på ”container” genom att man använder sig av css-koden clear:both. Detta är en lösning som W3 rekommenderat sedan länge, men usch så ful den är. Att lägga till en extra html-snutt för att lösa problemet är inte acceptabelt år 2009.

CSS lösning

Med bättre verktyg som CSS kan vi lösa problemet mycket snyggare.

Det finns egentligen flera olika lösningar att välja, det roliga är att det går att lösa såpass enkelt så att det nästan verkar absurt. Man (många många människor) höll på länge och kunde inte riktigt komma underfund med hur man skulle göra det på ett snyggt sätt.

Historien är ganska rolig… En kille som heter Tony Aslett skrev för några år sedan en snutt kod som gjorde att man kunde lösa clearing-problemet via CSS på ett ganska krångligt men smart sätt. Ett tag senare kom en annan kille på ett annat sätt man kunde göra det på (FnE) Float nearly Everything… också ganska klumpigt.

En vacker dag öppnade en kille vid namn Paul O´Brien munnen och sade att: ”Det är väl inte så svårt, det är ju bara att lägga till overflow:auto på den yttre innehållaren”. Det roliga var att en hel designvärld antingen hållit tyst om hur man löser problemet eller att det helt enkelt hade en såpass trivial lösning utan att någon visste om det. Hur sjukt är inte det, designers arbetar och krånglar med html-markup och seriös CSS-hacking för att lösa problemet när allt som egentligen krävs är en rad kod!

Enkelt kontaktformulär i PHP

Nicklas — Tue, 10 Mar 2009 17:31:22 +0000

Nu ska vi glömma allt vad textlänkar med epostadresser heter och skapa ett eget, personligt kontaktformulär av samma typ som finns här.

En fördel med ett sådant formulär kan vara att du slipper att bli indexerad av spamm-botar, en annan kan vara att dina kunder slipper öppna ett externt epost-program. Du kan också få kontroll över vad du vill ha för input, dvs. om du exempelvis vill ha kundens telefonnummer så kan du sätta ut ett sånt textfält.

Att tänka på är att du måste ha en sever som klarar av php för att kunna skicka epost direkt i browsern (mha denna metod). Jag kommer ihåg hur jag försökte få till ett formulär under flera dagar när jag var yngre, det framgick senare att min host inte klarade av php-mail.

Setup

Du kommer att behöva totalt 3 filer:

mailer.php (innehåller funktionerna som behandlar de ifyllda uppgifterna)
kontakt.htm /.php (innehåller formuläret som användaren fyller i)
skickat.php (sidan som visas när meddelandet skickats)

HTML

PHP

PHP-koden ska placeras i mailer.php. Förövrigt måste du ha en fil som heter skickat.php som du kan visa när meddelandet skickats korrekt.

if(isset($_POST['submit'])) {$to = ”nicklas@nthdesign.se”;
$subject = ”Mail från NthDesign.se”;
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = ”From: ” . $name_field . ”\n E-Mail: ” . ”$email_field” . ”\n Message:\n ” . $message;
include ‘skickat.php’;
mail($to, $subject, $body);}
?>

Förklaring

Det som knyter samman html och php är:

Namnet på php-filen ska vara ”action”-värdet i html-koden
”name”-värdet i html-koden ska motsvara det som står $_POST['HÄR!!'];

Får det lov att vara lite CSS?

lek med följande för dina textfält:

textarea {

border-color: #000000;

}
textarea:focus, input[type="text"]:focus {
border-color: #ff0066;
}

Sitemaps för SEO

Nicklas — Fri, 06 Mar 2009 09:53:59 +0000

Idag pratade jag och Sebastian från Treplex lite om sökmotorsoptimering (seo) och kom in på sitemaps. En sitemap är en xml-fil som beskriver de sidor som finns på din webbplats. Xml-filen kan du lägga upp på din server, dess länk till kan du ge till google för att ”visa vad som finns” på din sida. Jag ska beskriva hur du kan göra detta på ett smidigt sätt.

Googles verktyg för webbansvariga

Gå in på följande hemsida och logga in om du har ett konto (funkar med ditt gmail konto). Väl på hemsidan kan du börja med att lägga till din webbplats-URL. Ladda sedan upp din .xml-fil till rooten av din server (public-html eller dyl.) och ge google länken under fliken ”webbplatskartor”.

Hur gör man en .xml fil?

Det finns många olika sätt att göra detta på. För en WordPress användare som mig är det väldigt bekvämt att installera ett tillägg. Sök på xml-sitemap i wordpress och installera tillägget, aktivera och generera din sitemap.

Ett vanligt problem kan vara att WordPress inte har ”tillstånd” att skriva i din ftp, gör då såhär:

Skapa en .txtfil och spara den som sitemap.xml och sitemap.xml.gz
Ladda upp dessa filer till roten av din site
Sätt permission till 777
Försök att generera en sitemap från ditt WP-tillägg igen

Update !

Samma procedur går att genomföra med världens näst största webbplats, som också är en sökmotor. Registrera dig på Yahoo!

CSS: Pseudo-class

Nicklas — Sat, 28 Feb 2009 14:50:54 +0000

I detta tutorial ska jag visa lite av möjligheterna med pseudo-classer. De används för att lägga på specialeffekter på speciella element.

Som standard definieras länkar ofta som blå, fula och understrukna. Vi ska försöka hitta CSS verktyg som kan hjälpa oss att styra detta. Standardlösningen på problemet är ofta att man söker på internet och hittar en kodsnutt som klistras in i huvudet på html-dokumentet, utan att egentligen veta vad man gör.

De vanligaste pseudo-classerna är de som styr hur länkar ser ut. Jag ska gå igenom hur de och first-child typen fungerar.

Syntax

selector:pseudo-class {property:value}
selector.class:pseudo-class {property:value}

Exempel

p .text:first-child {font-family: monospace}
#rightcolumn a:hover {text-decoration:underline}

Kommentar

Man använder alltså kolon (:) för att specificera vad man vill applicera sina parametrar på.

Länkar

Pseudo-classer för länkar används oftast i följande varianter:

:link
:visited
:hover
:active

Exempel

a:link {color: #000000}
a:hover{color: #CCCCCC}

Alla ankarlänkar, dvs. kommer att vara svarta. När du drar musen över dem kommer de att ändra färg till ljusgrå.

Viktigt

hover ska komma efter :link och :visited
pseudo-classer är inte skriftlägeskänsliga (abcd = ABCD)

First-child

First-child används för att endast sätta parametrar för det första blocket av de som används. Detta kan ofta användas i listor som man vill ska vara symmetriska. Säg att du har en lista där du vill att varje list-objekt ska ha en border över och under texten.

Om du väljer att använda samma CSS på alla objekt i listan kommer den att bli assymetrisk. Detta eftersom du får dubbla borders mellan varje objekt, men enkla längst upp och längst ner i listan.

Du kan lösa ovanstående problem genom att använda first-child.

Exempel

HTML:

Ägg

Mjöl

Socker

CSS

li {
border-bottom: 1px solid #000;
}
li:first-child {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

Det övre listobjektet kommer nu ha border både uppe och nere, de övriga objekten kommer endast ha en nedre border.

Viktigt

För att first-child ska fungera i IE måste du deklarera dokumenttyp.

Vektorgrafik (tracing)

Nicklas — Fri, 06 Feb 2009 15:30:30 +0000

I följande tutorial går jag igenom en process för hur man lätt kan göra om fotografier till vektorgrafik. Tillslut ger jag vektorgrafiken en touch i Photoshop.

Jag använder mig av Adobe Illustrator för att avbilda fotografiet. Självfallet fungerar tekniken inte bara för fotografier utan kan också vara inspirerande vid framtagning av logotyper med mera.

1. Välj ett foto

Här har jag tagit ett från stranden sommaren 2008.

2. Börja tracing

Välj pennverktyget i illustrator, sätt punkter och dra i linjerna så att du får dina objekt där du vill. Kontroll-klicka på synlighetsikonen som visas brevid dina lager för att få lagrena i ”outline mode”.

Skapa olika lager för ansikte, mun, näsa och glasögon (eller vad det nu kan vara).

Att hantera pennverktiget är svårt i början, du lär dig allt eftersom. Använd P för att byta till pennan, A för att flytta dina punkter och shift+C för att redigera lutning om du inte får till det direkt.

3. Färgläggning

Skilj på dina objekt genom att ge dem olika färger. Att välja färger är svårt, ett bra förslag är att göra egna paletter innan du börjar färglägga med dina slutgiltiga färger. Gör till exempel en gradient på en rektangel där du kan plocka olika toner på hudfärg, läppar, glasögon etc.

Gå in på Colorlovers för inspiration.

4. Meshverktyget

Ett alternativ till att sitta och traca väldigt många skuggor och tilldela opasitet, är att använda mesh-verktyget för att få djup. Den mesh (rutnät) som du skapar genom att klicka ut punkter är den som kommer att ange färgerna till ditt projekt.

Verktyget utgår ifrån hur kanterna på ditt objekt ser ut, du kommer alltid behöva dra lite i trådarna för att lägga dem på rätt ställe.

Färglägg genom att välja punkter med A och sedan välja pipetten (I) och peka på en färg från din palett. Färgerna från punkterna du väljer kommer att tonas till färgerna som andra punkter har. För att få tydliga linjer måste du alltså pressa ihop punkter närmare varandra.

5. Färdig för PS

När du är nöjd med din bild kan du exportera den till Photoshop i olika delar. Jag valde att exportera själva huvudet för sig för att sedan kunna lägga en glow-effekt på det.

Jag vet, läpparna är lite väl ”rosa” men jag tycker att det gav en ganska ball effekt till skillnad mot en kallare färg.

6. Färdigt

Släng in dina objekt, lägg på effekter, lägg in en bakgrund, logotyp och vad du nu kan komma på. Jag tycker att resultatet blev helt okej.

Att kommentera är håret. Jag lade inte ner någon större tid på det, men om du vill så kan du välja att antingen traca från ”hårtovor” ner till hårstrån i Illustrator, alternativt om du har en ritplatta kan du pyssla lite i Photoshop.

jQuery: Del 3 – Dragspel

Nicklas — Wed, 21 Jan 2009 16:42:28 +0000

På senaste tiden har jag pysslat en hel del med jQuery. I mitt förra tutorial utlovade jag ett enkelt och dynamiskt dragspel (eng. accordion).
Följande tutorial är ett bra alternativ till den som vill göra något snyggt utan att behöva överarbeta.

Dragspelet kommer att vara fullständigt justerbart (bakgrunderna på panelerna, typsnitt etc.).

Dragspel

Demo

Exempel_dragspel.

CSS

.dragspel {
font-weight: bold;
width:300px;
border-width: 1px;
border-style: solid;
border-color: #000;}
h1 {
background-color:#666;
margin:0px;
padding:4px;
font-size:16px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;}
h1:first-child {
border-style: none;}
.aktiv {
background-color:#CCC}
p {
padding:20px;}

Förklaring

Jag väljer att skapa några klasser som ska styra utseendet på dragspelet.
classen .dragspel ska innehålla headings och p-taggar.
.aktiv kommer att ändra bakgrundsfärg på den flik som är aktiv.

HTML

H1

jQuery

$(document).ready(function(){
$(”.dragspel h1:first”).addClass(”aktiv”);
$(”.dragspel p:not(:first)”).hide();

$(”.dragspel h1″).click(function(){
$(this).next(”p”).slideToggle(”fast”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”aktiv”);
$(this).siblings(”h1″).removeClass(”aktiv”);
});
});

Förklaring

Vid initiering, övre delen: vi lägger på aktiv-classen på det första h1-elementet och gömmer alla p-element, förrutom det första!

Vid klick, undre delen: vid klick på ett h1-element som ligger i .dragspel ska nästa p-element (i förhållande till det h1-element som klickas) slideToggla, dvs åka upp om det är nere och vise versa. Övriga synliga p-element (siblings) ska glida uppåt (därmed stänga en flik).
Det klickade h1-elementet ska också Toggla classen aktiv, och därmed byta bakgrund. Classer på övriga (siblings) h1-element ska raderas.

Modifiering

Ändra bakgrund lätt genom att ändra bakgrunden för h1 och för aktiv.
Storleken på dragspelet justerar du genom att ändra på .dragspel.
Ändra animeringshastigheter genom att ändra på ”fast” och ”slow”. Andra inställningar är ”normal” eller antalet millisekunder som till exempel en sekund, 1000 (OBS! utan fnuttar).

Kommentarer

Att skriva kod ovan från scratch kan givetvis vara både svårt och förvirrande i början, men det släpper efter ett tag. Läs hur andra gjort och försök förstå koden!

jQuery: Del 2 – Inledning

Nicklas — Tue, 20 Jan 2009 20:49:40 +0000

I föregående del gjorde vi de förberedelser som krävs för att börja använda jQuery. Om du inte läst igenom det, gör det här.

I denna del ska jag gå igenom lite grundläggande kodsnuttar så att du får en smak av hur koden ska byggas. Det är inte svårt och det går snabbt eftersom det mesta redan är inbyggt i .js filen du länkat som source.

Från och med nu skall all kod placeras mellan kommentarsraderna i ditt dokument (om inget annat specificeras). Gör alla exempel genom att klistra in koden och ladda upp till din server, observera vad som händer och läs vidare. Detta för att du ska få lite känsla för jQuery.

Exempel 1 – meddelande

Demo

Exempel_1.

Kod

$(”a”).click(function(event){
alert(”Tack för ditt besök!”);
});

Vad händer?

a anger vilket objekt som ska påverkas av kod, i detta fall standardtaggen a (länk).
.click berättar att funktionen som följer exekveras vid musklick (på givet objekt).
alert är ett event som visar en ruta med texten Tack för ditt besök!.

Exempel 2 – lägg till class

Demo

Exempel_2.

Kod

Börja om på nytt, rensa innehållet mellan kommentarstaggarna i din jQuery-kod.

Infoga följande i -delen av ditt dokument (som en vanlig klass):

Infoga nu detta innanför kommentarstaggarna:

$(”a”).addClass(”fet_text”);

Vad händer?

Vi pekar på adressen/objektet a.
.fet_text fungerar som en vanlig class
addClass lägger till classen fet_text till alla a-taggar.

Exempel 3 – filtrera classer

Demo

Exempel_3.

Kod

Lägg in detta i jQuery:

$(”a”)
.filter(”.filter_1″)
.click(function(){
alert(”You are now leaving the site.”);
})
.end()
.filter(”.filter_2″)
.click(function(){
$(this).hide();
return false;
})
.end()

Byt länkarna i html-koden mot följande:

nthDesign
Google!

Vad händer?

Vi arbetar på alla a-taggar.
.filter väljer ut vilka classer vi kodar för.

Resterande kod fungerar ungefär som tidigare. Notera att koden är uppdelad i två delar, där vi först anger egenskaper för a-taggar med classen filter_1, avslutar med .end() och repeterar för classen filter_2.

Sammanfattningsvis

Nu har du förhoppningsvis fått lite kött på benen vad gäller jQ, …

I nästa del av min jQuery-serie kommer jag att visa ett mer avancerat tutorial. Vad sägs om ett dynamiskt dragspel (accordion) i AJAX?

Slut: Del 2 – inledande kodning

Fortsättning: Del 3 – dragspel

jQuery: Del 1 – Börja

Nicklas — Mon, 19 Jan 2009 18:54:51 +0000

Som jag nämnt i tidigare inlägg finns ett litet framework-tillägg som kallas för jQuery. Använd det för att skapa AJAX-objekt, smarta animationer och mycket mer. Sköt designen av din sida och låt jQuery stå för grovjobbet!

Nu ska jag beskriva hur du ska börja för att komma igång med jQuery och alla möjligheter som skeppas med. Det kommer att vara ett tutorial i flera delar. Jag tänkte börja med att berätta hur du installerar jQuery och vilken kod du måste infoga i ditt dokument för att magin ska börja.

Ladda hem jQuery

Det krävs absolut inte mycket arbete, det är bara en fil att hålla reda på. Du laddar hem den här.

Det finns i två ”versioner”, en komprimerad (Compressed) och en okomprimerad (Uncompressed).

Välj att ladda hem den komprimerade, då den okomprimerade är till för de som vill förstå hur jQuery fungerar.

Kod

Skapa ett html-dokument med följande kod:

NthDesign

ändra sedan src=”jquery-1.3.min.js” så att den är relativ till den javascriptfil du laddade hem från jQuery.com. Kolla namnet noga, det kan näligen skilja sig mellan olika utgåvor.

Ladda upp innehållet på din server, och du är redo att börja koda.

Och nudå…?

Koden som ska åstadkomma det du vill kommer att hamna mellan de två kommentarerna. Det du nu har infogat är själva ”skalet” av jQuery. Koden aktiveras efter att dokumentet laddats och är därmed redo för interaktion med besökare.

I nästa del kommer jag att gå igenom några kommandon för bland annat css, vänta och se, det är enkelt!

Slut jQuery: Del 1 – Börja

Fortsättning:Del 2 – jQuery inledande kodning