Interaktion 1
Download
1 / 33

Interaktion 1 - PowerPoint PPT Presentation


  • 130 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Interaktion 1' - prentice


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Interaktion 1

Interaktion 1

Stefan Grage


Dagens m l
DAGENS MÅL

  • HTML5 recap

  • Layoutdiagrammer revisited

  • Layout & grids

  • Lyd & video på web

  • Canvas & animation – viljegskånejer for!

  • Web startup opgave(r)

  • Evt. “repetition”?


Interaktion stetik
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!



Hva er html5
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!)


Html5 status
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



Kan vi bruge det
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!


Hvorfor bruge det
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…


Dokumentstruktur
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


Lad os se et eksempel
Lad os se et eksempel…

  • HTML struktureksempel:

  • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel1/


Ie 8 og tidligere
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



Layoutdiagrammer revisited
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!


Lav et layoutdiagram
Lav et layoutdiagram!


R kker og kolonner
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


Layout grids1
Layout & grids

  • Detkræver en del HTML & CSS at lave/kodelayoutet

  • Genvej: Brug et Grid system

  • Eksempelvis: 960.gs


Anvend 960 gs
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…


Hvordan bruges 960 gs
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


Forskydning af element
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/



Lyd og video
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!


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


Konvertering
Konvertering

  • Miro Video Converter kanbrugestilat oprette de forskelligefiltyper! http://www.mirovideoconverter.com/

MP4 video

Oggvideo

WebMvideo


Video attributter v rdier
<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


Full screen baggrund
Full screen baggrund

  • Via CSS

  • Kode: Se eksempel 3, version 3

  • http://stefangrage.keaweb.dk/digital_aestetik_f2013/dag2/eksempel3/version3.html


Video kontrol
Video kontrol

  • Gøres med JS

  • Se eksempel 3, version 4


Alternativer
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.


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>


Opgave r
Opgave(r)


Opgave r1
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!


Repetition
Repetition?

  • Hvadsigeri?

  • Repetition af HTML & CSS kl. 12.00?


ad