Etikettarkiv: javascript

Snabbaste webbläsaren

Ajax gör det möjligt för webbläsarna att ladda nytt material till sidan utan att hela sidan laddas om. Detta gör att surfupplevelsen blir trevligare och smidigare, men det ställer också krav på att webbläsarna hanterar javascript på ett bra sätt. Användandet av Ajax breder ut sig fort, t ex använder vi oss av en rejäl dos i Loopias nya kundzon, och därför kan prestandaskillnaden bli stor beroende på vilken webbläsare du använder.

Tidigare har Apple Safari och Google Chrome varit de främsta fartmonstrena gällande javascript, men nu kliver den norska uppstickaren Opera om i fartracet – betaversionen av Opera 10.5 tar täten. Den senaste versionen av Firefox (3.6) hanterar också javascript acceptabelt, men den största webbläsaren, Microsoft Internet Explorer, liknar en sengångare i jämförelse. Ytterligare ett argument att överge Windows-tillverkarens internet-utforskare.

Här kan du se resultatet av en mätning som Computer World gjorde i mitten av februari (lägre värde är bättre):

Vi gör fler och fler av våra sysslor direkt i molnet (som det så populärt kallas), och det gör att vi också kommer att ställa högre krav på den webbläsare vi använder. Du som aldrig provat en annan webbläsare än den som var installerad när du fick datorn kan vinna mycket på att ladda ner och prova några alternativ. Alla ovanstående webbläsare är gratis, och finns för Windows och Mac, utom Internet Explorer som bara finns för Windows. Utöver dessa finns det dessutom massor andra webbläsare med unika funktioner och egenskaper för speciella önskemål.

Vilken webbläsare använder du idag och varför?

Dela: Facebooktwittergoogle_pluslinkedinmail

En arbetsvecka med Safari 4 Beta

I början av förra veckan släpptes beta-versionen av Safari 4, Apples egna webbläsare. Som alla vet är Apple synonymt med design och marknadsföring. Följaktligen meddelade man att de största nyheterna med Safari 4 är att man nu får en 3D-vy över ens mest välbesökta webbplatser när man öppnar en ny flik, samt att man kan bläddra bland sina bokmärken i Cover Flow, precis som på ens iPod, iPhone, iTunes, [insert any product name that starts with an ”i” here].

Cover Flow

Detta är ju trevligt, men det är också funktioner som är kul att se en, två gånger, sen stänger man av dem och börjar surfa. Så vad finns det för verkliga nyheter i Safari som man faktiskt har praktisk nytta av? Detta är min högst subjektiva lista från de fem första dagarna med Safari 4 Beta som standardläsare.

FlikarPrecis som i Google Chrome har webbsidesflikarna flyttats till fönstrets översida och namnlisten på programmet tagits bort. Detta gör att ytterligare skärmyta frigjorts till förmån för hemsidesinnehåll, mycket trevligt på ett datorsystem som inte anammat konceptet fullskärmsläge.

Inbyggd Google-sökning med automatisk föreslagning av sökord.

Bättre sökning i adressfältet. Borta är dropdown-listen, nu får man istället riktigt rapp hjälp med potentiella adresser när man börjar skriva in önskad URL.

Som gammal Firefox-användare är det skönt att man nu kan hoppa mellan tabbar med Ctrl-Tab istället för Kommando-Shift-Pil.

För oss som designar webbsidor och lagt till Develop-menyn (aktiveras under Advanced-fliken i inställningarna) så finns nu massor av uppdaterade godbitar i Safaris Web Inspector, något som jag direkt hade nytta av när vi felsökte lite JavaScript i bloggen och då enkelt kunde exekvera JavaScript-funktioner direkt från Web Inspectorns kommandotolk. Dessutom finns det finfina verktyg för debugging och profiling av JavaScript och inspektion av element i ens HTML-kod (ungefär som en vackert designad version av Firebug för Firefox).

Web Inspector

För de som gillar webbstandarder (och vem gör inte det?) så är det kul att äntligen se en officiell version av en webbläsare som helt och hållet klarar av Acid3-testet (vad är det?). Nedan (från vänster till höger) ser vi som jämförelse Firefox 3.0.6, Google Chrome, Internet Explorer 8 Beta och Opera 9.63 och så sist men inte minst Safari 4 Beta.

Acid3 i andra webbläsare

Acid3 i Safari 4 BetaPrecis som Firefox 3 har Safari nu full page zoom, dvs om du zoomar in eller ut på en sida så är det inte bara texten som påverkas, utan hela sidan zoomas korrekt utan att den trasas sönder av ”felaktig” storlek på text. Precis som det ska vara med andra ord.

Enligt Apple exekverar Safari 4 Beta JavaScript sex gånger snabbare än IE8 och fyra gånger snabbare än Firefox 3.1 och det märks att den är riktigt rapp – skönt.

Finns det då något som jag inte gillar med den nya versionen av Safari? Ja, av någon anledning pajjar kontrollpanelen i WordPress (2.7.1) när man ska lägga till en länk i sitt inlägg, något som funkade utmärkt i gamla versionen av Safari, men jag förväntar mig en fix när som helst. 🙂

Har du provat 4:an? Något du tycker jag glömt tagit upp här ovanför eller har du andra synpunkter på Safari? Dela med dig bland kommentarerna.

Dela: Facebooktwittergoogle_pluslinkedinmail

Snälla, stjäl vår DNSSEC-kod

I vårt förra inlägg här i bloggen berättade vi om finn.no:s upprop att få alla IE6-användare att byta ut sin webbläsare för att på så vis driva utvecklingen av webben framåt.

I samma anda vill vi nu slå ett slag för DNSSEC. Om du DNSSEC-säkrar din .se-domän så vet dina besökare att de slipper bli drabbade av elakheter såsom DNS cache poisoning. Tyvärr är det dock som så att vissa Internet-leverantörer och vissa undermåliga nätverksprodukter ännu inte stödjer DNSSEC.

DNSSEC är en nödvändighet för ett säkrare Internet och därför är det också nödvändigt att alla Internet-leverantörer och tillverkare av nätverksutrustning stödjer standarden.

Vår DNSSEC-kontroll på loopia.seHjälp oss upplysa alla Internet-användare om vad DNSSEC är, betydelsen av DNSSEC och att de kan hjälpa till att påverka sina leverantörer med vår enkla DNSSEC-kontroll. Har du besökt loopia.se sedan slutet av förra året har du säkert använt den ett flertal gånger (du hittar den i vår meny till höger).

Allt du behöver göra är inkludera denna JavaScript-fil i din webbsida och lägga till ett antal div:ar (se steg för steg-instruktioner nedan). En fullt fungerande webbsida som visar DNSSEC-statusen hittar du nedan (klicka här för att se resultatet):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Kontroll av DNSSEC</title>
	<meta http-equiv="Content-Type"
	 	 content="text/html; charset=utf-8">
	<script type="text/javascript" src="loopia_dnssec_test.js">
	 	 </script>
</head>
<body
	 onload="_loopia_dnssectest_startTest('loopia_dnssec_imagediv',
	 'loopia_dnssec_status_div');">
	<div id="loopia_dnssec_status_div" class="init">
		<h3>DNSSEC</h3>
		<p id="dnssec_info_init">
			Just nu kontrollerar vi om DNSSEC fungerar för dig.
		</p>

		<p id="dnssec_info_working" style="display: none;">
			Alla nätverksenheter från din dator till denna
			webbplats stödjer DNSSEC.
		</p> 

		<p id="dnssec_info_not_working" style="display: none;">
			Någonstans på vägen mellan din dator och denna
			webbplats finns någon produkt som INTE stödjer DNSSEC.
		</p>
	</div>
<div id="loopia_dnssec_imagediv"></div>
</body>
</html>

Allt du behöver gör är alltså följande:

  1. Ange <script type="text/javascript" src="loopia_dnssec_test.js"></script> mellan <head> och </head>-taggarna i ditt html-dokument.
  2. Lägg till onload="_loopia_dnssectest_startTest('loopia_dnssec_imagediv', 'loopia_dnssec_status_div');" i din <body>-tagg.
  3. Lägg till den tomma diven <div id="loopia_dnssec_imagediv"></div> innan </body>-taggen.
  4. Lägg till diven <div id="loopia_dnssec_status_div" class="init"> där du vill att DNSSEC-statusen ska dyka upp i ditt dokument.
  5. Innanför ovanstående tagg, lägg till element med nedanstående tre ID:
  6. dnssec_info_init: Visas medan DNSSEC-status kontrolleras.
  7. dnssec_info_working: Visas om DNSSEC stödjs för din besökare.
  8. dnssec_info_not_working: Visas om DNSSEC inte stöjds för din besökare.

Åtta långa punkter, men kikar du på koden ser du att det är lätt som en plätt.

Lycka till och tack på förhand för all hjälp! 😉

Dela: Facebooktwittergoogle_pluslinkedinmail

Apropå Cross-Site Scripting

Den här länken är till alla er som läste vårt förra inlägg och tänkte:

Det är väl inte så farligt om någon kan få mina gästboksinlägg att bli fetmarkerade, eller en JavaScript-popup med ordet Testar att hoppa upp?

Dagens läxa: Det är viktigt att validera all indata. Någon annan kan alltid tänka ut något elakare än du. 😉

Dela: Facebooktwittergoogle_pluslinkedinmail

Världens bästa påskpyssel med jQuery

Eftersom jag inte fick några kommentarer på min utmärkta SQL-skola så tänkte jag försöka hitta något lite mer hippt och inne att skriva om så här till påskhelgen. 😉

Vad passar då bättre än en artikel om det enormt härliga JavaScript-biblioteket jQuery som på egen hand gjort att klient-baserad programmering på webben har gått från att vara timtal av frustration och nya gråa hårstrån funna under varje kaffepaus, till att frammana mentala bilder av guld, rökelse och myrra.

För att göra det hela ännu roligare så tänkte jag visa hur man på ett enkelt sätt kan använda jQuery för att göra AJAX-baserade sökningar mot en webservice som vi lagt upp så att ni har något att testa mot.

För att använda jQuery så börjar man med att lägga till följande kodsnutt i <head>-sektionen av sitt HTML-dokument:

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

En av de fina sakerna med jQuery är alla plugins man kan nyttja. I vårt fall kommer vi använda en plugin som heter jquery.suggest, vilken kräver att man också inkluderar jquery.dimensions.js från jQuery UI, som är ett underprojekt som tillhandahåller en rad med användbara komponenter för att bygga användargränssnitt, så vår kodsnutt för att inkludera allt godis ser ut som:

<link rel="stylesheet" type="text/css"
   href="/js/jquery/jquery.suggest.css" title="" media="screen" />
<script type="text/javascript"
   src="/js/jquery/jquery-1.2.1.min.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.ui-1.0/jquery.dimensions.js">
</script>
<script type="text/javascript"
   src="/js/jquery/jquery.suggest.js">
</script>

För att sedan göra om ett sökfält som har id=”domainsearch” och finns någonstans på vår sida till en AJAX-sökruta så använder vi följande kodsnutt:

$(document).ready(function() {
   $("#domainsearch").suggest("/search.php", {
      onSelect: function() {
         domain = this.value.replace(/^([^:]*):.*$/, "$1");
         status = this.value.replace(/^[^:]*:\s*(.*)$/, "$1");
         if (status == "ledig") {
            document.location.href =
               'https://www.loopia.se/bestall/bestalldoman/'
                  + domain;
         }
      }
   });
});

Detta exempel visar två koncept som är viktiga i jQuery. Först och främst så är det en bra vana att man lägger till den funktionalitet som man vill utöka sidan med på formen:

$(document).ready(function() {
   ... användbar funktionalitet här
});

När man gör på detta sätt så körs inte koden förrän sidan är helt färdigladdad, vilket oftast är önskvärt.

Det andra konceptet som visas upp är användandet av jQuery’s selector-funktionalitet för att välja vilka element som en eller flera funktioner ska appliceras på.

I detta fallet väljer vi att applicara funktionen suggest() på alla element som matchar (med CSS-syntax, se fullständig dokumentation här) #domainsearch, vilket betyder ”alla element med id satt till domainsearch”.

Funktionen suggest (vilket är vad jquery.suggest lägger till) tar en URL som ska anropas med XMLHttpRequest i bakgrunden samt ett antal parametrar, en av vilka är onSelect. onSelect anger vilken JavaScript-funktion som ska anropas när användaren har valt en rad ur sökresultatet.

Sökresultatet består av utmatningen från den anropade URL:en. Utmatningen ska ha en sökträff per rad.

Vi väljer att returnera sökresultat på formen:

doman.se:  ledig
doman.com: upptagen
doman.nu:  ledig

… och anger sedan i onSelect-funktionen att man ska skickas till vår beställningssida med domänen förvald om man väljer en ledig domän från sökresultaten.

För att mata denna lilla kodsnutt med data så använder vi oss av följande PHP-kod (sparad som search.php):

<?
   try {
      $client = new
         SoapClient('http://ws.loopia.se/LoopiaPublicServices.wsdl');

      $results = $client->search_domain_popular_tlds($_GET['q']);
         if ($results && count($results) > 0) {
            foreach ($results as $result) {
               if ($result->result == "FREE") {
                  echo $result->domain . ": ledig\n";
               } else {
                  echo $result->domain . ": upptagen\n";
               }
            }
         }
      } catch (Exception $e) {
         // Ignore exceptions, this simply means that no
         // results will be echoed to the user.
      }
?>

Ni kan ladda ned ett fullständigt exempel som bör fungera om ni bara packar upp det och laddar upp det i public_html för en domän eller subdomän hos oss.

Exemplet hittar ni också på http://sigint.se/.

Vad kan man mer göra med jQuery då? Ett vanligt användningsområde för JavaScript är att dölja och visa element när användaren gör något, t ex klickar på en knapp.

Istället för att böka med kod som:

var element = document.getElementById('someid');
if (element != null) {
	element.style.display = "none";
}

… och kämpa för att sedan få den att fungera i alla moderna webbläsare så använder man istället:

$("#someid").hide();
$("#someid").show();
$("#someid").toggle();

… med mera.

På så sätt kan man naturligtvis även använda andra selectors som t ex för class och mycket annat användbart.

Så gott som alla funktioner i jQuery, inklusive de ovan, returnerar ett nytt jQuery-object – så det går bra att kedja anropen om man vill göra flera saker med samma element. T ex:

$("#someid").fadeIn("slow").fadeOut("slow");

Vi har inkluderat lite test-animationer i exempelfilen ovan.

Hoppas att detta gett er lite kul inspiration att leka med över ledigheten.

Glad påsk!

Dela: Facebooktwittergoogle_pluslinkedinmail

Säg ja till Google

SEO, Search Engine Optimization, sökmotorsoptimering, sökmotorsvänlig hemsida och länkutbyte (link exchange). Vad är det som avses egentligen med sådan uttryck?

Sammantaget är det olika sätt för att komma högre upp på sökningar hos exempelvis Google.

Om man rådfrågar olika experter om hur man optimerar sin sida gällande just SEO kommer man troligtvis få många vitt skilda svar eftersom det inte är någon exakt vetenskap och dessutom väldigt mycket beror på vad man har för hemsida och resurser att lägga. Företag som aktivt sysslar med sökmotorsoptimeringar försöker på olika sätt få reda på hur sökningar görs hos populära sökmotorer, men de företag som erbjuder sökmotorer, exempelvis Google, är lika ivriga med att förbättra och förändra sökmotorerna för att se till att kvaliteten på sökningen bibehålls och att inte fel sidor får bra placeringar. Exempelvis Google ”straffar” dessutom hemsidor som enligt dem använder fula knep för att få högre placeringar genom att helt eller delvis plocka bort dem från deras sökbara index.

Det jag tänkte gå igenom här är generella riktlinjer man kan ta hänsyn till när man uppdaterar sin hemsida, men vill man ha mer specifika förslag gällande sin hemsida bör man vända sig direkt till ett av de företag som erbjuder sökmotorsoptimering av hemsidor.

Den åtgärd som är absolut enklast att göra är att sätta rätt titlar och beskrivningar på sidorna. I vår kunskapsdatabas har vi beskrivit de vanligaste inställningarna.

Att notera gällande just nyckelord (keywords) är att man ska använda enbart ett fåtal ord och jag rekommenderar att man väljer ut två eller tre ord som är specifika för just den sidan man gör. Även beskrivning (description) ska man vara försiktig att skriva för mycket text i då en rad i princip ska vara tillräcklig som sammanfattning för sidan.

Gällande ALT-inställningen på bilder skall detta inte heller utnyttjas för att få med extra sökord utan det ska vara ett kortare uttryck som beskriver bilden som presenterats. På länkar skall man se till att titlar och länkinformation korrekt avspeglar vad det länkar till och specifikt undvika generella begrepp som ”Klicka här” och ”Läs mer”.

Tillhandahåll helst en översiktsida (Sitemap) av alla sidor på din webbplats eftersom det förenklar möjligheten för sökmotorn att hitta och indexera alla sidor snabbare, särskilt om sidan följer ett visst format. En kortfattad information om Sitemap hittar du även i ett av våra tidigare blogginlägg.

Undvik allt vad flash-hemsidor innebär. De må vara vackra och lättnavigerade, men sökmotorer kan inte indexera flash-filer *. Sökmotorer ser enbart en text-version av din hemsida och tar bort även JavaScript och kommentarer. Det fokuseras alltså på den texten som syns på sidan för att få en korrekt representation om vad besökaren kan tänkas vara intresserad för. Om man därför gör sidan bättre anpassad för användande av textläsare och andra verktyg som normalt används av de med synsvårigheter, exempelvis Braille-terminal som blinda kan använda, förbättrar man även möjligheten för sökmotorer att indexera sidan. Undvik helt att använda table för annat än just tabeller (listningar), istället bör CSS används. W3C har sammanställt en hel del riktlinjer om just användarvänlighet som de kallar för Web Accessibility Initiative (WAI).

Om du använder Firefox finns dessutom tillägget Fangs som försöker presentera sidan som en textläsare skulle se den.

En bok som ofta rekommenderas när det diskuteras hemsidors användarvänlighet är Understanding Accessibility från HiSoftware.

P3P (Platform for Privacy Preference Project) är en annan sak som man bör ta hänsyn till även om det inte direkt hör till sökmotorsoptimeringar. Det är ett sätt att beskriva hur man hanterar integritet på hemsidan men används oftast när man behöver komma ihåg en besökares val mellan olika sidor med hjälp av kakor (cookies). Jag känner inte till någon sökmotor som i dagsläget använder sig av den informationen för att påverka placeringen, men det är oavsett en bra sak att tillhandahålla.

På Wikipedia finns mer information om vad kakor (cookies) är.

Till ens hemsida ska man välja ett bra domännamn som både är besökarevänligt (det ska gå att berätta i telefon) samt att det gärna ska vara sökmotorvänligt. Som sökmotorer ser det separeras ord med bindestreck, så om man har ett domännamn biltvätt.com och någon söker på bil tvätt kanske placeringen blir något lägre än om domännamnet hade varit bil-tvätt.com, men det motsatta är också en möjlighet. Alternativet här är att registrera flera alternativa domännamn som på ett korrekt sätt innehåller de sökord som man vill använda sig av, men jag rekommenderar att man är försiktig här. Ett fåtal domännamn kan säkert hjälpa upp placeringen om man ställer in dem rätt, men man bör absolut inte registrera alla sökord som man kan tänka sig.

Att tänka på är att alla domännamn förutom huvudsidan måste använda en permanent omdirigering (HTTP-status 301) till huvudsidan för att sökmotorer inte ska anse att sidorna konkurrerar om samma utrymme och istället minska huvudsidans placering. I vår LoopiaDNS-tjänst stödjer vi i dagsläget inte permanent omdirigering och inte heller för parkerade domännamn i Loopia Kundzon, men man kan skapa det genom att lägga till domännamn med hemkatalog på UNIX-server och sedan ställa in det med en .htaccess-fil:

RewriteEngine On
RewriteRule .* http://www.loopia.se/%1 [R=permanent,L]

Länkning till ens hemsida är dock mer viktigt när det gäller placeringar då sökmotorer anser att en populär och användbar sida också blir länkad ofta. Undvik dock länkfarmning (en sida med enbart massor med länkar) och intern länkning (samma person, företag eller organisation har flera hemsidor som länkar till varandra) då det har missbrukats och exempelvis Google straffar sådant med mycket sämre placering. En del som sysslar med sökoptimering rekommenderar att man sprider ut hemsidor på olika ip-adresser för att de ska undvika att klassas som intern länkning, men så vitt jag vet räcker inte det utan man behöver ha hemsidor hos olika Internettjänsteleverantörer med egna AS-nummer för att helt undgå den risken. Det jag snarare rekommenderar är kontakta andra företag och organisationer i samma eller liknande bransch och höra om det går att utbyta länkar och information. Notera dock att utbytet ska gynna båda lika mycket för att den man ska kontakta ska acceptera länkutbytet. Det gäller alltså att hemsidan ska vara välbyggd ochuppdaterad med information som kan tillföra något till andras webbplatser.

När någon länkar till ens huvudsida gäller det också att det blir rätt länkat. Om länkningen görs med någon av ens nyckelord som titel kommer sökningar på det nyckelordet lite högre än vad det annars skulle vara. Skillnaden mellan …

<a href="http://kallejohan.example.org">
   Tvättsvamp via kallejohan i Västerås
</a>

… och …

<a href="http://kallejohan.example.org">
   kallejohan
</a>

… kan vara avgörande om man säljer tvättsvamp. Också här gäller att det ska vara korrekt överensstämmande och inte använda sig av generella beskrivningar som ”Klicka här” naturligtvis.

Apropå uppdaterad gillar sökmotorer generellt en sida som är uppdaterad och aktuell, så ofta är det att en blogg eller nyhetsbrev får högre placering på sökmotorer än företagets huvudsida. Tillbakalänkning från bloggen och nyhetsbrev är något som jag absolut rekommenderar, men främst är naturligtvis att hålla hemsidan uppdaterad och aktuell.

Lite länkar som kan hjälpa dig med just ditt hemsidesarbete:

* Vissa sökmotorer som Google kan indexera text från .swf-filer. Dock är detta väsentligt mer begränsat än indexering av webbsidor baserade på HTML och CSS.

Dela: Facebooktwittergoogle_pluslinkedinmail

Firefox-plugins för utvecklare

Webbläsaren Firefox är hemsidebyggarens bästa vän. Med sin närmast oändliga mängd insticksprogram finns det en hel del godbitar du bör känna till. Nedan listar jag mina absoluta favoriter – ett gäng ”must haves” för alla som vill effektivisera sitt arbete, eller bara få en djupare förståelse av hur en hemsida är uppbyggd.

HTML Validator

Ladda hem.

002-html-01.pngFör att din hemsida skall fungera problemfritt i både dagens och framtidens webbläsare så måste den validera – dvs följa W3Cs standarder, varav en av de viktigaste är HTML. Ett enkelt sätt att kontrollera detta är med insticksprogrammet HTML Validator. Varje gång du besöker en sida så kontrollerar den huruvida koden är korrekt och visar dig resultatet med en liten ikon i webbläsarens nedre högra hörn. Dubbelklicka på ikonen för att få fram källkoden och markeringar om eventuella fel.

Web Developer

Ladda hem.

Insticksprogrammet Web Developer erbjuder dig en hel flora med smarta funktioner för att undersöka hur hemsidor är uppbyggda och hur de beter sig. Bland annat låter den dig validera JavaScript, ändra webbläsarens fönsterstorlek till vanliga skärmupplösningar, markera ut HTML-objekt när du för muspekaren över dem, visa sidan utan CSS, utan bilder eller utan JavaScript, stänga av cookies och mycket, mycket mer.

Firebug

Ladda hem.

002-firebug-01.pngFirebug låter dig inspektera och i realtid editera din HTML-kod, CSS-kod och JavaScript direkt genom webbläsaren. Bland annat kan föra muspekaren över en hemsidas element och direkt få fram den del i HTML-koden som byggt upp det elementet, med tillhörande CSS-inställningar. Gillar du inte vad du ser kan du ändra koden och direkt se resultatet. Felsökning deluxe och ren magi.

Dela: Facebooktwittergoogle_pluslinkedinmail