0
Webdagene 2007

Webutvikling Effektiv, lønnsom og
tilgjengelig webutvikling
Christian Johansen
Hvorfor bry seg om utvikling?
 Nå flere brukere
 Effektiviser prosjekter
 Effektiviser prosjektdeltakere
 Unngå teknisk sø...
Problem: for liten tekst
Problem: for liten tekst
Problem: For liten tekst
Tekststørrelse intet problem
Problem: Liten avkrysningsboks
Stort klikkbart område
Bruk logisk strukturert data
og maskiner forstår innholdet
Tilgjengelighet
 Nå ut til flere brukere
 Lovforslag foreligger
Ferdig søkemotoroptimalisert
 Ranger høyt med riktig implementasjon
 Unngå dyr teknisk optimalisering i etterkant
Unngå nettleserlås
Hva er grensesnittsutvikling?
 Implementering av skjermbilder
 HTML/XHTML
 CSS
 Javascript
 Flash
 AJAX, DHTML (ikke egne ...
Hva er HTML?
 Strukturert tekst
 IKKE et design-verktøy
 W3C-standard
Hva er XHTML?
 HTML reformulert som XML
 W3Cs arvtaker for HTML
Hva er CSS?
 Designverktøy kontroller nettsidenes utseende
 W3C-standard
HTML-eksempel
HTML har ikke et utseende
Samme dokument, annen CSS
Samme dokument, annen CSS
HTML eller XHTML?
 Ingen store praktiske forskjeller
 Bruk semantisk HTML/XHTML
Hva er semantisk HTML?
 Et begrep/en praksis, ikke en standard
 Elementer brukes for å beskrive hva
 innhold er, ikke hvor...
Nytteverdi #1
 Ekstrahering av data   Semantic Extractor
Nytteverdi #2
 Ekstrahering av data   Semantic Extractor
Nytteverdi #3 - Mikroformater
Nytteverdi #3 - Mikroformater
Hva er WCAG?
 WAI W3Cs tilgjengelighetsgruppe
 WCAG retningslinjer for tilgjengelighet
Hvem gjør grensesnittsutvikling?
 Webdesignere
 Interaksjonsdesignere
 Grafiske designere
 Webutviklere
 Utviklere/systemu...
Forventninger vs kompetanse




Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roge...
Forventninger vs kompetanse




Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roge...
Forventninger vs kompetanse




Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx
Illustrasjon: Roge...
Dedikerte grensesnittsutviklere
 Grensesnittet får en klart definert rolle
 Designere og (backend)utviklere kan
 konsentre...
Sentralisert design
er raskt å skinne om
og raskt å endre struktur på
Prototype som arbeidsverktøy
Prototype som arbeidsverktøy
Tydelige roller og oppgaver
 Alle vet hva de skal gjøre
 Alle vet hva de jobber ut ifra
 Alle vet hva de skal levere
Jeg vil ha:
 Design som Photoshop-filer
 Wireframe som PDF, Visio, Powerpoint osv
 Andre funksjonelle beskrivelser
Jeg leverer
 Klikkbar prototype
 Semantiske HTML-maler
 CSS
 Bilder og grafikkelementer
 Eventuell Javascript
 Annet(?)
Stå på krava
 Ikke avleggs å kreve gode løsninger
 Ikke la backenden styre prosjektet
 Ha krav til kvalitet!
Bry deg om utvikling
 Få flere brukere (tilgjengelighet)
 Ranger bedre i søkemotorene
 Effektiviser prosjekter
 Bruk rikti...
Takk for meg
Christian Johansen
Grensesnittsutvikler
.IXD

christian@ixd.no - Mob. 934 17 480

www.ixd.no - www.kuttisme.n...
Upcoming SlideShare
Loading in...5
×

Webdagene2007 Christian Johansen Webutvikling

616

Published on

Webdagene2007 netlife usability netlife ixd UI webutvikling christianjohansen brukervennlig brukervennlighet

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
616
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Webdagene2007 Christian Johansen Webutvikling"

  1. 1. Webdagene 2007 Webutvikling Effektiv, lønnsom og tilgjengelig webutvikling Christian Johansen
  2. 2. Hvorfor bry seg om utvikling? Nå flere brukere Effektiviser prosjekter Effektiviser prosjektdeltakere Unngå teknisk søkemotoroptimalisering Unngå nettleserlås Imøtekom fremtidige lover
  3. 3. Problem: for liten tekst
  4. 4. Problem: for liten tekst
  5. 5. Problem: For liten tekst
  6. 6. Tekststørrelse intet problem
  7. 7. Problem: Liten avkrysningsboks
  8. 8. Stort klikkbart område
  9. 9. Bruk logisk strukturert data
  10. 10. og maskiner forstår innholdet
  11. 11. Tilgjengelighet Nå ut til flere brukere Lovforslag foreligger
  12. 12. Ferdig søkemotoroptimalisert Ranger høyt med riktig implementasjon Unngå dyr teknisk optimalisering i etterkant
  13. 13. Unngå nettleserlås
  14. 14. Hva er grensesnittsutvikling? Implementering av skjermbilder HTML/XHTML CSS Javascript Flash AJAX, DHTML (ikke egne teknologier) Kunnskap om W3C-standarder
  15. 15. Hva er HTML? Strukturert tekst IKKE et design-verktøy W3C-standard
  16. 16. Hva er XHTML? HTML reformulert som XML W3Cs arvtaker for HTML
  17. 17. Hva er CSS? Designverktøy kontroller nettsidenes utseende W3C-standard
  18. 18. HTML-eksempel
  19. 19. HTML har ikke et utseende
  20. 20. Samme dokument, annen CSS
  21. 21. Samme dokument, annen CSS
  22. 22. HTML eller XHTML? Ingen store praktiske forskjeller Bruk semantisk HTML/XHTML
  23. 23. Hva er semantisk HTML? Et begrep/en praksis, ikke en standard Elementer brukes for å beskrive hva innhold er, ikke hvordan det ser ut Eksempler: <ul>, <ol> og <dl> for lister <h1>, <h2> <h6> for overskrifter <abbr> for forkortelser <blockquote> for lengre sitater Og flere
  24. 24. Nytteverdi #1 Ekstrahering av data Semantic Extractor
  25. 25. Nytteverdi #2 Ekstrahering av data Semantic Extractor
  26. 26. Nytteverdi #3 - Mikroformater
  27. 27. Nytteverdi #3 - Mikroformater
  28. 28. Hva er WCAG? WAI W3Cs tilgjengelighetsgruppe WCAG retningslinjer for tilgjengelighet
  29. 29. Hvem gjør grensesnittsutvikling? Webdesignere Interaksjonsdesignere Grafiske designere Webutviklere Utviklere/systemutviklere Kreative utviklere Hvem gjør hva?
  30. 30. Forventninger vs kompetanse Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx Illustrasjon: Roger Guttormsen, .IXD Svar fra 109 kommunikatører, 130 utviklere og 48 designere
  31. 31. Forventninger vs kompetanse Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx Illustrasjon: Roger Guttormsen, .IXD Svar fra 109 kommunikatører, 130 utviklere og 48 designere
  32. 32. Forventninger vs kompetanse Kilde: Eirik Hafver Rønjum, http://www.hafver-ronjum.no/eirik/html.aspx Illustrasjon: Roger Guttormsen, .IXD Svar fra 109 kommunikatører, 130 utviklere og 48 designere
  33. 33. Dedikerte grensesnittsutviklere Grensesnittet får en klart definert rolle Designere og (backend)utviklere kan konsentrere seg om sitt Teknisk søkemotoroptimalisering blir innebygget
  34. 34. Sentralisert design
  35. 35. er raskt å skinne om
  36. 36. og raskt å endre struktur på
  37. 37. Prototype som arbeidsverktøy
  38. 38. Prototype som arbeidsverktøy
  39. 39. Tydelige roller og oppgaver Alle vet hva de skal gjøre Alle vet hva de jobber ut ifra Alle vet hva de skal levere
  40. 40. Jeg vil ha: Design som Photoshop-filer Wireframe som PDF, Visio, Powerpoint osv Andre funksjonelle beskrivelser
  41. 41. Jeg leverer Klikkbar prototype Semantiske HTML-maler CSS Bilder og grafikkelementer Eventuell Javascript Annet(?)
  42. 42. Stå på krava Ikke avleggs å kreve gode løsninger Ikke la backenden styre prosjektet Ha krav til kvalitet!
  43. 43. Bry deg om utvikling Få flere brukere (tilgjengelighet) Ranger bedre i søkemotorene Effektiviser prosjekter Bruk riktig håndtverkere Krev godt håndtverk
  44. 44. Takk for meg Christian Johansen Grensesnittsutvikler .IXD christian@ixd.no - Mob. 934 17 480 www.ixd.no - www.kuttisme.no www.cjohansen.no Lær mer på Dataforeningens kurs: Webteknologi for ikke-teknologer 11. oktober
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×