content creation guidelines 4 1

8/3/2019 Content Creation Guidelines 4 1

http://slidepdf.com/reader/full/content-creation-guidelines-4-1 1/22

© 2006 Cisco Systems, Inc. All rights reserved. Cisco Confidential 1

Cisco Digital MediaSystem 4.1

Web and Flash Content

Design Overview

TME Technical Conference Call

January 3, 2008




Digital Media Player

The DMP has 2 CPUs:

Flash

CPU

CPU

Video

Freescale400MHz

128 MB RAM

Sigma DesignsMedia

Processor




Cisco Digital Media System—

Simple Architecture

Digital Media Manager software for signage content management

Digital Media Player for displayof content on digital signs

Network




Two ways to publish content for playback on the DigitalMedia Player:

Content Management Options

1 2

Stand-alone creation andpublishing of standalone web

contentCreate your own web pages andtemplates, and publish contentusing your own tools and publishing

processes. Then use the DMM or the DMP’s Device Manager interface to instruct the DMP to playback content (either to fetch a URLor subscribe to a multicast).

Using Digital MediaManager (DMM)

This allows you tocustomize pre-definedtemplates, selectcontent, and publish

the content changes tothe DMP on ascheduled or ad-hocbasis.




Content Creation Pyramid

Basic HTML, static images, PowerPoint

for general audience

Advanced HTML, Flash animation

for Web designers/creative agencies

JS API to the DMP

for Web/SW developers

Video

Authoring

for creative

agencies

Skill sets for specific audiences




The tested and recommended toolsfor content creation

Adobe Dreamweaver

Adobe Flash 6.0 and higher (Final swf output must be

published for Flash Player6 and/or Flash Player7 )

Adobe Photoshop Adobe Premier

Final Cut Pro

Sony Vegas

VLC



© 2006 Cisco Systems, Inc. All rights reserved. Cisco ConfidentialPresentation_ID 7

Digital Signage Content

VideoTextGraphicsAnimations

HTML Wrapper




Design main components:

Cascading Style SheetsCan either be embedded in the HTML or can be provided by a separate file, which is referenced from within the HTML.

Used to define content presentation: colors, fonts, layout, and other

aspects of document presentation. Easy to modify.

Hyper Text Markup Language

An example is <p> to start a new paragraph, and </p> to end a paragraph.

We use <div> tags to include content : images, movies, ticker, etc.

JavaScript (ECMAScript)

In our presentations JS creates the window where MPEG movie starts and

plays the movie, allows to synchronize events, and runs the ticker.

Html page

CSS

JavaScript




Supported Graphics Files Formats:

Raster Graphics

When enlarged, it might look like the bigdollar sign to the right. Every squarerepresents a pixel.

P N G

P N G

Pixels

308x410

55x75




Supported Graphics Files Formats

. jpg

.png

.gif

.swf




Supported Graphics Files Formats:

raster versus vector graphics

GIF

JPEG

PNG

Raster Graphics: Vector-based Graphics:

SWF

No Resize Can Resize




All Supported File Formats

DMD Custom

Acceptable Content Formats

Flash 6 movie and/or Flash 7 movie (.swf)---audio, .flv not supported

ECMA script (Java Script ) version 1.5

Mozilla 1.7.13

File formats for the animated, or still images: .swf , .gif, . jpg, .png

For external jpg files in .swf movie: non-progressive scan, Max. size:

450KB

MPEG 2 encapsulated in Transport Stream,

High Definition (HD) and Standard Definition (SD) formats, and size

depending on native resolution of your display.

RSS tickers via RSS XML




MPEG-2

720p is widely used and supported by most plasmas and LCDdisplays. For example, 720p is used by ABC and ESPN because

the smoother image is desirable for fast-action sports telecasts.

The DMP will play all standard and HD formats that your Displaysupports.

Stream type: transport stream.

Transport stream =

video + audio

in 1 file




Screen Resolution




Title and Action Safe Area




Type Face for the Screen Design

1: Italic fonts are not recommended.

2: Sans-serif type face fonts are recommended.




Font Colors for the Screen Design

1: Avoid saturated, very bright colors.

2: Use contrast colors/tone for text against the background color.

3: Light text on dark background reads best.

4: If you prefer to use a white background, make it slightly grey

instead.

Overpowering Strong




Font Size for the Digital Sign

24 points looks good and is easy to read on horizontally-mounteddisplays.

Negative Space




Font/Character Embedding into Flash Movie:

1: Create your text in Flash Application

2: Apply Dynamic Text property to it

3: Click the Embed… button

4: Select characters that need to be embedded

5: Hit the OK button




Technical Resources on Cisco Website:

PowerPoint to Flash Converter

PowerCONVERTER links: http://wwwin.cisco.com/etg/dmsbu/technical/index.shtml

http://www.presentationpro.com/products/powerconvert

ercs.asp




Font/Character Embedding into PP:

1: On the File menu, click Save As

2: On the toolbar click Tools, click

Save Options select the Embed

TrueType Fonts check box, and then

select Embed characters in use

only (best for reducing file size)

3: Hit the OK button




Power Point to Flash Movie Conversion

1: Select Slide Transition from the Slide Show drop-down menu

2: In Slide Transition Panel choose No Transition

3: From Advance Slide menu choose Automatically After and specify time in

seconds

4: Click on the Power Converter Button to convert your PP into flash movie

5: Choose Cisco DMS Digital Signage Module, and choose the desirable options

1

2

3

content creation guidelines 4 1

Documents