How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Facebook-Web-Design — Thu, 21 Jan 2010 03:40:13 +0000

HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

Tutorial Details

Technology: HTML
Version: 5
Difficulty: Intermediate
Estimated Completion Time: 1 hour

Prefer a Video Tutorial?

Quick Overview of HTML 5 Elements

The HTML 5 Working Draft provides a new set of semantically-meaningful
elements for describing a typical web page layout. Using elements that are “meaningful” (i.e. describe the content they contain)
makes it easier for you to read and organize your code, and makes it easier for search engines and screen readers to read and
organize your content.

The HTML 5 elements we’ll be using are:

header
footer
nav
article
hgroup

Just by reading the names of the elements, you should get a pretty good idea of what they’re for, and that’s the point!
You can now stop abusing

in all your tableless designs, and instead make headers out of “

”s and
footers out of “

”s.

The one element that may not be obvious is

. This element simply defines a group of header elements (

–

) so you can group a blog post title and subtitle together, for example. Think of it as not the header of the page,
but the header of the content section.

Step 1: The HTML

We’re going to recreate the most common layout on the Web, the 2-column layout:

This layout is usually put together with a waterfall of

elements (or, shudder, a ), but with HTML 5
you can code this page quite naturally.

	
	

	
		
		    <!-- Your Title -->

And to round it out, within the “main” element, I’m going to add some simple post templates:

	
		
			Title
			Subtitle

Now we have an entire layout skeleton in HTML that uses nothing but meaningful tags for all the content. Easy to read,
easy to parse, easy to design for.

Some savvier readers may ask “why didn’t you use

instead of a

for the main column? Wouldn’t that
be more “meaningful?” You certainly could, and it would be “valid,” but the

element isn’t meant for this
sort of layout function. From the spec:

The section element is not a generic container element. When an element is needed for styling purposes or
as a convenience for scripting, authors are encouraged to use the
element instead. A general rule is that
the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

Step 2: The CSS

Positioning these elements would be easy if they were all

s — we know how they are handled by every browser, so
we know how to write CSS to them. However, this is only the case because every browser applies a default stylesheet to a page.
Even if you haven’t specified one, there is CSS at work every time a page you’ve written gets loaded into Firefox or IE.

For example, here’s the styling applied to a

in the default “html.css” file that comes with Firefox:

	html, div, map, dt, isindex, form {
		display: block;
	}

But what happens when a browser comes across an element that it doesn’t recognize? We can’t be sure. It might get no styling,
it might inherit a some default styling, it might not be displayed at all. Therefore, we make sure that we account for any and
all styling of our new elements in our own CSS. No assumptions.

	/* Make HTML 5 elements display block-level for consistent styling */
	header, nav, article, footer, address {
		display: block;
	}

Now we can treat these elements just like

s, assured they are displayed consistently.

The Problem

Let’s take a look at our layout so far. I’ve put together a more fleshed out version of this code and tested it in
a few browsers. Check out our layout in Safari 4:

However, look at what happens in Internet Explorer 6:

What’s wrong with this picture? By explicitly setting display: block; in CSS, we should have
communicated to the browser our intentions for that element.

Unfortunately, IE is ignoring elements it doesn’t recognize, regardless of CSS. Our content is left floating in its
parent’s container, as if the HTML 5 elements didn’t exist. Somehow, we need to get IE to render unknown elements,
and styling them appropriately isn’t going to do it.

Step 3: The JavaScript

Luckily, there is a way to get IE to recognize new elements via some simple JavaScript.

I first read about this technique on John Resig’s blog; he’s called it
the “HTML 5 Shiv.”

It simply involves calling document.createElement() for every new, unrecognized element.

Traditionally you’d make this call in order to inject an element directly into some branch of the DOM; in other words,
into an existing container within the tag. You can do that to fix this unknown element issue as well. However,
this trick also works by calling document.createElement() in the tag, with no refence to a containing element!
That makes it much easier to read and write:

	document.createElement("article");
	document.createElement("footer");
	document.createElement("header");
	document.createElement("hgroup");
	document.createElement("nav");

To make things even more convenient, Remy Sharp has released an
“HTML 5 Enabling Script,” which does the same thing as
our code above, but for all HTML 5 elements.

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as
, is to use the HTML5 shiv, I’ve quickly put together a mini script that enables all the new elements…

-Remy Sharp

Now that we’ve added our JavaScript, let’s look at that again in Internet Explorer, with our new JS code:

Perfect. Internet Explorer 6 is now rendering HTML 5 code just as well as Safari 4.

Conclusion

HTML 5 is exciting for any web designer who wants to create clean, easy-to-read, semantically-meaningful code. And with just a
couple of simple steps — one line of CSS and one line of JS per element — we can start making use of HTML 5 today.

Got any more tips for squeezing every bit of HTML 5 you can into your production code? Let us know in the comments!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Go to Source

YouTube begins HTML5 rollout

Facebook-Web-Design — Thu, 21 Jan 2010 03:39:07 +0000

YouTube has begun rolling out support for HTML5 video, a spec that will let users view YouTube videos in most modern day browsers without Adobe’s Flash.

Originally posted at Web Crawler

Go to Source

14 Helpful Cheat Sheets for Front-end Web Development

Facebook-Web-Design — Tue, 19 Jan 2010 14:44:20 +0000

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

HTML

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

(X)HTML Elements and Attributes

HTML Cheat Sheet

HTML5 Canvas Cheat Sheet

CSS

CSS Level 2 Visual Cheat Sheet

CSS 3 Cheat Sheet

CSS Cheat Sheet (V2)

CSS Cheat Sheet

JavaScript

jQuery 1.4 API Cheat Sheet

jQuery 1.4 Cheat Sheet

mootools 1.2 cheat sheet

JavaScript Cheat Sheet

Go to Source

Emerging Techniques Every Web Developer Should Know

Facebook-Web-Design — Tue, 19 Jan 2010 10:44:31 +0000

The Web is evolving fast: new features, formats, user needs, continuously change the way we interact with websites. In this post I want to suggest you some interesting emerging techniques every web developer should know in order to build modern web applications.

HTML 5 Offline Application

The HTML 5 specification introduces a lot of new features that radically improve the way users interact with websites and web applications. With HTML 5 developers can build easily offline web applications by using a SQL database API and an offline application caching API for storing data locally (by using a client-side SQL database) and allowing applications are available even when users are offline. This technique use a .manifest file and JavaScript to get an update of the cached files when is not available a connection to the server.

You can enable offline application caching by using the manifest attribute on the html tag:

You have to create a .manifest file that specifies which files are to be cached offline. Here is a typical structure of a manifest file:

CACHE MANIFEST
index.html
about.html
style.css
logo.png
...

NETWORK:
server.cgi

According to the W3C Working Group Note about Offline Web Applications topic, server.cgi should never be cached in order to continuously get updates from the server.

Apple Developer Connection provides a full detailed, step-by-step guide to help you learning how to buit modern offline web applications. You can read the full guide here.

oEmbed

oEmbed is basically an open format for allowing an embedded representation of a URL on webpages. Facebook probably has one of the most popular implementation of oEmbed API. For example, when you copy a link from YouTube, Vimeo, Flickr, into your status bar, Facebook converts this link into a movie or image embedded on your profile.

Previously on Woork Up I wrote this interesting post “Learning oEmbed: Convert Links Into Embedded Content” where I explained how to use oEmbed API to implement a Facebook-like link-to-embedded-content feature. The tutorial is really simple, easy to customize and reuse on your projects. A working example is also available.

HTML 5 contentEditable

The HTML 5 contentditable attribute allows to make editable the content within a HTML element with the contenteditable state set to “true”. This attribute is useful for example for easily developing edit in-place features or advanced rich text editors without using third party resources. All major browsers (IE, Firefox, Safari, Chrome) implement this attribute and here is a sample usage:

...

You can use document.execCommand to add some basic features to your custom editor simply adding this code in the head tag of your webpage:

This is the result:

Try to change the code within this layer

Here is an example of button to format the selected text:

The previous code is only an example. I suggest you to use unobtrusive approach for separating HTML structure from JavaScript code (in this case the onclick event).

OAuth

oAuth is an open protocol that implements an authorization model for allowing websites and web applications to publish and access data stored in third party websites without sharing user login information. Yahoo! Developer Network provides an interesting and detailed tutorial that illustrates how to create an OAuth application for accessing Yahoo! services.

If you want to implement OAuth protocol on your application also take a look at the following links:

Implement OAuth for Google
Implement OAuth for Twitter
Implement OAuth for Yahoo

Go to Source

40 Valuable Tools and Resources For Web Designers

Facebook-Web-Design — Tue, 19 Jan 2010 02:17:01 +0000

Web development can be tricky and time-consuming. To be more effective and productive, we, designers and developers, can integrate useful tools in our daily routine. Also, handy resources can be very valuable as they can help us enhance communication with clients and other developers as well as improve the quality of our work. We are permanently looking for new tools, techniques, resources and services that can improve your workflow and increase your productivity.

In this post we present a couple of extremely useful and valuable tools and resources that we found over the last months. Please make sure to follow us on Twitter for a stream of useful resources, tools and design-related articles.

Getting Inspired: Interesting Redesign Projects

Boarding Pass / Fail
A boarding pass redesign project by Tyler Thompson, the Creative Director at Squarespace. How would you design a boarding pass? The result is very impressive.

You’re killing me, Zappos
Andrew Wilkinson’s attempt to redesign Zappos.

Dollar ReDe$ign Project
An attempt to rebrand the US Dollar, rebuild financial confidence and revive our failing economy. Created by Richard Smith.

Useful Front-End and Back-End Tools

ie-css3.js
CSS3 pseudo selector emulation for Internet Explorer 5-8. ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE. An alternative is Offspring.js.

CorMVC
CorMVC is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.

Typograph
A typographic tool that generates CSS for beautiful web typography, according to traditional scale and vertical rhythm.

Venkman JavaScript Debugger project page
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

JavaScript Frameworks Playground: jsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks.

jslib
Mozilla gives a great flexibility and power to Javascript. This popular client side scripting language can be used to create application level logic and services for cross platform application development.
Goal: jslib has a simple goal, “Make life easier for Mozilla Application Development by creating logical, easy to use API’s for general purpose routines that lend themselves to living in library code.”

PHP debug tools
A set of useful PHP debugging tools for debugging script trace, errors and database queries.

The Automatic CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications. Tired of using BBCode due to the current landscape of deficient or insecure HTML filters? Have a WYSIWYG editor but never been able to use it? Looking for high-quality, standards-compliant, open-source components for that application you’re building? HTML Purifier is for you!

InAppSettingsKit
InAppSettingsKit is an open source solution to to easily add in-app settings to your iPhone apps. It uses a hybrid approach by maintaining the Settings.app pane. So the user has the choice where to change the settings.

Dabr
Dabr is a PHP web interface to the Twitter API for mobile devices.

SproutCore
SproutCore: JavaScript HTML5 Application Framework

Your Bookmarklets, On Steroids
Quix is an extensible bookmarklet, that allows you to easily access all your bookmarks and bookmarklets, across all your browsers, while maintaining them in only one spot. All you have to do is remember the shortcut for the bookmarklet, so, basically, it’s like a command line for your browser.

IxEdit
IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

minibuilder
Flash MiniBuilder is a lightweight IDE created for developing programs written in ActionScript 3.

Real-time HTML Editor
Type HTML in the textarea above, and it will magically appear in the frame below.

Unicode code converter v7.0.1
Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.

Detect Mobile Browser
Open source mobile phone detection script.

Show {if}
A script for a better targeting of site visitors.

typeQuery
typeQuery, change website typography with jQuery.

Gipetto’s wordpress.tmbundle
A WordPress focused TextMate bundle to rule all WordPress Textmate bundles.

Graudit
Graudit is a simple script and signature sets that allows you to find potential security flaws in source code using the GNU utility grep. It’s comparable to other static analysis applications like RATS, SWAAT and flaw-finder while keeping the technical requirements to a minimum and being very flexible.

WordPress Plugin Maker
This plugin is made for developers or WordPress users who love Cut and Paste and hate FTP . If you have ever been in a pinch where you wanted to create a quick WordPress plugin to do something but didn’t have FTP info or weren’t at your terminal you can use this plugin to be a life saver.

Web development and deployment tools
Free online-based IDE for professional web-development.

Create diagrams online Real time collaboration
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

UKI – Simple UI Kit for complex web apps
Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane.

snap{css}: an open-source CSS editor for Windows
snap{css} is an extremely light-weight, notepad-like application that allows css designers to easily edit their code in a familiar environment while having quick acccess to helpful features such as our beautify and collapse functions.

jQuery Browser Plugin
A jQuery plugin extending browser detection capabilities.

jsPDF
jsPDF generates PDF documents using pure JavaScript

Grid System Generator
Grid System Generator includes generated grids, tutorials and resources.

User Agent Switcher Firefox Extension
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of the browser. It is designed for Firefox, Flock, Seamonkey and Songbird, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Useful Resources For Web Developers

ASCII Table – The Pronunciation Guide
The ASCII Symbols Pronunciation Guide

Five Awesome On-Screen Rulers
They’re not the sexiest programs in the world, but for many designers, on-screen rulers are must-haves. Here are five of the best- including the one I can’t live without. All free.

Using HTML Symbol Entities

Editorial Style Guides
This page provides a list of resources available for the web designer or developer who needs to create an editorial style guide for writing web site copy.

Open standards Web design with CSS, XHTML, Java servlets and Javascript
Code Style answers key questions for Web developers. Which Web fonts are most common? How to use media dependent style sheets? Make more robust, accessible Websites with open standards technology.

20+ Must have documents for Designers and Developers
In this post, you would find a list of over 20 free PDF files covering aspects of Web Development as well as Graphic design. These include cheat sheet for web developers, client questionnaires for Graphic and Web design, helpful checklists as well as some useful resources for designers and developers. All of these are available in PDF format as they are easy to print. I have a number of them hanging around in my work area and find them quite useful. It would be great if you have any helpful documents to share.

45 Incredibly Useful Web Design Checklists and Questionnaires
45 checklists to make your design process easier and more organized. Consider using these checklists as a jumping off point for creating your own customized list, based on your own needs.

PowerPoint Search Engine with detailed thumbnail results
SlideFinder: a search engine for slides and presentations.

Web Development for the iPhone: HTML & CSS Support
Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari supports some HTML5 elements, even though the HTML5 specifications have not been finalized.

GrepDocs.com – all your docs are belong to us – PHP, Perl, CSS, HTML, Java, JavaScript, MySQL, Ruby, Python, and more
GrepDocs: a search engine for programming documentation

Last Click (= a bit of fun)

ASCII Fire Animation with JavaScript
This is when JavaScript is abused: ASCII Fire with JavaScript.

256b.htm (D)HTML Competition
256b.htm Competition: create a website in just 256 bytes

Browser Pong
This is definitely the best use of pop-ups for a long time. If you haven’t seen this, you must see it. It will make your day. Press “P’ for start.

Go to Source

Gordon: Flash Runtime Implemented in Javascript

Facebook-Web-Design — Thu, 14 Jan 2010 02:21:27 +0000

This was quite a surprise! Tobias Schneider has built a Flash runtime that works right in the browser. It’s implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and hosted on GitHub.

See Gordon in action (demos hosted by Paul Irish).

It works like a charm in recent versions of Firefox, Chrome, and Safari (and, yes, iPhone Safari, though the “blue” demo runs at tedious pace on my 3G). To install it yourself, use “git clone git://github.com/tobeytailor/gordon.git”. I found the demos don’t work from a file:/// URI due to the script dependency system, so point your web server at the root and point your browser at demos/.

There’s not yet any docs, so it’s not clear how broadly compatible Gordon is or where it’s headed. But if nothing else, it makes a bold statement about the maturity of open web technologies.

PLAIN TEXT

HTML:

onload=“new Gordon.Movie(‘trip.swf’, {id: ‘stage’, width: 500, height: 400})”>
id=“stage”>

(Update: After much twitter love, someone finally figured out the name. How did we miss it?!!)

Go to Source

HTML5 And Javascript Audio Interface: JAI

Facebook-Web-Design — Thu, 14 Jan 2010 02:15:04 +0000

JAI is an open source JavaScript audio interface for the HTML5 tag that can play a list of audio files.

It doesn't use any image, all the elements are rendered in runtime with the element & the click-able play-list is only a list of links that are styled with CSS.

It can only work in modern browsers that has HTML5 support & use the Ogg Vorbis audio codec for the tag.

JAI, rather than being a player to be used in today's websites, is more a proof of concept that shows how HTML5 will be changing the web.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: HTML5, Javascript

Go to Source

W3C HTML Accessibility Task Force

Facebook-Web-Design — Wed, 13 Jan 2010 03:54:17 +0000

As a number of people have stated, there are some accessibility issues in HTML 5. Hopefully the HTML Accessibility Task Force will help straighten those out:

The objective of HTML Accessibility Task Force is to help ensure that HTML 5 provides features to enable Web content to be accessible to people with disabilities. This includes review of existing features for potential accessibility problems, and proposal of new features where needed.

Read full post

Posted in Accessibility, HTML 5.

Go to Source

Google I/O 2010 Registration Is Open

Facebook-Web-Design — Wed, 13 Jan 2010 02:32:10 +0000

Google has announced details for the next Google I/O, the company’s largest developer event. It runs May 19 and 20, 2010, at Moscone Center in San Francisco. Registration is $400 now, but the price goes up to $500 a month before the event, so register early. Students and faculty can get in for $100, but you have to act quickly.

I/O is two days of Google’s big ideas. Past events have been the forum for Android’s coming out party, the debut of Google Wave and VP of engineering Vic Gundotra’s epic HTML5 keynote, which showed off everything the HTML5 stack can do in the browser. The excitement has grown to be huge, much like the Stevenotes from many a Macworld past.

Last year, everyone got a free Android touchscreen phone. The official @googleio Twitter account has been pegged with questions about what’s going to be given away this year, but whoever is operating that feed at Google says there are no plans for giveaways at this year’s event.

Of course, if Google was planning on giving away something extra cool, why would it spoil the surprise?

This year’s event is set up much like the previous ones — there’s a big keynote each morning, followed by breakout sessions all day long on a wide variety of tech topics. Some sessions we’re looking forward to: A bunch of stuff about Chrome, like how to use Chrome Frame, how to make extensions and an update on HTML5’s progress. There’s also an intro to using Chrome’s built-in developer tools.

There are a couple of sessions about how to optimize your site for social activity using single sign-on systems and the real-time publishing technology PubSubHubbub.

There are also sessions on all the Data APIs and Google Web Toolkit. Read the full list.

There are also after-hours parties featuring things like drunken tricycle races, and this year there’s a special gadget party for the hardware geeks (and aren’t we all?).

See Also:

Go to Source

Error messages for corrupt HTML

Facebook-Web-Design — Tue, 12 Jan 2010 03:33:40 +0000

Vlad Alexander asks Should error messages be displayed for corrupt HTML5?. Sure, why not.

Many people who do not like the idea of browsers displaying error messages for corrupt/invalid HTML tend to equate error messages with the “Yellow screen of death” that Firefox and other Gecko-based browsers display when they encounter a non well-formed XHTML document served as application/xhtml+xml. But there are other ways.

Read full post

Posted in Browsers, HTML 5, Web Standards.

Go to Source

Using YQL as a proxy for cross-domain Ajax

Facebook-Web-Design — Tue, 12 Jan 2010 02:17:25 +0000

OK, this is nothing shockingly new, but I found it pretty useful. Using jQuery, Ajax has become more or less a one-liner:

PLAIN TEXT

JAVASCRIPT:

$(document).ready(function(){
$(‘.ajaxtrigger’).click(function(){
$(‘#target’).load($(this).attr(‘href’));
return false;
});
});

This loads the document any link with a class of “ajaxtrigger” points to and updates the content of the element with the ID “target”. If the link is a third party link on another domain it fails though – and silently at that. Normally you’d work around that with a server-side proxy, but you can actually do without it.

YQL is a hosted web service that can scrape HTML for you. It also runs the HTML through HTML Tidy and caches it for you. For example to load http://bbc.co.uk you’d use the following statement:

PLAIN TEXT

CODE:

select * from html where url=‘http://bbc.co.uk’

As a URL this turns into:

PLAIN TEXT

CODE:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D’http%3A%2F%2Fbbc.co.uk’%0A&format=xml

You could request JSON-P by setting the output format to json and define a callback, but that would give the HTML back as a massive object which is not nice. YQL also offers JSON-P-X as an alternative which is a JSON object with a callback and the HTML as a string inside a simple Array. See it by clicking the following URL:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%27http%3A%2F%2Fbbc.co.uk%27%0A&format=xml&diagnostics=false&callback=foo

Now, using jQuery’s getJSON() we can load this even without a named callback function. That way we can use one method for content that is third party and simply use load() for the other:

PLAIN TEXT

JAVASCRIPT:

$(document).ready(function(){
var container = $(‘#target’);
$(‘.ajaxtrigger’).click(function(){
doAjax($(this).attr(‘href’));
return false;
});
function doAjax(url){
if(url.match(‘^http’)){
$.getJSON(“http://query.yahooapis.com/v1/public/yql?”+
“q=select%20*%20from%20html%20where%20url%3D%22″+
encodeURIComponent(url)+
“%22&format=xml’&callback=?”,
function(data){
if(data.results[0]){
container.html(data.results[0]);
} else {
var errormsg = ‘
Error: could not load the page.
’;
container.html(errormsg);
}
}
);
} else {
$(‘#target’).load(url);
}
}
});

You can see the demo in action here, more details are available on my blog and the source is available on GitHub.

Go to Source

WordPress Theme from Scratch – Day 3: HTML to WordPress

Facebook-Web-Design — Sun, 10 Jan 2010 03:25:38 +0000

Ultimate tutorial explains how to develop an WordPress theme from scratch HTML file.

WordPress Theme From Scratch day 3 HTML to WordPress_square.png (84 KB)

Go to Source

Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

Facebook-Web-Design — Sat, 09 Jan 2010 03:48:12 +0000

We all know the benefits of using snippets and bundles to speed up our coding, but what if we could take things a step further, and turn a complex html structure into something as simple as a CSS selector? Well, thanks to a new project, called Zen-Coding, we can do this very thing!

In this four-minute video quick tip, I’ll demonstrate how.

Download Zen-Coding

Other Viewing Options

Update

Within the comments below, I made a suggestion that it would be neat if we could also paste in the generic “lorem” text, like so:

div#header>p>lorem

This would generate something like so:


	
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Unfortunately, I didn’t know how to do it. But luckily, the author of Zen-Coding, Sergey, was able to help me. I recorded a sixty second screencast showing you how to allow for this. You can watch it here.

Additional Resources

Write a Plus Tutorial

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Go to Source

jsFiddle

Facebook-Web-Design — Fri, 08 Jan 2010 07:25:11 +0000

jsFiddle a Tool which is helping with writing (X)HTML, CSS & JavaScript. Load the page or code-snippet, edit the relevant fields and load the result, which can saved for further usage.

jsFiddle-Preview.jpg (7 KB)

Go to Source

Optimizing HTML

Facebook-Web-Design — Tue, 05 Jan 2010 04:24:24 +0000

Optimizing HTML. Reduce your HTML document size by getting rid of redundant structures and employing minification techniques.
Go to Source

Using HTML Symbol Entities

Facebook-Web-Design — Mon, 04 Jan 2010 09:12:49 +0000

Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number). Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. Have you seen the snowman ☃ symbol before? If not, continue on this post to find more surprises. (more…)

Go to Source

15 Clean & Effective Email / Newsletter Designs

Facebook-Web-Design — Mon, 04 Jan 2010 06:20:38 +0000

As web designers we do our best to give the user the most functional layout while trying to make it look visually stimulating. So how are your HTML email / newsletters working for you? What! You don’t use HTML in your emails.

Go to Source

3 Must-See Video Presentations About HTML 5

Facebook-Web-Design — Sun, 03 Jan 2010 08:02:34 +0000

Here is a must-see collection of three interesting video presentations about HTML 5 by Google. If you are a web developer you can’t miss them!

Introduction to HTML 5

Google I/O 2009 – Google’s HTML 5 Work: What’s Next?

HTML 5: Features you want desperately but still can’t use

Go to Source

90+ Useful jQuery Plugins for Designers and Developers

Facebook-Web-Design — Fri, 01 Jan 2010 22:39:24 +0000

jQuery can help designers and developers create impressive animations and interactive websites that are appealing and accessible to the widest range of browsers.

Here are 90+ useful jQuery plguins focusing on gallery and slideshows, navigations and further resources to reduce time and effort while increasing your audience.

If you don’t want to miss out our next posts, you can Subscribe to the 2Experts Design Blog or follow us on twitter

Accessibility

Stylesheet and text size switcher.

Accordion

Accordion interface with a few variations.

AlphaNumeric

Prevent users from inputing special characters.

Ajax File Upload

Loading graphic displays while file is uploaded.

AppendDom

Write HTML with JavaScript, great for displaying Ajax results.

AppendText

Converts text into post friendly html.

BlockUI

Create a message overlay while blocking user interaction on elements or the entire page.

BogoFolders

View text through a ‘file menu’ interface.

BogoTabs

Basic tabbed interface.

Bubble

Demo highlights selected table rows in groups of tables..

Calendar
Aids date entry.

Checkbox manipulation
Select, unselect and toggle checkboxes.

Chili

Syntax highlighting for displaying code on webpages.

Choose Component
Select data from a table row through a modal window.

Click Menu
Generates dropdown menus.

clueTip
Tooltips with many variations.

Color Animations
Add color animations to div backgrounds.

Color Picker
Pass in color choices and attach custom events to each color block.

columnHover
Highlight table rows and columns.

columnManager
Add, remove and toggle table columns.

ContextMenu
- Menus that show when you right click specified elements.

Confirmer
Adds a listener to check if user confirms their action.

Cycle

Add flash-like image effects to rotating image galleries.

date picker
Aids date entry.

Delicious
Read delicious bookmarks from a user to display on a webpage.

Dimensions
Get accurate window and document attributes across browsers.

Equalize Columns
Make columns the same height as the longest column.

FCKEditor Plugin
Adds a rich text editor to a textarea.

Field
Expand the ability to retrieve and set values in forms.

Form

Change HTML forms to submit via Ajax.

Gallery Viewer
JavaScript image gallery.

getUrlParam
Function to get url parameters.

Google Feed Plugin
Display any RSS feed to a webpage.

Gradient
Adds a gradient to a div without needing an image.

Grid Column Sizing
Table column draggable resizing.

Grid Row Sizing
Expand and collapse table rows.

hoverIntent
Prevents unintended hover events.

idTabs
Add tabbed interface to a website.

Impromptu
Create modal windows and messages.

jQuery Localisation
Applies localisation packages based on the user’s language preference.

jBox
UI dialog widget.

jCalendar
Aids selecting of dates inline on a page.

jCarousel Lite
Simple carousel for images and HTML content.

jCodeViewer
Syntax highlighting for displaying code on webpages.

jdMenu Hierarchical Menu
Generates dropdown menus.

jEditable
Live editing of elements on a webpage.

jFeed
XML feed parser.

jPanView
Replaces big images with a zoom viewer in HTML.

jqDnR
Drag’n’Resize elements on a page.

jQMaps
Interact with Google maps.

jqModal
Display notices, dialogs, and modal windows in a web browser.

Treetable
Make a tree view out of an HTML table.

Tree View

Tree view controls.

Suggest
Add autocomplete to input fields.

YAV
Form validation library.

jqUploader
Provides a status bar for uploading images.

jScrollPane
Customize your scrollbars.

jTagEditor

Turn a textarea into a tag editor.

jVariations
Create a control panel to manipulate elements on a page.

Keyboard Navigation
Dynamically determine which element to focus on based on it’s position on the screen.

labelOver
Overlay labels over an input field.

LavaLamp
Navigation menu with a ‘lava’ effect.

Lazy Load
Only load images that are in the current window.

Live Query
Adds event listeners to elements.

Masked Input
Add mask to inputs to aid user data entry (phone numbers, etc).

Media

Unobtrusive conversion of standard markup into rich media content.

Extra selectors for JQuery
Add more selectors to jQuery.

Mousewheel
Mousewheel event handler.

Mousehold Event
Add repeating event as the user holds down the mouse.

Multiple File Upload
Select multiple files one by one as it adds to a queue list.

newsticker
Create a fading news ticker.

Password Strength Meter
Indicator to show the strength of a users password.

PopupWindow
Creates an preview popup of destination link.

Query String Object
Useful for sending URL parameters.

Select box manipulation
Remove and add options from a select list or dropdown in many ways.

selectCombo
Tool for making dependant dropdowns with Ajax.

Star Rating
Generates star rating from input fields

Grid
Dynamic ajax grid control.

slideViewer
Image gallery as slides.

Spoilers
Hide content behind an image until user action is taken.

tableHover
Row and column highlighting with variations.

tableFilter
Search box is added to each column header to filter table.

tablesorter
Client side table sorting.

Taconite

Easily make multiple DOM updates using the results of a single AJAX call.

Textgrad
Add gradients to whole blocks of text.

Time Entry
Sets an input field up to accept a time value.

Tooltip
Add tooltips from title page.

Validation

Add live validation to forms.

WYMeditor

Web-based XHTML WYSIWYM editor.

Zoomi
Zoomable thumbnails.

XSLT
Transform XML/XSL from JavaScript.

XAP
Ajax library.

Enjoy this Post? Subscribe to the 2Experts Design Blog or follow us on twitter

Our blog is updated regularly with content related to web design, inspiration, tutorials, wordpress, freebies and much more. If you don’t want to miss out on future posts, you can subscribe by RSS or Email

Go to Source

Create A Starter Stylesheet Quickly: PrimerCSS

Facebook-Web-Design — Fri, 01 Jan 2010 14:20:05 +0000

PrimerCSS is a very simple & free web application that enables anyone to paste HTML and get a starter stylesheet automatically.

It analyzes the code you pasted, pulls out all the ids/classes used and places them into the stylesheet.

The application is specially handy for web designers who write the most part of the HTML structure at first & style it later.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Class, Id

PHP RSS Parsers

Go to Source

120 Tips, Tricks, and Tuts from 2009 Worth your Time

Facebook-Web-Design — Mon, 28 Dec 2009 14:56:26 +0000

Now that we’re down to the end of 2009, what were some of the best web development and design tutorials and articles from the year? We’ll take a look at 120 of them!

January

How to Build a Login System for a Simple Website

In today’s video tutorial, we’ll be building a login system with PHP and MYSQL. Many, many features will be covered; including MySqli, Prepared Statements, jQuery, Classes, Sessions, Cookies, etc. I bit off more than I could chew for today’s screencast. So, I’ll be creating a Part 2 in the next couple of weeks in order to improve our system even further.

Run Your Own TinyURL Service With Phurl

Jan 13th, 2009 in Other by Thord Hedengren
URL shortening services are a must if microblogging services like Twitter are to work. In 140 characters, you don’t want the URL you’re linking to eating up 100 of them. Or worse, it might not even fit. Enter TinyURL, and a bunch of other services that give you a shorter custom URL pointing to the target site. But why not roll your own, using Phurl? Let’s do it!

Slice and Dice that PSD

In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.

The Definitive Guide to Creating a Practical jQuery Plugin

In this article weíre going to be building our very own jQuery plugin step-by-step from scratch; jQuery makes this task exceptionally easy for us, giving us a simple method of packaging up our scripts and exposing their functionality, and encouraging the use of scalable and reusable object-oriented techniques.

15+ Tips to Speed Up Your Website, and Optimize Your Code!

Once you’ve been coding for a while, you begin to take something for granted. You forget just how smart you really are. How many hundreds of keyboard shortcuts have we memorized? How many languages have we learned? How many frameworks? How many hacks? To say that web design/development is an extremely tough industry is putting it lightly. Next, add in the fact that much of what you know today will be considered obsolete in a few years.
Today, we’ll be looking at a crop of tips and tricks that will help beginners speed up their development time, and code more efficiently. You’ll see a mix of quick time savings tips, as well as specific coding tricks to increase your web application’s efficiency.

10 Killer WordPress Hacks

2008 was a very good year for the WordPress community. The software was updated numerous times, leading to the recent release of version 2.7, and many new blogs dedicated to WordPress were created. Of course, tons of new hacks were discovered, which helped lots of bloggers enhance their blogs.

In this article, weíll show you 10 new useful killer WordPress hacks to unleash the power of your favorite blogging engine. Each hack has an accompanying explanation, so youíll not only unleash the power of WordPress but also understand how it works.

PHP for Beginners: Building Your First Simple CMS

Itís safe to say that nearly every website thatís up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with a CMS to power a website (WordPress, Drupal, etc.), it doesnít hurt to peek under the hood and get a feel for how these systems work.

Word Jumbling Experiment

Apparently it started back in 2003 but it only came to my attention about two years after that. Itís since been labelled as an internet meme which is interesting because the first time I saw it was on a poster at a train station near London, not on the internet! If youíre wondering what “it” is here you go.

Output Buffering for Web Developers, a Beginnerís Guide

If you’re not using PHP’s output buffering, you should be. And if you are, you may not be using it to its potential. In this article written specifically for web developers, I’ll make a case for output buffering and show you how to get started within seconds. This article is the beginning of a series in which I’ll share with you the awesome potential of output buffering.

Speed up your JavaScript, Part 1

In my last post, I talked about the conditions under which the dreaded long-running script dialog is displayed in browsers. Browsers will stop executing script either when theyíve executed too many statements (Internet Explorer) or when the JavaScript engine has been running for a specific amount of time (others). The problem, of course, isnít the way that the browser is detecting long-running scripts, itís that the script is taking too long to execute.

See part 2, part 3, and part 4 of this series.

February

JavaScript and the DOM Series: Lesson 1

Hello and welcome to the first part of what will hopefully be an extensive series covering core aspects of the JavaScript programming language and the DOM API.
While frameworks such as jQuery, Prototype and MooTools are great ways of suppressing browser bugs and speeding up development, itís important to know and understand the underlying technologies. This series intends to tell you what you need to know about JavaScript and the Document Object Model (DOM). Even if you swear by a particular library this will still benefit you ñ knowing how something works under the skin can only be a good thing!

Don’t forget to checkout part 2

Exactly How to Use CSS Sprites

Today, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests that are made. As always, feel free to ask any questions in the comments area.

Are You Making These 10 PHP Mistakes?

One of the best things about PHP is that it’s a great language to just “dive into”, thanks to its wide-ranging popularity. Anyone with the ability to hit “Search” on Google can quickly create a program. However, this also lends to a major criticism of PHP: it’s almost too easy to find and reproduce bad code.
Here are 10 PHP mistakes that any programmer, regardless of skill level, might make at any given time. Some of the mistakes are very basic, but trip up even the best PHP programmer. Other mistakes are hard to spot (even with strict error reporting). But all of these mistakes have one thing in common: They’re easy to avoid.

Intro to Django: Building a To-Do List

Django is a powerful web framework, created in Python, which follows the DRY (Don’t repeat yourself), and batteries included philosophies. It allows for rapid website development by providing a wide range of tools and shortcuts out of the box. Django is extremely fast and flexible – even faster than all of the PHP frameworks available. In this article, I’ll introduce you to Django by showing you how to build a simple to-do list.

Extending SimplePie to Parse Unique RSS Feeds

A few days ago, as I prepared our Create a Slick Flickr Gallery with SimplePie tutorial, it occurred to me that we haven’t posted many articles that covered SimplePie. Considering how fantastic a library it is, I think it’s time to take a closer look.
We’ll be looking at a more advanced feature that allows you to extend the built-in item class to allow for the parsing of complicated RSS feeds.

10 Web Typography Rules Every Designer Should Know

When someone visits a website youíve designed, the odds are that they donít care much about the colors, images or sounds, theyíre immediately looking at the text.
No matter how many bells and whistles youíve built into a website, everyone relies on text to accomplish whatever theyíre visiting the site to do.
That alone should make typography, the art of arranging type, a priority for any web designer.
In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

Elegant Animated Weekly Timeline for Websites

Yesterday my friend Nick asked to me some suggestion to design an original weekly timeline for a web application which he is developing. I suggested to use the following animated timeline which I implemented reusing the code of my versatile slider and now I want to share with you.

11 Ways to Enhance a User Interface with MooTools

When creating a User Interface, itís important to make it engaging for the user not only from a visual standpoint, but also with interactivity. With so many JavaScript frameworks readily available, web designers and developers have many tools at their disposal to add slick effects to their UIís.

How to Make an Impressive Animated Landscape Header with jQuery

Content doesnít always have to stay visible. Sometimes it can hide in the most unexpected locations.

In this tutorial weíll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.

Vertical Centering with CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. Iíll show you all the best ways Iíve seen and also how to create a nice little centered website.

March

The Easiest Way to Use Any Font You Wish

CSS 3 is on the horizon, and we’re all getting excited. Thanks to the latest browser updates, developers can begin working with time-saving new properties – such as @font-face. Unfortunately, the availability of these features is limited to a tiny fraction of our overall userbase. At least for the next year or so, we’ll need to continue utilizing the Flash and Javascript alternatives when embedding fonts.
Luckily, a new contender, CufÛn, has made the process unbelievably simple. What makes it different? Rather than Flash, it uses a mixture of canvas and VML to render the fonts. In just a few minutes, I’ll demonstrate how to use any font you wish in your web applications. Excited?

How to Add Variables to Your CSS Files

Let’s try something different on nettuts+ today. Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apache’s URL rewrite mod.

Diving into PHP

As some of you might know, I’ve been running a weekly video series on the ThemeForest Blog that teaches new developers exactly how to work with PHP. Once or twice a week, I release a new “episode” that builds upon the previous days. To expand our viewership, I’ve decided to release “Day 13″ here. Be sure to subscribe to In the Woods to stay up to date on each new release.
Why do it this way? Because people don’t always have the time to watch sixty minute videos. By posting short ten minute episodes, beginners can easily digest each lesson, rather than become overwhelmed with more information than their minds are able to consume. If you’re new to PHP, and are not familiar with this series, I hope you’ll subscribe and become a new viewer.

Everything You Need to Get Started With MySQL

Developing web applications using a static data store where data must be updated, stored and manipulated frequently can be a cumbersome task. However this article will introduce you to the world of relational databases allowing you to maximise your data’s potential.

Professional Frontend Engineering

Last night, long after I should have fallen asleep, I came across a fantastic overview of ìfrontend engineering.î This is a must-watch video, presented by Nate Koechley. Many designers will get more from this video than an entire book. Nate covers everything from underused html tags, to doctypes, to proper naming conventions. I highly recommend watching it.

Build a Content Slider with jQuery

There are a ton of tutorials already out there about creating content sliders with jQuery.
So why bother writing another one? While I donít think that the existing tutorials are
incorrect, bad, or otherwise unacceptable, I havenít found one that met my needs.

Designing Drop-Down Menus: Examples and Best Practices

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

12 Excellent Tools for Picking a Domain Name

Selecting the perfect domain name for your website is the most important, and oftentimes hardest, step in establishing a web presence. There are plenty of tools out there that can help you ease the burden of checking available domains and suggesting similar names that are related to your searches.

In this article, youíll read about 12 neat web tools that will lend you a hand in finding and choosing domain names. Youíll find a variety of search and suggestion tools that have an assortment of features so that, hopefully, youíll discover a few favorites.

11 Excellent Solutions for Creating Tooltips

Tooltips in web design are becoming more and more commonplace. Even though I donít think they are appropriate for every type of site, they can be a very useful addition when implemented correctly. If you are planning on using tooltips in your next project, the hardest part may be choosing the right solution.

Regular Expressions for Dummies

Welcome to my new video series, ìRegular Expressions for Dummiesî. Over the course of ten videos or so, Iím going to teach you how to use regular expressions in your Javascript and PHP applications. As always, Iíll assume you know absolutely zip. If you havenít already, subscribe to our RSS feed, or follow me on Twitter to stay up to date on new releases.

Also look at part 2, part 3, part 4, and part 5 in this series!

April

Design a Beautiful Website From Scratch

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

A Crash-Course in WordPress Plugin Development

Despite an extensive codex, many WordPress users remain unfamiliar with how to create their own custom plugins. In today’s screencast, we’ll start from scratch and build our first usable plugin. For this example, we’ll write a simple “tuts formatting” function that allows a blog editor to more easily format articles.

Building a jQuery Image Scroller

In this tutorial, weíre going to be building an image scroller, making use of jQueryís excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

404/403 Website Error Pages With PHP Auto-Mailer

Website error pages are perhaps one of the most overlooked pieces of a fully rounded website. Not only are they important but they give you the opportunity to have a little fun. Although many web developers rely on server logs to keep an eye out for hits on error pages, I’m going to take a different approach by using a PHP generated email. In addition, we will spice up the design a bit, add basic navigation and link to the website sitemap.

Add Power to Your PHP With Multi-Tiered Applications

As PHP applications become more and more complex, it can be easy to end up with a tangled mess of code that makes maintenance nearly impossible. Applying the concept of tiered applications can help to alleviate some of the difficulty in maintaining complex applications.

Bonus: Should You Attend University for Web Development?

We’re entering a unique age; an age where a simple Google search has the potential to replace professors. As students across the globe decide whether or not to spend massive sums of money – during a financial recession – to attend University this fall, they might find themselves asking, “Is it worth it?”

Especially in the web development world, it’s possible that the latest technologies and trends are being taught on blogs, rather than in the classroom. On a weekly basis, I receive emails from University students informing us that our “little ole’” blog has taught them more than their college professors. Considering the frequency at which these flattering emails occur, it does raise an interesting question: “Is University out-dated?”

PHP Arrays Unleashed

Understanding arrays is the first major milestone when learning how to code. An array is not an easy concept to grasp at first since an array has many values, or elements, and can be used in so many ways. Many functions return their results as an array. There is no way around it, if you want to learn how to code, be it in php, javascript or any other language, you will need to understand the array.

Progressive Enhancement: What It Is, And How To Use It?

Progressive Enhancement is a powerful methodology that allows Web developers to concentrate on building the best possible websites while balancing the issues inherent in those websites being accessed by multiple unknown user-agents. Progressive Enhancement (PE) is the principle of starting with a rock-solid foundation and then adding enhancements to it if you know certain visiting user-agents can handle the improved experience.

PE differs from Graceful Degradation (GD) in that GD is the journey from complexity to simplicity, whereas PE is the journey from simplicity to complexity. PE is considered a better methodology than GD because it tends to cover a greater range of potential issues as a baseline. PE is the whitelist to GDís blacklist.

38 Ways to Optimize and Speed up your WordPress Blog

WordPress blogs and sites can be notoriously slow. But fear not ñ here are ways to make your WordPress blog super speedy and fun for your visitors to view with a few tweaks, hacks and plugins. Be sure to check back because I will be updating this post as I discover new and wonderful ways to optimize and speed up WordPress blogs.

Use Custom Missing Image Graphics Using jQuery

Yesterday I posted an article about how you can use your own ìmissing imageî graphics when an image fails to load using MooTools. Hereís how to do the same using jQuery.

Ask JW: Self-Invoking Anonymous Function

Between Nettuts+ and ThemeForest, I receive dozens of question emails each week. Although I try my best, I simply donít have the time to research the answer to each one. Considering this, Iíve decided to sporadically post ìAsk JWî articles. This weekís question concerns Javascriptís self-invoking anonymous functions, and comes from Travis.

May

How to Set Up a Killer WordPress Testing Environment Locally

If you’re a heavy WordPress developer like me, you might find that you need to create a new installation for each site that requires a strange structure or specific posts, instead of using your uniform local test WordPress installation. Cue WordPress Mu. WordPress Multi User is a platform created by the geniuses at Automattic that is basically a WordPress installation that allows multiple blogs to run using the same software.

Create a Fun Tweet Counter With jQuery

In this tutorial, we will look at using jQuery to call Twitterís API and then use the results to create a widget for a blog or personal website that shows what hours during the day we tweet at the most.

30 HTML Best Practices for Beginners ñ Basix

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!
Without further ado, let’s review thirty best practices to observe when creating your markup.

The Ultimate Guide to .htaccess Files

Apache’s .htaccess configuration files have baffled countless developers. This tutorial aims to break through this confusion by focusing on examples and thorough descriptions. Among the benefits of learning .htaccess configuration is automatic gzipping of your content, providing friendlier URLs, preventing hotlinking, improving caching, and more. First, the basics.

How to Make AJAX Requests With Raw Javascript

Javascript frameworks have turned simple AJAX functions into one-liners. This is quite incredible, considering the fact that it would require more than twenty to accomplish the same thing with raw Javascript. Nevertheless, it’s important to learn what’s “under the hood”.

Don’t forget to check out part 2!

Getting Started with Ruby on Rails: Installation

This article will guide you through the process of installing Ruby on Rails, and any other software that is required to begin using it.

Check out part 2.

Fastest Way to Build an HTML String

You have a massive array of items that needs to be transformed into an HTML list without causing the user any grief. There are a couple common ways of doing this:

Create a Simple Input Sanitation Function With PHP

I don’t care what anybody tells me, PHP security is the number one thing I’m concerned about when writing a script. If you were to directly input data from $POST or $GET into a MySQL database, you could (and probably will) be in for a world of trouble. Today I’ll walk you through the steps of creating a very easy to use input sanitize function in PHP.

Computer Science in JavaScript: Bubble Sort

Sorting algorithms are one of the cornerstones of computer science education. The purpose isnít to teach you a dozens different ways to sort data when youíll never need to implement them by hand in your professional life. Instead, they are used as a tool to teach algorithm theory, to show you that there are multiple ways to solve a single problem. And so I begin doing the same with JavaScript and bubble sort.

Make an Animated Alphabet using Keypress Events in jQuery

The result here was the result of some random jQuery keypress event experiments over the past few days. I recommend that you use this tutorial as a proof of concept rather than final product.

Letís be real for a moment ó there are very few places where you would need the exact effect weíll be building. However, the logic behind it should be a much more useful in adapting to your own needs.

June

24 JavaScript Best Practices for Beginners ñ Basix

As a follow-up to “30 HTML and CSS Best Practices”, this week, we’ll review JavaScript! Once you’ve reviewed the list, be sure to let us know what little tips you’ve come across!

Secure Your Forms With Form Keys

Security is a hot topic. Ensuring that your websites are secure is extremely important for any web application. In fact, I spend 70% of my time securing my applications. One of the most important things we must secure are forms. Today, we are going to review a method to prevent XSS (Cross-site scripting) and Cross-site request forgery on forms.

10 Essential SQL Tips for Developers

SQL is yet another essential language for developers wishing to create data-driven websites. However, many developers are unfamiliar with various aspects of SQL; so in this article, we’ll analyze ten essential tips.

Building a Forum From Scratch with Ruby on Rails

Today, we will be building a simple forum using Ruby on Rails, and we will be working up from the basics covering things like authentication and more advanced database techniques.

Using jQuery To Manipulate and Filter Data

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, I will go over four techniques: hover effects, zebra rows, filtering, and sorting.

The xmlrpc.php File and Site Security

Located in the header.php file of most WordPress themes, there is an important hook called wp_head(). This essential hook enables functions to output content to the browser in the area of the web document 1. In newer versions of WordPress, this hook enables WordPress to output the following three lines to your themeís section.

Ask Ben: Detecting When DOM Elements Have Been Removed With jQuery

I know that jQuery is great for event management, but I was wondering if you have come across a way to detect if a DOM element (say a row in a table) was removed? I have a table and I want to run an ajax request every time a tr was removed, but there are several ways that the tr could be removed.

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, itís clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

Sending Nice HTML Email with PHP

This is going to be a continuation of the Website Change Request Form demo weíve been using around here for a while. If you need to catch up, first I talked about it, then I built it, then I screencasted it, then I secured it. Throughout all of this, the end result has been a boring text-only email that gets sent to a single email address.

How to Implement a Launching Soon Page with PHP and jQuery

In this tutorial I want to explain how to implement a simple launching soon page using PHP and jQuery. What’s a launching soon page? In general it’s a page that informs the visitors of a website under construction about when the website is going to be online and allows them to leave their emails in order to be updated when the website is on-line.

July

CodeIgniter from Scratch

After numerous requests, today we are launching a new screencast series on Nettuts+ that will focus exclusively on the CodeIgniter PHP framework. Over the course of about 10 videos, I’ll teach you exactly how to use this framework. Ultimately, we’ll work our way up to building a custom CMS. Without further ado, here’s day one!

And you have to check out part 2, part 3, part 4, part 5http://net.tutsplus.com/videos/screencasts/codeigniter-from-scratch-day-4-newsletter-signup/, part 6, part 7!

Create a Twitter-Like “Load More” Widget

Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

HTML 5 and CSS 3: The Techniques Youíll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

Using htaccess Files for Pretty URLS

Continuing our review of htaccess files, today we’ll examine how to use mod_rewrite to create pretty URLs.

How to Create A Simple Web-based Chat Application

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website.

Easy Retweet Button

Ever since I saw the Bit.ly JavaScript API I’ve been wanting to build a simple script for tracking the number of people visiting a blog post from Twitter. This past weekend I built a little script for doing just that – and in a completely unobtrusive manner.

Text Rotation with CSS

Once again, after reading somebody else’s article, I felt inspired to put together an alternative example. In this case: Text Rotation.

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It’s like the top fell off the pepper shaker and you’ve suddenly got a large pile of pepper on your food. It makes me want to sneeze.

10 Typography Tips to bring your Skills to the Next Level

An often overlooked aspect of web design, by those just starting out, is typography. In fact, web designers that have been around for a couple years even have a tendency to overlook and undervalue the power of typography. Donít be mistaken though, itís one of the most powerful tools web designers have.

Closures in JavaScript

A closure, in JavaScript, can simply be described as a retained scope; at least, this is how I think of it. The benefit of a closure is in the fact that it retains the scope (the ìscope chainî) of the outer (or ìparentî) execution context. This behaviour can be used in a number of different ways and has become a useful remedy for quite a few JavaScript gotchas; one of the most common being the ìlooping problemî.

An Introduction to Object Oriented PHP

This is a three part series introducing Object-Oriented PHP, a way to manage your code and keep different parts separate, all while being easily accessible. I hadnít really planned it this way, but my previous article works as a great precursor to this article, showing you how to get a PHP/MySQL Sandbox up and running, which is just what weíll be using for this tutorial as I believe a hands-on approach is the best way to learn things like this.

And then you should read part 2 and part 3.

August

A Crash-Course in Advanced CSS3 Effects

Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.

How to Create a Simple News Ticker

In this tutorial weíll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that weíre going to create today will be vertical.

8 Regular Expressions You Should Know

Regular expressions are a language of their own. When you learn a new programming language, they’re this little sub-language that makes no sense at first glance. Many times you have to read another tutorial, article, or book just to understand the “simple” pattern described. Today, we’ll review eight regular expressions that you should know for your next coding project.

30+ PHP Best Practices for Beginners ñ Basix

PHP is the most widely-used language for programming on the web. Here are thirty best practices for beginners wanting to gain a firmer grasp of the fundamentals.

6 Ways To Improve Your Web Typography

Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

8 Web Usability and Best Practices for Beginners

As a web designer when you are coding and designing website, it is your job to make sure that the site is user intuitive, friendly and easy to navigate. Although these are basic work ethics for every web designer sometime you might miss out a little things here and there, that might get under front end user skin. Nevertheless, maybe you are starting your way into web design. Here are eight web usability and practical tips for beginner web designer.

Fundamentals of MySQL Query Validation

Web 2.0 is a fine thing. You can build whole websites, news systems, or picture galleries ñ just by using the power of content submitted by users.

But be careful! You can never trust every user when it comes to submitting data. There are always those who may try to compromise your website by submitting bad queries. Even if unintentional, it can be possible for users to destroy your databaseís consistency just by entering incorrect data.

JavaScript: Bad Practices

I’ve seen a lot of curious (bordering on horrific) code in my life; and Iíd say about half of it was written by me. If you donít attest to the fact that you once wrote bad code then youíre either a liar or perhaps, have omnipotent powers!

Top 10 UX Myths

Al Gore invented the Internet. Drinking alcohol keeps your body warm. You wonít get pregnant if you stand on your head after Ö well, you get the idea. Myths are those hard-and-fast rules that often start as a plausible idea or once-off observation that grow and distill into ëcommon knowledgeí as they virtually spread. I know Iíve believed a few of these. Iíve also asked my UX expert Twitter friends for their UX Myths ñ and they have many!

Build an Elastic Textarea with Ext JS

Since it was first featured on Facebook, elastic textareas ñ elements that automatically expand or shrink depending on how much text the user inputs ñ has become one of the coolest functional UI effects on the web. In this article, I will guide you through the re-creation of this astonishing effect using Ext JS, and I bet you that you will be surprised to see how easy it is to do it.</p> <h3>September</h3> <h4><a href="http://net.tutsplus.com/tutorials/php/getting-clean-with-php/">Getting Clean With PHP</a></h4> <div></div> <p>Data security is important and often undervalued by designers, developers, and clients alike. Since PHP 5.2.0, data sanitization and validation has been made significantly easier with the introduction of data filtering. Today, we’re going to take a closer look at these filters, how to use them, and build a few custom functions.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/a-deeper-look-at-mod_rewrite-for-apache/">A Deeper Look at mod_rewrite for Apache</a></h4> <div></div> <p>When people think of .htaccess configuration the first thing that pops into most people’s minds is URL manipulation with mod<em>rewrite. People typically get frustrated with mod</em>rewrite’s complexity. This tutorial will walk you through everything you need to know for the most common mod_rewrite tasks.</p> <h4><a href="http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/">20+ HTML Forms Best Practices for Beginners ñ Basix</a></h4> <div></div> <p>Working with XHTML forms can be somewhat daunting; they not only use some niche HTML elements, but also blur the line between static content and user interaction. Let’s review some things to remember when creating your next form.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/the-only-seo-tools-youll-ever-need/">The Only SEO Tools Youíll Ever Need</a></h4> <div></div> <p>Search Engine Optimization is a rather complex and never ending process. You have to analyze a lot of things including what keywords people are searching for, the density of those keywords in your sites, how many sites link back to you, how popular your links are and so on. Doing all this manually can be a huge pain.</p> <p>With that in mind, regardless of whether you’re an SEO guru or a beginner, these twenty tools are guaranteed to make your life easier.</p> <h4><a href="http://net.tutsplus.com/articles/web-roundups/5-lesser-known-javascript-libraries-that-make-web-design-easier/">5 Lesser Known JavaScript Libraries that Make Web Design Easier</a></h4> <div></div> <p>In this round-up weíll be looking at 5 JavaScript libraries that can really ease the development of modern, attractive web sites. The libraries that weíll be looking at arenít libraries in the same sense as something like jQuery or the YUI; theyíre much smaller and much more specialized. But theyíre the best at what they do and provide unique functionality.</p> <h4><a href="http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/">The Z-Index CSS Property: A Comprehensive Look</a></h4> <div></div> <p>Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results ó as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances.</p> <h4><a href="http://inspectelement.com/articles/the-principles-of-good-web-design-part-1-layout/">The Principles of Good Web Design</a></h4> <div></div> <p>Good web design doesnít just appear out of nowhere, there are many aspects of design that come together to achieve this. The first one that weíll be looking in this 4-part-series is layout.</p> <p>You’ll want to read <a href="http://inspectelement.com/articles/the-principles-of-good-web-design-part-2-navigation/">part 2</a>, <a href="http://inspectelement.com/articles/the-principles-of-good-web-design-part-3-colour/">part 3</a>, and <a href="http://inspectelement.com/articles/the-principles-of-good-web-design-part-4-content/">part 4</a>.</p> <h4><a href="http://css-tricks.com/style-a-list-with-one-pixel/">Style a List with One Pixel</a></h4> <div></div> <p>A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list:</p> <h4><a href="http://digwp.com/2009/09/easy-custom-feeds-in-wordpress/">Easy Custom Feeds in WordPress</a></h4> <div></div> <p>Now that we have seen how to setup Tumblr-style posts, it would be nice to be able to segregate the Tumblr-posts category from the main feed into its own, separate feed. This would enable readers to subscribe exclusively to the Tumblr-posts feed and maybe display it in their sidebar or something. While weíre at it, it would also be cool to be able to provide readers with a full menu of feed choices, including the following.</p> <h4><a href="http://blog.themeforest.net/tutorials/css-font-face-and-15-free-fonts-you-can-use-today/">@font-face and 15 Free Fonts You Can Use Today</a></h4> <div></div> <p>Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like CufÛn, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.</p> <h3>October</h3> <h4><a href="http://net.tutsplus.com/tutorials/php/simple-techniques-to-lock-down-your-website/">Simple Techniques to Lock Down your Website</a></h4> <div></div> <p>One crucial part of PHP development practice is always keeping in mind that security is not something you can simply buy off the shelf at your local convenient store. Ensuring the security of your web applications is a process, which over time, needs to be constantly evaluated, monitored, and hardened.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/easy-version-control-with-git/">Easy Version Control with Git</a></h4> <div></div> <p>Have you ever worked on a project that was so unwieldy, you were scared to update a file or add a feature? Maybe the problem was that you weren’t using a version control system. In today’s tutorial, we’ll learn the basics of what might possibly be the best VCS in the world: Git.</p> <h4><a href="http://net.tutsplus.com/tutorials/javascript-ajax/drag-to-share/">Drag to Share</a></h4> <div></div> <p>Weíve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. Itís brilliant and intuitive, and in this article Iím going to show you how we can replicate this behavior with jQuery and jQuery UI.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/feeds-101/">Feeds 101</a></h4> <div></div> <p>Feeds. RSS. Atom. Syndication. Subscribers. These are some of the keywords floating around the web and have gained notorious prominence over the years. In this guide, we’ll take a look at a number of things including what feeds are, why you need to have a feed for your site, how to set up one and then publish it.</p> <h4><a href="http://net.tutsplus.com/videos/screencasts/how-to-build-a-simple-content-slider-jquery-plugin/">How to Build a Simple Content Slider jQuery Plugin</a></h4> <div></div> <p>I was recently asked by a reader to recommend a helpful content slider plugin. No doubt, there are a bunch of excellent options available — some which are, perhaps, too excellent! With so much flexibility comes extra weight; especially when sometimes you only need a simple slide or fade transition.</p> <p>So I figured, why not build a simple custom plugin that will get the job done?</p> <h4><a href="http://www.nczonline.net/blog/2009/10/27/data-uris-explained/">Data URIs Explained</a></h4> <p>One of the most frequently requested browser features in recent memory is data URI support. Thereís been a fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use data URIs in IE. Surprisingly, thereís still a lot of misunderstanding and confusion about data URIs, what they are, how they work, and why youíd ever want to use one.</p> <h4><a href="http://carsonified.com/blog/design/ux/10-tips-on-writing-hero-worthy-error-messages/">10 Tips on Writing Hero-worthy Error Messages</a></h4> <p>Another forehead-smack-worthy curse-laden moment: Iíve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.</p> <h4><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/design-a-minimal-and-modern-portfolio-layout-with-photoshop/">Design a Minimal and Modern Portfolio Layout with Photoshop</a></h4> <div></div> <p>In this Photoshop web design tutorial, weíre going to create a mock-up of a clean and modern-looking website. This is Part 1 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.</p> <h4><a href="http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design">20 Do’s and Don’ts of Effective Web Design</a></h4> <div></div> <p>When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldnít cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing ñ sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.</p> <h4><a href="http://blog.themeforest.net/tutorials/7-things-i-wish-i-had-known-about-jquery/">7 Things I Wish I had Known About jQuery</a></h4> <div></div> <p>This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following.</p> <h3>November</h3> <h4><a href="http://net.tutsplus.com/tutorials/javascript-ajax/you-dont-know-anything-about-regular-expressions/">You Don’t Know Anything About Regular Expressions: A Complete Guide</a></h4> <div></div> <p>Regular expressions can be scary…really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there’s much to learn! Let’s get started.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/top-20-mysql-best-practices/">Top 20+ MySQL Best Practices</a></h4> <div></div> <p>Database operations often tend to be the main bottleneck for most web applications today. It’s not only the DBA’s (database administrators) that have to worry about these performance issues. We as programmers need to do our part by structuring tables properly, writing optimized queries and better code. Here are some MySQL optimization techniques for programmers.</p> <h4><a href="http://net.tutsplus.com/articles/web-roundups/17-hours-of-javascript-from-the-masters/">17 Hours of JavaScript from the Masters</a></h4> <div></div> <p>Douglas Crockford. John Resig. Peter-Paul Koch. Nicolas C. Zakas. If you recognize these names, you probably know what they all have in common: they’re amazingly talented JavaScript Developers. Today, you’ll hear from all of them, in this roundup of JavaScript presentations. Be ready to stretch your brain!</p> <h4><a href="http://net.tutsplus.com/videos/screencasts/asp-net-from-scratch-lesson-1/">ASP.NET from Scratch: Lesson 1</a></h4> <div></div> <p>Nettuts+ is primarily a PHP haven; however, I’m sure we can all agree that there are many fantastic, and technically more powerful languages and frameworks at our disposal. Jeremy McPeak, author of Professional AJAX, and Beginning JavaScript: 4th Edition, will teach you how to build ASP.NET applications from scratch over the course of the next several video tutorials. Enjoy!</p> <p>And <a href="http://net.tutsplus.com/videos/screencasts/asp-net-from-scratch-lesson-2/">Part 2</a>.</p> <h4><a href="http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/">The Basics of Object-Oriented JavaScript</a></h4> <div></div> <p>Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.<br /> While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).</p> <h4><a href="http://www.flairbuilder.com/8-things-programmers-should-know-about-ui-design/">8 Things Programmers Should Know About UI Design</a></h4> <p>In an ideal world, each big subject from the software development process would be handed to a specialized professional: UI designers, programmers, architects, database administrators etc. Unfortunately, this is not the case most of times. There a plenty of cases out there where projects suffer from lack of proper expertise and well trained people. Thatís not to say we should know everything, nor that we should refuse doing work we are not sufficiently prepared for. From freelancers to big companies, we are sometime facing the need of wearing someone elseís hat. In those cases we have no other option but to simply get ourselves wet and just do it.</p> <h4><a href="http://blog.themeforest.net/screencasts/ask-jw-a-plugin-to-make-important-announcements/">Ask JW: A Plugin to Make Important Announcements</a></h4> <div></div> <p>Todayís Q&A comes courtesy of Frederico Gonzalez, from Twitter. He asked if there was an easy way to add announcement bars to the top of his site, much like the one on ActiveDen right now (assuming youíre not logged in). Luckily, as youíll find, itís quite simple to whip up a jQuery plugin that will make these announcements a cinch to add.</p> <h4><a href="http://css-tricks.com/app-from-scratch-1-design/">Creating a Web App From Scratch</a></h4> <div></div> <p>Today we begin Part 1 of an 8-Part series on building a web application from absolute scratch to a complete product. I am going to kick things off by introducing the idea, and then I will be handling the design, UI, and general front-end stuff. We are going to be going back and forth from here over to my friend Jason Lengstorfís blog Ennui Design. Jason will be handling the back-end stuff like application planning and database stuff. At the end of the week, weíll unleash the actual working application for you.</p> <p>You’ll have to read <a href="http://ennuidesign.com/blog/Creating+an+App+from+Scratch+Part+2/">part 2</a>, <a href="http://ennuidesign.com/blog/Creating+an+App+from+Scratch+Part+3/">part 3</a>, <a href="http://css-tricks.com/app-from-scratch-4-html-css">part 4</a>, <a href="http://ennuidesign.com/blog/Creating+an+App+from+Scratch+Part+5/">part 5</a>, <a href="http://css-tricks.com/app-from-scratch-6-ajax">part 6</a>, <a href="http://ennuidesign.com/blog/Creating+an+App+from+Scratch+Part+7/">part 7</a>, and <a href="http://css-tricks.com/app-from-scratch-8-finishing">part 8</a>.</p> <h4><a href="http://dev-tips.com/featured/ajax-and-php-contact-form">How To Create Your First AJAX and PHP Contact Form</a></h4> <p>You’ve been to websites that use them, a nice little AJAX contact form. AJAX is a great way to submit data without a page refresh and is a great tool for certain elements of a website, such as a contact form. So how do we go about doing so? Today, we will take it step by step and build your first AJAX and PHP contact form. We’ll be using jQuery and the popular email validation code found on google code (originally by AddedBytes) to help us out.</p> <h4><a href="http://designshack.co.uk/articles/accessibility/how-to-build-a-site-with-keyboard-navigation-psd-to-html">How to Build a Site With Keyboard Navigation: PSD to HTML</a></h4> <p>Today weíll be looking at how to add keyboard navigation to a website using a few simple lines of JavaScript. First weíll create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.</p> <h3>Decemeber</h3> <h4><a href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript from Null: Video Series</a></h4> <div></div> <p>Thanks to the wide adoption of libraries like jQuery and Mootools, JavaScript’s popularity has skyrocketed in the last few years. However, in the process, an interesting thing occurred: many newer developers are learning these libraries without taking the time to actually learn about raw JavaScript techniques. What percentage of jQuery users don’t know how to fade out an element with only raw JS? My guess is that it’s much higher than many would think.</p> <p>If you want to truly understand the library you’re working with, and improve your skill-set, it’s vital that you learn the fundamentals of raw JavaScript.</p> <p>This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.</p> <p>Don’t forget to watch <a href="http://net.tutsplus.com/videos/screencasts/javascript-from-null-chapter-2/">part 2</a> and <a href="http://net.tutsplus.com/videos/screencasts/javascript-from-null-chapter-3/">part 3</a>.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/sql-for-beginners/">SQL for Beginners</a></h4> <div></div> <p>Most modern web applications today interact with databases, usually with a language called SQL. Lucky for us, this language is quite easy to learn. In this article, we are going to start with some basic SQL queries and use them to interact with a MySQL database.</p> <p>And here’s <a href="http://net.tutsplus.com/tutorials/other/sql-for-beginners-part-2/">part 2</a>.</p> <h4><a href="http://net.tutsplus.com/tutorials/javascript-ajax/custom-events-and-special-events-api-in-jquery/">Custom Events, and the Special Events API in jQuery</a></h4> <div></div> <p>Web pages, for the most part, are event-driven. Libraries such as jQuery have provided helper methods to make this functionality much easier to grasp. In this tutorial, we’ll look at expanding upon these methods to create your own custom namespaced events.</p> <h4><a href="http://net.tutsplus.com/tutorials/other/http-headers-for-dummies/">HTTP Headers for Dummies</a></h4> <div></div> <p>Whether you’re a programmer or not, you have seen it everywhere on the web. At this moment your browsers address bar shows something that starts with “http://”. Even your first Hello World script sent HTTP headers without you realizing it. In this article we are going to learn about the basics of HTTP headers and how we can use them in our web applications.</p> <h4><a href="http://net.tutsplus.com/tutorials/php/how-to-build-a-shopping-cart-using-codeigniter-and-jquery/">How to Build a Shopping Cart using CodeIgniter and jQuery</a></h4> <div></div> <p>CodeIgniter is an open source PHP web application framework with a lot of features. Recently, thanks to the latest update, a new feature was added to this framework, called the Cart Class. In this tutorial, we’re going to take advantage of this new class, and write a shopping cart system, with a touch of jQuery added in.</p> <h4><a href="http://www.bennadel.com/blog/1787-My-Fundamental-Misunderstanding-Of-The-jQuery-Event-Object.htm">My Fundamental Misunderstanding Of The jQuery Event Object</a></h4> <p>Typically, when I deal with event binding in jQuery, I use it in a very one-off kind of way. Meaning, I rarely have multiple event handlers bound to the same element and I rarely use event bubbling in which an event is utilized at more than one level of the DOM tree. As such, I never needed more than a superficial understanding of the jQuery event object. This morning, however, as I was further exploring custom event types in jQuery, it quickly became apparent that my understanding of the event object was, in reality, a critical misunderstanding.</p> <h4><a href="http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/">Stronger, Better, Faster Design with CSS3</a></h4> <div></div> <p>In our last article about CSS3, ìPushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons.</p> <p>In this second article weíre going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder ó a lot of the CSS properties weíre going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).</p> <h4><a href="http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html">CSS Techniques I Wish I Knew When I Started Designing Websites</a></h4> <p>CSS is the best thing to happen to the web since Tim Berners-Lee. Itís simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and theyíll tell you that the majority of their code headaches are caused and ultimately solved by CSS.</p> <h4><a href="http://www.nczonline.net/blog/2009/12/15/writing-maintainable-code/">Writing Maintainable Code</a></h4> <p>Three years ago, I gave my first talk at Yahoo! entitled, <a href="http://video.yahoo.com/video/play?vid=568351">Maintainable JavaScript</a> (<a href="http://www.slideshare.net/nzakas/maintainable-javascript-1071179">slides</a>). The point of the talk was to encourage people to use more rigor in their JavaScript coding. A lot of people who write JavaScript for a living began as hobbyists and hackers, including myself. All of the best front end engineers are self-taught, of course, because this stuff hasnít been taught in colleges and universities. I took the opportunity to simply point out that the same coding practices that are taught in traditional software engineering programs can also be applied to JavaScript. And of course, I threw in some of my own personal findings gathered through years of web development.</p> <h4><a href="http://digwp.com/2009/12/gravatar-and-auto-fill/">Display Gravatar & Autofill Fields for Previous Commenter</a></h4> <div></div> <p>When someone comments on your site, cookies with the information the entered are saved to their computers. WordPress makes it easy to access that information. In fact, in your comments.php template they are ready-to-go PHP variables you can spit out anywhere youíd like. Letís take a look.</p> <h4>Bonus: 24 Ways and A List Apart</h4> <p>I haven’t included any articles from <a href="http://24ways.org/">24 Ways</a>, because you should read them all! (If you aren’t aware, 24 Ways published 24 articles each year, from December 1 – 24.) There aren’t any articles from <a href="http://www.alistapart.com">A List Apart</a>, for the same reason.</p> <h3>A Mini-Rant</h3> <p>Collecting all these tips, tuts, and articles was an interesting experience (ever tried to work with 30+ tabs at once?). As I did, I noticed—certainly not for the first time—a disturbing trend in the web dev community: so many sites had post after post entitled something like this: “number adjective subject.” While some list posts are great (guess what you’ve just read?), nothing beats really content. Nettut+ is amazing at cooking up great tutorials, appropriately seasoning it with the occasional list post. Here’s hoping 2010 shows more web dev/design blogs following this pattern!</p> <h3>And Yours?</h3> <p>We all have our favourites; what article from 2009 helped you the most?</p> <ul> <li>Follow us on <a href="http://www.twitter.com/nettuts">Twitter</a>, or subscribe to the <a href="http://feeds.feedburner.com/nettuts" title="Nettuts+ RSS Feed">Nettuts+ RSS Feed</a> for the best web development tutorials on the web.</li> </ul> <p><strong>Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, <a href="http://codecanyon.net">CodeCanyon</a>.</strong></p> <div><a href="http://codecanyon.net"></a></div> </p> <p><a href="http://feedads.g.doubleclick.net/~a/eAEz_ZxL0d3p2u83P30w5dB1p7o/0/da"></img></a><br /> <a href="http://feedads.g.doubleclick.net/~a/eAEz_ZxL0d3p2u83P30w5dB1p7o/1/da"></img></a></p> <div> <a href="http://feeds.feedburner.com/~ff/nettuts?a=uT6SOy3h_Dw:oo30Xrg9sYI:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/nettuts?a=uT6SOy3h_Dw:oo30Xrg9sYI:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/nettuts?a=uT6SOy3h_Dw:oo30Xrg9sYI:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/nettuts?a=uT6SOy3h_Dw:oo30Xrg9sYI:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/nettuts?a=uT6SOy3h_Dw:oo30Xrg9sYI:TzevzKxY174"></img></a> </div> <p><br /> <a href="http://feedproxy.google.com/nettuts">Go to Source</a></p> </article> <article> <h1>Quick Tips Of The Week – December 23rd 2009</h1> <p>Facebook-Web-Design — Sun, 27 Dec 2009 19:45:10 +0000</p> <p>Quick tips of the week for designers is round again, I will be posting five great tips that I discover during the week and share them with you! This week learn about some great recourses, css opacity change, a photoshop keystroke that will save you tons of time and find out what beautiful HTML looks like!<span></span></p> <div> <h3>#1</h3> <p><a href="http://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93635"></a></p> <p><strong>Chris Coyier </strong>and <strong>Jeff Starr</strong> over at <a href="http://digwp.com">digwp.com</a> have finally released the much anticipated “<a href="https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93635">Digging into WordPress</a>” book! I personally purchased it when it came out, I haven’t fully read it yet, however I have flicked through all the chapters and let me tell you; this is 400 pages worth investing in. It’s great for beginners and even experienced Wordpess users! I highly recommend picking yourself up a copy for only <strong><a href="https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93635">$27</a></strong>, at the moment it is only available in PDF format however they say a print format is forthcoming. You also receive a lifetime subscription and any updates to the addition will become available to you.<br /> <a href="https://www.e-junkie.com/ecom/gb.php?cl=88539&c=ib&aff=93635">Get yourself a copy today</a>!</p> </div> <div> <h3>#2</h3> <p><a href="http://henryladcases.com/examples/opacity" target="blank"></a></p> <p>One super cool tip you can use with <strong>CSS3</strong> is editing the <em>opacity</em> of images, text etc. I’ve been using it to subtly change opacities of images and their hover states, and it is as simple as it sounds. <a href="http://henryladcases.com/examples/opacity/" target="blank">See example.</a></p> <p> <h2>The Code</h2> <pre> #image { opacity: 0.8;} #image:hover { opacity: 1.0; } </pre> <p><h3><a href="http://henryladcases.com/examples/opacity/" target="blank">View Demo</a></h3> </div> <div> <h3>#3</h3> <p></p> <p>Have you ever wanted to switch to a tool that is in sub-menu of the “shortcut” without clicking and holding the icon? Well if you simply hold <strong>SHIFT</strong> and then the “<strong>SHORTCUT KEY</strong>” of the tool it will scroll through all tools that are in the category, thus selected your desired tool.</p> </div> <div> <h3>#4</h3> <p><a href="http://css-tricks.com/what-beautiful-html-code-looks-like/"></a></p> <p>If you’ve ever wondered what <em>beautiful</em> <strong>html</strong> looks like, checkout this great article from <a href="http://css-tricks.com/what-beautiful-html-code-looks-like/">css-tricks </a>to find out!</p> </div> <div> <h3>#5</h3> <p><a href="http://www.tutorial9.net/news/sign-up-today-the-ultimate-resource-pack-for-designers-new/"></a></p> <p>Go ahead and sign up for this fantastic FREE ultimate designers resource pack, from tutorial9.</p> </div> <p>Sorry for the lack of posts, I have been working on my new site, <a href="http://thedesignersyard.com">TheDesignersYard.com</a>, which I will post screen shots and features very shortly!</p> <p><br /> <a href="http://feeds.feedburner.com/HenryDurdanDesignBlog">Go to Source</a></p> </article> <article> <h1>7 jQuery Cheatsheets For Every Designer & Developer to Have</h1> <p>Facebook-Web-Design — Sun, 27 Dec 2009 14:21:20 +0000</p> <p>jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. We have collected 7 jQuery Cheatsheets which are definite to come in handy for web developers and designers too.</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>WordPress Theme from Scratch – Day 2: PSD to HTML</h1> <p>Facebook-Web-Design — Sun, 27 Dec 2009 14:20:13 +0000</p> <p>A tutorial explains how to convert PSD layout to HTML file. You are on day 2 of the series WordPress Theme from Scratch.</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>HTML Default Hyperlink Colors</h1> <p>Facebook-Web-Design — Sat, 26 Dec 2009 16:40:15 +0000</p> <p>Ever work on hyperlinks on your webpage or blog and suddenly think, “What are the default colors for HTML hyperlinks?”. This tutorial answers this question with a handy reference on the default HTML hyperlink colors in their four states.</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>CSS Multiple Link Styles</h1> <p>Facebook-Web-Design — Fri, 25 Dec 2009 00:41:32 +0000</p> <p>How do you make your HTML hyperlinks look different from the default styles? This easy CSS hyperlink tutorial will show you how!</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>HTML5 Makes a Great Color Picker</h1> <p>Facebook-Web-Design — Wed, 23 Dec 2009 22:45:03 +0000</p> <p></p> <p>HTML5 is changing more than just websites — it’s changing the capabilities of browsers, as well. For example, a very clever use of the HTML5 canvas tag allows developer Heather Arthur’s <a href="https://addons.mozilla.org/en-US/firefox/addon/14328">Rainbow</a> color scheme add-on for Firefox to <a href="http://harthur.wordpress.com/2009/12/18/getting-the-color-scheme-of-a-website-using-canvas-and-hierarchical-clustering/">extract a color palette from any webpage</a>.</p> <p>Because browser add-ons — those in Firefox and Chrome anyway — can be built using HTML, they too can take advantage of HTML5’s new tools. In Arthur’s case, that means using the HTML5 <canvas> element to load the entire web page and then use the <code>getImageData</code> function to extract colors.</p> <p>Now it’s true there are already some add-ons (and desktop software) that can do this, but the shortcoming of most such add-ons is that they simply parse a page’s DOM and extract CSS styles to build a color palette. That works just fine — unless key page elements are actually images.</p> <p>Arthur’s method of putting the page in a canvas tag and then parsing that means that all the colors are extract since the entire page effectively becomes a single, parsable image.</p> <p>Of course behind the scenes there’s a good bit more going on. For example, the average web page in Arthur’s testing turned out the use somewhere in the neighborhood of 10,000 colors (think of all the shades actually present in a simple button gradient and you can see why the number is so high). Obviously, displaying that many colors would be useless. So, the Rainbow add-on uses a clustering algorithm to figure out the predominant shades on the page.</p> <p>Running algorithms tends to slow down your browser, but thanks to HTML5’s Web Workers component, the Rainbow add-on is remarkably snappy. The comments on Arthur’s post also suggest some further optimizations which would make it even faster.</p> <p>In the end, Arthur has created a plugin that makes an admirable replacement for some desktop software and, even better, showcases yet another possible way to use HTML5. If you’re interested in the actual add-on, head over to the <a href="https://addons.mozilla.org/en-US/firefox/addon/14328">download page</a>. (The add-on is still listed as experimental, but it hasn’t caused any problems for me on Firefox 3.6b5).</p> <p><strong>See Also:</strong></p> <ul> <li><a href="http://www.webmonkey.com/blog/How_HTML_5_Is_Already_Changing_the_Web">How HTML 5 Is Already Changing the Web</a></li> <li><a href="http://www.webmonkey.com/blog/Turn_Your_Vector_Art_Into_Canvas-based_Animations_With_Opacity">Turn Your Vector Art Into Canvas-based Animations With Opacity</a></li> <li><a href="http://www.webmonkey.com/blog/Google_Throws_Its_Weight_Behind_HTML_5">Google Throws Its Weight Behind HTML 5</a></li> <li><a href="http://www.webmonkey.com/blog/HTML_5_Support_by_Browser:_Opera_Continues_to_Lead_the_Pack">HTML 5 Support by Browser: Opera Continues to Lead the Pack</a></li> </ul> <p><a href="http://www.webmonkey.com/rss/wiki">Go to Source</a></p> </article> <article> <h1>jQuery Plugin Roundabout (- Shapes) – The interactive Image-Gallery</h1> <p>Facebook-Web-Design — Tue, 22 Dec 2009 16:41:57 +0000</p> <p>Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>HTML5 Video Autobuffers, Always</h1> <p>Facebook-Web-Design — Tue, 22 Dec 2009 03:05:03 +0000</p> <p>John Gruber of Daring Fireball says that the HTML5 video element, simple as it is, <a href="http://daringfireball.net/2009/12/html5_video_unusable">always autobuffers</a> on Safari, Chrome, and Firefox. It’s something <a href="http://stackoverflow.com/questions/1495146/audio-element-autobuffers-no-matter-what">others</a> have <a href="https://bugs.webkit.org/show_bug.cgi?id=25267">also</a> come up against. Any videos on the page will start downloading right away, regardless of the “autobuffer” attribute’s setting:</p> <blockquote><p> The HTML5 spec defines an autobuffer attribute for the video and other media elements (bold emphasis added):</p> <p><em>The autobuffer attribute is a boolean attribute. Its presence hints to the user agent that the author believes that the media element will likely be used, even though the element does not have an autoplay attribute. (The attribute has no effect if used in conjunction with the autoplay attribute, though including both is not an error.) <strong>This attribute may be ignored altogether.</strong></em></p> <p>It would appear, in my testing, that all three of these browsers take the spec up on the aforebolded offer to ignore this attribute. Even if you do not explicitly turn this attribute on, Safari, Chrome, and Firefox will still auto-buffer the content for your (and ) elements. There is no way to suppress this using HTML markup. </p> </blockquote> <p>As Gruber points out, this might seem like a good thing for fast UI: videos start playing as soon as the user wants them to. That would be true in a world of unlimited bandwidth, but for now, this feature is likely to be a massive bandwidth hog. There is a nice workaround, albeit one that peels back the utter simplicity of a single tag:</p> <blockquote> <ol> <li>In the HTML markup, rather than a <code></code> element, instead use an <code></code> element with the intended poster frame.</li> <li>Add an <code>onclick</code> JavaScript handler to the <code></code> element, which, when invoked, does some DOM jiggery-pokery to remove the just-clicked-upon <code></code> element and replace it with a <code></code> element that sources the intended video files.</li> </ol> <p>And, in fact, that is exactly what I resorted to for my PastryKit videos. Do a View Source on <a href="http://daringfireball.net/misc/2009/12/user_guide_demos">that page</a> to see the solution. </p> </blockquote> <p>It’s difficult to see becoming the web’s standard video component if every video buffers as soon as the page loads.</p> <div> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=wShq25cc7Yc:42crc8vA-Ig:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=wShq25cc7Yc:42crc8vA-Ig:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=wShq25cc7Yc:42crc8vA-Ig:D7DqB2pKExk"></img></a> </div> <p><a href="http://feeds2.feedburner.com/ajaxian">Go to Source</a></p> </article> <article> <h1>Move Elements With Style: JQuery Roundabout</h1> <p>Facebook-Web-Design — Sat, 19 Dec 2009 11:50:04 +0000</p> <p><a href="http://fredhq.com/projects/roundabout/" target="_blank"><strong>JQuery Roundabout</strong></a> is an <strong>impressive plugin</strong> that converts HTML elements into highly-customizable & <strong>interactive turntable-like (and more) interfaces</strong>.</p> <p>By default, it works with ordered/un-ordered lists but with a little configuration <strong>it can convert any nested HTML structure</strong>.</p> <p><a href="http://fredhq.com/projects/roundabout/" target="_blank"></a></p> <p>The plugin has a <strong>bunch of options</strong> for maximum customization like:</p> <ul> <li>optional starting element</li> <li>speed of the animations</li> <li>opacity & scale of objects</li> <li>ability to trigger animations from any element</li> <li>disabling clicks</li> <li>& more..</li> </ul> <p>With the help of a complimentary plugin, named <a href="http://fredhq.com/projects/roundabout-shapes/" target="_blank"><strong>Roundabout Shapes</strong></a>, it is possible create too many different types of interfaces.</p> <p><strong>jQuery Roundabout</strong> can have have various uses from displaying images to <a href="http://fredhq.com/projects/roundabout/demo/form" target="_blank">creating form interfaces</a>, <a href="http://fredhq.com/projects/roundabout/demo/angry" target="_blank">animations</a>, etc.</p> <p><strong>Special Downloads:</strong><br /> <a href="http://www.webresourcesdepot.com/?download=jBasket" target="_blank">Ajaxed Add-To-Basket Scenarios With jQuery And PHP</a><br /> <a href="http://www.webresourcesdepot.com/?download=Free-Admin-Template" target="_blank">Free Admin Template For Web Applications</a><br /> <a href="http://www.webresourcesdepot.com/?download=jQuery-Dynamic-Drag-Drop" target="_blank">jQuery Dynamic Drag’n Drop</a><br /> <a href="http://www.webresourcesdepot.com/?download=sTwitter-1-0" target="_blank">ScheduledTweets</a></p> <p><strong>Advertisements:</strong><br /> <a href="http://www.sslmatic.com" target="_blank">SSLmatic – Cheap SSL Certificates (from $19.99/year)</a><br /> <a href="http://twitter.com/umutm" target="_blank">Follow WebResourcesDepot At Twitter And Get More Resources!</a></p> <p> Tags: <a href="http://www.webresourcesdepot.com/tag/javascript/" title="Javascript" rel="tag">Javascript</a></p> <h4>Related posts</h4> <ul> <li><a href="http://www.webresourcesdepot.com/zoom-script-with-a-smart-interface-tjpzoom/" title="Zoom Script With A Smart Interface: TJPzoom (September 4, 2008)">Zoom Script With A Smart Interface: TJPzoom</a></li> <li><a href="http://www.webresourcesdepot.com/yui-slideshow-customizable-and-animated-slideshows/" title="YUI Slideshow: Customizable And Animated Slideshows (August 12, 2009)">YUI Slideshow: Customizable And Animated Slideshows</a></li> <li><a href="http://www.webresourcesdepot.com/wrap-content-around-images-jqslickwrap/" title="Wrap Content Around Images: jQSlickWrap (November 22, 2009)">Wrap Content Around Images: jQSlickWrap</a></li> <li><a href="http://www.webresourcesdepot.com/what-you-see-is-what-you-ajax-wavemaker/" title="What You See Is What You Ajax: WaveMaker (March 5, 2008)">What You See Is What You Ajax: WaveMaker</a></li> <li><a href="http://www.webresourcesdepot.com/wforms-easy-javascript-form-controls/" title="wForms: Easy JavaScript Form Controls (April 25, 2008)">wForms: Easy JavaScript Form Controls</a></li> </ul> <div> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=2X6oW2hPNAI:yIsLal6NjwE:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=2X6oW2hPNAI:yIsLal6NjwE:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=2X6oW2hPNAI:yIsLal6NjwE:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=2X6oW2hPNAI:yIsLal6NjwE:gIN9vFwOqvQ"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/webresourcesdepot">Go to Source</a></p> </article> <article> <h1>11 Points of Well – Designed PSD to HTML Service Provider’s Website</h1> <p>Facebook-Web-Design — Fri, 18 Dec 2009 18:33:44 +0000</p> <p>PSD to html service providers are expert in xhtml and css coding. Visitors not only expect quality code on their website but also an esthetically pleasing design and good information architecture. Like any other online business, its equally important for providers to increase their sales.</p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>Google: Mobile Gmail Exemplifies HTML5’s Power</h1> <p>Facebook-Web-Design — Thu, 17 Dec 2009 23:45:18 +0000</p> <p></p> <p>Over the last few months, Google has been busy optimizing its free Gmail service for mobile phones.</p> <p>In a post on the Google Mobile blog, the Gmail team highlights the <a href="http://googlemobile.blogspot.com/2009/12/iterative-web-app-feature-rich-and-fast.html">various optimizations</a> it has steadily been building into the mobile version of the webmail site. The result is a Gmail web app that exhibits many of the same behaviors one would expect from a native client application, and a site that now loads, according to Google, <a href="http://4.bp.blogspot.com/_V-5em911hQg/Syp1hXDeU0I/AAAAAAAAC1g/iaisB_HArjs/s1600-h/adn5hg7cbm_209c8n936hk_b.png">two to three times faster</a> than it did eight months ago in April, 2009.</p> <p>The biggest shift towards a faster, more sexy Gmail has been the proliferation of modern web browsers which support HTML5’s many advancements, according to Google engineering manager Alex Nicolaou, the author of Thursday’s post.</p> <p>Mobile Safari, the Android browser, Firefox Mobile and Opera Mobile are thoroughly modern browsers that embrace the emerging HTML5 standard, and the fact that more people are using them on their advanced phones means that Google can serve out faster, more app-like versions of its web apps.</p> <p>“So yes, HTML5 and the mobile web are clearly up to the task of building rich and powerful apps,” Nicolaou writes.</p> <p>His comments come during what has been a week of <a href="http://blogs.zdnet.com/Apple/?p=5547">intense debate</a> <a href="http://www.readwriteweb.com/archives/web_vs_native_mobile_apps.php">among developers</a> over which platform they should choose for their apps — native iPhone and Android apps, or the web.</p> <p>Of course, the web has the greatest reach since it means you can gain users on every platform where a browser exists. Web apps have other advantages, but you sacrifice some key things when you go the web route — a richer user interface, advanced scrolling behaviors and animations, specialized layouts and fonts, offline access and interactions with hardware sensors on the phone.</p> <p>The <a href="http://www.webmonkey.com/blog/A_Brave_New_Web_Will_Be_Here_Soon__But_Browsers_Must_Improve">great promise of HTML5</a> is that it will do away with those limitations, giving developers the ability to put new types of advanced interactions into their browser-based apps.</p> <p>HTML5’s arrival doesn’t quite signal the end of the downloadable, native application, but it does blur the line between the platform-based device operating system and the broader web operating system.</p> <p>Google recognizes that as well.</p> <p>“It’s also worth noting that as a worldwide mobile team, we’ll continue to build native apps where it makes sense,” Nicolau says. “But we’re incredibly optimistic about the future of the mobile web — both for developers and for the users we serve.”</p> <p><strong>See Also:</strong></p> <ul> <li><a href="http://www.webmonkey.com/blog/Google_Throws_Its_Weight_Behind_HTML_5">Google Throws Its Weight Behind HTML 5</a></li> <li><a href="http://www.webmonkey.com/blog/A_Brave_New_Web_Will_Be_Here_Soon__But_Browsers_Must_Improve">A Brave New Web Will Be Here Soon, But Browsers Must Improve</a></li> </ul> <p><a href="http://www.webmonkey.com/rss/wiki">Go to Source</a></p> </article> <article> <h1>Get Local Hotspot Recommendations With Nextstop for iPhone</h1> <p>Facebook-Web-Design — Tue, 15 Dec 2009 19:10:34 +0000</p> <p><a href="http://api.tweetmeme.com/share?url=http://mashable.com/2009/12/15/nextstop-iphone/&service=bit.ly"></a> <p>Want to find a good place to eat or shop while you’re visiting a new city? The mobile web has made that super easy, thanks to services like <a href="http://yelp.com" target="_blank">Yelp</a> and <a href="http://www.loopt.com" target="_blank">Loopt</a> and even social networking games like <a href="http://mashable.com/tag/foursquare">Foursquare</a>. However, most of those services take an approach that is more akin to a directory of every possible option, rather than a curated list of recommendations from locals or people you trust. </p> <p><a href="http://www.nextstop.com" target="_blank">Nextstop</a> is a website that lets people find, discover and share cool places to eat, visit or hang out in cities all over the world, and today the company is launching a <a href="http://blog.nextstop.com/2009/12/nextstop-for-iphone.html" target="_blank">fully-optimized iPhone website</a> that will make it easy for you to do just that directly from your phone, using geolocation.<br /> <span></span></p> <hr /> <h2>HTML5 In Action</h2> <hr /> <p>I talked to the founders of Nextstop yesterday, and they said that when developing a mobile version of the site, the biggest goal was to make the experience fast. Although they considered building a separate app specifically for Nextstop, they decided to take advantage of HTML5 and CSS3 features to make the site look and feel more like a native iPhone app, while having the ability to cache more data and keep the experience more consistent.</p> <p>Watch this video to get a sense of how the site works:</p> </p> <hr /> <h2>Worldwide Focus</h2> <hr /> <p>One of the downsides of the bigger location recommendation services is that they have a very U.S.-centric focus. If you’re in Italy or China or Australia, options and recommendations are more limited. To that end, Nextstop has embraced and cultivated a very world-centric approach. Its community has created nearly 1,000 tours of different places around the world — think of it like a travel guide — and the places that are shared and recommended are often local-approved.</p> <p>Even in my own city — Atlanta — I was impressed that, aside from a few mainstays, most of the recommendations were for excellent restaurants and places often missing from the more tourist-centric lists. </p> <p> </p> <p>Nextstop is small now, but it’s growing. Meanwhile, its technically impressive web app (it just works with the <a href="http://mashable.com/category/iphone">iPhone</a> right now, but there have been reports that it works on the Droid as well), as well as its commitment to the worldwide community, make this one impressive tool.</p> <p>Next time you’re looking for something cool to do in a new place — try out Nextstop on your phone.</p> <hr />Reviews: <a href="http://api.blippr.com/apps/471772-Australia" target="_blank">Australia</a>, <a href="http://api.blippr.com/apps/469362-iPhone" target="_blank">iPhone</a></p> <p>Tags: <a href="http://mashable.com/tag/geolocation/">geolocation</a>, <a href="http://mashable.com/tag/html5/">HTML5</a>, <a href="http://mashable.com/tag/iphone/">iphone</a>, <a href="http://mashable.com/tag/nextstop/">nextstop</a></p> <p><a href="http://feedads.g.doubleclick.net/~at/qvbjFVGhVB6Sed1WW9oFBQjXERU/0/da"></img></a><br /> <a href="http://feedads.g.doubleclick.net/~at/qvbjFVGhVB6Sed1WW9oFBQjXERU/1/da"></img></a></p> <div> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:D7DqB2pKExk"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:_e0tkf89iUM"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:P0ZAIrC63Ok"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:I9og5sOYxJI"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:CC-BsrAYo0A"></img></a> <a href="http://feeds.feedburner.com/~ff/Mashable?a=7FUCkfaxeQ4:QxmpPtjRKao:_cyp7NeR2Rw"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/Mashable">Go to Source</a></p> </article> <article> <h1>CSS3 animations and their jQuery equivalents</h1> <p>Facebook-Web-Design — Mon, 14 Dec 2009 22:40:33 +0000</p> <p><a href="http://feedads.g.doubleclick.net/~a/Pwoi3vWhiqqx3rgnu9qC5Foeslc/0/da"></img></a><br /> <a href="http://feedads.g.doubleclick.net/~a/Pwoi3vWhiqqx3rgnu9qC5Foeslc/1/da"></img></a></p> <p>As you might know already, I’m <a href="http://www.marcofolio.net/reviews/your_two_cents_css3_animation_and_lazy_loading.html" title="Your two cents - CSS3 animation and Lazy loading ">not a big fan of animations</a> that <a href="http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html" title="Sweet tabbed navigation using CSS3 ">are added in CSS3</a>. Yet, several people <a href="http://twitter.com/marcofolio" title="Follow me on Twitter">on Twitter</a> told me why they really like the feature. At that point, I wanted to play around with it too.</p> <p>At the same time, I wanted to see if those animations with CSS3 could be created with <a href="http://jquery.com/" title="jQuery">jQuery</a> too (especially for those browser that don’t support CSS3 animations yet). So today, I present you <strong>Five examples of CSS3 animations and their jQuery equivalents</strong>.</p> <div> </div> <p>This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don’t forget to check the demo/download the source code to view how everything is working under the hood.</p> <div><a href="http://demo.marcofolio.net/css3_jquery_animations/" title="Demo CSS3 animations and their jQuery equivalents"></a> <br /> <a href="http://www.marcofolio.net/downloads/css/css3_animations_and_their_jquery_equivalents/download.html" title="Download CSS3 animations and their jQuery equivalents"></a></div> <p> <strong>IMPORTANT NOTE:</strong><br /> Sadly, CSS3 and HTML5 aren’t the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it <strong>only works on Apples <a href="http://www.apple.com/safari/" title="Download Safari">Safari</a></strong> and <strong>Google <a href="http://www.google.com/chrome/" title="Download Chrome">Chrome</a></strong> as they are the only browsers supporting the CSS3 animations via the <code>-webkit-</code> prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.</p> <p>With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.</p> <p><a href="http://www.marcofolio.net/css/css3_animations_and_their_jquery_equivalents.html">Read more…</a></p> <div> <a href="http://feeds.feedburner.com/~ff/marcofolio?a=NV6KY_OPdls:EZMmB5vXwjc:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/marcofolio?a=NV6KY_OPdls:EZMmB5vXwjc:bcOpcFrp8Mo"></img></a> <a href="http://feeds.feedburner.com/~ff/marcofolio?a=NV6KY_OPdls:EZMmB5vXwjc:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/marcofolio?a=NV6KY_OPdls:EZMmB5vXwjc:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/marcofolio?a=NV6KY_OPdls:EZMmB5vXwjc:V_sGLiPBpWU"></img></a> </div> <p><a href="http://feeds2.feedburner.com/marcofolio">Go to Source</a></p> </article> <article> <h1>Use Google For Text-to-Speech Translations in the Browser</h1> <p>Facebook-Web-Design — Mon, 14 Dec 2009 19:35:17 +0000</p> <p></p> <p>Google Translate has rolled a out several new features, including the ability to <a href="http://googleblog.blogspot.com/2009/11/new-look-for-google-translate.html">hear your translated English text</a> spoken by a computerized voice.</p> <p>For maximum cross-browser compatibility, Google Translate embeds text-to-speech mp3s using Flash. However, web developer Weston Ruter has already figured out how to grab the audio files for use on any webpage and uses the <a href="http://weston.ruter.net/projects/google-tts/#text=Hello%2C+World!">HTML5 audio tag to embed them in his demo</a>.</p> <p>The new Translate audio tools generate (rough) pronunciations of whatever text is entered the end of this URL:</p> <pre>http://translate.google.com/translate_tts?tl=en&q=text</pre> </p> <p>Just pass along the phrase you’d like to hear instead of “text” at the end of the URL and you’ll get an mp3 file like <a href="http://translate.google.com/translate_tts?tl=en&q=webmonkey%20is%20awesome">this one</a>. You may have to try a couple of different browsers to get a translated file that works flawlessly, (Not surprisingly, it works especially well in Chrome). With a tool like this, the urge to get silly is irresistible, as Twitter user Brad Cohen has done by feeding Google Translate some <a href="http://twitter.com/supnah/status/6669341839">Justin Timberlake lyrics</a>.</p> <p>Take one of these mp3s and embed it using HTML5’s audio tag — as Ruter has done on his site — and you’ve got an instant, mobile translation service that’ll work on the iPhone, Android and other Webkit-based mobile browsers.</p> <p>The iPhone handles Ruter’s example quite well, though the interface is slightly awkward — Mobile Safari brings up a new overlay page to play the audio. Still, despite a few quirks, having a text-to-speech generator available on the web offers developers quite a few browser-based possibilities for a task previously relegated to desktop apps, or, otherwise, full-fledged mobile apps like the translation tools available for the iPhone and Android devices.</p> <p>The biggest catch at the moment is that Google Translate’s text-to-speech feature is only available in English. But as with most Google services, the initial limitations are likely to disappear before too long.</p> <p>Also part of the announcement, Google Translate now performs translations as you type — no need for the “translate” button — and there’s also a new “Show romanization” to read the text written phonetically in English. This works with all non-Roman languages except for Hebrew, Arabic and Persian.</p> <p><strong>See Also:</strong></p> <ul> <li><a href="http://www.webmonkey.com/blog/Google_Translate:_Bringing_%22Engrish%22_To_Your_Search_Results">Google Translate: Bringing “Engrish” To Your Search Results</a></li> <li><a href="http://www.webmonkey.com/blog/Google_Reader_s_New_Translate_Feature_Helps_Overcome_Language_Barriers">Google Reader’s New Translate Feature Helps Overcome Language Barriers</a></li> <li><a href="http://www.webmonkey.com/blog/W3C_Drops_Audio_and_Video_Codec_Requirements_From_HTML_5">W3C Drops Audio and Video Codec Requirements From HTML 5</a></li> <li><a href="http://www.webmonkey.com/blog/HTML_5_Support_by_Browser:_Opera_Continues_to_Lead_the_Pack">HTML 5 Support by Browser: Opera Continues to Lead the Pack</a></li> </ul> <p><a href="http://www.webmonkey.com/rss/wiki">Go to Source</a></p> </article> <article> <h1>Five Technologies That Will Keep Shaping the Web in 2010</h1> <p>Facebook-Web-Design — Sun, 13 Dec 2009 16:20:47 +0000</p> <p>As we’re coming to the end of this year, everyone starts to look towards the next one and there will no doubt be an upsurge of articles predicting the web trends of 2010 in the next days to come. However, in this article, we’ll be talking about what’s actually <strong>driving these trends now</strong>, and what they mean for the future of the internet.</p> <p></p> <p><span></span></p> <h3>1. CSS3, HTML5 and Fonts as a Service</h3> <p></p> <p>CSS3, HTML5, and Fonts as a Service such as <a href="http://typekit.com/">Typekit</a> that cater to web browsers that already support the <a href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule">@font-face rule</a>, are giving web designers the creative freedom that they have been coveting for a long time.</p> <p>CSS3 is opening up various new options for styling content on the web, from <a href="http://www.css3.info/preview/multiple-backgrounds/">multiple backgrounds</a> on page elements, better ability to select and style elements with greater specificity, and <a href="http://www.css3.info/webkit-provides-implementation-of-css-based-gradients/">color gradients</a> without reliance on static graphics, to simpler aesthetical improvements such as support for rounded corners without the need for complicated <a href="http://www.alistapart.com/articles/slidingdoors/">sliding doors techniques</a> or JavaScript. </p> <p>HTML5 is slowly but surely changing the way we mark up our pages, bringing us closer to the holy grail of the semantic web, opening up native support for open format multimedia such as video and audio, and bringing us better ways to interoperate with the content of a website.</p> <p>Another change that web designers have been wishing for is being able to use any font on a web page, without using static <a href="http://www.mezzoblue.com/tests/revised-image-replacement/">CSS background image replacement</a> or relying on JavaScript and Flash. The development of tools like Typekit and greater support for the @font-face rule are enabling site builders to use a much wider range of fonts in their design.</p> <h4>So what will change?</h4> <p>These are all web technologies that are guaranteed to make the web a more aesthetically pleasing place. Of course, expect these new things to be misused by Sunday driver designers; there will be some horrible font choices and misemployed color gradients that will produce unreadable and tacky page designs, but it’s the opportunities that they open up for capable and creative designers that will be most interesting.</p> <p>Some reading for you:</p> <ul> <li><a href="http://www.typekit.com">Typekit</a></li> <li><a href="http://www.css3.info">CSS3.info</a></li> <li><a href="http://westciv.com/tools/gradients/">Play around with CSS3</a></li> <li><a href="http://www.alistapart.com/articles/get-ready-for-html-5/">Get Ready for HTML 5</a></li> <li><a href="http://www.readwriteweb.com/archives/5_exciting_things_in_html_5.php">5 Exciting Things to Look Forward to in HTML 5</a> written by Chief Editor of Six Revisions, Jacob Gube, for ReadWriteWeb</li> </ul> <h3>2. Ways we browse the web</h3> <p></p> <p>The browser landscape is alive and well, with better and faster web browsers such as Google Chrome, Firefox, Safari, and Opera. Web users today are provided with many choices that will surely drive competition and one-upping from these companies – stressful for their developers, but great for consumers.</p> <p>The browser wars is in full force, and unlike the preceding browser wars where Internet Explorer dethroned other browsers to take hold of a majority browser share, IE is shaping up to being the "dethronee" this time around.</p> <p>And changes in browsing the web aren’t just limited to the web browser competition, the way we digest content from the web is increasingly becoming removed from the traditional "sit in front of your desktop" way. Smart phones are becoming more common, TV’s are becoming web-enabled–and as are gaming consoles such as the PS3 and <a href="http://en.wikipedia.org/wiki/Netbook">Netbooks</a> and mobile devices such as the iPhone and the Droid are giving users an experience on a smaller screen than a traditional laptop.</p> <p>Moreover, browsers themselves are changing. The launch of Google Chrome brought the <a href="http://webkit.org/">WebKit</a> engine, a layout engine that has a big portion of CSS3 and HTML5 specifications already implemented, to Windows-based computers better than Apple’s Safari port to Windows, and it may yet be a bigger milestone than many first thought. With Google aiming for a <a href="http://www.maximumpc.com/article/news/google_expects_10_chrome_market_share_two_years">10% share of the market over the next couple of years</a>, a big push for users may well be coming. A large shift from the dominant web browser, Internet Explorer, is underway and may be successful next year. In Germany, Mozilla Firefox is close to <a href="http://www.spiegel.de/fotostrecke/fotostrecke-49335-4.html">overtaking IE’s market share</a> as we speak.</p> <p>These factors are revising the way we think about web design and accessibility. Do you have a mobile version of your site? What does it look like on a small screen? What does it look like on a large screen? What does it look like in a WebKit versus Gecko versus Trident browser layout rendering engine?</p> <p>Attitudes towards viewing of websites across different media is changing as well, designers are increasingly becoming of the opinion that designs <a href="http://shouldwebsiteslookthesameinallbrowsers.com/">do not need to render the same everywhere</a>, nor do they need to give the same user experience across all web browsers.</p> <h4>So what will it change?</h4> <p>There’s a good chance that you’ll start to see websites that don’t look the same in every browser. Techniques for <a href="http://en.wikipedia.org/wiki/Progressive_enhancement">progressive enhancement</a> are more commonplace than before, giving users of modern web browsers a better web experience than those who will not or cannot use them. Furthermore, there’s already widespread acceptance towards <a href="http://mashable.com/2009/07/16/ie6-must-die/">foregoing support for antiquated browsers</a>, putting the burden of getting users upgraded on the browser makers, and not the designers. This type of forward thinking will only grow in the upcoming year. What’s more, the changes in the way we view the web will shift focus to content, functionality and accessibility, but by no means at the expense of good, interesting and inspiring design.</p> <h3>3. Social media</h3> <p></p> <p>No one can deny that 2009 has been a big year for social media: Twitter, for example, has become the buzzword in many a boardroom and office. It’s obvious that it will continue to a big part of the web in the future. </p> <p>In many ways, the growth of platforms such as Twitter and Facebook has led the web to be much more community-oriented. Big changes could happen within social media and, no doubt, will be led by monetization of the media.</p> <p>One of the big questions revolves around how you measure the impact and value of social media and how to get that value back. How valuable are 1,000 twitter followers? Do you start charging for the service? Answering all these questions will lead to significant changes over the next year in the social media arena. </p> <p>Along with these changes will come increased focus in getting information in real-time. Google is already discussing <a href="http://googleblog.blogspot.com/2009/12/relevance-meets-real-time-web.html">real-time search</a> to leverage the immediate and breaking information that can be found on sites like Twitter. How these changes are integrated into the current web system, especially in terms of search engine technology, could precipitate into some interesting developments and innovation in the way we seek information online. </p> <h4>So what will it change?</h4> <p>With more people participating in the creation of information on the web, the way in which we obtain information will shift from being from a singular source, into a more community-created source. Looking for information about, say, a car repair shop will show you recent tweets and Facebook updates about that company instead of outdated and static information.</p> <h3>4. JavaScript</h3> <p></p> <p>Whilst CSS3/HTML5 has started to step on the toes of JavaScript, JavaScript itself has started to inch into the territory of Flash. The growth of frameworks such as jQuery and has made rich client-side interaction and asynchronous/seamless user experiences a reality. This leads to easier deployments of web applications, which in turn, increases competition, which in turn, leads to innovation.</p> <p>JavaScript is already stepping into what, in the past, we would associate as being Flash’s territory, such as interactive <a href="http://gamequery.onaluf.org/#demos">games</a> (which can be used for training and distance-learning applications) and complex and interactive <a href="http://www.highcharts.com/">data visualization</a>. It should also enable us to replicate rich interfaces and flash type experiences in a much more accessible way.</p> <p>And very recently, 10 years after the last major revision, JavaScript (known as ECMAscript in web standards organizations) has just finished a <a href="http://blogs.msdn.com/jscript/archive/2009/04/09/a-major-milestone-in-javascript-standardization.aspx">major revision</a> of its specifications for the language. Once browser companies adopt these standards, web developers will be provided with more tools to improve their capabilities in creating web applications.</p> <h4>So what will it change?</h4> <p>Because CSS3 and HTML5 will replace a lot of what JavaScript is doing now (i.e. complex element selections, dynamic rounded corners, handling real-time editable web pages), we will see a surge in JavaScript developing into being focused solely on handling programming logic of webapps on the client-side. With the news of the major revision on JS specifications, we will see a progression towards better web applications that can interoperate much better with other web apps (for example, a major goal for the new set of specs is the <a href="http://en.wikipedia.org/wiki/ECMAScript#ECMAScript.2C_5th_Edition">security of JSON objects</a>).</p> <h3>5. Software as a Service (SaaS)</h3> <p>Software as a Service business models have been knocking around for years. Top-notch SaaS such as <a href="http://37signals.com/">37 Signals products</a> and <a href="http://www.google.com/enterprise/">Google Enterprise</a> are more commonplace now than ever before.</p> <p>The competition is fierce; the technologies are becoming affordable and requiring little upfront costs, which gives the little guys a chance to compete with the bigger guys. In the next year, we’ll see this competition increase, and hopefully, the outcome is innovation in web apps.</p> <h4>So what will it change?</h4> <p>SaaS’s as a business model will continue to replace more traditional software that require you to install and run them on your desktop. With so much more people connected to the internet, the demand is on internet-enabled, interoperable applications. In 2010, we are in for some surprise improvements driven by a need to stand out from the crowd.</p> <h3>What are your predictions for the next year?</h3> <p>What do you think will be the catalysts for change over the next year? How do you think the web technologies we have now will evolve? Leave us a comment!</p> <h3>Related Content</h3> <ul> <li><a href="http://sixrevisions.com/usabilityaccessibility/creating-a-timeless-user-experience/">Creating a Timeless User Experience</a></li> <li><a href="http://sixrevisions.com/tools/useful_gadgets_mobile_computing/">10 Useful Gadgets for Mobile Computing</a></li> <li><a href="http://sixrevisions.com/usabilityaccessibility/10-simple-web-accessibility-tips-you-can-do-today/">10 Simple Web Accessibility Tips You Can Do Today</a></li> <li><em>Related categories</em>: <a href="http://sixrevisions.com/category/web-development/">Web Development</a> and <a href="http://sixrevisions.com/category/user-interface/">User Interface</a></li> </ul> <h3>About the Author</h3> <p><span><strong>Dave Sparks</strong> is a web designer and developer who lives in Kendal in the Lake District working for <a href="http://www.armitageonline.co.uk">Armitage Online</a> and occasionally freelancing. He has a strong background in PHP dvelopment and can be found writing about various web topics on his blog at <a href="http://www.kamikazemusic.com"><strong>Kamikazemusic.com</strong></a> and twittering as <a href="http://www.twitter.com/dsparks83"><strong>twitter.com/dsparks83</strong></a>.</span></p> <div> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=2FHlQYc0xHY:QwmFNDJ4ceo:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=2FHlQYc0xHY:QwmFNDJ4ceo:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=2FHlQYc0xHY:QwmFNDJ4ceo:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=2FHlQYc0xHY:QwmFNDJ4ceo:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=2FHlQYc0xHY:QwmFNDJ4ceo:7Q72WNTAKBA"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/SixRevisions">Go to Source</a></p> </article> <article> <h1>110+ Free Vector Letter-Pressed Icons</h1> <p>Facebook-Web-Design — Sat, 12 Dec 2009 17:20:04 +0000</p> <p> <a href="http://creativenerds.co.uk/" target="_blank"><strong>Creative Nerds</strong></a>, a blog focused on design inspiration, is sharing <strong><a href="http://creativenerds.co.uk/freebies/330-free-letter-pressed-icons/" target="_blank">100+ free letter pressed icons</a></strong> in <strong>PSD</strong> format.</p> <p> This beautiful set comes in <strong>3 different styles</strong>. It includes icons of social bookmarking, actions & other various shapes.</p> <p> They are free to be used in both personal & commercial projects.</p> <p> <a href="http://creativenerds.co.uk/freebies/330-free-letter-pressed-icons/" target="_blank"></a></p> <p><strong>Special Downloads:</strong><br /> <a href="http://www.webresourcesdepot.com/?download=jBasket" target="_blank">Ajaxed Add-To-Basket Scenarios With jQuery And PHP</a><br /> <a href="http://www.webresourcesdepot.com/?download=Free-Admin-Template" target="_blank">Free Admin Template For Web Applications</a><br /> <a href="http://www.webresourcesdepot.com/?download=jQuery-Dynamic-Drag-Drop" target="_blank">jQuery Dynamic Drag’n Drop</a><br /> <a href="http://www.webresourcesdepot.com/?download=sTwitter-1-0" target="_blank">ScheduledTweets</a></p> <p><strong>Advertisements:</strong><br /> <a href="http://www.sslmatic.com" target="_blank">SSLmatic – Cheap SSL Certificates (from $19.99/year)</a><br /> <a href="http://twitter.com/umutm" target="_blank">Follow WebResourcesDepot At Twitter And Get More Resources!</a></p> <p> Tags: <a href="http://www.webresourcesdepot.com/tag/psd/" title="PSD" rel="tag">PSD</a></p> <h4>Related posts</h4> <ul> <li><a href="http://www.webresourcesdepot.com/web-elements-kit-psd-for-designing-faster/" title="Web Elements Kit (PSD) For Designing Faster (July 1, 2009)">Web Elements Kit (PSD) For Designing Faster</a></li> <li><a href="http://www.webresourcesdepot.com/web-applications-classic-button-set/" title="Web Applications Classic Button Set (April 16, 2008)">Web Applications Classic Button Set</a></li> <li><a href="http://www.webresourcesdepot.com/sweetie-cute-and-clear-icons/" title="Sweetie: Cute And Clear Icons (March 22, 2008)">Sweetie: Cute And Clear Icons</a></li> <li><a href="http://www.webresourcesdepot.com/scalable-css-based-breadcrumbs/" title="Scalable CSS-Based Breadcrumbs (February 11, 2009)">Scalable CSS-Based Breadcrumbs</a></li> <li><a href="http://www.webresourcesdepot.com/psd-to-html-by-psd2html/" title="Review: PSD To HTML By PSD2HTML (June 26, 2008)">Review: PSD To HTML By PSD2HTML</a></li> </ul> <div> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=3L1vO14UYbI:tdIz2Fzpklo:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=3L1vO14UYbI:tdIz2Fzpklo:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=3L1vO14UYbI:tdIz2Fzpklo:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/webresourcesdepot?a=3L1vO14UYbI:tdIz2Fzpklo:gIN9vFwOqvQ"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/webresourcesdepot">Go to Source</a></p> </article> <article> <h1>A Collection of HTML5 Resources and Tutorials</h1> <p>BlogPoster — Fri, 11 Dec 2009 19:56:40 +0000</p> <div><a href="http://speckyboy.com"></a></div> <div></div> <p>By now everyone has heard of HTML 5 and its new functionalities. Pretty exciting isn't it… also a little daunting.<br /> Of course, there are two sides to the excitement, most developers love it, others feel it has come to soon and we are not ready for it. What ever your feelings are on this issue, it doesn't matter, it is here, so lets work with it.<br /> In this post we have collected as many helpful resources as we could on HTML5. As can be expected by any young language, the volume of tutorials and resources are a little thin on ground, but what tutorials we have collected are of a high standards are and the resources are indispensable and useful.<br /> If you like watching paint dry and taking the longer road, you can of course read all about and stay up to date with HTML5 on the W3C here: <a href="http://www.w3.org/TR/html5/spec.html">HTML 5 – A vocabulary and associated APIs for HTML and XHTML</a>.</p> <h5><a href="http://www.vimeo.com/6691519">Introduction to HTML 5 Video</a></h5> </p> <p>This is an educational “Introduction to HTML 5″ video that goes over many of the major aspects of this new standard and the video is choc full of demos and sample source code.</p> <h5><a href="http://www.vimeo.com/5725632">HTML5 + CSS3 = Awesome on Vimeo</a></h5> </p> <p>HTML5 is the next version of the web markup standard. CSS3 is the next generation styling language. Together, they make will make the web a great experience.</p> <h5><a href="http://woork.blogspot.com/2009/08/css-code-structure-for-html-5-some.html">CSS Code Structure for HTML 5: Some Useful Guidelines</a></h5> <p><a href="http://woork.blogspot.com/2009/08/css-code-structure-for-html-5-some.html"></a>In this post they offer some useful guidelines about how to implement a well organized CSS code structure in view of the introduction of the HTML5 markup language. They are not general rules but simple suggestions that you can follow in order to improve the readability, manageability, and general organization of CSS code.</p> <h5><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/">HTML 5 and CSS 3: The Techniques You’ll Soon Be Using</a></h5> <p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/"></a>In this tutorial, you are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how you will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. </p> <h5><a href="http://24ways.org/2009/have-a-field-day-with-html5-forms">Have a Field Day with HTML5 Forms</a></h5> <p><a href="http://24ways.org/2009/have-a-field-day-with-html5-forms"></a>In this indepth tutorial you’re going to take a look at how to style a beautiful and simple payment HTML5 form using some advanced CSS and latest CSS3 techniques.<br /> You are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids.</p> <h5><a href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/">Coding a HTML 5 Layout From Scratch</a></h5> <p><a href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/"></a>You will create a very basic web layout which covers most of the elements you can start to code using HTML5. Basically, you will be building the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.</p> <h5><a href="http://www.spicywebdesign.com/html-5-tutorial-a-simple-web-page-layout/">HTML 5 Tutorial – A Simple Web Page Layout</a></h5> <p><a href="http://www.spicywebdesign.com/html-5-tutorial-a-simple-web-page-layout/"></a>This easy HTML 5 tutorial was written to demonstrate how to create a simple and elegant web page layout using HTML 5 elements and structure. By the end of this HTML 5 web page layout tutorial, you will be able to create a valid HTML 5 web page layout that is similiar to a 3 column blog layout that will validate.</p> <h5><a href="http://dev.opera.com/articles/view/html-5-canvas-the-basics/">HTML 5 Canvas – The Basics</a></h5> <p><a href="http://dev.opera.com/articles/view/html-5-canvas-the-basics/"></a>HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.<br /> Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML, follow this tutorial to find out how to do this.</p> <h5><a href="http://html5doctor.com/designing-a-blog-with-html5/">Designing a Blog with HTML5</a></h5> <p><a href="http://html5doctor.com/designing-a-blog-with-html5/"></a>Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, this tutorial look at marking up a blog.</p> <h5><a href="http://designshack.co.uk/articles/html/html5-the-basics-1-of-4">HTML5: The Basics</a></h5> <p><a href="http://designshack.co.uk/articles/html/html5-the-basics-1-of-4"></a>This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.</p> <h5><a href="http://diveintohtml5.org/">Dive Into HTML5</a></h5> <p><a href="http://diveintohtml5.org/"></a>Dive Into HTML5 is by no means complete, it is an ongoing manual that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards and has been written by Mark Pilgrim.</p> <h5><a href="http://html5doctor.com/">HTML5 Doctor, helping you implement HTML5 today</a></h5> <p><a href="http://html5doctor.com/"></a>The HTML5 Doctor is quite possibly the best HTML5 currently available. They publish articles relating to HTML5 and it’s semantics and how to use them, here and now. They also invite questions, in the form of ‘Ask the doctor’ to help answer people’s queries and questions. Answers will be posted in the form of articles for all to learn from.</p> <h5><a href="http://www.modernizr.com/">Modernizr</a></h5> <p><a href="http://www.modernizr.com/"></a>Modernizr is easiest way to start using some of the emerging standards of HTML 5 and CSS 3, while maintaining support for older browsers. It is a JavaScript library that detects native implementations of HTML5 and CSS3 features within browsers.<br /> Basically, Modernizer is a very cool tool that questions if the browser in question supports the feature you’re targeting, then itr adds a class to the body tag so that you can specifically target that specific browser.<br /> Please note, Modernizr doesn’t actually magically enable properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.</p> <p><strong><a href="http://webdesignernotebook.com/css/how-to-use-modernizr/">How to use Modernizr</a></strong><br /> In this short tutorial, from <a href="http://webdesignernotebook.com/css/how-to-use-modernizr/">webdesignernotebook.com</a>, you will learn how to apply, step-by-step, Modernizr to maximum effect on your sites. </p> <h5><a href="http://a.deveria.com/caniuse/">When can I use…</a></h5> <p><a href="http://a.deveria.com/caniuse/"></a>“When can I use…” is a service that shows tables of a variety of current and upcoming web technologies (CSS3, HTML5…). It covers all major browsers (Internet Explorer, Firefox, Safari, Opera and Chrome), as well as different versions from different eras eras (past, present, near and far future).<br /> The page can be customized to show only certain browsers/features/eras, so you have the option to ignore lesser used browsers or for that matter the most used one (it’s a lot of fun to pretend Internet Explorer doesn’t exist). There is also a summary at the bottom of the page, which shows what percentage of the displayed features are supported. </p> <h5><a href="http://www.findmebyip.com/litmus/">Web Designers' Browser Support Checklist</a></h5> <p><a href="http://www.findmebyip.com/litmus/"></a>This great resource that displays the current browser support for HTML5 (including Web Forms 2.0) and CSS3 (including CSS3 selectors).</p> <h5><a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/">HTML 5 Cheat Sheet (PDF)</a></h5> <p><a href="http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/"></a>This is a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.</p> <h5><a href="http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html">HTML 5 Visual Cheat Sheet by Woork</a></h5> <p><a href="http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html"></a>This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style of this cheat sheet allows you to find at a glance everything you are looking for.</p> <h5><a href="http://adactio.com/extras/pocketbooks/html5/">HTML 5 Pocket Book</a></h5> <p><a href="http://adactio.com/extras/pocketbooks/html5/"></a>This is a quick and printable pocket reference for HTML 5. Very, very useful.</p> <h5><a href="http://html5doctor.com/glossary/">HTML5 Glossary</a></h5> <p><a href="http://html5doctor.com/glossary/"></a>The HTML5 Glossary is a comprehensive references of elements that are new or have been redefined in HTML5.</p> <h5><a href="http://html5gallery.com/">HTML5 Gallery</a></h5> <p><a href="http://html5gallery.com/"></a>html5 Gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that you can see how people have interpreted the specification and how it has been implemented. The secondary aim is to help people learn about html5 and how it should be used. </p> <h5><a href="http://dev.w3.org/html5/html-author/">HTML 5 Reference</a></h5> <p><a href="http://dev.w3.org/html5/html-author/"></a>This document illustrates how to write HTML 5 documents, focusing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.</p> <h5><a href="http://html5demos.com/">HTML 5 Demos and Examples</a></h5> <p><a href="http://html5demos.com/"></a>HTML 5 experimentation and demos that have been hacked together by Remy Sharp, that demonstrate the power of HTML5. Make sure you are using a browser that supports these features.</p> <h5>Further Reading</h5> <p><strong><a href="http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/">HTML5 and The Future of the Web</a></strong><br /> In this article, from <a href="http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/">Smashing Magazine</a>, they offer some useful tips and insight into HTML5 and to hopefully help ease the inevitable pain that comes with transitioning to a slightly different syntax. This article covers the basics and a comprehensive insight into the new elements that HTML5 offers.<br /> By Tim Wright on Smashing Magazine.</p> <p><strong><a href="http://carsonified.com/blog/design/css3-design/steve-smith-on-html5-and-css3/">Steve Smith on HTML5 and CSS3</a></strong><br /> Steve Smith is a recognized authority on front-end development and interface design and in this interview, from Carsonified, offers advice and offers his extensive knowledge on HTML5.<br /> By Keir Whitaker on <a href="http://carsonified.com/blog/design/css3-design/steve-smith-on-html5-and-css3/">Carsonified</a>.</p> <p><strong><a href="http://www.legendscrolls.co.uk/webstandards/html5">HTML 5 Webpage Structure</a></strong><br /> This article provides a little history of how and why HTML 5 is in existence and describes the code that is used for HTML 5 for Web Authors. </p> <p><strong><a href="http://www.css3.info/html-5-css-3/">A Marriage Made in Heaven? HTML5 and CSS3</a></strong><br /> by Frederick Townes from <a href="http://www.css3.info/html-5-css-3/">CSS3.info</a>.</p> <p><strong><a href="http://perishablepress.com/press/2009/07/19/power-of-html5-css3/">The Power of HTML5 and CSS3</a></strong><br /> by Jeff Starr from <a href="http://perishablepress.com/press/2009/07/19/power-of-html5-css3/">Perishable Press</a>.</p> <p><strong><a href="http://www.alistapart.com/articles/semanticsinhtml5">Semantics in HTML 5</a></strong><br /> by John Allsopp from alistapart.com.</p> <p><strong><a href="http://articles.sitepoint.com/article/html-5-snapshot-2009">Yes, You Can Use HTML 5 Today</a></strong><br /> by Bruce Lawson from <a href="http://articles.sitepoint.com/article/html-5-snapshot-2009">sitepoint.com</a>.</p> <p><strong><a href="http://www.techradar.com/news/internet/why-html5-is-here-today-and-not-2022-654828">Everything you need to know about HTML5</a></strong><br /> By Remy Sharp on <a href="http://www.techradar.com/news/internet/why-html5-is-here-today-and-not-2022-654828">Techradar.com</a>.</p> <h5>You might also like…</h5> <p><a href="http://speckyboy.com/2009/12/09/25-graph-and-chart-solutions-for-web-developers/">25 Graph and Chart Solutions for Web Developers »</a><br /> <a href="http://speckyboy.com/2009/12/03/20-professional-jquery-image-gallery-plugins/">20 Professional jQuery Image Gallery Plugins »</a><br /> <a href="http://speckyboy.com/2009/11/16/20-easy-to-use-jquery-text-effects-and-animations/">20+ Easy to Use jQuery Text Effects and Animations »</a><br /> <a href="http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/">25 Useful jQuery Tooltip Plugins and Tutorials »</a><br /> <a href="http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/">20 jQuery Plugins and Tutorials to Enhance Forms »</a><br /> <a href="http://speckyboy.com/2009/08/06/30-tutorials-combining-both-wordpress-and-jquery/">30 Tutorials Combining Both WordPress and jQuery »</a><br /> <a href="http://speckyboy.com/2009/07/17/25-fresh-and-new-jquery-plugins-and-tutorials/">25 Fresh and New jQuery Plugins and Tutorials »</a><br /> <a href="http://speckyboy.com/2009/07/15/50-useful-tools-and-generators-for-easy-css-development/">50 Useful Tools and Generators for Easy CSS Development »</a><br /> <a href="http://speckyboy.com/2009/07/02/20-resources-and-tutorials-for-creative-forms-using-css/">20+ Resources and Tutorials for Creative Forms using CSS »</a><br /> <a href="http://speckyboy.com/2009/06/08/24-css-in-some-cases-with-jquery-navigation-and-menu-tutorials/">24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »</a></p> <p><a href="http://feedads.g.doubleclick.net/~a/rWc0SEQzU49kpdGxro3nypsZvgQ/0/da"></img></a><br /> <a href="http://feedads.g.doubleclick.net/~a/rWc0SEQzU49kpdGxro3nypsZvgQ/1/da"></img></a></p> <p><br /> <a href="http://feeds2.feedburner.com/speckboy-design-magazine">Go to Source</a></p> </article> <article> <h1>60 Second Google Update! – What’s New?</h1> <p>Facebook-Web-Design — Fri, 11 Dec 2009 19:50:41 +0000</p> <p>If you are like pretty much everyone else in the world, you interact with the big “G” on the daily. However, you may not be aware of the new and cool things that they are doing! So that is where Bit Rebels is here to help! I am about to go through some of the latest happenings at Google so you don’t have to hunt for it!</p> <div> </div> <p><em>Image Credit: <a href="http://www.evisibility.com/blog/say-hello-to-the-new-google-bot-logo/" target="_blank">google bot</a></em></p> <div> </div> <h2>Bye Bye Google Gears, HTML5 is the future!</h2> <p></p> <p>Late last month Google announced to the world that it would be retiring the Google Gears platform, which gives you offline access to your Gmail and other popular Google Apps so that it has more of a ‘desktop’ experience, in favor of HTML5’s offline storage capabilities. </p> <p>Google has said that Gears will continue to be supported for sites that already use it. However, they expect developers to use HTML5 for these features moving forward as it’s a standards-based approach that will be available across all browsers.</p> <h2>Google Goes Minimal</h2> <p></p> <p>If you have gone to the google home page in the last month (<a href="http://www.google.com" target="_blank">http://www.google.com</a> for those of you that just search from the browser and have forgotten the home page URL) you will notice that if you let the page load, and have your mouse cursor in up where the address bar is. All you see is what is in the image above, and then if you mouse into the page, everything fades in beautifully(With the power of Javascript!!)! </p> <p>A Very small, but cool feature.</p> <h2>Google gets Real, Real-Time!</h2> <p></p> <p>Earlier this week <a href="http://googleblog.blogspot.com/2009/12/relevance-meets-real-time-web.html" target="_blank">Google announced a new service</a> that will offer streaming results for searches, incorporating real-time updates from web pages and social networking partners. It has in fact been implemented and so far it rocks, I discovered yesterday that you can Google someones twitter handle and get 4 or so of their latest tweets, and you can even delve into a larger list of their latest tweets! Great for people who have twitter blocked at work, you can still see what your favorite tweeps are up to! <a href="http://www.google.com/search?q=%40andysowards&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a" target="_blank">Check it out</a>!</p> <p>I am very excited to see where this will take us, as Google announced its partners will be Facebook, MySpace, FriendFeed, Jaiku and Identi.ca — along with Twitter. Real-Time Search is exciting, who knows what we will be able to do with all of this information aggregated into Google searches!</p> <h2>Google Chrome for Mac and Linux Announced!</h2> <p></p> <p>Finally! I was a huge fan of Google Chrome on Windows, just because it was soooooo fast, and everything was so simple and clean, it just made browsing the web a joy. When I got my Macbook pro earlier this year I was saddened that it wasn’t available for mac! But that time has passed. Google Chrome is now Available to download for Macs running OSX 10.5 (Intel only), It’s also available for Linux!</p> <p>Other exciting features added include the <a href="https://chrome.google.com/extensions" target="_blank">Chrome Extentions Page</a> which has add-ons similar to Firefox! Woo!</p> <p>ALSO – Google’s Bookmark Sync is now live! Basically what this does is it stores your bookmarks in your Google account, so you can access them on any computer, How awesome is that?? (Although Delicious does pretty much the same thing).</p> <p>Well guys, that is the update! It probably took you more than 60 seconds, but it sure beats hunting for all that info yourself eh? Hope you enjoyed it! Now you should be all caught up with the new Google stuff (at least for this month )</p> <p>Leave some comments if you know of any Google news that I missed!</p> <p>Thanks guys!</p> <p><a href="http://feeds2.feedburner.com/bitrebels">Go to Source</a></p> </article> <article> <h1>33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles</h1> <p>BlogPoster — Fri, 11 Dec 2009 17:26:25 +0000</p> <div><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.1stwebdesigner.com%2Fcss%2Fmust-read-css3-tips-tricks-tutorial-sites%2F" rel="nofollow"></a></div> <p><a href="http://www.1stwebdesigner.com/css/must-read-css3-tips-tricks-tutorial-sites/" target="_self"></a>Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!<span></span></p> </p> <h2>1. <a href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/" target="_blank">Take Your Design To The Next Level With CSS3</a></h2> <p>In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.</p> <p><a href="http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/" target="_blank"></a></p> </p> <h2>2. <a href="http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/" target="_blank">Push Your Web Design Into The Future With CSS3</a></h2> <p>Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.</p> <p><a href="http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/" target="_blank"></a></p> </p> <h2>3. <a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba" target="_blank">Super Awesome Buttons with CSS3 and RGBA</a></h2> <p>Learn how to create super cool, scalable buttons with CSS3.</p> <p><a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba" target="_blank"></a></p> <p><a href="http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html" target="_blank">View Demo</a></p> </p> <h2>4. <a href="http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/" target="_blank">A Look at Some of the New Selectors Introduced in CSS3</a></h2> <p><a href="http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/" target="_blank"></a></p> </p> <h2>5. <a href="http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/" target="_blank">CSS 3 Cheat Sheet (PDF)</a></h2> <p>This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(<a href="http://media.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf" target="_blank">Download *pdf</a>)</p> <p><a href="http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/" target="_blank"></a></p> </p> <h2>6. <a href="http://www.css3.info/" target="_blank">CSS3.Info</a></h2> <p>CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent <a href="http://www.css3.info/preview/" target="_blank">CSS3 Preview page</a> there, which shows demos of new features.</p> <p><a href="http://www.css3.info/" target="_blank"></a></p> </p> <h2>7. <a href="http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3" target="_blank">Get Started with CSS 3</a></h2> <p>Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.</p> <p><a href="http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3" target="_blank"></a></p> </p> <h2>8. <a href="http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it" target="_blank">Introduction to CSS3 – Part 1: What Is It?</a></h2> <p>These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.</p> <p><a href="http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it" target="_blank"></a></p> </p> <h2>9. <a href="http://www.w3.org/TR/CSS-access" target="_blank">Accessibility Features of CSS from W3</a></h2> <p>This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.</p> <p><a href="http://www.w3.org/TR/CSS-access" target="_blank"></a></p> </p> <h2>10. <a href="http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/" target="_blank">Progressive Enhancement with CSS 3: A better experience for modern browsers</a></h2> <p>In this article you will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.</p> </p> <p><a href="http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/http:/sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/" target="_blank"></a></p> <h2>11. <a href="http://xhtml.com/en/css/conversation-with-css-3-team/" target="_blank">Conversation with CSS 3 team</a></h2> <p>In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.</p> <p><a href="http://xhtml.com/en/css/conversation-with-css-3-team/" target="_blank"></a></p> </p> <h2>12. <a href="http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/http:/sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/" target="_blank">Six Questions: Eric Meyer on CSS3</a></h2> <p>Great interview with Eric Meyer about CSS3.</p> <p><a href="http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/http:/sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/" target="_blank"></a></p> </p> <h2>13. <a href="http://mattwilcox.net/archive/entry/id/1031/" target="_blank">The fundamental problems with CSS3</a></h2> <p>This article brings up several problems and issues with CSS3, interesting reading.</p> <p><a href="http://mattwilcox.net/archive/entry/id/1031/" target="_blank"></a></p> </p> <h2>14. <a href="http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html" target="_blank">CSS3 Exciting Functions and Features: 30+ Useful Tutorials</a></h2> <p>In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.</p> <p><a href="http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html" target="_blank"></a></p> </p> <h2>15. <a href="http://css-tricks.com/css3-clock/" target="_blank">Old School Clock with CSS3 and jQuery</a></h2> <p><a href="http://css-tricks.com/css3-clock/" target="_blank"></a></p> </p> <p><a href="http://24ways.org/2006/rounded-corner-boxes-the-css3-way" target="_blank"></a></p> <h2>16. <a href="http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/" target="_blank">The CSS3 border-radius property</a></h2> <p>One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.</p> <p><a href="http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/" target="_blank"></a></p> </p> <h2>17. <a href="http://www.netmag.co.uk/zine/develop-css/get-the-best-out-of-css3" target="_blank">Get the best out of CSS3</a></h2> <p>Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox</p> <p><a href="http://www.netmag.co.uk/zine/develop-css/get-the-best-out-of-css3" target="_blank"></a></p> </p> <h2>18. <a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" target="_blank">How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3</a></h2> <p><a href="http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/" target="_blank"></a></p> <p><a href="http://spyrestudios.com/demos/sliding-panel-left/" target="_blank">View Demo</a></p> </p> <h2>19. <a href="http://24ways.org/2006/rounded-corner-boxes-the-css3-way" target="_blank">Rounded Corner Boxes the CSS3 Way</a></h2> <p><a href="http://24ways.org/2006/rounded-corner-boxes-the-css3-way" target="_blank"></a></p> </p> <p><a href="http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html" target="_blank"></a></p> <h2>20. <a href="http://css-tricks.com/video-screencasts/57-using-css3/" target="_blank">#57: Using CSS3 by Chris Coyier</a></h2> <p>This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.</p> <p><a href="http://css-tricks.com/video-screencasts/57-using-css3/" target="_blank"></a></p> </p> <h2>21. <a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank">HTML 5 and CSS 3: The Techniques You’ll Soon Be Using</a></h2> <p>In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.</p> <p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank"></a></p> <p><a href="http://nettuts.s3.amazonaws.com/373_html5/final/index.html" target="_blank">View Demo</a></p> </p> <h2>22. <a href="http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/" target="_blank">11 Classic CSS Techniques Made Simple with CSS3</a></h2> <p>In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.</p> <p><a href="http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/" target="_blank"></a></p> </p> <p><a href="http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html" target="_blank"></a></p> <h2>23. <a href="http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/" target="_blank">CSS 3 selectors explained – Overview of CSS 3 selector syntax</a></h2> <h2><a href="http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/" target="_blank"></a></h2> </p> <h2>24. <a href="http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image" target="_blank">3 Easy and Fast CSS Techniques for Faux Image Cropping</a></h2> <p><a href="http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image" target="_blank"></a></p> </p> <h2>25. <a href="http://www.cssportal.com/css3-preview/borders.htm" target="_blank">CSS3 Borders Preview</a></h2> <p>CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.</p> <p><a href="http://www.cssportal.com/css3-preview/borders.htm" target="_blank"></a></p> </p> <h2>26. <a href="http://westciv.com/iphonetests/" target="_blank">CSS3 property tests</a></h2> <p><a href="http://westciv.com/iphonetests/" target="_blank"></a></p> </p> <h2>27. <a href="http://www.zenelements.com/blog/css3-background-images/" target="_blank">CSS3 Background Images (Sizing & Multiple Imgs)</a></h2> <p>Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how</p> <p><a href="http://www.zenelements.com/blog/css3-background-images/" target="_blank"></a></p> </p> <h2>28. <a href="http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml" target="_blank">Overview of CSS3 Structural pseudo-classes</a></h2> <p><a href="http://www.javascriptkit.com/dhtmltutors/structuralcss.shtml" target="_blank"></a></p> </p> <h2>29. <a href="http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html" target="_blank">5 CSS3 Techniques For Major Browsers using the Power of jQuery</a></h2> <p><a href="http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html" target="_blank"></a></p> </p> <h2>30. <a href="http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html" target="_blank">jSlickmenu: A jQuery plugin for slick CSS3 menus</a></h2> <p><a href="http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html" target="_blank"></a></p> <p><a href="http://demo.marcofolio.net/slick_jquery_css3_menu/default.html" target="_blank">View Demo</a></p> </p> <h2>31. <a href="http://group.mind-productions.com/articles/multiple_backgrounds__css3_/" target="_blank">Multiple Backgrounds (CSS3)</a></h2> <p><a href="http://group.mind-productions.com/articles/multiple_backgrounds__css3_/" target="_blank"></a></p> </p> <p><a href="http://www.zenelements.com/blog/css3-background-images/" target="_blank"></a></p> <h2>32. <a href="http://www.the-art-of-web.com/css/border-radius/" target="_blank">CSS: border-radius and -moz-border-radius</a></h2> <p><a href="http://www.the-art-of-web.com/css/border-radius/" target="_blank"></a></p> </p> <h2>33. <a href="http://www.modernizr.com/" target="_blank">Modernizr</a></h2> <p>Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.</p> <p><a href="http://www.modernizr.com/" target="_blank"></a></p> <p>Related posts: <ol> <li><a href="http://www.1stwebdesigner.com/tutorials/53-jquery-tutorials-resources-tips-and-tricks-ultimate-collection/" rel="bookmark" title="Permanent Link: 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection">55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection</a></li> <li><a href="http://www.1stwebdesigner.com/css/advanced-css-text-effects-web-typography-tips/" rel="bookmark" title="Permanent Link: 22 Advanced CSS Text Effects And Web Typography Tips">22 Advanced CSS Text Effects And Web Typography Tips</a></li> <li><a href="http://www.1stwebdesigner.com/development/google-adsense-monetizing-traffic-testing-tips-tricks-and-resources/" rel="bookmark" title="Permanent Link: Google Adsense Monetizing, Traffic, Testing Tips, Tricks And Resources">Google Adsense Monetizing, Traffic, Testing Tips, Tricks And Resources</a></li> <li><a href="http://www.1stwebdesigner.com/css/35-websites-to-teach-you-how-to-use-css-effectively/" rel="bookmark" title="Permanent Link: 35 Websites To Teach You How To Use CSS Effectively">35 Websites To Teach You How To Use CSS Effectively</a></li> <li><a href="http://www.1stwebdesigner.com/tutorials/easy-brush-text-nature-effect-tutorial/" rel="bookmark" title="Permanent Link: Easy Brush Text Nature Effect: Tutorial">Easy Brush Text Nature Effect: Tutorial</a></li> </ol> <div> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=84amXDC_f2U:9byC6Bm_tG4:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=84amXDC_f2U:9byC6Bm_tG4:7Q72WNTAKBA"></img></a> <a href="http://feeds.feedburner.com/~ff/1stwebdesigner?a=84amXDC_f2U:9byC6Bm_tG4:F7zBnMyn0Lo"></img></a> </div> <p><a href="http://www.1stwebdesigner.com/feed/">Go to Source</a></p> </article> <article> <h1>Design Showcase Listing 20 Websites Selling PSD To XHTML Service</h1> <p>Facebook-Web-Design — Fri, 11 Dec 2009 11:15:44 +0000</p> <p>I have gone for something a little different today. The design showcase I have compiled, consists of 20 websites that have a clean, beautiful or creative web design, and that sell PSD to XHTML coding service. There are so many different companies out there that do it, but these 20 have the sweetest web design.</p> <p>Let me know if you find any others that deserve to be on the list. I’m also thinking about doing the exact same showcase, but for advertisements advertising PSD to XHTML. They do look very nice! Anyway, enjoy the showcase!</p> <h3>Quality XHTML</h3> <p><a href="http://www.qualityxhtml.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Markup 4 U</h3> <p><a href="http://www.markup4u.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>PSD To HTML CSS</h3> <p><a href="http://www.psdtohtmlcss.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>PSD To HTML</h3> <p><a href="http://www.psd2html.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>XHTML Slicing</h3> <p><a href="http://www.xhtmlslicing.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>The PSD Coder</h3> <p><a href="http://www.thepsdcoder.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>PSD 2 HTML Ninjas</h3> <p><a href="http://www.psd2htmlninjas.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Nifty XHTML</h3> <p><a href="http://www.niftyxhtml.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>My PSD To Html</h3> <p><a href="http://www.mypsdtohtml.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>PSD To XHTML</h3> <p><a href="http://www.psd2xhtml.biz" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Crazy XHTML</h3> <p><a href="http://www.crazyxhtml.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>XHTML CSS Expert</h3> <p><a href="http://www.xhtmlcssexpert.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Pixel Crayons</h3> <p><a href="http://xhtml.pixelcrayons.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Div Players</h3> <p><a href="http://divplayers.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Markup Service</h3> <p><a href="http://markup-service.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>XHTML Mania</h3> <p><a href="http://www.xhtmlmania.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>XHTML Magic</h3> <p><a href="http://www.xhtmlmagic.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>XHTML Wind</h3> <p><a href="http://www.xhtmlwind.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>CSS Chopper</h3> <p><a href="http://www.csschopper.com" target="_blank"></a></p> <p><span>* * * * *</span></p> <h3>Rapid XHTML</h3> <p><a href="http://www.rapidxhtml.com" target="_blank"></a></p> <div> <a href="http://feeds.feedburner.com/~ff/LearnWebdesign?a=GKrq-6SjhUs:Olq49mR_UUs:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/LearnWebdesign?a=GKrq-6SjhUs:Olq49mR_UUs:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/LearnWebdesign?a=GKrq-6SjhUs:Olq49mR_UUs:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/LearnWebdesign?a=GKrq-6SjhUs:Olq49mR_UUs:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/LearnWebdesign?a=GKrq-6SjhUs:Olq49mR_UUs:TzevzKxY174"></img></a> </div> <p><a href="http://feeds.feedburner.com/LearnWebdesign">Go to Source</a></p> </article> <article> <h1>That’s a useful feature, but when can I use it?</h1> <p>Facebook-Web-Design — Wed, 09 Dec 2009 19:36:19 +0000</p> <p>An understandable reaction many people have when they realise they can’t use a certain feature of HTML, CSS or other web technologies is to blame the W3C for being slow. Sometimes doing so may be correct, but a lot of the time it is browser vendors who are slow to implement emerging standards.</p> <p>Keeping track of which browsers – and from which version – support a particular recommendation or standard is no easy task. But there is help. Alexis Deveria’s <a href="http://a.deveria.com/caniuse/">When can I use…</a> contains a <strong>lot</strong> of compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.</p> <p><a href="http://www.456bereastreet.com/archive/200912/thats_a_useful_feature_but_when_can_i_use_it/">Read full post</a></p> <p>Posted in <a href="http://www.456bereastreet.com/archive/categories/browsers/" rel="tag">Browsers</a>, <a href="http://www.456bereastreet.com/archive/categories/web_standards/" rel="tag">Web Standards</a>.</p> <p><a href="http://feedads.g.doubleclick.net/~a/yAhp4gLp7IINao7E8Gu1zNVUEoc/0/da"></img></a><br /> <a href="http://feedads.g.doubleclick.net/~a/yAhp4gLp7IINao7E8Gu1zNVUEoc/1/da"></img></a></p> <div> <a href="http://feeds.feedburner.com/~ff/456bereastreet?a=2jfLltRrNSI:EDfrRr_jI7k:F7zBnMyn0Lo"></img></a> <a href="http://feeds.feedburner.com/~ff/456bereastreet?a=2jfLltRrNSI:EDfrRr_jI7k:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/456bereastreet?a=2jfLltRrNSI:EDfrRr_jI7k:dnMXMwOfBR0"></img></a> <a href="http://feeds.feedburner.com/~ff/456bereastreet?a=2jfLltRrNSI:EDfrRr_jI7k:V_sGLiPBpWU"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/456bereastreet">Go to Source</a></p> </article> <article> <h1>Easy Front End</h1> <p>Facebook-Web-Design — Tue, 08 Dec 2009 17:05:49 +0000</p> <p>Easy Front End. A CSS/HTML/JavaScript framework that helps reduce the time spent on setting up the basic master HTML template by reusing the same coding techniques.<br /> <a href="http://feedproxy.google.com/CssBeautyNewsFeed">Go to Source</a></p> </article> <article> <h1>Some Thoughts on the New Site</h1> <p>Facebook-Web-Design — Mon, 07 Dec 2009 21:40:17 +0000</p> <p>It’s been a while since I began work on the new version of AddedBytes.com. There was a lot to do. I had a few specific aims for the move:</h3> <ul> <li><strong>New Platform</strong>: bBlog, though it had served me well, was no longer being updated. The version I was running was hideously out of date, fairly bloated, and a pain to maintain by the end. It was also causing problems for the VPS it was running on.</li> <li><strong>New Host</strong>: The site was outgrowing the JaguarPC VPS it was on, and was suffering downtime. I wanted more control over my own hosting and an opportunity to learn more about hosting my own site. So a self-managed VPS was on the list.</li> <li><strong>New Design</strong>: The old design was thrown together pretty quickly after the incident with the trademark police. I wanted something brighter, cleaner and more spacious.</li> </ul> <p>In no particular order, here are a few useful (hopefully) tricks I learned along the way:</p> <h3>HTML 5</h3> <p>The site uses HTML 5, at least in a basic fashion – <header> tags, that sort of thing. I like a lot of what HTML 5 promises, but so far I’m not sure what the advantages are to you, the reader. Semantic improvement is great, but many of the advantages of HTML 5 seem to be in areas that I just won’t be using – audio, video etc.</p> <h3>Hosting</h3> <p>There are a bajillion hosts offering everything under the sun to anyone with a dollar to their name. The small print for each is, it seems, a bit of a minefield. What’s the point in offering unlimited bandwidth when CPU usage is capped at such a low level that 6 people visiting on the same day will put you over the limit?</p> <p>Equally, what’s the point of hiring support people without basic technical hosting knowledge? In the course of my regular work, I’ve encountered support staff at one major international host who told me that it was normal for a site to go offline for three days while it was moved from shared hosting to a VPS. Three days to move an ecommerce site? Normal? Last time I had a site moved by a host it happened in off hours, cost nothing and there was no downtime. The same support staff have told me that it is impossible to host a site with one company and the DNS with another.</p> <p>I’m in danger of veering off into ranty territory here, so I’ll pull myself back from the bring and leave you with what I’ve taken away from the experience. That being that there is an unholy triangle for web hosting – you want a cheap price, high capacity and great support? Pick two.</p> <p>Ultimately, I’ve gone the self-managed route (with <a href="http://www.slicehost.com/">Slicehost</a>) for a couple of reasons. First, hosting management is something I dabble with occasionally when a client requires it, but my knowledge is spartan at best and I can increase my own value to an employer if I bring server management skills and experience to the table. Second, I wanted to be forced to fix my own mistakes. When something breaks now, I’m not going to be able to simply file a support ticket and have it fixed. Baptism by fire.</p> <h3>Typography</h3> <p>I’m lucky enough to work with some great designers at <a href="http://www.gsba.co.uk">GSBA</a>, and have been picking up little bits and pieces along the way. One thing that I have come to realise is that adjusting typography is a neverending mission. One minute you’re playing with line heights and word spacing … the next you’re worrying about orphans and adjusting margins to line up letter stems.</p> <h3>You’re Awesome</h3> <p>Within a couple of hours of launching the new site I had a collection of emails from people pointing out problems. And these were <em>good</em> bug reports – including a URL, an explanation of what they saw … sometimes a screenshot. Made replicating and fixing problems a doddle. So thanks!</p> <h3>Character Sets Can Ruin You</h3> <p>The old site’s database stored data in ISO-8859-1. The data was actually UTF-8. PHP was running as ISO-8859-1. The site was rendered as UTF-8. I think. I’m still not entirely sure. Moving that data to a system running entirely as UTF-8 was a painful experience. Character sets can be a nightmare, especially when you’re setting things up yourself. Pick one and stick with it, for everything. One day, when I can bring myself to (or am forced to) revisit the problems I had with this, I’ll write up what I learned and how I got things working.</p> <h3>Listen to Other People</h3> <p>Especially when they tell you that when you’re working on your IP tables configuration, it’s important not to log out until you’ve verified everything works. Because if you log out before you check and something’s broken, you cannot get back in. Tough lesson, that one. Which brings me to …</p> <h3>Backup from the Beginning</h3> <p>Seriously, it’s never, ever too early. If you start out by grabbing snapshots and organising them effectively, you’ll be much more likely to be in a position to revert a bad change. With self-managed hosting in particular it is very easy to rush a change that looks innocuous but ends with it utterly destroying everything you’ve worked on so far.</p> <h3>Separation is Good</h3> <p>I moved my email to Google Apps a couple of years ago (and it’s been great so far). I dread to think how complicated this would have been if I’d kept my email at the same place as the site. Having the email handled elsewhere hugely reduced the work involved in moving things around. Same with the DNS – it’s entirely separate from everything else. The move involved just changing A records around – minimal risk and easy to reset.</p> <h3>Launching Feels Good</h3> <p>It feels good, but nerve-wracking, to press the button and make a move. It feels even better when, a few days later, you haven’t had to revert the entire process.</p> <div> <a href="http://feeds.addedbytes.com/~ff/added_bytes_full?a=80RnCKheVH4:juGZZNgmW9Y:yIl2AUoC8zA"></img></a> <a href="http://feeds.addedbytes.com/~ff/added_bytes_full?a=80RnCKheVH4:juGZZNgmW9Y:qj6IDK7rITs"></img></a> <a href="http://feeds.addedbytes.com/~ff/added_bytes_full?a=80RnCKheVH4:juGZZNgmW9Y:ku9zDEN0264"></img></a> <a href="http://feeds.addedbytes.com/~ff/added_bytes_full?a=80RnCKheVH4:juGZZNgmW9Y:zRD6dC8XcTc"></img></a> </div> <div> <a href="http://feeds.feedburner.com/~ff/Ilovejackdanielsfull?a=80RnCKheVH4:lFI_4CjlI88:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/Ilovejackdanielsfull?a=80RnCKheVH4:lFI_4CjlI88:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/Ilovejackdanielsfull?a=80RnCKheVH4:lFI_4CjlI88:ku9zDEN0264"></img></a> <a href="http://feeds.feedburner.com/~ff/Ilovejackdanielsfull?a=80RnCKheVH4:lFI_4CjlI88:zRD6dC8XcTc"></img></a> </div> <p><a href="http://feeds2.feedburner.com/Ilovejackdanielsfull">Go to Source</a></p> </article> <article> <h1>Smart Web Designers Play to their Strengths</h1> <p>Facebook-Web-Design — Sat, 05 Dec 2009 17:55:03 +0000</p> <p>One of the biggest mistakes people make, is trying to develop skills in areas that they suck in. For example, you maybe good at writing HTML and CSS code but in the end, your pages don’t look all that great. </p> <p>… Let’s face it, some people just don’t have that artistic/designers eye. </p> <p><strong>Play to your Strengths</strong></p> <p>A long time ago, in a sport far, far away … I once had a coach who one day pulled me aside and said: </p> <blockquote><p>“Stef, you’re good at playing to the outside and you can move, but your inside game is really pathetic. So, stop trying to play inside and concentrate on what you’re good at!”</p> </blockquote> <p>My coach’s advice is to be headed by all and applies to all professions … web design/programming is no exception.</p> <p>The key to success is to figure out <em>WHAT YOU’RE GOOD AT</em> and then develop those skills to the point where you’re so good, that a shine will begin to radiate off you, and in time, your brilliance will cause people to have to look away … and (more importantly) pay you more money for your work!!</p> <p> </p> <p>Stefan Mischook<br /> www.killersites.com</p> <p><a href="http://www.killersites.com/magazine/feed/">Go to Source</a></p> </article> <article> <h1>HTML5: Tool of Satan, or Yule of Santa?</h1> <p>Facebook-Web-Design — Sat, 05 Dec 2009 01:35:02 +0000</p> <p>HTML5: Tool of Satan, or Yule of Santa?. Learn what HTML5 you can expect to be able to use reliably cross-browser in the early months of 2010.<br /> <a href="http://feedproxy.google.com/CssBeautyNewsFeed">Go to Source</a></p> </article> <article> <h1>10 Simple Web Accessibility Tips You Can Do Today</h1> <p>Facebook-Web-Design — Fri, 04 Dec 2009 07:10:06 +0000</p> <p>One of the most overlooked aspects in designing a website that we often brush off is <strong>web accessibility</strong>. There’s a misconception that web accessibility requires sacrifices to aesthetics, or that it’s not worth the effort.</p> <p></p> <p><span></span></p> <p>But, with a growing number of ways that users access the web, creating highly-accessible and universal designs that can be viewed in as many ways as possible is critical to the success of a website.</p> <p>And here’s the good news: <em>it isn’t as hard as you think</em>.</p> <p>Most web accessibility guidelines already go hand-in-hand with website development practices. In this article, we’ll explore 10 quick and easy ways to improve your site’s accessibility.</p> <h3>1. Use meaningful title attributes</h3> <p>Think of title attributes as short summaries that describe where the hyperlink will take the user who clicks on it.</p> <p>It doesn’t help if the title attribute is the same as the link text, such as in the following example:</p> <pre><a href="portfolio.html" title="<strong>Portfolio</strong>"><strong>Portfolio</strong></a></pre> <p>Why is that? Because for screen reader users, it’s redundant and gives them no added value.</p> <p>In the above example, even though web accessibility and Section 508 validators won’t let you pass their automated tests without it, it’s actually better to leave out the title attribute.</p> <p>A better title attribute to the example above is:</p> <pre><a href=" portfolio.html" title="<strong>Some artwork of the artist</strong>"><strong>Portfolio</strong></a></pre> <h3>2. Place important interactive elements higher up the web page</h3> <p>Here’s a simple web accessibility exercise for you: identify important hyperlinks and user interface controls that your users need access in one of your web pages. Then count how many times you have to press the Tab key to get to it.</p> <p>Did you get to it fast enough? Or did you have to press the Tab key like crazy? Were you able to see which hyperlink of interface control was currently focused on when you pressed the Tab key?</p> <p>Now imagine yourself in the situation where you can’t use a conventional point-to-interact device like a mouse; a situation where, in order to get to a desired interactive element, you have to traverse the ones the come before it on the web page. This gives you a partial picture how people who have limited or no hand functions interface with a web page.</p> <p>Easy enough: place important links and other interactive elements higher up your web pages. It’s good practice anyways since most website users, regardless of physical or mental ability, expect important items closer to the top of a web page.</p> <h3>3. Don’t begin title attributes with the same text</h3> <p>You’ll often see hyperlink elements with title attributes that look like this:</p> <pre><a href="/" title="<strong>Link to</strong> home">Home</a> <a href="/products" title="<strong>Link to</strong> products">Products</a> <a href="/contact" title="<strong>Link to</strong> contact">Contact</a></pre> <p>This can be a result of default content management system configurations, or someone who did not want to take too much time with title attributes.</p> <p>Users who use screen readers such as JAWS often rely on title attributes to find web links on a page. JAWS, for instance, has a feature for pulling together a list of links on a web page sorted in alphabetical order. If title attributes begin with the same text, it’s harder to use search functions that are built into screen readers.</p> <h3>4. Use headings correctly</h3> <p>Heading tags allow screen reader users to jump to the sections they’re interested in. Headings on a web page is an outline of the web page; using an <code><h2></code> right after an <code><h1></code> element denotes a section that is a subsection of the preceding <code><h1></code>.</p> <p>Many of us neglect headings, including <a href="http://sixrevisions.com/design-showcase-inspiration/30-light-and-sleek-web-designs-for-inspiration/" title="A Six Revisions article that does not use heading tags properly.">me</a>. In every single instance where I’ve misused heading elements, I couldn’t find a reasonable explanation for doing so – and neither will you.</p> <p>This simple web accessibility guideline can do wonders for people with vision deficiencies that use screen-reading technology.</p> <p>Breaking up a long web page into logical subsections with headings makes it easier to get to your location of interest. Imagine that while reading the first paragraph of an article, that you immediately wanted to leave a comment, and the comment form is located somewhere at the bottom of a web page. For sighted users, this would be a snap: you just need to scroll down and visually locate the web form.</p> <p>But on content-heavy sites such as the one you’re viewing now, the comment form is actually somewhere in the middle of the HTML structure even though visually, it’s right at the bottom of the web page. Without section headings that indicate where the web form begins, screen reader users would have to wade through a lot of content in order to get to the form. On Six Revisions, the level 3 heading "Leave a Comment" will allow screen reader users to quickly jump to it.</p> <h3>5. Use distinct and meaningful page titles</h3> <p>The first thing a screen reader user will encounter right after the web page fully loads is the text in between your <code><title></code> tags. The worst thing you can do, aside from not having the <code><title></code> tag, is having them all the same in all of your web pages. This makes it difficult for users who rely on your HTML markup to determine what page they’re on, or if the link they clicked on is the same web page they were previously on or not.</p> <p>If your page titles are the same, or if you don’t have page titles, screen reader users will always have to read the content before determining that they’re on web page they want to be on. Keep page titles succinct and meaningful.</p> <p>Good page titles to use that include repeating text are:</p> <pre><head> <title>About Us - Six Revisions</title> </head></pre> <pre><head> <title>All Articles: Six Revisions</title> </head></pre> <pre><head> <title>Six Revisions: Home</title> </head></pre> <h3>6. Use skip navigation</h3> <p>Screen reader users have to read HTML documents from top to bottom, without the ability to scan the web page for the information they’re interested in.</p> <p><a href="http://jimthatcher.com/skipnav.htm">Skip navigation</a> allows screen reader users and persons who can’t use a mouse to skip long lists of links, such as the primary navigation on a website.</p> <p>Skip navigation is simply a link right at the top of your web page that, when clicked, positions you to the content section. You can hide this link from able-bodied users by moving the link outside of the browser viewport using CSS.</p> <p>Here’s an example: let’s say that you have the HTML structure below and you want to have a skip nav that positions the reader on the main content area (<code>div#content</code>).</p> <pre><ul id="nav"> <li><a href="home.html" title="<strong></strong>">Home</a></li> <li><a href="about.html" title="<strong></strong>">About</a></li> <li><a href="blog.html" title="<strong></strong>">Blog</a></li> <li><a href="portfolio.html" title="<strong></strong>">Portfolio</a></li> <li><a href="contact.html" title="<strong></strong>">Contact</a></li> </ul> <div id="leftCol"> <h1>My friends</h1> <ul> <li><a href="http://blogofafriend.com/" title="<strong></strong>">Blog of a friend</a></li> <li><a href="ttp://friendofablog.com/" title="<strong></strong>">Friend of a blog</a></li> </ul> </div> <div id="#content"> <h1>Page Title</h1> ... </div></pre> <p>You would place your skip navigation link right above your unordered list, like so:</p> <pre> <strong><a id="skipnav" href="#content" title="Jump to content>Skip Navigation</a></strong> <ul id="nav"> <li><a href="home.html" title="<strong></strong>">Home</a></li> <li><a href="about.html" title="<strong></strong>">About</a></li> <li><a href="blog.html" title="<strong></strong>">Blog</a></li> <li><a href="portfolio.html" title="<strong></strong>">Portfolio</a></li> <li><a href="contact.html" title="<strong></strong>">Contact</a></li> </ul> <div id="leftCol"> <h1>My friends</h1> <ul> <li><a href="http://blogofafriend.com/" title="<strong></strong>">Blog of a friend</a></li> <li><a href="ttp://friendofablog.com/" title="<strong></strong>">Friend of a blog</a></li> </ul> </div> <div id="#content"> <h1>Page Title</h1> ... </div></pre> <p>Some sites decide to keep the skip navigation link visible, but if you’d rather hide it from sighted users, you can use CSS to indent the link outside of the web browser viewport:</p> <pre>#skipnav { position:absolute; top:<strong>-10000px</strong>; }</pre> <p>The downside of the above technique is that, although it will work for screen reader users, it won’t help users who can’t use a mouse since they won’t be able to use the Tab key to navigate to the skip navigation link. An improvement to the method above can be found on WebAIM: <a href="http://www.webaim.org/techniques/skipnav/#focus" title="Off-site link that will go to webaim dot org.">Links that become visible with keyboard focus</a>.</p> <p>Skip navigation is easy to implement, but very useful to have in web pages with a lot of content above the primary content area.</p> <p>WebAIM has a very thorough <a href="http://www.webaim.org/techniques/skipnav/">discussion of skip navigation</a> that includes several techniques (and their pro’s and con’s) that you should read.</p> <h3>7. Label your form elements</h3> <p>HTML web forms are the primary way of interacting with a website. Because of the importance of web forms, making sure that you use correct markup is crucial for universal design.</p> <p>Label your input elements with meaningful and descriptive text. This makes it clear to the user what information they should be providing.</p> <pre><label <strong>for="searchbox"</strong>>Enter key words to search:</label><input <strong>name="searchbox"</strong> type="text" /></pre> <p>With CSS, you can style that label element into an icon or hide it from plain view by pushing it out of the browser viewport, if you really must.</p> <h3>8. Test your web pages with CSS and JavaScript disabled</h3> <p>One of the simplest ways to determine how access-friendly a website is to users that can’t see content in a computer monitor, is to turn off CSS and JavaScript. Why?</p> <p>With CSS, we can position elements wherever we want, regardless of where they are in the actual document object model.</p> <p>With JavaScript, we can manipulate page elements by hiding, removing, and showing them, based on a user’s action.</p> <p>Disabling these two web technologies allows you to see whether or not all of your web page content is accessible. It also shows you whether your web pages are organized in an optimum manner.</p> <h3>9. "See" what it’s like to use assistive technologies</h3> <p>Perhaps the best way to fully understand universal design on the web is to see an actual person use a website with assistive technologies. If you don’t know of a person with a form of disability that affects their ability to use the web, there are many simulators online that will help you at least get a partial picture of how assistive technologies render and interface with a website.</p> <p>For screen reader simulations, try out <a href="http://webanywhere.cs.washington.edu/" title="WebAnywhere is a web-based screen reader for the web.">WebAnywhere</a>, a web tool created through a collaboration between University of Michigan and University of Rochester. If you want to feel how it’s like to be blind and interacting with a website: memorize a few keyboard shortcut keys the WebAnywhere uses. Navigate to your site using WebAnywhere. Turn off your monitor and unplug your mouse. Finally, try to read and interact with the web page you’re on.</p> <p>To see if the colors you’ve chosen are universally accessible to individuals with vision impairments, check out the <a href="http://sixrevisions.com/usabilityaccessibility/14-brilliant-tools-for-evaluating-your-designs-colors/" title="An article with the title 14 Brilliant Tools for Evaluating Your Designs Colors">list of tools for evaluating colors</a> I’ve put together a while back.</p> <p>Additionally, there are many tools out there that will help you validate your work against common web accessibility standards and guidelines. There are many of them, and most of the good ones are free. See the article: <a href="http://sixrevisions.com/web-standards/accessibility_testtools/">10 Tools for Evaluating Web Design Accessibility</a>.</p> <h3>10. Web accessibility is not about degrading the overall user experience</h3> <p>The final tip I’d like to share is more of a philosophical viewpoint to designing with web accessibility in mind.</p> <p>Many of us think that reaching a high level of web accessibility means that it’s at the cost of the general/average user experience. <em>It’s not</em>. It’s about offering multiple access points with varying levels of complexity.</p> <p>I learned this lesson while looking at all-inclusive playground equipment.</p> <p>I noticed that it’s not about lowering the difficulty of obstacles in a playground equipment (such as the one featured below), but that it’s about giving several point of access with varying levels of difficulty.</p> <p>Study the Jungle Jim below that provides its users several points of access.</p> <p><span>Photo from <a href="http://www.apeplayground.com/active_accessible_gallery.html">APE</a></span></p> <p>There are several potential points of access to the play equipment. Able-bodied children who want a higher level of challenge can use the more difficult routes, while children with mobility impairments can use the access route.</p> <p>What’s the implication of this concept to web design?</p> <p>It means that it’s not about <em>not</em> using Flash content because of it’s notoriety for being inaccessible, it’s about making sure that users that have difficulty interacting with Flash content have an alternative way of getting the same information.</p> <p>It’s not about <em>not</em> using Ajax because screen readers can’t parse asynchronous DOM manipulation by client-side scripts (e.g. content changes without a page reload), it’s about providing an explanation to the user that the page will update upon performing a certain action and they may not see it, or offering an alternative experience for them (just like the Jungle Jim).</p> <p>Keeping in mind these tips will ensure at least partial access to your websites and webapps. If there’s one thing you should take away from reading this, it’s that web accessibility isn’t that hard to integrate with your processes, and most, if not all of these tips, should already be a part of your web design and web development best practices.</p> <h3>Recommended Reading</h3> <p>There are many methods involved in making websites universally-accessible, with varying levels of difficulty for integration. I’ve just touched on a few of them. Even if you take just a few hours of your time today to read the following resources, I promise you that you’ll learn a lot about web accessibility.</p> <h4><a href="http://www.w3.org/WAI/intro/accessibility">Introduction to Web Accessibility</a></h4> <p>The W3C Web Accessibility Initiative group has an introductory level document for those who want to learn about web accessibility, but don’t know where to start.</p> <h4><a href="http://www.webaim.org/">WebAIM</a></h4> <p>WebAIM (Web Accessibility In Mind) promotes universal design on the web and has plenty of articles on web accessibility; just studying the site’s design and HTML/CSS source code can give you an idea of what a web accessible site is.</p> <h4><a href="http://diveintoaccessibility.org/">Dive Into Accessibility</a></h4> <p>This online book was designed as a 30-day course that educates its readers about one accessibility technique per day, but you can read it all in one sitting, and an average reader can probably get through it in about a few hours.</p> <h4><a href="http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/">How People with Disabilities Use the Web</a></h4> <p>A document on W3C that gives readers an overview of how persons with handicaps use the web.</p> <h3>Related Content</h3> <ul> <li><a href="http://sixrevisions.com/usabilityaccessibility/adobe-flash-accessibility-best-practices-for-design/">Adobe Flash Accessibility: Best Practices for Design</a></li> <li><a href="http://sixrevisions.com/web-standards/accessibility_testtools/">10 Tools for Evaluating Web Design Accessibility</a></li> <li><a href="http://sixrevisions.com/usabilityaccessibility/14-brilliant-tools-for-evaluating-your-designs-colors/">14 Brilliant Tools for Evaluating Your Design’s Colors</a></li> <li><em>Related categories</em>: <a href="http://sixrevisions.com/category/usabilityaccessibility/">Usability/Accessibility</a> and <a href="http://sixrevisions.com/category/user-interface/">User Interface</a></li> </ul> <h3>About the Author</h3> <p><span><strong>Jacob Gube</strong> is the Founder and Chief Editor of <strong><a href="http://sixrevisions.com/">Six Revisions</a></strong>. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the <a href="http://sixrevisions.com/contact/">contact page</a> and follow him on Twitter: <strong>@<a href="http://twitter.com/sixrevisions">sixrevisions</a></strong>.</span></p> <div> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=xgEfoZEMSyk:TMCwb-xCnRk:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=xgEfoZEMSyk:TMCwb-xCnRk:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=xgEfoZEMSyk:TMCwb-xCnRk:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=xgEfoZEMSyk:TMCwb-xCnRk:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=xgEfoZEMSyk:TMCwb-xCnRk:7Q72WNTAKBA"></img></a> </div> <p><br /> <a href="http://feeds2.feedburner.com/SixRevisions">Go to Source</a></p> </article> <article> <h1>A Particle System with HTML5 canvas</h1> <p>Facebook-Web-Design — Thu, 03 Dec 2009 16:10:02 +0000</p> <p>A Particle System with HTML5 canvas. See the wonders of HTML5 Canvas! Pretty amazing.<br /> <a href="http://feedproxy.google.com/CssBeautyNewsFeed">Go to Source</a></p> </article> <article> <h1>Have a Field Day with HTML5 Forms</h1> <p>Facebook-Web-Design — Thu, 03 Dec 2009 03:35:02 +0000</p> <p>Have a Field Day with HTML5 Forms. Learn how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.<br /> <a href="http://feedproxy.google.com/CssBeautyNewsFeed">Go to Source</a></p> </article> </main></body></html>

Programming Blog » HTML

YouTube Launches Support for HTML5

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Tutorial Details

Prefer a Video Tutorial?

Quick Overview of HTML 5 Elements

The Problem

Step 3: The JavaScript

Conclusion

Write a Plus Tutorial

YouTube begins HTML5 rollout

14 Helpful Cheat Sheets for Front-end Web Development

HTML

CSS

JavaScript

Emerging Techniques Every Web Developer Should Know

HTML 5 Offline Application

oEmbed

HTML 5 contentEditable

OAuth

40 Valuable Tools and Resources For Web Designers

Getting Inspired: Interesting Redesign Projects

Useful Front-End and Back-End Tools

Useful Resources For Web Developers

Last Click (= a bit of fun)

Gordon: Flash Runtime Implemented in Javascript

HTML5 And Javascript Audio Interface: JAI

Related posts

W3C HTML Accessibility Task Force

Google I/O 2010 Registration Is Open

Error messages for corrupt HTML

Using YQL as a proxy for cross-domain Ajax

WordPress Theme from Scratch – Day 3: HTML to WordPress

Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

Other Viewing Options

Update

Additional Resources

Write a Plus Tutorial

jsFiddle

Optimizing HTML

Using HTML Symbol Entities

15 Clean & Effective Email / Newsletter Designs

3 Must-See Video Presentations About HTML 5

Introduction to HTML 5

Google I/O 2009 – Google’s HTML 5 Work: What’s Next?

HTML 5: Features you want desperately but still can’t use

90+ Useful jQuery Plugins for Designers and Developers

Create A Starter Stylesheet Quickly: PrimerCSS

Related posts

120 Tips, Tricks, and Tuts from 2009 Worth your Time

January

February

March

April

Bonus: Should You Attend University for Web Development?

May

June

July

August