interaktion 1
Download
Skip this Video
Download Presentation
Interaktion 1

Loading in 2 Seconds...

play fullscreen
1 / 33

Interaktion 1 - PowerPoint PPT Presentation


  • 132 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!
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!
slide24
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.
slide30
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 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?