2007 » September » Website Design & SEO Blog

What’s New in HTML 5: Embedded Media (Video)

published by Dan in Website Design with No comments

Web designers know the importance of embedded media nowadays. Video and audio sharing is now very feasible due to high internet speed connections and not only that but is actually a huge phenomenon. One only needs to visit YouTube to get a feel of how big video sharing has becoming.

The problem with embedding media though is that due to the different video formats used there is a need for different markup language just to be able to make sure the embedded media works in different browsers. The new element in HTML5 will address this problem making it so much easier to embed both video and audio.

For example to embed my favorite YouTube video I need to paste this long code (compliments of YouTube) to get what I want.

<object width=”425″ height=”353″><param name=”movie” value=”http://www.youtube.com/v/f4B-r8KJhlE”></param><param name=”wmode” value=”transparent”></param><embed src=”http://www.youtube.com/v/f4B-r8KJhlE” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”353″></embed></object>

Of course, while most of the complexities above deal with the sizing even if we remove that portion to simplify the code we still get this:

<object><embed src=”http://www.youtube.com/v/f4B-r8KJhlE” type=”application/x-shockwave-flash”></embed></object>

Now with the Video tags you wouldn’t even need to specify the type of application and you can be sure it will render correctly in whatever browser used.

<video src=”http://www.youtube.com/v/f4B-r8KJhlE”/>

Obviously, it is a lot more elegant. What this means for web design services is a lot less hassle with coding and debugging.

What’s New in HTML 5: Inline Semantics continued (Progress)

published by Dan in Web Development | Web Technology | Website Design with No comments

Progress - The progress element, as the name indicates, is used to indicate the progress or state of a specific process. Everyone is familiar with progress bars and this acts just like it. Of course if the progress value isn’t updated dynamically then it simply serves to represent the progress of a specific process during a specific time frame, which I think defeats the entire purpose of the element. To be able to update the values in the progress bar you will need JavaScript.

The progress element has two attributes: min and max. The max attribute can be left out for processes wherein there is really no max value or the max value isn’t known. When using the the progress element you can opt to show the actual value or a percentage of the value. For example when downloading a file you can write it as

<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″> 204.57MB </progress></p>

or as

<p>Downloaded: <progress value=”204.57″ min=”0″ max=”700″>28.8%</progress></p>

For processes that do not have maximum values you can simply eliminate the max attribute:

<p>You are visitor number: <progress value=”20457″> 20457 </progress></p>

Of course the example given wasn’t really a process but is simply a hit counter. But you get the point.

Next up: Embedded Media Elements

Source: New Elements in HTML 5 by Prof. E. Harold

What’s New in HTML 5: Inline Semantics continued

published by Dan in Web Development | Web Technology | Website Standards with 1 comment

Meter - The meter element is used to “represent a numeric value (amount) in a specified range” and can be given up to six attributes, including value, minimum, low, high, maximum, and optimum, which are used to describe the amount in a way that will be recognized by browsers. The amount enclosed by the meter tag <meter></meter> can be anything from money to statistical values. Let me use my son’s height as an example.

Without the meter element I can simply write:

<p>My 25-month old son is 85cm long.</p>

Using meter tags I can let the browser know that his length is a numerical value by simply putting the value between tags.

<p>My 25-month old son is <meter>85cm</meter> long.</p>

Now if I use the attributes I can give the machine more information without changing the sentence one bit.

<p>My 25-month old son is <meter value=”85″ low=”80″ high=”94″ optimum=”88″>85cm</meter> long.</p>

In this example the use of minimum and maximum is not applicable since there is no minimum or maximum length. However, the height chart states that the range for 25-month-old boys is between 80 to 94 cm, which is why I set that as the low and high length. The average, which can be seen as optimum is 88cm. This means that my son is below the optimum or average height. The additional information may not be seen by readers when looking at the sentence but it can be shown as a tool tip or in any other manner you may desire.

Source: New Elements in HTML 5 by Prof. E. Harold

What’s New in HTML 5: Semantics continued

published by Dan in Web Development | Web Technology | Website Standards with No comments

Block-Level Semantics:

• Dialog - The dialog, as the word implies, is used to represent reciprocal conversation between two or more persons. In HTML 5 three tags are used to represent the start and end of the entire dialog <dialog></dialog>, the speaker <dt></dt>, and the spoken part <dd></dd>.

Inline Semantics:

• Mark - The mark element is represented by the m tag <m></m>. Marking an element lets it stand out, making it easy to find in a document. However, unlike boldfacing and italicizing a word it, marking a word(s) does not emphasize the word. Instead when you mark a word you simply sort of “highlight” it to give you a reference point pretty much the same way search terms appear when you view cahced pages on Google.
• Time - The time element is simply used to denote a line of text as time and date. When using the time tag it is important to use the datetime attribute so that the line of text can be read and understood by browsers for what it is. This attribute will be useful in the future for applications like calendars and other stuff that will depend on dates and times. The correct syntax when using the timedateline attribute is as follows:

<p>My son was born
<time datetime=”2005-64-30T16:27:00-04:00″>4:27 P.M. on June 30th</time>.
</p>

With out the dateline attribute it can be coded as

<p>My son was born
<time>4:27 P.M. on June 30th</time>.
</p>

which is valid but will not be machine readable.

Source: New Elements in HTML 5 by Prof. E. Harold

What’s New in HTML 5: Semantics

published by Dan in Web Development | Web Technology | Website Standards with No comments

Aside from new structural elements there are also new semantic tags.

Block-Level Sematics:

• Aside - In the English language the word “aside” can be used as a substitute to the word digression. When you digress from a certain topic it means that you insert or include something that is not really included in the main jist of your original or main topic. The Aside element in HTML 5 works just like that. It is used to denote anything “outside the main flow of the narrative” including notes, tips, a sidebar, a pullquote, and parenthetical remarks. In HTML 4, since there is no such element yet sidebars and other features needed to be encoded usign tables. The Aside element obviates the need to do this simplying your code a great deal.
• Figure - The new figure element is HTML 5’s answer to representing block-level images in a more semantic way. In HTML 4 when embedding images and other elements along with their corresponding captions you simply code them directly and do not really have a way to represent the block of code in so as to signify what the embedded element really is. While the method is sufficient by putting the whole code inside the figure tag <figure></figure> it leaves little room for ambiguities making it easier for browsers to interpret and associate the caption with the image. Aside from embedded pictures the audio, videos, objects and iframes can also be captioned using the figure tag.

Source: New Elements in HTML 5 by Prof. E. Harold