Behind Interactive Media

37
Behind Interactive Media

description

Behind Interactive Media. Agenda. Mobiel internet Mobiele content Apps Opleveren. 1 . MOBIEL INTERNET. WAP. WAP. Gebaseerd op WML > Wireless Markup Language. UMTS. Ge ï ntroduceerd in 2003 - Meer snelheid > Meer mogelijkheden. Mogelijkheden. - PowerPoint PPT Presentation

Transcript of Behind Interactive Media

Page 1: Behind Interactive Media

BehindInteractiveMedia

Page 2: Behind Interactive Media

Agenda1. Mobiel internet2. Mobiele content3. Apps4. Opleveren

Page 3: Behind Interactive Media

1. MOBIEL INTERNET

Page 4: Behind Interactive Media

WAP

Page 5: Behind Interactive Media

WAP- Gebaseerd op WML

> Wireless Markup Language

Page 6: Behind Interactive Media

UMTSGeïntroduceerd in 2003- Meer snelheid > Meer mogelijkheden

Page 7: Behind Interactive Media

Mogelijkheden- Volledige ondersteuning

HTML, CSS, Javascript

- Full-Color, Hoge resolutie

Page 8: Behind Interactive Media

2. MOBIELE CONTENT

Page 9: Behind Interactive Media

Desktop:- Horizontale opbouw

- Veel ruimte: letters leesbaar / knoppen met muis klikbaar (precies)

- Rijke interactie (mouse-over)

Page 10: Behind Interactive Media

Mobiel:- Verticale opbouw

- Kleine letters / Kleine knoppen

- Weinig interactie (tap/mobiel-keyboard)

Page 11: Behind Interactive Media

Verticaal

Page 12: Behind Interactive Media

Kan..

Page 13: Behind Interactive Media

Horizontaal

Page 14: Behind Interactive Media

Niet zomaar..

Page 15: Behind Interactive Media

De opties:

Page 16: Behind Interactive Media

Mobiele versie

Page 17: Behind Interactive Media

App

Page 18: Behind Interactive Media

Opties:- Presentatielaag aanpassen (CSS)- 100% Mobiele variant- App ontwikkelen

Page 19: Behind Interactive Media

Presentatielaag

- Aparte CSS:

<link rel="stylesheet” href=“mobile.css”

type="text/css” media="handheld" />

Page 20: Behind Interactive Media

Presentatielaag

- CSS “Tweaks”:

body: { font-size: 12px; }

@media only screen and (max-device-width: 480px) {

body: { font-size: 32px; }}

Page 21: Behind Interactive Media

Mobiele variant

- Op basis van “User Agent” onderscheid maken

Page 22: Behind Interactive Media

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

Experimenteren- Safari > Developer Toolbar > User

Agent- Firefox > Plugin > “User Agent

Switcher”

Page 24: Behind Interactive Media
Page 25: Behind Interactive Media

Gebruiken- WordPress CSS

- Experimenteer met CSS “tweaks”

- WordPress plugin: WPTouch

Page 26: Behind Interactive Media

3. APPS

Page 27: Behind Interactive Media

100% experience

Page 28: Behind Interactive Media

Apps+ Op het apparaat toegesneden

presentatie

+ Integratie met hardware(interface / camera / contacten / gps)

Page 29: Behind Interactive Media

Apps- Elk platform een eigen App

- iOS, Android, BlackBerry, Windows Mobile, Symbian..

Page 30: Behind Interactive Media

iOS vs Android

bron: netmarketshare.com

Page 31: Behind Interactive Media

Apps Ontwikkelen- SDK’s beschikbaar vanuit

fabrikanten én community

Page 34: Behind Interactive Media

4. OPLEVEREN

Page 35: Behind Interactive Media

- 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 36: Behind Interactive Media

Problemen?Mail >> [email protected]

Geen mail? Geen medelijden.

Page 37: Behind Interactive Media

Vakgroepwebsitehttp://fed.cmi.hro.nl/• Modulewijzer• Lesmateriaal• Huiswerkopdrachten• Contactgegevens docenten