Some apps seems odd at first, but works surprisingly well once you get going. So below you will find some useful organizational tools, others we thought might help inspire or motivate creativity, while the rest we have included simply because they will keep you connected with your team or your clients effectively while you are on the go.

Better Management

1. OmniFocus

OmniFocus for the iPhone brings task management to your fingertips.

1. Keep track of actions by project, place, person, or date.
2. Bring up a shopping list, agenda items to discuss at work, tasks for home, and any other lists you need.
3. Using your location, OmniFocus can create a custom list of actions to complete nearby.
4. Buying groceries? OmniFocus can show you the closest grocery store and create an instant shopping list.

Download App. Here

2. WordPress

WordPress for iPhone allows you to create and edit content on your WordPress blog with support of offline use.

Download App. Here

Search & Stay Updated

3. Google Mobile

Get the most advanced google search experience for your iPhone now with voice and My Location.

Features include:

1. Voice search for the web
2. Fast access to google services like Mail, Earth, Photos, Talk, Reader and more.
3. Search with My Location- search for nearby businesses and more with specifying where you are
4. When you type, get time-saving suggestions for contacts, web shortcuts, history, word completions

Download App. Here

4. Byline

Byline allows you to read the latest news from your favorite sites and blogs on your iPhone or iPod Touch, even when you’re offline.

1. Two way syncing with google reader.
2. Browse new items, starred utems, notes and folders in separate lists.
3. View up to 200 items from each list when you’re offline, including embedded images.
4. Offline browsing lets you access complete web pages linked to by notes, starred items and new items.
5. Built-in web browser for online and offline browsing.

Download App. Here

Getting Things Done

5. Jott

Jott is a free voice-to-text transcription service. So now instead of typing out your long emails using iPhone’s keyboard,all you have to do is start speaking into the recording interface and it’ll show up in your Jott notes. You can then forward the Jott e-mail to whomever you want. This will save you a lot.

Features include:

1. Voice-to-Text Notes
2. Email & Text Reminders
3. To Do Lists
4. Hands-free Email & Text
5. Group Messaging

You can get started Here

6. Ever Note

Evernote for iPhone (and iPod Touch) lets you capture any moment or idea as it happens, wherever you may find yourself. And, thanks to Evernote’s amazing cloud-based sync, you can recall it all any time from your iPhone, Mac, PC, the Web, or other mobile device.

Features include:

1. Create and edit new notes on the fly
2. Snap a photo right into your account
3. Record a quick voice memo
4. Easily access all of your notes
5. Select notes for offline viewing

You can get started Here

7. ShapeWriter

Stores notes and send emails using ShapeWriter, by enabling you to enter text into the iphone by tracing word shapes rather than typing letters which is more efficient than letter-based handwriting recognition.

Download App. Here

8. Mocha VNC

Mocha VNC provides access to a VNC Server. Using your iPhone, you can connect to a Windows PC or Mac OS X and see the files, programs, and resources exactly as you would if you were sitting at your desk, just on a smaller screen.

Features include:

1. Another cool key board
2. Extra keys as ALT,CTRL, Option and Apple key
3. 8 and 32 bit color modes
4. Zoom and scroll as the Safari browser
5. Mouse Support

Download App. Here

9. Air Sharing

Mount your iPhone or iPod touch as a wireless drive on any Mac, Windows, or Linux computer. Drag-drop files between your iPhone or iPod touch and your computers.

Features include:

1. View documents in many common formats.
2. Prominent display of available space
3. Stable, high-quality viewing of very high-resolution image files
4. Page Up and Down buttons that accelerate while held down

Download App. Here

10. Air Mouse

Air Mouse instantly transforms your iPhone or iPod touch into an in air, wireless mouse for your computer! Sit back and surf the web, browse your photo library or control your music player from the comfort of your couch.

Features include:

1. Motion sensing air mouse
2. touchpad
3. keyboard
4. left and right mouse buttons

Download App. Here

Stay Connected

11. Fring

The only IM/messaging client you will need. Have Google Talk, AIM, Skype, MSN, Yahoo, ICQ, Twitter, plus VoIP calls over Wi-Fi. So now you can tweet, call your clients over skype, chat on your favorite IM tool and get your work down when you are outside with your iphone.

Features include:

1. VoIP Calls over WiFi
2. Instant Messaging
3. Dynamic contact list with real-time contact availability
4. SIP integration

Download Fring Here

12. Thumbtacts

Thumbtacts allows you to search your contacts using one hand. To find a contact, touch an option (a letter or character string) to proceed to the next set of available matches.

Download App. Here

Calm Down and Clear Your Mind

13. Original Brain Toot

Brain Toot is a brain game that will give you a simple and fun way to help challenge and stimulate your brain. It includes 16 brain training games to give you a mental exercise to test your memory, math, visual and thinking skills.

Download App. Here

14. Binaural beats

Binaural beats helps you concentrate, relax or fall asleep by inducing the brain to perceive different brainwave states such as: beta?alpha, theta, delta. Combining with different nature sounds, you can make your own themes for many purposes such as: Sleep induction, study aid or headache treatment etc. Blocking noise from the outside world, no more distraction!

Download App. Here

Design Tools

15. Ruler

Now you can use your iPhone as a ruler. You can measure any object by placing it on the device screen or just next to it. By moving each line limiter one after another you can get a more accurate measurement. In addition it is possible to switch between centimeters and inches on the information screen. Ruler always saves your latest measurement and you can turn back to it any time.

Download App. Here

16. Palettes

Palettes is a powerful iPhone productivity tool for creating and maintaining color palettes. Turn your iPhone into a portable color creation tool. Now you can create a color palette anywhere at anytime.

Features include:

1. Grab colors from a photograph, a website, or add colors using any one of 5 color models
2. Quickly find matching colors with support for many different color schemes.
3. Browse, search and import palettes from COLOURlovers.com

Download App. Here

17. Cliqcliq Colors

Since most designer or developer use CSS, HTML, Flash or other media-centric technologies, you will need to have a tool for finding the exact colors you want to use and converting between various scales and formats. Cliqcliq Colors is a noce small app. in your iPhone for managing colors.

Features include:

1. Email palette in txt, bmb, aco and ase
2. Camera integration and automatic color extraction
3. multiple select for color deletion from palette.

Download App. Here

18. PixelPipe

PixelPipe is a free and fully loaded photo sharing app that lets users easily send and geotag their photos to any of 50 supported destination sites including Twitter, Flickr, YouTube, Seesmic, Facebook, FriendFeed, Tumblr, WordPress, and FTP sites.

Download App. Here

19. Photobucket

Now you can upload all your photos to Photobucket to share online with your team or clients. You can share with your team over email, IM, Myspace or most leading social networking and blogging websites.

Download App. Here

20. beamME

beamME is a free and universal electronic business card exchange application. beamME allows you do send your personal or business card from your iPhone to any other mobile device or computer, including BlackBerries, Android phones, Treos, Macs, PCs and more.

Download App. Here

Pay Online

21. PayPal

The PayPal application allows you to send money to anyone you want using your existing PayPal account. The Paypal application is also great for checking your balance while you are out.

Download App. Here

In this post I’ll describe two common examples and how to accomplish them. But first, here’s the piece of code we’ll be using:

<?php
include(TEMPLATE . '/template-file.php');
?>

This bit of code is extremely useful as it can be used in any template file to include any other template file. Here’s the two most common uses:

Category Sidebars

If you would like to show a different sidebar based on which category the current post is in:

<?php
if(in_category(1)) {
include(TEMPLATE . '/sidebar-1.php');
} else if (in_category(2)) {
include(TEMPLATE . '/sidebar-2.php');
} else {
include(TEMPLATE . '/sidebar-post.php');
}
?>

This could be useful to show a different FAQ for a product category, a different set of widgets if it’s the News category, etc.

Homepage Header

Since the homepage is often a separate layout from the rest of the site, you may want to have a header-home.php template file that is used on the home page and then the default header for the rest of the site.

So you can continue using the default get_header() call on all the template files, here’s the best way to go about it:

1. Duplicate your header.php file and name it header-default.php

2. Create a header-home.php file and insert your markup for the home page header

3. Open your header.php file and delete everything (only after step #1 of course) and add this code:

<?php
if(is_front_page()) {
include(TEMPLATE . '/header-home.php');
} else {
include(TEMPLATE . '/header-default.php');
}
?>

We already know the networking and business benefits of using Twitter. Sure, you can meet new business contacts, drive traffic to your website and share intimate moments with all of your followers. But how can a social network that depends on millions of 140 character statements help someone in the real world?

Well, the possibilities are endless. From having someone local bring you a tank of gas when you’ve run out, to shacking up with a friend on a conference excursion, here’s a list of ways Twitter can save you money, time, and increase your real world social skills.

How has Twitter helped you in the real world? Share your experiences in the comments.

---

1. Saving You a AAA Membership

This might not work all the time, and perhaps you keep up a little better with your gas gauge than I do. But how great is it that you’re connected to so many people across the globe, on a rather personal basis? The person who you shared the viral puppy video with may be the person to answer your “I’m stuck at exit 2 on Rt 24 in RI – Anyone around to bring me gas?” tweet.

---

2. Getting First-Hand Reviews

So you’re at the movie theatre (or on your way) and you still haven’t decided between The Curious Case of Benjamin Button or Slumdog Millionaire. Fire up your phone and your Twitter app to get recommendations from those you trust. This can work for shopping too!

3. Receiving Advanced Traffic Warnings

About to leave the house? Check those local twitter warnings to see if anything bad is going on around you. Probably not the best idea to check while driving.

---

4. Making Travel Buddies

This is my favorite “real life” use for Twitter. Can’t afford a hotel room for a conference? Book one with a Twitter friend (or stay at their house). Don’t have anyone to go skiing with? Ask your Twitter friends! Who said social media was for the socially-inept?

---

5. Getting the REAL Weather

I’ve used this little diddy from time to time since I spend a lot of time at both a friend’s house in Boston and my own house in Rhode Island. As we all know, weather reports can be pretty inaccurate and a simple “How much snow in [insert town or region here]? ” can determine whether you’re leaving the house or not. If you live near relatives or friends you could call instead… well lucky you!

6. Becoming a Super Stalker

If you want to be good at your trade, you need to be on Twitter. This is especially true for stalkers. I mean, imagine being a stalker without Twitter. You’d never know where your subject was at all times, what they were thinking, who they were with. How did stalkers ever survive without it?

7. Making New Gaming Friends

OK I don’t know if this counts as real life in any way other than it not being on the computer. Disagreements aside, Twitter is a great way to get new XBox Live friends to play with, or if you’re like me, new friends to steal fruit from in Wii Animal Crossing.

8. Receiving Better Customer Service

We all know how Frank on @comcastcares has helped people and he’s been well applauded for it. But even better, he’s inspired other companies to get with the program as well. Nowadays, I’m able to talk to someone from a company I deal with quicker by sending a DM than waiting on the phone. I’ve even gotten DMs from travel agents when I’ve talked about different cities I plan on going to or hope to go to. I mean, who needs Google anymore? Just kidding!

9. Becoming More Social

Yes, social media really does translate into real life. Twitter can open up many new doors, from an open invitation to a #PinkSlipParty, a spontaneous “TweetUp” for lunch, or more formal invitations like speaking gigs. I remember I once saw a tweet by @kevinrose that said he was stuck at an airport and wondered if anyone was around and wanted to get coffee. Oh how I would have loved to have been in the right place at the right time that day.

And for fun, here are a couple of ways users have shown that DON’T overlap well in real life.

Twitter is About People

So you see… unless you’re using Twitter for more than it was created, you’re not getting the full experience. I’ve met tons of new people, gotten job offers, found new friends to grab hot chocolate with and started lots of new projects by engaging on Twitter.

The obvious take-away is that Twitter is about people. It’s the people you meet in life that will lead you on new adventures.

So… one last tweet I thought summed up this post the best:

But more likely…

More Twitter Resources from Mashable:

- HOW TO: Build Community on Twitter
- HOW NOT TO: Build Your Twitter Community
- HOW TO: Win Friends and Twinfluence People
- Tweets to Go: 35+ More Twitter Resources for Your Phone

---
Related Articles at Mashable | All That's New on the Web:

Twitter Mobile Interface
Quick Fix For Twitter Troubles
Don’t Send Bac’n: Use TwitterSearch
Mosio Uses Twitter For Mobile Q&A
Twitter Adds GMail Contacts Import
How Messed Up Is Twitter For You Right Now? [Poll]
30Boxes Brings Us Power Twitter

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter .

You may want to take a look at the following related articles:

• 5 Useful Coding Solutions For Designers and Developers
• 10 Useful Techniques To Improve Your User Interface Designs
• 10 Principles Of Effective Design
• Five More Principle Of Effective Design
• Getting Creative With Transparency In Web Design

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type="submit" value="Submit" onclick="this.disabled=true" />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container - with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

	<div id="container">
		<div style="display: block; top: 236px; opacity: 1;" class="dialog">
			<div class="body">
        		<div class="content">
        			...
        		</div>
        	</div>
        </div>
      </div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

Related articles

Please take a look at the following related articles:

• 5 Useful Coding Solutions For Designers and Developers
• 10 Useful Techniques To Improve Your User Interface Designs
• 10 Principles Of Effective Design
• Five More Principle Of Effective Design
• Getting Creative With Transparency In Web Design

Discuss further techniques in comments!

Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter .

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability.

(al)

Defining Structure

<section>

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<header>

The header of a section, typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer>

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<nav>

Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer.

<article>

An independent entry in a blog, magazine, compendium, and so on.

<aside>

An aside indicates content that is tangentially related to the content around it.

Putting it Together

So let’s take a look at how we would put together a typical blog page with our new structural tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Update: It’s been mentioned that this example is a little verbose in markup for the simplicity of the content. I’m aware of this, but wanted to exaggerate for emphasis. For more details on more simplistic content, be sure to check out this comment by jgraham.

As you can see, the tags themselves are much more descriptive than simply providing an id attribute to a div. This also gives the added benefit of a descriptive closing tag, as </article> is much more understandable that wondering which <div id="something"> goes with a given </div>.

So, I can use this now?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the superfluous display:block; can be removed, as it will be included in the browser default styles.

Supporting IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Before we leave this code, there’s one thing to mention about the script tag in HTML5. HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.

Wrapping Up

So we can begin, right now, to structure our documents using the new tags provided in HTML5. With a few simple tricks, they’ll work today, and be compatible in the future. So next time you start a new site, consider going with HTML5, and give your markup a little more defined structure.

Next up, we’ll take a look at some of the other new tags that HTML5 provides, and how they’re used.

• YUI Sightings — MojoPortal: mojoPortal’s author Joe Audette suggests that you “think of mojoPortal as a Starter Kit for Advanced ASP.NET Web Sites and Portals”.  It’s a flexible, attractive CMS that leverages the power of both YUI and jQuery.  An introductory video is available for those interested in learning more about mojoPortal’s capabilities.
  (Original source.)
  
• YUI Sightings — The Photo Stream: Scroll through the news of the day in a rich visual lightbox — and become a contributor or editor while you’re at it.  The Photo Stream is one of many sites exploring what the presentation of news will become as the web gets richer and more interactive.  The site uses several YUI components, including nice animation effects when you scroll the image canvas left or right.
  
• YUI Sightings — Bulgarian Maps Site Map.bg: Map.bg is a mapping site for Bulgaria built by Iliyan Peychev, Atanas Himchev, and Todor Todorov using nearly 20 components in the YUI family.  All of the core and utility components are present, and rich YUI controls like Layout Manager, TreeView, AutoComplete, Button, Panel and Slider play a prominent role here as well.   (Via Stoyan Stefanov.)
  
• YUI Sightings — Do It, Do It, Done! Tasklist Management Site: Glenn wrote in to tell us about his site, Do It, Do It, Done!  Here’s how he describes it: “Finally, a to-do list app with style and flair! We’ve created a simple web-app for making lists - and the YUI library plays a huge role in it! We use it everywhere!  We leverage the YUILoader Utility to bring pieces in as we need them and keep the initial load small!  One of the great things about it was, after our initial development, when testing on older platforms such as IE6, some aspects of our layout got broken, etc., but the YUI stuff all simply worked perfectly.  Thanks a bunch YUI Team! We are now working on our next project - and it’s YUI all the way!”  Thanks for the tip, Glenn, and congrats on the launch. (Original source.)
  
• YUI Sightings — ThrillCall, a New Concert-tracking Site: Reader Jason wrote in with the following “In the Wild” tip: “Hi, I’m a former Yahoo who has been working at the startup ThrillCall (http://ThrillCall.com). I did all of the frontend work and use YUI everywhere on the site. You will notice many of the widgets including Modal, Overlay, Tooltip, Slider, etc. are used throughout the site. I extended the base classes and added additional functionality unique to our site.” ThrillCall looks like a fantastic site for tracking nearby concerts and staying on top of the touring schedules of your favorite artists; thanks for the tip, Jason! (Original source.)
  
• Christian Romney’s Functional Method Collection for YUI: Gabe Moothart has updated Christian Romney’s YUI-Functional method collection, which is up on GitHub.  The collection includes each, collect, inject, indexOf, detect, select, reject, grep, partition, and zip functions. Gabe’s update brings the collection up-to-date for YUI 2.6.0.  Christian has licensed YUI-Functional under a BSD license, matching that of YUI.
• YUI Sightings — Romanian Social Site Joined.ro: Commenter laura wrote in to tell us about Joined.ro, a “Facebook-meets-LinkedIn” site for the Romanian market.  The authors are implementing a variety of YUI building blocks including Animation, Drag&Drop, Buttons, Containers and more.
  (Original source.)
  
• Web Interface for YUI Compressor: refresh-sf.com has put up a web interface for YUI Compressor — this is convenient if you just need to use it periodically and don’t want to download and setup the app yourself.  Check it out here. (Original source.)
• Using YUI Widgets in Dreamweaver CS4: Roman Villarreal of the Adobe Developer center has posted a new tutorial on using Dreamweaver CS4’s support for YUI: “One of the strengths of Dreamweaver CS4 is its extensibility. Yahoo! User interface (YUI) widgets are a set of extensions that you can use in Dreamweaver CS4 to easily add Ajax and JavaScript functionality to a web page. These widgets are supported by the robust Yahoo! User Interface (YUI) framework and well documented (with examples). Using key new features in Dreamweaver CS4, you can easily edit and test the JavaScript and CSS files of these widgets until they fit the design and functionality of your pages. In this article, I show you how to work efficiently with YUI widgets in Dreamweaver CS4, using the Insert panel, Related Files bar, Live view, and Code Navigator.”
  
• YUI Sightings — TwiTree.com: Asvin Balloo of HTMLBlog created a new Twitter app called TwiTree that revisualizes your Twitter followers in a recursive tree structure.  “I am happy to announce the launch of twitree.com,” Asvin writes.  “It’s a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded… The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc… Stay tuned for further information.” (Original source.)
  
• Popular JavaScript Framework Libraries Compared by WebReference.com: Rob Gravelle posted a comparison of three of the major open-source frontend libraries on WebReference.com, looking at YUI, MochiKit, and jQuery.  He takes a much closer look at the libraries than most authors of comparo articles do, so if you’re curious about how Mochi or jQuery differ from YUI this is worth reading.  About YUI, Rob writes: “Perhaps the most impressive part of the YUI Framework is the collection of configurable control/widgets. Not only are they extremely versatile and useable, but they can also be given a cohesive, visual look and feel.”
• “The Best JavaScript Library”: The ongoing debate over which JavaScript/CSS library is “the best” has been an entertaining one. Emad Ibrahim has documented his own process of thinking this question through. “When I started this post, I was pretty certain my final choice will be jQuery.  Then I started playing with Prototype and it looked really good, which kind of opened my eyes to the need to be open minded and objective.  This led to a more objective look at YUI and the conclusion to use YUI.  I was very impressed with YUI’s look&feel, extensive documentation, testing framework and the icing on the cake was the free hosting of the JavaScript libraries.  This was a really tough decision…”  Emad discusses his pros and cons for three major libraries (YUI, Prototype and jQuery) and there is further discussion in the comments section.
• YUI-based Table Striper: Asvin Balloo is back with a new YUI-based helper script for striping the color on table rows.
• How to Use the YUI Compressor: Writes Chris Barr: “Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it won’t obfuscate your code.”  His blog post offers a tutorial on using YUI to compress jQuery. (Original source.)
• Patterns for Widget Development: Brad Harris has a tutorial up on his selfcontained blog treating the subject of widget development patterns for JavaScript: “Recently I’ve been doing some work setting up some standard javascript widgets for a web application I am working on. By widget, I’m referring to items such as javascript date pickers, tooltips, autocomplete inputs, etc. I’m building on top of YUI for this approach, but the principles I’d like to discuss are applicable to any library. YUI provides a fantastic javascript library, and a collection of widgets right out of the box. More than likely, as you add them to your application, you’ll want to wrap or extend them in your own javascript implementations to get them functioning as desired. To accomplish this, I typically have taken one of two approaches, and these are the topic I’d like to cover. To provide a working example, I’ll use a simple wrapper for a YUI Calendar widget that is linked to a text input, and opens by clicking a calendar icon.”  Check out his post for the full deep dive on the subject.
• FireUnit Extension for YUI Test: YUI Test author Nicholas C. Zakas has released an experimental hookup between YUI Test and the new FireUnit Firebug extension on his personal blog: “When I wrote YUI Test, I made sure that the TestRunner object was completely event-driven so that test results could be output in any way that made sense. To prove how easy it is to create your own visualization for YUI Test results, I created a FireUnit extension for YUI Test. The extension is nothing exciting, just a simple JavaScript object that subscribes to the various TestRunner events and then marshals them to the appropriate FireUnit API calls. All you need to do is load the file and include the following line of code: YAHOO.tool.FireUnit.attach();. That’s it! All the results will be output to the Test tab in Firebug. (Original source.)
• Dynamic DOM Search Experiment: Matt Snider has another utility to add to his growing list of YUI extensions — this time, it’s a method for dynamically defining the relationship between nodes. Writes Matt:  “Today’s article illustrates an experimental function that parses a string, containing instructions for searching the DOM relative to a node. This method was inspired by a desire to allow a separate design team to specify the relative location of other DOM nodes. This way, parts of the JavaScript that handle user triggered events (such as ‘click’) need not hardcode relative nodes.  For example, suppose when the user clicks on an anchor, a relative node is made visible and the design team frequently changes the location of that node. An ID could be used, but that doesn’t work as well with dynamically generated content…”  Check out Matt’s blog for source code and further ruminations.
• Enhancing Search Boxes With YUI: Karthik Viswanathan wrote a YUI AutoComplete implementation tutorial on Lateral Code.  Writes Karthik: “earch boxes enable users to find what they need quickly and efficiently. By adding an auto complete (or search assist) effect to these boxes, web designers further aid their users by expressing their site’s content through suggested search terms.”  Check out the full blog post for the tutorial and demo.
• YUI Sightings — Wordcraft, a New, Lightweight Blogging Platform: Brian Moon has created Wordcraft, a new blogging platform aiming for light weight and simplicity.  Brian implemented YUI to drive the admin portion of the platform.  Wordcraft is open source and you can find the source on Google Code. (Original source.)
• Preserving Tab State with TabView and Grails: Writes Keith Cochran:  “I use RichUI for my tabs in a Grails application.  The tabs look good, and it works well, except for one problem.  When you refresh the page, the tab reverts back to the first tab.  So, if you do cool stuff like adding in something with a modal or dialog, and you go back to your page, it reverts back to the first tab.” He took an existing solution using cookies to preserve Tab state and adapted it to Grails; he posted his solution on his blog.  (Note: RichUI, a Grails plugin, draws from several JavaScript libraries; many of the controls, including TabView, are from YUI.) (Original source.)
• Consuming Flickr’s API with YUI’s Get Utility: joedag32.com offer’s up a script to pull in data from the powerful Flickr API using YUI’s Get Utility, obviating the need for a server-side proxy.

Read and post comments | Send to a friend

Read and post comments | Send to a friend

Read and post comments | Send to a friend

Read and post comments | Send to a friend

Read and post comments | Send to a friend