Your SlideShare is downloading. ×
  • Like
Frontend webutvikling
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Frontend webutvikling

  • 1,508 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,508
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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