Presentación realizada en el #webcat Barcelona de Octubre del 2012 Autor: Adrià Gil (@JeronimJackson)

1. HTML&CSS
appspowered TV
& Internet
Adrià Gil
adriàgil@github

2. Now what?
· Native vs Browser based apps
· Fragmented ecosystem

3. User experience
NO PC
NO TABLET
NO SMARTPHONE
=
NEW LAYOUTS

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. UX: Rules
· Information Hierarchy
· Graphics size
· BIG but light
· Power of HTML5&CSS3
· Controlling & Navigating app
· Technical aspects MATTER
· Do testing
· Check performance
REMEMBER! Is a TV!

6. UX: Interaction
· TV Remote or Smart Remote
Pointers
· USB Mouse & Keyboards
· Hand Control > like a pointer
· Gesture Control > like the Kinect
· Voice Recognition > localized
· Smartphone / Tablet / Touch surface

7. UX: Sharing
· Share Screens and Content
· AirPlay

8. UX: App Market
One Use VOD HealthCare & Kids

9. AN SCRATCH APP
Planning
+
Resources
=

10. PLANNING
Lodon
Germany
USA
Eastern
Japan Europe
Korea
WORLDWIDE testing & deploy

11. 3...2...1...CODE
REQUIREMENTS:
· Ruby / Php / Asp -> Rest API
· SQL Database -> Data Storage
· Javascript knowledge
· HTML&CSS skills
UI FRAMEWORKS:
· HTML5Boilerplate
· Compass
· TwitterBootstrap
· KendoUI

12. 3...2...1...CODE
CORE:
· MVC Pattern
· Ember / Backbone / Angular
· jQuery
· Handlebars
· AJAX
· Vendor libraries
· AppsFramework
· Player
· Device APIs
· Be aware of security -> SSL

13. AVG COSTS
1.5 Months to develop
2 Week for testing
2 Week BugFixing
Rich V.O.D app + InAppPurchase +
User content
=
15k – 20k

14. MONETIZE
GET FULL CONTROL OF YOUR APP
PAY FOR CONTENT OR SERVICE

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. TAKE A BREAK AND
WHY NOT A BEER
...
YOU DESERVE IT