Category: "HTML / CSS"

AJAX for speed and polish

With a good toolkit (think dojo), AJAX can let you make a beautiful site.

One strategy I adopted was to use a dual delivery approach on the server side, so server side code can deliver either HTML or JSON. This allows you to reuse the server side logic.

Although I used custom code, with PHP 5.2’s json_encode function and Smarty, an even better implementation would probably be to wrap the delivery logic with a framework like Zend to completely separate the delivery form from the application logic.

There is a tremendous bandwidth savings, and the site interface becomes much smoother, since the only parts of the page that are refreshed reflect the content updates.

In addition, with a toolkit, there are often great widgets and features to create better and more powerful interfaces.

If AJAX will be used, the HTML architecture may need to be adjusted, so it may be worth building up a single page fully, prior to coding the remaining pages. A bit of server side logic can really help as well.

dojo readOnly indicator

A contribution to dojo, a read only indicator for text inputs. It uses an existing image from the tundra theme to place the ubiquitous circle with a line through it in the right hand part of read only text inputs.


.dijitReadOnly
{
        background: #fff url('../dojo/dijit/themes/tundra/images/no.gif') no-repeat right !important;
}

Common web page requirements

This is a list of implied requirements recommended for all web pages.

  • Page should render properly in all supported browsers. Identical is not required, but equivalent is.
  • Client side code (javascript) must execute properly in all supported browsers.
  • Site visitor must be alerted if they attempt to navigate away from the page without saving their changes, or if the session timed out and their changes have already been lost.
  • If AJAX is used, authentication and access control must be applied to all requests. Client must handle server responses to these conditions gracefully.
  • Client must validate the data fully before submitting it to the server. Client should alert user during entry if data is invalid. Think dojo.
  • Server must perform appropriate escaping on all incoming data to avoid SQL injection and commandline attacks. Server should validate data with the same criteria as the client to limit the possibility of modified form data.
  • User passwords should never be sent to the browser. Password recovery should be performed by generating a new password and emailing it to the account holder. User email addresses must be unique to support this.
  • Options which are unavailable should be displayed differently than those that are available, ideally they should not be displayed at all. Inputs which cannot be modified should be displayed in such a way that the user understands the information cannot be changed.
  • Layout should be managed primarily with CSS.
  • Colors should be specified in a separate CSS file to allow the color scheme to change quickly.
  • The majority of the layout should use divs, with tables used where appropriate.
  • Only those files required to display the page should be delivered with it. Pages with complex CSS requirements should be supported with dedicated CSS files which are only loaded with that page. The same is true for javascript. Those files should be cached at the client.
  • Care must be taken to ensure configuration data, particularly access information such as database name, username, and password cannot be displayed through a browser or visible to unauthorized users.

2 Year Curriculums for Internet Professionals

Logic / Engineering

Year 1
Fall
HTML
Javascript 1 (Logic)
Spring
CSS
Javascript 2 (DOM)

Year 2
Fall
MySQL
PHP 1
Data structures
Spring
Linux
PHP 2
Topics
Security
Client/server architecture considerations
Applications engineering
Template languages

Design / Development

Year 1
Fall
PhotoShop 1 - Fundamentals of design
HTML
Spring
User Interface Design
CSS

Year 2
Fall
Multimedia 1 - Visual design and construction
JavaScript
Application engineering - integrating designs with applications
Spring
Multimedia 2 - Flash/Shockwave, animation and audio
PHP
Topics
Page optimization
Server tuning
Browser compatibility

It is assumed these would offered in a Community or Junior college. Additional general education electives are assumed.

Fast CSS skin map idea

*** This post and link superseded by the ‘color map’ blog (see above) ***

The link provides a set of instructions and code which allow you to read the CSS files from a target application, then read CSS files from an existing site, and map the colors from the existing site into the target application, using sed.

This is brute force design, it would be very valuable for rapidly skinning an application to help a potential client visualize your application delivering their site.

The success of the approach is affected by the colors of both designs, this is a very simple method, the number of colors will impact how well they map.

The basic idea is to convert the colors from RGB into HSV, then reorder the HSV code into VSH - so the brightness takes precedence. In this case, it is assumed that the lightest colors will map to each other. Hue is virtually disregarded by its position.

The mechanics of the process are functioning as I wanted them to, although I haven’t tested it with live sites.

It also creates a shell script to generate image files of the colors, using ImageMagick, which is interesting but not actually used.

Requisite knowledge: Linux, PHP, bash, sed, regular expressions helpful.

I tried to put the text from the above link in the blog, but it didn’t work. Too many bizarre character strings.