Slides from talk given at Trondheim XP and Agile 4th of October 2010. by @peirix ang @hegerokenes

1. Frontend webutvikling - hvordan
skrive god HTML, CSS og JavaScript
En innføring i lagdeling, strukturering
av kode og progressive enhancement

2. Pål Eirik Strøm Hege Røkenes
Webutvikler Frontend-utvikler
@peirix @hegerokenes
peirix@gmail.com hege@rokenes.com
www.bennett.no
@bennett_tweet
facebook.com/Bennett.Reklame

7. Agenda
• Introduksjon til progressive enhanchement
• Lagdeling av frontendkode
• HTML – 5’ern, semantisk kode
• CSS – 3’ern
• Hva kan man ta i bruk i dag
• WebForms – 2’ern
• JS – feature sniffing

8. Progressive enhancement
• Basis funksjonalitet
• Universell utforming
• Solid og smidig grunnlag
• Bygge på for å forbedre brukeropplevelsen

9. Lagdelt kode
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

10. XHTML 2 vs HTML5

11. ( DEMO)
To quote or not to quote

12. Semantisk HTML
• Header • Thead
• Blockquote • Tbody
• Footer • Tfooter
• Nav • Hgroup
• Caption • Small
• Article • Abbr
• Code • Time
• Section • Figure
• Aside • Figcaption

13. Semantisk HTML
• Header • Thead
• Blockquote • Tbody
• Footer • Tfooter
• Nav • Hgroup
• Caption • Small
• Article • Abbr
• Code • Time
• Section • Figure
• Aside • Figcaption

14. Nye betydninger i 5’ern
• B – stylistically offset
• I – in an alternate tone of voice
• Em – stress emphasis
• Strong – strong importance

15. Lagdelt kode
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

16. DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo1%20-%20HTML/
http://bit.ly/9Po4mV

17. Lagdelt kode
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

18. DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo2%20-%20CSS/
http://bit.ly/9LXt5m

19. http://dowebsitesneedtolookexactlythesameineverybrowser.com/

22. ALT!

23. • Offline Storage
• Drag-and-drop
• Websockets
•
•
Canvas
Geolocation
≠ HTML5
• WebSQL
• Web Workers
• + Flere

24. WebForms 2.0 - Nye input types
• Tel • Time
• Email • Date
• Url • Datetime
• Range • Datetime-local
• Week
• Number
• Month
• Color
• Search

25. Nye attributter
• Autocomplete • Pattern
• Max - Min • Step
• Multiple • List
• Required
• Autofocus
• Placeholder

26. DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo3%20-%20Webforms/
http://bit.ly/b90OTz

29. • Javascript-bibliotek
• Progressive enhancement
• Feature sniffing
– Med CSS
– Med Javascript

33. Lagdelt kode
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

34. DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo4%20-%20JS/
http://bit.ly/cvB4Om

35. Lagdelt kode
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

36. Takk for oss!
Pål Eirik Strøm Hege Røkenes
Webutvikler Frontend-utvikler
@peirix @hegerokenes
peirix@gmail.com hege@rokenes.com

37. Spørsmål?

38. Web meetup?
www.meetup.com/grensesnittet