HTML&CSSappspowered TV& InternetAdrià Giladriàgil@github
Now what?· Native vs Browser based apps· Fragmented ecosystem
User experience     NO PC  NO TABLETNO SMARTPHONE       = NEW LAYOUTS
UX: Layouts· Stunning Video&Audio quality· Responsive layouts > Think BIGGER   · Media Queries   · JS Window detection   ·...
UX: Rules· Information Hierarchy· Graphics size   · BIG but light   · Power of HTML5&CSS3· Controlling & Navigating app· T...
UX: Interaction· TV Remote or Smart RemotePointers· USB Mouse & Keyboards· Hand Control > like a pointer· Gesture Control ...
UX: Sharing· Share Screens and Content· AirPlay
UX: App Market One Use   VOD   HealthCare & Kids
AN SCRATCH APP     Planning        +    Resources        =
PLANNING      Lodon                      GermanyUSA                      Eastern Japan                Europe              ...
3...2...1...CODEREQUIREMENTS:· Ruby / Php / Asp -> Rest API· SQL Database -> Data Storage· Javascript knowledge· HTML&CSS ...
3...2...1...CODECORE:· MVC Pattern· Ember / Backbone / Angular· jQuery· Handlebars· AJAX· Vendor libraries    · AppsFramew...
AVG COSTS1.5 Months to develop  2 Week for testing  2 Week BugFixing                        Rich V.O.D app + InAppPurchase...
MONETIZEGET FULL CONTROL OF YOUR APPPAY FOR CONTENT OR SERVICE
LOOK FORWARD-   AppleTV is coming-   Start messing with Android-   Dig on HTML5 and standards-   Innovate with interface- ...
TAKE A BREAK AND WHY NOT A BEER        ... YOU DESERVE IT
Upcoming SlideShare
Loading in...5
×

HTML&CSS Apps for Internet powered TV's

4,661

Published on

@Webcat 24/10/2012
Sorry typography will not render well.

Published in: Technology
4 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,661
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
48
Comments
4
Likes
8
Embeds 0
No embeds

No notes for slide

HTML&CSS Apps for Internet powered TV's

  1. 1. HTML&CSSappspowered TV& InternetAdrià Giladriàgil@github
  2. 2. Now what?· Native vs Browser based apps· Fragmented ecosystem
  3. 3. User experience NO PC NO TABLETNO SMARTPHONE = NEW LAYOUTS
  4. 4. UX: Layouts· Stunning Video&Audio quality· Responsive layouts > Think BIGGER · Media Queries · JS Window detection · UserAgent· Security Zones > Peripherals· 3D Content· Dynamic content· Hacks & Crossbrowsing
  5. 5. UX: Rules· Information Hierarchy· Graphics size · BIG but light · Power of HTML5&CSS3· Controlling & Navigating app· Technical aspects MATTER · Do testing · Check performanceREMEMBER! Is a TV!
  6. 6. UX: Interaction· TV Remote or Smart RemotePointers· USB Mouse & Keyboards· Hand Control > like a pointer· Gesture Control > like the Kinect· Voice Recognition > localized· Smartphone / Tablet / Touch surface
  7. 7. UX: Sharing· Share Screens and Content· AirPlay
  8. 8. UX: App Market One Use VOD HealthCare & Kids
  9. 9. AN SCRATCH APP Planning + Resources =
  10. 10. PLANNING Lodon GermanyUSA Eastern Japan Europe Korea WORLDWIDE testing & deploy
  11. 11. 3...2...1...CODEREQUIREMENTS:· Ruby / Php / Asp -> Rest API· SQL Database -> Data Storage· Javascript knowledge· HTML&CSS skillsUI FRAMEWORKS:· HTML5Boilerplate· Compass· TwitterBootstrap· KendoUI
  12. 12. 3...2...1...CODECORE:· MVC Pattern· Ember / Backbone / Angular· jQuery· Handlebars· AJAX· Vendor libraries · AppsFramework · Player · Device APIs· Be aware of security -> SSL
  13. 13. AVG COSTS1.5 Months to develop 2 Week for testing 2 Week BugFixing Rich V.O.D app + InAppPurchase + User content = 15k – 20k
  14. 14. MONETIZEGET FULL CONTROL OF YOUR APPPAY FOR CONTENT OR SERVICE
  15. 15. LOOK FORWARD- AppleTV is coming- Start messing with Android- Dig on HTML5 and standards- Innovate with interface- Use modern technologies- Be aware of retro-compatibility- Test Test Test!
  16. 16. TAKE A BREAK AND WHY NOT A BEER ... YOU DESERVE IT
  1. A particular slide catching your eye?

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

×