Posts Tagged ‘html5’

Techie Tip of the Week: Making HTML5 Tags Work in Internet Explorer

Friday, August 24th, 2012

20120825-081442.jpg 20120825-080835.jpg


Internet Explorer 8 (and earlier) doesn’t understand the new HTML5 elements.

To use the HTML5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a JavaScript that creates the new elements used in HTML5:

<script>
document.createElement("article");
document.createElement("section");
document.createElement("nav");
document.createElement("header");
document.createElement("footer");
</script>

If we put these JavaScript commands at the top of our web page, we can now use the ARTICLE, SECTION, NAV, HEADER, and FOOTER elements and know that IE will render them appropriately.

Techie Tip of the Week: HTML5 video

Friday, March 9th, 2012

Prior to the HTML5 specification, there didn’t exist any standard way of displaying video content on web sites. Some video tools used the EMBED tag; others used OBJECT — and all required the visitor to download and install a plugin (like QuickTime or RealPlayer).

With the advent of HTML5, there is a new standard way: the VIDEO tag. Support for the VIDEO element is still evolving, so it doesn’t work yet on all browsers.

VIDEO ELEMENT SUPPORT

  • IE: 9.0+
  • FIREFOX: 3.5+
  • SAFARI: 3.0+
  • CHROME: 3.0+
  • OPERA: 10.5+
  • IPHONE: 1.0+
  • ANDROID: 2.0+

To further complicate matters, no one codec is supported across browsers. Some support mp4, others webm, others ogg. Here’s the current lay of the land:

VIDEO CODEC SUPPORT

  • IE: WebM and MP4
  • FIREFOX: OGG and WebM
  • SAFARI: MP4 (and other formats if their QuickTime plugins are also installed)
  • CHROME: OGG and WebM
  • OPERA: OGG and WebM
  • IPHONE: MP4
  • ANDROID: MP4 and WebM

For maximum compatibility, the video workflow wil be:

  1. Make one version that uses WebM (VP8 + Vorbis).
  2. Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
  3. Make another version that uses Theora video and Vorbis audio in an Ogg container
  4. Link to all three video files from a single VIDEO element, and fall back to a Flash-based video player

The final markup uses a VIDEO element for HTML5 video, a nested OBJECT element for Flash fallback, and a small bit of script for the benefit of Android devices:

20120310-131246.jpg

For more information, visit http://diveintohtml5.info/video.html, from which parts of this posting were taken from (CC license agreement).

Techie Tip of the Week: HTML5 Forms

Friday, January 27th, 2012

In earlier “dialects” of HTML (HTML 4.01, XHTML, etc.), you were stuck with only the following ways of accepting input from visitors:

- select (drop down-menus)
- textarea (large text boxes)
- button (to create a button)
- input type=button – to create a button
- input type=checkbox – for selecting multiple choice
- input type=file – to upload a file
- input type=hidden – to send hidden data like information stored in a cookie
- input type=image – to submit the form with a picture
- input type=password – a text field that displays dots or stars instead of the text
- input type=radio – for selecting one from a series
- input type=reset – to restore the form back to the original way it displayed
- input type=submit – to submit the form
- input type=text – for entering in text

Now, with the advent of HTML5, there are many, many new features and choices!

placeholder – <input placeholder=”text text text” type=”text”> will display text in the text box that will disappear when the visitor clicks, tabs, or taps into the field. As an example, Safari by default displays “Google” (or whatever your default search engine is) as placeholder text in the search box until you click into the search box.

autofocus – <input autofocus> will cause the form field to focus when the page loads. Without the need for JavaScript!

input type=email – a special kind of type=”text” specifically for email addresses. On the iOS devices, the keyboard dynamically changes to include the @ symbol and the . key. In addition, if the visitor doesn’t enter in a valid email address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=url - a special kind of type=”text” specifically for web addresses. On the iOS devices, the keyboard dynamically changes to include the .com button, the . key and the / key (but no space bar, since spaces are illegal in web addresses). In addition, if the visitor doesn’t enter in a valid URL address, the browser automatically validates, even if the form builder didn’t use JavaScript!

input type=number – a special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a spin box with up and down arrows to help the visitor pick the desired number.

input type=range - another special kind of type=”text” specifically for numbers. On browsers that support this, the text box becomes a slider to help the visitor pick the desired number.

input type=date/month/week/time/datetime - a special kind of type=”text” specifically for picking a date (currently only supported in the Opera web browser).

input type=search – a special kind of type=”text” specifically for search boxes. In Safari and Chrome, this will cause the normally rectangular shaped box have rounded corners! And, as a visitor starts to type, a little X appears in the right side of the box enabling the visitor to clear the search without deleting.

input type=color – a special kind of type=”text” specifically for picking a color. Currently, this feature only works in the Opera browser.

input required – adding the attribute “required” to an input tag causes the browser to validate the form and display notification to the visitor that the field cannot be empty.

form novalidate – if you don’t want the browser to validate, add the attribute novalidate to the form tag.

Enjoy!