HTML5 is poised to be the next-generation digital content platform. One of the first advocates for HTML5 as the next content platform is the late Steve Jobs as he expressed on Apple’s web site in April 2010: HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, [...] New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Facing the ubiquity of the HTML5 platform, Adobe, the creator of the popular Flash content format with abundant applications digital signage, announced in November 2011 that resources will be turned to support HTML5 on future devices. It is quite apparent that HTML5 is quickly gaining dominance on new devices.

What does HTML5 do? HTML5 is the fifth generation of HTML standard and typically describes a set of 3 technologies: HTML A mark-up language for describing the structure of content, including text, image, video, and sound CSS A “style sheet” which describes how each element of the content should be displayed and animated JavaScript A programming language for manipulating elements of the HTML document to create dynamic and interactive content These technology combine to deliver all the innovative contents available on the web today. Apple has produced an impressive gallery of HTML5 content to illustrate the power of HTML5.

Why is HTML5 relevant to digital signage Digital signage started out as a screen displaying videos and pictures mainly to supply information and entertainment to a targeted audience and help service commercial needs. Digital signage projects always look to the latest and coolest technology to improve the ability to engage and deliver results. HTML5 offers a great mechanisms to deliver the following on the big screen: Dynamic content generated from a live database, such as flight/train/bus schedule, electronic menu boards, etc. Live news, weather, sports scores, etc. provided by sources on the web Community-generated social interaction, including data extracted from social platforms including Twitter, Facebook, etc. Interactivity with the audience via the mobile phone or detected using motion sensors, webcams, or touch screen Often overlooked, HTML5 allows content designed for consumption on the web to be re-used for the big screen as well, saving cost of content creation tremendously. In short, HTML5 offers the complete package for producing the next-generation content for digital signage. Experts Speak The insightful digital signage blog Sixteen:Nine wrote in HTML5 Now Finding Its Way Into Digital Signage: [...] … Continue reading →

HTML5 Applications in Digital Signage Digital signage can be greatly benefited from HTML5 in many applications. Here are some examples. Electronic menu board HTML5 can be easily tailored to presenting information in tabular form that is quick to update. A great application is presented by Rise Vision as their Restaurant: Fine Dining template:   Restaurant signage HTML5 is useful for many applications in the restaurant setting. A beautiful example is The Restaurant template available through Rise Vision. Financial information HTML5 can be applied for displaying financial information updated live. A great example is provided by The Markets template from Rise Vision. The same technology can be applied to applications including display of interest/exchange rate information, transportation arrival/departure information, etc. Live news update HTML5 readily integrates with vast number of available information feeds across the world-wide web. The following is provided by Screenfeed: Launch in an HTML5 browser to view animation. Business intelligence Digital signage can help business manage more efficiently by displaying dynamic management information on the big screen. A great example of such service is provided by Geckoboard. The application integrates live management data such as sales and … Continue reading →

Serving HTML5 content to an IAdea Web Appliance IAdea Web Appliances are designed to provide high quality video playback mixed with dynamically generated information. You have already seen what can be done in HTML5 for digital signage. This section will guide you to actually deploying the content to an IAdea device. Using a third-party service The quickest way to get started reaping the benefits of an IAdea Web Appliance is to use one of the software and/or service options certified to work with an IAdea device. Typically, the service provide would provide an URL that an IAdea device is expected to load at boot time. On your IAdea Web Appliance, set this URL as the device’s “Content Source” configuration. Then the player will load the service automatically at boot time. You can then manage the content to display on your device using the user interface provided by the third-party vendor. Consult with the software/service for specific instructions on producing your desired output. Serving your own HTML5 page To display your own HTML5 web page on an IAdea Web Appliance, simply place … Continue reading →

Design considerations in creating HTML5 content for the big screen It is recommended that you develop your content on a computer using an HTML5-compliant browser, such as the Google Chrome browser or the Apple Safari browser. Designing HTML5 content for the big screen can be tricky even if you are familiar with content creation for the computer monitor screen. Font size It is typical for the computer monitor to be located three feet from the viewer. However the big screen used in the public space is typically much farther from the user. Make sure you make the key message (Sale!) short and large enough in font to catch attention, and keep the smallest font comfortably readable from a few steps away. Animation HTML5 provides powerful animation effects via CSS. However, the performance of the animation on the Web Appliance can be quite different from that of your browser used in development. Make sure you test animation for performance before deployment. Should you find the animation performance inadequate, it is advised that you reduce the size of the animated region. Performance … Continue reading →

HTML5 Widgets A great way to take advantage of HTML5 for digital signage is to build “widgets” that display dynamic information using a portion of the large screen. Below are some sample widgets: Please use Google Chrome browser for the best viewing experience of HTML5 widgets.

Building a Widget This section provides information to help you build widgets using the IAdea Widgets Library for Digital Signage. Tutorial: The “Hello, World” Widget Let’s start by building a simple widget that prints “Hello, world.” and improve it later using the IAdea Widgets Library. It is assumed that the audience is familiar with general HTML content creation, knows about SMIL programming, and is looking for HTML-based tools as a solution for digital signage requirements. The Simplest “Hello, world” The simplest “Hello, world” widget to create can be done in just a few lines of HTML code:   <html> <body> Hello, world. </body> </html>   The output of the widget should be similar to the following. To view this on an IAdea Web Appliance, do the following: Save the HTML widget code as file name “index.html” Compress the file into “ZIP” format Rename the file with “.wgt” file extension (e.g., index.wgt) Schedule the .wgt file in SMIL like any other media object (such as video), using the <ref> tag (see Scheduling a Widget using SMIL – below). You may consult http://A-SMIL.org for information regarding SMIL. Of course, … Continue reading →

Using HTML5 in SMIL While IAdea players can directly play HTML5 files, there are several benefits if HTML5 is scheduled as a media element in SMIL. Please note that to activate support for HTML5 content type, the SMIL body element must be attributed withsystemComponent=”http://www.w3.org/1999/xhtml”, such as:   <smil>   <head/>   <body systemComponent=”http://www.w3.org/1999/xhtml”>     <!– … –>   </body> </smil>   Then HTML content can be referenced using one of the following ways:       <text src=”http://server/path/doc.html” type=”text/html” />   or       <ref src=”http://server/path/doc.wgt” type=”application/widget” />   where a widget (.wgt) file is a zipped tree of an HTML document named “index.html” stored with all its external assets. The media element can be given a display duration, start and end condition, etc. just like any other media object referenced in SMIL. Caching HTML Widgets in SMIL HTML5 can be directly linked from SMIL as a simple <text> media object. However, such usage can face a problem when device accidentally reboots while network is not available. When such an event occurs, the SMIL framework only caches the HTML document. … Continue reading →

Applying to an IAdea Device Below are the recommended practices for applying HTML5 to IAdea web-enabled appliances. Simply Displaying an HTML5 Web Page The simplest way to display a web page on an IAdea appliance is to set the device’s content source configuration option to the URL of the web page. The content source option can be set via the on-screen menu accessed by inserting a USB keyboard and pressing <CTRL><ALT><DEL> key combination. If a password was set, you will need to enter the password at this stage to access the menu. When displayed in this mode, the content is shown at the configured screen resolution. If resolution is set to auto, the default resolution is 1024×768 on VGA connections and auto-detected on HDMI. Using a Configuration File for Large Deployments Alternatively, the content source can be set using a FAT-formatted USB stick loaded with a file namedconfig.xml with the content shown below. You can optionally set the device’s Wi-Fi options (if applicable), time zone and display resolution using the same file. This is especially suitable for large-scale player deployment.   <configuration xmlns=”http://schemas.adfotain.org/config-1.0″>   <security>     <user>admin</user>     … Continue reading →