Vad är jQuery?

november 24, 2010 § Lämna en kommentar

jQuery är världens mest använda javascript bibliotek. Ett bibliotek som sparar tid åt utvecklare. I den här artikeln kommer jag att gå igenom vad som gör jQuery så kraftfullt.

För att kalla på ett HTML element behöver man bara använda sig av dollartecknet $.

För att kalla på exempelvis <body> så skriver jag $(‘body’).

Man kan också kalla på klasser och ID. Det görs på samma sätt. Vi tänker oss att jag i min html kod har <p class=”newstyle”>. För att kalla på klassen i jQuery så använder jag: $(‘.newstyle’)        <–notera punkten som står för klass

För att kalla på ett ID så gör man på samma sätt. <div id=”greenbg”>. För att kalla på det skriver jag $(‘#greenbg’).

Man kan också göra en så kallad ”action” på varje element man har valt. För att ta ett exempel: $(‘valtElement’).on(click, function(){console.log($this)}). Den functionen returnerar elementet som vi klickade på. I det här fallet är ”.on” en action.

Samlingsnamnet actions består av många olika grupper. En grupp kallas ”traversals”. Här finns en lista över traversals: http://api.jquery.com/category/traversing/ Dessa hjälper oss att hantera element.

En annan grupp kallas ”manipulation”. Den hjälper till att manipulera elementet. Här finns den listan. http://api.jquery.com/category/manipulation/

För att lägga till html text inom body taggar med jQuery. Skriv: $(‘body’).html(‘<p>Brödtext skrivs här</p>’).

Med selectors så väljer vi ut mer precist vilket element vi vill jobba med. Här finns det stöd för CSS3. Här är listan över selectors. http://api.jquery.com/category/selectors/

För att t.ex välja ut första <p> elementet skriver man: $(‘p:first’).
För att skapa en animation så kan vi skriva såhär:
$(‘#knappattklicka’).click(function() {
$(‘#ettannatelement’).animate({
opacity: 0.25,
height: ‘toggle’
}, 5000, function() {
// Animation complete.
});
});
Den animerar elementet genom att sänka opacity till 25%, och sedan använder den ”toggle”. Toggle används för att visa eller dölja element.

Annonser

HTML5 Javascript API

november 23, 2010 § Lämna en kommentar

HTML5 har en hel del nya funktioner. Nyheterna finns inom HTML, CSS och naturligtvis JavaScript. Den officiella versionen av HTML5 specifikationen sägs att inte bli helt färdigutvecklad förrän 2022.

Majoriteten av JavaScript-funktioner som beskrivs närmare är redan genomförda i moderna webbläsare (t.ex. Sarafi, Chrome, Firefox, Opera). Även Internet Explorer fått möjlighet att göra canvas och andra grejer (antar vi använder ExplorerCanvas eller Chrome Frame).
Ta en närmare titt på vad som kommer att göra ditt liv enklare:

Hur många gånger har du undrat varför det finns getElementById, getElementsByTagName, men inte getElementByClassName? Nya JavaScript API löser detta problemet:

var element = document.getElementsByClassName (‘dagbok’);

Dessutom finns det nu möjlighet att hämta element på ett nytt sätt:
var elements = document.querySelectorAll(”ul li:nth-child(odd)”);
var first_td = document.querySelector(”table.test > tr > td”);

Web Storage (sessionStorage, localStorage)

Cookies har vissa nackdelar. Som W3C sade:

1. Om webbplatsen använder cookies för att hålla koll på vilken biljett användaren köper, när användaren då klickar mellan olika sidor i windows, skulle biljetten som blev köpt ”läcka” från de ena fönstret till det andra, möjligtvis skulle ett dubbelköp kunna uppstå för samma biljett och flygning utan att personen lade märke till något.

2.
Webbapplikationer kan vilja spara flera megabyte av data på klient sidan, till exempel för ett färdig skrivet dokument eller en användares mailbox. Cookies hanterar inte det här bra. Eftersom det baseras på varje begäran.

Såhär gör man för att rädda data varje gång en tangent blir tryckt:
textarea.addEventListener(‘keyup’, function () { window.localStorage[‘value’] = area.value; window.localStorage[‘timestamp’] = (new Date()).getTime(); }, false); textarea.value = window.localStorage[‘value’];

Vad är canonical och hur används det?

november 22, 2010 § Lämna en kommentar

Canonical är en html tagg som hjälper google att indexera din hemsida. Den förhindrar dubbletter och för er som är kända med robots.txt så verkar det på samma sätt.
Läs mer om Canonicals på den här sajten: http://www.lindqvist.com/spotlife-canonical-fail/

Kolla statistik över sökmotor, webbläsare eller skärmupplösning.

november 22, 2010 § Lämna en kommentar

Vilken sökmotor, webbläsare eller skärmupplösning är populärast? Om du vill ha svaret så har Statcounter alla svar. Gå in och kolla här: http://gs.statcounter.com/
Det här är statistik som hjälper webbutvecklare dagligen.

Mer om sökmotoroptimering

november 21, 2010 § Lämna en kommentar

Ibland roar jag mig med att sitta och titta på hur många dåliga hemsidor det finns idag. Många företag annonserar fortfarande väldigt mycket i tidningar och reklamutskick. Mina kollegor och jag brukar sitta och få oss ett gott skratt när vi skickar sidor till varandra. Det finns så många storföretag där ute som ligger efter sin tid.

Ett exempel på företag som har stigit enormt i ranking sedan förändring av sin hemsida är http://www.dinsko.se. Första intrycket är mycket dåligt eftersom den är uppbyggd i flash. Men någon förstod att de är viktigt att produkterna inte är inbakade i grafik. Utan att det också faktiskt står i html text.
Tidigare var hela sidan gjord i flash. Inte nu längre och detta med positivt besked, hemsidan är nummer 6 vid en sökning på skor.

Några viktiga saker att tänka på vid sökmotoroptimering är:

* Google kollar vad du har emellan <title></title> taggen . Försök att beskriva ditt företag samtidigt som du tänker på vilka sökord som är optimerat för din hemsida.
* Att både ha med ”description” och ”keywords” i <meta> taggen. Försök att tänka på vilka sökord som du vill ha besökare ifrån. Det sägs att google inte använder ”keywords” taggen. Men följ W3C standard och använd den ändå.
* Se till så att orden du har med i ”description” och ”keywords” finns med i din naturliga text under html taggar som <h1>, <h2>, <strong>, <b> och <p>.
* Densiteten i nyckelord är viktiga. Därför bör nyckelorden upprepa sig i texten. Duktiga skribenter bör alltså avstå deras konventioner.
* Glöm inte att beskriva bilden med hjälp av alt=” ” under <img>  taggen. Det här hjälper google att hitta bilder.
* Undvik flash. Även om text i flash kan tas upp av googles sökmotor så är det inte optimalt. Mycket i flash tolkas bara som grafik och därför struntar man i det.
* Undvik Javascript till länkar. Använd bara vanliga HTML länkar som <a></a>.
* Fixa en sitemap. Det kan du göra här: http://www.xml-sitemaps.com/
* Fixa en robots.txt. Även om text filen är tom. Läs mer här: http://www.robotstxt.org/
* Se till så att ingen länk är lik den andra.
* Ta bort dold text. Det fungerar inte att försöka lura sökmotorer med dold text.
* Om många andra hemsidor har en länk till din sida så påverkar det din page-ranking positivt. Det är en anledning varför man skall använda sociala medier och länka till sin hemsida.

Betydelse av sökmotoroptimering

november 21, 2010 § Lämna en kommentar

För att driva en framgångsrik e-handel så krävs det spetskompetens inom sökmotoroptimering. Det börjar bli en av nycklarna för att föra ett framgångsrikt affärskoncept på internet.
Jag tänker ta upp hur du blir framgångsrik genom sökmotoroptimering och internet marketing. Men först måste betydelsen av sökmotoroptimeringen tas på allvar.

Det finns stora företag som inte förstår det viktiga i att ha många besökare till sin hemsida. Det är gratis marknadsföring.
Om vi tänker oss ett stort företag som inte bedriver e-handel utan bara fokuserar på butiker. För att få människor att komma till butiken så läggs det ner massor med pengar på annonsblad, utskick, digital reklam och andra reklam kampanjer.
Ett mycket enkelt marknadsföringsknep är att ta in 1 kunnig person som kan driva in trafik till hemsidan genom enkel sökmotoroptimering.
För att ta ett bra exempel på någon som hittills har misslyckats: Nille.no (Ett stort Aktiebolag i Norge som bedriver försäljning genom butiker)
De har 310 butiker i hela Norge och en hemsida som Nille.no är kapabel att ha minst 10 000 besökare i månaden. Det är ett snitt på drygt 32 personer per Nille butik. Ett rimligt mål att sätta upp.

Att ligga i toppen på listan över den mest besökta hemsida i Norge skulle inte vara något problem för en så stor koncern. Om de har en kunnig marknadsansvarig som hänger med i tiden.

För att kolla hur många besökare Nille drar in från http://www.google.com. Besök: http://www.semrush.com/info/history/index.html?domains[]=nille.no&gtype=1&db=us

Jag har använt http://www.largestcompanies.se för att kolla upp de största bolagen i Norge. Nilles rang i Norge (inkl. dotterbolag) efter netto-omsättning är 581.

Att Nille AS blev utsett till årets retailer 2009 av reklame- og designbransjen är bara ytterliggare ett tecken på hur dåligt ställt det är i Norge angående relativt billig och effektiv marknadsföring på webben – Sökmotoroptimering.
Anledningen att de fick priset kan vara att Nille är ett av få bolag som har börjat blogga med hjälp av facebook och twitter. Där ligger det absolut rätt i tiden. Det är också en viktig del av sökmotoroptimering och marknadsföring.

För att förstå varför Nille är ett sådant bra exempel så måste man få en förklaring hur google fungerar. Google gillar sidor(pages). En sida bör ha en egen URL för att få klassas som ”sida”. Att ha många sidor är en av nycklarna till att komma högt upp på google. Om man har många indexerade sidor hos google så har man större möjlighet att ligga i topp. För att ha många sidor så krävs det också många produkter, vilket alla stora företag har.
Det kan därför vara svårt för nystartade e-handelsföretag att etablera sig på internet. En tänkbar lösning för småföretag är att sälja in sin produkt hos en av de stora e-handelsaktörerna. Det genererar inte lika mycket pengar, men det skapar omsättning.
För att ta ett exempel på ett stort fel Nille har gjort. Titta på den här länken: http://www.e-magin.se/v5/viewer/files/viewer_s.aspx?gKey=13t99fk2&gInitPage=1
Det där är en katalog som innehåller 12 sidor men som inte indexeras av google. På varje sida så finns massor med produkter. Men ingen av produkterna tas upp av googles sökmotor.
Varför tas det då inte upp i sökmotorerna undrar ni?
Kolla igen på länken. Den leder till en hemsida som heter http://www.e-magin.se. Den genererar ingen trafik till Nille.no från sökmotorer.
Om den hade funnits på nille.no så hade den inte heller genererat mycket trafik. Eftersom sidan är gjord i Flash. Google tycker inte om att söka igenom flash. För att en del av innehållet i flash är grafik istället för text. Google kan inte sortera ut vad som är text på en bild t.ex.
Här har de alltså 12 sidor i flash. Ingen av dessa kan sökas igenom av google eller för den delen indexeras hos google. Därför kan ingen produkt hittas av google.
Dubbelfel blir inte ett rätt.
En liknande effekt hade kunnat uppnås med Javascript, HTML och CSS. Då hade sidorna registrerats och funnits med på en sökmotor.
Andra stora delar av Nilles hemsida är också gjord i Flash.

Syns man inte så finns man inte.

Rita din egen HTML5 canvas

november 13, 2010 § Lämna en kommentar

För er som är intresserade av att rita en egen HTML5 canvas bild så finns det en hemsida som tillåter er att göra det.
Ni hittar den här: http://mrdoob.com/projects/harmony/

Var befinner jag mig?

Du tittar för närvarande i arkivet för november, 2010Tobiasboman's Blog.

%d bloggare gillar detta: