Archive for the ‘html’ Category

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: Use “title” to add tooltips to web pages and web content!

Friday, May 25th, 2012

Ever wish you could add a tooltip to add more information on an object on your web page? This week’s tip will show you how!

Tooltips are those little boxes of information that pop up when your mouse hovers over a link, picture,niece of text, or other object.

To create a tooltip on a web page:

  1. In your web page editor, make sure you can see and edit the HTML code. (If you are using Drupal, WordPress, or other content management system, you’ll need to click the HTML or Source button.)
  2. Locate the object in which you wish the tooltip to occur.
  3. Add the following code:title="Tooltip Text"

So, for example, to add a tooltip saying “photo of our group” to a picture of our staff, the code would look like this:
<img src="ourstaff.jpg" title="photo of our group">
And here’s how it would look:

Or if I wanted to add a tooltip to a link sending the visitor to Stanford’s home page:
<a href="http://www.stanford.edu">Return to Stanford</a>

Or to add a title to a paragraph:

<p title="all about widgets">this paragraph is about the study of widgets</p>

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: CSS Rules You Can Use in HTML Email Newletters

Friday, August 19th, 2011

When designing an HTML Email Newsletter, you need to be careful about using the newer web-creation techniques like HTML5 and Cascading Style Sheets (CSS).

Several popular email clients (in particular, Outlook and Google Mail) cannot understand or process the majority of CSS rules, so if you use them, the email will end up looking bland and ordinary.

Fortunately, Campaign Monitor (a commercial email newsletter service) has put together a Guide to CSS support in email — a web page version, a PDF version, and an Excel spreadsheet version to help you figure out which CSS rules you can use, and when you can use them!


For more information on creating HTML email newsletters, come to our Techie Festival Lecture Creating HTML Email Newsletters!

These days, email isn’t just plain text anymore. In this class, you’ll learn how to create state-of-the-art-looking emails with colors, fonts, and graphics, laid out into columns and sections. We’ll cover the tools and steps you need to take to create beautiful, professional emails, as well as some of the problems you might encounter (and how to fix them!).

Bring your laptop to play along with the presenter! (Demo files will be provided to participants.)