YouTube Mobile Webapp: On the edge of Html5
Upcoming SlideShare
Loading in...5
×
 

YouTube Mobile Webapp: On the edge of Html5

on

  • 2,692 views

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 ...

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.

Statistics

Views

Total Views
2,692
Views on SlideShare
938
Embed Views
1,754

Actions

Likes
0
Downloads
9
Comments
0

5 Embeds 1,754

http://www1.smart.com.ph 1428
http://smartdevnet.wordpress.com 300
http://feeds.feedburner.com 20
http://feeds2.feedburner.com 3
http://www.google.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 do it justice! m.youtube.comGoogle Confidential and Proprietary
  • HTML5: YouTube is all about <video> ● Playback Options ○ Fullscreen Video Playback ○ Inline Playback experience ● Video Playback Events ○ timeupdate ○ play / pause / stopGoogle Confidential and Proprietary
  • HTML5: Side Perks used ● LocalStorage ○ AJAX Cache ○ Persistent Settings ● Canvas ○ Lighter than images ○ Dynamic BackgroundsGoogle Confidential and Proprietary
  • 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
  • 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
  • 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 Proprietary
  • Large-Scale Javascript Development Google Closure ● Optional Types and Static Compiler Checking ● Compiled in DOM TemplatingGoogle Confidential and Proprietary
  • 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 [important] 4. Devices ○ iPhone/iPad ○ Android Browser / Android ChromeGoogle Confidential and Proprietary
  • HTML5 + CSS3: Interactions gets transitions ● CSS Transforms rotate skew translateGoogle Confidential and Proprietary
  • 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 Proprietary
  • 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
  • Challenge yourself! Coz fame and fortune doesnt come easy... Google Confidential and ProprietaryGoogle Confidential and Proprietary
  • We have awesome skills & ideas ● Work with Google Apps Script or Google Drive API ● Win Chromebooks or US$ 20,000.Google Confidential and Proprietary
  • ● 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
  • ● 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
  • ● 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