Advanced CSS Design Resources - last-child.com http://www.last-child.com CSS Toys for Professional Web Developers Thu, 08 Jul 2010 16:59:14 +0000 en hourly 1 http://wordpress.org/?v=3.0 How to include a copyright symbol in any language http://www.last-child.com/include-copyright-symbol/ http://www.last-child.com/include-copyright-symbol/#comments Thu, 08 Jul 2010 16:59:14 +0000 Ted http://www.last-child.com/?p=248 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

]]> http://www.last-child.com/include-copyright-symbol/feed/ 0 A quick CSS3 sibling test with the video tag http://www.last-child.com/css3-sibling-with-video-tag/ http://www.last-child.com/css3-sibling-with-video-tag/#comments Tue, 15 Jun 2010 15:56:31 +0000 Ted http://www.last-child.com/?p=240 <video>...</video> <p>...</p> </li> I wanted the paragraph to appear when the video is [...]]]> 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.

]]> http://www.last-child.com/css3-sibling-with-video-tag/feed/ 1 Cross-browser HTML5 video tag with fallback for Flash users http://www.last-child.com/cross-browser-html5-video/ http://www.last-child.com/cross-browser-html5-video/#comments Sun, 13 Jun 2010 17:00:44 +0000 Ted http://www.last-child.com/?p=235 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

]]> http://www.last-child.com/cross-browser-html5-video/feed/ 0 YUI 3.0 Gallery now includes modernizr functionality http://www.last-child.com/yui-3-0-modernizr-function/ http://www.last-child.com/yui-3-0-modernizr-function/#comments Tue, 25 May 2010 22:51:14 +0000 Ted http://www.last-child.com/?p=229 Yahoo! User Interface Library (YUI)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

]]> http://www.last-child.com/yui-3-0-modernizr-function/feed/ 0 Dive into HTML5 should be everyone’s intro to the standard http://www.last-child.com/dive-into-html5/ http://www.last-child.com/dive-into-html5/#comments Tue, 20 Apr 2010 22:30:50 +0000 Ted http://www.last-child.com/?p=224 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

]]> http://www.last-child.com/dive-into-html5/feed/ 1 HTML5 Helpful Links http://www.last-child.com/html5-helpful-links/ http://www.last-child.com/html5-helpful-links/#comments Sat, 03 Apr 2010 18:55:45 +0000 Ted http://www.last-child.com/?p=216 I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

Related articles by Zemanta

]]> http://www.last-child.com/html5-helpful-links/feed/ 0 HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5 http://www.last-child.com/html5-quick-notes/ http://www.last-child.com/html5-quick-notes/#comments Thu, 01 Apr 2010 16:43:27 +0000 Ted http://www.last-child.com/?p=207 I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.
HTML5
Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

  • Ben Galbraith, Co-founder at Ajaxian.com
  • Brad Neuberg, Developer at Google
  • Chet Haase, Adobe Flex SDK team member
  • Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

  • CSS3
  • webGL
  • geolocation
  • web workers
  • web storage
  • web sockets
  • canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

]]> http://www.last-child.com/html5-quick-notes/feed/ 0 HTML5 Resource: HTML5 Doctor http://www.last-child.com/html5-resource-html5-doctor/ http://www.last-child.com/html5-resource-html5-doctor/#comments Wed, 31 Mar 2010 17:54:25 +0000 Ted http://www.last-child.com/?p=204 I used to think HTML5 was just a pipe dream; something that was a nice idea but had no legs. However, the recent advancement of smart phones makes this the perfect approach for building web-based phone apps. Hence, my interest now in joining the HTML5 game.

There’s a great resource for those like me starting to dip their toes into the HTML5 pool: HTML5 Doctor. This web site is a collaboration between some of the biggest and brightest stars of web development: Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The article How to use HTML5 in your client work right now has some interesting suggestions on adding HTML5 functionality to your existing projects. This works hand in hand with using advanced CSS3 rules. Don’t break IE6, but start letting the advanced browsers and platforms give your users more functionality.

Here’s a summary of HTML5 bits that you can begin using today.

  • Use the HTML5 doctype and character set.
  • Use the simplified <script> and <style> elements.
  • Use semantic class names that are representative of the new HTML5 elements. See @boblet’s cheat sheet for more on this.
  • Use block level links.
  • Use the new form attributes and input types.
  • Use the new <audio> and <video> media elements (but make sure they degrade gracefully).
  • Plug the gaps with something like Modernizr.

How to use HTML5 in your client work right now – Richard Clark

Related articles by Zemanta

]]> http://www.last-child.com/html5-resource-html5-doctor/feed/ 0 Looking for an Action Script 3 programmer http://www.last-child.com/action-script-3-jobopening/ http://www.last-child.com/action-script-3-jobopening/#comments Mon, 14 Sep 2009 16:12:54 +0000 Ted http://www.last-child.com/?p=201 We’re looking for a great Flash programmer to join our team at Yahoo! If you are interested and ready to join a great team on an important project send your resume to Ted Drake.

]]> http://www.last-child.com/action-script-3-jobopening/feed/ 0 New Yahoo! BOSS Hacks web site http://www.last-child.com/new-yahoo-boss-hacks-web-site/ http://www.last-child.com/new-yahoo-boss-hacks-web-site/#comments Sat, 02 May 2009 17:00:31 +0000 Ted http://www.last-child.com/?p=196 There’s a lot of information about Yahoo! Boss on the official site: Yahoo! Developer Network. However there is still a need for a more informal portal for quick reviews of BOSS-based mashups, helpful hints, techniques, and upcoming events.

BOSS Hacks is an unofficial Yahoo! BOSS Site that does exactly that. I started it last week as I noticed this site was becoming less about standards based markup and more about how I was working with Yahoo! BOSS.

This site will feature shorter, more succinct blog posts. I’ll save any large posts for the YDN blog. Please feel free to visit the site and send me notes about what you would like to see or any new BOSS-based sites that should be mentioned.

Related articles by Zemanta
]]> http://www.last-child.com/new-yahoo-boss-hacks-web-site/feed/ 0