No matter how attractive a site’s design, if it isn’t practical, it’s not doing its job. Design for the screen involves a new set of requirements to deal with and pitfalls to avoid.

Keep graphics files small. Cyberspace has the unique distinction of being the first medium where you can actually bore your readers by being too exciting.

Design for the World Wide Web is a balancing act between the graphic “wow” and the real-time “now.” The more graphically intense a site, the longer it can take to download. The longer it takes, the higher the probability that the visitor will leave before it’s done.

On intranets, smaller file sizes can help make the system run faster with less overhead. Performance means productivity.

While modems are getting faster, most people on the Web are still connected at 28.8–and even then the Web doesn’t always run at top speed.

With a 28.8k connection, your computer can receive, on average, 2K per second.

No one wants to wait even 30 seconds just to see your site logo–if your graphics are too large people will turn them off or jump to another site. If possible, keep all graphics under 20K. Essential graphics for navigation should be less than 10K. You can do this using reduced color palettes, such as a carefully selected 4-bit palette instead of the full 8-bit palette. In some cases this can reduce graphics in half.

For the most efficient files, you must use the right file type. Here’s the simple rule for deciding which format to choose:

• If your graphics have many colors, save them as JPG files.
• If your graphics have few colors, choose GIF.
• When using GIF, try optimized palettes that contain only the colors used—they can cut file sizes in half.

Use only the resolution you need. Computer screen displays have an average resolution of 96 dpi (dots per inch) for Windows, 72 dpi for the Mac. This means your graphics should be saved at a resolution not greater than 96 dpi—otherwise you’re just wasting your readers’ time.

Here are some Web-centric graphic programs that can help reduce your graphics:

Programs to use by themselves:

CorelXara – This exceptional Windows-based illustration program comes complete with everything you need to create the smoothest, yet most efficient, Web graphics and animations. The program is lightning fast, extremely powerful, yet features a clean, simple interface that makes it great for new users, and design power and flexibility that’s great for professionals. Graphic previews of all exports help you create the best-looking, fastest-loading Web graphics. Under $100, Windows only.Macromedia FireWorks -  A professional-strength illustration program designed specifically for web graphics. Special effects let you enhance text and graphics. Previews help you create the most efficient graphics.

Programs to use in conjunction
with other graphics programs:

Adobe ImageStyler and ImageReady – These programs are for professionals who already use graphics programs such as Illustrator or Photoshop. Their Web-specific features include animation and export previews. The interface will be familiar to Adobe users but may be overwhelming to newer users. Windows and Mac.Debabblizer – This comprehensive graphics tool helps you optimize Web graphics, reduce palettes and therefore file sizes, and perform batch conversions to and from countless graphics file formats. Windows and Mac.Ulead SmartSaver – Find the best balance between image quality and size using this utility. Windows only.Autofx Webvise totality – This Photoshop-compatible plug-in lets you preview Web exports so you can create the most efficient files for the Web. Windows and Mac.

Keep text files small. Text files rarely need to be longer than 10K. Instead, they should be broken into logical chunks and linked. If a home page doesn’t load quickly, visitors can lose interest and jump else

where.

Design for easy reading. Don’t trade readability for style. Make your backgrounds as light as possible (white or pastels—just make sure they use “Web-safe” nondithered colors). If you use a background image, keep the action on the side, out of the way of the text, or make it very light, low contrast, and nondithered. Use black backgrounds only on pages with large text, such as headings, then switch to dark text on a light background for pages with “normal” size text.

Because most computer screens are wider than they are tall, and good typography for the best readability demands shorter line lengths (between 30 and 70 characters per line), it makes sense to put navigation on the left (or right) side of the screen. This layout is becoming increasingly popular because it’s practical and allows the site to reserve part of the screen (usually between 150 and 200 pixels) for navigation and identity. Use fixed-width tables to assure that lines don’t get too long—no matter the viewer’s resolution or window-size.

Design for 256 colors (8-bit) and 640×480 resolution. That’s the lowest common-denominator for people with older computers. Many people viewing the Web can only see 256 colors at a time on their computer screen, so creating 24-bit photo-realistic files is usually overkill. Create and view your Web site at 640×480 because that’s the screen resolution many of your readers will use.

That said, this is changing. As more people get newer computers, they can see more colors (thousands to millions) and higher resolution. Current statistics say that only about 11% of site visitors have only 640×480 resolution, and only 8% have only 256 colors. That number is also decreasing by about 1% every three months.

That said, it’s still a good idea to design your entire page for 800×600, but keep the text portion of your site within 640×480. That way you get the best of both worlds. People with older computers will still be able to read your content, even if some parts of the page require scrolling.

Also, as LCD display prices drop, more people will buy them. Many LCD displays can “pivot” to show the screen in portrait mode (more like a normal piece of paper). In that mode, the displays show 768 wide by 1024 tall, so designing for 800 wide is too wide. So still don’t design for 800 wide, design for around 740 wide.

Use “ALT” tags on graphics. ALT text appears before the graphic does, or in place of the graphic for users who have turned graphics off for speed. If you don’t use ALT text, then users may just see a bunch of boxes with no explanation of what they are. This is extremely important, and easy to add. NetObjects Fusion automatically adds the filename of the graphic, but you should still take a moment to make sure the ALT text is truly descriptive. If you’re using a graphic in place of a paragraph or more of text, type the same text into the ALT box—even long blocks of text will appear in the browser so people can read it before the graphic downloads.

Include contact information on every page! Web readers often want or need to contact the people who created and run the Web sites—often to ask you more information about your products or services. It’s important to include your company name, address, e-mail address, and your phone and fax numbers on every page. If you don’t want people calling, include your e-mail and mailing address at the very least.

Why? Because people often save pages to disk, or print them. If you don’t include this information, chances are good they won’t be able to contact you, or find your site again to get that contact information.

Every page should have the site’s main URL included, usually at the end of the page. This helps users return to the page (if they’ve saved it to disk and want to go back to your site later) and it ensures that when the page is printed, readers still know where the page is from.

With a program such as NetObjects Fusion, it’s easy to include this information on every page; simply put it in a single MasterBorder.

Keep your site fresh. Unlike printed matter, a Web site is not a one-time project–it’s an on-going one. Be prepared to update your site, at least once a month, adding new information, discarding anything out-of-date.

Repeat visitors are always desired, so give them something to come back for. Try to include a “hook”: a service or current information tied to your expertise that will bring users back to your site regularly. On my site, we offer EsperFonto, the Web’s only interactive typeface selection system, something people come back to use often.

Your Server may send you statistics showing you which pages were accessed most often–and this will help you focus your site on what your visitors like the best (or tell you if visitors can’t follow your navigation).

Be generous. The Web is no place for skimpy “capsule” information. The more detail you provide, the more of a service you offer, and the more reason you give people to visit your site.

Be backward compatible. Using cutting edge technology can exclude readers. Many if not most users will be at least one generation behind, so don’t shut them out.

Test your site as visitors will see it. Connect to it at 14.4 and 28.8 to see how fast it really is—too many sites are shown-off in-house, directly from the hard disk. This hides performance errors and gives viewers an unrealistic experience.

At 14.4 site visitors will receive as much as 1K per second (that’s a best-case scenario). At 28.8 it can be as much as 2K per second.

See it as your visitors will—and this means viewing your site at several resolutions (640×480, 800×600, 1024×768) and color depths (256, 16-bit, 24-bit), on several browsers (Netscape 2 and later, Microsoft Internet Explorer 2 and later) and OS’s (Windows, Mac). While no site looks identical on all monitors, browsers, and computers, you can design sites that look good on all—but only if you test the site on all. For more testing tips, see Testing, 1, 2,3

Related posts

• The Big CSS3 Validation Debate (2)
• 960 Gridder: Easy to use layout design tool (0)
• 6 New Web Technologies of 2009 You Need to Use Now (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• My Own Developer Launching! (3)

Ajax programming techniques have recently generated lots of buzz for good reason: they can be used to create interesting browser-based applications that do things many thought impossible with typical web browsers (in particular, a certain Ajax technique can send and receive data to and from a server without requiring the browser to refresh or reload).

Following are my picks for the 10 best Ajax applications. Selection criteria: (1) an appropriate combination of simplicity and rich functionality, (2) somehow compelling (hard to define, but I know it when I see it), (3) the more interactive, the better, and (4) free. Also, in this exercise, I’m focused on startups, so I’m not including anything from Google (maps, Suggest), Microsoft (Kahuna), or Yahoo (Flickr).

1. Kiko. A general purpose online calendar. Elegant interface and design. API coming soon.

2. Backbase’s RSS Reader. Only a demo, so you can’t add your own feeds. Still, very nice.

3. Backpack. To do list organizer and simple project management application. Includes email and mobile reminders.

4. Writely. Online word processor. A bit rough around the edges (you can’t save in MSF T Word format, for example) but still feels like a real application. Update: per Sam Schillace @ Writely, you can export in Word format (ed: sorry for missing this). Also, API and blog publishing features coming soon.

5. Amazon Zuggest. Francis Shanahan’s version of Google Suggest–but for Amazon.

6. TimeTracker. Personal time management tool.

7. Del.icio.us Director. Rich UI for managing your del.icio.us links.

8. Backbase’s Information Portal. A highly interactive aggregation page.

9. Protopage. Another twist on an information portal.

10. Periodic Table of the Elements. The next must-have for high school chemistry students?

Honorable mention goes to:

1. Clearnova’s Ajax Examples page. Examples of various techniques, including full JavaScript.

2. Rico’s JavaScript Example page. More examples.

3. BackBase’s Ajax Example Page. Still more examples.

4. Realtime HTML editor.

5. Ajax IM. A browser-based IM client.

6. Endoxon’s map of Switzerland.

7. TaDaLists. Another to do list manager from Basecamp.

8. Primal Grasp’s Spell Check demo.

If you’re interested in more, check out TechCruch (they do a great job covering Web 2.0, in general), Ajaxian.com, and Read/Write Web (including a related discussion of “Web 2.0 Office).

Any others that should be on the list?

Update (9/10/05): Thanks to all who posted or emailed comments. I’ll be have a follow up next week highlighting another crop of Ajax apps. Some are in stealth mode, though, so I’m waiting for permission before writing about them. Check back later for more (and feel free to email with ideas).

Update (9/16/05): see my followup with more interesting Ajax applications here.

Related posts

• 45+ New jQuery Techniques For Good User Experience (3)
• Do’s and Dont’s in web site building (0)
• 6 New Web Technologies of 2009 You Need to Use Now (1)

JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax.

To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last.

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

• jQuery and JavaScript Coding: Examples and Best Practices
• 75 (Really) Useful JavaScript Techniques
• 80+ AJAX-Solutions For Professional Coding
• 60 More AJAX- and Javascript Solutions For Professional Coding

Dynamic Content

1. Build A Login Form With jQuery
In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

2. Spoiler Revealer with jQuery
A simple technique that hides some content first and fades it in once a link is clicked.

3. AJAX Upload
This AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.

4. FCBKcomplete
Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

5. Create Accessible Charts Using Canvas and jQuery
This tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.

Form Manipulation

6. Radio Button and Check Box Replacement
This jQuery tool replaces radio buttons and check boxes with a more appealing display.

7. Submit a Form without a Page Refresh

8. jQuery AJAX Contact Form
Here is a quick and easy way to make a jQuery AJAX contact form with a “honeypot” to foil email bots, load success and error messages dynamically without leaving the page and provide descriptive error messages detailing why submitted values have failed validation.

9. Simple jQuery Form Validation
This jQuery form shows live form-input validators both server-side and browser-side.

Navigation Menus

10. jQuery Context Menu
A context menu plug-in for jQuery that features easy implementation, keyboard shortcuts, CSS styling and control methods.

11. Kwicks for jQuery
Kwicks for jQuery started off as a port of the incredibly attractive MooTools framework, but has evolved into a highly customizable and versatile widget.

12. jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

13. jQuery File Tree
The jQuery File Tree is a configurable AJAX file-browser plug-in for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

14. How to Create a MooTools Home Page-Inspired Navigation Effect
In this tutorial, you’ll recreate the same effect seen in MooTools’s menu, but in jQuery!

15. CSS Sprites2
This tutorial demonstrates how to implement inline CSS Sprites2 using jQuery.

Manipulating Content

16. jQuery books widget
With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

17. Text Size Slider
This tutorial explains how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site.

18. Pagination
Create navigational elements: when you have a large number of items, you can group them into pages and present navigational elements that allow users to move from one page to another.

19. Coda-Slider
As with the last tool, groups items together using navigational elements that allow users to move from one page to another.

20. Creating a Slick Auto-Playing Featured-Content Slider
If you love the Coda-Slider plug-in for jQuery, then you will find this plug-in very useful for displaying lots of content in a small area. This nice plug-in adds some features not found in the original Coda-Slider, such as slowly cycling through panels, auto-playing different types of custom content. An arrow indicator serves as a visual indication of which panel you are currently viewing.

• Demo can be found here.
• Download files here.

21. haccordion
A simple horizontal accordion plug-in for jQuery.

Tabular Data and Grids

22. Table Row Checkbox Toggle
This tool generically adds a toggle function to any table row you specify based on a CSS class name. It will, by default, toggle on any check boxes within that table row.

23. Tablesorter
Tablesorter is a jQuery plug-in that turns a standard HTML table with <th> and <td> tags into a sortable table without the need for page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data, in a cell.

24. TableEditor
TableEditor provides flexible in-place editing of HTML tables. User-defined handler functions can easily be dropped in to update, for example, a data source via an AJAX request.

25. Scrollable HTML Table
This JavaScript code can be used to convert ordinary HTML tables into scrollable ones.

Lightbox Techniques

26. Revealing Photo Slider
Learn how to create a thumbnail photo gallery, where clicking a button reveals the entire photo and more information about that photo.

27. FancyBox
FancyBox was born to automatically scale large images to fit in windows, adding a nice drop-shadow under the zoomed item. It can be used to group related items and add navigation between them (using a pre-loading function). FancyBox is totally customizable through settings and CSS.

28. Facebox Image and Content Viewer
Facebox is a lightweight Facebook-style Lightbox that can display images, divs, and even entirely remote pages (via AJAX) inline on a page and on demand. It uses the compact jQuery library as its engine, unlike Lightbox v2.0, which uses Prototype.

29. jQuery.popeye
jQuery.popeye is a plug-in that transforms an unordered list of images into a simple image gallery. When an image is clicked, it enlarges Lightbox-style. The images are displayed in a box with “Previous” and “Next” controls, and information about the images can be included.

Image Galleries and Viewers

30. Simple Controls Gallery
Simple Controls Gallery rotates and displays each image by fading it into view over the previous one, with navigation controls that pop up when the mouse hovers over the gallery. The controls allow the user to play, pause or jump to a specific image in the gallery.

31. Agile Carousel
This jQuery plug-in allows you to easily create a custom carousel. Use the jQuery UI to enable many different types of transition. The plug-in uses PHP to call images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Browser Tweaks

32. Setting Equal Heights with jQuery
A script to equalize the heights of boxes within the same container and create a tidy grid.

33. jQuery IE6 PNG Transparency Fix
Another IE6 PNG fix that uses jQuery selectors to automatically fix all PNG images on a page.

34. BGI frame
This tool helps ease the pain of dealing with IE z-index issues. You can find a demo here.

35. Fix Overflow
IE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue.

36. Lazy Load
Lazy Load delays the loading of images below the fold on long pages. As the user scrolls down, the images are loaded as needed. Check out the demo here.

37. Maxlength
It’s a fairly common design practice to limit the number of characters a user can input in a field while giving feedback on how many spaces are left. This plug-in automates that task.

Animation Effects

38. Scrollable
Scrollable is a flexible and lightweight (3.9 KB) jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML, such as text, images, forms, video or any combination of them. You can make items scroll horizontally or vertically and decide how many items are visible at once.

39. jQuery Fading Menu – Replacing Content
“Instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.”

40. Build an Animated Cartoon Robot with jQuery
This effect simulates a faux 3-D animated background reminiscent of old-school side-scrolling video games (and not unlike the parallax effect). This effect is created by layering several empty divs over each other, with transparent PNGs as background images. The backgrounds are animated at different speeds using jQuery.

41. Flip
Flip is a plug-in for jQuery that “flips” page elements in four directions. Compatible with Firefox 2+, Internet Explorer 6+, Safari 3.1 (for Windows) and Google Chrome.

• Download files here.

42. Use jQuery for Background Image Animations
Animate your menu whenever a user hovers over an item with this effect.

Image Manipulation

43. Jcrop
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

44. jQZoom
JQZoom is a JavaScript image magnifier that makes it really easy to magnify what you want. It is easy to customize and works on all modern browsers.

Miscellaneous

45. Date Range Picker
A rich date-range widget that uses the jQuery UI’s date picker and some additional custom interaction.

46. Sortable Lists
Unordered lists are commonly used to structure a website’s navigation. Having the ability to re-order such lists would be extremely useful. Here is a method to easily save and reload the list element order without getting lost as the page is refreshed.

47. Amazing Music Player Using Mouse Gestures and Hotkeys
Learn how to create an amazing music player, coded in XHTML and jQuery, that makes use of mouse gestures and hotkeys. You can click and drag the mouse to interact with the music player’s interface or use directional keys and the space bar instead of the mouse.

48. Script for Tracking Outbound Links in Google Analytics with jQuery
This code snippet uses Google Analytics and jQuery to automatically track outbound links. This interesting script enhances behavior by comparing the link’s domain to the current page’s domain and, if they are different, triggering the behavior. This is helpful when using a CMS or other tool that generates full URLs, including the “http://,” instead of relative ones.

<script type="text/javascript">
	$('#content a:not(.popupwindow)').filter(function() {
		var theHref = this;
		if (theHref.hostname && theHref.hostname !== location.hostname) {
			$(theHref).not(".noAutoIcon").addClass("offSite");
			$(theHref).not(".noAutoLink").attr('target','_blank').bind('click keypress', function(event) {
				var code=event.charCode || event.keyCode;
				if (!code || (code && code == 13)) {
					if(pageTracker){
						var fixedLink = this.href;
						fixedLink = fixedLink.replace(/https?:\/\/(.*)/,"$1");
						fixedLink = '/outgoing/'   fixedLink;
						pageTracker._trackPageview(fixedLink);
					};
				};
			});
		};
	});
</script>

49. jGrowl
jGrowl is a jQuery plug-in that delivers unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

Related posts

• 6 New Web Technologies of 2009 You Need to Use Now (1)
• Top 10 AJAX Applications (0)
• The Beauty of CSS (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• Do’s and Dont’s in web site building (0)

(UPDATE) 26 domestic flights canceled as Manila braces for ‘Pepeng’

(Updated 6:30 pm) Twenty-six flights were canceled Friday as airlines braced for typhoon Pepeng, which continued to gain strength as it roared towards Northern Luzon.

The Manila International Airport Authority said Cebu Pacific canceled twelve flights, Philippine Airlines canceled eight flights, while Zest Air canceled four of its scheduled flights Friday, including return flights.

Four of the canceled trips are flights originating from the Centennial Terminal 2 of the Ninoy Aquino International Airport (NAIA), 16 flights from the NAIA Terminal 3, and six flights from the Manila Domestic Airport.

Below is a list of canceled flights as of Friday afternoon:

Related posts

• No related posts.

Every year, we see scores of innovations trickle onto the web — everything from new browser features to cool web apps to entire programming languages. Some of these concepts just make us smile, then we move on. Some completely blow our minds with their utility and ingenuity — and become must-haves.

For this list, we’ve compiled the most truly life-altering nuggets of brilliance to hit center stage in 2008: the ideas, products and enhancements to the web experience so huge that they make us wonder how we got along without them.

Nitpickers will notice that a couple of these technologies arrived two or three years ago. Others aren’t even fully baked yet. But each innovation on our list reached a level of maturity, hit the point of critical mass, or stepped in to fill a burning need during 2008 that resulted in it significantly changing the landscape of the web.

Here’s to the technologies currently making the web a better place than it was 12 months ago.

Identity Management

Few things carry more value than your digital identity, and yet most web users have only a tenuous grasp of it. That’s because on the social web, identity is no longer just who you are. It’s who you know, how you know them and how much you want them to know about you. On the web, your identity is explicitly tied to your relationships, both with your friends and with the websites you visit.

Three great technologies came to fruition this year to help you manage these complex interdependencies: OpenID, Google Friend Connect and Facebook Connect.

These ID systems all offer a way to take control of your social capital, that cache of “friend data” you carry with you as you sign up for and use different web services. They also all offer a more tangible advantage — an easy way to log in to any website using one set of credentials. You get one virtual ID card that gives you access to hundreds of websites. As a bonus, you don’t have to go through the painful process of filling out a profile and adding or approving friends on every new blog, community or social network you want to join.

The end of 2008 saw a flurry of activity around identity. Facebook Connect, which currently lets you log in to a few dozen high-profile websites using your Facebook ID, went live the first week of December. Google’s Friend Connect and MySpace’s MySpaceID, similar systems that aren’t yet as widely adopted, launched soon after it.

There’s a hitch, though. Facebook Connect, while elegant and easy to use, is built on proprietary code and isn’t compatible with the offerings from Google and MySpace, which are built using OpenID and other open source standards.

We should expect this battle for your personal data play out over the next year, maybe longer. But 2008 will be remembered as the year that identity stepped into the spotlight.

HTML 5

One of the most important technologies on this list doesn’t fully exist yet — HTML 5 — but in 2008, key features started to trickle out.

HTML 5 will eventually replace HTML 4.01, the dominant programming language currently used to build web pages. But the governing bodies in charge of the web are still drafting the details, and nobody expects HTML 5 to fully emerge as the new standard for at least a few more years.

But HTML 5 is no vaporware. Many of the changes to the way the web operates as outlined in early versions of the new specification are already being implemented in the latest browsers, and some of the web’s more adventurous site builders are already incorporating HTML 5’s magic into their pages.

HTML 5 will be great step forward, standardizing things like dragging and dropping elements on web pages, in-line editing of text and images on sites and new ways of drawing animations. There’s also support for audio and video playback without plug-ins, a boon for usability and a worrisome sign for Adobe’s Flash, Microsoft’s Silverlight and Apple’s QuickTime. The language will also give a boost to web apps, as there are new controls for storing web data offline on your local machine.

Want Gmail on your desktop? HTML 5 makes it possible. Alas, the blink tag isn’t invited to the party.

Lifestreaming

A new breed of social app has arisen to help us manage the mess of information overload — the lifestream.

Not long ago, keeping track of your friends on the internet was pretty easy. Everyone belonged to Friendster or MySpace and that was it. Now, the web is littered with thousands of social sites, each with its own special purpose — Flickr for photos, Last.fm for music, Twitter for tweeting. Even the most rudimentary services are tied to the social web. Renting a movie, buying a book or writing a blog post? Let all your friends on Netflix, Amazon and Blogger know about it.

Keeping tabs on your friends now is all too easy and all too much, all at once.

Sites like FriendFeed, Plaxo Pulse and Digsby serve as social-network-activity aggregators. They’re like virtual funnels. Dump in all the notifications, feeds and updates from your various networks, and the services will bring it all into one master stream, relieving you of the responsibility of visiting a dozen or more sites to learn what your friends are up to, what they’re listening to, who they’re snogging and so on. Controls let you dial back the flow by sorting and filtering the flow, pruning it down to only what matters most.

Many such services have emerged, but FriendFeed, an elegant and simple site designed by a crew of ex-Googlers, is our favorite.

Oh, and don’t expect to be able to add Facebook to your lifestream. The network lets all sorts of data in, but precious little out.

Firefox 3

Firefox has been around since 2004, but when version 3 of Mozilla’s browser arrived in June 2008, it got everything right. Mozilla’s browser is faster and more secure than ever before, and it’s open source, so you get the feel-good factor, too.

One of the most highly anticipated software releases of the year, more than 8 million people downloaded Firefox 3 on the first day. Third time’s a charm, indeed.

The genius bit of engineering was bringing search front and center — just type what you’re looking for in the location bar, and FF3 searches your history, bookmarks and the web to bring you the page you want, lightning fast.

Performance enhancements made it one of the web’s fastest browsers — especially for surfing the recent swell of web apps — and improved security features made it one of the safest.

Mozilla continues to build upon the concept with its Ubiquity add-on for Firefox, which lets you search and interact with any number of web services by typing text commands into the browser.

It’s still the second-most-popular browser after Microsoft Internet Explorer by a wide margin, but Firefox 3 is the feisty favorite of the web’s elite.

Google Chrome

Its debut release in September was not expected, nor was it greeted with as much fanfare as the arrival of Firefox 3 a few months prior. But Google’s browser was instantly recognized as a potential game-changer, both among browser-makers and within the world of web apps.

Chrome is a browser built to empower web applications.

Its killer feature is a new approach to page rendering that isolates web applications inside each of the browser’s tabs — a crashing web app might cause a single tab to go south, but that won’t affect anything outside that tab. The rest of the browser remains stable.

When you’re doing mission-critical work in a web app and the browser crashes, it isn’t an annoyance, it’s a deal breaker. E-mails are lost, documents have to be rewritten, web forms need to be filled out again. Chrome’s ability to sidestep a full crash strengthens Google’s bid to replace desktop apps with its own web-based alternatives.

Chrome reached official 1.0 status in December. It’s Windows-only for now, but we should expect official versions for Mac and Linux soon. It’s also still very young. Future releases will have support for add-ons, offline syncing of web data through Google Desktop and — knowing Google — probably a few other bells and whistles nobody’s thought of yet.

Location Awareness

In 2008, location-based information ceased being a fancy add-on and instead became a requirement of any serious, successful web service.

Hit a button on your laptop or phone to tell a web service where you are, and it tells you what restaurants are close by, where the new Bond movie is playing (and when, and if there are tickets left), and which of your friends are within shouting distance if you need a date.

The tipping point arguably came when a wave of GPS-equipped mobile web devices hit the market. The iPhone 3G, the T-Mobile G1 and the latest Nokia N-series devices all have GPS built in. They also all have real web browsers and the tools necessary for access to web APIs, opening the door to more-relevant search and localized mobile services.

On the iPhone, you can use Yelp’s app to get a list of nearby venues, restaurants and hangouts with the touch of a button. Or, in the case of Google’s local-search app, you can simply speak your request and get local results. An app like Say Where queries multiple search sites.

The benefits aren’t limited to mobiles, either. Social networking sites and desktop search apps can take advantage of new technologies like Yahoo’s FireEagle, where users can update and store their location data, or browser plug-ins like Google Gears or Firefox’s Geode, which users can set up to report their location automatically.

Whether they’re using a desktop browser or an iPhone, users now demand the high levels of relevance and convenience on the web that location awareness affords.

The World Wide Web Consortium, the web’s governing body, has stepped up and formed a think tank to develop a set of standards for handling users’ geodata that ensures privacy and interoperability. The W3C Geolocation Working Group hopes to have its first recommendation filed by the end of 2009.

Source: http://www.wired.com/software/webservices/news/2008/12/YE8_web?currentPage=all

Related posts

• 960 Gridder: Easy to use layout design tool (0)
• The Beauty of CSS (1)
• PHP $_SERVER variables are not safe for use in forms, links (1)
• Do’s and Dont’s in web site building (0)
• 45+ New jQuery Techniques For Good User Experience (3)

You can choose 1 from each of the payment options provided. We only support paypal as of the moment, but rest assured we are doing everything we can to provide you with the highest security.

Related posts

• No related posts.

Personal portfolio site will be launched this October 2, 2009.

I am pleased to say that for the last 12 months I have been trying hard to finish this site converting it into a melting pot of ideas and concepts. Everyday is an excruciating experience when I look at the site and see white screen cripple over it. But with a hand full of inspiration coming from my family, I was able to subdue barrens of sleepless nights and restless days just to come up with a final realization. I am proud to announce that MOD (My Own Developer) my personal portfolio and blog site is now official open!

Related posts

• PHP $_SERVER variables are not safe for use in forms, links (1)
• Do’s and Dont’s in web site building (0)
• 960 Gridder: Easy to use layout design tool (0)