Hi, folks! It's time to write a blog again. I've been "offline" for quite a while now. The EFP (External Facing Portal) features have been out in the market since October 2005, and I've heard a many "ooohs!" and "aaahs!" so far. What people like most are the flexibility they gained with the new and enhanced JSP taglibs and the performance improvement they can achieve when implementing a truly light portal using all the bells and whistles that the EFP features offer.
Just once again here the main features in short form:
- Flat frameworkpage
- Navigation by URL
- Server-side navigation cache
- Short (hashed) URLs
- Quicklinks
- Navigation taglib
- Framework taglib
- Enhanced layout taglib ("tray taglib")
In this blog series I will give you some real life examples of how to use the taglibs. This is the first of four blogs covering this issue. The following topics will be covered:
- Semantic HTML with EFP
- Simple Hierarchical Breadcrumb (in Part 2)
- Recursive Vertical Tree-Navigation (in Part 2)
- Inplace Sitemap (in Part 3)
- Suckerfish DropDowns (in Part 3)
- Hover Trays Arranged in
-Columns (in Part 4) - Trays with Different Colors (in Part 4)
But first I will start off pleading you to write "good" HTML: When coding HTML/JSP prioritize modern, semantic HTML and CSS layouting over table rendering techniques!
Semantic HTML with EFP
The so called "table rendering" technique makes exhaustive use of tables and "spacer GIFs" for achieving certain look&feels. It dates back to the time when browsers like Netscape 3/4 and Internet Explorer 3/4 were widely spread and the CSS standard wasn't yet adopted well by those browsers. So webdesigners had no other choice but to use (nested) tables and spacer GIFs to implement a given layout. Marketing was pleased, the user had a nice web experience and everything was fine.
The only big problem with it is that it blows up the code and makes it hard to maintain and – often more important – inaccessible for certain user groups.
Nowadays with the new generation of browsers and the good adoptance of the CSS 2.0 standard the reasons are gone! You can have the same layout with much lighter and more accessible code when you separate the structure/content (HTML) from its presentation (CSS). Furthermore you are invited to use HTML tags that have a semantic meaning, for instance:
Some Headline
rather than mixing content and layout in a chaotic manner:
Some Headline
Let me give another example. The screenshot below shows a layout that has been implemented twice using the two techniques:
- firstly with the table rendering technique,
- and then with semantic HTML for content and CSS for layouting.
Only by looking at both HTML codes you will notice the difference. One other benefit will be clear by comparing both versions: The second code takes up only half of the size (in KB) of the first one. This is mainly due to replacing the tables and spacer GIFs by other HTML elements.
But please don't get me wrong: HTML tables are still good for tabular data!
Here is the "bad" code:
 | Arbeitsplatz Manager | ||
| |||
| http://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/documents/deellha/ap_active... Informationen für Führungskräfte Der Arbeitsplatz Manager stellt Führungskräften der Leitungsebenen managementspezifische Informationen zur Verfügung. Bitte beachten Sie, dass es sich hierbei um einen passwortgeschützten Bereich handelt, auf den nur autorisierte Personen Zugriff haben. mehr... | |||
| |||
| |||
| Redaktionstools für Nachrichten | ||||||
| | ||||||
Abhängig von dem Bereich, in dem Sie arbeiten, stehen zwei verschiedene Nachrichten-Tools zur Verfügung:
| |||||||
| |||||||
|
| ||||||
And here's the "good" one:
Arbeitsplatz Manager
Informationen für Führungskräfte
Der Arbeitsplatz Manager stellt Führungskräften der Leitungsebenen managementspezifische Informationen zur Verfügung. Bitte beachten Sie, dass es sich hierbei um einen passwortgeschützten Bereich handelt, auf den nur autorisierte Personen Zugriff haben. mehr...Redaktionstools für Nachrichten
Abhängig von dem Bereich, in dem Sie arbeiten, stehen zwei verschiedene Nachrichten-Tools zur Verfügung:
- Das Nachrichten-Tool 'LNN' für die Startseiten der Konzernbereiche und globalen Themenbereiche.
- Das HR News Management für den globalen Themenbereich 'Arbeit & Leben' für Online-Redakteure des VP Ressorts und der HR-Funktionen der Gesellschaften.
Now, tell for yourselves!
Developing accessible web frontends by choosing semantic HTML over table rendering and separating structure/content (HTML) from the presentation/layout (CSS) is not only a new, modern paradigm to be followed just because it is hype. It should be taken for granted in any case!
All of the following taglib examples are therefore based on semantic, accessible HTML using CSS-based desing for the seperation of structure and presentation.
If you're interested in this issue you're welcome to graze through the following sites:
- A concise presentation about what semantic HTML is about:
http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html - A semantic HTML markup guide (by Mezzoblue):
http://mezzoblue.com/downloads/markupguide - An very impressive demonstration of what can be accomplished visually through CSS-based design:
http://www.csszengarden.com - "A List Apart", a website with a whole lot of articles on web developer topics:
http://www.alistapart.com
In Part 2 I will give you the first examples: a hierarchical breadcrumb and a vertical tree-navigation. Bear with me!
1 Comment