Your SlideShare is downloading. ×
0
YouTube Mobile WebAppOn the Edge of HTML5    Google Confidential and ProprietaryGoogle Confidential and Proprietary
Meet the HTML5 Webapps!Google Confidential and Proprietary
Meet the HTML5 Webapps!                                      but screenshots dont                                         ...
HTML5: YouTube is all about <video>  ● Playback Options          ○ Fullscreen Video Playback          ○ Inline Playback ex...
HTML5: Side Perks used  ● LocalStorage          ○ AJAX Cache          ○ Persistent Settings  ● Canvas          ○ Lighter t...
HTML5: Side Perks used  ● Navigator Online Status          ○ Detection whether on 3G or Wifi          ○ Offline detection ...
HTML5: Faster than a Website  ● Hybrid Application Cache          ○ No Internet needed to start          ○ Internet access...
Tools for the sane otherwise, well be all nuts...  Google Confidential and ProprietaryGoogle Confidential and Proprietary
Large-Scale Javascript Development  Google Closure  ● Optionally Compiled + Obviously MinifiedGoogle Confidential and Prop...
Large-Scale Javascript Development  Google Closure  ● Optional Types and Static Compiler Checking  ● Compiled in DOM Templ...
Large-Scale Javascript Development  Google Closure  ● CSS Name ManglingGoogle Confidential and Proprietary
Debugging & Testing Flow 1. Google Chrome + Web Inspector 2. Safari 3. iOS Simulator + iWebInspector                      ...
HTML5 + CSS3: Interactions gets transitions  ● CSS Transforms                    rotate skew translateGoogle Confidential ...
HTML5 + CSS3: Interactions gets transitions  ● CSS TransitionsGoogle Confidential and Proprietary
Why did we do it? If you had to pick between App vs WebApp  Google Confidential and ProprietaryGoogle Confidential and Pro...
All Depends:  Pick WebApp When 1. Need to support as many platforms as possible.          ○ The least common denominator 2...
Challenge yourself! Coz fame and fortune doesnt come easy...  Google Confidential and ProprietaryGoogle Confidential and P...
We have awesome skills & ideas  ● Work with Google Apps Script or Google Drive API  ● Win Chromebooks or US$ 20,000.Google...
● Compete with South East Asia region  ● Build Apps in any of these Categories:         a. Enterprise / Small Business Sol...
● If Bragging Rights aint enough:          ○ up to 30 SEA Semi-Finalists get:                  ■ Chromebooks              ...
● Links          ○ http://developers.google.com/drive          ○ http://developers.google.com/google-apps          ○ http:...
Upcoming SlideShare
Loading in...5
×

YouTube Mobile Webapp: On the edge of Html5

2,902

Published on

Dan Delima of Google's presentation at the HTML5 DevDay Davao hackathon at the University of Eastern Philippines, Davao City, July 21, 2012. Cutting edge mobile HTML5 using YouTube mobile as an example.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,902
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "YouTube Mobile Webapp: On the edge of Html5"

  1. 1. YouTube Mobile WebAppOn the Edge of HTML5 Google Confidential and ProprietaryGoogle Confidential and Proprietary
  2. 2. Meet the HTML5 Webapps!Google Confidential and Proprietary
  3. 3. Meet the HTML5 Webapps! but screenshots dont do it justice! m.youtube.comGoogle Confidential and Proprietary
  4. 4. HTML5: YouTube is all about <video> ● Playback Options ○ Fullscreen Video Playback ○ Inline Playback experience ● Video Playback Events ○ timeupdate ○ play / pause / stopGoogle Confidential and Proprietary
  5. 5. HTML5: Side Perks used ● LocalStorage ○ AJAX Cache ○ Persistent Settings ● Canvas ○ Lighter than images ○ Dynamic BackgroundsGoogle Confidential and Proprietary
  6. 6. HTML5: Side Perks used ● Navigator Online Status ○ Detection whether on 3G or Wifi ○ Offline detection ● Touch Events ○ Faster than clicks ○ Mobile App-like interactionsGoogle Confidential and Proprietary
  7. 7. HTML5: Faster than a Website ● Hybrid Application Cache ○ No Internet needed to start ○ Internet access needed for everything else ○ Cut loading time by 40% ● Single-Page WebApp ○ No page loads ○ Limited by Javascript speed of the deviceGoogle Confidential and Proprietary
  8. 8. Tools for the sane otherwise, well be all nuts... Google Confidential and ProprietaryGoogle Confidential and Proprietary
  9. 9. Large-Scale Javascript Development Google Closure ● Optionally Compiled + Obviously MinifiedGoogle Confidential and Proprietary
  10. 10. Large-Scale Javascript Development Google Closure ● Optional Types and Static Compiler Checking ● Compiled in DOM TemplatingGoogle Confidential and Proprietary
  11. 11. Large-Scale Javascript Development Google Closure ● CSS Name ManglingGoogle Confidential and Proprietary
  12. 12. Debugging & Testing Flow 1. Google Chrome + Web Inspector 2. Safari 3. iOS Simulator + iWebInspector [important] 4. Devices ○ iPhone/iPad ○ Android Browser / Android ChromeGoogle Confidential and Proprietary
  13. 13. HTML5 + CSS3: Interactions gets transitions ● CSS Transforms rotate skew translateGoogle Confidential and Proprietary
  14. 14. HTML5 + CSS3: Interactions gets transitions ● CSS TransitionsGoogle Confidential and Proprietary
  15. 15. Why did we do it? If you had to pick between App vs WebApp Google Confidential and ProprietaryGoogle Confidential and Proprietary
  16. 16. All Depends: Pick WebApp When 1. Need to support as many platforms as possible. ○ The least common denominator 2. Super Snazzy not a real requirement. ○ CSS 3 is usually enough. 3. Access to Device via Toolkits (PhoneGap) 4. Some leeway on look and feelGoogle Confidential and Proprietary
  17. 17. Challenge yourself! Coz fame and fortune doesnt come easy... Google Confidential and ProprietaryGoogle Confidential and Proprietary
  18. 18. We have awesome skills & ideas ● Work with Google Apps Script or Google Drive API ● Win Chromebooks or US$ 20,000.Google Confidential and Proprietary
  19. 19. ● Compete with South East Asia region ● Build Apps in any of these Categories: a. Enterprise / Small Business Solutions b. Social / Personal Productivity / Games / Fun c. Education / Not for Profit / Water / Food & Hunger / HealthGoogle Confidential and Proprietary
  20. 20. ● If Bragging Rights aint enough: ○ up to 30 SEA Semi-Finalists get: ■ Chromebooks ■ US$ 1,000 for Students ■ US$ 1,000 for Highlight Female Innovations ○ up to 3 SEA Winners get: ■ US$ 20,000 ■ + US$ 18,000 (for their Department)Google Confidential and Proprietary
  21. 21. ● Links ○ http://developers.google.com/drive ○ http://developers.google.com/google-apps ○ http://developers.google.com/apps-script ○ http://script.google.comGoogle Confidential and Proprietary
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×