Anpassning av webbsidor för datorer och mobiltelefoner N I K L A S P R A G S T E N

Anpassning av webbsidor för datorer och mobiltelefoner N I K L A S P R A G S T E N Examensarbete Stockholm, Sverige 2008

Anpassning av webbsidor för datorer och mobiltelefoner N I K L A S P R A G S T E N Examensarbete i medieteknik om 15 högskolepoäng vid Högskoleingenjörsprogrammet för medieteknik Kungliga Tekniska Högskolan år 2008 Handledare på CSC var Björn Hedin Examinator var Roger Wallis TRITA-CSC-E 2008:011 ISRN-KTH/CSC/E--08/011--SE ISSN-1653-5715 Kungliga tekniska högskolan Skolan för datavetenskap och kommunikation KTH CSC 100 44 Stockholm URL: www.csc.kth.se

Sammanfattning Anpassning av webbsidor för datorer och mobiltelefoner Syftet med det här examensarbetet har varit att undersöka om man kan anpassa webbsidor till att passa både mobiltelefoner och datorer samtidigt. Idag finns det väldigt många webbsidor på Internet, men endast en bråkdel går att surfa in på med en mobiltelefon. Med en mobiltelefon kan surfvanorna komma att förändras då det nu går att få tillgång till webben var som helst och när som helst. Med 3G-teknikens större bandbredd kommer nya och spännande användningsområden att dyka upp. Frågeställningen är uppdelad i två stora delar: Går det att identifiera en anropande enhet på ett tillfredsställande sätt och få fram enhetens olika egenskaper? Vilka begränsningar finns det för header variables? Finns det flera sätt att identifiera en enhet samt få fram dess egenskaper?, samt Går det att anpassa webbsidor för både datorer och telefoner samtidigt? Är det bättre att ha helt dynamiska webbsidor, även om de blir väldigt komplexa, än två skilda? Vad skall göras med alla redan nu befintliga ej anpassade webbsidor på Internet? En litteraturstudie har gjorts där det undersökts vilka olika sätt det går att identifiera en enhet på. Ett sätt som är under utveckling är det med CC/PP-profiler. Dessa profiler liknar de UAProf som finns i dagsläget i WAP. Med hjälp av dessa kommer det i framtiden att bli enklare att både identifiera och få information om enheter. Det som är tillgängligt idag, förutom header variables, är WURFL. Detta är ett open source project där en databas skapats och alla mobila enheters egenskaper finns samlade. En genomgång är gjord över de olika sätt som idag finns för att få tillgång till webbsidor med hjälp av en mobiltelefon. De nya webbläsarna till mobiltelefoner som har kommit, anpassar webbsidor till den mycket mindre skärmen. Opera Mini är ett bra alternativ för den lite mindre kraftfulla mobiltelefonen. På telefonen redan befintliga WAP/XHTML-webbläsare kräver att webbsidan redan är anpassad för att den skall visas på ett hanterbarbart sätt. Ett sätt att skapa en anpassad webbsida är att göra den dynamisk, dvs anpassad för den enhet som anropar. Då vissa webbsidor är väldigt avancerade och därför kanske inte intressanta för en användare med en mobiltelefon, är det i dessa fall bättre att inte anpassa webbsidan för olika enheter. På en anpassad webbsida bör kanske inte all information finnas med då en mobiltelefon anropar. Detta därför att det kan bli oöverskådligt, för mycket information som laddas ner, för dyrt mm. Varje enskilt fall är speciellt och det är därför svårt att generellisera i vilken utsträckning en webbsida skall vara anpassad. En prototyp har skapats för att tydligt visa svårigheter och eventuella lösningsförslag. http://www.pragsten.se/cliff. I detta fall är hela webbsidan anpassad till både mobiltelefoner och datorer, detta då webbsidan har en enkel struktur och informationsmängden inte är för stor.

Abstract Adaption of webpages for computers and mobile phones The purpose of this project is to examine whether it is possible to adapt webpages to both mobile phones and computers at the same time. There are many webpages today on the Internet, but you can only use a mobile phone to a very limited number of them. Using a mobile phone, the habits of using the web will change when it s now possible to connect to the Internet everywhere and anytime. When using the wider broadband of the new 3G-technology, new exciting areas of usibility will arise. The question at issue is divided into two major parts: Is it possible to identify a requesting unit in a satisfactory way and achieve the units different attributes? What limits are there to HTTP header variables? Are there more ways to identify a unit and achieve its attributes?, and Is it possible to adapt webpages for both computers and mobile phones at the same time? Is it better to have completely dynamic webpages, even though they will be very complex, than two different? What can be done to all the non adapted webpages that already exist on the Internet? A literature study has been carried out where it is examined what different alternatives there are to identify a unit. One way still under development is with CC/PP-profiles. These profiles look like those in WAP already existing UAProf. With this help it will be much easier in the future to both identify and achieve information about units. What s accessible todady, except header variables, is WURFL. This is an open source project where a database is created and where attributes to every mobile unit will be accessible. A survey is made over the different ways there are today to surf webpages from a mobile phone. The new webbrowsers for mobile phones adapt webpages to the much smaller screen on mobile phones. Opera Mini is a good choice for the not so powerful mobile phone. The already installed WAP/XHTML-webbrowser demands an already adapted webpage to show it in a manageable way. One way to create an adapted webpage is to make it dynamic, i.e. adapted for the requesting unit. When many webpages are very advanced and therefore not interesting for a user with a mobile phone, in this case it is better not to adapt the webpage for different units. Sometimes on an adapted webpage all information shouldn t always be included when a mobile phone makes a request. The reason for this is it might be to messy, to much information to download, to expensive etc. Every uniqe case is special and it is hard to generalize in what extent a webpage should be adapted. A protoype has been created to show difficulties and possible proposals of solutions. http://www.pragsten.se/cliff. In this case the whole webpage has been adapted to both mobile phones and computers, thus the webpage has a simple structure and the amount of information is not too big.

Innehållsförteckning 1 Inledning...1 1.1 Bakgrund...1 1.2 Syfte...1 1.3 Problem...1 1.4 Avgränsning...2 2 Metod...3 2.1 Datainsamling...3 2.1.1 Protoyp...3 2.2 Informationens kvalitet...3 3 Webbläsare till mobiltelefoner...4 3.1 WAP och XHTML MP...4 3.2 Noname webbläsare...4 3.3 Small-Screen Rendering på mobilen (Opera)...5 3.3.1 SSR-funktionen...5 3.4 Small-Screen Rendering på servern (Opera Mini)...6 3.5 Smart-Fit Rendering på mobilen (NetFront)...6 3.5.1 SFR-funktionen...6 3.6 Inzoomning (Nokia/Apple)...7 3.7 Webbläsare på webben...7 4 Identifiering av User Agent...9 4.1 Delivery context...9 4.2 HTTP Header variables...9 4.2.1 Dator...10 4.2.2 Telefon...10 4.3 CC/PP...10 4.3.1 Uppbyggnad...11 4.3.2 Attributdata...11 4.4 WURFL...12 4.4.1 Uppbyggnad...12 4.5 Media Query...13 5 Prototyp...15 5.1 HK Cliffs webbsida...15 5.2 Att anpassa www.cliff.a.se...15 5.2.1 XHTML...16 5.2.2 Design...16 5.2.3 Tillvägagångssätt...17 6 Slutsatser och diskussion...19 6.1 Identifiering...19 6.2 Webbläsare...19 6.3 Anpassade webbsidor...19 7 Källor...21 7.1.1 Referenser...21 7.1.2 Övriga källor på Internet...22 7.1.3 Litteratur...23 8 Bilagor...24 8.1 User Agent Profile...24 8.1.1 SonyEricsson, K700i...24 8.2 HTTP Header Variables...27

8.2.1 Firefox...27 8.2.2 Nokia 6170...27 8.3 WURFL Nokia 6170...28 8.4 Orginal skript...29 8.4.1 index.php...29 8.4.2 menu.php...30 8.4.3 head.php...33 8.4.4 cliff.css...34 8.5 Anpassade script...36 8.5.1 xindex.php...36 8.5.2 xmenu.php...36 8.5.3 xhead.php...37 8.5.4 xunitchoice.php...37 8.5.5 xobjects.php...37 8.5.6 ximageresizer.php...38 8.5.7 xcliff.css...38 8.5.8 xcliff_phone.css...39

1 Inledning 1.1 Bakgrund Många mobiltelefoner som säljs idag har en webbläsare som stöder xhtml. De kan med hjälp av denna surfa på webben precis som vilken dator som helst. I princip, för det finns vissa tekniska begränsningar, t ex är de flesta webbsidor gjorda för datorer med hög upplösning, åtminstone 640*480. Detta är alldeles för stort för en mobiltelefon som endast har en liten skärm, följden blir att användaren måste skrolla både vertikalt och horizontelt för att få en helhetsbild av webbsidan. När en enhet anropar en webbserver skickas information med som beskriver klienten. Denna information kommer i header variables och är inte fullständig i den mening att enhetens tekniska begränsningar och dess specifikation inte finns med. Header variables består endast av ett fåtal variabler med ett begränsat innehåll. Detta räcker inte till för att identifiera enheter på ett tillfredsställande sätt eller för att använda enhetsspecifik information i uppbyggnaden av webbsidor. 1.2 Syfte Syftet är att se om webben, World Wide Web, kan användas av olika enheter utan att man utvecklar webbsidor enbart för en viss typ av enhet. Antalet Internetuppkopplade mobiltelefoner är mycket större än antalet Internetuppkopplade datorer. Ändå är andelen webbsidor som är anpassade för datorer mycket större. Med en mobiltelefon går det att surfa när som helst och var som helst, något som idag inte är utnyttjat till fullo. Med dagens snabba 3G-teknik, och morgondagens än snabbare, går det att skapa nya möjligheter och användningsområden. 1.3 Problem Den primära frågeställningen i detta examensarbete är Går det att anpassa webbsidor till olika enheter, då mobiltelefoner har andra förutsättningar än datorer, t ex färgdjup och skärmstorlek?. Den sekundära frågeställningen är Hur skall en enhet kunna identifieras på ett tillfredsställande sätt?. Mer specifikt skall jag utreda: Går det att identifiera en enhet på ett tillfredställande sätt samt går det att få fram deras olika egenskaper? Finns det fler sätt att identifiera en anropande enhet och få fram dess egenskaper? Vilka begränsningar finns för header variables? Går det att anpassa webbsidor till både datorer och mobiltelefoner samtidigt? Är det bättre att ha två webbsidor, en för enheter med små skärmar och en för stora, eller ska samma kod ska användas för alla enheter, dvs helt dynamiska webbsidor? Vilket är det bästa sättet att angripa problemet med alla webbsidor som redan finns på webben och som är anpassade enbart för datorer? 1

1.4 Avgränsning I detta arbete kommer tekniker att förklaras, inga försök görs att fullständigt gå igenom dessa utan endast ge en övergripande förståelse. Då det är principerna som är viktiga kommer en förenkling att göras, endast två enheter kommer att studeras och användas, en dator och en mobiltelefon. Mobiltelefonen har en liten skärm, annars antas den ha samma förutsättningar som en dator förutom versioner av XHTML, CSS och Javascript. Många termer som används inom det här området är antingen engelska eller svengelska uttryck och många beskriver samma sak. Jag kommer här begränsa dessa uttryck till en enhetlig terminologi, om möjligt. Vissa engelska termer används då ingen svensk motsvarighet finns eller är användbar. Detta används: istället för Webbsida: hemsida, homepage, webpage, sajt, site. Element: tag, htmltag. Webbläsare: browser, webbrowser. Webben: internet (internet används ibland felaktigt när man menar World Wide Web). Mobiltelefon: telefon, mobil 2

2 Metod 2.1 Datainsamling Den information som samlas in till detta arbete kan delas upp i två delar. Dels den information som är befintlig, litteraturstudie, samt den information som hämtas in från egna undersökningar. Till litteraturstudien har merparten av informationen hämtats från Internet men även i bokform. W3C (World Wide Web Concortium) är ett standardiseringsorgan för Internet och de har en specifikation för Device Independence (Stephen Boyera, Rhys Lewis. W3C) som handlar om hur enheter oberoende av ursprung ska kunna surfa på webben. För att förstå den informationen har jag studerat XML och andra tekniker som används på webben (PHP, XHTML och CSS). 2.1.1 Protoyp Den egna undersökningen består i en prototyp som skapats för att undersöka vilka möjligheter som finns för att på ett praktiskt sätt kunna se vad som är möjligt och inte möjligt. Har tekniken kommit så långt att det nu går att apassa webbsidor till olika enheter? Är det praktiskt möjligt att koda en webbsida för fler enheter eller inte. Detta vill jag försöka visa att det är möjligt, åtminstone teoretiskt. En lyckad prototyp kräver att resultatet blir bra för båda enheterna, dvs att designen är funktionell och anpassningen till olika enheter fungerar som det ska. Blir koden ren och lättläst och samtidigt dynamisk så är det ett lyckat resultat. En klar och tydlig koddesign, lätt att bygga vidare på är också tecken på en lyckad prototyp. För att kunna skapa en protoyp har jag varit tvungen att använda mig av den information som jag har samlat in samt att jag har förstått och dragit en korrekt slutsats angående denna. Jag har använt information om hur man designar webbsidor för mobiltelefoner och även denna har funnits på Internet. 2.2 Informationens kvalitet Den information som kommer från litteraturstudien kan ha olika kvalitet. Jag har gått igenom vilka olika sätt det finns att skicka med information om en enhet och vad som kan göras för att webbsidor även skall vara åtkomliga och användbara för mobiltelefoner. Om jag väljer att ta med information som finns på webbsidor på Internet, utan att den är verifierad av pålitliga organisationer (W3C, Nokia, Opera mm), kommer informationen ha en låg giltighet, dvs låg validitet. Då informationen till detta arbtete nästan uteslutande kommer från webbsidor, är det av fullständig betydelse för hela arbetet att information är verifierad och relevant. 3

3 Webbläsare till mobiltelefoner Aldrig har en så stor del av befolkningen haft en mobiltelfon som idag. Något som endast för några år sedan sågs som en omöjlighet är nu möjligt. Det går nu att surfa på webben med mobiltelefoner och även andra handburna enheter. Utanför mobiltelefonoperatörernas egna portaler finns det väldigt få webbsidor som är anpassade för mobiltelefoner. 3.1 WAP och XHTML MP WAP (Wireless Application Protocol) är en standard för trådlös kommunikation med Internet, där vissa speciella WAP-sidor går att titta på i en mobiltelefon (Open Mobile Alliance. What is WAP?). WAP har genomgått en förändring under den tid som det har funnits. Tidigare användes WML (Wireless Markup Language) i utvecklandet av WAP-sidor, nu används XHTML (Extensible Hyper Text Markup Language). XHTML är modulariserat och det finns flera versioner som kan användas beroende på syfte. Den standard W3C rekommenderar för utveckling till mobiltelefoner heter XHTML Basic 1 och stöder enbart de moduler som kan användas av en mobil enhet. Den version av XHTML som WAP 2.0 använder sig av heter XHTML MP (Mobile Profile) 2 och är väldigt lik XHTML Basic. Skillnaden är att XHTML MP stöder ett litet antal fler element. WAP 2.0 använder sig också av Cascading Style Sheets, nämligen WCSS. (WAP Cascading Style Sheets) En anpassad och nedbantad version av CSS2. Då WML och XHTML MP skiljer sig åt krävs det att WAP-läsarna stöder båda teknikerna eftersom det fortfarande finns WAP-sidor skrivna i WML. Mobiltelefonens WAP-läsare, som alltså är en XHTML-läsare, kommer att benämnas webbläsare hädanefter då den används precis som en webbläsare på en dator för att surfa på webben. 3.2 Noname webbläsare Det finns olika slags webbläsare som går att använda idag på mobiltelefoner. Det går att använda sig av den webbläsare som redan finns installerad på telefonen eller så finns det ett par som går att ladda ner. De webbläsare som redan finns installerade på många mobiltelefoner är ofta tillverkarnas egna och har inte alltid något namn. Dessa är ofta inte speciellt bra att surfa på webbsidor med om de inte redan är anpassade för små enheter. Att webbsidor anpassade till datorer använder sig av en hög upplösning och är stora rent fysiskt, bidrar till att göra det svårare då användaren måste skrolla i både höjdled och sidled för att kunna se hela webbsidan. (Se bild 1.) Bandbredd är en annan faktor som spelar in, en vanlig webbsida kan vara väldigt stor i antal kilobyte och det kan ta väldigt lång tid för en telefon med endast GPRS att ladda ner. När webbsidor redan är anpassade för mobiltelefoner fungerar det alldeles utmärkt att surfa på webben med den webbläsare som redan finns installerad, i alla fall så länge som den stöder WAP 2.0. (Se bild 2.) 1 W3C. XHTML Basic 1.1. 2 Developer s Home. XHTML Mobile Profile / XHTML MP Tutorial. 4

Bild 1. Ej anpassad webbsida Bild 2. Anpassad webbsida.. 3.3 Small-Screen Rendering på mobilen (Opera) En webbläsare som är bättre lämpad för att visa icke-anpassade webbsidor på mobiltelefoner är webbläsaren Opera Mobile 3. Den anpassar webbsidor till mobiltelefonens mindre skärm helt automatiskt. För att klara av detta använder sig Opera av en teknik som heter Small-Screen Rendering 4. Att använda sig av Opera ställer krav på processorkraft och minne och fungerar inte på alla mobiltelefoner utan endast på de lite mer kraftfulla. Opera har därför en annan version av sin webbläsare som riktar in sig på mindre kraftfulla mobiltelefoner, Opera Mini. (Se nedan) 3.3.1 SSR-funktionen Alla bilder skalas om dynamiskt till en storlek som fungerar, likaså rubriker och annat som tar upp stort utrymme. Webbsidan delas sedan in i fyra olika delar. Rubrik-delen (1), meny-delen (2), huvudinnehåll (3) och extra menyer eller annat innehåll (4). Dessa placeras sen ut i anpassad form i följande ordning. Högst upp kommer rubrikdelen (1), sedan kommer de andra delarna i fallande ordning (2) (4). (Se bild 3 för förtydligande.) Bild 3. Tagen från Operas webbsida. 3 Opera. Opera for mobile. 4 Opera. Opera s Small-Screen Rendering. 5

3.4 Small-Screen Rendering på servern (Opera Mini) Opera Mini, till skillnad från vanliga Opera, formaterar inte om webbsidan själv utan låter det nedladdade datat först passera en proxyserver där all omformatering sker. Sedan skickas datat vidare till telefonen och visas på skärmen. På så sätt kan även mindre kraftfulla mobiltelefoner använda sig av webbläsaren Opera. Omformateringsfunktionen fungerar på likadant sätt till Opera Mini, dock sker omformateringen som sagt tidigare på en proxyserver innan datat når mobiltelefonen. 3.5 Smart-Fit Rendering på mobilen (NetFront) Access har en webläsare som heter NetFront 5. Den använder sig av en teknik som heter Smart-Fit Rendering 6 och anpassar webbsidan så att den passar en mindre skärm på en mobiltelefon. En annan renderingsfunktion som finns i NetFront är Just-Fit Rendering. Denna renderingsteknik skiljer sig på det sättet att den inte ändrar designen utan endast pressar in tabeller så de får plats på en liten skärm. NetFront ställer krav på både processorkraft och minne och fungerar inte på alla mobiler utan endast de lite mer kraftfulla. Webläsaren stöder utöver WAP 2.0 även HTML 4.01, XHTML 1.1, CSS 1 och 2, Javascript 1.5 och AJAXScript mm. 3.5.1 SFR-funktionen Alla bilder skalas om dynamiskt till en storlek som fungerar, likaså rubriker och annat som tar upp stort utrymme. Webbsidan delas sedan in i tre olika delar. Rubrik-delen (A), vänster-delen (B), höger-delen (C). Dessa placeras sen ut i anpassad form i följande ordning. Högst upp kommer rubrik-delen (A), sedan kommer de andra två delarna i ordning (B) (C). (Se bild 4 för förtydligande.) Bild 4. Tagen från Access webbsida. 5 Access. NetFront Browser v3.4. 6 Access. Smart-Fit Rendering. 6

3.6 Inzoomning (Nokia/Apple) Nokia har i samarbete med Apple tagit fram en ny webbläsare för mobiltelefoner, Series 60 webbrowser 7. Det är till Nokia Series 60-mobiler. Den här webbläsaren fungerar lite annorlunda än de från Opera och NetFront i och med att den visar hela webbsidan på en gång i ett miniatyrformat. (Se bild 5.) Användaren skrollar sedan runt en liten fyrkant på skärmen (storleken på telefonens fönster) och kan välja vilken del som skall förstoras upp i vanlig storlek på skärmen. (Se bild 6.) Med ett nytt knapptryck är du ute igen på miniatyrformatswebbsidan och kan välja en ny del att titta på. Bild 5. Miniatyrwebbsida med kvadrat. Bild 6. Förstorad vald del. Webbläsaren till S60 är väldigt kraftfull och stöder inte bara WAP 2.0, utan även bl a HTML 4.01, XHTML 1.0, CSS 1,2 och 3(delvis), Javascript och Flash Lite 8. Detta är således ett helt annat sätt att surfa på än när en webbläsare från Opera eller NetFront används. 3.7 Webbläsare på webben Skweezer är en webbportal 9 som innehåller en webbläsare, direkt på webben, och behöver inte laddas ner för att användas. Skweezer fungerar med hjälp av en proxyserver som sköter all omformatering av datat och presenterar webbsidan anpassad till en mobiltelefon. Längst ner på webbsidan finns det en footer som visar information om webbsidan. 1. Stjärnor som visar på hur wireless ready webbsidan är. 2. En fylld rektangel som visar hur optimerad webbsidan har blivit i förhållande till ursprungssidan. 3. Hur mycket data som Skweezer lyckats ta bort i siffror. 7 Series 60. Web Browser for S60. 8 Series 60. Web Browser in detail. 9 Skweezer. Skweezer. 7

Bild 7. Tagen från Skweezers webbsida. Det enda som krävs för att börja är att adressen skrivs in i textfältet, sedan sköts allt per automatik, webbsidan hämtas, anpassas och visas. Utöver webbläsaren finns det även e-post, RSS läsare mm på webbportalen. 8

4 Identifiering av User Agent W3C-World Wide Web Consortium är en organisation som håller på med standardiseringar och riktlinjer för Internet. En av deras riktlinjer är av stort intresse för detta projekt, riktlinjer för device independence. En standard för hur webbsidor kan anpassas för att passa olika enheter t ex datorer och mobiltelefoner. Inom detta finns en lösning på ett av de stora problemen, nämligen identifieringen av den anropande enheten. Det görs med hjälp av en profil som heter CC/PP (Composite Capabilities/Preferences Profile). Detta tas upp senare under rubriken CC/PP. 4.1 Delivery context För att det ska kunna vara möjligt att identifiera den enhet som anropar en webbsida måste det framgå vilken information som skickas med i anropet. Detta görs i det som kallas för Delivery Context (Roger Gimson, Rhys Lewis, Sailesh Sathish. Delivery context overview for device independence). Här finns det information om den enhet som gör själva anropet. HTTP (HyperText Transport Protocol) (Network working group. 2004. Hypertext Transfer Protocol-HTTP1.1) är det protokoll som används vid anrop på webben idag. I det protokollet finns det variabler som innehåller information om den enhet som utför själva anropet. Dessa kallas för HTTP Header Variables. 4.2 HTTP Header variables Med HTTP Header Variables 10 går det att få fram information om den enhet som utför ett anrop till en webbsida. Dessa variabler innehåller dock en begränsad mängd information då antalet variabler inte är så stort. Dessutom är det inte standardiserat hur informationen ska skrivas in vilket gör det ännu svårare. Information om den anropande klienten som går att använda i ett identifieringssyfte finns i variabeln USER_AGENT. Denna innehåller en sträng med information som kan se ut enligt följande. Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;.NET CLR 1.1.4322). När mobiltelefoner anropar ser det lite annorlunda ut. sgh-z500 shp/vpp/r5 sm83.1 smm mms/1.2.0 profile/mdp-2.0 configuration/cldc-1.1. Med denna information går det att ta reda på vilken enhet som anropar. Det som tyvärr inte går att få reda på med hjälp av Header Variables är specifik information om själva enheten, t ex skärmbredd, antal färger mm. ACCEPT är en annan variabel och innehåller bl a information om vilka media typer som klienten accepterar. Det kan se ut enligt följande. */*, om allt accepteras. I annat fall kan det se ut så här text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,im age/png,*/*;q=0.5. USER_AGENT: Webbläsare som användes för anropet. (Format: Mjukvara/Versionsbibliotek/Version) ACCEPT: MIME typerna klienten accepterar. (Format: typ/deltyp, typ/deltyp;q=relativ önskegrad). * betyder alla mediatyper. Typ är vilken 10 Network working group. 2004. 14 Header Field Definitions 9

mediatyp t ex text eller image. Genom att skriva deltyp specificeras det ytterliggare. T ex text/html och image/gif. q är en relativ önskegrad från 0-1. T ex text/html;q=0.8. Anges inget q-värde räknas typen som q=1.0. Detta betyder att text/xml skall användas, annars (i fallande önskegrad) text/html;q=0.9, text/plain;q=0.8, */*;q=0.5. Nedan visas vilken information USER_AGENT och ACCEPT innehåller för ett antal olika enheter. Se bilaga 8.2 för exempel av Header Variables. 4.2.1 Dator Internet Explorer HTTP_USER_AGENT:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;.NET CLR 1.1.4322) HTTP_ACCEPT:*/* Firefox HTTP_USER_AGENT:Mozilla/5.0 (Windows; U; Windows NT 5.0; en-us; rv:1.7.9) Gecko/20050711 Firefox/1.0.5 HTTP_ACCEPT:text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text /plain;q=0.8,image/png,*/*;q=0.5 Opera HTTP_USER_AGENT:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; sv) Opera 8.50 HTTP_ACCEPT:text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 4.2.2 Telefon Samsung SGH-Z500 HTTP_USER_AGENT: sgh-z500 shp/vpp/r5 sm83.1 smm mms/1.2.0 profile/mdp-2.0 configuration/cldc-1.1 HTTP_ACCEPT:text/vmd.sun.j2me.appdescriptor.application/sdp.application/vmd.samsung.theme, application/java-archive, text/vmd.wap.vml Nokia 6170/Opera Mini HTTP_USER_AGENT: Opera/8.01 (J2ME/MIDP; Opera Mini/1.1.2101/hifi/nordic/se; Nokia 6170; sv; U; ssr) HTTP_ACCEPT: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 4.3 CC/PP CC/PP (Composite Capabilities/Preference Profiles) (W3C. 2004. Composite capability/preference profile (CC/PP): Structure and vocabularies 1.0) är namnet på en profil som beskriver en enhet väldigt detaljerat. W3C försöker få fram riktlinjer för hur en CC/PP-profil ska kunna skickas med i Delivery Context och på så sätt vara tillgänglig vid anrop av webbsidor. Profilen beskriver enhetens hårdvara och även mjukvara, till 10

skillnad från Header Variables, vilket gör CC/PP-profilen till ett väldigt användbart hjälpmedel. En CC/PP-profil är ett XML-dokument som skrivs i RDF (Resource Description Framework). RDF är en XML-standard för att beskriva olika typer av resurser. WAP är en teknik som använder sig av CC/PP-profiler under namnet UAProf (UserAgenProfile). Denna profil beskriver dock endast mobiltelfoner och inte datorer eller andra enheter som inte stöder WAP. (Se bilaga 11.1 för exempel av UAProf) 4.3.1 Uppbyggnad En CC/PP-profil är uppgyggd i en trädstruktur med två nivåer. En profil måste ha en eller flera komponenter (första nivån) och varje komponent måste ha en eller flera attribut (andra nivån). Datat lagras i själva attributen. Detta kan visualiseras i en graf. -CC/PP-profil -Component Hardware -Width 140 -Height 200 -Component Software -Name EPOC -Version 2.0 -Vendor Symbian -Component Browser -Name Mozilla -Version 6.0 -Vendor Symbian -HtmlVersion 4.0 Ibland kan det behöva finnas flera data i samma attribut. Detta löses genom att använda en rdf:bag. Ex: attributet HtmlVersion kan klara av flera versioner av html, inte bara 4.0. Det kan skrivas i en rdf:bag enligt följande. <HtmlVersion> <rdf:bag> <rdf:li>3.2</rdf:li> <rdf:li>4.0</rdf:li> </rdf:bag> </HtmlVersion> 4.3.2 Attributdata Det finns olika slags attributdata som kan användas i en CC/PP-profil, de är antingen simple attribute data eller complex attribute data. Simple attribute data: String: En textsträng som gör skillnad på gemener och versaler. Integer numbers: Heltal som kan vara positiva, negativa eller noll. Rational numbers: Ett tal som kan uttryckas som kvoten av två heltal. Complex attribute data: Set of values: Ett set kan innehålla noll, ett eller flera värden där alla är olika och ordningen är utan betydelse. Det representeras av en rdf:bag som nämnts ovan och är bra då flera värden används. 11

Sequence of values : En sequence kan innehålla noll, ett eller flera värden där ordningen är av betydelse. Det representeras av en rdf:seq och är lite annorlunda än en rdf:bag då ordningen är av betydelse. Annars fungerar de på samma sätt. 4.4 WURFL The WURFL is an XML configuration file which contains information about capabilities and features of several wireless devices. (WURFL. Welcome to the WURFL the Wireless Universal Resource File) WURFL är en databas/konfigurationsfil som innehåller specifikationer om trådlösa enheter. WURFL är ett open-source projekt som samlar in information om så många trådlösa enheter som möjligt. Det är ihopsamlat av människor från hela världen och är gratis att använda. I dagsläget finns det över 400 enheter i databasen och det tillkommer fler hela tiden. WURFL påminner om CC/PP-profiler på så vis att en fil skapas med information om olika enheter. Det är ett kraftfullt verktyg då det går att få fram enhetsspecifik information väldigt lätt med hjälp av enkla funktionsanrop, samt om det är en WAPenhet eller inte. Dock måste utvecklaren själv hålla reda på när det är dags att uppdatera WURFL och ladda ner den nya versionen av databasen. 4.4.1 Uppbyggnad WURFL är uppbyggd i en familjestruktur 11 där barnen ärver egenskaper från sina föräldrar. Strukturen består av tre nivåer. Databasen måste ha ett antal enheter, devices (första nivån). Varje enhet har en eller flera grupper, group (andra nivån) som i sin tur har en eller flera capabilities (tredje nivån), Datat lagras i capabilities. Detta kan visualiseras i en graf. -wurfl -device -group "product_info" -capability brand_name "Audiovox" -capability model_name "SMT-5600" -group "image_format" -capability wbmp false" -device... WURFL är byggt på konceptet familjer. En enhet ärver egenskaper från sin förälder (en modellgrupp till telefonen). Föräldern i sin tur ärver från sin förälder (en ny vidare telefongrupp) och så upprepas det till gruppen Generic som är den högsta gruppen. Barnen kan bara ha en förälder medan en förälder kan ha oändligt många barn. Ex Nokia 6170 ärver från modellgruppen Nokia 20 series. Den i sin tur ärver från Nokia generic som i sin tur ärver från Mobile phone generic som ärver från Generic. Generic är toppen på familjen och den grupp som alla mobiltelefoner ärver ifrån. 11 WURFL. What s cool about the WURFL? 12

Databasen blir på detta sätt mycket mindre än om samma information skulle skrivas in på alla likartade enheter. Se bilaga 8.3 för exempel av Nokia 6170. WURFL-paketet för PHP består av fyra filer, wurfl.xml (databasen), wurfl_config.php (konfigurationsfil), wurfl_parser.php (skapar en array med informationen) samt wurfl_class.php (klassfilen som låter oss jobba med den array som skapats). Detta behövs för att kunna använda WURFL. Sedan är det bara att leta upp de funktioner som finns att tillgå. En bra funktion är browser_is_wap. Denna tar reda på om enheten är en mobil enhet eller inte med endast ett enkelt funktionsanrop. Ex på hur koden kan se ut som identifierar en enhet. Kodexemplet är taget från http://wurfl.sourceforge.net/. require_once('./wurfl_config.php'); require_once(wurfl_class_file); // Creating the WURFL object $mdevice = new wurfl_class($wurfl, $wurfl_agents); $mdevice->getdevicecapabilitiesfromagent($_server["http_user_agent"]); if ( $mdevice->browser_is_wap ) { ; } else { ; } 4.5 Media Query Ett annat sätt att anpassa innhehållet på en webbsida är med hjälp av Media Queries (W3C. 2002. Media Queries), det går då att styra vilken style sheet (Cascading Style Sheets) som ska användas. Dessvärre stöder inte alla webbläsare detta, speciellt inte för mobiltelefoner där stödet är väldigt ojämnt. Det får ses som ett hjälpmedel och inte ett alternativ till de andra sätten att identifiera enheter. HTML4 och CSS2 (Cascading Style Sheets) stöder Media Queries. Det finns olika mediatyper definierade och med hjälp av dessa kan man välja vilken style sheet som ska användas. De mediatyper som finns definierade är: aural, braille, handheld, print, projection, screen, tty, tv. De vanligaste är screen och print. De används för att skilja på om man ser på en skärm eller om man ska skriva ut. Det som är intressant i syfte att kunna anpassa sidor för mobiltelefoner är handheld. Webbläsaren känner av att det är en mobiltelefon, eller annan mobil enhet, och använder sig av just den style sheet som är avsedd för mobiltelefoner. För att använda olika style sheets beroende på syfte skriver man:...för datorskärm. <link rel="stylesheet" type="text/css" media="screen" href="screen.css">...för mobiltelefon. <link rel="stylesheet" type="text/css" media="handheld" href="handheld.css"> Det går även att skriva villkor som skall uppfyllas för att en viss style sheet ska användas. Villkor kan vara: width, height, resolution, color mm. 13

I detta exempel används denna style sheet endast om det är en mobil enhet som anropar samt att enheten har en färgskärm. <link rel="stylesheet" type="text/css" media="handheld and (color)" href="handheld.css"> Det går att ha med mediaspecifika val inuti en style sheet. T ex om endast en style sheet används går det att ha med ett villkor som styr att handheld ska användas, detta skrivs då in i den style sheet som används. @media handheld {... } 14

5 Prototyp En prototyp har skapats för att kunna se om de principer som framkommit i arbetet, hur en webbsida kan anpassas dynamiskt för flera olika enheter, är möjliga att applicera praktiskt. Om hela webbsidan ska vara dynamisk eller bara vissa delar eller inte alls beroende på omständigheterna. Prototypen som skapas för detta arbete finns tillgänglig på adressen http://www.pragsten.se/cliff. 5.1 HK Cliffs webbsida HK Cliff är en handbollklubb med ett par pojklag plus ett A-lag och de har haft en webbsida under ett par år. Webbsidan är ganska statisk och det man kan finna är nyheter från de senaste matcherna, lite information om lagen, klubben samt länkar till sponsorer. De har även en gästbok och den är väl besökt av ungdomarna och ledarna i klubben. Webbsidan är inte gjord av proffs utan av någon kompis som vet hur man gör. På så sätt är den säkert ganska typisk för många webbsidor ute på internet. Körs ett XHTML valideringstest så generas massor av fel. Webbsidan är uppbyggd på ett ganska vanligt sätt. Det finns ett huvudskript (index.php) som innehåller en tabell med ett antal delar. Huvudet, bestående av en rubrik. Kroppen, rubriker till vänster, innehåll i mitten och banners till höger. Skriptspråket som används är PHP. 5.2 Att anpassa www.cliff.a.se Webbsidan skall göras så dynamisk som möjligt. Det skall vara en webbsida för både mobiltelefoner och datorer samtidigt, designen skall anpassas och bilder skalas om. De krav som ska följas är att webbsidan ska använda rätt version av XHTML, XHTML 1.0 för datorer och XHTML MP för mobiltelfoner, med en passande version av CSS. Det finns flera andra versioner av XHTML som kan användas men här är XHTML MP valt för mobiltelefoner då det är standarden för WAP 2.0 som har ett bra utbrett stöd, samt XHTML 1.0. I anpassningen av denna webbsida görs här ett antagande och det är att alla enheter klarar tusentals färger, dvs att de liknar datorer förutom storleken på bildskärmen. Detta görs för att det hela skall bli överskådligt på ett begripligt sätt samt att det endast är principerna som ska visas. Firefox är den webbläsare som webbsidan kommer att anpassas för. Andra webbläsare kommer ev visa upp olika designavvikelser då inget är gjort för att ta bort dessa. För orginalskript (index.php, menu.php, head.php, cliff.css) samt de omgjorda skripten (xindedx.php, xmenu.php, xhead.php, xunitchoice.php, ximageresizer.php, xcliff.css, xcliff_phone.css), se bilaga 8.4 och 8.5. 15

5.2.1 XHTML XHTML är en XML-applikation som bygger på HTML (W3C. 2002. XHTML 1.0 The Extensible Hyper Text Markup Language (Second Edition)). Detta gör att större krav ställs på att koden är välformad än tidigare då sådana krav finns i XML. När webbsidor görs om från HTML till XHTML finns det en del saker att ändra på. Nedan följer en lista på vanliga förändringar (ett antal förändringar, och ska inte ses som en fullständig lista) som måste göras för att få koden välformad. Det måste finnas en DOCTYPE deklaration som talar om vilken version av XHTML som används. xmlns -attributet måste finnas i <html>-elementet. Nästlade element får inte användas. Alla element måste ha en sluttag. Ändra tomma element från <br> till <br />. Endast gemener får användas. Värden för attribut måste skrivas inom citationstecken. Attribut får inte förkortas, alla attribut måste tilldelas ett värde. Ex <input type= checkbox checked> ändras till <input type= checkbox checked= checked > Attributet "id" ersätter "name. I XHTML måste teckenkoder för vissa tecken användas.t ex & =&amp, < =&lt. 5.2.2 Design Nedan följer exempel på problem som kan uppstå vid design av webbsidor anpassade för mobiltelefoner samt förslag för att komma runt dessa (Jo Rabin, Charles McCathieNevile. 2006. Mobile Web Best Practices 1.0.) Layout: Ett vanligt sätt att designa en webbsida för en dator är att tänka från vänster till höger, att ha navigationslänkar till vänster, huvudinnehållet i mitten och en kolumn med innehåll till höger. När det gäller design för mobila enheter med små skärmar fungerar det inte på det sättet. Ett mer vanligt sätt är att ha all iniformation i en smal kollumn, uppifrån och ner. Detta eftersom skärmen oftast är ganska liten. Att använda frames, flera tabeller samtidigt, cookies, pop up-fönster mm är att försvåra för både webbläsaren och för användaren. De flesta webbläsare för mobila enheter klarar inte av det, eller så blir det inte alltid som man tänkt sig. Displayyta: Nyckelordet är att tänka litet. Att använda små bilder, små style sheets, få fonter i olika storlekar, små/korta webbsidor. En användare på en mobiltelefon är ofta mer målinriktad 12 och därför bör webbsidan minimeras till enbart det väsentliga, användaren vill inte läsa långa stycken utan kortfattat. 12 Jo Rabin, Charles McCathieNevile. 2006. Mobile Web Best Practices 1.0. 16

Textinmatning: Minimera användandet av text som användaren ska skriva in då det tar tid att skriva på en mobiltelefon. Ha korta URL:adresser till webbsidan. Dataöverföring: Då bandbredden för mobiltelefoner är betydligt mindre än för datorer i dagsläget blir mängden data som behöver överföras viktigare för mobilanpassade webbsidor än för datoranpassade. Exempel från Telia på nedladdad datamängd 13. Surfa på 25 mobila internetsidor och skicka 5 e- postmeddelanden 0,5MB, surfa på 75 mobila internetsidor och skicka 15 e- postmeddelanden 1,5MB, se på 3G-TV 0,7MB/Min. Överföringshastigheten är också en viktig faktor att ta hänsyn till, med GPRS (ca 50Kbit/s) tar prototypen (19kB) ca 4 sekunder att ladda ner och med UMTS (ca 2Mbit/s) 0,1 sekund. OBS:Tiderna är teoretiska snabbaste tider och överensstämmer inte alltid med verkligheten. Kostnad: Då prissättningen ofta är per megabyte blir det intressant att ladda ner så lite som möjligt. Exempel på kostnad från Telia Online Rörlig 14 20kr/1MB, Comviq Knock Out 15 15kr/MB. Så att hålla ner storleken på webbsidorna blir viktigt även av ekonomiska anledningar. 5.2.3 Tillvägagångssätt Cliffs webbsida är väldigt statisk och för att få den dynamisk, att kunna anpassa designen till den enhet som anropar, krävs stora förändringar. Designen rent utseendemässigt får vara likadan som orginalwebbsidan i så stor utsträckning som möjligt, däremot blir själva koden helt omgjord. Style sheets kommer att användas helt och hållet för designen då det är ett väldigt kraftfullt verktyg för att bestämma både struktur samt utseende på en webbsida. Genom att separera presentationen från innehållet förenklas utvekling och underhåll av webbsidor 16. Exempel: Tidigare användes två tabeller enbart för att få fram svarta kanlinjer på innehållsrutor på webbsidan, med style sheets behövs bara en enkel kodrad för att åstakomma samma sak. Jämför följande kodstycke... <table width= 130px border="0" cellpadding="1" cellspacing="0"> <td bgcolor="#000000"> <table width="100%" border="0" cellpadding="5" cellspacing="0"> <td bgcolor="#ffffff"> </table> </table>...med... border: 1px solid #000000; 13 Telia. Prisexempel Telia Online Rörlig 14 Telia. Priser - Telia Online 15 Comviq. Comviq Knock-Out 16 W3C. Cascading Style Sheets level 2 revision 1 CSS 2.1 specification 17

Detta gör att koden för webbsidan blir ren och enkel att följa. En stark egenskap som finns i CSS är attributet display:none. Under huvudrubriken finns ett textstycke med information om adressen till klubben. När en dator anropar används en style sheet som bestämmer färg storlek mm. När en mobiltelefon anropar finns bara display:none. Den visas inte. Stödet för style sheets varierar kraftigt mellan olika webbläsare och framför allt då för mobiltelefoner så det går inte alltid att förlita sig på avancerade style sheets. I fallet med display:none så finns den med i specifikationen för WAP 2.0 från 2001-10-26 17 samt för W3Cs CSS Mobile Profile 1.0 från 2002-07-25 18 och kan anses vara säker att använda. Med hjälp av WURFL kan webbsidan känna av om det är en mobiltelefon eller en dator som anropa. Detta med hjälp av ett enkelt funktionsanrop. getdevicecapability("is_wireless_device") Det finns två stycken olika style sheets som används och eftersom webbsidan känner av vilken enhet som anropar kan rätt style sheet användas, xcliff.css för datorer och xcliff_phone.css för mobiltelefoner. Även vilken Doctype som används bestämms, XHTML Mobile 1.0 eller XHTML 1.0. Alla bilder kommer att skalas om dynamiskt till en passande storlek. Vad som är passande är olika i fall till fall. Detta måste dock bestämmas i förhand. Att skala om bilder dynamiskt är väldigt smidigt då endast en version av varje bild behöver finnas. För att kunna få strukturen på webbsidan dynamisk används style sheets. Ett exempel: Kroppen på webbsidan består av ett div-element som innehåller tre andra div-element. Dessa tre inre element kommer att visas sida vid sida när en dator anropas med hjälp av float:left;. Däremot när en mobiltelefon anropar, som har en liten skärm där de inte får plats bredvid varandra, kommer de att finnas i en kolumn. Detta med hjälp av att använda den inbyggda funktionaliteten för elementet div (ett blockelement). När flera blockelement används på en sida placeras de under varandra. 19 17 Open Mobile Alliance. 2001. WAP CSS Specification 18 W3C. 2002. CSS Mobile Profile 1.0 19 W3C. The global structure of an HTML document 7.5.4 18

6 Slutsatser och diskussion 6.1 Identifiering I dagsläget finns det två sätt att lösa problemet med identifieringen av en anropande enhet, att läsa av HTTP header variables manuellt och WURFL. I framtiden när W3Cs arbete är klart kommer CC/PP-profiler att börja användas, men än så länge är det inte möjligt. Med Header Variables är det lätt att komma igång och det krävs lite kod för att läsa av variabeln USER_AGENT. Den största nackdelen är att det i princip endast går att få reda på ett modell/märkes-namn. För att det ska fungera på fler enheter än de två som används i detta arbete krävs en stor insamling av just dessa user agents. Samtidigt måste den ansvarige vara beredd på att uppdatera vid behov, när nya modeller eller märken kommer ut. Detta gäller alla olika slags enheter som finns, mobiltelefoner, handdatorer, datorer och andra enheter som går att surfa med. WURFL tar lite längre tid att komma igång med. Ett par filer ska laddas ner och konfigureras på rätt sätt, vilket kan vara lite komplicerat om inte den enklaste konfigureringen används. Själva WURFL, databasen, skall också laddas ner samt hållas uppdaterad. Detta kräver att någon åtar sig detta, annars kommer de senaste modellerna inte att kunna användas (ev kan ett skript köras med jämna mellanrum). Sist ska även WURFL implementeras i själva koden på webbsidan. När detta är klart kan WURFLs funktionalitet börja utnyttjas. När CC/PP-profiler börjar användas kommer de innehålla samma styrka och funktionalitet som WURFL men utan dess begränsning, att hålla det uppdaterat. CC/PP-profiler kommer att finnas med i Delivery Context och kommer inte att behöva uppdateras, utan en gång skapad kod kommer att fungera för allt och alla. 6.2 Webbläsare För redan befintliga webbsidor som inte är anpassade för mobiltelefoner finns det webbläsare som anpassar webbsidor automatiskt. Dessa fungerar på alla webbsidor, men med varierande resultat. Det kan nämnas att om själva omformateringen sker på själva mobiltelefonen så skall fortfarande all data först laddas ner, datamängden kan bli väldigt stor. Noname Opera Mobile Opera Mini NetFront Series 60 Skweezer Kräver anpassade Ja Nej Nej Nej Nej Nej webbsidor Omformateringsteknik Nej SSR SSR/Proxy SFR/JFR Zoom Proxy Kraftfull mobil Nej Ja Nej Ja Ja Nej krävs Nedladdningsbar Nej Ja Ja Ja Ja Nej applikation Webbgränssnitt Nej Nej Nej Nej Nej Ja 6.3 Anpassade webbsidor Det går att anpassa webbsidor för både mobiltelefoner och datorer samtidigt men lösningen kan se lite olika ut beroende på förutsättningarna. Baserat på prototyputvecklingen drar jag slutsatserna att: Gäller det en helt dynamisk webbsida krävs det att WURFL, eller motsvarande, används. Layouten bör inte vara alltför 19

komplicerad, då det annars kan bli väldigt rörigt och komplicerat. Beroende på innehåll kan det vara bättre att ha två separata webbsidor, men som delar det mesta av datat. Viss information är bara intressant på datorer, t ex ladda ner datorprogram eller andra för datorer speciella saker såsom video mm. En stor nackdel med att ha två helt separata webbsidor är i underhållet av dem. Vid varje uppdatering måste båda webbsidorna ändras. Detta är ett merjobb som undviks om webbsidan blir mer dynamisk. Används Header Variables måste det på förhand vara bestämt hur många enheter, eller olika krav, som webbsidan skall klara av. Det blir mindre dynamiskt. Det är bra att göra skillnad på strukturen på en webbsida och layouten. Det blir enklare att skriva kod för anpassade webbsidor om det inte finns någon inbakad layout med i html-filen utan endast själva strukturen för webbsidan. Layouten för de olika enheterna, style sheets, finns i egna separata filer. 20

7 Källor 7.1.1 Referenser Stephen Boyera, Rhys Lewis. An introduction to device independence. [online]. W3C. Available from: http://www.w3.org/2001/di/introtodi.html [cited 20 October 2005] Open Mobile Alliance. 2002. What is WAP?. [online]. Available from: http://www.wapforum.org/site/index.htm [cited 10 October 2006] W3C. 2000. XHTML Basic 1.1. [online]. Available from: http://www.w3.org/tr/xhtml-basic/ [cited 5 April 2006] Developer s Home. 2006. XHTML Mobile Profile / XHTML MP Tutorial. [online]. Available from: http://www.developershome.com/wap/xhtmlmp/ [cited 5 April 2006] Opera. Opera for mobile. [online] Available from: http://www.opera.com/products/mobile [cited 10 October 2005] Opera. Opera s Small-Screen Rendering. [online]. Available from: http://www.opera.com/products/mobile/smallscreen/ [cited 10 October 2005] Access. 2006. NetFront Browser v3.4. [online]. Available from: http://www.accesscompany.com/products/netfrontmobile/browser/index.html [cited 20 September 2006] Access. Smart-Fit Rendering. [online]. Available from: http://www.accesscompany.com/products/netfrontmobile/contentviewer/mcv_tips.html [cited 20 September 2006] Series 60. S60 Open to new features. [online]. Available from: http://www.series60.com/browser [cited 5 April 2006] Series 60. Web Browser in detail. [online]. Available from: http://www.s60.com/business/productinfo/applicationsandtechnologies/webrowser/tec hinfo [cited 5 April 2006] Skweezer. Skweezer. [online]. Available from: http://www.skweezer.net/ [cited 20 October] Roger Gimson, Rhys Lewis, Sailesh Sathish. 2006. Delivery context overview for device independence. [online]. W3C. Available from: http://www.w3.org/tr/di-dco/ [cited 5 April 2006] Network working group. 2004. Hypertext Transfer Protocol-HTTP1.1. [internet] Available from: http://www.w3.org/protocols/rfc2616/rfc2616.html [cited 20 October 2005] Network working group. 2004. 14 Header Field Definitions. [internet]. Available from: http://www.w3.org/protocols/rfc2616/rfc2616-sec14.html [cited 20 October 2005] W3C. 2004. Composite capability/preference profile (CC/PP): Structure and vocabularies 1.0. [online]. Available from: http://www.w3.org/tr/2004/rec-ccppstruct-vocab-20040115/ [cited 20 October 2005] WURFL. Welcome to the WURFL the Wireless Universal Resource File. [online]. Available from: http://wurfl.sourceforge.net/ [cited 10 December 2005] 21

WURFL. What s cool about the WURFL?. [online]. Available from: http://wurfl.sourceforge.net/smart.php [cited 10 December 2005] Håkon Wium Lie, Tantek Celik, Daniel Glazman. 2002. Media Queries. [online]. W3C. Available from: http://www.w3.org/tr/css3-mediaqueries/ [cited 20 October 2005] W3C. 2002. XHTML 1.0 The Extensible Hyper Text Markup Language (Second Edition). [online]. Available from: http://www.w3.org/tr/xhtml1/ [cited 20 October 2005] Jo Rabin, Charles McCathieNevile. 2006. Mobile Web Best Practices 1.0. [online]. W3C. Available from: http://www.w3.org/tr/2006/cr-mobile-bp-20060627/ [cited 10 January 2006] Telia. Prisexempel Telia Online Rörlig. [online]. Available from: http://www.telia.se/privat/link.do?oid=214807&tabid=3&channelid=- 77249&type=EDITORIAL [cited 25 May 2006] Telia. Priser - Telia Online. [online]. Available from: http://www.telia.se/privat/link.do?channelid=- 101922&OID=1537009589&pageTypeId=1238057535&type=EDITORIAL [cited 25 May 2006] Comviq. Comviq Knock-Out. [online]. Available from: http://www.editorial.tele2.se/?page=tele2se_privat_mobiltelefoni_comviqknockout&t 2page=privat_mobiltelefoni_comviqknockout [cited 25 May 2006] W3C. 2006. Cascading Style Sheets level 2 revision 1 CSS 2.1 specification. [online] Available from: http://www.w3.org/tr/2005/wd-css21-20050613 [cited 20 November 2005] Open Mobile Alliance. 2001. WAP CSS Specification. [internet]. (Published 26 October 2001) Available from: http://www.openmobilealliance.org/tech/affiliates/wap/wap-239-wcss-20011026- a.pdf [cited 15 March 2006] W3C. 2002. CSS Mobile Profile 1.0. [online]. Available from: http://www.w3.org/tr/css-mobile [cited 15 March 2005] W3C. The global structure of an HTML document 7.5.4. [online]. Available from: http://www.w3.org/tr/html4/struct/global.html#edef-div [cited 20 May 2006] 7.1.2 Övriga källor på Internet MacWorld. Nokia och Apple samarbetar om en ny webbläsare till mobiler. [online]. Available from: http://macworld.idg.se/articlepages/200506/13/20050613150320_mw/20050613150 320_MW.dbp.asp [cited 20 January 2006] Mobile Information Services. WURFL. [online]. Available from: http://www.sims.berkeley.edu/~ckmt/mobile/wurfl.html [cited 20 January 2006] Nokia. Forum Nokia. [online]. Available from: http://www.forum.nokia.com [cited 10 October 2005] Opera. Making small devices look great. [online]. Available from: http://my.opera.com/community/dev/device [cited 10 October 2005] 22