[Phpgroupware-developers] Proposal for XHTML/CSS/JavaScript usage

[Kai Hofmann]

Because of my experience with Websites/-applications I would like to make
some
suggestions regarding the usage of XHTML, CSS and JavaScript:

1) Using XHTML 1.0 Transitional 
   The step from HTML 4.0 to XHTML 1.0 transitional is very small and the
first step
   towards XHTML 1.1/2.0.
   Differences are:
   - all tags and attributes are written in lower case
   - all tags must have a start and an end tag
     tags that have no end tage like hr, br, input, meta have to be written
as follows:
     <hr />, <br />, <input type="submit" />, <meta name="keywords"
content="" />
   - all attributes values must be written in quotation marks
     attributes like "selected" from option tags have to be written as
follows:
     <option selected="selected">...</option>
   - all tags muste be correctly used and correctly nested - only as allowed
by
     the XHTML 1.0/HTML 4.0 standard especially by the DTD that defines it.

2) Verifing all HTML pages via the W3C validator
   All XHTML pages should be correct and verified via the W3C validator.
   Hint: 
   Live would become easier if it would be possible to verify the templates
   directly before processing - this is not possible now, because of the
   structure of the templates and its usage.

3) Using CSS
   CSS should be used for formatting (font, colors, alignment, etc.)
   instead of using XHTML tags/attributes like font etc.
   Using css should still be done with some care, but
   http://www.ddj.com/webreview/style/
   is very helpful here (sorry you have to login there :(
   In this way "Themes" will be done by using CSS!
   CSS should only be used in an external ".css" file - never inside of
XHTML code.
   This will also allow to have different CSS for different media types:
   screen, print, projection, ....
   create an own file for each media type.

4) Verify all CSS via the W3C css validator

5) Usage of JavaScript
   JavaScript classes/functions should always be defined in external ".js"
file.
   Most important using JavaScript is to use it in a defensive way. That
means
   the whole application should work without javascript! Only add extra
   JavaScript functionality that will make life simpler when javascript is
available
   - nothing more - nothing less!

   Prefered is object oriented javascript - using "classes".
   Accessing XHTML documents should only be done by using the W3C DOM
specification -
   doing it in this way will make JavaScript compatibe to all browsers that
implement
   the W3C DOM (Internet Explorer, Mozilla, Opera, ....).
   Javacript code should be documented by using JSdoc (see sourceforge)
   For the release this documentation could be stripped by using an external
tool.

6) Verifying javascript by using Mozillas javascript console
   another good step would be to write javascript unit tests 
   (frameworks can be found at http://www.xprogramming.com/software.htm)

7) Make all XHTML pages and CSS styles compatible for people with
disabilities

8) Verify this by using the bobby checker
   http://bobby.watchfire.com/bobby/html/en/index.jsp


As an proof of concept for websites that follow these rule I would mention
my own works:
      http://www.hofmann-int.de/
      http://www.datelib.de/
      http://www.isl.org/        (my former employer)


Greetings

    Kai

P.S.: please feel free to add this proposal to the wiki


-- 
*****    Open Source und Linux im professionellen Einsatz    *****
**  komplexe Mailserver, Groupware, Office: sprechen Sie uns an **
Dipl.-Inform. Kai Hofmann                    Team Softwarelösungen
pro|business AG, EXPO Plaza 1 (Deutscher Pavillon), 30539 Hannover
E-Mail: address@hidden,   Tel.: 0511/60066-332, Fax: -355
WWW: http://www.probusiness.de/