Ultimate Web Development Cheat Sheets
September 3rd, 2007
JavaScript
Addison-Wesley’s JavaScript Reference Card
JavaScript and Browser Objects Quick Reference
JavaScript in 10 Minutes - Thanks Joseph
CSS
Design 215 CSS Quick Reference
HTML/XHTML
HTML Character Entities Cheat Sheet
Character Entity References in HTML 4 and XHTML 1.0
AJAX
Scriptaculous Combination Effects Cheat Sheet
Scriptaculous Cheat Sheet - Thanks Joseph
ASP.net AJAX Client Life-Cycle Events
MooTools Cheat Sheet - Thanks Joseph
Colors
Microformats
Microformats Helper Cheat Sheet
Jack Daniel’s Microformats Cheat Sheet
Browser Compatibility
Browser Compatibility Interactive Table
XML
XML TopicMaps 1.0 - Quick Reference Card
XML Schema - Structures Quick Reference
HTML Beginner Tutorial | HTML Dog
August 13th, 2007
The Best Place for HTML beginners to kick start their web designing career
(Introduction - From the site)
The thing to keep in mind is that HTML and CSS are all about separating the content (HTML) and the presentation(CSS). HTML is nothing more than fancy structured content and the visual formatting of that content will come later when we tackle CSS.
If you have looked at other HTML tutorials, you might have found that they mention certain things that HTML Dog does not. This is because many methods are obsolete, non-standard or just plain bad practice. Getting into the frame of mind of doing things the right way from the start will turn in to much better results in the end.
Contents
- Getting Started - What you need to do to get going and make your first HTML page.
- Tags, Attributes and Elements - The stuff that makes up HTML.
- Page Titles - Titles. For Pages. Difficult to get your head around, I know…
- Paragraphs - Structuring your content with paragraphs.
- Headings - The six levels of headings.
- Lists - How to define ordered and unordered lists.
- Links - How to link things together.
- Images - Adding something a bit more than text…
- Tables - How to use tabular data.
- Forms - Text boxes and other user-input thingamajigs.
- Putting It All Together - Taking all of the above stuff and shoving it together. Sort of a recap thing.
Other useful tutorials from HTML Dog
Design better with CRAP
July 31st, 2007
The power and ease-of-use of today’s computer applications has raised the bar drastically on the quality of design expected in the documents we produce. As recently as ten years ago, it was typical to produce business letters, memos, and other documents using a courier-like, monospaced typeface, often with only underlining available for emphasis of key passages or section headings. The only options for correcting typos and other mistakes were white-out, pencilled-in marks, or re-typing. Our documents looked boring, but they were expected to look boring.
Today that’s all changed. Word processing and desktop publishing software are everywhere, and offer dozens (if not hundreds) of fonts ranging from the simple and elegant to the downright bizarre. Style sheets on the web and easily accessible styling options in our desktop software allow us to easily create section headings, pull-quotes, bulleted lists, and text columns — giving us the potential to greatly enhance the layout and delivery of information.
The result, of course, is more likely to be a mish-mash of difficult-to-read fonts, seemingly random italics and boldfaced text, extraneous sidebars, and awkward layouts. In unskilled hands, the tools available to us can very quickly produce messy, over-designed documents that are far less readable than the plain typewritten documents of old.
Applying a few basic design skills can help avoid those mistakes, instead allowing the features we often regard as “extras” to take their rightful places as means of enhancing the readability and impact of our work. While design is a skill — equal parts art and science — that can take years to develop to a professional level, the core ideas are quite simple, and applying them can produce a marked improvement on your day-to-day work.
All design starts from four basic principles, abbreviated as CRAP (they come in no particular order, so the more squeamish can rearrange them to form “CARP”, if you like. I’d advise against “PCRA”, though…). These are Contrast, Repetition, Alignment, and Proximity.
- Contrast: Contrast refers to any difference of size, shape, or color used to distinguish text (or other elements, though here we’re focusing on text) from other pieces of text. The use of bold or italics is one common form of contrast — the difference in shape makes the bolded or italicized text stand out from the surrounding text. Increasing the size of headers and titles, or using ALL CAPS or smallcaps are other ways of distinguishing text. These techniques only work if used sparingly; a document typed in all capital letters has less contrast than one typed normally, so is harder, not easier, to read.
- Repetition: Repetition in your text is bad; repetition of your design elements is not only good but necessary. Once you’ve decided on a size and typeface for second-level headers, for instance, all second-level headers should look the same. For most documents, two or maybe three fonts — leaning heavily on one for all the body text, with the other two for headers and maybe sidebars — are enough. The same bullets should be used on every bulleted list. Information that appears on every page should appear in the same place on every page. Design elements — like horizontal rules between sections or corporate logos — should appear the same whenever they are used throughout the document. Repetition of design elements pulls the document together into a cohesive whole, and also improves readability as the reader comes to expect text that looks a certain way to indicate certain qualities (e.g. the start of a new section, a major point, or a piece of code.
- Alignment: Alignment is crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented long quotes. Your document should have a couple of vertical baselines and all text should be aligned to one of them. Unaligned text floats mysteriously, forcing the reader to figure out its relation to the rest of the document. Centered text is particularly bad (and is a novice’s favorite design trick). One immediate step you can take to vastly improve the appearance of your documents is to remove the “center” button from your software’s toolbar (or, less drastically, just ignore it). It is rarely self-evident what centering is meant to communicate, and too much centered text creates a sloppy, undisciplined look.
- Proximity: Pieces of information that are meant to complement each other should be near each other. One great offender here is business cards and ads in local newspapers, where the name, address, and phone number are all scattered around the ad or card (for example, in the corners). Your reader shouldn’t have to seek out the next logical piece of information; rather, use proximity to make sure that the next piece of information a reader sees is the next piece of information they should see.
None of these principles stands alone. Repetition and alignment together create the “normal” state that allows changing the shape or position of a piece of text to produce contrast; repetition and proximity go hand-in-hand to create useful formats like bulleted lists — the repetition of the bullet adds force to the proximity of the points. In fact, the bulleted list above uses all four of these principles to work: it contrasts with the body of this article by being aligned to a different baseline than the rest of the paragraphs; each principle is in boldface, providing contrast, and is also directly followed by its explanation, providing proximity; the bullets, the boldfaced text, and the alignment are repeated in each new point on the list.
Almost all design builds on the foundation laid out above. Asking yourself how well each element of your layout satisfies these basic principles is a good way to make sure your work remains readable to your audience while also communicating a bit of your organization’s or business’ character. You may already unconsciously use these principles in your work, but knowing the principles and recognizing their use will help you make better, more conscious decisions in the future.
Ultimately, the goal is for the work you put in to designing a document to disappear, to become invisible, leaving your reader or viewer with unfettered access to the points you are trying to convey — both directly in your text and, ever-so-subtly, in your choice of design elements. In this respect, it’s a thankless job, because only rarely will anyone comment on (or even notice) the quality of design — but they will notice, and act on, the message. And that’s what’s important, isn’t it?
From Lifehack.org
AJAX, DHTML and JavaScript Libraries
July 24th, 2007
Smashing Magazine made a list of Ajax frameworks out there in the wild. Could be useful for somebody to do a proper review and comparison of the different frameworks
Ajax, DHTML and JavaScript components are important in the era of Web 2.0. Recent Web-applications tend to use them to provide more interactivity and guarantee better functionality. But what Javascript libraries can be used for a new web-project? What functions, effects and useful techniques are actually provided by them