TNMK30 - Elektronisk publicering

Transkript

1 Webben TNMK30 - Elektronisk publicering

2 Vad är internet?

3 Vad är internet?

4 Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation sker via standardiserade protokoll (TCP/IP). WWW eller webben : del av Internet, en samling av webbsidor kopplade via hyperlänkar eller bara länkar.

5 Internet!= www WWW eller webben är en del av Internet. En samling av dokument formaterade i HTML språk och kopplade via hyperlänkar.

6 Webbstandarder Standarder och tekniska specifikationer Rekommendationer för syntax, semantik och användning av webbspråk och verktyg World Wide Web Consortium (W3C) Rekommendationer och webbstandarder Internet Engineering Task Force (IETF) Specifikationer för protokoll standarder, (Internet Standard, STD) Request for Comments dokument (RFC) ECMA International Standarder för JavaScript

7 Webbstandarder International Organization for Standardization (ISO) Unicode consortium Unicode standard Internet Assigned Numbers Authority (IANA) Kontrollerar domännamn och IP-adresser

8 Internet protocol (IP) System för kommunikation för all data skickat över Internet, simpel kommunikationsprotokoll. IP-adress: 32-bit nummer för att identifiera en dator i ett nätverk genom IP (4x8-bits: 0-255).

9 Fler protokoll Transmission Control Protocol (TCP) mer pålitligt protokoll som överför data i rätt ordning. TCP/IP används ofta ihop och används t.ex. för HTTP, HTTPS, FTP, SSH och epost. Hypertext Transfer Protocol (HTTP) kommunikationsprotokoll för att överföra webbinnehåll (Hypertext) på webben (WWW). Dvs att skicka htmlsidor från en webbserver till en webbklient.

10 Klient/server ISP ISP SP ISP

11 DNS och URL Domain Name System (DNS): mappning mellan IPadress och webbserver. Uniform Resource Locator (URL): webbadress, dvs adress till ett dokument. Protokoll Domännamn Port Sökväg Dokument Ankare till specifik del i dokumentet

12 HTTP HTTP kommandon för dataöverföring klient/server GET: Hämta dokument, resurs POST: Skicka formulär information PUT: Uppladdning fil HEAD: Hämta info om dokument Fel/status meddelanden 200: OK : sidan är flyttad 403: ej tillträde (unauthorized) 404: Page not found 500: Internal server error

13 MIME-typer Mediatyp (eller Multipurpose Internet Mail Extensions). För att specificera typ av resurs som inkluderas i en webbsida. En medietyp består av en typ, en undertyp, och valfria parametrar. Till exempel, en HTML-fil kan be beskriven med text/html; charset=utf-8. Då är text typen, html subtypen och charset=utf-8 är den extra parametern som specificerar teckenkodningen.

14 Språk på webben HTML - Hypertext Markup Language CSS - Cascading Style Sheets JavaScript PHP - PHP Hypertext Processor XML - extensible Markup Language SQL - Structured Query Language innehåll webbsidor utseende webbsidor beteende webbsidor dynamiska webbsidor metaspråk för data hantera databaser

15 Förslag till vidare läsning Brief history of the Internet: W3C: Wikipedia om Internet:

16 Sökmotorsoptimering TNMK30 - Elektronisk publicering

17 Sökmotorsoptimering (SEO) Optimera innehållet på en webbsida för indikering i sökmotorerna. Sökmotorn innehåller en databas över webbsidor. Små program (crawler, spindel, robot) besöker webbsidor och analyserar innehållet.

18 Sökmotorsoptimering (SEO) Webbsidorna rankas sedan efter sammanvägning av olika parametrar: Antal länkar från andra sidor Antal länkar till sidorna som länkar till sidan Förekomst av sökord på sidan

19 Sökmotorsoptimering Flera olika faktorer som avgör hur högt en sida hamnar. Google använder > 200 olika faktorer. <title>, <keywords>, <description>, <h1>, <em>,? Det kan ta upp till 6 veckor innan en ändring på en webbsida uppdateras i en sökmotor. Skapa sökmotorsoptimerad webbsida från början.

20 Sökmotorsoptimering Förekomsten av sökordet på sidan. Fler gånger = mer relevant. Ord i <title>, <h1>, <em> är viktigare än ord i <p>, <div>, <span>, <table>, Ord tidigt på en sida (högt upp) ger mer vikt än ord långt ner i texten. Använd alternativa ord också! Till exempel: dagis, barnomsorg, förskola

21 Sökmotorsoptimering Antalet länkar till sidan och vilka som sidor som länkar till sidan är viktigt för sökmotorerna. Länka internt till alla sidor - sitemap. En olänkad sida dyker inte upp i sökmotorerna. Undvik keyword-spamming - i så fall tappar webbsidan poäng i rankningen.

22 Huvudregel Skapa innehåll som andra vill ta del av och också länka till. Utforma innehåll och utseende för människorna, inte sökmotorerna, för kommer besökarna så kommer sökmotorerna

23 HTML-koden Det är viktigast med bra sökord och copy i: Titeln (title) Metabeskrivningen (meta description) Rubriker, strong och em Tidigt på sidan (längre ned = mindre vikt) Format på webbadresser väger också in: De som är gjorda för människor är bäst

24 Bilder alt-attributet, texten skannas av sökmotorer. Filstorlek, små filer före stora filer. Filnamn, texten skannas av sökmotorer. Bildtexten <figcaption>, skannas av sökmotorer.

25 Turist i Norrköping Det är viktigast med bra sökord och copy i: Titeln (title) Metabeskrivningen (meta description) Rubriker, strong och em Tidigt på sidan (längre ned = mindre vikt) Format på webbadresser väger också in: De som är gjorda för människor är bäst

26 Dålig SEO Kommuner skriver förskola, medan användare söker på dagis. Att bara använda <div> eller <p> eller <span> i stället för korrekta rubriknivåer som <h1-6>.

27 Sökmotorsoptimering

28 Layout TNMK30 - Elektronisk publicering

29 Tänk layout Tänk på papper först Börja skissa topplagret först Skapa grid Bestäm typografi Bestäm färgtema Dela upp layouten Ifrågasätt det etablerade

30 Tänk layout Se de små detaljerna Var noggrann in på minsta detaljnivå Ha rätt kvalitet på elementen Stäm av mellan designskiss och utveckling under arbetets gång

31 Layoutsteg Skiss Wireframe Mockup Prototyp

32 Mood boards Mood board - inspiration board Webbsidans: - stil - färgschema - typografi - mönster - utseende och känsla Kollage, mall,

33 Wireframe Wireframe är funktion En skiss på papper eller i dator Innehåller markeringar för alla funktioner

34 Mockup Mockup är utseende En fullständig bild av webbsidan i dator Innehåller GUI för alla funktioner

35 Responsiv layout Automatiskt anpassa layouten beroende på storlek på skärmen. Antingen skala om layouten. Eller byta layout: media queries

36 Bilder för webben Filstorleken är viktig, en för stor bild tar tid att ladda och tar onödigt minne i anspråk. Den genomsnittliga storleken på en webbsida och hur stor del som upptas av olika element (Average Webpage Size 15th February 2013)

37 Bilder för webben Rätt storlek Rätt filformat Rätt kompression