Act Responsively.

Easily Create Interactive Content in HTML5

Create interactive content easily with the HTML5 web application called Presenter

When Steve Jobs released his thoughts on Flash it was the beginning of an end to web interactivity as we knew it because literally all interactive content up to that point was based on Adobe’s Flash. HTML5 was the closest alternative but unless you were a good designer and great at HTML5/CSS3 coding you would find it cumbersome to create the level of interactivity versus using Flash.

Content creation in HTML5 for Everyone
A new convenient Web Application called Presenter is not only changing but also simplifying the way visual content is created. Presenter is developed by Easy WebContent a division of HindSite Interactive known for their award winning custom web design and development services. In 2010 after inquiries for their interactive projects declined (due to Flash’s demise), they took on a major challenge of creating an application that would revitalize the way engaging content is created.

The fact is they didn’t want to just create another animation software; instead Easy WebContent spent over 2 years of research and development to create a single application that will serve all your rich content needs not only for animations, but also for presentations, interactive infographics, banners, and product demos. And all along designed in a manner that anyone be it a novice or a professional designer can utilize the easy to use interface and the various features to create content quickly and easily right in your browser. Think of it as a marriage of Flash and Powerpoint on the cloud, but on HTML5. As a result any project you create is viewable on virtually any devices (web or mobile), any platforms (PC or Mac), and all recent browsers.

What kind of HTML5 interactive content would you like to create?

The beauty of Presenter also lies in the fact that it is based on HTML5 canvas and also utilizes a hybrid of DIV’s, setting it apart from other apps. This gives the system superior performance allowing users to create multiple moving objects at the same time with little processing utilization while allowing the support of SEO friendly content. It also provides full flexibility over each element you place on the stage.

Presenter makes customizing content easy.

Usable for various industries and Applications:
Need to make a simple or fully interactive presentation to present your project, or organization? Need to create a mock-up of a website or brochure? Need to create a resume that stands out from the crowd? Want to create animated banners for your website? Or do you need to place a professional short demo of your product features? All of these and more can be created and published in your browser using Presenter.

The Interface is easy and intuitive
The problem with most applications is that they are either made easy to use in exchange for sacrificing control and customization, or they so feature rich that it overloads the user interface and requires a high learning curve and becomes too complex for the average person.

In case of Presenter you get the best of both worlds where it is starting to bridge this gap. Presenter is a simple and easy to use tool. It does not matter whether you are a professional or a novice, you will still be able to use the service.
After selecting a template, it loads in the system where you can simply change and adjust content or use the system’s flexibility to fully customize it to fit your needs.

At first glance, it may seem difficult, which is often the inevitable price of rich functionality. However, with further acquaintance with this application you will see that its interface is logical and comfortable, and the working principles are not too different from other programs to create digital presentations.

The interface is actually easy to grasp for anyone who has ever used Presentation software be it Flash, Powerpoint or Keynote. The left side panel is used to switch between the panels set general properties of the presentation, management of individual slides, configuration properties of the selected element in the workspace and preview window. The editor has the ability to undo prior actions and auto-save your project. You can even restore to prior versions of your project within a click via the “Restore” tab.

Web App Interface

You get tons of assets
Another advantage of Presenter is the degree of assets and customization it provides. They go beyond simple shapes; instead they have an extensive collection of shapes and icons (entirely based on SVG so they are in essence vector objects you can resize without ever losing clarify). You can also directly search for images on Flikr’s Creative Commons library and use on your project.

The Infographs are a great set of assets. You can virtually drag and drop a visual data piece onto your stage and within a couple clicks customize it to fit your data visualization needs. For example instead of showing a boring piece of data like this:

What percent of kids prefer Ice Cream, Jello, or Cake as a snack?
Ice Cream: 51%
Jello: 10%
Cake: 39%

I can instead visualize it in a more enticing manner:

Infograph example made with the web app called Presenter

Although at the moment Presenter is a bit low on the number of templates for each category, given they just launched in early 2013 they are actively rolling out multiple templates each month so the system will only become more rich with presets and templates over a short period of time.

What can you do with your Saved content?
After finishing work on a project you can save it and come back anytime to edit and update it. When you Publish your work (via the Publish button) you can take advantage of multiple share/export option including:

- URL: Just like Youtube you get a link you can use anywhere to access the published project.

- Share: You can share your work on virtually any Social network or through email.

- Embed: Similar to Youtube and Vimeo you can use the embed HTML code and paste it into your own website or blog to display your published work. In fact the animation piece on ewcPresenter.com is an embed of their own published project.

- Last but not least you can even download your published work as an image (JPG) or as an electronic document (PDF). Read More…

Learn HTML5 with Videos and Books

Treehouse Logo

I moved to a rural part of Japan six years ago with no prospects. There was no job waiting for me and I didn’t have a college degree to help me become employed. My Japanese speaking skills were nonexistent unless you want to give me credit for mistakenly asking people if I could “have” their toilet. I knew I needed to figure out a way to earn a living.

I tried several ideas that all failed. The most notable of the failures was the month I tried to sell Japanese Transformers on eBay. I probably would have done better if I made an eBook “How to Make Money Selling Japanese Transformers”. You really can make money but not much…just enough to purchase expired sushi and paper towels. The towels are important because they will be used to clean up any sushi that is “returned to sender”. Ewwww!…but true.

How did I escape financial ruin? How did I go from being dirt poor to just poor? The answer is online tutorial and training videos. I had computer skills but needed to improve them so I signed up for the free trial at Lynda.com and watched as many videos as I could. I was also learning from YouTube, forums, and by dissecting source code. The way I went about acquiring skills wasn’t ideal. I think the learning online thing would have worked better for me if everything I needed to know was in one place. This is why I was very happy when Faye, the community manager at Treehouse contacted me.

Treehouse is taking a new angle at the traditional online teaching video. Their videos tend to run as a course with quizzes and interactive Code Challenges mixed in. As you complete the courses you will earn badges that are an indicator of what skills you currently possess. These badges are then viewable by anyone including recruiters from big companies. This means that everything you need to know will finally be in one place!

The Treehouse course called Websites covers the latest HTML, CSS, and Javascript. There is something for everybody with beginner, intermediate, and advanced level projects. Learn how to build an interactive website using jQuery and Javascript. Take your responsive web design skills to another level by modifying the code of a pre-existing website so that it works beautifully on tablets and phones. Another part of the course is the project on how to build your very own WordPress Theme which is a very marketable skill.

HTML5 Mobile Web Applications is part of the bonus content on the site. This series teaches you how to build a mobile HTML5 web app that will work across multiple devices, using canvas, localStorage and video.

Treehouse recently expanded into print with the release of their first two books in the Treehouse Series: HTML5 Foundations by Matt West and CSS3 Foundations by Ian Lunn. HTML5 Foundations is an in-depth guide to HTML5 which will introduce you to the basics of HTML5, including how to format text, add scripts to pages, and use HTML5 for audio and video. It also covers hypermedia, CSS and JavaScript, embedding video, and geolocation. Read More…

New JavaScript UI Library

Javascript Library w2ui

I am a big fan of simplicity. Some of my favorite quotes reflect this; “less is more”, “keep it simple”, and “are you going to eat that?”. I live in the land of sushi and believe the world would be healthier if everything people ate had 5 ingredients or less. I don’t own a TV or use a cellphone for anything other than testing new apps and responsive designs. They were both replaced with an iPad.

The best house near me is for a true minimalist. It was built and laid out using a simple grid system that divides the space into three living quarters. The layout feels like the architects were working on a new web design and halfway through decided to create a house instead.

My appreciation for all that is simple gives me a moderate level of enjoyment in introducing the new open source JavaScript UI library called w2ui. It is a nimble 37kb (minified and gziped) which means that the load and execution times will be done in a flash, pun intended. It is 12 times smaller than Ext JS and 6 times smaller than Kendo UI. The w2ui code is licensed under the “if it’s free, it’s for me” license also known as the MIT license.

The w2ui is a complete set of UI widgets for data-driven web applications. Read More…