IBM home page improved

www.ibm.com

IBM has made several impovements in their homepage markup: so I want to give them credit after all blames I have made before....

I like usage of network path references,
even if it is not consistent across whole page.

Also usage of iepngfix, DD_belatedPNG.fix('#ibm-geo, #q, #ibm-search, .ibm-no-mobile');
is fancy, but, why they don't credit the original author ?

What I still hate is overuse of IDs, presentational classes and endless DIV nestings

<!-- LEADSPACE_BEGIN -->
<div class="ibm-container" id="ibm-leadspace-head">
<div class="ibm-container-body" id="ibm-leadspace-body">
<div class="ibm-columns" id="ibm-lead-1">
<div class="ibm-col-1-1">

<!-- LEADSPACE_END -->
<div id="ibm-pcon">
<div id="ibm-content">
<div id="ibm-content-body">
<div id="ibm-content-main">
<div id="ibm-news-feed">
<div id="ibm-news-feed-inner">

 
<!-- PROMOTION_BEGIN -->
<div class="ibm-container" id="ibm-promotion-module">
<div class="ibm-container-body">
<div class="ibm-columns">
<!-- ibm-col-6-2 ibm-expand-section: Z725354V02338R50 -->
<div class="ibm-col-6-2 ibm-expand-section">
<!-- B302493F36942F04 -->

I believe IBM has finally started to watch Web trends and tries to apply them to their
web design (at least to home page).

It is still very basic improvements,
but I wish them good luck!

Thanx for making my day nicer (even if you have changed this a couple of weeks ago, I have found time only today).

For dark ages see ora or ms homepage markup.
Watch and learn !

A better(????) way to author alternate text The real function of alternate text

I have read this
http://xstandard.com/en/articles/better-alt/
since it apeared in my twitter few days ago.

Pure bullshit ! Sorry folks. Image should be used for "Content"
and ALT should really represent content, so it SHOULD describe what is on the image.

For "trick" like heart image, button image etc...

we are talking about

alternate graphical representation for text
not alternate text representation of graphical image content.


So it is all wrong from the begining
from the very markup point of view.

Use any reasonable tag to encapsulate text and style it using CSS.
It can be ABBR if you text contains shortened form like heart pictogram,
or use A HREF if you want to link as well, STRONG,
or use SPAN in the worst case.


Antisable:

save the document by pressing <img alt="save button">

Better:

save the document by pressing <span class="img-as-text save-btn">save button</span>.


heart example would look like:

ShadedBorder

http://www.ruzee.com/blog/shadedborder

almost unbelievable
what someone is willing
to do for "rounded corners" ;-))

GWT real-world-projects and w3.org Validator

I tried to find out who is using GWT. Instead of writing
google dork which could show-up random lame implementors,
I have used offical chosen GWT showcase:
"real-world-projects.

Lets see how they fit into w3.validaton:

Google Moderator = 11 Errors

Go Frid = 40 Errors, 18 warning(s)

Lombardi Blueprint = 28 Errors, 18 warning(s)

etc. etc...

So is it really so difficult to create GWT page passing w3 validation ? Or is it again just bad use of framework by "web ignorants" ?

P.S. No real analysis performed, sorry, no more time to waste tonight

OL snipped (valid HTML from your JSP components, PLEASE !)

many component authors are lazy to read HTML specification,
and lazy to write extra if in the code as well.
One of the examples is title tag absence in code generated by
myfaces components (see older posts).
Proposal for correct list rendering:

<c:if test="${!empty files}">
<ol>
<c:forEach var="file" items="${files}">
<li><c:out value="${file.name}"/></li>
</c:forEach>
</ol>
</c:if>

The point is that OL without child LI is nonsence from HTML point of view.
Later we will talk about what element
to generate instead for empty list
and if null and empty is the same (EL does not care of course).

Fix For WST (Web Standard Toolkit) template

This is just sick ;-)

<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page language="java"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" />

<jsp:text>
<![CDATA[ <?xml version="1.0" encoding="UTF-8" ?> ]]>
</jsp:text>

<jsp:text>
<![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ]]>
</jsp:text>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>

</body>
</html>
</jsp:root>


My proposed version is:

<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page language="java"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" />
<jsp:output omit-xml-declaration="no" doctype-root-element="html"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>

</body>
</html>
</jsp:root>

Do you think ther is a reason or just ignorance ?
Fist original WST code is buggy, outputed "XHTML" will have whitespaces before ?xml and whitespaces before doctype. (Authors, please read at least JSP.1.3.8 White Space) if not XML and HTML specs ;-))

HTML or XHTML ?

somewhere from http://www.betterform.de/demo.xhtml

HTTP:
Content-Type: text/html;charset=UTF-8
.........................
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<!-- *** powered by betterFORM, &copy; 2010 *** -->
<head>


Bug or feature ?

Double DOCTYPE, jsp:output, trh:html (trinidad) and JDeveloper wizards

This the result when you click "new JSF Page" "wizard"
and use "*.jspx" and "Render in mobile device" option.


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad"
xmlns:dvtt="http://xmlns.oracle.com/dss/trinidad/faces">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<trh:html>
....


This however has one major problem,
produces invalid HTML markup with DOUBLED DOCTYPE.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="en-US">
....


This is because one is produced by
jsp:output
and another by
thr:html + org.apache.myfaces.trinidad.core renderkit
(which is default for JDeveloper 11.1.1.3.0 and "ADF Mobile")
It seems just like coincidence that both are the same (read more...)

Solution:
As far as I hnow, the thr:html does not have "none" option for "Mode"
see http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/trh_html.html
So the best is to remove all doctype-* from jsp:output.
Actually if reading the JSP spec for omit-xml-declaration, you can remove whole
jsp:output because:

omit-xml-declaration....
The default value for a JSP document that has a jsp:root element is “yes”.

To bring some more info: the actual DOCTYPES rendere for MSIE 7.0 with
various swiches are:


default (damned again ?):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
S S A A A A A A Q

quirks:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Q Q Q Q Q Q Q Q Q

strict (this should be default in 2010 !!!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
S S S S S A A A A


The letters are modes for specific browsers taken from:
http://hsivonen.iki.fi/doctype/

Link of the day ! "DOM Deviations", sorry "Normative Variations"

The following subsections detail the normative variations from MUST requirements in [DOM Level 3 - Core].

http://msdn.microsoft.com/en-us/library/ff460357(v=VS.85).aspx

Or even better:
Internet Explorer Standards Support Documents

http://msdn.microsoft.com/en-us/library/ff405926(v=VS.85).aspx

getAttribute("href",MAGIC_FLAG)

I have notice the cross-browser difference on
getAttribute("href"), value.href
long, long time ago,
but I hade no reasonable explanation nor workaround ;-(

Of course jQuery people already knew ;-)

// Check to see if an attribute returns normalized href attributes
div.innerHTML = "";
if (div.firstChild && typeof div.firstChild.getAttribute !== "undefined" &&
div.firstChild.getAttribute("href") !== "#") {
Expr.attrHandle.href = function(elem) {
return elem.getAttribute("href", 2);
};
}

I have missed the RTFM step ?

http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

input.value vs. input.getAttribute("value")

Just quick obervation:

HTML comes to client with server side value
"input value='orig'.
Now let's dump
i.value and i.getAttribute("value")
in window.onload handler.

results:
MSIE 7.0: orig, orig
FF: 3.5.6: orig, orig
as expected both values reflect the data sent from server inside value attribute.

Now, change value by typing to "new" text.
Click refresh (or navigate away and back).

You should read "new" in the field (if browser remembers).
All fine:

Now look at the dump from onload handler:

MSIE 7.0: new, new
FF: new, orig

In msie the original HTML markup value is not accessible (lost ?)
by getAttribute after return to the page.

TODO: test the others, find explanation