Behind Interactive Media
description
Transcript of Behind Interactive Media
![Page 1: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/1.jpg)
BehindInteractiveMedia
![Page 2: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/2.jpg)
Agenda1. Mobiel internet2. Mobiele content3. Apps4. Opleveren
![Page 3: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/3.jpg)
1. MOBIEL INTERNET
![Page 4: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/4.jpg)
WAP
![Page 5: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/5.jpg)
WAP- Gebaseerd op WML
> Wireless Markup Language
![Page 6: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/6.jpg)
UMTSGeïntroduceerd in 2003- Meer snelheid > Meer mogelijkheden
![Page 7: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/7.jpg)
Mogelijkheden- Volledige ondersteuning
HTML, CSS, Javascript
- Full-Color, Hoge resolutie
![Page 8: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/8.jpg)
2. MOBIELE CONTENT
![Page 9: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/9.jpg)
Desktop:- Horizontale opbouw
- Veel ruimte: letters leesbaar / knoppen met muis klikbaar (precies)
- Rijke interactie (mouse-over)
![Page 10: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/10.jpg)
Mobiel:- Verticale opbouw
- Kleine letters / Kleine knoppen
- Weinig interactie (tap/mobiel-keyboard)
![Page 11: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/11.jpg)
Verticaal
![Page 12: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/12.jpg)
Kan..
![Page 13: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/13.jpg)
Horizontaal
![Page 14: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/14.jpg)
Niet zomaar..
![Page 15: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/15.jpg)
De opties:
![Page 16: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/16.jpg)
Mobiele versie
![Page 17: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/17.jpg)
App
![Page 18: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/18.jpg)
Opties:- Presentatielaag aanpassen (CSS)- 100% Mobiele variant- App ontwikkelen
![Page 19: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/19.jpg)
Presentatielaag
- Aparte CSS:
<link rel="stylesheet” href=“mobile.css”
type="text/css” media="handheld" />
![Page 20: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/20.jpg)
Presentatielaag
- CSS “Tweaks”:
body: { font-size: 12px; }
@media only screen and (max-device-width: 480px) {
body: { font-size: 32px; }}
![Page 21: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/21.jpg)
Mobiele variant
- Op basis van “User Agent” onderscheid maken
![Page 22: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/22.jpg)
User AgentInformatie in de Request Header:
- HTTP_USER_AGENT: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5
- http://www.whatsmyuseragent.com
![Page 23: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/23.jpg)
Experimenteren- Safari > Developer Toolbar > User
Agent- Firefox > Plugin > “User Agent
Switcher”
![Page 24: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/24.jpg)
![Page 25: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/25.jpg)
Gebruiken- WordPress CSS
- Experimenteer met CSS “tweaks”
- WordPress plugin: WPTouch
![Page 26: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/26.jpg)
3. APPS
![Page 27: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/27.jpg)
100% experience
![Page 28: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/28.jpg)
Apps+ Op het apparaat toegesneden
presentatie
+ Integratie met hardware(interface / camera / contacten / gps)
![Page 29: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/29.jpg)
Apps- Elk platform een eigen App
- iOS, Android, BlackBerry, Windows Mobile, Symbian..
![Page 30: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/30.jpg)
iOS vs Android
bron: netmarketshare.com
![Page 31: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/31.jpg)
Apps Ontwikkelen- SDK’s beschikbaar vanuit
fabrikanten én community
![Page 32: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/32.jpg)
Apps Ontwikkelen
http://developer.apple.com/videos/iphone/profiles/#video-demiforce
![Page 33: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/33.jpg)
Trainyard
http://struct.ca/2010/the-story-so-far/
![Page 34: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/34.jpg)
4. OPLEVEREN
![Page 35: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/35.jpg)
- Alle weekopdrachten compleet
- Een weblogpost met je Google Analytics rapport
- Een weblogpost met wat bijzonder is aan je oplevering
- Deadline maandag 1 november – 17:30
Opleveren
![Page 37: Behind Interactive Media](https://reader036.fdocuments.nl/reader036/viewer/2022062520/56816374550346895dd4526a/html5/thumbnails/37.jpg)
Vakgroepwebsitehttp://fed.cmi.hro.nl/• Modulewijzer• Lesmateriaal• Huiswerkopdrachten• Contactgegevens docenten