Building Interactive Entertainment - PowerPoint PPT Presentation

Loading...

PPT – Building Interactive Entertainment PowerPoint presentation | free to download - id: 8b078-ZDc1Z



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Building Interactive Entertainment

Description:

Font should be set with Cascading Style Sheets JavaScript should be used to ... For artistic reasons the space under the TV Object should be filled with ... – PowerPoint PPT presentation

Number of Views:57
Avg rating:3.0/5.0
Slides: 127
Provided by: derekse
Learn more at: http://www.rcc.ryerson.ca
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com