frontend webutvikling
DESCRIPTION
Slides from talk given at Trondheim XP and Agile 4th of October 2010. by @peirix ang @hegerokenesTRANSCRIPT
Frontend webutvikling - hvordanskrive god HTML, CSS og JavaScript
En innføring i lagdeling, strukturering av kode og progressive enhancement
Hege RøkenesFrontend-utvikler@[email protected]
Pål Eirik StrømWebutvikler@[email protected]
www.bennett.no@bennett_tweet
facebook.com/Bennett.Reklame
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
Progressive enhancement
• Basis funksjonalitet• Universell utforming• Solid og smidig grunnlag• Bygge på for å forbedre brukeropplevelsen
Lagdelt kode
InformasjonslagHTML
PresentasjonslagCSS
Oppførsel og animasjonslagJS
XHTML 2 vs HTML5
(DEMO)
To quote or not to quote
Semantisk HTML
• Header• Blockquote• Footer• Nav• Caption• Article• Code• Section• Aside
• Thead• Tbody• Tfooter• Hgroup• Small• Abbr• Time• Figure
• Figcaption
Semantisk HTML
• Header• Blockquote• Footer• Nav• Caption• Article• Code• Section• Aside
• Thead• Tbody• Tfooter• Hgroup• Small• Abbr• Time• Figure
• Figcaption
Nye betydninger i 5’ern
• B – stylistically offset• I – in an alternate tone of voice• Em – stress emphasis• Strong – strong importance
Lagdelt kode
InformasjonslagHTML
PresentasjonslagCSS
Oppførsel og animasjonslagJS
DEMOhttp://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo1%20-%20HTML/
http://bit.ly/9Po4mV
Lagdelt kode
InformasjonslagHTML
PresentasjonslagCSS
Oppførsel og animasjonslagJS
DEMOhttp://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• WebSQL• Web Workers• + Flere
≠ HTML5
WebForms 2.0 - Nye input types
• Tel• Email• Url• Range• Number
• Time• Date• Datetime• Datetime-local• Week• Month• Color• Search
Nye attributter
• Autocomplete• Max - Min• Multiple• Required• Autofocus• Placeholder
• Pattern• Step• List
DEMOhttp://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo3%20-%20Webforms/
http://bit.ly/b90OTz
• Javascript-bibliotek• Progressive enhancement• Feature sniffing
– Med CSS– Med Javascript
Lagdelt kode
InformasjonslagHTML
PresentasjonslagCSS
Oppførsel og animasjonslagJS
DEMOhttp://bit.ly/cvB4Om
http://github.com/hegerokenes/FrontEndDemoXP/tree/master/Demo4%20-%20JS/
Lagdelt kode
InformasjonslagHTML
PresentasjonslagCSS
Oppførsel og animasjonslagJS
Hege RøkenesFrontend-utvikler@[email protected]
Pål Eirik StrømWebutvikler@[email protected]
Takk for oss!
Spørsmål?
Web meetup?
www.meetup.com/grensesnittet