events in valid xhtml+css

Tobias · 18.05.2004, 13:05

events in valid xhtml+css

Hi!

This post is about my modification of the events-module to create nearly valid xhtml source.

Advantages:

xhtml output!
nearly valid source (see below)
better support of semantic tags!
thereby better accessibility and nicer non-styled view
full css-powered with new syntax for easier advanced styling (see CSS selectors-Tutorials to learn how to use).
no more depricated tags an inline-styles. therefore full and easily customised with css
nice output inside the xhtml-source with nearly right tab-view.

Overview of changes:

change the following files: events.php, events.html.php, events.class.php
configuration-header: changed to div-style. semantically this has nothing to do with tabular data.
views: day, week, month, category: deleted layout table and changed markup to definitoin list (<dl><dt><dd>). See SimpleQuiz for discussions on semantics.
view: month: cleanded layouttable to ohne wrapper table, added tags and css-attributes to make it easier style-able and improve accessibility. now valid xhtml
added some language-file-definitions, e.g. for some attributes
deactivated the <>-bottom-line since it didn't make sence to me
changed css-file-support (see below)
excaped all & as & in all URL-Functions. Otherwise, it wouldn't validate (see w3c).

Demonstration:
You want to see, what it looks like?
The Test-Site ist still build up so I don't want to publish it but you can have a look at these static files.
Tested with: Firefox, IE 6, Safarie so far (work in progress...).

open To-Do s

change source so that it will complete validate. This need changes:
change configuration-header-forms: replace depricated attributes (name, task, ...) and add required attribute action; add submit button as alternative for javascript-submit
label-support for configuration-header (you can always disable the view of labels via css but its good for accessibility!)
disable input-fields in configuration-header when they cannot be used (e.g. day-change in year-view).
add cathegorie-field inside the configuration header (eventually)
add SEF-support -- I tried to activate SEF by parsing events-urls with SEF-Function but then the component doesn't work anymore...

Files
Download the changed files: events.php, events.html.php, events.class.php, germanneutral.php
There is also a view that compares the original files with my modification: list changes events.php, list changes events.html.php, list changes events.class.php, list changes germanneutral.php.

And now?
Would be great to get some feedback.
If someone is motivated to solve some of the open ToDo-Items: Great, please post here!

And I really appreciate if those changes find their way inside the regular event-source. This would solve the open Whishlistitem of valid-xhtml-support.

the <del>future</del><ins>present</ins> of the web: xhtml+css!

~T

Update: Changes *.php to *.php.txt

Tobias · 18.05.2004, 13:12

here some detailes on the css-files:

1. look inside the source and you will finde a "css-events.css".
This styles the events.

Inside this file you will find /**/-comments that show the structure of the new xhtml-source-output.
This can be taken to add styles to my existing-style-definition.

2. I changed the way, the style is added to the template. Placing the <link>-tag somewhere inside the body isnt the nice way

. So my template has something linke this:

PHP Code:

 
    <style type="text/css" media="screen">

    /* Beschreibungen der einzelnen CSS-File und ihrer Funktion in den Files. */

    /*<![CDATA[*/

        @import url("<?php echo $mosConfig_live_site;?>/templates/x.de/css-Grundlayout.css");

        @import url("<?php echo $mosConfig_live_site;?>/templates/x.de/css-Navigation.css");

        @import url("<?php echo $mosConfig_live_site;?>/templates/x.de/css-mamboModule.css");

        @import url("<?php echo $mosConfig_live_site;?>/templates/x.de/css-Text.css");

        @import url("<?php echo $mosConfig_live_site;?>/templates/x.de/css-SpecialArtikelStyles.css");

        <?php

        if (preg_match('!com_events!', $_SERVER['QUERY_STRING'])) {

            // Da Safari ein andere Formular-Handling hat, funktioniert diese Abfrage nicht immer. Darum ist im event-Modul-Source noch einmal ein Script, das das CSS einbindet, wenn Safari verwendet wird.

            echo "@import url(\"$mosConfig_live_site/templates/x.de/css-Kalender.css\");";

        } else {

            echo "@import url(\"$mosConfig_live_site/templates/x.de/css-TextTable.css\");";

        }

        ?>

IMO the better way

.

~T

--------- update 04-06-23 ----------------

<g> Sorry, I would have sweared that I published the css at this place as well.

Here is the CSSfiles, editing-date today

. Have a look at the original site and css when it is released!
(Change the css-filesname with the names listed at the top of the posting to get the other files.)

HTH~T

MLr · 19.05.2004, 14:05

See the comment from Dave at
http://mosforge.net/forum/forum.php?...5&forum_id=296.

Every new development member is welcome

Tobias · 28.05.2004, 11:43

Just to let you know: I will post some more changes on the way year are visualised and on the css-files in a few days.
~T

Phew · 23.06.2004, 14:33

Could you upload your css as well ? I don't quite get it how to create everything, but I surely like your design.

I can't figure it out how to connect the layout correctly to the css files.

Thanks!

Tobias · 23.06.2004, 15:13

See above posting, edited today.
HTH