July 13, 2011 acrossthinlines.com | technopoint.info 3
Client/Server
Mainframe
Web Applications
Reach
Global
Rich
Text UI Integrated media GUI
1992
1998
2004+
Rich Internet
Applications
2007+
Rich Experience
Applications
Slide 4
Slide 4 text
July 13, 2011 acrossthinlines.com | technopoint.info 4
Slide 5
Slide 5 text
July 13, 2011 acrossthinlines.com | technopoint.info 5
Slide 6
Slide 6 text
FACTORS THAT INFLUENCE MOBILE UI
Compact Screen Size
July 13, 2011 acrossthinlines.com | technopoint.info 6
h"p://paperpencilpixel.wordpress.com/2011/07/08/things-‐to-‐know-‐before-‐ge?ng-‐into-‐applica@on-‐user-‐interface/
Slide 7
Slide 7 text
FACTORS THAT INFLUENCE MOBILE UI
Limited Memory
July 13, 2011 acrossthinlines.com | technopoint.info 7
h"p://paperpencilpixel.wordpress.com/2011/07/08/things-‐to-‐know-‐before-‐ge?ng-‐into-‐applica@on-‐user-‐interface/
Slide 8
Slide 8 text
FACTORS THAT INFLUENCE MOBILE UI
Only one application at a time
July 13, 2011 acrossthinlines.com | technopoint.info 8
h"p://paperpencilpixel.wordpress.com/2011/07/08/things-‐to-‐know-‐before-‐ge?ng-‐into-‐applica@on-‐user-‐interface/
Slide 9
Slide 9 text
FACTORS THAT INFLUENCE MOBILE UI
Only one view at a time
July 13, 2011 acrossthinlines.com | technopoint.info 9
h"p://paperpencilpixel.wordpress.com/2011/07/08/things-‐to-‐know-‐before-‐ge?ng-‐into-‐applica@on-‐user-‐interface/
Slide 10
Slide 10 text
FACTORS THAT INFLUENCE MOBILE UI
Minimal Onscreen assistance
July 13, 2011 acrossthinlines.com | technopoint.info 10
h"p://paperpencilpixel.wordpress.com/2011/07/08/things-‐to-‐know-‐before-‐ge?ng-‐into-‐applica@on-‐user-‐interface/
Slide 11
Slide 11 text
July 13, 2011 acrossthinlines.com | technopoint.info 11
Slide 12
Slide 12 text
MOBILE APPLICATION TYPES
Native Applications
July 13, 2011 acrossthinlines.com | technopoint.info 12
Slide 13
Slide 13 text
MOBILE APPLICATION TYPES
Web Applications
July 13, 2011 acrossthinlines.com | technopoint.info 13
Slide 14
Slide 14 text
MOBILE APPLICATION TYPES
Hybrid Applications
July 13, 2011 acrossthinlines.com | technopoint.info 14
Slide 15
Slide 15 text
MOBILE APPLICATIONS
iosinspires.me
July 13, 2011 acrossthinlines.com | technopoint.info 15
Slide 16
Slide 16 text
July 13, 2011 acrossthinlines.com | technopoint.info 16
Slide 17
Slide 17 text
July 13, 2011 acrossthinlines.com | technopoint.info 17
Slide 18
Slide 18 text
July 13, 2011 acrossthinlines.com | technopoint.info 18
Slide 19
Slide 19 text
July 13, 2011 acrossthinlines.com | technopoint.info 19
Slide 20
Slide 20 text
July 13, 2011 acrossthinlines.com | technopoint.info 20
Slide 21
Slide 21 text
July 13, 2011 acrossthinlines.com | technopoint.info 21
Slide 22
Slide 22 text
July 13, 2011 acrossthinlines.com | technopoint.info 22
Slide 23
Slide 23 text
July 13, 2011 acrossthinlines.com | technopoint.info 23
Slide 24
Slide 24 text
MOBILE UI PATTERNS
mobile-patterns.com
July 13, 2011 acrossthinlines.com | technopoint.info 24
Slide 25
Slide 25 text
July 13, 2011 acrossthinlines.com | technopoint.info 25
Slide 26
Slide 26 text
July 13, 2011 acrossthinlines.com | technopoint.info 26
Slide 27
Slide 27 text
July 13, 2011 acrossthinlines.com | technopoint.info 27
Slide 28
Slide 28 text
July 13, 2011 acrossthinlines.com | technopoint.info 28
Slide 29
Slide 29 text
July 13, 2011 acrossthinlines.com | technopoint.info 29
Slide 30
Slide 30 text
July 13, 2011 acrossthinlines.com | technopoint.info 30
Slide 31
Slide 31 text
July 13, 2011 acrossthinlines.com | technopoint.info 31
Slide 32
Slide 32 text
July 13, 2011 acrossthinlines.com | technopoint.info 32
1980
1989
1996
1997
1999
2008
ENQUIRE
HTML 1.0
HTML 2.0
HTML 3.2
HTML 4
HTML 5.0
HTML 4.0
Slide 33
Slide 33 text
July 13, 2011 acrossthinlines.com | technopoint.info 33
Slide 34
Slide 34 text
July 13, 2011 acrossthinlines.com | technopoint.info 34
Slide 35
Slide 35 text
July 13, 2011 acrossthinlines.com | technopoint.info 35
Slide 36
Slide 36 text
July 13, 2011 acrossthinlines.com | technopoint.info 36
Slide 37
Slide 37 text
July 13, 2011 acrossthinlines.com | technopoint.info 37
Slide 38
Slide 38 text
July 13, 2011 acrossthinlines.com | technopoint.info 38
Slide 39
Slide 39 text
HTML till now…
July 13, 2011 acrossthinlines.com | technopoint.info 39
HTML 5
Hello world
Slide 40
Slide 40 text
HTML now…
July 13, 2011 acrossthinlines.com | technopoint.info 40
HTML 5
Hello world
Validator?
Head?
Body?
Slide 41
Slide 41 text
SUPPORT DETECTION
diveintohtml5.org/detect.html
July 13, 2011 acrossthinlines.com | technopoint.info 41
Slide 42
Slide 42 text
July 13, 2011 acrossthinlines.com | technopoint.info 42
Slide 43
Slide 43 text
HTML5 ELEMENTS
simon.html5.org/html-elements
July 13, 2011 acrossthinlines.com | technopoint.info 43
Slide 44
Slide 44 text
UNDERSTANDING THE SEMANTICS
diveintohtml5.org/semantics.html
July 13, 2011 acrossthinlines.com | technopoint.info 44
Slide 45
Slide 45 text
July 13, 2011 acrossthinlines.com | technopoint.info 45
Slide 46
Slide 46 text
HTML 4
July 13, 2011 acrossthinlines.com | technopoint.info 46
HTML5