Webpublisering Nettredaktørskolen Gang januar 2013 Nina Furu

Transkript

1 Webpublisering Nettredaktørskolen Gang 2 8. januar 2013 Nina Furu

2 Webkonseptet

3 Vår målsetting Brukers behov Webkonseptet

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

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

6 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

7 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.

8 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?

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

10 Vår målsetting Brukers behov Webkonseptet

11 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 )

12 Webpublisering

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

14 Hvordan får du til HTML-koden?

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

16 1. Skrive for hånd

17 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.

18

19

20

21

22 Lyst til å lære HTML?

23 2. Bruke en HTML-editor

24 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.

25

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

27

28

29

30

31 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)

32 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)»

33 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

34 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

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

36 3. Content Management Systemer

37 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

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

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

40 Gratisløsningene Wordpress Joomla Drupal Lavest brukerterskel: Wordpress

41 Hvem bruker Wordpress? og over 25 millioner andre

42

43

44

45

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

47

48

49

50 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)

51

52

53

54

55 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

56 En joker i stokken

57

58 De nye alternativene

59

60

61

62 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.

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

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

65 Innhold uavhengig av form Eksempel: RSS

66

67

68

69 Applikasjoner Den nye webben Bruker datakilder og lar bruker manipulere data fra disse For mobil For web For Facebook For lesebrett

70

71 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

72 Data Data Data

73 Semantisk web og søkemotorene

74

75

76

77

78

79

80

81

82

83 Maskinlesbare data Krever standardisert merking av data

84 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

85 Metadata-standarder RDF (Resource Description Framework) Dublin core ISO/IEC Emnekart Facebook Open Graph UDEF (Universal Data Element Framework) og mange, mange flere

86

87 Facebook Open Graph Protocol

88 Kravspesifisering

89 Kravspesifikasjonen Dokumenterer ønsket løsning Er grunnlag for anbudsinnhenting og innkjøpsprosess Er grunnlag for videre teknisk prosess Er grunnlag for videre designprosess Er grunnlag for implementering

90 Hva bør en kravspesifikasjon inneholde? A. Ønsket funksjonalitet B. Eventuelle integreringsbehov C. Eventuelle migreringsbehov D. Forventet antall maler E. Eventuelle tekniske krav til hosting/drifting F. Eventuelle wireframes G. Forventet antall admin-brukere (hvis veldig høyt eller spesielt differensiert)

91 Funksjonalitet Hva er relevant funksjonalitet?

92 Typer av funksjonalitet 1. Artikkelbehandling 2. Menybehandling 3. Malbehandling 4. Filbehandling/Bildebehandling 5. Skjemabehandling 6. Brukerbehandling 7. Sosial funksjonalitet 8. Søkemotoroptimalisering 9. WAI / Universell tilgjengelighet 10.Mobil tilpasning

93 1. Artikkelbehandling

94 2. Menybehandling

95 3. Malbehandling

96 4. Filbehandling/Bildebehandling Filer og filarkiv Billedarkiv 1 Multimedia-arkiv 2 Link-arkiv 3 Dokumentarkiv 1 Mulighet for beskjæring av bilder 0 Lagring av bilder i flere størrelser 0

97 5. Skjemabehandling Formularhåndtering Mulig å opprette, endre og slette formularer 2 Støtte for XML Schema 3 Støtte for X forms 3 Skjema skal fungere inn mot arbeidsflyt (må eventuelt beskrives separat) 0

98 6. Brukerbehandling Brukerhåndtering Tilgangsprivilegier kan defineres etter forhåndsdefinerte klasser 2 Tilgangsprivilegier kan defineres individuelt 1 En bruker kan ha noen privilegier for noen deler av tjenesten, og andre privilegier for andre deler av tjenesten. 3

99 7. Sosial funksjonalitet Facebook-funksjonalitet? ( ) Wiki-funksjonalitet? ( Personalisering? Mash-up funksjonalitet? Kommentering? Deling? (

100 8. Søkemotoroptimalisering Takk til Roar Eriksen / for påfølgende to slider

101 Optimalisering av malverk Koden løsningen genererer skal validere til gjeldende HTML eller XHTML standard. Differensiert Title Tag Max 60 Karakterer Differensiert Overskrift (H1) Title og overskrift helt like (Med unntak av statiske ord) Navn på lenker (Anchor text) 7-12 ord Meta Description Max 150 karakterer Ingress (h2 e.l.) Hvis at du aktivt benytter ingresser, så kan denne automatisk legges som meta description Body Lenker burde ikke inneholde ord som klikk her eller les mer.

102 URL struktur unngå disse fellene Session ID i Url For mange query parametere i URL (Less is more) For mye bruk av subdirectories (Maks 3) Kunden bytter CMS løsning og glemmer å bevare eksisterende synlighet (husk dette i migrering!) Syke URL r _5465&MainContent_4924=5465:0:10,1688&MainPage_5465=4 950:0:10,1799

103 9. WAI / Universell tilgjengelighet

104 10. Mobil tilpasning

105 For din egen del, inkluder også En indikasjon på ambisjonsnivå Need-to-have vs nice-to-have En buffer i tid og penger som ingen vet om

106 Need-to-have vs nice-to-have Når det beste blir det godes fiende Når små detaljer fordobler kostnaden Når alle får lov til å ønske seg funksjonalitet fritt Vær tydelig på hva du absolutt MÅ ha, og hva du eventuelt kan klare deg uten hvis det blir for dyrt eller for komplisert. Lag eventuelt en førsteversjon og definer påpluggingsmoduler etter hvert.

107 Hva bør du forvente? At tilbudet ikke inneholder overføring av eksisterende innhold At tilbudet ikke inneholder innlegging av nytt innhold At tilbudet ikke inkluderer design At tilbudet ikke inneholder mer enn én visningsmal (med mindre du spesielt har bedt om det) At tilbudet ikke omfatter kostnaden fom år 2 At tilbudet ikke er skrevet spesielt for deg

108 Sammenligningsmatrise

109 Sammenligningsmatrise med funksjonalitetspoeng

110 Kost per funksjonalitetspoeng (KPF) Pris Antall funksjonalitetspoeng = KPF

111 Nå over til Jakob Nina Furu Mobil