Nettredaktørskolen Vår Gang April 2015 Nina Furu

Transkript

1 Nettredaktørskolen Vår 2015 Gang April 2015 Nina Furu

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

3 Hvordan får du til HTML-koden?

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

5 1. Skrive for hånd

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

7

8

9

10

11 Lyst til å lære HTML?

12 2. Bruke en HTML-editor

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

14

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

16

17

18

19

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

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

22 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

23 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

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

25 3. Content Management Systemer

26 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

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

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

29 Gratisløsningene Wordpress Joomla Drupal Lavest brukerterskel: Wordpress

30

31 Hvem bruker Wordpress? og over 25 millioner andre

32

33

34

35

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

37

38

39

40

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

42

43

44 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

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

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

47 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

48

49 Maskinlesbare data Krever standardisert merking av data

50 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

51

52 Den strategiske webutviklingsmodellen

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

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

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

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

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

58 Vår målsetting Brukers behov Webkonseptet

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

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

61 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

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

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

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

65 Vår målsetting Brukers behov Webkonseptet

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

67 Informasjonsarkitektur

68 Informasjonseiermatrise

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

70 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

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

72

73 Samme nivå

74 Samme nivå

75 Samme nivå

76 Samme hovedemne

77 Samme hovedemne

78 Samme hovedemne

79 Samme akse

80 Wireframes

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

82

83

84

85

86 Hva trenger du?

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

88

89

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

91 Hvor mange wireframes? Forside Seksjonsforside Innholdsside Utlistingsside + alternative varianter for mobiler og nettbrett

92 Diskusjonsoppgave Hvilke publiseringsløsninger har du brukt før? Hva bruker du nå? Hvor fornøyd er du? Hvis du har vært i en webutviklingsprosess: Ble den innholdsbaserte/strategiske modellen brukt, eller gikk man bare rett på design? Hva var konsekvensene?

93 Over til Jakob