O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Web Apps for Google TV

Book Description

By integrating the Web with traditional TV, Google TV offers developers an important new channel for content. But creating apps for Google TV requires learning some new skills—in fact, what you may already know about mobile or desktop web apps isn't entirely applicable. Building Web Apps for Google TV will help you make the transition to Google TV as you learn the tools and techniques necessary to build sophisticated web apps for this platform.

This book shows you how Google TV works, how it fits into the web ecosystem, and what the opportunities are for delivering rich content to millions of households.

  • Discover the elements of a compelling TV web app, and what comprises TV-friendly navigation
  • Learn the fundamentals for designing the 10-foot user experience
  • Work with the Google Chrome browser on a TV display, and migrate an existing site
  • Use examples for developing a TV web app, including the UI, controls, and scrolling
  • Understand how to optimize, deliver, and protect video content for Google TV
  • Help users discover your content by optimizing your site for Search—especially videos

Table of Contents

  1. Foreword
  2. Preface
    1. About This Book
      1. This Book’s Target Audience
      2. This Book’s Scope
    2. Prerequisites
    3. Conventions Used in This Book
    4. Using Code Examples
    5. Safari® Books Online
    6. How to Contact Us
    7. Acknowledgments
  3. 1. Introducing Google TV
    1. Under the Hood: So What’s in There?
      1. Android
      2. Google Chrome 5.0
      3. Flash 10.1 Beta
      4. User Interface
    2. A New Target Device
      1. It’s More Than Just a Big Monitor
      2. Input Devices (or How to Control That Google TV)
    3. Remember When...
    4. An Emerging Opportunity for Developers
      1. Just the Facts
      2. Working with the Open Web
      3. A Web App Is Worth a Thousand...
        1. YouTube Leanback
        2. Meegenius
        3. Flixster
      4. The Next Killer App
  4. 2. Getting Started
    1. What Makes a Compelling App?
      1. Compelling Content
      2. A Low Learning Curve
      3. Clear Visual Cues
      4. TV-friendly Navigation
    2. What You’ll Need
      1. Background Knowledge
        1. HMTL5
        2. Flash
        3. Books
      2. Tools
        1. Writing Code
        2. Working with Images
        3. Developing with Flash
        4. Hosting Web Apps
    3. The 10-Foot Experience
      1. Environment
      2. Mind-set
      3. Interaction
  5. Designing the 10-Foot User Interface
    1. Focus on Design First, Implementation Second
    2. Learn from Other 10-Foot User Experiences
    3. Fundamentals of the 10-Foot User Interface
      1. Reference: User Interface Elements
      2. Understand Your Users
    4. Common Interface Elements
      1. Layout
        1. Main Attraction
        2. Embedded Main Attraction
      2. Transparent Overlays
      3. Navigation
      4. Scrolling
      5. Typefaces and Graphics
      6. Text
      7. Visual and Audio Cues
  6. 4. Coding for the Leanback UI
    1. Working with the Google Chrome Browser on a TV Display
      1. Window Size and Overscan
        1. How Overscan Impacts Design
        2. Dealing with Ovescan
          1. Fixed Page Design
          2. Adjustable Page Design
      2. Webkit Extensions for HTML5
      3. Google TV’s User Agent String
    2. Migrating an Existing Website
      1. Adding Keyboard Navigation
      2. Autozoom Considerations
      3. Scrolling and Paging Content
      4. Content Sizing for Fonts and Images
    3. Working with HTML5
      1. Audio and Video
      2. CSS3 Flexible Box Model
        1. display: -webkit-box
        2. -webkit-box-orient
        3. -webkit-box-flex
      3. Relevant CSS3 Properties
        1. Animations and Transitions
          1. -webkit-transition
          2. webkitTransitionEnd event
          3. -webkit-animation
          4. webkitAnimationEnd event
          5. -webkit-transform
        2. Presentation Enhancements
          1. -webkit-box-shadow
          2. border-radius
  7. 5. Developing Your Web App
    1. Putting a UI Together
      1. Navigation
        1. A Regular Grid
        2. Nearest Neighbor Navigation
        3. Mouse and Keyboard
      2. Full-Page Navigation
        1. Segmented Pages
        2. Unified Navigation
        3. Input Controls
      3. Handling Special Keys
        1. Media Keys
        2. The Back Key
    2. Controls
      1. Menu Bars
    3. Paging Content
      1. Horizontal Scrolling
      2. Vertical Scrolling
      3. Multiple Pages
  8. 6. Tuning, Delivering, and Protecting Video Content
    1. Video Basics
    2. Embedding Video with HTML5 in Google Chrome
      1. The Markup
      2. Container Formats and Codecs
        1. Encoding, Tuning, and All That
    3. Embedding Video Using the Flash Player Plug-in in Google Chrome
      1. The Markup
      2. Container Formats and Codecs
      3. Encoding and Tuning Guidelines
      4. Video Player and Rendering Optimization
      5. Video Delivery Guidelines
      6. Video Player and Rendering Optimizations
    4. Content Protection and DRM
  9. 7. Getting Your Content to the User: Discovery, Indexing, and Search Results
    1. Help Users Discover Your Content
    2. How Search Engines Work
      1. Crawling, Indexing, Search Results
      2. Components of an Individual Search Result
    3. Site Architecture
      1. Design a Logical Linking Structure
      2. Use Descriptive Anchor Text
    4. URL Structure
      1. Include Keywords in the URL, If Possible
      2. Select the Right URL Structure for Your TV Site
      3. Learn the Facts About Dynamic URLs
    5. On-Page Optimizations
      1. Create Unique Titles Reflective of the Page’s Content
      2. Include Unique Meta Descriptions for Each Page
    6. Duplicate Content: Side Effects and Options
    7. Serving the Right Version to Your Users
    8. Working with Video: King of Content for TV
    9. Feeds
      1. Required Tags
      2. Optional Tags
    10. Other Feeds/Options
      1. Video Sitemap or mRSS
      2. Facebook Share and RDFs
      3. TV Show Tags
    11. What’s Next?
  10. About the Authors
  11. Colophon
  12. Copyright