Advanced CSS Design Resources – last-child.com

I found this page today while trying to find the proper way to add a copyright symbol ( © ) with XSL. Copyright Symbol Webpage is simply a good reference to how and why to use the copyright symbol.

Here’s a snippet on how to use it in XSL

Unicode Copyright Symbol – Programmers, please NOTE:

Unicode is required by modern standards such as Java, XML, ECMAScript / JavaScript, CORBA, WML, LDAP etc.

Pretty much all of the questions about Copyright Symbols for standards that use Unicode will require the © input. however, this may differ such as for XSL as listed below. We have tried to collate what we can for you – if you can’t work out the answer from here…keep on searching – and please write to us with any information that you think would be useful on this site.

Java Script / JSP Copyright Symbol

In Java use the unicode © or © to get the copyright symbol. One common mistake is typing the © into the code, which will not work.

XML Copyright Symbol

In XML use the unicode © or © to get the copyright symbol.

XSL Copyright Symbol

If you were to use the ‘©‘ entity with XSL, you may well come across the complaint of “Reference to undefined entity ‘copy’.”

In XSL always use ©

Copyright Symbol Webpage

I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup

<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS

section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

Apple’s lack of support for Flash on the iPhone and iPad has forced people to reconsider the value of HTML5 and its video tag. It’s no longer something to put off until the future. However, adding HTML5 video support to your site AND continue to provide a Flash option for older browsers (I.E.) is not as simple as you might expect.

While the video tag has been standardized, there is a lack of consensus for supporting the codecs used to package the videos for distribution and playback. Some browsers are supporting the OGV format, some support the more popular but licensed mp4 format. Others, such as Chrome, will support both. To make it even more exciting, there is a new version under development to make a truly open-sourced format: WebM.

This means your video tag needs to define multiple movie sources to make it playable on all browsers. It sounds complicated because it is. Luckily, Kroc Camen has written a great article and code pattern for adding a cross-browser video tag with fallback to Flash for the older browsers: Video for Everybody!.

The article is full of great advice from a programmer that has learned the stuff the hard way. Here’s an explanation of how you’ll need to adjust your htaccess file.

Ensure your server is using the correct mime-types. Firefox will not
play the OGG video if the mime-type is wrong. Place these lines in your .htaccess
file to send the correct mime-types to browsers

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Video for Everybody! – Kroc Camen

Related Resources

• HTML5 video Libraries, Toolkits and Players – Specky Boy
• JW Player: Flash Video Player – a base flash movie to use as your fallback flash movie
• html5 video fallbacks with markup – Mozilla Hacks
• Fed Flix – Repository of US Government films in various formats. These are good for testing your video markup.

Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code.

This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Related articles by Zemanta

• YUI 3 (slideshare.net)
• HTML5 Resource: HTML5 Doctor (last-child.com)
• YUI open for all ! (slideshare.net)
• Tech Thursday – Smileys, seeing dogs and cameras, YUI modules, videos and server side JavaScript (developer.yahoo.net)
• Look around you – fun with geolocation and Wikipedia (developer.yahoo.net)

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

• Link Relations in HTML5 (zeldman.com)
• A Primer on HTML 5 – By Nick Armstrong (slideshare.net)
• HTML5 Helpful Links (last-child.com)
• The Best HTML5 Slides Ever (ajaxian.com)