DIGITAL SIGNAGE TEMPLATE (HTML5)

Overview We work with the Digital Signage market, which uses multimedia content to display messages to employees and customers through displays (TVs, monitors, LED panels). We use a digital communication platform (uSign) for which we need to develop html templates to display dynamic messages on the displays. These templates consume dynamic data from this platform that must be injected into the specified layout and animation. Animations are usually transitions in and out of dynamic elements (texts, images, videos), “power point” style. The templates must be produced using HTML5 / CSS / Javascript. The html design, animation references and all the assets for its construction, will be provided for the execution of this project, that is, this project does not include the design work, only the assembly, animation and reading of the dynamic data from a json file. Template information is usually composed of: title, text, image / video, background(image / video) Instructions Create an animated and responsive html template composed of a single HTML page ([login to view URL]). This html have to work off-line and without a web server. The content will run in a full screen and can’t show scroll bars or any other visual element that is not the html content The content of this template have to fill the entire browser area for any format, size or resolution, it will be used in landscape model and the original layout have to be the same for any resize. This template has 4 steps: slide1, slide2, slide3, slide4, it means that you need to change html content in each step. The html have to read the “[login to view URL]” file to obtain the dynamic information to be injected into the template layout. The data will be a json string. The sample_animation video has all the reference of the final effect of the assembled and animated layout, with the correct transition times to be used in the transitions of the elements for each step. The wireframes files have the final reference for each step of the template. PSD files contain all information about layouts, colors, fonts, assets, etc. The final delivery of the project must be made with a zip file containing all the source files of the project in their correct folder structure.