Webpublisering Nettredaktørskolen Gang juni 2013 Nina Furu

Transkript

1 Webpublisering Nettredaktørskolen Gang juni 2013 Nina Furu

2 Varm lunsj fra Food Story Sitronbakt laks med pepperrot, asparges, spinat og amandine-potet glasert med brunt smør og dill. Serveres med estragon-aioli

3 Den strategiske webutviklingsmodellen

4 Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål

5 Nettredaktørens jobb Bedriftens mål Sikre verdi Brukerens mål

6 Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål

7 Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål Verdi Konsept Innhold

8 Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål Verdi skapes av Konsept som kan konkretiseres i Innhold som formidles i flere kanaler

9 Vår målsetting Brukers behov Webkonseptet

10 Målsettinger Øke salget Øke kjennskapen til bedriften Øke etterspørselen etter produkter Øke markedsandelen Utvide til nye markeder

11 Dine mål bør være SMARTe Specific - konkrete Measurable - målbare Attainable - oppnåelige Results oriented - resultatorienterte Time based tidsbaserte

12 Eksempler på SMARTe mål Vi skal ha 12% økning i salg av lydbøker innen Alle kurspåmeldinger skjer elektronisk fra 1. mai Selvbetjent henting av kundeopplysninger fra lansering av min side 10% reduksjon i behandlingstid fra 1. august

13 Hovedkonverteringer De(n) brukerhandlingen(e) som du mest av alt ønsker at bruker skal gjennomføre. Du bør måle både hovedkonverteringer og delkonverteringer.

14 Brukerbehov Hva er de viktigste scenariene på web? Hvorfor skal bruker ønske å like deg på Facebook? (Skal han det?) Hvorfor skal bruker følge deg på Twitter (skal han det?) Hvorfor skal bruker besøke din YouTube-kanal? Hva kan du gi som har faktisk verdi for bruker?

15 Jobbe med kartlegging av brukerbehov Statistikk Triggerordanalyser ( og Google Keyword Tool) Brukerundersøkelser ( Brukerworkshops

16 Vår målsetting Brukers behov Webkonseptet

17 Webkonseptet må konkretiseres I informasjonsarkitektur (hvilke sider skal vi ha) som blir til menyer I wireframes (hvilket innhold skal vi ha på hvilke sider) som blir til design I regler og rutiner (hvem har ansvar for hva, hvor ofte skal man publisere )

18 Informasjonsarkitektur

19 Informasjonseiermatrise

20 Informasjonsarkitektur Skille mellom akser Skille mellom nivåer Bruke snarveier om nødvendig brukerbehovet trumfer alt annet!

21 Akser Produktmeny (stoler, bord, sofaer ) Målgruppemeny (privatkunde, bedriftskunde ) Funksjonalitetsmeny (søk jobb, velg språk ) En og samme meny skal ikke kombinere innhold på forskjellige akser

22 Nivåer Epler og grønnsaker er ikke på samme nivå Frukt og grønnsaker er på samme nivå Epler og gulrøtter er på samme nivå (men under forskjellige mammakategorier )

23

24 Samme nivå

25 Samme nivå

26 Samme nivå

27 Samme hovedemne

28 Samme hovedemne

29 Samme hovedemne

30 Samme akse

31 Emner vs attributter Emner er tematiske operanter det er det jeg leter etter når jeg leter etter informasjon Emnebetegnelser = triggerord = substantiver Attributter = egenskaper ved det enkelte emne (for eksempel pris, merke eller lignende) Man kan ha attributtseleksjoner eller til og med egne attributtmenyer (for eksempel kart), men attributter og emner skal aldri blandes i samme meny.

32 Emnemeny

33 Attributter som seleksjonskriterier

34 Attributtmeny

35 Hygienefaktorer

36 Wireframes

37 Wireframes Prototyper; tegninger av hvordan det kommer til å bli Skisser som lar andre se hva du har tenkt Skisser kan avsløre fundamentale feil før du bruker programmerertimer Du kan brukerteste på en papir-prototype (vis bruker skissen, beskriv en oppgave og spør hvordan brukeren ville gå fram for å få dette gjort) Du kan brukerteste på en prototype på skjerm (bruker kan klikke seg rundt og vise hvordan bruker vil gå frem)

38

39

40

41

42 Hva trenger du?

43 Verktøy Papir/blyant Powerpoint Mock-up-software

44

45

46 Elementer til wireframe Logo Menyer globale og lokale Nyheter? Varslinger? Markedsføringsfelt? Innholdsfelt Hva er A-scenariene?

47 A-, B- og C-scenarier A-scenarier = de 1-3 viktigste tingene som de langt fleste brukerne kommer for. B-scenarier = det resten av brukerne kommer for. C-scenarier = det bruker ikke nødvendigvis etterspør, men som noen har lyst til å si.

48 A-, B- og C-scenarier A-scenarier = de 1-3 viktigste tingene som de langt fleste brukerne kommer for. Forside, meny, dyplenking/søk B-scenarier = det resten av brukerne kommer for. C-scenarier = det bruker ikke nødvendigvis etterspør, men som noen har lyst til å si.

49 A-, B- og C-scenarier A-scenarier = de 1-3 viktigste tingene som de langt fleste brukerne kommer for. Forside, meny, dyplenking/søk B-scenarier = det resten av brukerne kommer for. Meny, dyplenking/søk C-scenarier = det bruker ikke nødvendigvis etterspør, men som noen har lyst til å si.

50 A-, B- og C-scenarier A-scenarier = de 1-3 viktigste tingene som de langt fleste brukerne kommer for. Forside, meny, dyplenking/søk B-scenarier = det resten av brukerne kommer for. Meny, dyplenking/søk C-scenarier = det bruker ikke nødvendigvis etterspør, men som noen har lyst til å si. Dyplenking/søk, eventuelt egne felter

51 A og B- scenarie r A- scenario B- scenarier B- scenario C-scenarier

52 Hvor mange wireframes? Forside Seksjonsforside Innholdsside Utlistingsside

53 Webpublisering

54 Hva trenger du for å lage en webside? Domene Webhotell (serverplass) HTML-kode

55 Hvordan får du til HTML-koden?

56 Hvordan får du til HTML-koden? Skrive for hånd Bruke en HTML-editor Bruke et publiseringsverktøy

57 1. Skrive for hånd

58 1. Skrive for hånd Skriver tekst og kode i tekstbehandlingsprogram for ren tekst Legger fila på webserver (via FTP) Åpner fila i nettleser Vips: Web-side! Flatkodede sider er billig, men krever kompetanse.

59

60

61

62

63 Lyst til å lære HTML?

64 2. Bruke en HTML-editor

65 2. Bruke en HTML-editor Et program som hjelper deg å huske HTML-koder WYSIWYG-editorer Eksempler: Front Page, First Page, Dreamweaver Fortsatt billig, og du slipper å huske på alle kodene.

66

67 Online HTML-editor Generator.aspx grei hvis du bare ønsker et lite stykke HTML på kjappen

68

69

70

71

72 Det store MEN: Både håndkoding og editorer lager flate sider Det betyr at form og innhold er ett (Ønsker du å skifte bakgrunnsfarge på siden, må du inn på hver enkelt side og gjøre en endring)

73 Det store MEN: Både håndkoding og editorer lager flate sider Det betyr at form og innhold er ett (Ønsker du å skifte bakgrunnsfarge på siden, må du inn på hver enkelt side og gjøre en endring)

74 Det store MEN: Både håndkoding og editorer lager flate sider Det betyr at form og innhold er ett (Ønsker du å skifte bakgrunnsfarge på siden, må du inn på hver enkelt side og gjøre en endring)» Håkon Wium Lie

75 CSS Gjør det mulig å behandle form og innhold separat, også på flate sider Refererer alle innholdssider til et felles stilsett, slik at globale endringer kan gjøres på ett sted Nå del av HTML-standarden HTML 5 og CSS 3

76

77 CSS CSS er nå del av websidekoding, enten du gjør det manuelt eller via en publiseringsløsning Publiseringsløsning = CMS = Content Management System

78 3. Content Management Systemer

79 3. Content Management Systemer Programmer for å håndtere produksjon og oppdatering av websider Adskilt form og innhold Nettbasert (ikke lokalt på PC) Mulig for flere å jobbe på samme løsning Mulig med separate oppgaver

80 Pris for CMS Episerver, Sharepoint, 1 mill ++ Keyteq, Idium Portal Server, Designbyrå (lite/mellomstort), One.com, Idium Web, Wordpress, Joomla, Drupal gratis

81 Pris for CMS Episerver, Sharepoint, 1 mill Keyteq, Idium Portal Server, Designbyrå (lite/mellomstort), One.com, Idium Web, Wordpress, Joomla, Drupal gratis 9 Funksjonalitetspoeng

82 Gratisløsningene Wordpress Joomla Drupal Lavest brukerterskel: Wordpress

83 Hvem bruker Wordpress? og over 25 millioner andre

84

85

86

87

88 Helt enkle løsninger Krever enten mye kompetanse Eller har svært begrenset funksjonalitet Pris fra 0,- til noen tusenlapper

89

90

91

92 Mellomstore løsninger Er ofte modulære og kan bygges på etter behov. Modulene er gjerne ferdig hyllevare, hvilket gjør at de er utprøvd, men også at det er lite spesialtilpasning inkludert Pris fra ca (mer med spesialtilpasninger)

93

94

95

96

97 Store løsninger Leveres av konsulentselskaper som bygger løsningen på et etablert rammeverk Krever mye av implementeringspartner Kan gi mye i intelligent oppsett av malverk (variabler på flere nivåer) Pris

98 En joker i stokken

99

100 De nye alternativene

101

102

103

104 Semantisk web Semantic Web is a group of methods and technologies to allow machines to understand the meaning or "semantics" of information on the World Wide Web. The term was coined by World Wide Web Consortium (W3C) director Tim Berners-Lee. He defines the Semantic Web as a web of data that can be processed directly and indirectly by machines.

105 Semantisk web Maskinlesbare data (indeksert via metadata) Tilgjengelig i skyen Web 3.0 Informasjon som er tilgjengelig uavhengig av grenseflaten Rent innhold

106 Skyen / The cloud Begrep for alle nett-tilgjengelige steder der data og informasjon kan lagres og hentes ut igjen (av en selv og andre)

107 Muligheter Å hente ut data som produseres i sanntid fra eksterne kilder inn i en webside dynamisk Å la bruker manipulere data fra trafikksystemer via mobiltelefon Å tilgjengeliggjøre de beste tilbudene fra butikker i nærheten på kartet Å la søkemotorene indeksere data og ikke sider/ dokumenter

108 Data Data Data

109 Maskinlesbare data Krever standardisert merking av data

110 Metadata Data om data Forklarer hva dataene er og hva de handler om Må følge standarder dersom dataene skal brukes av andre enn de som eier dem

111 Facebook Open Graph Protocol

112 Nå over til Jakob Nina Furu Mobil