Mobile development with HTML5 HTML5: the standard, the buzzword and the legend If you read blogs that are even slightly related to tech, you likely hear about HTML5 on a near-weekly basis. Although the new web standard does not do your laundry, it has features that enable the creation of powerful applications—using only HTML, CSS and JavaScript (a Rails back-end can bring additional firepower to the table). Browser Compatibility Perhaps the biggest pain in developing a web-based application is ensuring that your application is compatible with the various browsers in use today. Viewport When you visit a website not designed for mobile browsers, it first appears very zoomed out. This sizes the viewport to the device's width, so the content does not initially appear zoomed out. Some sites currently hard-code the width of the viewport to 320. Having your site correctly sized for mobile is nice but the next two features of HTML5, caching with the cache manifest and local storage, allow for fully functional offline sites.
HTML5 in a nutshell — Rendered Text This post is for our clients and anyone who needs a high-level overview of HTML5, focusing on use cases and examples. As always, we welcome your comments in the discussion section below. is the newest edition of the HTML standard, the markup language that is used to write web pages. While HTML5 does bring some new HTML tags to the table, that’s not the whole story as it also includes browser APIs that allow us to create animated graphics or offline apps. , which has its own novelties, all the while both are in fact a work in progress and not fully supported in all browsers. So when usually when you hear about HTML5, it an umbrella term for a collection of features that allow us to create better web apps. The structure Most web pages share a common structure of headers, navigation, main section, sidebar and footer. Search engines support another set of extensions called microdata. Smarter forms Forms are everywhere on the web. The looks Apple has been the forerunner in this area.
Video Tutorial HTML-CSS: Foundation 4 Foundation vient de mettre en ligne la version 6 de son Framework front-end. Fort de l'expérience utilisateur acquise avec les versions précédentes du Framework, l'équipe de ZURB a encore retravaillé le Framework pour le rendre plus facile à utiliser. Un prototypage plus rapide Le premier objectif de cette nouvelle version est de rendre la phase de prototypage plus rapide. Le but est de créer un projet utilisant le Framework rapidement sans avoir à perdre du temps dans sa mise en place. La première nouveauté est la mise en place d'un invité de commande qui va vous permettre de créer rapidement un projet basé sur le Framework Foundation. npm install --global foundation-cli foundation new Au niveau du design, le style de Foundation n'a pas beaucoup changé. Un framework pour la production Le problème lorsque l'on utilise un Framework front-end c'est que l'on se retrouve souvent avec des classes qui sont relativement peu sémantiques.
Taking a Dive into HTML5 - Web Storage HTML5 is getting a lot of attention these days - especially when it comes to video. This tutorial is going to cover a feature added to HTML5 that I don't think is getting enough attention - web storage. Prior to web storage, most websites used cookies to store information on the client's computer. Reading and Writing Values Both mechanisms use the same object as defined in the web storage spec, Storage. interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deleter void removeItem(in DOMString key); void clear();}; Hats off the creators of this, as I don't think there could have been a simpler interface for storing values. Let's take a look at how do use this, first using localStorage. In this example, if the value hasn't been stored yet, you'll receive this alert: The next time the page is loaded, you'll now receive this alert: <!
HTML 5 Canvas Tutorial - Displaying Images The Canvas element was introduced a few years ago as part of the HTML 5 standard. This element has opened the doors to incredibly dynamic web applications that in the past were only possible using 3rd party plugins like Flash or Java. This tutorial covers a small but important piece of the canvas element - displaying and manipulating images. Image Source The most common way to draw images to a canvas element is to use a Javascript Image object. The image can either be grabbed from an existing element already in the DOM or a new one can be constructed on demand. // Grab an image that's already on the page.var myImage = document.getElementById('myimageid'); // or create a new image. myImage = new Image(); myImage.src = 'image.png'; In the current version of most canvas-supported browsers, drawing an image that hasn't been fully loaded simply doesn't do anything. // Create an image. myImage = new Image(); myImage.onload = function() { // Draw image.} myImage.src = 'image.png'; Basic Drawing
HTML 5 Canvas Tutorial - Rotation We have been working with and playing around with the HTML5 canvas element. So, today's tutorial is going to build on top of the previous Image drawing tutorial and show you how to rotate drawn images, or really whatever you want. Rotating About Object's Center The first type of rotation we are going to take a look at is rotating an object about its center. This is one of the simplest types of rotation to achieve using the canvas element. We are going to be using the sweet Gorilla pic from last week. The basic idea is that we are going to translate the canvas to the point we want to rotate around, rotate the canvas, and then translate the canvas back to 0,0. The commented code should be pretty self explanatory but there are two out of the ordinary calls I would like to mention. .save() and the .restore() are very useful because this is how we keep the canvas rotation from affecting all the other things we draw on the canvas. Rotating About A Point So, what do we have going on up there?
HTML 5 Canvas Tutorial - Converting Images to Grayscale HTML 5 and the Canvas tag has brought a whole world of possibilities when it comes to image manipulation. This tutorial will demonstrate one of those possibilities that is particularly powerful - getting raw image data and transforming it. We've done a conversion to grayscale tutorial before using C# and this tutorial will look fairly similar to an approach outlined in that article. There actually isn't too much code, so I'm going to just throw the entire contents here and explain what's going on after. The first thing we need is an image to convert. Since we can't get information directly from an image, we have to draw it to a canvas first. The conversion process is actually pretty simple. After we've converted every pixel, we just call putImageData to draw the converted image back to the canvas.
Saving Canvas Data as an Image Over the past few months, we have talked quite a bit about HTML5, more specifically canvases. There are plenty of other interesting HTML5 subjects canvases offer, which makes it by far the most fascinating and flexible object. We have covered topics ranging from simple rotations to photo filters. Today we are going to go over how to take your canvas and save it as an image. Introduction Getting the pixel data from a canvas is fairly simple, as we learned in the grayscale filter tutorial. Before we get started with some code, it should be noted that you can only get image data, in any form, from sources on the same domain on the canvas. As a result, due to the constraints of having javascript on the page on Tech.Pro Tutorials (only fiddles allowed), we do not have a demo, however all of the code needed to get started is below: HTML Example Digging In Now, the code to get your image data is actually really straight forward. Once you have this string, you can use it many different ways.
HTML 5 Canvas Tutorial - Drop Shadows While working on the Pulse graphics engine I'm learning all kinds of new techniques and tid bits about Canvas. One of the latest things I've been playing around with and working on is creating shadows. This is actually pretty easy with the JavaScript drawing api available for canvas. It actually just takes a few properties set on the canvas context. Before jumping into the code there are a couple of items to note. That'll spit out something like the following. Looking at the code it starts out by grabbing the canvas and then the context from the canvas. shadowOffsetX - the horizontal offset for the drop shadowshadowOffsetY - the vertical offset for the drop shadowshadowBlur - the size of the blur of the drop shadowshadowColor - the color of the drop shadow At a minimum the shadowBlur and shadowColor properties have to be set in order for the shadow to be used. That wraps it up for this tutorial.
Progressively enhancing HTML5 forms, creating a 'required' attribute fallback with jQuery HTML5 required attributes are a fantastic addition to the HTML5 spec, they save a lot of time when working on client-side form validation and enhance the user's experience. The HTML5 required attribute provides us with full client-side 'required' checking and validation, which is easy to add to several types of form elements. DemoDownload The required attribute is developer friendly. In browsers that support the attribute, you don't need to do anything when it comes to alerting users they haven't filled/checked in an input field (or textarea, radio buttons and so on...) If someone were to not fill in/check a required input, the form would not submit the information and the user would be notified by a small popup above the relevant field that they needed to fill it in. But what about legacy browsers? Stop the form submitting if fields are left emptyAdd a custom notification message on any empty/unchecked fields HTML5 feature detecting Adding the required attributes Required attribute loop
Abide The UI Widget Strategy DISCLAIMER: The term widget is being broadly used in this article to refer to any user interface element that either supports (e.g. fieldset or splitter) or directly aids (e.g. textarea or tree) the display of information. It is extremely uncommon for a visual designer or interaction designer building an application user interface to open a design program and begin to re-create the wheel in terms of UI patterns. No, in fact, the majority of the work that is done when designing a new application interface is based on common patterns that users already intimately understand. Now, it is often the case that these same designers who know perfectly well the value of reuse, will design a UI they assume visually and functionally should be engineered as if it were being built new for the very first time. As developers, we also have a strong sense of the value of reuse just like visual and interaction designers. Chrome 28: Frameworks: Standalone: Let's examine each of these in more detail. e.g. Abide