+ Interaktion 1 Stefan Grage

+ DAGENS MÅL  HTML5 recap  Layoutdiagrammer revisited  Layout & grids  Lyd & video på web  Canvas & animation – vil jeg skåne jer for!  Web startup opgave(r)  Evt. “repetition”?

+ INTERAKTION & ÆSTETIK  Teknologi påvirker design  Digitalisering gør det nemt at publicere…  … Hvilket fører til en demokratisering af design  … eller en lavere fællesnævner for design…?  Design er en vigtig disciplin! Vi skal være på forkant med udviklingen som multimediedesignere!  Derfor: HTML5!

+ HTML5

+ HVA’ ER HTML5?  Stadig“bare” HTML  Men flere muligheder  Rich media support (Video, Audio, Canvas)  Udvidet API grænseflade  Forbedret semantisk markup. (screen readers, søgemaskiner)  Redefinerer uhensigtsmæssige elementer  At fjerne forældede elementer (fx og )  Baglæns kompatibelt (Skift til HTML5 doctype og du er igang!)

+ HTML5 status  Udviklingen af HTML5 Styres af W3C og WHATWG  WHATWG (Web Hypertext Application Technology Working Group)  W3C (World Wide Web Consortium)  December 2012: W3C candidate recommendation  Slut 2014: W3C recommendation  Anvendelse afhænger af browserproducenterne, og brugernes opdateringer af browsere…  Store dele er allerede implementeret

+ Status: html5readiness.com & caniuse.com

+ Kan vi bruge det?  JA! Så længe vi gør det fornuftigt…  … Helt ligesom med CSS3, JS, jQuery mm.  Største problem:  IE8!

+ Hvorfor bruge det?  Det semantiske web! (Web 3.0)  Semantik = læren om ords betydning  Problem: Informationsmængden overstiger evnen til at benytte den  Derfor skal vi kende informationernes betydning for at skabe forbindelse mellem dem  I HTML5 hjælper de strukturelle elementer med at definere indholdets betydning  Så det er et skridt i retning mod fremtidens internet…

+ Dokumentstruktur  Doctype:  Strukturelle elementer:   eller  Browsere tilladder alle elementer – selvom de ikke kender dem – bort set fra IE 8 og tidligere

+ Lad os se et eksempel…  HTML struktur eksempel:  ksempel1/ ksempel1/

+ IE 8 og tidligere…  Ingen styling-regler “hænger fast”  Workaround:   Eller initialisering af elementer via JS  document.createElement(‘header’)  Osv. for resten af elementerne

+ Layout & grids

+ Layoutdiagrammer revisited  Vi kender de strukturelle elementer – nu skal vi til at anvende dem til at lave layouts!  Det er vigtigt, når vi skal til at arbejde med grid systemer!

+ Lav et layoutdiagram!

+ Rækker og kolonner  Bruges til at placere ’er og strukturelle elementer i hinanden  Er sitet række- eller kolonne-centreret?  Dernæst: Definer først ENTET rækker eller kolonner  Definer derefter kolonner i hver enkelt række – eller rækker i kolonnerne

+

+ Layout & grids  Det kræver en del HTML & CSS at lave/kode layoutet  Genvej: Brug et Grid system  Eksempelvis: 960.gs960.gs

+ Anvend 960.gs  Opret en mappe til et nyt site, og opret en index.html fil (HTML5)  Download 960.gs  Udpak filerne, åbn mappen “code”, og åbn deri mappen “CSS”  Kopier filerne 960.css, reset.css og text.css over i dit nye site, og inkluder dem i head-delen af dit dokument  960.gs er nu klar til at layoute dit site…

+ Hvordan bruges 960.gs?  960.gs er en række CSS-klasser, der allerede er defineret. Vi arbejder med et 12-kolonnet grid med 60px kolonner, med 10 px margen til højre og venstre  Gør hele dit site klar ved at slutte alt indholdet i ’en ind i en  Dernæst kan du tilføje klasserne: class=“grid_1”, class=“grid_2”, class=“grid_4”, class=“grid_5”, class=“grid_6” … class=“grid_12” til alle din strukturelle elementer, for at give dem bredder

+ Forskydning af element  Du kan forskyde et element ved at bruge klasserne: class=“push_1”, class=“push_2”, class=“push_2” … class=“push_11”  Hver række bør sluttes med en “clear” div:   Se desuden mit eksempel: ksempel2/ ksempel2/

+ Video & lyd

+ Lyd og video  Vi anvender det HTML5 tagget til at lave en baggrundsvideo  Først og fremmest: Inkluder en video:  Se kode for eksempel 3: ksempel3/ ksempel3/  OBS! Jeg har udeladt min video af pladshensyn på serveren!

+ OBS!  Ikke alle browsere understøtter de samme video formater.  Derfor er det nødvendigt at tilbyde videoerne I forskellige formater  Oversigt over browserunderstøttelse

+ Konvertering  Miro Video Converter kan bruges til at oprette de forskellige filtyper! WebM video Ogg video MP4 video

+ Attributter:Værdi: audio ‘muted’ autoplay‘autoplay’ controls‘controls’ loop‘loop’ preload‘auto’, ‘metadata’, ‘none’ srcvideoens URL posterbilled URL (placeholder) width, heighthøjde og bredde i pixel

+ Full screen baggrund  Via CSS  Kode: Se eksempel 3, version 3  ksempel3/version3.html

+ Video kontrol  Gøres med JS  Se eksempel 3, version 4

+ Alternativer  Der er mange video playere derude. Skulle du have lyst til at prøve noget andet end den præsenterede fremgangsmåde, kan du f.eks. Prøve Tubular, der kan afspille Youtube videoer.Tubular

+ Lyd  benyttes til at embedde lyd på siden.  Fungerer efter samme princip som..  Eksempel: Din browser understøtter ikke html5 audio.

+ Opgave(r)

+  Lav et website (valgfrit emne/kunde). Der er følgende krav:  Du skal lave et layoutdiagram, som også bliver vist på dit website (fint med en thumbnail, der linker til en stor jpg-fil)  Det skal anvende et gridsystem (960.gs)  Der skal være en video-baggrund på det  God arbejdslyst!

+ Repetition?  Hvad siger i?  Repetition af HTML & CSS kl ?