LiveCMS http://livecms.com CMS Resources for Designer and Developer Wed, 13 Apr 2011 21:05:31 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 New elements in HTML 5 http://livecms.com/html5/new-elements-in-html-5.html http://livecms.com/html5/new-elements-in-html-5.html#comments Wed, 13 Apr 2011 21:05:31 +0000 admin http://livecms.com/?p=171 Continue reading →]]> Structure

Even well-formed HTML pages are harder to process than they should be because of the lack of structure. You have to figure out where the section breaks go by analyzing header levels. Sidebars, footers, headers, navigation menus, main content sections, and individual stories are marked up by the catch-all div element. HTML 5 adds new elements to specifically identify each of these common constructs:

  • section: A part or chapter in a book, a section in a chapter, or essentially anything that has its own heading in HTML 4
  • header: The page header shown on the page; not the same as the head element
  • footer: The page footer where the fine print goes; the signature in an e-mail message
  • nav: A collection of links to other pages
  • article: An independent entry in a blog, magazine, compendium, and so forth

For example, consider a typical blog front page with a header at the top, a footer at the bottom, several entries, a navigation section, and a sidebar, as shown in Listing 1.
Listing 1. A typical blog page today

<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center">
      <div id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>

        <div>
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>

      <div id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>

        <div>
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>

    <div>
      <div>
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div></div>
    </div>
  </div>

  <div id="right">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>

</body>
</html>

 

Even with proper indenting, it’s a fairly confusing mass of nested divs. In HTML 5, you can replace these with more direct semantic elements, as shown in Listing 2.
Listing 2. A typical blog page in HTML 5

<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>

        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>

      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>

          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>

</body>
</html>

 

No divs are needed any more. Rather than using site-specific class attributes, the meaning of the different sections can be inferred from standard names. This is especially important for audio, cell-phone, and other nonstandard browsers.

Back to top

Block semantic elements

As well as the structural elements, HTML 5 adds some purely semantic block-level elements:

  • aside
  • figure
  • dialog

I use the first two all the time in articles like this one and in my books. The third I don’t use so much myself, but it’s common in much written text.

aside

The aside element represents a note, a tip, a sidebar, a pullquote, a parenthetical remark, or something that’s just outside the main flow of the narrative. For example, in developerWorks articles, you often find sidebars encoded as tables, as shown in Listing 3.
Listing 3. A developerWorks HTML 4 sidebar

<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span>.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td>
<pre>input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax.
</p>
</td></tr></table>

 

In HTML 5, you can write this much more sensibly, as shown in Listing 4.
Listing 4. A developerWorks HTML 5 sidebar

<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>

<pre>input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>

 

The browser can figure out where to put the sidebar, possibly with a little help from CSS.

figure

The figure element represents a block-level image, along with a caption. For example, in many developerWorks articles, you find markup like Listing 5; the results are shown in Figure 1.
Listing 5. A developerWorks HTML 4 figure

<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item:
   Mozilla XForms 0.7 Unsigned"
  src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />

Figure 1. Install Mozilla XForms dialog
A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned

In HTML 5, you can write this more semantically, as shown in Listing 6.
Listing 6. A developerWorks HTML 5 figure

<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item:
    Mozilla XForms 0.7 Unsigned"
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

 

Most important, browsers—especially screen readers—can clearly and unambiguously associate the caption with the picture.

The figure element isn’t limited to pictures. You can also use it to caption audio, video, iframe, object, and embed elements.

dialog

The dialog element represents a conversation between several people. The HTML 5 dt element is overloaded to indicate the speaker, and the HTML 5 dd element is overloaded to indicate the speech. This gives reasonable display even in legacy browsers. Listing 7 shows a bit of famous dialogue from Galileo’s “Dialogue Concerning the Two Chief World Systems.”
Listing 7. A Galilean dialogue in HTML 5

<dialog>
	<dt>Simplicius </dt>
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt>
    <dd>But I should take neither of them,
	seeing that the straight line AF runs obliquely. I should
	draw a line perpendicular to CD, for this would seem to me
	to be the shortest, as well as being unique among the
	infinite number of longer and unequal ones which may be
	drawn from the point A to every other point of the opposite
	line CD. </dd>

	<dt>Salviati </dt>
    <dd><p> Your choice and the reason you
	adduce for it seem to me most excellent. So now we have it
	that the first dimension is determined by a straight line;
	the second (namely, breadth) by another straight line, and
	not only straight, but at right angles to that which
	determines the length. Thus we have defined the two
	dimensions of a surface; that is, length and breadth. </p>

	<p> But suppose you had to determine a height—for
	example, how high this platform is from the pavement down
	below there. Seeing that from any point in the platform we
	may draw infinite lines, curved or straight, and all of
	different lengths, to the infinite points of the pavement
	below, which of all these lines would you make use of? </p>
	</dd>
</dialog>

 

The exact syntax of this element is still being argued over. Some people want to embed additional nondialogue text (such as stage directions) inside the dialog element, and others aren’t happy with the overloading of dt and dd. However, most everyone agrees that some such semantic representation of dialogue is a good thing, even if they haven’t yet agreed on the exact syntax.

Back to top

Inline semantic elements

HTML 4 has five different inline elements to represent subtly different variations of computer code: var, code, kbd, tt, and samp. However, it doesn’t have any way to indicate such basic qualities as time, numbers, or sarcasm. HTML 5 aims to rectify this imbalance between techies and normal writers with several new inline elements.

mark

The m element indicates text that is “marked” somehow but not necessarily emphasized. You can imagine it as being like highlighted passages in a book. The canonical use case is Google’s cached pages. When you follow a link to the cached copy, the search terms are marked. For example, if you searched for “Egret”, then a cached Google page might be marked up like this:

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

 

The name of this element is currently subject to some debate. It might be changed to mark instead of m before the spec is released.

time

The time element indicates a specific moment in history, such as 5:35 P.M., EST, April 23, 2007. For example,

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

 

The time element helps browsers and others recognize times in HTML pages. It doesn’t require any particular format for the element’s content. However, each time element should have a datetime attribute that includes the time in a more machine-recognizable form, like this:

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

 

Machine-readable times are potentially useful for search engines, calendar programs, and the like.

meter

The meter element represents a numeric value in a specified range. For example, you can use it for salaries, percentage of the French electorate that voted for Le Pen, or test scores. Here, I use meter to mark up some data I got from a Google programmer at Software Development 2007:

<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p>

 

The meter element helps browsers and other clients recognize amounts in HTML pages. It doesn’t require any particular format for the element’s content. However, each meter element can have up to six attributes offering information about this amount in a more machine-recognizable form:

  • value
  • min
  • low
  • high
  • max
  • optimum

Each of these should contain a decimal number indicating the relevant range. For example, a final exam grade might be marked up like this:

<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

 

This indicates that the student’s score was 88.7 out of a possible 100. The lowest possible grade was 0, but the lowest actual grade anyone got was 65. The highest grade anyone got was 96, although of course the ideal score was 100. User agents can display this information using some sort of meter control or give the extra data in a tooltip, but most will probably style it like any other inline element.

progress

The progress element represents the state of an ongoing process, like the progress bar in a graphical user interface (GUI) application. For instance, it can show you what percentage of a file is downloaded or how far you are into a movie. This progress control says that a download is 33% complete:

<p>Downloaded:
  <progress value="1534602" max="4603807">33%</progress>
</p>

 

The value attribute shows the current state of the operation. The max attribute shows the total amount toward which the progress is moving. Here the element indicates that 1,534,602 bytes out of a total 4,603,807 bytes have been downloaded.

You can display indefinite progress bars by omitting the max attribute.

You should use the JavaScript language to dynamically update the progress bar as the operation continues. Statically, this element isn’t very interesting.

Back to top

Embedded media

Video on the Web is booming, but it’s almost all proprietary. YouTube uses Flash, Microsoft uses Windows Media®, and Apple uses QuickTime. Markup that works for embedding such content in one browser doesn’t work in the next. Consequently, the WhatWG has proposed a new video element that allows the embedding of arbitrary video formats. For example, I might embed my QuickTime movie of a Sora in Prospect Park like so:

<video src="http://www.cafeaulait.org/birds/sora.mov" />

 

Whether any one format and codec will be preferred is still under debate. Probably Ogg Theora support at least will be strongly recommended, if not required. Support for proprietary formats such as QuickTime and patent-encumbered formats such as MPEG-4 will be optional. Most likely, the actual formats will be decided in the marketplace, much as GIF, JPEG, and PNG became the preferred formats for img elements over contenders like BMP, X-Bitmap, and JPEG 2000.

A complementary audio element is also proposed. For example,you might attach background music to a Web page like this:

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />

 

The autoplay attribute tells the browser to begin playing as soon as the page is loaded, without waiting for an explicit user request. It then loops 20,000 times before shutting off (or until the user closes the window or goes to another page). Of course, browsers can and should offer users the ability to mute and pause embedded media, whether the page author has done so or not.

Browsers must support the WAV format. Browsers can also support other formats such as MP3 if they like.

Because these elements aren’t supported by legacy browsers and can be inaccessible to blind and deaf users, the audio andvideo elements might contain additional markup describing the content of the audio and video. This also helps search engines. Ideally these would be full transcripts of the content of the audio and video. For example, Listing 8 shows how you might mark up John F. Kennedy’s inaugural address.
Listing 8. John F. Kennedy’s inaugural address in HTML 5

<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>

    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning --
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>

    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe --
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>

    <p>
    ...
    </p>

    </audio>

 

Back to top

Interactivity

HTML 5 also goes under the rubric of Web Applications 1.0. Toward that end, several new elements are focused on more interactive experiences for Web pages:

  • details
  • datagrid
  • menu
  • command

These elements all have the potential to change what is displayed based on user action and choice without loading a new page from the server.

details

The details element represents further information that might not be shown by default. An optional legend element can summarize the details. One use for details is for footnotes and endnotes. For example:

The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

 

The exact rendering isn’t specified. One browser might use a footnote, another an endnote, and a third a tooltip.

Each details element can have an open attribute. If it has this attribute, then the details will be initially shown to the reader. If it doesn’t have such an attribute, then they will be hidden until the user asks for them. In either case, the user can click an icon or other indicator to show or hide the details.

datagrid

The datagrid element serves the role of a grid control. It’s intended for trees, lists, and tables that can be updated by both the user and scripts. By contrast, traditional tables are mostly intended for static data.

A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements. For example, Listing 9 shows a datagrid that contains a grade sheet. In this example, the datagrid is populated from a table. A simpler one-dimensional datagrid might be populated by a select element. If other HTML elements are used, then each child element becomes a row in the grid.
Listing 9. A grade sheet datagrid

<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

 

What distinguishes this from a regular table is that the user can select rows, columns, and cells; collapse rows, columns, and cells; edit cells; delete rows, columns, and cells; sort the grid; and otherwise interact with the data directly in the browser on the client. The JavaScript code monitors the updates. The HTMLDataGridElement (Listing 10) interface is added to the Document Object Model (DOM) to support this.
Listing 10. HTMLDataGridElement

interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

 

The DOM can also be used to load data into the grid dynamically. That is, the datagrid doesn’t have to have children that provide the initial data. Instead, it can be set with DataGridDataProvider object, as shown in Listing 11. This enables you to load data from databases, XmlHttpRequest, or anything else JavaScript code can talk to.
Listing 11. DataGridDataProvider

interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow,
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column,
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column,
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

 

menu and command

The menu element has actually been present in HTML since at least version 2. It was deprecated in HTML 4, but it comes roaring back with new significance in HTML 5. In HTML 5, a menu contains command elements, each of which causes an immediate action. For example, Listing 12 is a menu that pops up alerts.
Listing 12. HTML 5 menu

<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

 

Commands can also be turned into check boxes with a checked="checked" attribute. You can turn check boxes into radio buttons by specifying a radiogroup attribute whose value is the name of the group of mutually exclusive buttons.

In addition to simple lists of commands, you can use the menu element to create a toolbar or pop-up context menu by setting thetype attribute to toolbar or popup. For example, Listing 13 shows a toolbar such as you might find in a blog editor like WordPress. It uses the icon attribute to link to button pictures.
Listing 13. HTML 5 toolbar

<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

 

The label attribute gives a title for the menu. For example, Listing 14 might be an Edit menu.
Listing 14. HTML 5 Edit menu

<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

 

Menus can be nested inside other menus to create hierarchical menus.

Back to top

Conclusion

HTML 5 is part of the future of the Web. Its new elements enable clearer, simpler markup that makes pages more obvious. Divand span still have their places, but those places are much more restricted than they used to be. Many pages will no longer need to use them.

Although not all browsers will support these new elements at first, the same has been true for most elements introduced after HTML was first invented: img, table, object, and many more. Support will come with time. In the meantime, HTML’s must-ignore behavior for unrecognized elements means that users with legacy browsers will still be able to read HTML 5 pages. They can do so today. Users with more modern browsers will get an enhanced experience, but no one will be left out.

Eight years is a long time to wait for new features, especially in the fast-moving world of the Web. HTML 5 restores some of the excitement of the early days when Netscape, Microsoft, and others were introducing new elements every other week. At the same time, it takes a much more careful approach to defining these elements so that everyone can use them interoperably. The future looks bright.

 

]]> http://livecms.com/html5/new-elements-in-html-5.html/feed 0 Vimeo now is supporting Embeddable HTML5 http://livecms.com/site-updates/vimeo-now-is-supporting-embeddable-html5.html http://livecms.com/site-updates/vimeo-now-is-supporting-embeddable-html5.html#comments Wed, 13 Apr 2011 20:30:37 +0000 admin http://livecms.com/?p=166 Continue reading →]]> Vimeo has a new feature in our HTML5 player thanks to Apple. Now you can now watch Vimeo videos on your AppleTV! Just play any video on your iPad or iPhone running iOS 4.3 and tap on the AirPlay button to send the video to your AppleTV.

Secondly, Vimeo made a small improvement in Flash player by adding a timecode hint when you mouse over the play bar. Now you should be able to jump to exact times in the video with more accuracy. We’ll be adding it to the HTML5 player shortly.

For now the HTML5 player is still limited to Safari and Chrome only. They are working on bringing it to IE9 and Firefox 4, but unfortunately both browsers present significant challenges at the moment. For example, IE9′s HTML5 support is not yet up to snuff compared to other browsers, and Firefox video support is WebM only. We hope to support WebM in the future, but are still waiting for a number of things to improve before we can adopt it fully.

PS- For all our fellow nerds out there, here are some extra details about our HTML5 player:

  • All versions of our HTML5 player (desktop, touch, mobile) now clock in at 28KB or less! (CSS and JS combined)
  • We’re now trying to use feature detection as much as we can, rather than user agent detection, which means the player will automatically work where it can as browsers evolve.
  • We have a much more dynamic layout, meaning your videos look great no matter the size of the embed.
]]> http://livecms.com/site-updates/vimeo-now-is-supporting-embeddable-html5.html/feed 0 Manipulating History for Fun & Profit http://livecms.com/html5/manipulating-history-for-fun-profit.html http://livecms.com/html5/manipulating-history-for-fun-profit.html#comments Wed, 13 Apr 2011 00:38:54 +0000 admin http://livecms.com/?p=162 Continue reading →]]> The HTML5 history API is a standardized way to manipulate the browser history via script. Part of this API — navigating the history — has been available in previous versions of HTML. The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This means that the URLin the browser location bar can continue to do its job as a unique identifier for the current resource, even in script-heavy applications that don’t ever perform a full page refresh.

❧

THE WHY

demon reading book

Why would you manually manipulate the browser location? After all, a simple link can navigate to a new URL; that’s the way the web has worked for 20 years. And it will continue to work that way. This API doesn’t try to subvert the web. Just the opposite. In recent years, web developers have found new and exciting ways of subverting the web without any help from emerging standards. The HTML5 history API is actually designed to ensure that URLs continue to be useful in script-heavy web applications.

Going back to first principles, what does a URL do? It identifies a unique resource. You can link to it directly; you can bookmark it; search engines can index it; you can copy and paste it and email it to someone else, who can click it and end up seeing the same resource you saw originally. These are all excellent qualities. URLs matter.

So we want unique resources to have unique URLs. But at the same time, browsers have always had a fundamental limitation: if you change the URL, even through script, it triggers a roundtrip to the remote web server and a full page refresh. This takes time and resources, and it seems especially wasteful when you are navigating to a page that is substantially similar to the current page. Everything on the new page gets downloaded, even the parts that are exactly the same as the current page. There is no way tell a browser to change the URL but only download half a page.

The HTML5 history API lets you do this. Instead of triggering a full page refresh, you can use script to, in essence, download half a page. This illusion is tricky to pull off, and it requires some work on your part. Are you watching closely?

magician performing a card trick

Let’s say you have two pages, page A and page B. The two pages are 90% identical; only 10% of the page content is different. The user navigates to page A, then tries to navigate to page B. But instead of triggering a full page refresh, you interrupt this navigation and do the following steps manually:

  1. Load the 10% of the page from page B that is different from page A (probably using XMLHttpRequest). This will require some server-side changes to your web application. You will need to write code to return just the 10% of page B that is different from page A. This can be a hidden URL or query parameter that the end user would not normally see.
  2. Swap in the changed content (using innerHTML or other DOM methods). You may also need to reset any event handlers on elements within the swapped-in content.
  3. Update the browser location bar with the URL of page B, using a particular method from the HTML5 history API that I’ll show you in a moment.

At the end of this illusion (if you executed it correctly), the browser ends up with a DOM that is identical to page B, just as if you had navigated to page B directly. The browser location bar ends up with a URL that is identical to page B, just as if you had navigated to page B directly. But you never really did navigate to page B, and you never did a full page refresh. That’s the illusion. But because the “compiled” page looks the same as page B and has the same URL as page B, the user should never notice the difference (nor appreciate all your hard work micromanaging their experience).

❧

THE HOW

The HTML5 history API is just a handful of methods on the window.history object, plus one event on the window object. You can use these to detect support for the history API. Support is currently limited to the very latest versions of a few browsers, putting these techniques squarely in the “progressive enhancement” camp.

HISTORY.PUSHSTATE SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
· 4.0+ 5.0+ 8.0+ · 4.2.1+ ·

dive into dogs is a straightforward but non-trivial example of using the HTML5 history API. It demonstrates a common pattern: a long article with an associated inline photo gallery. In a supported browser, navigating the Next and Previous links in the photo gallery will update the photo in place and update the URL in the browser location bar, without triggering a full page refresh. In unsupported browsers — or, indeed, supported browsers where the user has disabled scripting — the links simply function as regular links, taking you to a new page with a full page refresh.

This brings up an important point:

PROFESSOR MARKUP SAYS

If your web application fails in browsers with scripting disabled, Jakob Nielsen’s dog will come to your house and shit on your carpet.

↶ The pledge

<aside id="gallery">
  <p>
    <a id="photonext" href="casey.html">Next &gt;</a>
    <a id="photoprev" href="adagio.html">&lt; Previous</a>
  </p>
  <figure id="photo">
    <img id="photoimg" src="gallery/1972-fer-500.jpg"
            alt="Fer" width="500" height="375">
    <figcaption>Fer, 1972</figcaption>
  </figure>
</aside>

Nothing unusual there. The photo itself is an <img> inside a <figure>, the links are just regular <a> elements, and the entire thing is wrapped in an <aside>. It’s important that these are just regular links that actually work. All the code that follows is behind a detection script. If the user is using an unsupported browser, none of our fancy history API code will ever be executed. And of course, there’s always some users with scripting disabled altogether.

The main driver function gets each of these links and passes it to a function, addClicker(), which does the actual work of setting up the custom click handler.

function setupHistoryClicks() {
  addClicker(document.getElementById("photonext"));
  addClicker(document.getElementById("photoprev"));
}

This is the addClicker() function. It takes an <a> element and adds a click handler. And within this click handler is where it gets interesting.

function addClicker(link) {
  link.addEventListener("click", function(e) {
    swapPhoto(link.href);
    history.pushState(null, null, link.href);
    e.preventDefault();
  }, false);
}

↜ Interesting

The swapPhoto() function performs the first two steps of our three-step illusion. The first half of the swapPhoto() function takes part of the URL of the navigation link itself — casey.html, adagio.html, &c. — and constructs a URL to a hidden page that contains nothing but the markup required by the next photo.

function swapPhoto(href) {
  var req = new XMLHttpRequest();
  req.open("GET",
           "http://diveintohtml5.org/examples/history/gallery/" +
             href.split("/").pop(),
           false);
  req.send(null);

Here is a sample of the markup returned by http://diveintohtml5.org/examples/history/gallery/casey.html. (You can verify this in your browser by visiting that URL directly.)

<p>
  <a id="photonext" href="brandy.html">Next &gt;</a>
  <a id="photoprev" href="fer.html">&lt; Previous</a>
</p>
<figure id="photo">
  <img id="photoimg" src="gallery/1984-casey-500.jpg"
          alt="Casey" width="500" height="375">
  <figcaption>Casey, 1984</figcaption>
</figure>

Does that look familiar? It should. It’s the same basic markup that the original page used to display the first photo.

The second half of the swapPhoto() function performs the second step of our three-step illusion: inserting this newly downloaded markup into the current page. Remember that there is an <aside> wrapping the entire figure, photo, and caption. So inserting the new photo markup is a one-liner, setting the innerHTML property of the <aside> to the responseTextproperty returned from XMLHttpRequest.

  if (req.status == 200) {
    document.getElementById("gallery").innerHTML = req.responseText;
    setupHistoryClicks();
    return true;
  }
  return false;
}

(Also notice the call to setupHistoryClicks(). This is necessary to reset the custom click event handlers on the newly inserted navigation links. Setting innerHTML wipes out any trace of the old links and their event handlers.)

Now, let’s go back to the addClicker() function. After successfully swapping out the photo, there’s one more step in ourthree-step illusion: setting the URL in the browser location bar without refreshing the page.

↶ The turn

history.pushState(null, null, link.href);

The history.pushState() function takes three parameters:

  1. state can be any JSON data structure. It is passed back to the popstate event hander, which you’ll learn about in just a moment. We don’t need to track any state in this demo, so I’ve left it as null.
  2. title can be any string. This parameter is currently unused by major browsers. If you want to set the page title, you should store it in the state argument and set it manually in your popstate callback.
  3. url can be, well, any URL. This is the URL you want to appear in the browser’s location bar.

Calling history.pushState will immediately change the URL in the browser’s location bar. So is that the end of the illusion? Well, not quite. We still need to talk about what happens when the user presses the all-important back button.

Normally when the user navigates to a new page (with a full page refresh), the browser pushes the new URL onto its history stack and downloads and draws the new page. When the user presses the back button, the browser pops one page off its history stack and redraws the previous page. But what happens now that you’ve short-circuited this navigation to avoid a full page refresh? Well, you’ve faked “moving forward” to a new URL, so now you also need to fake “moving backward” to the previous URL. And the key to faking “moving backwards” is the popstate event.

↶ The prestige

window.addEventListener("popstate", function(e) {
    swapPhoto(location.pathname);
}

After you’ve used the history.pushState() function to push a fake URL onto the browser’s history stack, when the user presses the back button, the browser will fire a popstate event on the window object. This is your chance to complete the illusion once and for all. Because making something disappear isn’t enough; you have to bring it back.

In this demonstration, “bringing it back” is as simple as swapping in the original photo, which we do by calling theswapPhoto() with the current location. By the time your popstate callback is called, the URL visible in the browser’s location bar has been changed to the previous URL. Also, the global location property has already been updated with the previous URL.

To help you visualize this, let’s step through the entire illusion from the beginning to the end:

The illusion is complete. All visible evidence (the content of the page, and the URL in the location bar) suggests to the user that they have navigated forward one page and backward one page. But no full page refresh ever occurred — it was all a meticulously executed illusion.

]]> http://livecms.com/html5/manipulating-history-for-fun-profit.html/feed 0 HTML5 reference tags http://livecms.com/html5/alphabetical-html5-guide-to-detecting-everything.html http://livecms.com/html5/alphabetical-html5-guide-to-detecting-everything.html#comments Wed, 13 Apr 2011 00:21:46 +0000 admin http://livecms.com/?p=156 Continue reading →]]>
<audio>#
return !!document.createElement('audio').canPlayType;
<audio> in MP3 format#
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
<audio> in Vorbis format#
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
<audio> in WAV format#
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
<audio> in AAC format#
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));
<canvas>#
return !!document.createElement('canvas').getContext;
<canvas> text API#
var c = document.createElement('canvas');
return c.getContext && typeof c.getContext('2d').fillText == 'function';
<command>#
return 'type' in document.createElement('command');
<datalist>#
return 'options' in document.createElement('datalist');
<details>#
return 'open' in document.createElement('details');
<device>#
return 'type' in document.createElement('device');
<form> constraint validation#
return 'noValidate' in document.createElement('form');
<iframe sandbox>#
return 'sandbox' in document.createElement('iframe');
<iframe srcdoc>#
return 'srcdoc' in document.createElement('iframe');
<input autofocus>#
return 'autofocus' in document.createElement('input');
<input placeholder>#
return 'placeholder' in document.createElement('input');
<textarea placeholder>#
return 'placeholder' in document.createElement('textarea');
<input type="color">#
var i = document.createElement('input');
i.setAttribute('type', 'color');
return i.type !== 'text';
<input type="email">#
var i = document.createElement('input');
i.setAttribute('type', 'email');
return i.type !== 'text';
<input type="number">#
var i = document.createElement('input');
i.setAttribute('type', 'number');
return i.type !== 'text';
<input type="range">#
var i = document.createElement('input');
i.setAttribute('type', 'range');
return i.type !== 'text';
var i = document.createElement('input');
i.setAttribute('type', 'search');
return i.type !== 'text';
<input type="tel">#
var i = document.createElement('input');
i.setAttribute('type', 'tel');
return i.type !== 'text';
<input type="url">#
var i = document.createElement('input');
i.setAttribute('type', 'url');
return i.type !== 'text';
<input type="date">#
var i = document.createElement('input');
i.setAttribute('type', 'date');
return i.type !== 'text';
<input type="time">#
var i = document.createElement('input');
i.setAttribute('type', 'time');
return i.type !== 'text';
<input type="datetime">#
var i = document.createElement('input');
i.setAttribute('type', 'datetime');
return i.type !== 'text';
<input type="datetime-local">#
var i = document.createElement('input');
i.setAttribute('type', 'datetime-local);
return i.type !== 'text';
<input type="month">#
var i = document.createElement('input');
i.setAttribute('type', 'month');
return i.type !== 'text';
<input type="week">#
var i = document.createElement('input');
i.setAttribute('type', 'week');
return i.type !== 'text';
<meter>#
return 'value' in document.createElement('meter');
<output>#
return 'value' in document.createElement('output');
<progress>#
return 'value' in document.createElement('progress');
<time>#
return 'valueAsDate' in document.createElement('time');
<video>#
return !!document.createElement('video').canPlayType;
<video> captions#
return 'src' in document.createElement('track');
<video poster>#
return 'poster' in document.createElement('video');
<video> in WebM format#
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
<video> in H.264 format#
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
<video> in Theora format#
var v = document.createElement('video');
return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
contentEditable#
return 'isContentEditable' in document.createElement('span');
Cross-document messaging#
return !!window.postMessage;
Drag-and-drop#
return 'draggable' in document.createElement('span');
File API#
return typeof FileReader != 'undefined';
Geolocation#
return !!navigator.geolocation;
History#
return !!(window.history && window.history.pushState);
Local storage#
try {
  return 'localStorage' in window && window['localStorage'] !== null;
} catch(e) {
  return false;
}
Microdata#
return !!document.getItems;
Offline web applications#
return !!window.applicationCache;
Server-sent events#
return typeof EventSource !== 'undefined';
Session storage#
try {
  return 'sessionStorage' in window && window['sessionStorage'] !== null;
} catch(e) {
  return false;
}
SVG#
return !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect);
SVG in text/html#
var e = document.createElement('div');
e.innerHTML = '<svg></svg>';
return !!(window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement);
Undo#
return typeof UndoManager !== 'undefined';
IndexedDB#
return !!window.indexedDB;
Web Sockets#
return !!window.WebSocket;
Web SQL Database#
return !!window.openDatabase;
Web Workers#
return !!window.Worker;
Widgets: am I in one?#
return typeof widget !== 'undefined';
XMLHttpRequest: cross-domain requests#
return "withCredentials" in new XMLHttpRequest;
XMLHttpRequest: send as form data#
return !!window.FormData;
XMLHttpRequest: upload progress events#
return "upload" in new XMLHttpRequest;

]]> http://livecms.com/html5/alphabetical-html5-guide-to-detecting-everything.html/feed 0 HTML5 Peeks, Pokes and Pointers http://livecms.com/html5/html5-peeks-pokes-and-pointers.html http://livecms.com/html5/html5-peeks-pokes-and-pointers.html#comments Wed, 13 Apr 2011 00:19:45 +0000 admin http://livecms.com/?p=154 Continue reading →]]>  

Common abbreviations (you’ll see these throughout this chart):
$new=document.createElement $bool=function(any){return!(any=="no"||!any)}
Most new features can be detected in JavaScript. To test for HTML5 video support, create a <video> element and check for a property in its DOM: if("canPlayType" in $new("video")){...} See Chapter 2: Detecting HTML5 Features.

New elements

5 > 2 Forms
See Chapter 3: What Does It All Mean? Backward-compatible with HTML 4. See Chapter 9: A Form of Madness.
Test for support Test for support
<command> "type" in $new("command") Validation "noValidate" in $new("form")
<datalist> "options" in $new("datalist") Regex constraint "pattern" in $new("input")
<details> "open" in $new("details") Placeholder text "placeholder" in $new("input")
<output> "value" in $new("output") Autofocus "autofocus" in $new("input")
<progress> "value" in $new("progress") Required "required" in $new("input")
<meter> "value" in $new("meter") New input types Browsers may customize style or input methods.
<time> "valueAsDate" in $new("time") type="search" search box
Text annotations <ruby>, <rt>, <rp> type="number" spinbox
Semantics Usable in all browsers. IE < 9 requires a shim. type="range" slider
<article>, <aside>, <header>, <hgroup>, <footer>, type="color" color picker
<section>, <nav>, <figure>, <figcaption>, <mark>, type="tel" telephone number
<summary> type="url" web address
Newly documented <embed>, <keygen>, <wbr> type="email" email address
Obsolete Still supported, but won’t validate. type="date"/"time"/"month"/"week"/"datetime"
<basefont>, <big>, <center>, <font>, <s>, <strike>, Test for new input types All tests follow the same pattern.
<frame>, <frameset>, <noframes>, <applet>, <dir>, function() {
<isindex>, <tt>, <u>, <acronym> (use <abbr>) var i = $new("input");

Always quote your attribute values unless you’re a rockstar. Keep your trailing slashes if you like. Validation is still cool: html5.validator.nu

 i.setAttribute("type", "search");
return i.type !== "text";
}
Some browers claim to “support” an input type but offer no default
user interface. Modernizr can detect this.

look ma, no plugins Multimedia
Encode video with Firefogg (Theora), HandBrake (H.264), or Miro Video Encoder (multiple). See Chapter 5: Video on the Web.
<audio> support "canPlayType" in $new("audio")
Vorbis $bool($new("audio").canPlayType('audio/ogg; codecs="vorbis"'))
MP3 $bool($new("audio").canPlayType('audio/mpeg;'))
AAC $bool($new("audio").canPlayType('audio/mp4; codecs="mp4a.40.2"'))
<video> support "canPlayType" in $new("video")
WebM $bool($new("video").canPlayType('video/webm; codecs="vp8, vorbis"'))
Theora $bool($new("video").canPlayType('video/ogg; codecs="theora"'))
H.264 $bool($new("video").canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'))
Properties These apply to both <audio> and <video> elements.
src string currentSrc string, read-only
preload string tracks array of TimedTrack objects
currentTime in seconds buffered TimeRanges object, read-only
initialTime in seconds, read-only played TimeRanges object, read-only
duration in seconds, read-only seekable TimeRanges object, read-only
startOffsetTime datetime, read-only networkState enumerated, read-only
paused boolean readyState enumerated, read-only
ended boolean, read-only error.code enumerated, read-only
autoplay boolean

List multiple <source> elements in an <audio> or <video>. HTML5-supporting browsers don’t render children of <video>, so put your Flash fallback there. Audio and video must be served with the proper MIME type, so check your Content-Type headers!
loop boolean
controls boolean
volume 0.0 to 1.0, default = 1.0
muted boolean
playbackRate default = 1.0

Offline

IsGeolocationPartOfHTML5.com Geolocation
See Chapter 8: Let’s Take This Offline. Location sharing is always opt-in. See Chapter 6: You Are Here.
Test for support window.applicationCache Test for support navigator.geolocation
<html manifest> Links to cache manifest. Functions
Cache manifest sections Position getCurrentPosition(callback, err, opt);
CACHE: Always cached. No wildcards. long watchPosition(callback, err, opt);
NETWORK: Never cached. “*” wildcards. void clearWatch(watchId);
FALLBACK: Pairs; second is used offline. void callback(position); Called on success
Events First four are most common. void err(positionError); Called on error
checking always first PositionOptions object
downloading found manifest, fetching stuff timeout in milliseconds
progress still fetching stuff maximumAge also milliseconds
cached all resources cached enableHighAccuracy true or false
noupdate manifest hasn’t changed Position object (in callback) has timestamp and coords.
updateready call swapCache() to activate Coordinates object Unsupported properties will be null.
obsolete manifest is 404 (or 410) latitude in decimal degrees
error it all went wrong somewhere longitude also decimal degrees

HTTP semantics still apply to resources listed in the cache manifest, so check your Expires and Cache-Control headers. Manifest must be served as text/cache-manifest, so check your Content-Type headers too. If any required resource fails to load, application will not work offline.

 altitude meters above the reference ellipsoid
accuracy in meters
altitudeAccuracy also in meters
heading degrees CCW from true north
speed in meters/second
PositionError object (in err callback) has message and code:
TIMEOUT, POSITION_UNAVAILABLE,
PERMISSION_DENIED, or UNKNOWN_ERROR

Math is hard. Let’s go shopping! Canvas
Paths are like tracing in pencil; nothing is drawn until fill() or stroke()! See Chapter 4: Let’s Call It A Draw(ing) Surface.
Basic support "getContext" in $new("canvas")
Text support typeof $new("canvas").fillText=="function"
Functions Root path is implicit; subpaths must be explicit. drawImage() can also draw video or canvas.
beginPath(); drawImage(image,dx,dy,dw,dh); quadraticCurveTo(cpx,cpy,x,y);
closePath(); rotate(angle); bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
moveTo(x,y); translate(x,y); arc(x,y,radius,startAngle,endAngle,anticlockwise);
lineTo(x,y); arcTo(x1,y1,x2,y2,radius); getImageData(sx,sy,sw,sh);
rect(x,y,w,h); isPointInPath(x,y); putImageData(imagedata,dx,dy,x,y,w,h);
fill(); fillRect(x,y,w,h); fillText(text,x,y,maxWidth);
stroke(); strokeRect(x,y,w,h); strokeText(text,x,y,maxWidth);
clip(); clearRect(x,y,w,h); measureText(text);
save(); setTransform(a,b,c,d,e,f); createLinearGradient(x0,y0,x1,y1);
restore(); transform(a,b,c,d,e,f); createRadialGradient(x0,y0,r0,x1,y1,r1);
scale(x,y); createImageData(sw,sh); createPattern(image,repetition);
Properties All properties are read/write. fillStyle and strokeStyle can also be a gradient or pattern.
fillStyle CSS color, default = “black” shadowColor CSS color, default = “black”
strokeStyle CSS color, default = “black” shadowOffsetX in pixels, default = 0
font CSS font, default = “10px sans-serif” shadowOffsetY in pixels, default = 0
textAlign enumerated, default = “start” shadowBlur in pixels, default = 0
textBaseline enumerated, default = “alphabetic”

Learn about states! A canvas state includes the clipping path, all properties, and all transformations. save() pushes a state onto the stack and restore() pops it off.
globalAlpha 0.0 (transparent) to 1.0 (opaque)
lineWidth in pixels, default = 1
lineCap enumerated, default = “butt”
lineJoin enumerated, default = “miter”
miterLimit float, default = 10

Bits & Bytes
Doctype <!DOCTYPE html> Triggers standards-based rendering in all browsers. There is no “quirks mode” in HTML5.
Text encoding <meta charset="utf-8"> Always declare a charset, even if you’re a rockstar. UTF-8 is always a safe choice.
Optional end tags <html>, <head>, <body>, <li>, <p>, <dt>, <dd>, <colgroup>, <option>, <optgroup>, <rt>, <rp>,
<thead>, <tbody>, <tfoot>, <tr>, <td>. Exception: always close <p> before <table> to avoid IE weirdness.
Optional start tags <html>, <head>, <body>, <tbody>, <colgroup>. Amaze your friends! Skip the <html> tags and still validate!
New attributes <a media>, <a ping>, <base target>, <style scoped>, <script async>, <ol reversed>
Miscellaneous tests See The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything.
IndexedDB window.indexedDB contentEditable "isContentEditable" in $new("a")
Web Workers window.Worker Drag-and-drop "draggable" in $new("span")
Web Sockets window.WebSocket File API typeof FileReader!=="undefined"
X-doc messaging window.postMessage Undo history typeof UndoManager!=="undefined"
Web SQL window.openDatabase <iframe sandbox> "sandbox" in $new("iframe")
Web Storage "localStorage" in window && window["localStorage"] !== null See Chapter 7: Local Storage.
History API window.history && window.history.pushState See Chapter 11: History API.
Inline SVG function() { var e=$new("div"); e.innerHTML="<svg></svg>";
return window.SVGSVGElement && e.firstChild instanceof window.SVGSVGElement}

Serial Number 110302 Credits
Writing Mark Pilgrim References HTML5, HTML-diff, HTML vs. XHTML
Code Modernizr (Paul Irish et. al.) Inspiration Beagle Bros
Typography Chunk, Latin Modern License CC-BY-3.0
             
]]> http://livecms.com/html5/html5-peeks-pokes-and-pointers.html/feed 0 DeSlice – The Ultimate Provider of Design Slicing Services http://livecms.com/tools/deslice-the-ultimate-provider-of-design-slicing-services.html http://livecms.com/tools/deslice-the-ultimate-provider-of-design-slicing-services.html#comments Wed, 13 Apr 2011 00:16:00 +0000 admin http://livecms.com/?p=152 Continue reading →]]> The work ethics of DeSlice is so empowered that web designers/developers are least hesitant to delegate some of their work out of their busy work schedule related to the technical aspect of coding, while focusing on their basic expertise of designing web pages and websites (and all that sustaining a profit).

DeSlice is also the favorite service provider for coding to all the new web designers who want to make a mark with their web-designing jobs; as DeSlice provide the best standards of coding, enhancing the look of your website design. However, DeSlice believes that quality work can only be provided with good co-ordination between the client and the service provider. Therefore, DeSlice ensures that all the job descriptions and the preference of a client is clarified before an order is place for coding.

It is also important that a client provide adequate information to DeSlice if you appreciate coding of high standards. Such as, it is imperative that you (client) provides the Source file of the design, for which coding is required. You may however choose the various formats available in which you want your coding to be supplied. You may also send a compressed (flattened) image of the page look, as per your expectation. It will help in turning off the additional layers in the source files (if any).

Moreover, DeSlice offers the option for clients to provide additional description of any definite requirements. In addition, it is a prerequisite to provide the actual font files to display the image correctly, in case if the client is using custom fonts and haven’t traced the outlines of the fonts.

DeSlice also ensures that ample care is taken before the client uploads the design-work, to facilitate faster slicing of the designs. Therefore, it is imperative that the designs are to be submitted only in PSD and PNG files created either in Adobe PhotoshopÆ (.PSD), Macromedia FireworksÆ (.PNG) or Adobe IllustratorÆ (.AI) or even HTML (existing markup). It is also essential that Outlines be created while sending an Adobe Illustrator design.

DeSlice has excellent record of accomplishing turnaround time for delivery within one or three days, and that too at high levels of client satisfaction. And this high standards in its service is evident from the fact that DeSlice, with expertise in cross-browser compatibility, makes sure that your design template works on browsers like Mozilla Firefox, Safari, Opera and of course Internet Explorer 6 & 7. It also takes enough care to make your website standard compliant by confirming that your document authenticates using the W3C XHTML and CSS validator.

]]> http://livecms.com/tools/deslice-the-ultimate-provider-of-design-slicing-services.html/feed 0 3 Cool Cell Phone Tricks For You http://livecms.com/tools/3-cool-cell-phone-tricks-for-you.html http://livecms.com/tools/3-cool-cell-phone-tricks-for-you.html#comments Wed, 13 Apr 2011 00:11:40 +0000 admin http://livecms.com/?p=149 Continue reading →]]> Cell phones have become ubiquitous. It is now unusual to find anyone who does not have one of the little beasties. The obvious next step was to seek a means to ensure your cell phone is unique and different from all of the others out there. A variety of features exist in varying combinations and there are the usual tricks like customizing the picture on the screen or the ringtone. These are almost all more style than substance.

Weíve all experienced the ringtone that outstays its welcome and then just wonít go away or a ringtone that is just particularly inopportune for some reason. There are also stories of just the wrong cell phone wallpaper showing the bosses relative or some other potentially embarrassing sight. Some people actually use those phones for something other than status symbols. Here are a couple of tricks for those.

One potentially useful trick is the doggie whistle. For cell phones that allow multiple ring tones, using the inaudible dog whistle for one provides a handy method to discourage annoying dogs that might chase you as you jog, harass you as you walk or some other hassle.

Another useful trick is that of habitually locking the phoneís keys when you replace it into a pocket, purse or other container. The random presses of buttons that otherwise occur are a drain on battery power unless the phone has been told to ignore them with the lock command, and can potentially save money if the phone might accidentally hit the correct combination to make a call. Another useful feature to save battery power is airplane mode, for those times when you do not desire to answer the phone but do expect to need the phone’s other features, such as a planner function or even clock.

Finally, cell phones are terribly convenient. Carrying around a phone book isnít. Yet conventional directory assistance costs can add up. The alternative is 800-FREE411, or 800-373-3411. This is an ad supported directory assistance that can be used to find numbers you havenít stored on your phone without running up those directory assistance charges.

]]> http://livecms.com/tools/3-cool-cell-phone-tricks-for-you.html/feed 0 8 Easy Ways To Stop Spam http://livecms.com/tools/8-easy-ways-to-stop-spam.html http://livecms.com/tools/8-easy-ways-to-stop-spam.html#comments Sun, 13 Mar 2011 13:26:47 +0000 admin http://livecms.com/?p=143 Continue reading →]]> Yahoo and Hotmail provide this feature in order to keep your private email address strictly for your friends and family members and only. The secondary address, you can use for your subscriptions and other purposes. If your secondary address is abused from spammers and your inbox is filled with spam messages, then you can delete it and create another secondary email address.

Use the Spam arrest service.

When you signup for Spam Arrest, you will receive a spamarrest.com email address. You can also protect your existing email accounts by forwarding them to your Spam Arrest email address, or by having Spam Arrest periodically poll them. In that way over 90% of your spam messages will be filtered.

Use your e-mail’s filters.

Almost all email applications have this feature. You can create filters blocking spam words like ìmake money, opportunities, Viagra, e.t.c. Doing that, you will block many of your spam messages but not all of them.

NEVER post your email.

Don’t post your email on forums, websites, message boards, guest books and other online places. You should also avoid posting your contact email address on your website. Spammers use software robots and extract email addresses from thousands of websites. If you want to display your email at your website change it to jpeg photo with Photoshop or other image design software.

The use of email blocking tools.

Yahoo for instance has this excellent tool which can block up to 500 email addresses (the Free option, the paid one provide more) and this amount of spam emails will never reach your mailbox. Other web mail services provide similar features too.

The preinstalled filter in your email application.

If you use outlook express you can click ìmessageî (from windows 98 versions and later) and then click ìBlock senderî. Just doing that you will block many of your unsolicited emails.

Do Not respond to spam at all costs.

When you receive a spam message which asks you to click a link for whatever reason (fake unsubscribe and other) do not click it. If you do that, the spammers will now instantly that they deal with a real email address.

Do Not Ever open unknown messages with attachments.

This is critical. Most of the times the attachment will be a virus (especially if itís exe or zip format) If you open it you will activate the virus it contains and harm your computer. Accept email attachments ONLY from well known resources such as friends, business colleagues e.t.c. You should also have installed an antivirus which scans your emails before they are saved into your hard drive.

Excellent tools and resources to fight spam are these below:
http://www.mailwasher.net
http://www.sunbelt-software.com/products.cfm

]]> http://livecms.com/tools/8-easy-ways-to-stop-spam.html/feed 1 Google Analytics drive statistics of your Site http://livecms.com/tools/google-analytics-drive-statistics-of-your-site.html http://livecms.com/tools/google-analytics-drive-statistics-of-your-site.html#comments Sat, 12 Mar 2011 10:26:04 +0000 admin http://livecms.com/?p=133 Continue reading →]]> Among all the free web site stats analyzer, I think Google analytics is the best solution for your site because of its utility, richness and depth analysis. You are able to make informed editorial, navigational and page design decisions to boost your site’s traffic and effectiveness with the data that Google gives you.

Signup & installation

Google Analytics was launched in 2005; growth was initially slow due to the frustrating waiting list system initiated by Google to avoid over stretching their servers. Now the waiting list has been removed and anybody can sign up to use this great service.

You just need to visit Google analytics and signup for free Google analytics account.

Once your account is set up, to get Google Analytics tracking your site’s page views, drop a snippet of JavaScript onto your site’s pages (much like Sitemeter.) The guide should help you find your way around the new system. You just have to copy paste the JavaScript in the pages you want Google to track.

E.g.

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>
<script type=”text/javascript”>

_uacct = “UA-13541654-30″;

urchinTracker();
</script>

If you’re a blogger, just include the Google Analytics code into all your blogging software’s templates.

Powerful report generating tool

Google Analytics has all the features you’d expect from a high-end analytics offering. It also provides tightly integrated AdWords support to view AdWords ROI metrics without importing cost data or add keyword tracking codes.

If you have an AdWords account, you can use Google Analytics directly from the AdWords interface. Google Analytics also calculates ROI metrics from automatically imported cost and keyword tracking data, by saving you time.

There are various ways to track your different needs for your site.

If your site allows downloads you can keep record of your downloads by simply adding a script in your site.

E.g.

<a href=”http://www.example.co.uk/files/map.pdf”onClick=”javascript:urchinTracker (‘/downloads/map’); “>

Tracking ecommerce site

Tracking where your visitor come from is the most important thing you should know. You come to know from which search engine visitors come searching for your site.

Sales reports by traffic sources can be found under the “Traffic Sources > All Traffic Sources” section of the menu.

Tracking your sales

To track your sales you will need to use server side script on your confirmation page (the page people see after they complete a transaction on your site) to populate a form in the following format:

body onLoad=”javascript:__utmSetTrans()”>

Example

UTM:T|34535|Main Store|111108.06|8467.06|10.00|San Diego|CA|USA

UTM:I|34535|XF-1024|Urchin T-Shirt|Shirts|11399.00|9

UTM:I|34535|CU-3424|Urchin Drink Holder|Accessories|20.00|2

Once you have populated the form, GA will start tracking your sales right away.

Redesign of your site

If you are planning to redesign your site and want to keep your screen resolution according to the most commonly used resolution, according to different browsers or flash installed ask Google analytics for your queries. Just go to ëweb design parametersí for all the valuable data you want!

Above listed features is only the scratch of Google analytics. According to me Google analytics is one of the best web sites analyzing report generating tool build so far.

If you have not used Google analytics yet try it and I am sure you will love its rich features.

]]> http://livecms.com/tools/google-analytics-drive-statistics-of-your-site.html/feed 0 Exploring Joomla 1.6, The Content Management System http://livecms.com/open-source/exploring-joomla-1-6-the-content-management-system.html http://livecms.com/open-source/exploring-joomla-1-6-the-content-management-system.html#comments Sat, 12 Mar 2011 10:15:57 +0000 admin http://livecms.com/?p=128 Continue reading →]]> You might have heard some things about Joomla and what it is. Let me assure you Joomla is a lot more than what you ever thought was possible. Joomla allows you the end user to add, edit and delete content within your own website. You can modify text in a WYSIWYG editor. Move and change images on the page. Create menu items and add search optimised content to the pages. Joomla will also allow you to plugin almost any addon imagineable – which can transform your Joomla website from a basic run of the mill website to a professional photo gallery, blog, video library, ecommerce website and these are just to name a few addons.

So, what is Joomla 1.6?

Designer

Joomla! sites all look the same! You can’t do unique designs with a CMS! These are the two biggest myths out in the Joomla! world today. Joomla! is easy for designers to learn and love, and we’ve got the features and functionality to prove it!

  • Core layout files are tableless: New for Joomla! 1.6, all core output files are written in XHTML 1.0 Strict. HTML 5 is also supported in Joomla! 1.6.
  • New core templates: Joomla! 1.6 ships with new core templates. On the administrator side, Bluestork is the default template, and Hathor is a fully accessible template to support those with various types of disabilities. On the site side, Joomla! 1.6 ships with Atomic and Beez2 (yes, the bees are gone!), plus the legacy Milkyway template.
  • Template styles: On occasion, you want a slightly different look to one page or a handful of pages on the site. Previously, this might mean coding a completely different template. Now, with template styles, you can easily create minor template variations, which can then be assigned to specific pages on the website.
  • Template overrides vs Layout overrides: In Joomla! 1.5, you could change the look of some of Joomla’s output files via template overrides. However, you couldn’t change those output files just for a few pages. With the new improved layout overrides, you can alter the look of specific menu items, components, modules, and categories.
  • Legacy layer in Milkyway: Did you use the core Joomla! output files (without template overrides) in a Joomla! 1.5 site that you need to upgrade to Joomla! 1.6? If so, use the legacy layer in the Milkyway template for quick compatibility of look and feel, without reworking your CSS to match the new tableless output in Joomla! 1.6. (The html folder will be available as separate download.)
  • Codemirror editor: Finally, there’s a color-coded editor for easier HTML and CSS editing in Joomla!
  • Media Manager improvements: The Flash-based media uploader is back! Once more, you can upload multiple images at once to the Media Manager.
  • SEO features: Meta-keywords and meta-descriptions can be assigned to articles, categories, and menu items, and you can easily add a site name to the HTML page title.
  • Nested categories: With infinite layers of categories, creating a representation of your site map in Joomla! is a breeze.
  • Easy extension updates: You know you should keep Joomla! up-to-date, but do you keep your extensions up-to-date as well? You can easily update those extensions from within Joomla!, without visiting dozens of extension developer’s websites, in Joomla! 1.6.

Developer

Joomla! 1.6 takes Content Management Systems to a new level, not only for the ease of use and intuitive functions provided to webmasters and users, but also for the added integration and extendability provided to Component developers. We’ve compiled a quick list of the top 10 reasons why Joomla! 1.6 provides more power to developers. So here it is, Joomla! 1.6 makes a developers life easier by…

…Providing New and Improved User Functions.

  • New Core Functions for Automatic Extension Updates: One of the hardest things for developers and end users alike is getting Webmasters to update their extensions. The update process has been, at best, clunky, and many times well nigh impossible for the average user. Joomla! 1.6’s new update manager allows developers to build in automatic update functions allowing their users to update to new versions with just a few clicks!
  • New Package Installation Capability: For developers that offer a suite of components or extensions that rely on companion extensions, this one is for you. Developers can now package their components allowing users to install one file and include multiple extensions all at the same time!
  • Easily included Language Capabilities: With Joomla! 1.6’s new language structure, developers are allowed to include additional language packages right with their extensions. This makes installing and extending your website by adding languages a breeze, and also makes updating components simple.

…Providing Code Improvements for Easy Integration.

  • Integrated ACL Capability: Joomla! 1.6’s new ACL structure has been the talk of the “Joomla!sphere” for end-users. But developers benefit from this as well! The development team has made it very easy to include these advanced ACL features inside of any 3rd party component. With just a few code changes your component can allow your users to take advantage of the revolutionary ACL structure for their users!
  • Upgraded System Requirements: The new operating requirements for Joomla! 1.6 (particularly PHP 5.2) offers developers a great advantage by allowing them to take advantage of object-oriented programming and functionality. This allows developers to keep on the leading edge of development and delivering the latest in functionality!

…Providing a Uniform Component Structure.

  • New Plugin Format: With the release of Joomla! 1.6, plugins now have the same common structure as components and modules. Giving each their own directories allows developers to use a universal format for development for all joomla! add-ons.
  • Consistent Component Programming: Joomla! 1.6 provides a new and cohesive method for building components. The ability for developers to “Learn By Example” and look at the core components allows developers to easily integrate their ideas into the Joomla! framework. In fact, the Joomla! Development Team has even included sample code for developers to use as they build components for Joomla! 1.6!
  • Easy Migration to 1.6: With Legacy Mode (the ability for components built for older versions of Joomla! to work on the current version) gone in Joomla! 1.6, all developers will have to upgrade their components to be compatible with the new version. Fortunately, Joomla! developers have made it very easy for you to upgrade your components. Developers that are already familiar with the 1.5 API and MVC structure will be able to upgrade their existing components with ease!

…Providing Improved API Abilities.

  • New Query Building Class: The new Joomla! 1.6 API provides an intuitive query building class allowing developers to build queries programatically. Besides easing some of the headaches of developing for Joomla! this helps set the stage for allowing Joomla! to be compatible with other Database engines.
  • Brand New Forms API: The move from the JForm class to the JParameter class brings an increased efficiency to Joomla! development. Besides the ability to automatically filter input, the JParameter class keeps developers from having to duplicate needless code for different forms. The new class also presents developers with extendability to easily create their own forms within this framework.

Administrator

Joomla! 1.6 ushers in a new era for Website Administrators. With a multitude of new changes and advancement in usability and added functions, especially for administrators, Joomla! 1.6 presents an ideal CMS that is both powerful and flexible, as well as being easy to use and control. Check out some of our top reasons why Joomla! 1.6 is THE CMS for Website Administrators.

  • New Administrator Functions: Site Administrators will notice the new look of Joomla! 1.6 from the moment they log in. From the brand new Administrator Navigation menu, to the added functions of “Save & Add” in Content, the new Joomla! is all about efficiency and saving you time, while still giving you the familiar options and control you need.
  • New Admin. Template Choices: Joomla! 1.6 offers a whole new look at the Administrator Interface with some new templates that extend the Joomla! system. The new template functions allow Administrators to present a simplified and intuitive Administrator Interface to their Managers and other users.
  • Advanced ACL: The buzz around Joomla! 1.6 is the release of the revolutionary Joomla! Access Control System. Administrators can now easily restrict Joomla! users from content using the new Access Control Levels right out of the box! What used to be left to the domain of third party extensions or, in many cases, was not even possible now can be accomplished with a few simple clicks! Here is a quick list of some of the capabilities ACL provides: Unlimited user groups A user can be assigned to multiple groups
    • Unlimited access levels
    • Any combination of groups can be assigned to any access level
    • Access permissions can be set at multiple levels in hierarchy: Site, Component, Category, Object
    • Permissions can be inherited from parent Groups and parent Categories for faster user management.
  • New Module Configuration Options: The new module configuration options will save administrators around the world headaches as they try to publish their content on their pages. With the added ability to now publish modules on “All Pages Except Selected”, presenting your module content where you want it, and, more importantly, keeping it hidden where you don’t want it, is now standard.
  • New Category Structure: To make your life easier, Joomla 1.6 no longer has Sections. It has nested categories instead. That means you can now have a main category with unlimited sub-categories that can have their own sub-categories, etc.. There is no limit to how deep your multi-level category hierarchy can be and the neat thing about this new setup is that you have complete transparency – you can easily view and manage your categories at every level.
  • New SEO Functions: New advanced SEO features such as the ability to add Meta descriptions and keywords to categories as well as change the page title depending on the article view, and add the site name to the Title, means that Site Administrators will be able to easily control and present their sites content the way they want to!
  • New 404 Redirect Component: The addition of a Joomla1 Core Component handling 404 redirects means peace of mind for Site Administrators. Now, automatically re-routing users from an old page to the new one without them hitting the dreaded “404, Page Not Found” view is an easy reality!
  • New Template Styles Functions: The added ability to create multiple instances of your site templates, each with different controls and the ability to edit the template for each instance means the days of changing and uploading the same template multiple times just to get that perfect look on your pages is gone! Now administrators can get the look and feel they want by simply creating a new Template Style right in their Control Panel!
  • Language Overrides: Joomla! 1.6 gives site Administrators the ability to implement custom language overrides and protect them from disappearing every time you upgrade! The new custom override functions give you the ability to edit your emails, system messages, and more once, and never have to worry about them again!
  • Manual User Approval: Sick of spam users clogging your User Manager and Database? Joomla! 1.6 has that solved! The new ability to allow administrators to manually approve new registered users means that every new user can have the careful eye of the Administrator making sure that your membership isn’t clogged with bogus or fake users!

Webmaster

Sometimes it’s the little things that make us happiest, and for Joomla! webmasters, there’s so many little things to make you happy!

  • Save & New, Save & Copy: Joomla! 1.6 is all about efficiency, including how long it takes you to create new content! With the new options to “Save & Create New” applied to content editing, adding content to your site just got easier … and faster!
  • Module Assignment: Joomla! 1.6 makes it easy for Webmasters to pinpoint their content even more with the added features to module positioning. With the new ability to publish on “All Pages Except Selected”, getting your content where you want it is a lot easier.
  • Joomla! remembers where you were: Ever edit article number 45 in your article manager and save it only to have to flip back through the pages to get back to it? Joomla! 1.6 puts an end to that! Joomla! now remembers where you were and saves your place for you!
  • Media Manager improvements: Joomla! 1.6 brings major improvements to Joomla!’s media manager. A flash based uploader makes things easier, and the ability for users to upload multiple files at one time makes life easier, and, needless to say, saves you a lot of time in uploading your media to Joomla!
  • Installer improvements: One of the biggest hassles for Joomla! webmasters was the process needed to update 3rd party components. With Joomla! 1.6, problems gone! Joomla! now has an update interface allowing Webmasters to update their components to current versions with just a couple clicks!
  • Redirect component: With the addition of the Core Redirect Component, Joomla! saves you a headache by allowing you to automatically redirect old links to new pages, and saves your visitors an eyesore and hassle by keeping them away from the “404 Page Not Found” and getting them right where they need to go!
  • SEO features: With the new SEO features in Joomla! 1.6, creating custom Meta descriptions for categories, and added flexibility for title and descriptions in articles and pages is now possible! Worried about your websites rankings or usability? Use some of these added tools to give you a boost!
  • Template styles: Sick of being stuck to whatever your template allows? Joomla! 1.6 offers a whole new world of versatility by allowing Webmasters to create Template Styles. Pretty much, you can easily clone your template to apply custom changes or edits to it, and then assign it to specific menu items to create unique pages!
  • Assign modules and templates within a menu item: Joomla! 1.6 extends the ability for Webmasters to present their content where they want it, how they want it. With the ability to easily select the template and template style right from the menu interface, Joomla! saves you time, and makes presenting your content a breeze!
  • Translation now has more effective pluralization support: “One Foot, Two Foot …” simple language differences like presenting plural words typically plagued Joomla! websites with its limited ability to handle plurality across languages leaving Joomla! interfaces riddles with Dr. Seuss references from books long forgotten. No More! With Joomla! 1.6, improved language features present the user with a wider array of options for language support.

Joomla is an award winning, web based, Content Management System(CMS) that gives website administrators the power to control their website by adding, editing and deleting content.

From a business perspective what does this mean to the average business owner? Well, I setting up a Joomla website you can probably anticipate that being provided with the ability to manage content on the website is going to cost more to setup than setting up a simple static website. So it only stands to prove that you need to be prepared to see the benefits in being given this extra functionality. Understanding what impact this will have on your business is important and also analysing the cost to benefit of this functionality.

Simply put, what having a CMS website means is that the administrator or business owner then has much more freedom to make immediate changes to their website without need for a programmer or webmaster. The freedom to make changes to your website without the need to hire web site developer or web programmer normally needed to make changes for you.

Joomla also has the added benefit of being open source so it free for everyone to use so long as the GNU/GPL license is maintained – which is not an issue at all.

So, why not consider using Joomla for your next business website? – it may just give you the edge and control that you are looking for!

]]> http://livecms.com/open-source/exploring-joomla-1-6-the-content-management-system.html/feed 0