Full Screen Web Tv Templates - PowerPoint

Document Sample
Full Screen Web Tv Templates - PowerPoint Powered By Docstoc
					Building Interactive Entertainment
& E-Commerce Content for Microsoft
                 TV
   A discussion paper for the IBDGroup


    Book originally Published 2000 by Microsoft
                                   Peter Krebs
                              Charlie Kindschi
                            Julie Hammerquist




                                     A Presentation by Derek Seabrooke
                                    http://www.rcc.ryerson.ca/webtv/notes
   Building Interactive Entertainment
 & E-Commerce Content for Microsoft TV

For More Information
  http://www.webtv.net
  http://www.atvef.com
  http://www.microsoft.com/tv
  Also see companion CD
                  Contents

Part   1-   Microsoft TV Primer
Part   2-   Microsoft TV Design Guide
Part   3-   Delivering Microsoft TV Content
Part   4-   Microsoft TV E-Commerce
Part   5-   Microsoft TV Programmer’s Guide
  Part I- Microsoft TV Primer

Chapter 1- Possibilities for Microsoft TV
Chapter 2- Introducing the Microsoft
 Platform
Chapter 3- What You Need to Create &
 Deliver Microsoft TV Content
Chapter 4- Fast track for Creating
 Microsoft TV Content
Chapter 1- Possibilities for Microsoft TV


Standards Make Interactive TV Content
 viable
Types of Content Best Suited for
 Interactive TV
Personalized TV
Viewer Participation
Chapter 1- Possibilities for Microsoft TV


Standards Make Interactive TV Content
 Commercially Viable
     Microsoft TV technology is based on tried and true standards
        •   ATVEF
        •   HTML
        •   Cascading Style Sheets
        •   JavaScript
  Microsoft Supports Platform Independent Standards
  Microsoft TV will be present in 10 Million Homes by 2002
Chapter 1- Possibilities for Microsoft TV


Types of Content Best Suited for Interactive TV
  See 1998 Forrester Report – Lazy Interactivity by
   Bernoff, Mines, VanBoskirk, Courtin
  Computer Platforms are best suited to Effort
   Interactivity but TV platforms are best suited to Lazy
   Interactivity
  User input should be minimized
  Interactive TV is not well suited to Narrative Story
   telling – instead it should be used for specific
   applications like advertising, news casting, game
   shows etc.
Chapter 1- Possibilities for Microsoft TV


Personalized TV
  Microsoft TV allows television viewing
   experiences to be customized to meet user’s
   specific tastes – customized sports score
   layouts, news preferences, stock portfolio – or
   adds a twist to a show
Chapter 1- Possibilities for Microsoft TV


Viewer Participation
  Some of the material already being produced
   on television takes advantage of user input –
   like talk shows, game shows, certain types of
   series etc.
  Microsoft TV provides a more efficient
   mechanism for feedback than traditional
   telephone or letter writing
Chapter 2- Introducing the Microsoft TV
                 Platform

Genesis of Microsoft TV
Microsoft TV Platform
Delivering Content to Microsoft TV
Chapter 2- Introducing the Microsoft TV
                 Platform

Genesis of Microsoft TV
  1995 – WebTV Networks is founded by three Palo Alto
   entrepreneurs
  1996 – WebTV Networks introduces the WebTV Plus
   Internet Receiver set-top box
  1997 – Microsoft Purchases WebTV Networks
   spawning Microsoft TV
  1998 – Microsoft Includes WebTV client software for
   the PC in Windows 98
  2000 – Microsoft promises to be a leader in television
   industry by producing software to drive PC’s and set-
   top boxes plugged into their cable companies – such
   as Rogers
Chapter 2- Introducing the Microsoft TV
                 Platform

Microsoft TV Platform
  Microsoft TV is set of client and server
   applications which run on Windows 2000 or
   Windows CE systems
  Microsoft TV client is a platform independent
   suite that can be licensed from Microsoft and
   integrated into any TV ready box and is fully
   customizable to meet specific needs of a
   products
Chapter 2- Introducing the Microsoft TV
                 Platform

 Microsoft TV (client side
  software) is intended to
  be licensed to terrestrial,
  satellite or cable
  television providers
 Microsoft TV Server
  (Server side software) is
  intended to be licensed
  to Interactive TV
  producers and can be
  used for a myriad of
  functions across the
  industry
Chapter 2- Introducing the Microsoft TV
                 Platform

  Microsoft TV Server (con’t)
    Platform Services – Core Services (Global television
     & Internet Service setup)
    Device Services – Supports communication,
     configuration & updating of client machines
     (software patching / channel line up)
    Application Services – Server side applications
     (SQL & E-Commerce)
    Deployment & Admin Services – Handles
     administrative side of ISP and television services
     (such as billing)
Chapter 2- Introducing the Microsoft TV
                 Platform

Delivering Content to Microsoft TV
  In order to effectively use Microsoft TV – hardware
   manufacturers should consider designing front, fore
   and back channel capabilities
  Front Channel – Terrestrial, Satellite, Cable
  Fore/back channel – Telephone, Cable, LAN
  ATVEF TRANSPORTS – Transport A: Context (event
   triggers, links, JavaScript calls), Transport B: Content
   (text [HTML], sound, pictures, video, animation)
Chapter 3- What You Need to Create &
    Deliver Microsoft TV Content

Minimum Setup for Creating Microsoft TV
 Content
Recommended Setup for Creating
 Microsoft TV Content
The Ultimate Interactive TV Studio
Chapter 3- What You Need to Create &
    Deliver Microsoft TV Content

Minimum Setup
  166 MHz CPU; 32 MB RAM; CD-ROM; 2 GB
   HD; Internet Access
  Windows; notepad, MS Visual Editor or MS
   Front Page 97; Photoshop; Microsoft TV
   Simulator 3.0
Chapter 3- What You Need to Create &
    Deliver Microsoft TV Content

Recommended Setup
 Development Machine which exceeds
  minimum requirements
 HTTP server access
 WebTV Internet Receiver & Colour Television
  set
 Local Area Network
 Windows 2000; MS Interdev; MS Access or
  SQL Server
Chapter 3- What You Need to Create &
    Deliver Microsoft TV Content

Setup for the WebTV Plus Service
  WebTV Plus Internet Receiver with keyboard
  Colour Television set
  Terrestrial, Satellite or Cable television service
  Analogue Telephone Line Service
  Internet Service
Chapter 3- What You Need to Create &
    Deliver Microsoft TV Content




 Ultimate Interactive TV Studio
   If it is feasible within budgetary constraints, it is recommended
    that anyone serious about Microsoft TV Development setup the
    Ultimate Interactive TV Studio as illustrated in the book
   The Ultimate Interactive TV Studio consists of a VBI Inserter;
    Video Tape Recorders; TV Modulators
   IBDG’s current setup is very much like the Ultimate TV Studio
  Chapter 4- Fast Track for Creating
        Microsoft TV Content

Copying the Source Files
Overview of template_main.html
Modifying template_tv.html
TV Object & Full Screen Button
Modifying template_option1.html
Testing on Microsoft TV Simulator
Testing on TV
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

Copying the Source Files
  The template files have been copied from the
   Companion CD to \\elvis\itv\generic
  template_main.html - defines basic structure for
   templates
  template_tv.html - hosts TV object & main navigation
   controls
  template_options1.html - content pages that are
   dynamically swapped out of the content frame when
   the user selects links, which may be either on the
   template_tv.html page or one of the options pages.
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

 Overview of the
  Template_main.html
  page
  Main Template example
  Divides space into two
   frames
     content space
     television space
  e.g.
     content.src =
      template_optionsxx.
      html
     tv.src =
      template_tv.html
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

Modifying the Template_tv.html page
  Copy \\elvis\generic\* to working directory
  Rename template files to new names
  Open template_main.html (new name) in Internet
   Explorer
  Right-click a cold-space on the left-hand side of the
   document
  Select View Source from resultant menu
Chapter 4- Fast Track for Creating
      Microsoft TV Content

The style sheet section of Source
  The sample HTML files use JavaScript to detect the
   browser application. It sets up the Cascading Style
   Sheet for display attributes appropriate to that
   browser.
     • E.g. 16 pt font for TV, 12 pt font for IE
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

The TV Object & Full
 Screen Button
  Television Object is any
   DOM object with its
   source attribute set to
   tv:xx where xx=station
   or channel name
  The Full Screen Button
   is a button (or link)
   which references tv:xx
Chapter 4- Fast Track for Creating
      Microsoft TV Content

Navigation is handled by text links and
 changing frames
You can create a powerful page by
 customizing link texts and references
When modifications are complete, save the
 file and press refresh in IE to view changes
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

Modifying the Template_options1.html page
  Open template_options1.html in IE. View Source in
   notepad like before
     This document consists of a body an options section and a
      Marquee
  The Options Section defines anchors and objects
   presented to the user – it is designed to be easily
   modified
  The Marquee demonstrates the ability to use HTML
   attributes to scroll division across the screen a given
   rate
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

Testing Content on the Microsoft TV Simulator
  The Microsoft TV Simulator 3.0 is a software tool that
   simulates Microsoft TV for content developers
  Microsoft TV Simulator consists of two modes: TV
   Mode & Web Mode just like the set-top box
  All of the templates in Building Interactive
    Entertainment & E-Commerce Content for Microsoft TV
    comes with a viewset.html page with simulates the
    interactive TV link which appears during interactive
    television spots
   Chapter 4- Fast Track for Creating
         Microsoft TV Content

Test the Page on TV
  To view templates on TV, you must visit Microsoft’s
   website
  In the Interactive Television Development Office, this
   site has been book marked under Interactive TV
  There is no way to view local content on TV
   Part II- Microsoft TV Design
                Guide

Chapter 5- Guidelines for Designing
 Microsoft TV Content
Chapter 6- Layering Web Content over
 Full-Screen TV
Chapter 7- Layering TV over Web Content
Chapter 8- Styles and Style Sheets
Chapter 9- Selecting Colours for Microsoft
 TV Content
   Part II- Microsoft TV Design
                Guide

Chapter 10-   Creating Text for Microsoft TV
 Content
Chapter 11-   Adding Images to Microsoft
 TV Content
Chapter 12-   Adding Animation to Microsoft
 TV Content
Chapter 13-   Handling Navigation
Chapter 14-   Audio & Video
    Chapter 5- Guidelines for
  Designing Microsoft TV Content

Fitting Content into Microsoft TV’s Design
 Area
Web Mode vs. TV Mode
Strategies for Designing Content
    Chapter 5- Guidelines for
  Designing Microsoft TV Content
Fitting Content into Microsoft TV’s Design Area
  Microsoft TV’s Design Area is the region of screen
   space where objects can be displayed
  560 x 420 pixels – 4:3 aspect ratio
  Microsoft TV is not scrollable in TV mode
  Microsoft TV automatically creates a 6 pixel margin
   from the top of the screen and 8 pixels from the sides
   of the screen – margin can be increased by designers
  Microsoft recommends a using a 16 pixel margin
  Margins can be set using topmargin & leftmargin
   attributes of the body tag
    Chapter 5- Guidelines for
  Designing Microsoft TV Content

Web Mode vs. TV Mode
  Web Mode
    scrolling
    Printing, saving
    Internet options
    Picture-in-picture TV Window
  TV Mode
    Channel options
    TV embedded in web site
    Some web content may not display correctly
    Chapter 5- Guidelines for
  Designing Microsoft TV Content

Strategies for Designing Content
  Avoid MSTV client/server modification
    Page width < 544 pixels
    Graphic width < 544 pixels
    Font should be set with Cascading Style Sheets –
     JavaScript should be used to detect TV and set
     type face to TV approved font & size
    JavaScript should be used to detect TV and set
     colours to NTSC-compliant colours.
    Be cautious about using frames
    Chapter 5- Guidelines for
  Designing Microsoft TV Content
Strategies for Designing Content
  Make TV Object as large as possible
  Consider aspect ratio (NTSC=4:3; HDTV=16:9 etc.)
  Design content to be viewable from across the room
     If you are designing a page for computer & TV, always use
      JavaScript to optimize elements for TV viewing
  Avoid scrollable content if page is to be displayed in
   TV mode
  Use absolute positioning for DIVs
     If page is for computer & TV viewing – use JavaScript to
      change positioning so that page displays right on both
      browsers
  Chapter 5- Guidelines for
Designing Microsoft TV Content
Pages should be simple on TV
   Pages made for TV viewing should very simple and navigation
    should be intuitive
   Interactive pages and games should have a simple user
    interface and minimize user input
Use NTSC-Compliant Colours
   The National-Television-Standards-Committee (NTSC)
    specification for colour television cannot correctly display
    certain colours and is known to cause distortions if certain
    incompatible colours are adjacent without a gradual transition
   Designers should be aware of NTSC limitations and avoid
    problem colours and colour combinations if possible
    Chapter 5- Guidelines for
  Designing Microsoft TV Content
Design to ATVEF specs
  Microsoft TV is an implementation based on the
   recommendations of Advanced Television
   Enhancement Forum (ATVEF) – for best compatibility
   design your pages to use elements recommended by
   ATVEF
  HTML 4.0; CCS1; Level 0 DOM; ECMAScript
Use DHTML with caution
  DHTML support is not among ATVEF’s
   recommendations – Microsoft TV only supports a
   subset of DHTML – implementation is very poor
Chapter 6- Layering Web Content
      over Full-Screen TV

Creating an Overlay
Limitations of Overlays
About Hiding and Showing DIVs
Integrating Full-Screen TV into Web Page
Making TV Appear in the TV Object
Chapter 6- Layering Web Content
      over Full-Screen TV
Creating an Overlay
  One way in which
   enhancements can be
   presented to the user is
   by means of a
   television overlay
  (According to the
   research of IBO thus far
   – it would seem that
   television overlays only
   work on Full Screen TV)
Chapter 6- Layering Web Content
      over Full-Screen TV

Limitations of Overlays
  Refreshing enhancements causes significant
   interruption to the viewer
  Microsoft TV supports a special HTML
   attribute called transparency which allows
   see-through objects to be created and laid
   over TV or web content
Chapter 6- Layering Web Content
      over Full-Screen TV

Hiding & Showing DIVs
  DHTML works over full-screen TV on Microsoft
   TV but may not work on all set-top boxes
Integrating Full-Screen TV into a Web
 Page
  The TV object is any object with the URL
   tv:xx – it can be set as the background or as
   an object with height & width set to 100%
Chapter 6- Layering Web Content
      over Full-Screen TV

Making TV Appear in the TV Object
  In order to view television in the TV Object
   you must view the web site in a viewer built to
   ATVEF spec – in Microsoft TV viewer must be
   set to view=tv
Chapter 6- Layering Web Content
      over Full-Screen TV

Creating the Overlay for Lakes & Sons
  In this case the TV Object is placed in a DIV
   where Z-Index <= 0 Object is bottom
   layer & Full-Screen
Absolute Positioning
  Attribute defined in Cascading Style Sheets
  DIV elements are mapped to the screen using
   an absolute co-ordinate system based on
   pixels
Chapter 6- Layering Web Content
      over Full-Screen TV

Positioning Overlays for Microsoft TV
  Absolute positioning is supported for overlays
    In Full-Screen TV Microsoft TV increases the left
     margin by 8 pixels – for consistency Microsoft
     recommends setting a top margin of 8 and left
     margin of 0 (which is 8 pixels)
Chapter 6- Layering Web Content
      over Full-Screen TV

How the Z-Index Property Works
  All elements in document are assigned unique
   Z-Index attribute
  Body tag is assigned Z-Index = 0
  Elements are assigned Z-Index by order in
   which they are defined
  Z-Index can be overridden by developer
  Elements with Z-Index < 0 appear behind
   the document body
Chapter 6- Layering Web Content
      over Full-Screen TV

Transitioning from a Web Page to Full-
 Screen TV
  To transition from a Web Page to Full-Screen
   TV simply create an anchor reference to the
   TV Object
Chapter 6- Layering Web Content
      over Full-Screen TV

Implementing an Order
 Now Button
  An Order Now Button is
   an anchor element
   which references a site
   with E-Commerce
   capabilities
  For more information
   see Lakes & Sons
   sample
Chapter 7- Layering TV over Web
             Content
Using a Frameset to Lay Out Interactive
Designing an HTML TV page
Formatting Text with Style Sheets
Creating an Interactive E-Commerce Page
Creating Overlays for Lakes & Sons
How Absolute Positioning Works
Positioning Overlays for Microsoft TV
How the Z-Index property works
Transitioning from a Web to Full-Screen TV
Implementing an Order Now Button
Chapter 7- Layering TV over Web
             Content
Using a Frameset to Lay Out Interactive TV
 Content
  With framesets you can continually monitor the TV
   Object while change data in other frames
  Frames are the only way to dynamically change data
   within the constraints of JavaScript 1.1 – the minimum
   level recommended by ATVEF
  Frames divide up documents in various download
   sessions – DHTML pages tend present longer
   download times in a single chunk
  Frames can avoid annoyances such as wait screens
   from interrupting the user
  Frames contents can be swapped with Broadcast
   Triggered Events
Chapter 7- Layering TV over Web
             Content

 Avoid Iframes
   Iframes are incompatible with Microsoft TV’s
    implementation of JavaScript – it should only be
    used for static HTML which does not use JavaScript
    on Iframes
 Designing the Frameset for Lakes & Sons
   Lakes_main.html – defines the frameset
   Lakes_tv.html – contains TV Object
   Lake_content.x – contains content
Chapter 7- Layering TV over Web
             Content

 Using JavaScript to remove the frameset
  borders
   Bizarre grey border cannot be cancelled with
    frameborder HTML tag – it can only be removed
    by the hspace & vspace tag in the body
   JavaScript can be used to detect Microsoft TV and
    construct necessary body tag on the fly
Chapter 7- Layering TV over Web
             Content

 Creating the TV and Content Frames
   If frameset is specified using [ rows | cols ]
    = “x,*” – the later frame will automatically resize
    fill the remaining space on the screen
 Creating Non-scrollable Content
   Microsoft TV does not support scrollable
    documents in view=TV
   Microsoft TV does not support scrollable frames –
    frames are displayed as they would be if they were
    tables
Chapter 7- Layering TV over Web
             Content
Designing an HTML TV
 Page
  Designing the page that
   contains the TV Object
  Margins are set by using
   the absolute positioning
   properties of DIV tags
  TV border is a 4:3
   graphic placed in a DIV
   with the TV Object
   overlapped over it on
   another DIV
Chapter 7- Layering TV over Web
             Content
 Creating TV Object
    <object data=“tv:nn” height=x width=y> , where
     nn is channel or station name, x is height of object and y is
     width of object.
    Place the TV Object into a DIV tag and set the attributes so it
     fit into the space left for it in the TV border
    Height to Width ratio should be maintained at about 4:3
    Subtract the width and height of the border respectively from
     the width and height of the TV Object
    If TV is linked from Web – TV mode must be enforced using
     view=tv tag or TV Object won’t work on Microsoft TV
Chapter 7- Layering TV over Web
             Content

 Implementing the Full Screen Button
   Providing the user an easy way to switch between
    picture-in-picture enhancements and full screen
    enhancements left to the designers
   Usability studies show that buttons are best
    understood if labelled Full Screen or TV Only
   Positioning the Full Screen Button
      • The Full Screen Button is usually best understood by the
        user if it is placed near the TV Object and is often
        integrated into the TV border
Chapter 7- Layering TV over Web
             Content
   Defining the Anchor for the Full Screen Button
      • <a Href=“tv:xx” >yy</a> , where xx is station or
        channel name, yy is button object
 Positioning Content at the Bottom of the Page
   For artistic reasons the space under the TV Object
    should be filled with multimedia content
      • The book make the assumption that the TV Object will
        always be placed at the top of the TV frame – question –
        why not place TV in middle or bottom?
Chapter 7- Layering TV over Web
             Content

Formatting Text with Style Sheets
  Dynamically Applied Style Sheets are a great way to
   setup a page to look good on different browsers
  cssTV.css
     18 pt font
  cssPC.css
     14 pt font
  Style Sheets can also change colours to be TV safe on
   TV browsers or optimized for PC on PC based
   browsers
Chapter 7- Layering TV over Web
             Content

 Assign Classes to Format Text
   Using the class attribute of the HTML font tag is
    useful because it specifies a class defined in the
    Style Sheet rather than using hard coded fonts –
    since the designer can create a different Style
    Sheet for TV than PC text will be beautiful on both
    systems
Chapter 7- Layering TV over Web
             Content
Creating an Interactive E-Commerce Page
  Setting a Background Tile
     Microsoft TV support a proprietary gradient tag but for
      compatibility it is preferred to use an image background
  Positioning Content on the Page
     Absolute positioning is used to layout the page and to enforce
      a 14 pixel margin
  Using the Selected Attribute
     Selected is a keyword attribute proprietary to Microsoft
      which places an object in focus on load
  Creating the Form
     Microsoft TV supports standard HTML form tags
Chapter 8- Styles & Style Sheets

Microsoft TV’s CSS Support
Applying CSS Properties to Interactive TV
 Content
Strategies for Implementing Styles:
 Inline; Embedded; Linked
DHTML
Chapter 8- Styles & Style Sheets

Microsoft TV’s CSS Support
  Microsoft TV is not compliant with W3
   Consortium recommendations for Cascading
   Style Sheets
Applying CSS Properties to Interactive TV
 Content
  See toys_main.html
Chapter 8- Styles & Style Sheets

Strategies for Implementing Styles: Inline
 Styles; Embedded Styles; Linked Style
 Sheets
  Using Style property with DIV and FONT tags
    Instead of applying style properties to individual
     objects – in Microsoft TV – objects are placed in
     DIVs (Divisions) which are essentially sub-
     documents overlaid over their parent
Chapter 8- Styles & Style Sheets

 Inline Style Definition
   Style properties are defined inside of HTML tag
 Embed Style Definition
   Classes are declared which define a set of reusable
    style properties that can be applied to objects
 Linked Style Sheets
   Classes are declared in external module source
    files that can be used by multiple documents in a
    project or by many documents in multiple projects
Chapter 8- Styles & Style Sheets

Dynamically Applied Style Sheets
  JavaScript can be used to dynamically apply
   CSS as in the sample HTML – this is a great
   way to ensure that attributes like font and
   colour are optimized for your browser
DHTML
  Microsoft TV’s subset of DHTML includes the
   ability to hide and show DIVs and to animate
   DIVs on the screen
Chapter 9- Selecting Colours for
     Microsoft TV Content

Selecting and Adjusting Colours
Specifying Colours with HTML and Style
 Sheets
Testing Colours on Microsoft TV
Chapter 9- Selecting Colours for
     Microsoft TV Content
 TV’s handling of colours and shades may not be as
  good as can be expected on computer monitors
 Certain types of distortions that have been
  experienced in IBLC may be well-known and perfectly
  normal and expected problems – glowing; bleeding;
  crawling; blurring – the colour distortion that we
  experience on sites with a pure-white background may
  be bowing – a documented issue with bright NTSC
  signals
 Chapter 9- Selecting Colours for
      Microsoft TV Content
Selecting and Adjusting Colours
  NTSC Filter
     High Colour and True Colour graphics usually always look
      great on computer but TV may not be able to display them
      correctly – to ensure that a graphic can be displayed correctly
      on TV it should be processed by a good NTSC graphics filter
  Browser Safe Colours
     There exists a palette of 216 well-known colours that are said
      to be browser Safe – this means that they will probably not
      be dithered by most computers – if you are designing a page
      for multiple platforms including TV then it might be wise to
      use this palette but this palette is not recommended for TV
   Chapter 9- Selecting and
      Adjusting Colours

Using Graphics Software with NTSC Filter or
 Converter
  Adobe Photoshop is recommended for NTSC
   Filtering
NTSC Monitor
  Serious designers of Microsoft TV content should
   set up an NTSC monitor in addition to their high-
   resolution high-colour monitor so that they can
   better judge how content will appear to TV users
   Chapter 9- Selecting and
      Adjusting Colours
Creating a Design Mock-Up
   Rudimentary layout created by graphics artist to illustrate
    graphics; text; video
Applying NTSC Filter or Converter
   Apply NTSC filter to mock-up – if results do not look good try
    modifying the mock-up to correct look
Adjusting Colours Applied by the NTSC Filter or
 Converter
   If results of NTSC filter are not to the designers liking or still
    look bad on some televisions then the graphic designer may
    take the liberty to change colours to correct these problems
   Chapter 9- Selecting and
      Adjusting Colours
NTSC Filter on Pure White (#FFFFFF)
   This colour is not handled might by most TVs
   Photoshop’s NTSC Filter does not effect this colour
   Try using a shade of bright grey instead of pure white – e.g.
    #CCCCCC
The Zen of Colour Selection
   TV colour is effected by many factors
       •   Amount of colour
       •   Neighbouring colours
       •   Background colour
       •   Brand of TV
       •   TV Display Settings
     Chapter 9- Selecting and
        Adjusting Colours
    Cool Colours tend to work best on TV
    It may take a lot of time to find colours that work
     on most TVs and also work from an artistic
     perspective
Specifying Colours with HTML and Style
 Sheets
    After viable colours have been found – its possible
     to match colours between elements by using the
     eyedropper tool in Photoshop
   Chapter 9- Selecting and
      Adjusting Colours

Converting Values to Hex
  One of the cool things about HTML is that colours
   are specified in hex – which means people like me
   can laugh at you guys who haven’t got a clue
Specifying Colour HTML Elements of
 toys_main.html
  Colours in this example are defined using
   Dynamically Applied Styles – NTSC-safe colours can
   be used for TV while High-Colour or True-Colour
   can be applied for PC
     Chapter 9- Selecting and
        Adjusting Colours

Testing Colours on Microsoft TV
  The ultimate test of your colour design is of
   course to upload to a server and test on a set-
   top box
  Design should be tested on all the most
   popular brands of TV sets and any other
   brands that the user will be most likely to view
   the page on
  Chapter 10- Creating Text for
          Microsoft TV

What to Avoid When Creating Text for
 Microsoft TV
How the Microsoft TV Proxy Server
 Handles Font
How to Use Styles to Control Font Sizes
How to Reconcile Font Sizes on Computer
 & TV
  Chapter 10- Creating Text for
          Microsoft TV

What to Avoid When Creating Text for
 Microsoft TV
  Small Text & Serif Font Hard to Read
    Font Size < 18 pt cannot be read
    Use Font Helvetica or Font Monaco
    Always use Sans Serif type Font
    Beware of text embedded in images – it may not
     be legible on TV
Chapter 10- Creating Text for
        Microsoft TV
Design Breaks Down When User Changes
 Font Size
  Microsoft TV gives user ability to choose between
   small; medium; large type Font
  Design must be tested and approved for all three
   settings or the page may look wacked out to the
   user
Bright Text Causes Distortion
  One way to rid text of distortion like glowing;
   bleeding; crawling is to use a cool colours
  Chapter 10- Creating Text for
          Microsoft TV

How Microsoft TV Proxy Server Handles
 Fonts
  MSTV Proxy adjusts type faces of HTML pages
   to display on TV
    Type Face changed to Font Helvetica or Font
     Monaco
    Font size < 18 pt is resized to Font size = 18 pt
    Font size > 18 pt is scaled accordingly
   Chapter 10- Creating Text for
           Microsoft TV
  MSTV Proxy can be overridden
     Fonts size = 7 is not resized (I don’t know why)
     Fonts size set by CSS is not changed
     It is recommended that designers override the proxy
      modifications by Dynamically Applied Style Sheets
How to Use Styles to Control Font Size
     When fonts are controlled by styles – neither the proxy nor
      the user can modify your design
     Only two fonts are supported by Microsoft TV – Helvetica;
      Monaco
  Chapter 10- Creating Text for
          Microsoft TV

How to Reconcile Font Sizes on the
 Computer and TV
  Designing a style sheet that will work on TV is
   difficult because development happens on the
   PC platform – see this section in the book for
   more information
  Chapter 11- Adding Images to
      Microsoft TV Content

Using Supported Image Types
Adding Images to Microsoft TV Content
Creating a User Interface with Images and
 JavaScript
Adding Images as Background
Using Image Maps
  Chapter 11- Adding Images to
      Microsoft TV Content

Using Supported Image Types
  .gif
  .jpg
  .png
  Chapter 11- Adding Images to
      Microsoft TV Content
Adding Images to Microsoft TV Content
  Width should not exceed 544 pixels
  Colours should be NTSC-safe
  Embedded Text Should Font type Sans Serif – Font
   size <= 16 pt
  Images should be tightly compressed
     Remember some Microsoft TV clients only use 56 Kbps like
      WebTV Plus Internet Receiver
  Horizontal lines should be thicker than 1 pixel
     NTSC interlaces graphics into two fields – each containing
      half of the pixels – horizontal lines only 1 pixel thick will
      appear in only one field – this might make them look like they
      are vibrating
  Chapter 11- Adding Images to
      Microsoft TV Content
Creating User Interface with Images and
 JavaScript
     A cool way to make a professional looking page is to make
      graphical buttons that use JavaScript to roll-over when they
      are in focus
  Caching Images
     It is possible to cache images by instantiating them in
      JavaScript
         • WebTV’s cache persistence is not to be trusted
  Making an Image Clickable
     Images must be anchored with HTML before they can spawn
      onClick events
Chapter 11- Adding Images to
    Microsoft TV Content
Referencing an Image
  Images are referenced in JavaScript using the
   document.images array – they are referenced by
   the name given to them by the designer with the
   name attribute
  Creating Functions to Swap Images
     • Write a JavaScript function to swap images and associate
       it with the onClick event of the corresponding anchor tag
  Adding Images as Background
     • Background images can be added to the document or any
       division on the document
Chapter 11- Adding Images to
    Microsoft TV Content
  Using Image Maps
    • Microsoft TV supports client and server side image
      mapping
    • Client side image maps are defined with HTML as per
      samples
    • Server side image maps submit co-ordinates of the
      pointer to a CGI engine which acts accordingly
Chapter 12- Adding Animation to
     Microsoft TV Content

Using Animated .GIFs
Using DHTML to Create Animation
Adding Macromedia Flash Movies
Chapter 12- Adding Animation to
     Microsoft TV Content

Using animated .GIFs
  Microsoft TV fully supports animated .GIF
    Animated .GIFs are matrix based so they are very
     large
  Creating animated .GIFs
    Software is available to create animated .GIFs
Using DHTML to Create Animation
    Using DIVs and JavaScript it is possible to create
     elaborate page-wide interactive animated effects
Chapter 12- Adding Animation to
     Microsoft TV Content

Adding Macromedia Flash Movies
    Flash movies are vector based so they are
     surprisingly small
Chapter 13- Handling Navigation
    for Microsoft TV Content

How Navigation Works for Microsoft TV
Forms and the Selection Box
Chapter 13- Handling Navigation
    for Microsoft TV Content

How Navigation is Handled by Microsoft TV
     Navigation is handled by arrow keys that control the focus of
      various hot spot that appear on the page
  Image Maps
     Client side
        • Client side image maps are handled like regular hot spots by
          Microsoft TV
     Server side
        • Server side image maps use a pointer interface to allow the user
          to select co-ordinates to be passed to the server for action
Chapter 13- Handling Navigation
    for Microsoft TV Content

Forms and the Selection Box
  Controlling where the Selection Box appears
    By default the selection box appears on the top-
     most left-most hot spot
    The default focus of the selection box can be
     defined by the designer using the selected tag
  Controlling movement
    Microsoft TV’s handling of focus selection can be
     micromanaged using the anchor attributes
     nextleft; nextright; nextup; nextdown
    Chapter 14- Audio & Video

Supported Audio Formats
Supported Video Formats
Volume Control of TV Object
    Chapter 14- Audio & Video

Supported Audio Formats
     .AIFF
     .AU
     .GSM
     .SWF
     .MIDI
     .MOD
     .MPEG
     .QT
     .RA (streamed)
     .SWA
     .RMF
     .WAV
    Chapter 14- Audio & Video

Supported Video Formats
    .MPEG (MPEG-1)
    .SWF
Volume Control of the TV Object
  You should not view audio or video content
   with audio in view=tv because the sound of
   the TV Object will interfere with enjoyment of
   sound
 Part III: Delivering Microsoft TV
                Content

Chapter 15- Fundamentals of Delivering
 Microsoft TV Content
Chapter 16- Creating Interactive TV Links
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
Overview of ATVEF Transport Methods
  Transport A
     Contextual information (synchronization)
     Added to analogue signals
     Shares line 21 with CC
     Most compatible transport with analogue signals
  Transport B
     Content information (data)
     Added to digital signals
     Multiplexed with sound & video information or uses other VBI
      lines
     Is compatible with some analogue signals but is very fagile
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
What is VBI?
  Vertical Blanking Interval of analogue
   television signal
  Lines (band-width) of the signal not used for
   video or picture-synchronization information
  Can be unused or can be used for CC;
   teletext; V-codes; time-code; current-time;
   ATVEF Transport A; ATVEF Transport B
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
Transport A: Interactive TV Links
  VBI Line 21 is Sacred
    FCC mandated VBI Line 21 be set aside for CC
    Designers of CC created a way of adding additional
     text to Line 21 which would not be displayed as
     captions by CC decoders
    CC uses the Caption Field of Line 21 – ATVEF
     Transports use Text Field
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
What Are Interactive TV Links
  Text tag in the form <URL><NAME>[CHKSM]
   where URL = Uniform Resource Locator of actor
   document , NAME = Name of tag , CHKSM = ASCII-
   Encoded Hexadecimal number used to verify tag
     • Check-sums are complicated to do by and hand are best
       left to a program to calculate
     • For a complete list of attributes see ATVEF specifications
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
Check-sum verifies Transmission Accuracy
   Conventional video signals are unidirectional – a redundancy
    check must be included along with tag or receiver will have
    no way to verify correct reception
   Receiver generates checksum for received tag and compares
    it with checksum attribute included in tag
   If the generated checksum matches the included checksum
    then the receiver acts
   If the generated checksum does not match the included
    checksum the receiver ignores the tag
   Chapter 15- Fundamentals of
     Delivering Interactive TV
              Content
Using the Microsoft TV Simulator to emulate
 ATVEF tag receipts
  Select the view menu and confirm that the Link
   Creator Window is checked
  Focus the Link Creator Window and type the address
   of the actor document into the URL Field
  Type the name of the tag into Name Field
  If you wish to emulate a javascript call – type the
   message into the Script Trigger Field
  Check View as Web or TV
  Select whether or not you wish the link to expire –
   type in the date and time of expiration
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
Generated tag is previewed in Generated Link
 frame
Press Copy to Clipboard to copy tag
Press Trigger in Browser to watch link
 receipt emulated
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
ATVEF Interactive Link Recommendation
  Tags should not take up more than 25% of line 21
  Never send a tag less than three minutes into
   show
  Tags can be added in post production or live
  Transport B must be used unless receiver has
   fore/back channel
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
Transport B: IP over VBI
  Best inserted by satellite or cable companies
    Cable & sat companies have ultimate control over
     content unlike producers
  Best with digital signals
  Can be used with analogue signals
    1-3 VBI lines minimal
    3+ lines recommended
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
What is so Cool about Transport B?
  Transport B can preload content into the cache
   before it is triggered so that it will appear
   immediately and will not congest forechannel
  Receivers do not need fore/backchannel
   capabilities to act on Transport B triggers
  Transport B is interpreted by TCP/IP Stack and
   interpreted no differently from forechannel data
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
TCP/IP Multicasting Overview
  Transport B encodes information in TCP/IP
   protocol and uses a special technique known
   as multicasting
  Announcements & Triggers use UDP while
   files use UHTTP
  Announcements tell receiver how much cache
   is needed so it can decide how to handle the
   session
  All data is losslessly compressed
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
TCP/IP Protocol 101
  TCP/IP Protocol is used for WAN and internetworking
  All computers using TCP/IP protocol must have a
   unique IP address
  There are four classes of TCP/IP networks on the
   internet
     Class A:   Large networks – U.S. Gov; Cable@Home
     Class B:   Medium networks – Ryerson University; Rogers
     Class C:   Small networks – Macromedia; Lucasfilm
     Class D:   Reserved (Multicasting)
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
How Announcements get heard
  ATVEF receivers always listen to well-known
   IP address and port
  Announcements use LID URL scheme to
   identify Transport B content to cache
  Triggers use HTTP URL scheme to identify
   content to act
  If content exists in cache then trigger action
   is ready as soon as trigger is received –
   otherwise receiver will pull content from
   forechannel
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
Political Considerations of Using IP over
 VBI
  Transport A is preferred over Transport B
   because of expense of uplinking additonal
   VBI lines to satellite
  Transport B data can only be reliably inserted
   by cable or satellite providers
  Digital Video Signals
     Digital signals include Transport B data differently
      so uplinking it is more practical
Chapter 15- Fundamentals of
  Delivering Interactive TV
           Content
Trigger Receiver Object
  ATVEF outlines a Trigger Receiver Object – a sort
   of plugin that handles Interactive TV triggers
  Microsoft TV does not require this – acting as if
   one is included automatically
     • Microsoft has the right idea here (for a change) –
       Trigger Receiver Objects are purely academic and there
       is no actual need such a thing to be defined on the
       document
  For stylistic reasons it is recommended that
   Trigger Receiver Object be defined for maximum
   compatibility
  Chapter 15- Fundamentals of
    Delivering Interactive TV
             Content
Transport A – B tradeoffs
  Transport A currently most popular
  Popularity of Transport B limited only by
   imposed VBI line restrictions
  Transport B expected to win popularity in
   pure-digital services (like DCT5000 STB)
Interactive TV Vendors
  Norpak; Motorola
Chapter 16- Creating Interactive
            TV Links

Creating Interactive TV Links with the Microsoft
 TV Viewer
The Microsoft TV Interface for Interactive TV
 Links
Creating Links to Humongous Insurance
The Link Type and View Attributes
Trigger Expiration Date
Creating Interactive TV Links with Script
 Triggers
Interactive TV Link Sequencer
Inserting Links into the VBI
Trigger Syntax
Chapter 16- Creating Interactive
            TV Links

Creating Interactive TV Links with
 Microsoft TV Simulator 3.0
  For a comprehensive guide on using the
   Microsoft TV Simulator 3.0 see the textbook
  To insert real tags into an NTSC signal you
   must use software like Microsoft Station Link
   Interactivity Manager or Extend Media’s Tag
   Broadcaster in conjunction with a VBI
   Inserter and NTSC formatted video
   production
Chapter 16- Creating Interactive
            TV Links

The Microsoft Interface for Interactive TV
 Links
    Note that one improvement of Microsoft TV over
     WebTV is that Microsoft TV has a better interface
     – the crude semitransparent ‘i’ which alerted users
     to interactive content is replaced with a neater ‘Go
     to Web Page’ prompt
  Interactive TV Link Limitations
    Tags are encoded like CC – so like CC they are
     limited to 60 char/sec
Chapter 16- Creating Interactive
            TV Links

Creating a Link to Humongous Insurance
  Humongous Insurance has been created as a
   project in Extend Media’s Tag Broadcaster on
   TRANSMIT_VBI so that it can be
   demonstrated on set-top box
  You can explore Humongous Insurance by
   trying it on the set-top box from Broadcaster
   or by experimenting yourself on the Microsoft
   TV Simulator 3.0 as per instructions in the
   textbook
Chapter 16- Creating Interactive
            TV Links

The Link Type and View Attribute
  The meaning of the type attribute is controversial –
   ATVEF specifications differ here from WebTV
   implementation – it is unclear what the meaning will
   be in future implementations of Microsoft TV – for
   more information read the textbook
Trigger Expiration
  Television content – once released – may float
   around indefinately on any number of video tapes – it
   is unlikely that a website enhancement will be
   available forever – therefore tags should include an
   expiry date to invalidate links a reasonable amount of
   time after the program is created
Chapter 16- Creating Interactive
            TV Links

Creating Interactive TV Links with Script
 Triggers
  On attribute that can be included in an
   Interactive TV Link is a javascript message
   which acts on the document specified in the
   URL attribute of the tag
Chapter 16- Creating Interactive
            TV Links

Creating a Script Trigger for Humongous
 Insurance
  To test out script triggers either examine the
   Humongous Insurance project on
   TRANSMIT_VBI or follow the instructions in
   the book to emulate the receipt of the tag in
   Microsoft TV simulator 3.0
Chapter 16- Creating Interactive
            TV Links

Ending an Interactive TV Program with a Script
 Trigger
  Any interactive TV experience should of course for
   stylistic reasons be closed by returning the browser
   to full screen television
  Building Interactive Entertainment and E-Commerce
   Content for Microsoft TV recommends closing
   interactive experiences by sending a tag that calls a
   javascript method equivelant to
   window.top.location.href = “tv://”
     I have also invested using method
      document.location.href.replace(nn), where nn is
      new href to transition viewer between pages – this may be
      the perferred method for IBO to use since it does not retain
      the original document in history and thereby prevents users
      from backing into cancelled interactive sessions
Chapter 16- Creating Interactive
            TV Links

 Trigger Matching
   Trigger matching is a technology pioneered by Microsoft to
    solve the dilemma of uncertainty that surrounds the href of
    the user upon the receipt of a trigger – instead of matching
    an exact URL – Microsoft TV can match a regular expression
    and will perform the javascript method if the user is viewing
    any page in the expression
       • E.g. www.rcc.ryerson.ca/webtv/demo/* would match
         www.rcc.ryerson.ca/webtv/demo/set and
         www.rcc.ryerson.ca/webtv/demo/windows
   Because a regular expression is a set of documents and not
    an exact actor document regular expressions cannot be used
    to actually link a page – since the viewer would have no way
    of knowing what page in the set to search for
Chapter 16- Creating Interactive
            TV Links

 Interactive TV Link Sequencer
 WebTV and Microsoft viewers provide INTERACTIVE
  TV LINK SEQUENCER to enable variety of Interactive
  TV links:
   Script triggers for viewers who tune in late.
   Script triggers that dynamically swap out a page
    or change content of a page.

    .
Chapter 16- Creating Interactive
            TV Links

 Using the Interactive TV Link Sequencer
 Open the Link Sequencer In Microsoft TV by
  clicking on View/Link Sequencer Window
 This is internal to the Microsoft TV
  Simulator.. Simulates an interactive TV
  broadcast.
 See pgs 213, 214
Chapter 16- Creating Interactive
            TV Links

 Encoding Links to the VBI
 Open the Interactive TV Link Creator, by
  selecting View/Link Creator Window.
 This utility lets you encode interactive TV
  Links with the Norpak Encoder
 A step-by-step installation procedure is
  shown on pg. 214.
Chapter 16- Creating Interactive
            TV Links

TRIGGER SYNTAX (ATVEV Compliant)

     Triggers are real-time events delivered to enhance the TV
      program.
     Triggers always include URL, and may include name, expiration
      date and a script.
     Triggers are text based
     Triggers must always start with a <
     General format for a trigger is
     <url> [atrrib1, val1] [atrrib2, val2]……[atrribn, valn] [checksum]
     Attribute/value pairs can be
     name:string, expires:time , script:string
     [checksum]
     Example:
     http://www.rcc.ryerson.ca[name:ike]

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:118
posted:11/19/2010
language:English
pages:126
Description: Full Screen Web Tv Templates document sample