Category Archives: Web Design/HTML
Have you noticed that companies are playing with new interfaces for presenting library collections? Here’s another that uses the Google Books API and is based on 3D – the WebGL Bookcase. It only works in Google Chrome for me, but if you don’t have it, this video shows you how it works.
If you work with website design, then you have heard of eye-tracking software. It provides you with, among other things, heat maps:
Called Grinbath’s EyeGuide, it was invented at Texas Tech and currently sells for $1,500.
“We needed eye tracking in our lab because of client demand,” said Dr. Brian Still, CEO of Grinbath and the current director of Tech’s Usability Research Lab. “Many of the current eye tracking devices, although very good, are far too expensive for many out there. I just couldn’t choose buying one of those over paying a graduate assistant.
“So we made EyeGuide™. Initially it served as a solution just for us, but as we worked with it and improved it, we realized that it offered a viable solution for others like us who research users or build products, design advertising, or engage in other activities that could benefit from eye tracking research.”
I don’t remember earlier versions of HTML having their own logos, but HTML5 is different. It is hoped to be a way to finally standardize the web pages we create and can be used on pages that are using parts of the standard.
One more thing to note — it is “HTML5,” not “HTML 5.” There is no space; it is a string.
Tired of using basic fonts on your web pages? CSS is coming to the rescue. CSS 3 has a Fonts Module which allows us to take advantage of fonts other than arial, tahoma, and verdana.
You can start incorporating this by using Google’s Font API. All you need to do is use the CSS font-family property and call the font from Google, e.g., font-family: ‘http://fonts.googleapis.com/css?family=Tangerine’. There is a page of fonts at Google that should get you started.
Are you a user of Travelocity or Orbitz? Time to try something different — Hipmunk. Using Hipmunk, you can search for flights or hotels, but you see the results graphically and you can sort multiple ways:
Once you’ve found your flights or hotels, it routes you to the best site to finish the transaction. This is where I’m headed next time.
Ultimately, the first chapter of HTML5 for Web Designers, Jeremy Keith has posted an overview of markup. If you aren’t sure where HTML came from or, more likely, not sure where HTML5 came from, it’s a good read. Short and to the point.
If you have delved into CSS3, one thing I’m sure you’ve noticed is the multiple ways of defining the same property in different browsers. For example, in CSS3 you can set the opacity of an element. In order to do that now, here’s an example of the code you would use:
-moz-opacity: 0.6; /* Mozilla extension */ -khtml-opacity:0.6; /* Konqueror extension (Safari 1.1)*/ opacity: 0.6; /* from the standard */
The reason for this duplication is that the standard has not yet been finalized. So, in order to be sure the functionality works, browser manufacturers create their own browser-specific properties. When the standard has been completed, these properties will not be needed.
Even without these properties, the functionality contained within CSS3 is so diverse that getting comfortable with creating it by hand may take a while. There are CSS3 online code editors that can help with that task. Here are a few that I am aware of:
Although I have not worked extensively with all of them, each looks like they could be helpful. I’ll probably end up using at least two on an on-going basis.
A site that covers HTML5 with information, presentations, and tutorials, this looks like a great place to start your introduction to the next HTML standard. HTML5Rocks is divided into 4 major sections:
- Interactive Presentation — a presentation that includes most of the changes in HTML 5, shows you the code and many times, lets you play with it to see how it works.
- Code Playground — code is displayed with the result; however, you can also make changes to the code and see the updated results.
- Samples Studio — demonstrations of HTML5 with the code
- Step By Step Tutorials — “how to” section
I will definitely be spending a lot of time here — and soon!
Well . . . not quite everything . . . for most things.
The World Wide Web Consortium has created a single-stop validator called Unicorn. From this single page, it allows you to check HTML, CSS, MobileOK, or your feeds — or your can check them all at one time. Developers are also encourage to develop their own modules, which could be added to this service.
I am constantly moving back and forth between validators at the W3C; having a single URL to remember is wonderful!