Jag bloggar numera på http://blog.dileno.com ».

Prenumerera på RSS

Arkiv för Webbutveckling:

Typekit ute för att revolutionera typografi på webben?

Typekits loggaDet har länge varit ett problem att använda sig av vilket teckensnitt som helst på webben och samtidigt bibehålla användarupplevelsen på ett bra sätt.

Detta innebär att man har varit begränsad till ett antal webbsäkra teckensnitt, eller varit tvungen att använda sig av Flash-tekniker som sIFR för att presentera en typografi som är något utöver det vanliga.

Detta kan nu vara ett minne blott! Med Typekit ska man kunna nyttja vilket teckensnitt som helst på webben, genom att inkludera ett JavaScript och sedan peka ut sitt teckensnitt. Mycket intressant, helt enkelt.

Läs blogginlägget från gänget bakom Typekit: Introducing Typekit

Så skriver du ut HTML i Flash med WriteRaw-metoden

Man vill ofta att Flash-filmer ska vara flexibla och hämta data från en dynamisk XML-fil. När man jobbar med Flash och XML kan man dock stöta på problem vad gäller HTML-formatterad text som ska hämtas från en XML-fil.

Jag har tidigare skrivit om hur du skriver ut HTML-kod som ligger i XML-block. Det man gör är att använda sig av CDATA och bädda in HTML-kod i CDATA-blocket. Det fungerar dock inte alltid.

I mitt fall byggde jag en ashx-handler som returnerade XML-data. En del av XML-datan skulle vara HTML-formaterad text som skulle visas i Flash-filmen. Jag använde mig av XmlWriter och WriteCData-metoden i ASP.NET för detta ändamål - precis som man ska - men HTML-formateringen i Flash-filmen uteblev och i stället renderades alla taggar tillsammans med texten.

Efter en stunds testning kom jag fram till att man kan använda sig av WriteRaw-metoden i stället. Exempel:

_xmlWriter.WriteStartElement("slide");
_xmlWriter.WriteStartElement("message");
_xmlWriter.WriteRaw("<p>Test:</p><ul><li>First item</li></li>Second item</li></ul>");
_xmlWriter.WriteEndElement();
_xmlWriter.WriteEndElement();

Notera att det är viktigt att XML-datat är korrekt formatterat och validerar när du använder dig av WriteRaw-metoden. Annars är risken för problem överhängande.

Använd kanoniska adresser och hjälp sökmotorer indexera rätt

På Internet finns idag mängder av duplicerat innehåll, det vill säga samma innehåll som finns på flera olika ställen på samma webbplats (och olika webbplatser med). Vad gäller exempelvis bloggar så finns samma sida ofta i en kategori för bloggen och även på en egen sida. E-handelswebbplatser brottas också med problemet. Det skapar problem för sökmotorer och är inte speciellt SEO-vänligt. Det är här kanoniska adresser (canonical url:s) kommer in!

Kanoniska adresser till räddningen

Med hjälp av kanoniska adresser kan du nu bestämma vilken adress som är standardadressen, den kanoniska adressen, för ett specifikt innehåll på webbplatsen. Detta gör du genom att använda dig av ett nytt link rel-attribut: canonical.

Lägg till det nya link rel-attributet i <head> på sidan med adressen du vill ska indexeras av sökmotorer - så här:

<link rel="canonical" href="http://blogg.dileno.com/arkiv/200812/dags-att-borja-blogga/" />

Läs mer om kanoniska adresser i Googles Webmaster-blogg.

Så skriver du ut HTML-kod som ligger i XML-block

Ibland måste man ha HTML-kod i XML-block för att formattera text som ligger i XML-block och ska visas på en webbsida. Jag visar dig två metoder som kan spara tid för dig - och samtidigt skriva ut HTML-kod som ligger i XML-block korrekt.

CDATA

Du kan använda dig av CDATA-blocket för att bädda in HTML-kod i ett XML-element. Då startar du CDATA-blocket med <![CDATA[ och avslutar med ]]>. Så här:

<Address>
<![CDATA[
Kungsgatan 7
<br />SE-11343 Stockholm
<br />Sverige
]]>
</Address>

Entiteten för start- eller slut-taggen

Om det inte fungerar att använda sig av CDATA så kan du i stället skriva ut entiteten för start- eller slut-taggen. < blir då &lt; och > blir då &gt; Så här:

<Address>
Kungsgatan 7
&lt;br /&gt;SE-11343 Stockholm
&lt;br /&gt;Sverige
</Address>

Så hämtar du alltid en sida från servern i stället för cachen

Vill du att en sida alltid ska hämtas från servern och aldrig ska cachas i webbläsaren så är det lätt att stöta på problem. Jag visar dig hur du löser problemet för samtliga webbläsare.

Enbart meta-taggar fungerar inte

Jag tänkte lösa det genom att använda två meta-taggar - men det fungerade först inte alls, och sedan inte i alla webbläsare.

Dessa meta-taggar fungerar inte i om du vill att en sida alltid ska hämtas från servern (både IE7 och Firefox hämtar från cachen i stället):

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />

När jag upptäckte att det inte fungerade så försökte jag i stället att lägga till no-cache på serversidan i Response-headern och som cache-direktiv. Det fungerade i Internet Explorer 7, men inte i Firefox.

Lösningen för att alltid hämta sidor från servern

Det som behövs är att även använda Response.Cache.SetNoStore, så slutar sidan att cachas i samtliga webbläsare.

Den kompletta lösningen:

Response.AddHeader("pragma","no-cache");
Response.CacheControl = "no-cache";
Response.Cache.SetNoStore();

Skapa en modifierad knapp i TinyMCE

TinyMCE är en texteditor som är enkel att integrera in i webbapplikationer. Det finns mycket goda möjligheter till att anpassa editorn efter eget tycke. I detta inlägg visar jag dig hur du skapar en knapp för att infoga specifik kod för markerad text i TinyMCE.

Jag ville ha möjligheten att markera text i ett formulärfält, trycka på en knapp i TinyMCE-fältet och förändra den markerade texten. I mitt fall ville jag kunna lägga in den markerade texten i <code>.

Använd avancerat tema och setup-alternativet

TinyMCE är väldokumenterat och jag hittade kod för att skapa en modiferad knapp. Det som behövs för att kunna skapa en egen knapp i TinyMCE är att i tinyMCE.init använda sig av avancerat tema och setup-alternativet, så här:

<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "advanced",
theme_advanced_buttons1: "codebtn,|,bold,italic,underline,strikethrough,|,bullist,numlist,undo,redo,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",

setup: function(ed) {
ed.addButton("codebtn", {
title: "Code sample",
image: "js/tiny_mce/themes/advanced/img/code.png",
onclick: function() {
ed.selection.setContent("<code>" + ed.selection.getContent() + "</code>");
}
});
}
});
</script>

Det jag gör i koden ovan är att:

  • skapa en knapp som heter codebtn
  • ge knappen ett antal egenskaper, såsom en titel, en ikon och en onclick-händelse
  • lägga till knappen i fältet theme_advanced_buttons1, så att knappen syns i TinyMCE-fältet

Metoder i TinyMCE och mitt resultat

I onclick-händelsen så fick jag leta i dokumentationen och hittade en sida med alla metoder i TinyMCE. Jag använde mig av metoden getContent för att lägga in markerad text i en <code>-tagg.

Resultatet av min modifierade knapp:

Exempel på en modifierad knapp i TinyMCE

Mer om TinyMCE

Du kan ladda ner och läsa mer om TinyMCE på hemsidan: http://tinymce.moxiecode.com/.

Lägg till din webbplats i Googles sökindex med Google Webmaster Tools

Du kan använda Google Webmaster Tools för att lägga till din webbplats i Googles sökindex. Googles verktyg innehåller även massa annat bra för att hålla koll och uppdatera data hos Google för din webbplats.

När man har startat en ny webbplats så vill man självklart att webbplatsen ska visas i sökresultaten på relevanta sökord hos sökmotorer - framför allt Google. Det kan ta ett tag innan sökspindlarna som sökmotorerna använder sig av hittar just din webbplats. För att snabba upp processen lite så kan du låta Google få kännedom om din webbplats via deras smidiga verktyg Google Webmaster Tools.

Lägg till din webbplats

För att kunna använda sig av Google Webmaster Tools behöver man ha ett Google-konto. När du väl skaffat dig ett konto och loggat in så kan du välja att lägga till en webbplats direkt på startsidan. Fyll i adressen till din webbplats och tryck på Add site:

Hur du lägger till din webbplats på startsidan i Google Webmaster Tools

När du lagt till din webbplats behöver du verifiera att webbplatsen är just din. Detta kan du göra på två sätt:

  1. Genom att lägga till en meta-tagg på din webbplats, så att Google kan läsa av meta-taggens innehåll
  2. Genom att ladda upp en html-fil med ett specifikt filnamn som Google ger dig

De olika verifieringsalternativen i Google Webmaster Tools

När du gjort något av ovanstående kan du verifiera att det är din webbplats du har lagt till. Om verifiering har lyckats kommer det att se ut så här under Overview för din nya webbplats:

Gröna ikoner visar att verifieringen av din webbplats har lyckats.

Ha tålamod - det kan ta tid att få din webbplats indexerad

Trots att du har lagt till din webbplats i Google Webmaster Tools betyder det inte att din webbplats är indexerad än. Det kan ta ett tag innan webbplatsen kommer med i Googles sökindex och ännu längre tid innan webbplatsen syns högt upp i relevanta sökresultat. Detta är det första steget man bör ta för att visa Google att det finns en ny webbplats att indexera.

Uppdatering: Denna blogg hamnade i Googles sökindex mindre än ett dygn efter att jag lagt till bloggen med Google Webmaster Tools.

Många nyttiga funktioner i Google Webmaster Tools

Google Webmaster Tools innehåller väldigt mycket mer än funktionen för att skicka in sin webbplats. Du kan även:

  • få statistik på sökord för din webbplats
  • få reda på när din webbplats senast indexerades
  • välja vad som ska indexeras på din webbplats
  • plus massa mer

Google Webmaster Tools är ett verktyg för att hålla reda på din webbplats och underhålla den vid behov. Att lägga till din webbplats till Googles index är alltså första steget som sedan leder till fler alternativ.

Google Webmaster Tools

Att skapa en favicon

En favicon är en ikon som representerar en webbplats. Vanligtvis visas ikonen till vänster om adressen i webbläsarens adressfält och kan även visas i menyer och bokmärksfält, för att identifiera en webbplats lättare.

Faviconen för denna blogg är ikonen till vänster om adressen i denna bild:

Favicon-exempel

Att tänka på när man skapar en favicon

  1. Ikonen ska vara 16x16 pixlar stor.
  2. Ikonen ska placeras i roten på din webbplats.
  3. Filändelsen bör vara .ico (moderna webbläsare stödjer även .gif och .png, men för bakåtkompatibilitetens skull så är .ico bäst att använda)

För att faviconen ska synas behöver man sedan lägga till följande i <head>:

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

Det finns ett alternativ, där man byter ut "shortcut icon" mot enbart "icon", men jag har upptäckt att "shortcut icon" fungerar i betydligt fler webbläsare.

Tips och ett verktyg

Ibland syns inte faviconen direkt när man laddar om webbsidan i webbläsaren. I så fall måste man rensa webbläsarcachen och starta om webbläsaren.

Ett bra verktyg för att skapa en favicon: http://www.favicon.cc/

Till sidhuvudet

Clicky Web Analytics