Posted Today, 01:18 AM
Headers and Footers (Plural!)
Two other elements introduced in HTML5 are the header and footer elements. On the surface, these seem pretty straightforward. For years we’ve marking up our website headers and footers with div id=”header”, div id=”footer” or similar. This is great for DOM manipulation and styling, because we can target these elements directly. But they mean nothing semantically.
Quote
“The div element has no defined semantics, and the id attribute has no defined semantics. (User agents are not allowed to infer any meaning from the value of the id attribute.)”
— Mark Pilgrim, Dive Into HTML5
HTML5′s introduction of header and footer elements is the perfect way to remedy this problem of semantics, especially for such often-used elements. But these elements are not as straightforward as they seem. Technically speaking, if every website in the world added one header and one footer to each of their pages, this would be perfectly valid HTML5. But these new elements are not just limited to use as a “website header” and “website footer”.
A header is designed to mark up introductory or navigational aids, and a footer is designed to contain information about the containing element. For example, if you used the footer element as the footer for a full web page, then in that case copyright, policy links, and related content might be appropriate for it to hold. A header on the same page might contain a logo and navigation bar.
But the same page might also include multiple section elements. Each of those sections is permitted to contain its own header and/or footer element. Keith sums up the purpose of these elements well:
Quote
“A header will usually appear at the top of a document or section, but it doesn’t have to. It is defined by its content… rather than its position.”
“Like the header element, footer sounds like it’s a description of position, but as with header, this isn’t the case.”
— Jeremy Keith, HTML5 for Web Designers
And the spec adds to Keith’s clarification by noting:
Quote
“The header element is not sectioning content; it doesn’t introduce a new section.”
— The header element in the HTML5 specification
These explanations help dispel any false assumptions we might have about these new elements, so we can understand how these elements can be used. Really, this method of dividing pages into portable and syndicatible content is just adding semantics to what content creators and developers have been doing for years.
Article source: http://html5community.com/topic/4442-learning-to-love-html5-part-4/
August 23rd, 2011 in
Uncategorized |
No Comments
Posted Today, 01:20 PM
Mozilla’s rapid turnaround development timetable for Firefox means that a beta release of Firefox 7 appeared at much the same time as the release version of Firefox 6.
Key features of Firefox 7 are that it uses less memory than its predecessor and provides better performance in various areas, including HTML5 Canvas rendering and Firefox Sync.
One of the main problems with the rapid release cadence is add-on compatibility. Traditionally, a new major release of Firefox meant new versions of add-ons even if no actual changes were needed to achieve compatibility with the new version of the browser. The assumption was that a new major version required updated add-ons.
A workaround is to install the Add-on Compatibility Reporter, an add-on which overrides that assumption. Its primary purpose is to allow users and developers to test add-on compatibility, but as a side effect it means people can continue to use add-ons that do work with the new version of Firefox. Also, Mozilla provides an automatic compatibility test and upgrade for add-ons after a new version goes beta. Add-ons that appear to function correctly are marked as compatible. Work is also continuing on the Add-on SDK. Add-ons created using it should be less prone to incompatibilities when Firefox is updated.
Firefox 7 is scheduled to be released on September 27, and on the same day Firefox 8 is due to shift from Aurora (pre-beta) to beta status, and Firefox 9 should enter the Aurora channel.
A significant feature of Firefox 8 is that it blocks add-ons dropped by application installers until they are explicitly approved by the user. The installers for some pieces of software sometimes include unrelated add-ons, presumably on a pay-per-install basis. Ethical providers give users the choice of installing the add-ons, but others just go right ahead and install them without the user’s approval.
Article source: http://html5community.com/topic/4377-firefox-7-in-beta-release-due-next-month/
August 22nd, 2011 in
Uncategorized |
No Comments
Mozilla yesterday released a beta of Firefox 7, putting the lighter-weight browser in front of a large number of users for the first time.
According to Mozilla, Firefox 7 uses significantly less memory than Firefox 4 through Firefox 6, cutting consumption by as much as 50 per cent.
The savings come courtesy of a two-month-old project dubbed “MemShrink” designed to drive down Firefox’s memory consumption and close “memory leaks,” bugs that prevent memory from being released to the system when tabs are closed. Over time, those bugs can degrade the browser’s performance, or in extreme cases, cause it to crash or lock up.
In a blog post 10 days ago, Nicholas Nethercote, the Mozilla engineer who manages MemShrink, said that Firefox 7 “uses less memory…, often 20 per cent to 30 per cent less, and sometimes as much as 50 per cent less” than earlier versions.
Nethercote also claimed that the memory changes make Firefox 7 faster than its predecessors.
The appearance of Firefox 7 in Mozilla’s beta channel starts the clock ticking toward a Sept. 27 release of the browser. Mozilla now rolls out new versions every six weeks, adding features to each edition as they’re completed rather than waiting for numerous changes to accumulate.
Other improvements in Firefox 7 highlighted by Mozilla include faster synchronization of passwords and bookmarks between copies of the browser, quicker rendering of HTML5 Canvas-based animation on Windows PCs, and a new optional add-on that provides Mozilla with performance data.
Firefox 8, next in the series, will sport some additional memory bug fixes, said Nethercote Tuesday, including one that decreases consumption on very large web pages.
Mozilla said Thursday that it will launch Firefox 8 to the “Aurora” channel some time today. That edition is slated to ship in final form on Nov. 8.
Five months ago, Mozilla shifted to a faster release cadence and a multiple-version program that offers Aurora, beta and release editions — listed in increasing order of polish and stability — for testing and evaluation.
The beta of Firefox 7 can be downloaded from Mozilla’s website. Users who have been running earlier betas — such as the one for Firefox 6, which shipped three days ago — will be automatically offered version 7.
Article source: http://html5community.com/topic/4374-firefox-7-reaches-beta-promises-faster-browsing/
August 22nd, 2011 in
Uncategorized |
No Comments
Posted Today, 01:02 AM
A beta version of Mozilla’s Firefox 7 is now available for Windows, Mac and Linux. Despite releasing version 6 of the popular browser earlier this week, it’s the next iteration that many expect to solve persistent memory leak issues that have plagued the software for years.
Firefox 7 will introduce MemShrink, an initiative that began in June to eradicate the browser’s memory inconsistencies. Mozilla developer Nicholas Nethercote claims that Firefox 7 uses less memory than the past three versions, between 20 and 50 percent less in some instances.
In addition to MemShrink, the new build also features better Javascript garbage collection. It’s said to work more frequently now and should free up more memory when multiple tabs are open. The upcoming browser also implements Azure Direct2D for Canvas which increases canvas-based animations in HTML5.
There are also tools built into Firefox 7 that will help developers measure load times. Synchronization of bookmarks and passwords is said to be faster, too.
Version 7 is part of Mozilla’s recent rapid deployment of browsers. The developer released Firefox 5 in June and earlier this week it quietly launched Firefox 6 a day ahead of the planned release date.
Mozilla’s browser has been criticized for needing large amounts of RAM and then not freeing that memory once windows or tabs have been closed. Nethercote acknowledges these shortcomings, indicating that some versions were more efficient than others. He praised Firefox versions 3, 3.5 and 3.6 but said things deteriorated with version 4 partly because of all its new features, aggressive JavaScript garbage collection and image decoding.
The final version of Firefox 7 should be available by September 27.
Article source: http://html5community.com/topic/4259-firefox-7-beta-now-available-final-build-due-next-month/
August 21st, 2011 in
Uncategorized |
No Comments
Posted Today, 10:40 PM
Jérôme Wax has created this fantastic Flickr Canvas slideshow in the style of the photo slideshow on the Playstation 3.
A gorgeous slideshow effect using canvas HTML
The slideshow scrolls thumbnails of your photos from the right rotating them and giving them a small border to add effect. By hovering your mouse to the right hand side, you can speed up the scrolling effect. If you hover on the left, you can reverse the scroll. Clicking the photo thumbnail loads the photo below.
Article source: http://html5community.com/topic/4146-canvas-photos-flickr-ps3-slideshow/
August 19th, 2011 in
Uncategorized |
No Comments
Posted Today, 04:03 PM
It does support localStorage, though you need to be in IE8 mode (this will not work in IE7 mode).
To check that you’re working in IE8 mode, load up the developer console. At the top, make sure that IE8 mode is selected. Standards mode would also be nice.
One thing that you also want to make sure of is that you’re using the HTML5 doctype. You shouldn’t be able to use an XHTML doctype with HTML5 features.
!DOCTYPE html
Using this doctype should not impact your browser support.
Also, make sure you access window.localStorage. It shouldn’t be an issue, but IE has been known to host weirder issues. Perhaps it’s looking for a locally scoped localStorage object? Who knows.
Article source: http://html5community.com/topic/4062-does-ie8-support-out-of-the-box-in-localstorage/
August 18th, 2011 in
Uncategorized |
No Comments
Posted Yesterday, 05:43 PM
Hanov Webdraw uses the canvas element to create a imprecise line drawing vector graphics application. Imprecise drawing gives the appearance of ‘hand drawn’ and can be especially useful to get across the point that whatever you are drawing is not the final version.
Looks better than the actual site…
Hanov Webdraw has the following features:
- Box, circle, lines, and curve primitive shapes
- Shadows when supported by browser
- Text in several hand-drawn fonts rendered on the server
- Rotate scale shapes individually or in groups
- Save drawing to a browser bookmark
- Select colours using an HSV colour wheel.
- Unlimited levels of Undo/Redo
To draw a box or a circle, select the relevant icon from the toolbar and then click on the object created and drag and resize to the position you require. To draw a line, select the line icon from the toolbar and click to each point you wish to draw to, with a double click to finish.
Once you have placed your objects, selecting them opens a variety of options such as colour and thickness. Lines can be rendered in a variety of styles from the exact Draftsman to the neat artist to ‘drunk’, while curves can go from sharp to smooth.
Article source: http://html5community.com/topic/4040-canvas-graphics-hanov-webdraw/
August 18th, 2011 in
Uncategorized |
No Comments
