Midea html5 whats_the_big_deal
-
Upload
scottsayre -
Category
Education
-
view
794 -
download
3
Transcript of Midea html5 whats_the_big_deal
![Page 1: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/1.jpg)
105.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
What’s the Big Deal?
1
![Page 2: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/2.jpg)
205.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Web Sites, Web Apps and Apps
>1993 - 2006 “www” HTML model
>2007 Original iPhone web App model
>2008 Apple App store
>2009 “Apps are everything”
>2010 “The Web is Dead”
>2011 HTML5 “App, Web App, Web site, what’s the difference”?
2
![Page 3: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/3.jpg)
305.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Native App vs. Web App “2010”
>Native App
– Must be downloaded
– Dedicated custom code
– Onboard content
– May use network content
– Can be sold
– Access to hardware
3
![Page 4: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/4.jpg)
405.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Native App vs. Web App “2010”
>Web App
– Requires network
– Content up to date
– Limited to browser
– Device independent
– No access to hardware
– Access from any device
4
![Page 5: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/5.jpg)
505.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?In 2011...
Native Apps are preferred for distribution and ease of use.
Web Apps are preferred for their universal accessibility, ease of development and maintenance.
5
![Page 6: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/6.jpg)
605.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
HTML5 someplace in between today’s web apps and native apps.
6
![Page 7: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/7.jpg)
705.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
HTML5 can make web pages performlike native apps.
7
=
![Page 8: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/8.jpg)
805.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
HTML5 can make web pages performlike Flash applications.
8
=
![Page 9: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/9.jpg)
905.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
HTML5 Formal Definition
HTML 5 is the next revision of the Hypertext Markup Language (HTML), the standard programming language for describing the contents and appearance of Web pages.
9
![Page 10: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/10.jpg)
10
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
HTML5 “Street” Definition
A web app or site using:
> HTML5 - instructions
> Cascading Style Sheets 3 - design
> Javascript - interactivity
10
![Page 11: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/11.jpg)
11
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Let’s look at an example:
11
http://ipad.lookbookhd.com/glide.htm
![Page 12: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/12.jpg)
12
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Key Features of “HTML5”
>Embedded audio
>Embedded video
>Canvas drawing tools
>Offline web applications
>Local storage
>Geolocation
12
![Page 13: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/13.jpg)
13
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Embedded audio
>Audio files in the MP3, WAV and OGG formats can be embedded with the <audio> tag.
>No Quicktime or Flash plug-in required
13
![Page 14: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/14.jpg)
14
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
<audio> example
14
http://developer.apple.com/safaridemos/showcase/audio/
![Page 15: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/15.jpg)
15
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Embedded video
>Video files in the Theora and MP4 formats can be embedded with the <video> tag.
>No Quicktime or Flash plug-in required
15
![Page 16: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/16.jpg)
16
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
<video> example
16
http://developer.apple.com/safaridemos/MovieTrailers/
![Page 17: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/17.jpg)
17
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
<video> VR rotation example
17
VR Rotation
![Page 18: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/18.jpg)
18
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?Canvas drawing tools
>A bitmap <canvas> which can be used for rendering graphs, game graphics, or other visual images on the fly.
>No Quicktime or Flash plug-in required
18
![Page 19: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/19.jpg)
19
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
<canvas> example
19
http://www.robodesign.ro/paintweb/trunk/demos/demo1.html
![Page 20: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/20.jpg)
20
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Offline web applications
>HTML5 allows applications to store a set of files locally using a manifest list. These files can be accessed automatically when the application senses it does not have a network connection.
20
![Page 21: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/21.jpg)
21
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Local storage
>Applications can store session information locally on your computer so the application can access it later.
>Different from web cookies, this information can not be transmitted back to the web server.
21
![Page 22: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/22.jpg)
22
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Offline application and local storage example:
22
http://developer.apple.com/safaridemos/OfflineCalendar/
![Page 23: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/23.jpg)
23
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Geolocation
>HTML5’s geolocation API can determine your physical location based on your internet access point.
>HTML5 applications using geolocation will ask the user’s permission before sharing their location.
23
![Page 24: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/24.jpg)
24
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Geolocation Example:
24
http://html5demos.com/geo
![Page 25: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/25.jpg)
25
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
More Resources
>Demos– http://developer.apple.com/safaridemos/
– http://html5demos.com/
> Reading
– http://diveintohtml5.org
– http://ohtml5.com
25
![Page 26: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/26.jpg)
26
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Things to consider
>Not compatible with older browsers
> Its not all of nothing
>Current browsers have different limitations
>Capabilities and compatibilities are changing daily.
>Mobile browsers compatibility different than desktop browsers
26
![Page 27: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/27.jpg)
27
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Test your browsers
http://html5test.com/
27
![Page 28: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/28.jpg)
28
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Pachyderm, HTML5 and the iPad
28
![Page 29: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/29.jpg)
29
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Progress to date:
>Micro-funded the development of HTML5 versions of the 10 main templates
>Prototypes of four templates: Exploration Entry, Commentary, Enlargement and Slider developed
>Currently evaluating prototype
>Goal is to make templates backwards compatible
29
![Page 30: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/30.jpg)
30
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Next steps:
>Assess UI and accessibility options
> Improve speed and caching
>Complete remaining six templates by late summer
>Release templates and instructions to community through Pachyforge.org
30
![Page 31: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/31.jpg)
31
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
A Quick Demo
http://www.pachyforge.org/html5demo/
31
![Page 32: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/32.jpg)
32
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Advantages:
>Plays on all HTML5 devices (iPhone)
>Full screen video
>Select and copy text
> “Bookmarkable” pages
>Customizable sound effects
>Easier to modify template design and text
> Incorporating gestures (pinching, etc.)
32
![Page 33: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/33.jpg)
33
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Challenges:
>Closed captioning can not be overlayed
>Video must be replaced with MP4
>Images can not overlay video
>No screen to screen transitions
>Can not be saved to iPad
33
![Page 34: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/34.jpg)
34
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Presentation Conversion
>Drop one folder and two files into presentation
>Add or replace any FLV movies with MP4 movies
>That’s it!
>Presentations can run in both Flash or HTML5!
34
![Page 35: Midea html5 whats_the_big_deal](https://reader033.fdocuments.net/reader033/viewer/2022052505/5554ddd1b4c9051b6e8b51d6/html5/thumbnails/35.jpg)
35
05.04.2011Scott Sayre MIDEA 2011 Slide
HTML5: What’s the Big Deal?
Support for the Project
>The follow organizations are providing generous support for the project:– MIDEA / NMC
– California State University
– The Walters Art Museum
– University of Minnesota
– Oregon State University
– SFMOMA
– Tang Museum
35