+ Interaktion 1 Stefan Grage. + DAGENS MÅL  HTML5 recap  Layoutdiagrammer revisited  Layout & grids  Lyd & video på web  Canvas & animation – vil.

Præsentationer af emnet: "+ Interaktion 1 Stefan Grage. + DAGENS MÅL  HTML5 recap  Layoutdiagrammer revisited  Layout & grids  Lyd & video på web  Canvas & animation – vil."— Præsentationens transcript:

1 + Interaktion 1 Stefan Grage

2 + 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”?

3 + 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!

4 + HTML5

5 + 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!)

6 + 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

7 + Status: html5readiness.com & caniuse.com

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

9 + 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…

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

11 + Lad os se et eksempel…  HTML struktur eksempel:  http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel1/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel1/

12 + IE 8 og tidligere…  Ingen styling-regler “hænger fast”  Workaround:  http://remysharp.com/2009/01/07/html5-enabling-script/ http://remysharp.com/2009/01/07/html5-enabling-script/  Eller initialisering af elementer via JS  document.createElement(‘header’)  Osv. for resten af elementerne

13 + Layout & grids

14 + 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!

15 + Lav et layoutdiagram!

16 + 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

17 +

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

19 + 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…

20 + 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

21 + 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: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel2/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel2/

22 + Video & lyd

23 + 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: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel3/ http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel3/  OBS! Jeg har udeladt min video af pladshensyn på serveren!

24 + 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 http://www.w3schools.com/TAGS/tag_video.asp

25 + Konvertering  Miro Video Converter kan bruges til at oprette de forskellige filtyper! http://www.mirovideoconverter.com/http://www.mirovideoconverter.com/ WebM video Ogg video MP4 video

26 + 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

27 + Full screen baggrund  Via CSS  Kode: Se eksempel 3, version 3  http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/e ksempel3/version3.html

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

29 + 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

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

31 + Opgave(r)

32 +  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!

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