HTML 5 Tutorial

A Quality Responsive HTML 5 WordPress Theme

the Editor — Fri, 08 Jun 2012 10:52:11 +0000

WordPress is one of the most popular content management systems around. In a series of posts over the next few months I’m going to feature a selection of what I believe are the cream of wordpress themes that are designed for the future. You can also hire a wordpress design company to help customize your theme exactly as you want.

There are two components to a theme that are becoming demanded of more and more and the peresent time, HTML 5 and Responsive. People want to display and use the latest version of HTML and they wish to do so on multiple devices in a beautiful manner. Responsive themes will look great on all devices, be it a computer, tablet or phone.

Here is a responsive HTML 5 theme for wordpress:

SmartStart WP

A simple and clean but still professional theme suitable for any business or portfolio, and it’s created by using the latest HTML5 and CSS3 techniques. With a responsive design it is easily usable with any device, without removing any content!

The Homepage

The Portfolio

The Blog

Demo & Where to Get:

You can view the theme in action here…

You can get this theme here…

How HTML5 Aids Mobile Financial App Development

the Editor — Wed, 28 Mar 2012 18:59:59 +0000

HTML5 Series- Part 2: How HTML5 Aids Mobile Financial App Development

This is our second post in the HTML5 series. There are number of new tags in HTML5 that aid in the development of mobile financial apps. In this post, I aim to explain these new HTML5 tags and how they facilitate the building of fully functional financial apps with native user experience.

We partnered with our friends at OpenFin, to develop a HTML5-based mobile app. They developed a HTML5-based financial app (PNL tool) for the iPad. The app gets updated every five minutes and provides quotes for securities across multiple asset classes (stock, bonds, options and futures). The app was developed in 2 weeks flat. As they say, seeing is believing. To get a feel of how powerful HTML5 apps can be, download the app for free on your iPad.

The installation instructions and the download link for the HTML5 app are given below:

On your iPad, visit: https://pnlhd.openf.in/app/pnlhd.html.
Tap on the install button.
Follow the 3-step instructions to install the mobile app.

In my last post, I outlined why HTML5 is a good platform for developing mobile financial apps. The key advantages that HTML5 provides are summarized below:

HTML5-based financial apps work cross-platform and a single mobile app lets you support clients across all mobile platforms (you might need to optimize the mobile app to counter differences like screen sizes on different devices).
HTML5-based financial apps let you take control of mobile app support, enhancing reliability, as you don’t have to depend on the platform provider (Apple store) for support.
HTML5 mobile apps provide a very strong visualization interface that supports native user experience, making financial data far more intuitive.
HTML5 mobile apps can be instantly deployed and updated in real-time, allowing you to constantly add new features and differentiate from competitors.
HTML5 mobile apps are just as powerful as native apps, providing optimal performance required for financial apps.
HTML5-based financial apps are secure, if HTML5 specifications are used in conjunction with security best practices.

HTML5 Tags & How They Aid Financial App Development

This section explains the HTML5 features we used, how they were used and the advantages they provide.

HTML5, not HTML:

The first step is to inform the mobile browser that the financial app is HTML5-based, and not HTML-based. The way to do this is to include the HTML5 doctype.

The valid doctype for HTML5 is

PNL HD Financial-App

Unlocking storage

One of the biggest hurdles developers of financial apps face, is the limited storage space available for mobile apps. Financial apps need to store data for a multitude of reasons such as updating security quotes and news. It is often inefficient to store such data on a server. Fortunately, the HTML5 specifications contain a standard for local storage which is supported by browsers on all mobile platforms.

There are two types of storage available for the client code in HTML5, local storage and the SQL database:

Local Storage:

Local storage is a simple key-value store that supports only strings as both keys and values. Local storage can be manipulated using two basic operations, set and get, as shown below:

//To save an item into local storage
localStorage.setItem(key, value);

//To get an item from local storage
value = localStorage.getItem(key);

In our financial app, we used this to store application installation keys, session information and user preferences. It is limited in size to 5mb on iOS.

SQL Storage:

SQL storage is a light SQL database. It generally occupies 5Mb, but subject to user permissions, it can occupy up to 50Mb. We used this database to cache app data, dynamic image assets, and user preferences. It supports all of the CRUD operations.

Making the application work offline

For financial apps, functionality gets reduced if the user does not have a constant connection to the Internet. However, applications should not fail completely because the user is not connected to the Internet. Imagine financial apps not displaying your portfolio, just because the mobile app is offline.

The manifest enables financial apps to work in offline mode. It is very easy to use but you must make sure all static assets are listed in your app.manifest file and that the manifest is referenced in your .html file before the tag:

The assets listed in the manifest file must not exceed 5Mb in total.

There’s another advantage to this, and that is speed. As financial apps have to be functional even offline, the HTML, JavaScript and CSS are all cached. This ensures that the mobile app is as fast and powerful as a native app.

Using the canvas tag

Canvas is a very simple pixel-based drawing API, but if used the right way it provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs or other visual images on the fly.

To use the canvas tag, you’ll need two things:

A Canvas tag in the HTML to place the drawing canvas
JavaScript to do the drawing
// Checking that element is in the DOM and that the browser supports canvas if(drawingCanvas.getContext) { // Initialize a 2-dimensional drawing context var context = drawingCanvas.getContext(’2d’); //Canvas commands go here };

In the mobile app we developed, we needed to manipulate existing images (which were returned as a result of the web service calls). External images can be loaded using the drawImage method.

context.drawImage(imgObj, XPos, YPos, Width, Height);

After the image has been loaded, you can make manipulations like pixel manipulation and drawing text to the canvas, all of which make rendering of financial data more intuitive.

Making Financial Apps secure

Security is one of the top concerns that crops up when people think of HTML5 mobile apps. Below are the major security threats that HTML5-based financial apps face and best practices to counter these threats.

General Considerations:

Financial apps that are HTML5 standards compliant benefit from full browser security and sandbox.Therefore, they have limited and controlled access to local resources including other apps that are running on the same device. These limitations are valuable because it gives users the comfort that developers don’t have access to any of the proprietary information that resides on their device.

Malicious Code:

JSON (JavaScript Object Notation) is the preferred data transport in HTML5-based mobile apps because it is fast and very easy to use. Unfortunately, JSON also exposes you to running malicious code if the code somehow makes it into the data you are handling. It is critical to scrub all data that passes through an application and remove any code.

Cross Site Scripting (XSS):

Cross-Site Scripting is a danger for all mobile apps. XSS allows attackers to inject malicious code into client-side scripts. To eliminate this threat, you should limit the locations from which the financial app downloads content, and treat all incoming data as potentially malicious code.

Local Storage:

Threats related to use of the HTML5 local storage and database can be mitigated by encrypting the local database. In financial apps, all the data stored in the Local Storage and Database should be encrypted using an encryption library. Also, threats related to exploitation of the manifest file should be eliminated by using HTTPS.

I hope that the HTML5 blog series was able to convince you that HTML5 is a viable platform for quickly and efficiently developing financial apps. Please feel free to comment, I would love to hear you views on the same.

Developing Cross-Platform HTML5-based Financial Apps

the Editor — Thu, 08 Mar 2012 11:00:08 +0000

Six Advantages of Developing Cross-Platform HTML5-based Financial Apps: Part 1

With the advent of smartphones and tablets, there has been a marked change in how people connect to the Internet. Consumers can now connect to the Internet, anytime, anywhere. As a consequence, many new mobile apps are being developed, while a number of traditional desktop/laptop-based apps are gradually getting ported to mobile. Financial service organizations have been measured in their transition to mobile apps. (To learn more about the evolution of mobile financial apps read our recent post “The 3 Phase Evolution of Buy-side Mobile Apps). There are multiple advantages, which HTML5-based financial apps offer. In this blog post, I explore the top 6 advantages that HTML5 offers.

Advantage #1: One version of the financial app caters to clients across multiple platforms (iOS, Android, Blackberry, Windows etc).

HTML5 is a web-based, cross-platform specification. A de facto requirement for any modern mobile operating system is the inclusion of a HTML5-compliant web browser. All the leading mobile platforms use HTML5 as their base. This offers two distinct advantages:

If financial apps are developed on HTML5, there’s no need to develop individual versions for the various platforms. This saves resources, both in terms of time and money.
As HTML5 apps are web-based, they can be accessed via a mobile device, laptop or desktop. This ensures that clients are offered the same interface across all devices.

Advantage #2: HTML5-based financial apps provide 24-7 reliability.
Financial apps need 24-7 reliability.

There should never be a point in time, when a user can’t access the app.

The advantage HTML5-based financial apps provide in this regard is two-fold.

There is one centralized database, and if a problem arises, it can be tracked and resolved.
Also from a reliability point of view, HTML5-based financial apps lets you take care of the support yourself and not rely on the platform provider.

Advantage #3: HTML5-based financial apps provide a strong visual interface.

The new HTML5 specifications have a very strong charting interface. The best way to describe data in financial apps is by means of charts. HTML5 facilitates this need. The primary reason Internet usage has grown exponentially on smart phones and tablets, is the user experience these devices offer.

Charts and graphs are far more intuitive when viewed on mobile devices. HTML5-based financial apps offers features such as the ability to zoom in and out of charts or select particular data points by touching the screen, which is unique to mobile devices.

Advantage #4: HTML5 specifications let you employ an agile development process.

One of the primary problems with native apps is the approval process that platform providers have in place. The process can be tedious and time-consuming. The same issue arises when new features need to be added to financial apps. This kills any differentiation advantage you might get from being first-to-market.

HTML5 apps let you subvert both issues, as HTML5 apps are web-based and therefore require no approval.

Advantage #5: HTML5 specifications provide the functionality a financial app requires.

Native apps offer much more control over the device, but the difference is access to additional device features such as camera and additional memory. These features are nice to have, but enterprise apps, especially financial ones, generally don’t require access to these features.
Primary financial app use cases are requirements like updating price quotes, charting and pulling research and news. These can be handled efficiently in HTML5-based financial apps.

Advantage #6: HTML5-based financial apps are secure.

HTML5 is just a specification for rendering pages on the web. Thus it offers the same level of security, as any internet based application would. Apps that are standards compliant HTML5 applications benefit from the full browser security.

The major causes of concern in HTML5-based financial apps arise from using features such as cross-document messaging and clickjacking. Such features don’t add to the usability or power of financial apps and thus security is not a concern in using HTML5 for financial apps.

Now that I have outlined why HTML5 is an excellent platform for developing financial apps, in my next post I will provide step-by-step instructions on how we developed a HTML5-based financial app (P&L Tool) with our friends at OpenFin. This app will demonstrate the ease and speed with which a powerful HTML5-based financial app can be developed.

HTML5 Books – Help When You Need It

the Editor — Thu, 08 Dec 2011 15:15:39 +0000

HTML5 is an exciting and powerful standard for the development of advanced web pages. It offers the ability for web designers to integrate many convenient and flexible features into their web pages and greatly enhances the enjoyment and effectiveness of these sites. However it can be complicated and somewhat difficult to implement. There are some terrific resources to help so we’ll discuss the availability and benefit of some HTML5 books.

There are many places to find useful and effective HTML5 books. They have been developed by some very talented web designers and offer a great deal of information and support in terms of being able to adopt and use the HTML5 standard.

Take a look at a range of HTML5 books in our bookstore…

You can find these books in a variety of online and offline outlets. For example there are many find HTML5 books available at major bookstores such as Barnes and Noble and Books-A-Million. The advantage in visiting a bookstore is that you can peruse the book to see if it will benefit you as expected before you actually purchase the book.

You can also compare several books to determine which one is best suited for your applications and interests. However there are also very extensive resources when it comes to online bookstores such as Amazon. And even the major retail bookstores like Barnes and Noble also have an online retail store.

In any case you can get a great deal of information on different HTML5 books from a site like Amazon. What is very helpful is the availability of reviews on different books. It is therefore very possible to find out what others think about a particular book.

Amazon has established a ratings system so you can quickly see how positive the ratings are for a particular book in specific areas. You can also read detailed comments from other readers concerning their experience and satisfaction with the book.

You can also find a great deal of helpful information concerning HTML5 books by visiting relevant forums. These forums address topics closely related to HTML5 development. Many of them have sections pertaining to learning resources and this certainly includes books.

Within these forums, you can find helpful reviews and comments by people who have developed outstanding knowledge and expertise in this area. They are therefore very qualified to comment on the effectiveness of the information presented in these books.

The comments tend to be very limited in terms of self serving purposes. So you should be able to find many unbiased comments and reports. In this way you should be able to find some outstanding HTML5 books which can help you to develop well written and effective sites using the HTML5 standard.

Take a look at a range of HTML5 books in our bookstore…

HTML5 Boilerplate

the Editor — Tue, 08 Nov 2011 22:32:42 +0000

Whether you like the standard or not, HTML5 seems to be gaining a great deal of popularity and support. The upcoming Window 8 program will provide extensive support for HTML5. But it can be challenging and sometimes difficult to produce sites which are compatible with HTML5. To help with this situation, there are tools to assist developers. One of the best is called HTML5 boilerplate. Let’s talk more about this and how it can help.

HTML5 boilerplate contains a number of helpful templates which incorporates HTML, CSS, and JS to enable designers to produce fast and robust websites. It helps you to interface with HTML5 video and different fonts.

This tool can really help designers and developers to get their websites fully operational and compatible with this new standard.

Some of the features available with HTML5 boilerplate include cross browser compatibility (including IE6, IE7, and IE8). It also offers Modernizr support as well as Google analytics support. The tool can also help to optimize mobile browsers. And CDN hosted jQuery with a local fallback script is available as well.

This tool is available in three options. They include Boilerplate Documented, Boilerplate Stripped, and Boilerplate Custom.

The Boilerplate documented option includes a .zip file which contains the skeleton code which is needed to get started building an HTML5 site with documentation included, built in jQuery CDN support, CSS, caching and other features. The Boilerplate stripped version has the same components but removes comments. And the Boilerplate Custom enables you to build a custom site skeleton with full control of what gets added or removed.

If you seek further details and support related to HTML5 boilerplate, there is a great deal available throughout the Web. Simply type in an appropriate search terms related to this topic and you’ll be presented with many sites which allow you to download the tools as well as extensive documentation and assistance in using these tools effectively.

If you visit some relevant forums, you will also find a great deal of information and support there as well. There are many ways to improve your knowledge of and effectiveness in HTML5 utilization.

So whether you are a Web developer or just someone who is looking to get involved in HTML5 implementation, the code generated by the HTML5 boilerplate can really help to bring your projects along quickly and effectively. You can find many tips and tricks to help with this implementation and help ensure that your pages are completely HTML5 compliant.

These tools can go a long way towards enhancing the implementation and adoption of this flexible and powerful web standard. View this HTML5 tool here…

HTML5 Audio Standards

the Editor — Fri, 29 Apr 2011 18:08:03 +0000

HTML5 is exciting and anyone who builds web pages is looking forward to implementing these new tags into their sites. HTML5 audio tags are definitely one of the ones on the list meant to make life much easier for both webmasters and end users.

Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

Here is an example of how to use the HTML5 audio tags in your web code.

This is alternate text that is seen if the users browser does not recognize the html5 tag

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

HTML5 Video – Should I Use It?

the Editor — Thu, 21 Apr 2011 17:58:14 +0000

One of the most exciting buzz these days in web circles is about HTML5 and specifically video on HTML5. HTML5 video tag has solved the age old problem site owners and designers face on how to best embed video on websites.

Prior to the new HTML5 video tag you basically had two options for embedding video on your site to get a video player or to use a 3rd party service like YouTube to host your video and them use their embed code to put the video on your site.

Most people are currently using the 2nd option of using services like YouTube to host their videos and them embedding them on their own site. This option is not really a better design standard than getting a video player and hosting your own videos but it is quicker and free which is why most people end up using this configuration for videos.

For people who do decide to have their own video player they quickly find out that a quality one can be costly and customization may require both a graphic designer and a web designer all just to place a video on their site.

That is where the magic of HTML5 video comes in. It has a simple straight forward tag that is similar to an image tag with a source and attributes. It looks like this.

I am ALT text

If you have ever added video to a website you know how much simpler that is. However, the problem is that the browsers of the world are not quite ready for what HTML5 has to offer.

Currently only one browser has a robust support for HTML5 video tags and that is chrome, firefox also has limited support and IE hasn’t even touched video in HTML5 in its current browsers yet. So what does that mean for you? It means a good percentage of people using computers to access the internet will not be able to render the video on your page.

Which is why for now when it comes to building websites video in HTML5 is like that golden egg sitting just out of your reach that you really want but you just cannot have. The push for HTML5 compliance is getting louder and louder everyday though so before you know it HTML5 will have enough standards in browsers to make 2.0 web design much easier.

Which Browsers Support HTML5?

the Editor — Thu, 14 Apr 2011 11:26:20 +0000

All the buzz these days when seems to be about HTML5. Web designers and techies everywhere have very strong feelings about HTML5 and either love it or hate it depending on who you talk to.

First let’s take a look at what HTML5 actually is and what it is used for. HTML is a markup language used to design and layout web pages. HTML5 is a new version of that language that has more tags and hence more design options.

Most people can agree more design options is a good thing. The controversy comes in mostly because certain companies like Apple are acting as if HTML5 is a standard when the reality is no browser fully supports it yet.

Essentially that means that for people using certain elements of it they will look nothing like they intended to most of the people who view the pages. So while HTML5 and its applications are definitely going to offer us some much cooler websites it is just not practical yet to use for your web designs.

We tested out a few of the most popular browsers to see how ready they are for HTML5 and this is what we found out. For this test we used http://www.html5test.com which offers an HTML5 testing page and a rating system that goes up to 400 points depending on how many HTML5 features are already implemented into the browser.

Chrome 10.0 was the big winner coming in at 301 points out of 400 possible. They have already implemented most of the functionality to be a compatible HTML5 browser. In addition, many of the features that are not added are partially added. So Google Chrome is definitely way out in front in the race for HTML compatible browsers.

Firefox 4.0 is next in line and they scored pretty decently getting 249 out 400 possible points. They are still missing a lot of key elements but got bonus points for the audio and video implementation as well as their parsing rules.

Internet Explorer 8 is pretty far behind the curve. IE scored a total of 32 points out of 400. Pretty dismal showing for what used to be the top internet browser in the world. Internet Explorer has been playing catch up with rendering design since the implementation of CSS and their poor showing here tells us it does not seem like much will change in the future.

So those are the statistics. At the moment the only HTML5 browser that is going to get you very far is Google Chrome and until browsers catch up with the newer language it is probably a good idea to use it sparingly in your designs until it actually is a true and tested standard.

View this in the Serbo-Croatian language. Courtesy of Anja Skrba of webhostinggeeks.com

Lutz Roeder’s HTML5 Samples Using The Canvas Element

the Editor — Fri, 25 Feb 2011 11:05:21 +0000

The site Lutz Roeder’s HTML5 Samples contains three code samples, all written in JavaScript using the HTML5 canvas element. The source is available via GitHub.

The most complex of the samples is Textor, a text editor with syntax highlighting. Instead of editing the text using the HTML DOM, Textor renders text directly into a HTML5 canvas element while handling key and mouse events using JavaScript code.

On top of that it provides syntax highlighting for HTML, JavaScript and CSS and also supports mixed language HTML/JavaScript text. Textor works in IE9, Chrome, Safari and Firefox on both Windows and Mac.

The code includes an undo stack implementation, an incremental tokenizer for syntax highlighting, text input for different browsers and incremental screen invalidation. Textor is lightweight with only 47kB of compressed JavaScript in the main texteditor.js module.

Digger, another sample, is a Boulderdash-style game, again entirely written in JavaScript and using the HTML5 canvas and audio elements. The game fits entirely into one 50kB module with less than 1200 lines of code, including the graphics and sounds encoded as base64 streams. The game is 100% ported from a Silverlight version with exactly the same graphics and functionality.

The last sample is Netron, a library for editing graph elements and connections using HTML5 canvas. It allows the definition of specific graph elements and custom code can be added to change the appearance of these elements.

Each node has a custom set of connection points that can be connected by dragging the mouse. Double-click will activate an element so it’s content can be edited using an overlay input element. Netron includes and undo stack implementation that records all edits and allows reverting them.

See these in action and learn more about Lutz Roeder’s HTML5 work here…

HTML5 web app: ARIS ModelViewer

the Editor — Mon, 14 Feb 2011 10:33:38 +0000

I’m very glad the folks of HTML 5 Tutorials give me the chance to show you the HTML5-based model viewer app my company developed. I work for Software AG (in business since 1969!), which you might know from the SOA infrastructure market with our webMethods and CentraSite products. We also market a complete suite for business process analysis under the ARIS brand. Customers use ARIS to document and analyze their internal processes and organization.

Before I bore you with a long explanation about enterprise modeling, let’s take a look at an example and see our HTML5-based model viewer at work:

……………..

An organizational chart is normally used to document the formal structure of your company. In the example above, I created a family tree of the British Royals. After visualizing them, I analyzed the model and marked those spots where we can still become part of it I created the model using our free modeling tool ARIS Express and uploaded it to the belonging community page. Of course, you can do more serious stuff with the tool like documenting the Scrum process.

At the heart of model viewer, we use HTML5′s canvas to do all the drawing directly in the browser. Besides panning and zooming, you can also enlarge the model to your browser window or embed it in your blog. Our lead developer posted a complete feature overview of model viewer.

While developing the viewer, we faced many challenges like those models should look the same as in the ARIS Express tool. Also, we have to support Microsoft Internet Explorer as it is still the default browser in many corporations. To solve this, we added a browser switch so that Flash gets used in case of Internet Explorer. This Flash version renders much slower, which seems to be a clear indication that with the advent of HTML5, Flash is a technology of the past. If you wish to do some benchmarking between the HTML5 canvas and Flash, take a look at this remake of the complete first level of Super Mario. We also experimented with SVG, but it seems it has the same future as Flash does.

I think our model viewer proves that HTML5 is not just ready to create visually appealing websites, but also the web apps of tomorrow.