Webpublisering Nettredaktørskolen Gang 2 18. juni 2013 Nina Furu
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
Den strategiske webutviklingsmodellen
Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål
Nettredaktørens jobb Bedriftens mål Sikre verdi Brukerens mål
Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål
Web skal skape verdi for to parter Bedriftens mål Web Brukerens mål Verdi Konsept Innhold
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
Vår målsetting Brukers behov Webkonseptet
Målsettinger Øke salget Øke kjennskapen til bedriften Øke etterspørselen etter produkter Øke markedsandelen Utvide til nye markeder
Dine mål bør være SMARTe Specific - konkrete Measurable - målbare Attainable - oppnåelige Results oriented - resultatorienterte Time based tidsbaserte
Eksempler på SMARTe mål Vi skal ha 12% økning i salg av lydbøker innen 31.12 Alle kurspåmeldinger skjer elektronisk fra 1. mai Selvbetjent henting av kundeopplysninger fra lansering av min side 10% reduksjon i behandlingstid fra 1. august
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.
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?
Jobbe med kartlegging av brukerbehov Statistikk Triggerordanalyser (www.google.com/trends og Google Keyword Tool) Brukerundersøkelser (www.surveymonkey.no) Brukerworkshops
Vår målsetting Brukers behov Webkonseptet
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 )
Informasjonsarkitektur
Informasjonseiermatrise
Informasjonsarkitektur Skille mellom akser Skille mellom nivåer Bruke snarveier om nødvendig brukerbehovet trumfer alt annet!
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
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 )
Samme nivå
Samme nivå
Samme nivå
Samme hovedemne
Samme hovedemne
Samme hovedemne
Samme akse
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.
Emnemeny
Attributter som seleksjonskriterier
Attributtmeny
Hygienefaktorer
Wireframes
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)
Hva trenger du?
Verktøy Papir/blyant Powerpoint Mock-up-software
Elementer til wireframe Logo Menyer globale og lokale Nyheter? Varslinger? Markedsføringsfelt? Innholdsfelt Hva er A-scenariene?
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.
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.
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.
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
A og B- scenarie r A- scenario B- scenarier B- scenario C-scenarier
Hvor mange wireframes? Forside Seksjonsforside Innholdsside Utlistingsside
Webpublisering
Hva trenger du for å lage en webside? Domene Webhotell (serverplass) HTML-kode
Hvordan får du til HTML-koden?
Hvordan får du til HTML-koden? Skrive for hånd Bruke en HTML-editor Bruke et publiseringsverktøy
1. Skrive for hånd
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.
Lyst til å lære HTML? www.webforalle.no http://www.w3schools.com/
2. Bruke en HTML-editor
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.
Online HTML-editor http://www.spiderweblogic.com/html-tag- Generator.aspx grei hvis du bare ønsker et lite stykke HTML på kjappen
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)
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)
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
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 http://www.queness.com/post/4105/13-amazingexamples-of-html5-and-css3
CSS CSS er nå del av websidekoding, enten du gjør det manuelt eller via en publiseringsløsning Publiseringsløsning = CMS = Content Management System
3. Content Management Systemer
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
Pris for CMS Episerver, Sharepoint, 1 mill ++ Keyteq, Idium Portal Server, 50 000 500 000 Designbyrå (lite/mellomstort), 25 000 100 000 One.com, Idium Web, 1000 10 000 Wordpress, Joomla, Drupal gratis
Pris for CMS Episerver, Sharepoint, 1 mill ++ 10 Keyteq, Idium Portal Server, 50 000 500 7 000 Designbyrå (lite/mellomstort), 25 000 3 100 000 One.com, Idium Web, 1000 10 000 2 Wordpress, Joomla, Drupal gratis 9 Funksjonalitetspoeng
Gratisløsningene Wordpress Joomla Drupal Lavest brukerterskel: Wordpress
Hvem bruker Wordpress? http://www.themarthablog.com/ www.spotify.com www.stephenfry.com www.webgruppen.no http://labs.finn.no http://www.cokestudio.com.pk/ http://corporate.ford.com/vehicles/auto-shows og over 25 millioner andre
Helt enkle løsninger Krever enten mye kompetanse Eller har svært begrenset funksjonalitet Pris fra 0,- til noen tusenlapper
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 50 000 500 000 (mer med spesialtilpasninger)
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 500 000 5 000 000
En joker i stokken
De nye alternativene
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.
Semantisk web Maskinlesbare data (indeksert via metadata) Tilgjengelig i skyen Web 3.0 Informasjon som er tilgjengelig uavhengig av grenseflaten Rent innhold
Skyen / The cloud Begrep for alle nett-tilgjengelige steder der data og informasjon kan lagres og hentes ut igjen (av en selv og andre)
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
Data Data Data
Maskinlesbare data Krever standardisert merking av data
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
Facebook Open Graph Protocol
Nå over til Jakob Nina Furu www.webgruppen.no Mobil 92208015 nina@webgruppen.no