frontend webutvikling

Frontend webutvikling - hvordanskrive god HTML, CSS og JavaScript

En innføring i lagdeling, strukturering av kode og progressive enhancement

Hege RøkenesFrontend-utvikler@hegerokeneshege@rokenes.com

Pål Eirik StrømWebutvikler@peirixpeirix@gmail.com

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@hegerokeneshege@rokenes.com

Pål Eirik StrømWebutvikler@peirixpeirix@gmail.com

Takk for oss!

Spørsmål?

Web meetup?

www.meetup.com/grensesnittet