HTML5 &
Digital Signage
An introduction to Content Development with the Modern Web standard.
Presented by Jim Nista
©2014 Insteo.
HTML5 - the Buzz
• HTML5 is an ‘industry name’ for a collection of web
development techniques and technologies.
• Not controlled by any company - developed by ‘the community’ and maintained by the World Wide Web Consortium.
• A constantly evolving standard.
• Built in interactive, video, caching and other capabilities.
• Designed to make web development easier and work across any device.
©2014 Insteo.
HTML and Flash - the History
• HTML is the original web browser markup language and the standard since 1990 for defining how web pages are built. • As web developers pushed for more interactive content in
the mid-1990s, solutions like Flash began to dominate. • Flash provides developers with standards so they could
be sure their content worked across any browser.
• Flash was the standard for video and interactive content, and used for YouTube and other popular sites.
• Flash was never an open standard, and in the mid-2000’s Adobe acquired Flash.
©2014 Insteo.
HTML5 begins to dominate
• The saw the need for a new standard about 10 years ago, and began specifications for HTML5.
• In 2008 the first HTML5 browsers were released.
• In 2010, Steve Jobs published a letter announcing why HTML5
would win over Flash, sparking a huge debate among developers. • The next year, Adobe began winding down Flash on mobile
devices and created a suite of HTML5 development tools.
• Flash isn’t dead by any means - still very much a standard for
desktop PCs but doesn’t have a future on modern devices.
• HTML5 dominates on mobile/embedded devices.
©2014 Insteo.
HTML5 - the collection of technologies
• HTML5 itself is a ‘cornerstone’ solution and relies on additional technologies for rich experiences.
• CSS3 is the style and design which defines the look of the page, and animated transitions.
• Javascript is a programming language that runs on the device - provides advanced coding capabilities.
• jQuery is a Javascript library which handles user interface and additional animations.
• True ‘HTML5’ makes use of a techniques most developers and companies declaring they are HTML5 don’t actually use!
©2014 Insteo.
HTML5 - Myths & Confusion
HTML5 is a standard.
It runs the same on any
device or platform.
HTML5 supports
animation.
If I see the HTML5 logo,
then it’s HTML5!
It runs great on low cost
devices.
Anyone can create
HTML5 Content.
©2014 Insteo.
HTML5 - Clearing up the confusion
HTML5 is a standard.
It is “Open”, so that means companies make their own changes, so its not standard.
It runs the same on an
y device or platform.
There are 5 major rendering engines, all with differences!
HTML5 supports animation.
HTML5 doesn’t support animation by itself. Other technologies
provide this.
If I see the HTML5 log
o, then it’s HTML5!
Unlike true standards like ‘Blu-Ra
y’, anyone can put the HTML5 log
o on their software or product.
It runs great on low cost devices.
Advanced capabilities require good processing capabilities!
Anyone can create HTML5 Content.
True HTML5 requires adv
anced design and coding capabilities.
©2014 Insteo.
HTML5 - no BS overview
• Companies may use / misuse the label ‘HTML5’, especially in the Digital Signage space.
• Not all hardware labeled ‘HTML5’ can really deliver interactive experiences.
• Different browsers/engines for HTML5 work differently. Not all are true HTML5!
• In 2014 it is easier / faster / cheaper to build web based content in HTML5 over Flash.
• More developers, larger ‘community’, and students coming out of 4 year programs haven’t studied Flash.
What HTML5 means to
Digital Signage.
©2014 Insteo.
HTML5 - Content on Digital Signage
• If you plan to use HTML5 Content on Digital Signage, you have choices to make and planning to do!
• Are your screens live connected to the internet 24/7? • Does your media player or embedded device support
HTML5 and direct web page connections? Do you have different types of media players?
• Will you use a CMS? If so, what browser engine does it use? • Are you developing new custom content or using templates?
©2014 Insteo.
HTML5 - Internet Connections
• HTML5 is a Web Technology! It is designed for online
internet viewing. There are some offline capabilities, but most developers don’t know how to utilize these.
• Rich and well designed HTML5 interactive/experiential content relies on web based connections!
• If you can rely on solid, always on internet, then typical HTML5 development techniques are the way to go.
• If you need extended offline playback (not outage protection), HTML5 offers some solutions, but your media player or CMS may have better protection.
©2014 Insteo.
HTML5 - Media Players
• Media Players use various HTML5 engines to convert the code into visuals.
• This is called rendering. HTML5 engines render code into content.
• There are 5 leading engines - Blink (Google), Presto (Opera), Gecko (Firefox), Trident (Microsoft), WebKit (Apple, Google).
• Android based players typically use WebKit or Blink which are nearly identical as of 2014.
• Windows based media players often use Trident. • Some screens use Presto or Gecko.
©2014 Insteo.
HTML5 - CMS concerns
• Many Content Management Systems (CMS) use their own
rendering engine, overriding what may be on the media player. • Some CMS’s on Windows use very old versions of
Internet Explorer which don’t support HTML5!
• Some CMS’s use very old versions of WebKit which don’t support modern animation techniques!
• With newer Android based media players, especially the ones built into today’s screens, you do not need a CMS for HTML5 content.
©2014 Insteo.
HTML5 - Challenges with Media Players and CMS’s
• Your developer testing their content in their web browser (Chrome/Safari/IE11) may find major differences when deploying HTML5 content to a Digital Signage platform. • They may have to make unexpected code changes!
• You may have different media players on your network - each with different rendering engines and each requiring different code.
©2014 Insteo.
HTML5 - Content Development
• Web designers and developers are not automatic Digital Signage designers and developers!
• Just because you can just show a web page doesn’t mean you should. Web pages are designed for close up viewing.
• There are many template resources available for easy to use HTML5 content.
• There are tons of online resources, 99.9% devoted to Web development, that can be adapted for Digital Signage.
• Savvy developers can overcome the rendering engine differences by coding intelligently.
What you need for HTML5
on Digital Signage.
©2014 Insteo.
HTML5 - Hardware and Software Best Practices for Digital Signage
• Connections: Always on Internet.
• Media Player: Android or Embedded in the Screen. • CMS: May not be necessary, but if you must,
check on it’s rendering engine.
• Media Player or CMS Rendering Engine: Based on the most current version of WebKit, Presto or Trident.
©2014 Insteo.
HTML5 - Content Development Best Practices
• If you plan to develop in house:
• Designer: a strong web designer who has broadcast design
experience - designs in Adobe CC and codes HTML5 and CSS3.
• Front End / UI Developer: handles the Javascript and jQuery work.
• Back End Developer: handles API connections to third party content.
• Plan on providing:
• A nearby Starbucks, good tunes in the office, access to Adobe Creative Cloud, font and stock photo
©2014 Insteo.
HTML5 - Using Content Templates
• Advantages of Content Templates:
• Prebuilt HTML5: You only need in-house graphic designers, people who don’t have a ton of web experience.
• Great design: Often built by Digital Signage design experts. • Customization: Some content templates allow you
to customize color and branding elements. • Editability: Some templates allow you to
edit pricing and other information.
• Plan on:
• Paying a monthly fee per screen.
©2014 Insteo.
HTML5 - Sharing with mobile devices
• Content built for ‘WebKit’ media players will often work without additional code changes on smartphones!
• This means you can use NFC/QR or short URLs and allow people to view the same content running on the Digital Sign on their smartphones.
• This allows people to browse menus, wayfinding Apps and more, after walking away from the screen.
• Allows for interactive touch content even when your Digital Sign isn’t a touch screen.
©2014 Insteo.
HTML5 - Why?
• More Developers: More Web developers vs. Flash developers.
• Lower Content Development Cost: More available help resources and code samples to help keep developers moving.
• Faster Content Development: HTML5 allows for more collaboration over other development methods.
• Rich experiences for Digital Signage: The collection of
technologies behind HTML5 can deliver everything Flash can. • Platform Independence: Savvy developers can deliver
matching content on any Digital Sign or Smartphone. • Truly the future: HTML5 engines in all devices. Flash
©2014 Insteo.
