Ett av de mest använda ramverken till Javascript är, som ni kanske redan vet, JQuery. Det är inte bara otroligt lätt att använda utan det är också lätt att installera tillägg till som utökar dess funktionalitet. Det är just ett sådant tillägg jag skall demonstrera; Flot!

Flot är ett tillägg som gör det väldigt lätt att presentera data på ett visuellt sätt i ett diagram. Perfekt för att presentera statistik, budget eller säljsummor.

Html-strukturen

Det är inte mycket Html som behövs för att använda Flot, endast ett div-element som man skall hänvisa till i Javascriptet. Detta div-element måste dock ha en höjd och bredd satt. Exempel på det:

<div id="my-diagram" style="width:400px;height:200px;"></div>

Enkelt exempel

Detta exempel är ytterst primitivt och skall demonstrera hur man initierar grafen samt hur datan skall vara strukturerad så tillägget kan ta emot informationen.

Vi kan se att diagrammet presenterar en linje byggd av två punkter. Den första punkten har x-värde 0 och y-värde 1, och den andra har x-värde 1 och y-värde 0.

Härnäst ser ni koden för detta diagram.

var data = [ {label: "Beskrivning", data: [ [0, 1], [1, 0] ]} ]; var options = { yaxis: { max: 1 } }; $.plot($("#my-diagram"), data, options);

I variabeln ”data” hittar vi en lista (array) med objekt, där varje objekt representerar en linje som skall presenteras i diagrammet. Varje linje har i sin tur en etikett (label), samt en lista med information över varje punkt som jag talade om tidigare.  Det första värdet för en punkt representerar x-axeln och det andra värdet representerar y-axeln.

Diagrammen har en mängd olika inställningar som gör det möjligt att exempelvis ändra x-axelns värde till datum. Eller varför inte ändra hela upplägget på diagrammet så att det presenterar information i staplar istället.

Slutligen

Flot ger er möjligheten att på ett lätt sätt presentera information för era besökare så de snabbt får en visuell bild. Detta tillägg är något jag personligen använt en hel del, både privat och för MediaAnalys, och kan rekommendera!

Av MediaAnalys

Man kan jämföra en webbadress med en vanlig gatuadress som folk hänvisas till då de vill komma på besök. Om personen som bodde på gatuadressen skulle flytta så är det också viktigt att denne talar om att en flytt har skett samt var besökarna nu istället skall söka om de vill komma på besök.

När sökmotorernas robotar söker igenom internets alla sidor, fungerar webbadressen inte bara som en lokator utan också som unik identifierare. För att få en bild över hur denna indexering ser ut så kan man se webbadressen som en unik id-referens. Precis som om man byter gatuadress i verkligheten, flyttar helt enkelt, så är det viktigt att man berättar för omvärlden om en sida får en ny webbadress. Detta kallas att man pekar om besökaren (redirect).

Det finns like olika metoder att peka om en besökare och vilken som skall användas kan skiljas från fall till fall. Om ni har skapat webbsidan själv har ni förhoppningsvis fulla rättigheter till filerna på servern och då också koden på serversidan om ni utvecklat webbsidan lite mer dynamisk, vilket öppnar upp bättre möjligheter.

1. Om ni har tillgång till filerna på servern kan ni lägga till en ”.htaccess”-fil eller modifiera er befintliga. Lägg då till följande rad:

   Redirect 301 /den-gamla-adressen.html http://www.ny-url.se/ny.html

   …eller…

   RewriteRule ^gammal\.html$ http://www.ny-url.se/ny.html [R=301,L]

2. Tycker ni att det skulle passa bättre med att serverkoden skall sköta ompekningen så kan ni i PHP skriva följande:

   <?php header( "HTTP/1.1 301 Moved Permanently" ); header( "Status: 301 Moved Permanently" ); header( "Location: http://www.ny-url.se/" ); exit(0); ?>

   Jag går inte igenom alla språk här och nu, utan jag hänvisar er då till er favorit-sökmotor.

3. Skulle det vara så att ni råkar använda er av bloggverktyget WordPress så kan jag rekommendera följande plugin: http://wordpress.org/extend/plugins/redirection/
4. Om ni använder annat CMS-system kan det vara så att det redan finns möjlighet att peka om användaren. Läs i hjälpmanualen eller kontakta er närmsta support för mer information.

Av MediaAnalys

Det två olika metoder man kan använda sig av som förhindrar översättningen. En som skall användas när det finns specifika sektioner med text på sidan, till skillnad mot den andra som fungerar hindrar hela sidan från att bli översatt.

Klassnamn

När ni vill hindra en specifik sektion från att bli översatt är det lika lätt som att lägga till en ny klass på det specifika elementet. Rättare sagt så är det precis vad man skall göra… class=”notranslate”

Exempel

<div class="text"> <p>You can translate me.</p> <p class="notranslate">You cant translate me!</p> </div>

Meta

Om ni vill hindra översättning på hela sidan så finns det en smidigare metod med hjälp av ett meta-element. Elementet måste inkluderas i head-sektionen på er sida, då det fungerar mer som en inställning på hela sidan.

Det blir exempelvis extremt enkelt att hindra översättning på hela webbplatsen (alla sidor på er hemsida) om ni använder ett CMS-verktyg som tillåter er att inkludera information i head-sektionen.

Exempel

<meta name="google" content="notranslate">

eller

<meta name="google" value="notranslate">

Slutligen

Om ni vill läsa mer om ämnet kan ni göra det här: http://googlewebmastercentral.blogspot.se/2008/10/helping-you-break-language-barrier.html

Av MediaAnalys

Detta var något jag bestämde mig för att göra. Jag spenderade en del tid med att hitta färdigskrivna tillägg, men fann dock att en del var föråldrade och många hade inte möjligheten att ändra HTML-strukturen, utan att sätta sig in i dess PHP-kod allt för mycket. Jag bestämde mig snabbt för att bygga ett eget.

Konstruktion

Steg 1 – Lokalisera informationen

Första steget var att ta reda på vilka möjligheter det fanns att ta emot informationen från Twitter. Det var bland det lättaste att ta fram, då man kan erhålla sitt Twitter-flöde via ett RSS-flöde som genereras dynamiskt.

Testa själv:
http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxx
(byt ut ‘xxxx’ mot ditt användarnamn)

Steg 2 – Hämta informationen

WordPress är inte bara ett bra bloggverktyg för användarna utan det är också ett relativt bra ramverk för utvecklarna. För när vi skall hämta informationen från RSS-flödet så använder vi en funktion i ramverket som mer eller mindre skickar tillbaka flödet som en Array. En Array som vi sedan loopar igenom och skriver ut dess informationen.

Funktionen heter ”fetch_feed” och tar emot adressen till RSS-flödet i en parameter för att sedan skicka tillbaka en Array med respektive inlägg.

Exempel:

$rss = fetch_feed("http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=dennissangmo");

Steg 3 – Formatera informationen

Jag valde att endast presentera de 5 senaste flödesinläggen på min sida och använder mig därför av metoden ‘get_items(0,5)’. De 5 senaste raderna loopar jag sedan igenom så de kan formateras inför utmatning:

function simple_twitter_feed() {$rss = fetch_feed("http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=dennissangmo"); foreach($rss->get_items(0, 5) as $item){ $link = prepare_link($item->get_link()); $title = prepare_title($item->get_title()); $date = prepare_date($item->get_date( 'U' )); echo "<h3><a href='$link' rel='nofollow'>$title</a></h3> <p class='fp-blog-meta'>Skrevs den $date</p>"; }}

Länken, titeln och datumet formaterar jag, som ni kan se, i andra funktioner.

Jag kommer inte gå djupgående var ‘prepare_link‘-funktionen gör, mer än att den ser till så att ”http” finns först i adressen, den escapas och trimmas. Mer eller mindre.

function prepare_link($link){ while ( stristr($link, 'http') != $link )$link = substr($link, 1); $link = esc_url(strip_tags($link)); return trim($link); }

Om ni kollar i ert RSS-flöde igen så kanske nu lägger märke till att alla titlar börjar med ert namn. Detta är kanske inte något man vill presentera på sin hemsida. Därför filtrerar jag bort detta i ‘prepare_title‘-funktionen:

function prepare_title($title){ $title = esc_attr(strip_tags($title)); $pos = strpos($title, ': '); $title = substr($title, $pos +2); return trim($title); }

‘prepare_date’-funktionen gör inget speciellt häftigt. Den strukturerar upp html-kod för datumet om det finns.

function prepare_date($date){ if ( $date ) { return ' <span class="rss-date">' . date_i18n( get_option( 'date_format' ), $date ) . '</span>'; }return ''; }

Steg 4 – Presentera resultatet

Jag valde att presentera denna koden som en widget i WordPress, så flödet lätt skulle kunna placeras i sidpanelen eller på annan valfri position.

function stf_init(){ register_sidebar_widget('Simple Twitter Feed', 'simple_twitter_feed'); }add_action("plugins_loaded", "stf_init");

WordPress har en funktion som heter ‘add_action‘ som talar om att det finns en funktion som skall köras, samt när denna funktionen skall köras. I detta fallet så skall ‘stf_init’-funktionen köras när tilläggen laddats. ‘stf-init’-funktionen registrerar i sin tur vår tidigare nämnda funktion till att vara en widget i WordPress.

Steg 5 – Spara och testa

Koden sparades ned i en fil och placerades i WordPress tilläggs-mapp. Den kommer då att inkluderas i WordPress automatiskt så det ‘add_action’-anropet vi skrivit körs.

Administrationen av widgeten görs sedan i ”Widgets” valet under ”Utseende” menyn, efter att det har aktiverats i tilläggs menyn.

Av MediaAnalys

Det första man kan göra är då att ta reda på lite mer om varför konkurrenten rankar bättre än dig. Studera deras sidor och lägg märke till saker som titlar, rubriker, textinnehåll, struktur med mera. Du kan hitta mycket information om vad som är bra och mindre bra att göra i tidigare inlägg i denna bloggen. Var inte rädd för att härmas lite, uppenbarligen gör de något rätt. Var dock noga med att inte använda samma text eller design som dina konkurrenter, dels för att det kan bli problem med upphovsrätt och dels för att sökmotorer gillar unika texter. Saker som menystruktur, sid-layout och hierarki kan vara saker som du kan inspireras av.

När du gjort alla förbättringar som är möjliga på din sida är det dags att ta en titt på dina konkurrenters yttre signaler. Med detta menas främst länkar, men även varumärkesspridning och liknande är mycket viktigt. Om Google hittar många texter om ditt varumärke eller namn på nätet kommer det att ge en fördel i sökresultaten.

När det gäller länkar finns det gott om verktyg på nätet där du kan göra efterforskningar. De största och bästa är Open Site Explorer och Majestic SEO. Båda dessa erbjuder begränsade gratistjänster som man ändå kan få ut mycket bra information ifrån. En viktig faktor är antalet domäner som man får länkar ifrån och vilken auktoritet dessa har. Här kan du enkelt göra en bedömning om du behöver satsa på att skaffa fler inlänkar eller om det kanske är andra faktorer som spelar större roll.

När man talar om länkar nuförtiden är det viktigt att även räkna in sociala signaler, främst länkar från Twitter och Facebook. Antalet verktyg för att mäta detta är lite mer begränsat, men till exempel Shared Count get oftast en bra överblick hur det ligger till.

När du gjort dessa undersökningar brukar det vara lättare att bedöma vad som är viktigast för dig att förbättra så att din sida klättrar i resultaten.

Av MediaAnalys

Men hur behandlar Google dessa mobilanpassade sidor?

Googlebot-Mobile
Google har en ‘web crawler‘ utöver deras vanliga ‘Googlebot‘ vid namn ”Googlebot-Mobile” som har i uppgift att fokusera sig på sidor som är mobilanpassade. Den gör detta genom att identifiera sig som en smartphone i förhoppning om att få ett anpassat innehåll presenterat.

Om ni lägga märke till att en sådan ‘web crawler‘ har besökt Er sida så skall Ni behandla den som vilken annan handhållen enhet.

Smart ompekning
Ni har säkert hört uttrycket ‘cloaking‘ tillsammans med order katastrof i samma mening, vilket det också borde. Men hur är det då med de mobila enheterna? Låt oss säga att Ni har skaffat Er en mobilanpassad hemsida och ser till att alla besökare med en mobil enhet blir ompekade till denna mobilanpassade sidan automatiskt. Detta räknas inte som ‘cloaking‘ i Googles ögon! Så länge Ni presenterar samma innehåll för dina mobila besökare och ”Googlebot-Mobile” så kommer ni inte straffas av ‘cloaking‘.

I december 2011 så gick Google ut med en ny funktion som underlättar för användarna på mobila enheter. De kallar funktionen ”Skip Redirect”. ”Skip Redirect” har i uppgift att presentera den mobilanpassade sidan istället för originalsidan i sökresultatet när en användare på en mobilenhet utfört sökningen. Detta kommer dock endast ske när originalsidan pekar om de mobila enheterna (och då också vår kära vän ”Googlebot-Mobile”) till den mobilanpassade sidan.

GOMO
Om ni vill få er nuvarande sida värderad i hur bra användare på mila enheter upplever er sida så finns ett perfekt verktyg från Google.

http://www.howtogomo.com/en/#test-your-site

Av MediaAnalys

Google har gjort det mycket lätt att inkludera en knapp på din hemsida, de har till och med lagt ut ett verktyg för att hjälpa dig som du hittar här: Google Plus Button

Där väljer man enkelt storlek och funktionalitet på sin knapp och får fram källkod som man kan klistra in på sin sida. Ett typiskt exempel kan se ut så här:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone></g:plusone>

Detta ger en liten smidig knapp som ser ut så här.

Nu erbjuder Google även en hel del extra möjligheter att justera din knapp. Det första man bör göra är att lägga till en url, så att man är säker på vilken sida man använder. Detta gör man genom att lägga till attributet href i knappen, så här:

<g:plusone href="http://www.exempel.com"></g:plusone>

Som standard visas en liten pratbubbla bredvid knappen som visar hur många som klickat på knappen innan. Vill man inte visa detta, om man till exempel har många sidor som visar noll,  använder man argumentet annotation, som kan vara antingen none eller inline. Om man använder none visas inget och om man använder inline visas lite mer information.

<g:plusone annotation="none"></g:plusone>

JavaScriptet som inkluderas kan laddas asynkront för att sidan ska laddas snabbare. Då byter man ut scriptet ovanför knappen mot följande kod:

<script type="text/javascript"> (function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

Denna kod lägger man med fördel i slutet av sidan, strax innan </body> för att undvika fördröjningar i sidvisningen.

Du kan läsa mer om alla möjligheter som finns på Googles sida för utvecklare.

Av MediaAnalys

För något år sedan blev en av MediaAnalys äldre bloggar hackad. Det var en gammal WordPress-blogg som blivit lite bortglömd och inte uppdaterad på länge, så någon elak virusspridare hade utnyttjat ett säkerhetshål för att lägga in skadlig kod på sidan.

Vi upptäckte detta ganska snabbt, men tyvärr inte snabbare än Google. När den dök upp i sökresultatet fanns en varningstext och när man surfade in på den med fick man upp en stor röd varningssida om att sidan spred virus och var osäker. Lyckligtvis var ju detta en blogg som vi inte använde längre, så skadan var ganska minimal för oss. I ett par fall har dock några av våra kunder råkat ut för samma sak och då är ju läget desto värre.

Hur gör man då för att ställa allt till rätta igen? Det första man måste göra är naturligtvis att fixa sin hemsida. Sidor som blivit hackade brukar ändras på ett par olika sätt.

1. JavaScript inlagt i slutet av (alla) sidor. Denna metod innebär att en liten snutt kod läggs till i slutet av många, eller alla, html-filer på webbservern. Oftast är den skriven på ett sätt som försöker dölja vad som egentligen sker i scriptet, men i övrigt är denna metoden lätt att upptäcka och fixa. En enkelt sök och ersätt på alla filer brukar fixa problemet.
2. Extern JavaScript importeras. Här läggs en diskret <script> till någonstans på sidan, ibland i <head> men inte alltid. Även detta problem brukar kunna fixas med en sök & ersätt på alla filer.
3. Utseendet på sidan har ändrats. Ibland vill den som hackat sidan bara skryta om hur skicklig denne är och byter till exempel ut startsidans text mot ett meddelande. Denna text består vanligtvis av hackarens ”nick”, alltså hans smeknamn, och vilket ”team” han tillhör. ”Team” betyder en grupp av hackers som tävlar med andra grupper om vem som är bäst. Oftast kan man fixa hemsidan genom att återställa en backup av hemsidan, men man bör göra en grundlig undersökning om hur sidan hackats och sedan täppa till detta säkerhetshål.
4. Spam-texter inlagda på sidan. En del skumma typer inom SEO-världen kan ibland använda ett fult knep genom att hacka en oskyldig hemsida, lägga upp en massa spam-text och länkar till sin egen sida. Oftast är dessa texter inte omedelbart synliga på sidan, så det kan ta ett tag innan man upptäcker dem. Här får man ofta gå in manuellt på varje sida och rensa bort skräptexten, eftersom den oftast skiljer sig från sida till sida.

Ok, när man väl fixat till sin sida, hur säger man till Google att man gjort det? Jo, man skickar en så kallad ”reconsideration request” via Google Webmaster Tools. Detta är ett gratisverktyg som Google erbjuder där man kan få tips och information om problem med sin hemsida. Allt man behöver är ett Google-konto, sedan registrerar man och verifierar sin hemsida i Webmaster Tools. Sedan kan man enkelt skicka en reconsideration request.

I sin förfrågan ska man sakligt förklara vad som hänt och vad man gjort för att fixa det. Alla förfrågningar gås igenom manuellt av anställda på Google, så ibland kan det ta upp till ett par veckor innan ditt ärende behandlas, men sedan bör det inte vara några problem att få varningarna på din hemsida att försvinna.

Av MediaAnalys

Vad har detta med autentiseringen att göra? Om man inte vill gå miste om de användarna som inte har ork eller lust till att fylla i ett registreringsformulär så kan det vara en god ide att låta dessa logga in via deras Google-konto.

Jag kommer inte gå igenom några kodexempel utan endast förklara, med ”lätta” ord, vad som händer när en användare loggar in via Google. Det kan dock hända att jag går igenom det praktiska i framtiden och då med kodexempel.

Det fundamentala

Google är en av de konto-tillhandahållarna som erbjuder autentiseringsmöjlighet enligt OpenId standarden.

Vad som egentligen händer mellan användaren och webbapplikation är att webbapplikationen öppnar upp en dörr mellan användaren och Google. All information som passerar denna dörr kan inte webbapplikationen ta del av.

Vadå för dörr, vad pratar du om? Ok, det tekniska som sker vid denna typ av autentisering är att användaren skickas till Googles servrar och du som utvecklare kan då inte komma åt den information som användaren anger.

När användaren sen har loggat in, eller nekats, blir denne tillbakaskickad till webbapplikation. Webbapplikationen får i detta samband också reda på hur det gått för användaren och då ta ställning till vad som skall hända med användaren.

I och med att användaren skickas till Googles servrar så blir autentiseringen inte bara enkel utan också till en säker process.

Om ni vill läsa mer om denna teknik så finns det såklart dokumenterat. Federated Login for Google Account Users

Av MediaAnalys

Jag blev lite nyfiken på om denna sorts spam verkligen kunde fungera, så jag gjorde en snabb sökning på en del av texten i kommentaren. Detta är vad jag hittade: http://goo.gl/Elh6E

Flera miljoner träffar! Det betyder att denna spamkommentar har skickats och godkänts av bloggar flera miljoner gånger under flera år. Namnet på kommentarsskrivaren är alltid ett eller flera sökord som länkar till mer eller mindre suspekta hemsidor.

Detta är ett problem på främst två sätt. Först och främst ser det inte bra ut för vanliga besökare som ofta lärt sig att känna igen spamkommentarer och ser dem som irriterande störningar.

För det andra kan din hemsida bli straffad eller sandboxad av sökmotorerna om sidan de länkar till sysslar med brottslig verksamhet, pornografi, hasardspel eller andra skumraskaffärer.

Hur gör man då för att undvika dessa kommentarer? En bra start är att installera anti-spamfunktioner som Akismet eller liknande på din blogg. Akismet finns tillgängligt för många olika plattformar och är helt gratis. Allt du behöver göra är att registrera dig och få en auktoriseringskod som du sedan anger i den plug-in du använder.

Ett annat tips är att inte automatiskt acceptera kommentarer. WordPress har till exempel en funktion som låter dig manuellt godkänna en besökares första kommentar och sedan automatiskt godkänna efterföljande kommentarer från samma person. Detta är en bra kompromiss som ger både en grundsäkerhet och enkelhet i hanteringen av kommentarer.

Det är också en bra idé att ställa in så att du får ett mail varje gång en ny kommentar skrivs så att du alltid håller dig uppdaterad om vad som skrivs på din blogg.

Av MediaAnalys