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økemotoroptimalisering Unngå nettleserlås Imøtekom fremtidige lover

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 teknologier) Kunnskap om W3C-standarder

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

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/systemutviklere Kreative utviklere Hvem gjør hva?

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

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

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

Dedikerte grensesnittsutviklere

Grensesnittet får en klart definert rolle Designere og (backend)utviklere kan

konsentrere seg om sitt Teknisk søkemotoroptimalisering blir

innebygget

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 riktig håndtverkere Krev godt håndtverk

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