To demonstrate this simplicity we will create a css drop down menu, the drop down menu will be visible once the user.

Imagine you have a website navigation represented by the following html

<div id="nav">
  <ul>
    <li><a href="#" title="Services">Services</a>
      <ul>
        <li><a href="#" title="Web Design">Web Design</a></li>
        <li><a href="#" title="Front End Development">Front End Development</a></li>
      </ul>
    </li>
    <li><a href="" title="About">about</a>
      <ul>
        <li><a href="#" title="Who we are ?">Who we are ? </a></li>
        <li><a href="#" title="What we do ?">What we do ?</a></li>
      </ul>
    </li>
  </ul>
</div>

Basically we have a div wrapping all the navigation list tags. In the first unordered list <ul> we have two <li> composing the menu, which in turn have the HTML for the submenus.

In this HTML we will be focusing on the <ul> that wraps the the sub menu items.

Taking in consideration the above HTML we will create some simple CSS rules which will allows.

<style type="text/css" media="screen">
  * { padding:0; margin:0; }

  #nav ul li { display:inline-block; position:relative; }

  #nav ul li ul { display:none; position:absolute; left:0; }

  #nav ul li:hover > ul { display:block; }
</style>

In the *css rule we simply reset the browser deafult padding and margin.

* { padding:0; margin:0; }

The #nav ul li css rule display the menu <li> horizontally and adds the position relative so that our sub menu can be position absolute within it.

#nav ul li { display:inline-block; position:relative; }

Folloning we have #nav ul li ul which hides the submenu and positions it absolutly on the left of the related tab.

#nav ul li ul { display:none; position:absolute; left:0; }

Finally and more importantly we have the hover css rule #nav ul li:hover > ul { display:block; } which display the submenu <ul> of the hovered <li> element.

As you can see with few lines of CSS we could create a css dropdown menu

View the working example or download the files

shim: A compatibility workaround

In computer programming, a shim is a small library which transparently intercepts an API, changes the parameters passed, handles the operation itself, or redirects the operation elsewhere.

Shims typically come about when the behavior of an API changes, thereby causing compatibility issues for older applications which still rely on the older functionality. In such cases, the older API can still be supported by a thin compatibility layer on top of the newer code. Shims can also be used for running programs on different software platforms than they were developed for.

Source: Wikipedia

Don’t lose any more time.

html5shim and html5shiv are exactly the same thing.

To help IE version less then IE9 you can insert the following to the head element of your html pages and thereafter IE will be able to style any “unknown” html element. The “unknown” elements are the new html5 elements

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
  </script>
<![endif]-->

Me being a fan of HTML5 and Django i am happy to try this out.

HTML5 Straight to the point – Elizabeth Castro

Book Description:
This project-based book walks the reader through the creation of a Web site, using HTML5 and CSS3. It shows how to use the new HTML5 syntax (article, section, and so on)  and also how to write JavaScript to force IE to recognize that code so that it can be used right now. It covers the newer parts of HTML5 (such as canvas and video) with a strong emphasis on what works right now, using what people are calling “progressive enhancement” (writing web pages that can be viewed by all but that those with superior connections/systems can see in better ways). The book uses a combination of project examples and explanation to teach HTML5 thoroughly and succinctly.

Amazon Page - Elizabeth Castro website.

HTML5 Up and Running – Mark Pilgrim

Book Description:
HTML5: Up & Running carefully guides you though the important changes in this version with lots of hands-on examples, including markup, graphics, and screenshots. You’ll learn how to use HTML5 markup to add video, offline capabilities, and more—and you’ll be able to put that functionality to work right away.

Publishers Website - Mark Pilgrim.

Introducing HTML5 – Bruce Lawson, Remy Sharp

Book Description:
This book provides great information on HTML5 with good examples and plenty of resources to help you to conquer the new world of HTML5.

Bruce and Remy, teach you to how to implement the new features of html5 in an accessible way and informing the reader on what works on todays browsers.

Book’s Website - Bruce Lawson Website - Remy Sharp Website

HTML5 Designing Rich Internet Applications – Matthew David

Book Description:
HTML5 came to improve the web development world and in this book Matthew shows you what HTML5 can do for your websites by providing demo applications and tutorials that illustrates the power and interactivity offered by html5.

The companion website visualizetheweb.com has many resources, and information to further develop your skills in html5.

Publishers Website - Matthew David.

HTML5 for designers – Jeremy Keith

Book Description:
This is an 85 pages book which transforms a long and tedious spec into a brilliant user’s guide by cutting the chase with practical examples.

The author is Jeremy Keith the author of DOM scripting and Bulletprof Ajax. He also blogs at the adactio.com

Order - Alistapart Website - Author Website

Recently i have listen to the Big Web Show podcast hosted by Dan Benjamin andJeffrey Zeldman, in which they interviewed Jeremy Keith a well known personality of the web design community and author of HTML5 for Web Designers its most recent book.Well after that episode i got the bug of html5 and started experiencing whit it a lot more, but there is always the issue IE7 / IE8 html5 support so for client work i am using this sudo approach explained in the podcast by Jeremy Keith.

This approach consists in adding div’s with classes that map to the new html5 spec.

But in some new personal projects i am using straight html5 and to make htm5 markup work in IE7 / IE8 i have include HTML5 shiv a javascript piece of code developed by Remy sharp.

This piece of code does wonders and is available here.

You can check HTML5 enabling script blog post where Remy Sharp introduces this script and gives basic instructions on how to use it, but basically you have to place the script in the header of your website, this being place inside IE conditional tags as follows:

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
  </script>
<![endif]-->

If you can rely on the use of javascript for your next project why not take HTML5 for a spin.

One last word is that if you want to be on the top of html5 i suggest you to subscribe to html5doctor website as this is full of very useful information related to html5.

Renato Marques is a graphic and motion designer from Portugal, with really good work publicly available from Vimeo and his portfolio can be found at cargocollective.com.

Let’s check the interview and you will understand his approach to this industry.

t’s check the interview and you will understand his approach to this industry.

Renato could you please introduce yourself to Keycss.com readers?

My name is Renato Marques, I´m a 26 years old, a motion designer, living in Lisbon.

I work mainly as a motiongrapher, but I´m starting to produce my own projects,
where I can create the concept, direct and do the design components.

This doesn’t mean that I don´t like to work with a team, because I do, and I think that it’s really important, but from time to time, it’s good to be in control of everything.

The kind of work that i really love to do, is without a doubt, title sequences.

It´s that kind of work that grows, while your are working on it, you get to try a bounce of different things in oppose to advertising.

What made you start a career in the design industry and has anyone in particular influenced this decision?

The design thing happened casually before going to college.

I was actually thinking in becoming a painter, because I always liked to give a personal interpretation of life and things, and for me painting was and still is a perfect way to exorcise feelings and aspirations. In the meanwhile I thought that maybe it wasn’t enough for me and I changed my mind and went to college.

I finished a degree in communication design, but without really knowing what design was in fact, which is something that I´m still trying to figure out.

So, in a way or another, I think that I can say that painting helped me in my decision, and still helps me now. It’s a perfect way of freedom in visual communication.

Alright interesting path, so when you first began your career, what were the biggest challenges you faced?

There were plenty. From the industry that is still pretty closed in Portugal, to the payments.

Starting in this industry is not easy at all, you have to really love what you do, or else you are not going to make it. But fortunately I got an internship at Euro Rscg 4D Lisbon, that allowed me to learn how the Industry works.

The other thing that was hard to handle, was the rhythm, which was completely different from college as all the hours and dedication necessary in this area is a lot.

What was your view on the design back then? Has your perception changed since?

Yes it completely changed.

When I started, I looked at Design as a personal communication tool, and I wanted to use it, without any method at all, in a way I was using it as a art tool nothing else.

Now I see it more as a way to communicate what others want. For that I have to have a method for me to achieve results constantly, and not work Design as Art, in spite of doing that sometimes.

How do you typically start a new project any method in particular?

I always try to search for references, to see what was done on the kind of work that I will be doing. Then I try to find the right font, and when that happens, everything becomes real easy. And from then one it´s all about experiment. That is mainly it. It´s a research process, that leads to the creation of the first mood boards.

On my last interview with motion designer Jorinna Scherle she mention that she gets inspiration from things like nature or modern art, In your case is there any process that you follow for inspiration or brainstorming ?

My main references are movies. I watch as many as I can, with the maximum attention to detail as possible. For example Fight Club is a huge source of fantastic references, not only because of the aesthetics, but also for the “twists and turns” that inspire me, with out a doubt.

For me when I design I have music as my best friend really like it and I always wanted to know if other fellows designers have something similar to stimulate the design process, does music influence your design spirit or there is any other particular thing that help you going?

Totally! When I´m tired or out of focus, and have a project that needs to be delivered, I always depend on music. One of my favorites is Cinematic Orchestra. Their sound has a power that involves you, and pushes you to your “zone”.

I recommend every one to see and hear “The Man with the Movie Camera”, which the sound track is from Cinematic.

I have other tricks to keep me motivated, like, working at home, instead of driving to my office, which, for me, is pretty cool to have that freedom. I also like to “download the internet” searching for good references, for a particular project.

When you first started what was your very first paid job or project you performed as a graphic designer, any interesting story you would like to share?

I honestly can´t remember that. But I will never forget when I saw one illustration I did printed in the morning paper. That rush really became a fuel for continuing forward, and searching what I want.

Is there any advice you give for new comers to the design industry?

Everyone “copy´s” works from somebody, my advice is to copy from the best.

Do you have any preferred artists that you like in particular?

Pleix is certainly one of them. They are mainly responsible for my decision to start working on motion design.

They have such groundbreaking work. I am still amazed admiring their work several years later.

Is there any online resources or feeds you follow related to the industry?

Several:

• www.motionographer.com - for inspiration.
• www.greyscalegorilla.com/blog/ - for understanding.
• www.videocoplilot.net - for learning.

What are your 5 favorite sites online?

That’s not easy, but:

• www.motionographer.com
• www.greyscalegorilla.com/blog/
• www.renascent.nl/
• www.fakepilot.com/
• www.pleix.net/

Where can the readers find out more about you and your work?

I have a new site that is going to be easily updated. that is www.cargocollective.com/renatomarques, so stay tuned.

I have there all of my contacts and my best work.

Thanks for everything, and keep up the good work.

Conclusion

I would like to publicly say thank you to Renato for his time in answer to my questions, and that i really appreciate his work.
Please time some time o see his work online, and you can start be whatching the video below.

INL SHOWCASE DIRECTOR´S CUT from RENATO MARQUES on Vimeo.

This is a showcase of work done for the inauguration of INL. There was total creative freedom, which was great. The agency was Grey Lisbon.

One of the most fascinating disciplines of design is packaging design and i always check for those when searching for that special details.

Well today i was doing just that and i decided to grab a few of the packaging designs that i enjoyed and i thought i would share it with you.

Resources

• Flickr Design Packaging
• Flickr 99 Design
• Lovely Package
• MIAD Communication Design

The overall idea is that we request xml data via “ $.ajax “ function and the response generated is a DOM(document object model) tree with which we can easily traverse utilizing the power of Jquery.

Note: All files are placed inside the same folder.

1. The XML file

This xml file is a simple task list with three elements and each element has two child nodes, the task heading and the task body. A simple file to make the tutorial simple enough.

<tasks>
  <task>
    <heading>Reminder</heading>
    <body>Don not forget the game this weekend!</body>
  </task>
  <task>
    <heading>Beer after game</heading>
    <body>Let go for a beer after weekend</body>
  </task>
  <task>
    <heading>Ah! subscribe to keycss.com</heading>
    <body>Don not forget to subscribe to keycss.com RSS</body>
  </task>
</tasks>

2. The HTML page element

I have included an unordered list with the id of “place-holder” and in this list I will append the results provided by the jquey request.

So inside the body tag of your html document paste the code snippet below:

<ul id='place-holder'></ul> 

3. Download and setup Jquery

I like to link to the jquery file hosted on google code in Google Ajax Libraries, there you will find jquery link among other popular javascript libraries.

The reason for this is that a general part of developers link to this this file therefor is most likely to be in the users cache and a faster loading time will be achieved, now back to the tutorial.

Paste the link below in between the head tags of your document

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'> </script> 

The next step is to have an external javascript file in which i will place my custom javascript code, i called it script.js but you can call it whatever you want. I load it into the web page as below by placing it between the head tags:

<script src='script.js' type='text/javascript'></script> 

Now that we are set keep reading, the real deal is coming in a moment

4. Requesting XML file with jquery $.ajax function

In the code snippet below i requested the xml file via $.ajax function specifying four arguments.

• type: this describes what kind of request we are making, in this case we make a GET request as we are only reading data and not changing anything on the server side.
• url: simply indicate were is the source of our data in our case is tasks.xml located on the tutorial folder and exemplified on step 1.
• dataType: as descriptive as it is we are telling Jquery what type of data we are dealing with.
• success: this has the name of the function we will use to manipulate and read the data requested, in my case below i called my function manipulateXML.

$(document).ready(function(){
  $.ajax({
    type: “GET”,
    url: “tasks.xml”,
    dataType: “xml”,
    success: manipulateXml
  });
});

Place the code above in your script.js file

5. Read and manipulate the XML with Jquery

Now that we have requested the data and told Jquery to use the function manipulateXml to deal with the response we need to create that function, paste the code snippet below in your script.js file just after the previous snippet.

function manipulateXml(data){
  //find every Tutorial and print the author
  $(data).find("task").each(function(){
    var heading = $(this).find("heading").text(),
        body = $(this).find("body").text(); 

    var output = [
                  "<li><h2>" + heading + "</h2>",
                  "<p>" + body + "</p>",
                  "</li>"
                  ]

      $("#place-holder").append(output.join("\n"));
   });
}

Now step by step

Our function manipulateXml() has one argument that is in fact the response object that is provided to us by the $.ajax function, so once the request is successful we have an object to work with in my case i called it data.

With this data which is in fact a DOM tree i use the function .find() to find all the xml elements with the name of task, after i utilize the .each() to loop my results and generate a response.

$(data).find("task").each(function(){ }); 

Within my .each() loop i created two variables that represent the two child nodes of my task elements, utilizing the keyword this as in ” this task ” and once again i use the .find() to get my elements.

Another important thing here is that in fact for example we found the heading element but what we want is the text inside that particular element so for that reason we call the function .text() to simply get the text we want.

   var heading = $(this).find("heading").text(),
       body = $(this).find("body").text();

Another step we need to do is to actually output our data into the web page after all that is the main goal right!

So i created a variable output and simply build an array with the markup and variables heading, body.

    var output = [
                  "<li><h2>" + heading + "</h2>",
                  "<p>" + body + "</p>",
                  "</li>"
                  ]

Last but not the least i append our output variable to the unordered list using the .append() function and joining the array.

$("#place-holder").append(output.join(\n)); 

There you go, if all went alright you should be able to see your tasks in the web page once you load it, if not sure please have a look at the demo of this tutorial.

Conclusion

In this Jquery XML tutorial i explained a simple way to deal with xml files and jquery, i hope that its clear.

For me using Jquery to consume XML is just so easy and advantageous, in this jquery xml tutorial i used a simple xml file to exemplify the concept and the basic steps but if for example you wanted to get your twitter stream would be as easy as what we done in this tutorial.

Please view the example to better understand the tutorial, and please download the file to play around.

View the example or Download the files.

The other a client ask me to have every page fading in when they load and i thought that is easy and if you notice google home page also has a smooth fade in effect when the user moves the mouse over the page, on this example the will be fading in as soon as the page loads and the best of all it only takes a few lines of code due to the fact the we will be using a great Javascript Library JqueryThis will be short and easy.

<div id="page_wrapper">
<h1>Page Fade In effect with Jquery</h1>
<p>A simple Jquery trick to Fade In any web page in your web site</p>
</div>
<p>To verify it just reload this page.</p> <p><a 
  href="http://keycss.com/entry/page_fade_in_effect_with_jquery" 
  title="Page Fade In effect with Jquery">Check the tutorial page</a>
</p>

body{ background: url('images/background.png') top left repeat-x; }

h1 {
    color: #ffffff;
    font-family: Helvetica, arial, verdana;
    font-size: 24px; color:#000000;
}

p { 
    font-size: 13px; 
    line-height: 13pt; 
    margin-top: 8px; 
    color: #808080;
}

a { 
    font-size: 13px;
    text-decoration: none;
    color:#e51837;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#page_wrapper {
    width:500px;
    margin:0 auto; 
    border: 1px solid #cccccc; 
    padding: 20px;
    background-color:#ffffff;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

#page_wrapper img {
    float:right;
}

$('body').hide();
$('body').fadeIn(1000);