Editorial
User Interface
Constructing an effective user interface for a web application requires that you apply the right mix of a variety of technologies, including HTML, CSS, JavaScript, JavaScript libraries such as Prototype, and perhaps Flash or Flex, and use them to implement a well-thought-out interaction design that reflects the perspective of your users, not that of the developers.Using Yahoo's User Interface Library Treeview in Rails
Our BuildingWebApps.com site organizes much of its information by assigning one or more categories from a domain specific taxonomy to each article, link, or other piece of content. A site visitor can browse the information in several ways, but one quick approach is via a category browser widget that appears on most content pages. The hierarchical tree view is implemented by embedding Yahoo's Open Source User Interface Library Treeview (aka YUI treeview, or just treeview here) into our RHTML. continue...
Articles
New Articles
from around the Web
- Redesigning For A Reason: Towards Better Conversion Rates
- TinyMCE WYSIWYG Text Editor on Rails
-
Internet Explorer and CSS issues
Good summary of the layout issues and workarounds for various versions of Internet Explorer.
-
CSS Positioning
Detailed description of how CSS positioning works.
- Javascript framework usage among top websites
- The Next-Gen Web: HTML5 - Will We Ever See A Real Standard?
- HTML Editor or Rich Text Editor for Your Ruby on Rails Apps
- Scriptaculous switch to github and Lighthouse
- Prototype JavaScript Framework
-
Prototype JavaScript framework: Introduction to Ajax
An introduction to implementing Ajax with the Prototype JavaScript framework.
-
Painless JavaScript Using Prototype
A good tutorial on using Prototype (not Rails specific).
Books
Related Books
High Performance Web Sites:
Essential Knowledge for Front-End Engineers
List: $29.99 Amazon price: $19.79 Buy
Links
Links by Type
Documentation (14)
- GotAPI
Searchable API documents for Rails, as well as for HTML, CSS, and JavaScript. - HTML 5 Draft Specification
- CSS Reference
An extensive, free online reference to CSS. - HTML Reference
Extensive online HTML reference from the folks at SitePoint. - SitePoint HTML Reference
- Mozilla Developer Center
- Prototype JavaScript framework: API.Prototype API Documentation
API documentation for the Prototype JavaScript framework. - Ajax In Place Editor
Scriptaculous in-place editor widget documentation. - Scriptaculous home on GitHub
Scriptaculous has moved its code to Github, and the documentation will be ported in time. - Legacy Scriptaculous documentation
A static capture, sans styling of the original Scriptaculous documentation wiki, which will eventually be ported to github. - AJAX In Place Rich Editor: In place AJAX-powered WYSIWYG editor
Using the great libraries Prototype 1.6, Script.Aculo.Us 1.8 and TinyMCE 3.1, IPRE provide a really easy way to implement an in place AJAX-powered editor using WYSIWYG. - WYMeditor - web-based XHTML editor
A new alternative for WYSIWYG editors. Uses JQuery. - jQuery: The Write Less, Do More, JavaScript Library
Home page for jQuery, a full featured, light-weight Javascript library. From site: "jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages." - Internet Explorer Bugs | CSS Class
Collection of known bugs with test cases for IE including IE8 (beta and beyond).
Events (2)
- 2008 Web 2.0 & Technology Conference Calendar
An excellent list of web-related conferences. - Future of Web Design
Dates: 11/07/07– 11/08/07
Groups (1)
- Ruby on Rails: Spinoffs
Forum for discussion of Prototype, Scriptaculous, and other Rails spinoffs.
Screencasts (3)
FAQs & Resource Lists (4)
- Front Page - css-discuss
Great set of resources for learning the peculiarities of CSS. - John's Essential Guide to CSS
A list of essential reading for people interested learning CSS. Most of the articles are from A List Apart, but the volume of articles at A List Apart can can be overwhelming to people just to getting started. Consider this a pocket guide to the best of A List Apart with a few additional links thrown in to spice it up a bit. - Danny Goodman FAQ
- Nice Web Type
Software (25)
- Jaxdoc: Javascript-enhanced documentation viewer
Open-soure project for viewing RDocs with and Ajax interface. This is the code behind "RailsBrain.com":http://railsbrian.com and "RubyBrain.com":http://rubybrain.com. - blueprintcss
An open-source CSS framework, which provides a good starting point for your CSS designs. - SproutCore
- BlogFish: tooltip.js
Javascript function to add a tooltip when the user hovers over certain items. Uses Prototype and includes Rails helpers. - Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
Central site for the Prototype JavaScript framework. - Scripteka :: Prototype extensions library
A library of extensions for the Prototype JavaScript framework. - script.aculo.us - web 2.0 javascript
Main web site for the Scriptaculous project. - WYM on Rails
Plugin for integrating the WYM editor into Rails. - WYMeditor - web-based XHTML editor - Home
- Opera Dragonfly
Browser Debugging tool (like Firebug), but runs on any device that Opera runs on. - Firebug - Web Development Evolved
Comprehensive debugging and in-browser development tool for Firefox. - A library of DHTML and Ajax scripts
- Dojo Toolbocks
Plugin for using the Dojo JavaScript libraries with Ruby on Rails applications. - CSS Balanced Columns V3
Unless you use tables for layout, achieving equal-height columns is a matter of choosing the lesser of various evils. This is a sophisticated JavaScript solution that has a lot to recommend it. - jQuery: The Write Less, Do More, JavaScript Library
- jQuery 1.2.6: Events 100% faster
- jRails -- jQuery on Rails
jRails is a drop-in jQuery replacement for Prototype/script.aculo.us on Rails. Using jRails, you can get all of the same default Rails helpers for javascript functionality using the lighter jQuery library. - PullMonkey Projects: Open Flash Chart Plugin for Ruby on Rails - Graphs
- Open Flash Chart
- FusionCharts v3 - Animated Flash Charts and Graphs
Flash-based chart generator. - ZiYa
Rails plug for creating Flash-based charts. - Community Mapbuilder
An open-source, Ajax mapping client that runs in the browser and renders maps from Web Map Services (WMS), Web Feature Services (WFS), GeoRSS, and Google Maps. - YM4R: Yahoo Maps for Rails
Plugin for using Yahoo maps in Rails applications. - Mozilla Labs Prism
Prism is a Mozilla tool for creating "single site browsers" to turn a web app into something that acts a little more like a desktop app. - IBM Page Detailer
Windows-based utility for analyzing page load times.
Presentation Slides (1)
- Secrets of JavaScript Libraries
Slides from a session at SXSW 2008 that included the authors of the Prototype and Scriptaculous frameworks, as well as other notables.
Directories (2)
- Design Float
A Digg-like site for web design articles. - ProgrammerMeetDesigner - where web developers find web designers
Cheat Sheets (1)
e-Books (1)
Hosted services (3)
- Test your web design in different browsers - Browsershots
This free service renders your page in a variety of browsers for Linux, Windows, and Macintosh, so you can see how your design fares in browsers that you don't personally have access to. - ColorJack: Sphere (Color Theory Visualizer)
A great free visualization tool for picking sets of colors according to various schemes. - Typetester -- Compare fonts for the screen
A great free service for seeing what different fonts and settings look like on screen.
General Sites (6)
- A List Apart
An online magazine about web design, with some of the highest-quality articles available. - Eric Meyer: CSS
An assortment of CSS demos, tests, and documentation from one of the world's experts on the topic. - W3Schools Online Web Tutorials
- CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase
- CSS Menu Generator
- Elements of Design: A Web Design Showcase
Blogs
Top Blogs
- WebAppers - Hunting the Best Open Source Resources for Web Developers
- Molecular Voices
- Theresaneil's Weblog
-
Ajax Bestiary » AJAX Development, News, Techniques & More
"A Javascript Field Guide" of useful techniques.
- scottraymondnet
- Relevance - Relevance Weblog
- AlternateIdea
-
perfection kills
"Exploring prototype by example"
-
mir.aculo.us
Thomas is the author of the Scriptaculous JavaScript library.
-
WebORB Blog
Blog from the authors of the WebORB, a Rails plugin for connecting to Flash and Flex user interfaces. (Also available for PHP and other server-side platforms.)
-
OnRails.org
Blog from the developer of the free time-tracking application time.onrails.org, as well as RailsLogVisualizer, a Flex-based Rails log analyzer.
