Retooling Slashdot with Net Requirements Half II – A Record Aside

In Half I, we confirmed how Slashdot might get monetary savings and scale back bandwidth necessities by changing to semantic XHTML markup and CSS format. In Half II, we discover how standards-compliant markup and deft use of CSS might make Slashdot (and your websites) play properly in print and on handheld gadgets.

Article Continues Under

Printer-Pleasant Slashdot#section2

The print.css file provides a function
that Slashdot didn’t have earlier than, and it is just 10 strains of CSS code. We
merely flip off the floating on every <div>, after which do a show:none;
on any <div> of knowledge that’s ineffective to a printed documented, such
as search, ads, and so forth. (The ALA 3.0 print fashion sheet takes the same strategy. — Ed.)

Lastly, the file is linked with the
acceptable media sort in order that the CSS is barely utilized when the browser calls a
print command:

<hyperlink
rel="stylesheet" sort="textual content/css" 
href="kinds/print.css"
media="print" />

The Slashdot website now has a printer-friendly model with out specifically designed net pages or server-side scripts.

Handheld-Pleasant Slashdot#section3

Handheld Web gadgets are
dramatically growing in reputation. So why not construct the web site to take
benefit of those gadgets? The issue that the majority builders have with this boils all the way down to: “I don’t have a bunch of handheld gadgets to check on!” A simple
resolution is to get emulators. Listed here are a few hyperlinks to some that I exploit:

Let’s check out what Slashdot’s web site used to look on the Openwave Telephone Simulator (determine 1).

Discover the most important downside? There may be
black textual content displayed on a black background with no option to choose the textual content to
see what it says! The one phrases which are seen are hyperlinks. This occurred
as a result of within the 3.2 HTML doc the code states: <physique BGCOLOR="#000000" ...>.

That’s tremendous for many browsers since
later within the doc, there are different background shade modifications through tables, however
the desk construction was utterly damaged to suit the cellphone show. For
instance should you look towards the highest of this similar net web page, you will notice simply
the place the tables had been damaged to make the doc match (determine 2).

You’ll be able to nearly learn the web page: “Lo…gi…n W…hy Lo…gin…?” Now let’s check out
the net requirements model that was re-constructed utilizing XHTML and CSS (determine 3).

That is displaying the identical location
within the net web page as Determine 1. The one distinction is the code is following Net
Requirements. No extra code modifications had been crucial.

Let’s take a fast peek on the Palm
Emulator viewing the previous Slashdot code (determine 4).

The very first thing you discover is that
there’s a left-right scroll bar within the show window. It’s so much like trying
at an internet web page although a microscope. You’ll be able to view the data should you don’t
thoughts scrolling. The web page is ready as much as show on a pc display, not your
handheld display.

Let’s examine it to the net requirements model of Slashdot (determine 5).

What a clear show utilizing net requirements!

However I can hear you saying, “Hey,
there’s a horizontal scroll bar!” Sure, I do know. In case you take a look at the “Adopting
Open Supply” article on the web page, you will notice that the division identify is, “the
don’t-worry-they’ll-print-more-money dept.” That’s a 36-character phrase that’s
too large for the show! So that’s really an issue with the content material, which
in fact I didn’t alter!

As in Half I of this collection, the whole lot defined to date is mentioned in additional element on the College of Wisconsin – Platteville’s Slashdot net requirements instance website.