Frontend webutvikling - hvordan
skrive god HTML, CSS og JavaScript
  En innføring i lagdeling, strukturering
  av kode og ...
Pål Eirik Strøm           Hege Røkenes
Webutvikler               Frontend-utvikler
@peirix                   @hegerokenes
...
Agenda
•   Introduksjon til progressive enhanchement
•   Lagdeling av frontendkode
•   HTML – 5’ern, semantisk kode
•   CS...
Progressive enhancement
•   Basis funksjonalitet
•   Universell utforming
•   Solid og smidig grunnlag
•   Bygge på for å ...
Lagdelt kode
        Oppførsel og animasjonslag
        JS



       Presentasjonslag
       CSS




       Informasjonsla...
XHTML 2 vs HTML5
( DEMO)
To quote or not to quote
Semantisk HTML
•   Header        •   Thead
•   Blockquote    •   Tbody
•   Footer        •   Tfooter
•   Nav           •  ...
Semantisk HTML
•   Header        •   Thead
•   Blockquote    •   Tbody
•   Footer        •   Tfooter
•   Nav           •  ...
Nye betydninger i 5’ern
•   B – stylistically offset
•   I – in an alternate tone of voice
•   Em – stress emphasis
•   St...
Lagdelt kode
        Oppførsel og animasjonslag
        JS



       Presentasjonslag
       CSS




       Informasjonsla...
DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo1%20-%20HTML/


                 http://bit.ly/9Po4mV
Lagdelt kode
        Oppførsel og animasjonslag
        JS



       Presentasjonslag
       CSS




       Informasjonsla...
DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo2%20-%20CSS/


                http://bit.ly/9LXt5m
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
ALT!
•   Offline Storage
•   Drag-and-drop
•   Websockets
•
•
    Canvas
    Geolocation
                      ≠ HTML5
•   WebS...
WebForms 2.0 - Nye input types
•   Tel           •   Time
•   Email         •   Date
•   Url           •   Datetime
•   Ra...
Nye attributter
•   Autocomplete   • Pattern
•   Max - Min      • Step
•   Multiple       • List
•   Required
•   Autofocu...
DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo3%20-%20Webforms/


                    http://bit.ly/b9...
• Javascript-bibliotek
• Progressive enhancement
• Feature sniffing
  – Med CSS
  – Med Javascript
Lagdelt kode
        Oppførsel og animasjonslag
        JS



       Presentasjonslag
       CSS




       Informasjonsla...
DEMO
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo4%20-%20JS/


                 http://bit.ly/cvB4Om
Lagdelt kode
        Oppførsel og animasjonslag
        JS



       Presentasjonslag
       CSS




       Informasjonsla...
Takk for oss!

Pål Eirik Strøm    Hege Røkenes
Webutvikler        Frontend-utvikler
@peirix            @hegerokenes
peirix...
Spørsmål?
Web meetup?

www.meetup.com/grensesnittet
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Frontend webutvikling
Upcoming SlideShare
Loading in …5
×

Frontend webutvikling

1,664 views
1,603 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
1,664
On SlideShare
0
From Embeds
0
Number of Embeds
69
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontend webutvikling

  1. 1. Frontend webutvikling - hvordan skrive god HTML, CSS og JavaScript En innføring i lagdeling, strukturering av kode og progressive enhancement
  2. 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
  3. 3. 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
  4. 4. Progressive enhancement • Basis funksjonalitet • Universell utforming • Solid og smidig grunnlag • Bygge på for å forbedre brukeropplevelsen
  5. 5. Lagdelt kode Oppførsel og animasjonslag JS Presentasjonslag CSS Informasjonslag HTML
  6. 6. XHTML 2 vs HTML5
  7. 7. ( DEMO) To quote or not to quote
  8. 8. Semantisk HTML • Header • Thead • Blockquote • Tbody • Footer • Tfooter • Nav • Hgroup • Caption • Small • Article • Abbr • Code • Time • Section • Figure • Aside • Figcaption
  9. 9. Semantisk HTML • Header • Thead • Blockquote • Tbody • Footer • Tfooter • Nav • Hgroup • Caption • Small • Article • Abbr • Code • Time • Section • Figure • Aside • Figcaption
  10. 10. Nye betydninger i 5’ern • B – stylistically offset • I – in an alternate tone of voice • Em – stress emphasis • Strong – strong importance
  11. 11. Lagdelt kode Oppførsel og animasjonslag JS Presentasjonslag CSS Informasjonslag HTML
  12. 12. DEMO http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo1%20-%20HTML/ http://bit.ly/9Po4mV
  13. 13. Lagdelt kode Oppførsel og animasjonslag JS Presentasjonslag CSS Informasjonslag HTML
  14. 14. DEMO http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo2%20-%20CSS/ http://bit.ly/9LXt5m
  15. 15. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  16. 16. ALT!
  17. 17. • Offline Storage • Drag-and-drop • Websockets • • Canvas Geolocation ≠ HTML5 • WebSQL • Web Workers • + Flere
  18. 18. WebForms 2.0 - Nye input types • Tel • Time • Email • Date • Url • Datetime • Range • Datetime-local • Week • Number • Month • Color • Search
  19. 19. Nye attributter • Autocomplete • Pattern • Max - Min • Step • Multiple • List • Required • Autofocus • Placeholder
  20. 20. DEMO http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo3%20-%20Webforms/ http://bit.ly/b90OTz
  21. 21. • Javascript-bibliotek • Progressive enhancement • Feature sniffing – Med CSS – Med Javascript
  22. 22. Lagdelt kode Oppførsel og animasjonslag JS Presentasjonslag CSS Informasjonslag HTML
  23. 23. DEMO http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo4%20-%20JS/ http://bit.ly/cvB4Om
  24. 24. Lagdelt kode Oppførsel og animasjonslag JS Presentasjonslag CSS Informasjonslag HTML
  25. 25. Takk for oss! Pål Eirik Strøm Hege Røkenes Webutvikler Frontend-utvikler @peirix @hegerokenes peirix@gmail.com hege@rokenes.com
  26. 26. Spørsmål?
  27. 27. Web meetup? www.meetup.com/grensesnittet

×