HTML5 & Digital Signage

Transcription

1 HTML5 & Digital Signage An introduction to Content Development with the Modern Web standard. Presented by Jim Nista CEO / Creative Director at Insteo

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

3 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. HTML was a mess, having evolved and changed without control.

4 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. Flash isn t on the BA Program Curriculum at major colleges.

5 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!

6 HTML5 - Myths & Confusion HTML5 is a standard. HTML5 supports animation. It runs the same on any device or platform. If I see the HTML5 logo, then it s HTML5! Anyone can create HTML5 Content. It runs great on low cost devices.

7 HTML5 - Clearing up the confusion HTML5 is a standard. It is Open, so that means companies make their own changes, so its not standard. HTML5 supports animation. HTML5 doesn t support animation by itself. Other technologies provide this. It runs the same on any device or platform. There are 5 major rendering engines, all with differences! If I see the HTML5 logo, then it s HTML5! Unlike true standards like Blu-Ray, anyone can put the HTML5 logo on their software or product. It runs great on low cost devices. Anyone can create HTML5 Content. True HTML5 requires advanced design and coding capabilities. Advanced capabilities require good processing capabilities!

8 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. Development tools for the richest experience are still in their infancy.

9 What HTML5 means to Digital Signage.

10 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?

11 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. HTML5 has a widget format, but not all devices and browsers support it.

12 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 Windows based media players often use Trident. Some screens use Presto or Gecko. WebKit is most common, but you can t count on that!

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

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

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

16 What you need for HTML5 on Digital Signage.

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

18 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 libraries and very flexible dress codes.

19 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. Getting your project up and running fast!

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

21 So, why is HTML5 better?

22 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 isn t being taught in 4 year programs.

23 If there are no questions - I haven t confused you enough! For more information about Insteo, please visit: insteo.com twitter.com/insteo facebook.com/insteo youtube.com/insteo