[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Phpgroupware-developers] Proposal for XHTML/CSS/JavaScript usage
From: |
Kai Hofmann |
Subject: |
[Phpgroupware-developers] Proposal for XHTML/CSS/JavaScript usage |
Date: |
Mon, 4 Aug 2003 08:30:11 +0200 |
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/
- [Phpgroupware-developers] Proposal for XHTML/CSS/JavaScript usage,
Kai Hofmann <=