Open Source Resources for Web Application Developers

Nick La has made another great great tutorial for us. Nick La shows us how to decorate our images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). To change the look and feel, simply edit the CSS specifications of the span element. To show how flexible it is, Nick La has created 15 different styles as examples for us (notice the HTML markup is same).

Source: CSS Decorative Gallery

• 10 Comments

If your website doesn’t stand out and do a heck of lot of things right, then chances are it’s going to crash and burn. Take the “Successful Website Checklist Challenge” designed by Chromatic Sites and see what you’re doing right, what you’re doing wrong, and what you’re forgetting to do. They have even included notes and resources for nearly every item on the checklist (just to make your life easier). The checklist is divided into the following sections.

1. Planning
2. Design/Layout
3. Usability/Accessibility
4. Content
5. Website Optimization/Standards
6. Search Engine Optimization/Marketing

Source: The Official “Successful Website Checklist Challenge”

• 4 Comments

As web designers, we’ve grown pretty good at understanding how to create a modern, semantic, accessible website using XHTML and CSS. We understand what makes a good website, and how to make it happen.

When it comes time to design emails though, do all the same rules apply? Are there things we should be doing specifically for email that don’t make sense on a website? Campaign Monitor has published an article of 2008 Email Design Guidelines that shows us the technical, design and information elements that make up a successful HTML email.

• Don’t waste your readers’ time — An email inbox is a busy place, you won’t get much attention.
• Permission matters — Not only do you need to have permission to email people, but it helps to remind them of how they gave you permission, as specifically as you can.
• Relevance trumps permission — Just having permission is not enough, the content you are sending must also be relevant.
• Make unsubscribing easy — There’s no point emailing people who are not interested.
• Image blocking is common — You can’t rely on people actually seeing your images.
• Bring back tables — Structural tables are still often necessary for creating columns.
• Add inline styles — Gmail removes anything else.
• Don’t forget your plain text version — You can make blocks of text more readable.
• Meet your legal obligations — For example, CAN-SPAM for US senders.
• Test, test, test — It’s the only way to be confident about your design working.

Source: 2008 Email Design Guidelines

• 3 Comments

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Many sites offer browser compatibility charts, but few back up their compatibility claims with repeatable tests. Google believes strongly in the value of test cases and automated regression testing. All of the tests in Google Doctype can be run individually or in groups, using the JSUnit automated testing framework. This allows us to update our charts quickly and easily as new browser versions come out. It also allows you to test in your own browser to see exactly what the compatibility claims mean.

Many sites offer developer resources for the open web, but few sites make those resources available under open licenses. You can read, but you can’t download. Or you can download, but you can’t redistribute. Google makes it easy to download the entire encyclopedia and take it with you, publish it on your private intranet, or package it for redistribution.

Source: Google Doctype

• 0 Comments

Few days ago, we have SEO Cheat Sheet from SEOMoz. Now, Nick La from WebDesignerWall has discovered that just over 1 out of 10 people don’t think SEO (Search Engine Optimization) is mandatory as a designer as well, therefore he has written an SEO Guide for Designers who want to learn about making it easier for websites or blogs to be found by search engines. He explains the common mistakes made by designers and developers. He also provides some basic tips that you should be practising to optimize your site for search engines.

Source: SEO Guide for Designers

• 2 Comments

SEOmoz has become a recognized leader in the field of SEO by providing the very highest quality solutions to their clients. These services are intended to help websites achieve higher rankings and greater levels of traffic through the organic listings on search engines (Google, Yahoo!, MSN & Ask). Recently, SEOmoz has released The Web Developer’s SEO Cheat Sheet which I have found very useful for webmasters. The Web Developer’s SEO Cheat Sheet shows us the following.

• Important SEO Html Tags, Search Engine Indexing Limits
• Recommended Title Tag Syntax, Common Canonical Issues
• 301 Redirect, Important Search Engine Robot User-Agents
• Common Robot Traps to Avoid, Robots Meta Tag Syntax
• Robots.txt Syntax, Sitemap Syntax

Source: The Web Developer’s SEO Cheat Sheet

• 11 Comments

After the massive success of PSDTUTS, Eden Creative Communities decided to branch out into tutorials on other subjects. Since one of the most requested types of tutorials has always been for web development, that seemed like a logical place to go. So Eden Creative Communities has just launched NETTUTS for us. NETTUTS is tackling pretty much any subject to do with building websites including:

• Complete step by step website builds
• HTML and CSS techniques
• Flash effects and techniques
• Javascript and AJAX
• Dreamweaver and other tools
• General web development skills

Although NETTUTS has just launched few days ago, there are some very nice and useful content for web developers like us. For example, Creating a PayPal Payment Form and Build a Sleek Portfolio Site from Scratch. I strongly recommend you subscribing to NETTUTS, so that you can receive top quality website tutorials as soon as you can. I am sure NETTUTS will not disappoint you.

• 5 Comments

Google App Engine is a developer tool that enables you to run your web applications on Google’s infrastructure. The goal is to make it easy to get started with a new web application, and then make it easy to scale when that app reaches the point where it’s receiving significant traffic and has millions of users.

Google App Engine enables you to build web applications on the same scalable systems that power Google applications. It also provides an API for authenticating your users. If you choose to use this, anyone with a valid Google Account may sign in your application. It saves you some time on building users registration and managing users accounts. At the moment, every Google App Engine application can use up to 500MB of persistent storage and enough bandwidth and CPU for 5 million monthly page views which I think it is more than enough for a startup.

This is only a preview release of Google App Engine. For now, account registrations are limited to the first 10,000 developers, and applications are restricted to the free account limits. Go and grab your account now!

Requirements: -
Demo: http://code.google.com/appengine/
License: License Free

• 6 Comments

Cameron Moll introducd “The Highly Extensible CSS Interface”, a four-part series of how-to’s and savvy conversation. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

Part One: The Foundation
This first article will briefly discuss the importance of producing visually rich interfaces with semantic, accessible, and portable markup underneath.

Part Two: CSS Selectors & jQuery
This article will present examples that demonstrate how to take advantage of the now-supported CSS2 and CSS3 properties previously ignored by Internet Explorer, such as min/max-width, child and adjacent sibling selectors, and others. Also take a look at jQuery, a lightweight scripting library for enhancing UI elements.

Part Three: Adding Ajax Interactivity
The third article will lightly cover Ajax implementation and its role within the interface. Demonstration of a few ways to leverage Ajax judiciously.

Part Four: Testing for Extensibility
Lastly, the final article will look back at the chunks of code presented in the three previous articles to assess how they combine to produce a completed interface. A series of “extensibility tests” such as translation, text resizing and browser width resizing, the addition of new content, and so forth.

The final article also provides the full demo, as well as a bookmarkable site that gives you quick access to all resources mentioned throughout the series.

Source: The Highly Extensible CSS Interface

• 2 Comments

Yes, we all know that Internet Explorer has given us many troubles. We have spent most of our development time for designing the website just to show properly in Internet Explorer. Let see if our lives will be easier when working with IE8.

Windows Internet Explorer 8 Readiness Toolkit, the first place to look when you’re ready to optimize web sites and applications for Internet Explorer 8. It describes the new features that developers can exploit to make Internet Explorer 8 ‘light up’. These features include Activities, WebSlices, improvements in CSS support, innovations in AJAX functionality, improvements in DOM L2 Core support, and integrated Developer Tools. Here are the following main improvements of Internet Explorer 8.

• Activities are contextual menu options which quickly access a service from any Web page.
• WebSlices is a new feature for websites to connect to their users by subscribing to content directly within a webpage. WebSlices behave just like feeds where clients can subscribe to get updates and notify the user of changes.
• While one of Internet Explorer 8’s main goals is CSS 2.1 compliance, it is also forward looking towards CSS3. CSS3 is the next step in the evolution of Cascading Style Sheets, and unlike CSS 2.1 which consists of one single document, the CSS3 specification is broken down into different modules in order to increase the speed of converging on clear specifications and implementations of different features.
• Internet Explorer 8 includes tools that Web developers need to efficiently debug their sites directly in Internet Explorer. Developers can immediately debug a site’s HTML, CSS, and JScript from within Internet Explorer 8, rather than switch between Internet Explorer and a separate development environment.
• Internet Explorer 8 provides a simplified yet powerful programming model for AJAX development that spans browser, webpage, and server interaction. As a result, it is easier for you to build webpages that have much better end-user experiences, are more functional, and have better performance.
• During Internet Explorer 6’s long tenure as the leading market-share holder, Web developers revealed many bugs and inconsistencies in Internet Explorer’s DOM. Today, with the Internet Explorer 8 versioning plan, these bugs and inconsistencies are corrected by default, and those customers who choose to opt out of this behavior may enable IE7 compatibility mode.

Source: Internet Explorer 8 Readiness Toolkit

• 9 Comments