Building Interactive Entertainment

1
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.r
yerson.ca/webtv/notes
2
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

3
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 Programmers Guide

4
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

5
Chapter 1- Possibilities for Microsoft TV

• Standards Make Interactive TV Content viable
• Types of Content Best Suited for Interactive TV
• Personalized TV
• Viewer Participation

6
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

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

8
Chapter 1- Possibilities for Microsoft TV

• Personalized TV
• Microsoft TV allows television viewing
  experiences to be customized to meet users
  specific tastes customized sports score
  layouts, news preferences, stock portfolio or
  adds a twist to a show

9
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

10
Chapter 2- Introducing the Microsoft TV Platform

• Genesis of Microsoft TV
• Microsoft TV Platform
• Delivering Content to Microsoft TV

11
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 PCs and set-top boxes plugged into their
  cable companies such as Rogers

12
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

13
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

14
Chapter 2- Introducing the Microsoft TV Platform

• Microsoft TV Server (cont)
• 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)

15
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)

16
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

17
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

18
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

19
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

20
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
• IBDGs current setup is very much like the
  Ultimate TV Studio

21
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

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

23
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

24
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

25
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

26
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 tvxx where xxstation or
  channel name
• The Full Screen Button is a button (or link)
  which references tvxx

27
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

28
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

29
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

30
Chapter 4- Fast Track for Creating Microsoft TV
Content

• Test the Page on TV
• To view templates on TV, you must visit
  Microsofts 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

31
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

32
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

33
Chapter 5- Guidelines for Designing Microsoft TV
Content

• Fitting Content into Microsoft TVs Design Area
• Web Mode vs. TV Mode
• Strategies for Designing Content

34
Chapter 5- Guidelines for Designing Microsoft TV
Content

• Fitting Content into Microsoft TVs Design Area
• Microsoft TVs Design Area is the region of
  screen space where objects can be displayed
• 560 x 420 pixels 43 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

35
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

36
Chapter 5- Guidelines for Designing Microsoft TV
Content

• Strategies for Designing Content
• Avoid MSTV client/server modification
• Page width lt 544 pixels
• Graphic width lt 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

37
Chapter 5- Guidelines for Designing Microsoft TV
Content

• Strategies for Designing Content
• Make TV Object as large as possible
• Consider aspect ratio (NTSC43 HDTV169 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

38
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

39
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 ATVEFs
  recommendations Microsoft TV only supports a
  subset of DHTML implementation is very poor

40
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

41
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)

42
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

43
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 tvxx
  it can be set as the background or as an object
  with height width set to 100

44
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
  viewtv

45
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 lt 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

46
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)

47
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 lt 0 appear behind the
  document body

48
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

49
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

50
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

51
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

52
Chapter 7- Layering TV over Web Content

• Avoid Iframes
• Iframes are incompatible with Microsoft TVs
  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

53
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

54
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 viewTV
• Microsoft TV does not support scrollable frames
  frames are displayed as they would be if they
  were tables

55
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 43 graphic placed in a DIV with
  the TV Object overlapped over it on another DIV

56
Chapter 7- Layering TV over Web Content

• Creating TV Object
• ltobject datatvnn heightx widthygt , 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 43
• 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 viewtv tag or TV Object wont
  work on Microsoft TV

57
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

58
Chapter 7- Layering TV over Web Content

• Defining the Anchor for the Full Screen Button
• lta Hreftvxx gtyylt/agt , 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?

59
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

60
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

61
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

62
Chapter 8- Styles Style Sheets

• Microsoft TVs CSS Support
• Applying CSS Properties to Interactive TV Content
• Strategies for Implementing Styles Inline
  Embedded Linked
• DHTML

63
Chapter 8- Styles Style Sheets

• Microsoft TVs 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

64
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

65
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

66
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 TVs subset of DHTML includes the
  ability to hide and show DIVs and to animate DIVs
  on the screen

67
Chapter 9- Selecting Colours for Microsoft TV
Content

• Selecting and Adjusting Colours
• Specifying Colours with HTML and Style Sheets
• Testing Colours on Microsoft TV

68
Chapter 9- Selecting Colours for Microsoft TV
Content

• TVs 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

69
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

70
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

71
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

72
Chapter 9- Selecting and Adjusting Colours

• NTSC Filter on Pure White (FFFFFF)
• This colour is not handled might by most TVs
• Photoshops 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

73
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

74
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 havent 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

75
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

76
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

77
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 lt 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

78
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

79
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 lt 18 pt is resized to Font size 18 pt
• Font size gt 18 pt is scaled accordingly

80
Chapter 10- Creating Text for Microsoft TV

• MSTV Proxy can be overridden
• Fonts size 7 is not resized (I dont 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

81
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

82
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

83
Chapter 11- Adding Images to Microsoft TV Content

• Using Supported Image Types
• .gif
• .jpg
• .png

84
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 lt 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

85
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
• WebTVs cache persistence is not to be trusted
• Making an Image Clickable
• Images must be anchored with HTML before they can
  spawn onClick events

86
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

87
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

88
Chapter 12- Adding Animation to Microsoft TV
Content

• Using Animated .GIFs
• Using DHTML to Create Animation
• Adding Macromedia Flash Movies

89
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

90
Chapter 12- Adding Animation to Microsoft TV
Content

• Adding Macromedia Flash Movies
• Flash movies are vector based so they are
  surprisingly small

91
Chapter 13- Handling Navigation for Microsoft TV
Content

• How Navigation Works for Microsoft TV
• Forms and the Selection Box

92
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

93
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 TVs handling of focus selection can be
  micromanaged using the anchor attributes
  nextleft nextright nextup nextdown

94
Chapter 14- Audio Video

• Supported Audio Formats
• Supported Video Formats
• Volume Control of TV Object

95
Chapter 14- Audio Video

• Supported Audio Formats
• .AIFF
• .AU
• .GSM
• .SWF
• .MIDI
• .MOD
• .MPEG
• .QT
• .RA (streamed)
• .SWA
• .RMF
• .WAV

96
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 viewtv because the sound of the TV
  Object will interfere with enjoyment of sound

97
Part III Delivering Microsoft TV Content

• Chapter 15- Fundamentals of Delivering Microsoft
  TV Content
• Chapter 16- Creating Interactive TV Links

98
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

99
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

100
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

101
Chapter 15- Fundamentals of Delivering
Interactive TV Content

• What Are Interactive TV Links
• Text tag in the form ltURLgtltNAMEgtCHKSM 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

102
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

103
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

104
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

105
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

106
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

107
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

108
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

109
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_at_Home
• Class B Medium networks Ryerson University
  Rogers
• Class C Small networks Macromedia Lucasfilm
• Class D Reserved (Multicasting)

110
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

111
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

112
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

113
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

114
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

115
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 Medias Tag
  Broadcaster in conjunction with a VBI Inserter
  and NTSC formatted video production

116
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

117
Chapter 16- Creating Interactive TV Links

• Creating a Link to Humongous Insurance
• Humongous Insurance has been created as a project
  in Extend Medias 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

118
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

119
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

120
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

121
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

122
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