1 / 33

Interaktion 1

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

prentice
Download Presentation

Interaktion 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interaktion 1 Stefan Grage

  2. DAGENS MÅL • HTML5 recap • Layoutdiagrammer revisited • Layout & grids • Lyd & video på web • Canvas & animation – viljegskånejer for! • Web startup opgave(r) • Evt. “repetition”?

  3. INTERAKTION & ÆSTETIK • Teknologipåvirker design • Digitaliseringgørdetnemt at publicere… • … Hvilketførertil en demokratiseringaf design • … eller en laverefællesnævner for design…? • Design er en vigtigdisciplin! Vi skalværepåforkant med udviklingensommultimediedesignere! • Derfor: HTML5!

  4. HTML5

  5. HVA’ ER HTML5? • Stadig“bare” HTML • Men fleremuligheder • 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 <font> og <center>) • 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 • Anvendelseafhængerafbrowserproducenterne, ogbrugernesopdateringerafbrowsere… • Store dele eralleredeimplementeret

  7. Status: html5readiness.com & caniuse.com

  8. Kan vi brugedet? • JA! Sålænge vi gørdetfornuftigt… • … Heltligesom med CSS3, JS, jQuery mm. • Største problem: http://fdim.dk/statistik/teknik/browserbarometer • IE8!

  9. Hvorforbrugedet? • Detsemantiske web! (Web 3.0) • Semantik = lærenomordsbetydning • Problem: Informationsmængdenoverstigerevnentil at benytte den • Derforskal vi kendeinformationernesbetydning for at skabeforbindelsemellemdem • I HTML5 hjælper de strukturelleelementer med at definereindholdetsbetydning • Sådeter et skridtiretning mod fremtidens internet…

  10. Dokumentstruktur • Doctype: <!DOCTYPE html> • Strukturelleelementer: • <nav> • <header> • <section> • <article> • <aside> • <footer> • <div id=“”> eller <div class=“”> • Browseretilladderalleelementer – selvom de ikkekenderdem – bort set fra IE 8 ogtidligere

  11. Lad os se et eksempel… • HTML struktureksempel: • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel1/

  12. IE 8 ogtidligere… • Ingen styling-regler “hænger fast” • Workaround: • http://remysharp.com/2009/01/07/html5-enabling-script/ • Eller initialiseringafelementer via JS • <script type=“text/javascript>document.createElement(‘header’)</script> • Osv. for restenafelementerne

  13. Layout & grids

  14. Layoutdiagrammer revisited • Vi kender de strukturelleelementer – nu skal vi til at anvendedemtil at lave layouts! • Detervigtigt, når vi skaltil at arbejde med grid systemer!

  15. Lav et layoutdiagram!

  16. Rækkerogkolonner • Bruges til at placere <div>’erogstrukturelleelementerihinanden • Ersitetrække- ellerkolonne-centreret? • Dernæst: Definer først ENTET rækkerellerkolonner • Definer derefterkolonnerihverenkeltrække – ellerrækkerikolonnerne

  17. Layout & grids • Detkræver en del HTML & CSS at lave/kodelayoutet • Genvej: Brug et Grid system • Eksempelvis: 960.gs

  18. Anvend 960.gs • Opret en mappetil et nyt site, ogopret en index.htmlfil (HTML5) • Download 960.gs • Udpakfilerne,åbnmappen “code”, ogåbnderimappen “CSS” • Kopierfilerne 960.css, reset.cssogtext.css over iditnye site, oginkluderdemi head-delenafditdokument • 960.gs er nu klartil at layoutedit site…

  19. Hvordanbruges 960.gs? • 960.gs er en række CSS-klasser, der alleredeerdefineret. Vi arbejder med et 12-kolonnet grid med 60px kolonner, med 10 pxmargentilhøjreogvenstre • Gørheledit site klarvedat slutte alt indholdeti <body>’en indi en <div class="container_12"> • Dernæstkan du tilføjeklasserne: class=“grid_1”, class=“grid_2”, class=“grid_4”, class=“grid_5”, class=“grid_6” … class=“grid_12” tilalle din strukturelleelementer, for at give dembredder

  20. Forskydningaf element • Du kanforskyde et element ved at brugeklasserne: class=“push_1”, class=“push_2”, class=“push_2” … class=“push_11” • Hverrækkebørsluttes med en “clear” div: • <div class="clear"></div> • Se desudenmiteksempel: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel2/

  21. Video & lyd

  22. Lydog video • Vi anvenderdet HTML5 tagget <video> til at lave en baggrundsvideo • Førstogfremmest: Inkluder en video: • Se kode for eksempel 3: http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel3/ • OBS! Jegharudeladt min video afpladshensynpåserveren!

  23. OBS! • Ikkeallebrowsereunderstøtter de samme video formater. • Derforerdetnødvendigt at tilbydevideoerne I forskelligeformater • Oversigt over browserunderstøttelse http://www.w3schools.com/TAGS/tag_video.asp

  24. Konvertering • Miro Video Converter kanbrugestilat oprette de forskelligefiltyper! http://www.mirovideoconverter.com/ MP4 video Oggvideo WebMvideo

  25. <video attributter=“værdier”> Attributter: Værdi: audio ‘muted’ autoplay‘autoplay’ controls ‘controls’ loop ‘loop’ preload ‘auto’, ‘metadata’, ‘none’ srcvideoensURL poster billed URL (placeholder) width, height højdeogbreddei pixel

  26. Full screen baggrund • Via CSS • Kode: Se eksempel 3, version 3 • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel3/version3.html

  27. Video kontrol • Gøres med JS • Se eksempel 3, version 4

  28. Alternativer • Der er mange video playerederude. Skulle du have lysttil at prøvenogetandetend den præsenteredefremgangsmåde, kan du f.eks. PrøveTubular, der kanafspilleYoutubevideoer.

  29. Lyd • <audio>benyttestil at embeddelydpåsiden. • Fungerereftersammeprincipsom<video>.. • Eksempel: <audio controls>  <source src="horse.ogg" type="audio/ogg" />  <source src="horse.mp3" type="audio/mp3" />  Din browser understøtterikke html5 audio.</audio>

  30. Opgave(r)

  31. Opgave(r) • Lav et website (valgfritemne/kunde). Der erfølgendekrav: • Du skal lave et layoutdiagram, somogsåblivervistpådit website (fint med en thumbnail, der linker til en stor jpg-fil) • Detskalanvende et gridsystem (960.gs) • Der skalvære en video-baggrundpådet • God arbejdslyst!

  32. Repetition? • Hvadsigeri? • Repetition af HTML & CSS kl. 12.00?

More Related