| 1 |
rane 05/10/10 19:11:26 |
| 2 |
|
| 3 |
Modified: xml/htdocs/doc/en/articles l-redesign-1.xml |
| 4 |
Added: xml/htdocs/doc/en/articles l-redesign-2.xml l-redesign-3.xml |
| 5 |
l-redesign-4.xml |
| 6 |
Log: |
| 7 |
4 new articles from #104015 |
| 8 |
|
| 9 |
Revision Changes Path |
| 10 |
1.3 +3 -3 xml/htdocs/doc/en/articles/l-redesign-1.xml |
| 11 |
|
| 12 |
file : http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-1.xml?rev=1.3&content-type=text/x-cvsweb-markup&cvsroot=gentoo |
| 13 |
plain: http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-1.xml?rev=1.3&content-type=text/plain&cvsroot=gentoo |
| 14 |
diff : http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-1.xml.diff?r1=1.2&r2=1.3&cvsroot=gentoo |
| 15 |
|
| 16 |
Index: l-redesign-1.xml |
| 17 |
=================================================================== |
| 18 |
RCS file: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-1.xml,v |
| 19 |
retrieving revision 1.2 |
| 20 |
retrieving revision 1.3 |
| 21 |
diff -u -r1.2 -r1.3 |
| 22 |
--- l-redesign-1.xml 9 Oct 2005 17:13:23 -0000 1.2 |
| 23 |
+++ l-redesign-1.xml 10 Oct 2005 19:11:26 -0000 1.3 |
| 24 |
@@ -1,6 +1,6 @@ |
| 25 |
<?xml version='1.0' encoding="UTF-8"?> |
| 26 |
<!DOCTYPE guide SYSTEM "/dtd/guide.dtd"> |
| 27 |
-<!-- $Header: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-1.xml,v 1.2 2005/10/09 17:13:23 rane Exp $ --> |
| 28 |
+<!-- $Header: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-1.xml,v 1.3 2005/10/10 19:11:26 rane Exp $ --> |
| 29 |
|
| 30 |
<guide link="/doc/en/articles/l-redesign-1.xml" disclaimer="articles"> |
| 31 |
<title>The gentoo.org redesign, Part 1: A site reborn</title> |
| 32 |
@@ -24,8 +24,8 @@ |
| 33 |
document is an updated version of the original article, and contains |
| 34 |
various improvements made by the Gentoo Linux Documentation team --> |
| 35 |
|
| 36 |
-<version>1.1</version> |
| 37 |
-<date>2005-10-09</date> |
| 38 |
+<version>1.0</version> |
| 39 |
+<date>2005-10-10</date> |
| 40 |
|
| 41 |
<chapter> |
| 42 |
<title>An unruly horde</title> |
| 43 |
|
| 44 |
|
| 45 |
|
| 46 |
1.1 xml/htdocs/doc/en/articles/l-redesign-2.xml |
| 47 |
|
| 48 |
file : http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-2.xml?rev=1.1&content-type=text/x-cvsweb-markup&cvsroot=gentoo |
| 49 |
plain: http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-2.xml?rev=1.1&content-type=text/plain&cvsroot=gentoo |
| 50 |
|
| 51 |
Index: l-redesign-2.xml |
| 52 |
=================================================================== |
| 53 |
<?xml version='1.0' encoding="UTF-8"?> |
| 54 |
<!DOCTYPE guide SYSTEM "/dtd/guide.dtd"> |
| 55 |
<!-- $Header: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-2.xml,v 1.1 2005/10/10 19:11:26 rane Exp $ --> |
| 56 |
|
| 57 |
<guide link="/doc/en/articles/l-redesign-2.xml" disclaimer="articles"> |
| 58 |
<title>The gentoo.org redesign, Part 2: A site reborn</title> |
| 59 |
|
| 60 |
<author title="Author"> |
| 61 |
<mail link="drobbins@g.o">Daniel Robbins</mail> |
| 62 |
</author> |
| 63 |
|
| 64 |
<abstract> |
| 65 |
Have you ever woken up in the morning to the realization that your personal |
| 66 |
development Web site isn't really that great? If so, you're in good company. In |
| 67 |
this series, Daniel Robbins shares his experiences as he redesigns the |
| 68 |
www.gentoo.org Web site using technologies like XML, XSLT, and Python. Along |
| 69 |
the way, you may find some excellent approaches to use in your next Web site |
| 70 |
redesign. In this, the second installment, Daniel shows off the new |
| 71 |
documentation system and sets up a daily CVS-log mailing list. |
| 72 |
</abstract> |
| 73 |
|
| 74 |
<!-- The original version of this article was first published on IBM |
| 75 |
developerWorks, and is property of Westtech Information Services. This |
| 76 |
document is an updated version of the original article, and contains |
| 77 |
various improvements made by the Gentoo Linux Documentation team --> |
| 78 |
|
| 79 |
<version>1.0</version> |
| 80 |
<date>2005-10-10</date> |
| 81 |
|
| 82 |
<chapter> |
| 83 |
<title>The doc system</title> |
| 84 |
<section> |
| 85 |
<body> |
| 86 |
|
| 87 |
<p> |
| 88 |
If you've read the <uri link="/doc/en/articles/l-redesign-1.xml">first |
| 89 |
installment</uri> of my series on the gentoo.org redesign, then you know that |
| 90 |
I'm the Chief Architect of Gentoo Linux, making me responsible for the Gentoo |
| 91 |
Linux Web site. And right now, the site leaves a lot to be desired. Yes, it |
| 92 |
does look somewhat attractive, but when you look beyond the cute graphics you |
| 93 |
will see that it really doesn't serve the needs of its primary target audience: |
| 94 |
Gentoo Linux developers, users, and potential users. |
| 95 |
</p> |
| 96 |
|
| 97 |
<p> |
| 98 |
Last time, I used a user-centric design approach to create a set of priorities |
| 99 |
for the site, and then used these priorities to create an action plan for |
| 100 |
revamping gentoo.org. Two things were at the top of the priority list: new |
| 101 |
developer documentation and a new mailing list to communicate to developers |
| 102 |
changes made to our CVS repository. While adding the new CVS mailing list was |
| 103 |
relatively easy (though, as you will see, it was more difficult than I |
| 104 |
thought), the new developer documentation required a lot of planning and work. |
| 105 |
</p> |
| 106 |
|
| 107 |
<p> |
| 108 |
Not only did I need to create some actual documentation (a task that I had been |
| 109 |
ignoring for too long), but I also had to choose an official XML syntax that |
| 110 |
our new master documentation would use. You see, until a few weeks ago, I was |
| 111 |
creating the documentation in raw HTML. This was definitely a naughty thing to |
| 112 |
do, because by doing this content was being mixed (the actual information) with |
| 113 |
presentation (the display-related HTML tags). And what did I end up with? An |
| 114 |
inflexible mess, that's what. It was hard to edit the actual documentation and |
| 115 |
extremely difficult to make site-wide HTML improvements. |
| 116 |
</p> |
| 117 |
|
| 118 |
<p> |
| 119 |
In this article, I'll proudly demonstrate the site's new flexible XML |
| 120 |
documentation solution. But first, I'll recap my experiences in adding the CVS |
| 121 |
log mailing list to our site. |
| 122 |
</p> |
| 123 |
|
| 124 |
</body> |
| 125 |
</section> |
| 126 |
<section> |
| 127 |
<title>Adding the CVS log mailing list</title> |
| 128 |
<body> |
| 129 |
|
| 130 |
<p> |
| 131 |
The goal of the CVS log mailing list is to inform developers of new commits |
| 132 |
made to our CVS repository. Since I already had the mailman mailing list |
| 133 |
manager (see <uri link="#resources">Resources</uri>) installed, I thought that |
| 134 |
creating this new list would be easy. First, I would simply create the mailing |
| 135 |
list, then add the proper "hook" to the CVS repository so that e-mails would be |
| 136 |
automatically generated and sent out, describing the changes to our sources as |
| 137 |
they happened. |
| 138 |
</p> |
| 139 |
|
| 140 |
<p> |
| 141 |
I first started researching a special file in my repository's CVSROOT called |
| 142 |
"loginfo." Theoretically, by modifying this file, I could instruct CVS to |
| 143 |
execute a script when any commit (and thus, modification) was made to the |
| 144 |
repository. So I created a special loginfo script and plugged it into my |
| 145 |
existing repository. And it did indeed send out e-mails to the new "gentoo-cvs" |
| 146 |
mailing list whenever modifications were made to our sources. |
| 147 |
</p> |
| 148 |
|
| 149 |
<p> |
| 150 |
Unfortunately, this solution wasn't all I'd hoped it would be. First of all, it |
| 151 |
generated lots of e-mail messages -- one for each modified file -- and |
| 152 |
secondly, the messages were cryptic and sometimes even empty! I quickly removed |
| 153 |
my loginfo script and put the gentoo-cvs mailing list project on hold. It was |
| 154 |
clear that CVS's loginfo hook wasn't appropriate for my needs, and I had a hard |
| 155 |
time tracking down any loginfo-related documentation that could help me solve |
| 156 |
my problem. |
| 157 |
</p> |
| 158 |
|
| 159 |
</body> |
| 160 |
</section> |
| 161 |
<section> |
| 162 |
<title>cvs2cl.pl</title> |
| 163 |
<body> |
| 164 |
|
| 165 |
<p> |
| 166 |
Several weeks later I started looking for an alternative to loginfo. This time |
| 167 |
I did the smart thing and headed over to <uri>http://freshmeat.net</uri>. There |
| 168 |
I quickly found just what I was looking for: the incredibly wonderful |
| 169 |
<path>cvs2cl.pl</path> perl script available from |
| 170 |
<uri>http://red-bean.com</uri> (see <uri link="#resources">Resources</uri>). |
| 171 |
Instead of using the loginfo hook, <path>cvs2cl.pl</path> uses the <c>cvs |
| 172 |
log</c> command to connect directly to the repository and extract the |
| 173 |
appropriate relevant log information. Also, rather than spitting out relatively |
| 174 |
cryptic CVS log messages, it does a great job of reformatting everything into a |
| 175 |
readable ChangeLog format: |
| 176 |
</p> |
| 177 |
|
| 178 |
<pre caption="Output generated by cvs2cl.pl"> |
| 179 |
2001-04-09 20:58 drobbins |
| 180 |
* app-doc/gentoo-web/files/xml/dev.xml: new fixes |
| 181 |
2001-04-09 20:47 drobbins |
| 182 |
* app-doc/gentoo-web/: gentoo-web-1.0.ebuild, |
| 183 |
files/pyhtml/index.pyhtml, files/xml/gentoo-howto.xml: new gentoo-howto |
| 184 |
fixes |
| 185 |
2001-04-09 20:03 drobbins |
| 186 |
* app-doc/gentoo-web/files/xml/dev.xml: typo fix |
| 187 |
2001-04-09 20:02 drobbins |
| 188 |
* app-doc/gentoo-web/files/pyhtml/index.pyhtml: little update |
| 189 |
</pre> |
| 190 |
|
| 191 |
<p> |
| 192 |
<path>cvs2cl.pl</path> can also be instructed to generate output in XML format, |
| 193 |
and in my next article I'll take advantage of this by incorporating an |
| 194 |
up-to-date ChangeLog into the new developer section of our site. |
| 195 |
</p> |
| 196 |
|
| 197 |
</body> |
| 198 |
</section> |
| 199 |
<section> |
| 200 |
<title>The cvslog.sh script</title> |
| 201 |
<body> |
| 202 |
|
| 203 |
<p> |
| 204 |
Here's the script I now use to generate the daily ChangeLog e-mails. First, it |
| 205 |
changes the current working directory to the location of my checked-out CVS |
| 206 |
repository. Then, it creates $yesterday and $today environment variables that |
| 207 |
contain the appropriate dates in RFC 822 format. Notice that both date |
| 208 |
variables have the time set to either "00:00" or midnight. These variables are, |
| 209 |
in turn, used to create a $cvsdate variable that is then passed to cvs2cl.pl to |
| 210 |
specify the date range that I'm interested in -- the span of time from |
| 211 |
yesterday at midnight to today at midnight. Thus, the $cvsdate variable |
| 212 |
contains a datespec that informs <path>cvs2cl.pl</path> to log only changes |
| 213 |
made yesterday, but not others. |
| 214 |
</p> |
| 215 |
|
| 216 |
<p> |
| 217 |
In addition, I also created a $nicedate variable (used in the mail subject line) |
| 218 |
and use the mutt mailer (in mailx compatibility mode [see Resources]) to send |
| 219 |
the e-mail to the gentoo-cvs mailing list: |
| 220 |
</p> |
| 221 |
|
| 222 |
<pre caption="cvslog.sh script"> |
| 223 |
#!/bin/bash |
| 224 |
cd /usr/portage |
| 225 |
cvs -q update -dP |
| 226 |
yesterday=`date -d "1 day ago 00:00" -R` |
| 227 |
today=`date -d "00:00" -R` |
| 228 |
cvsdate=-d\'${yesterday}\<${today}\' |
| 229 |
nicedate=`date -d yesterday +"%d %b %Y %Z (%z)"` |
| 230 |
/home/drobbins/gentoo/cvs2cl.pl -f /home/drobbins/gentoo/cvslog.txt -l "${cvsdate}" |
| 231 |
mutt -x gentoo-cvs -s "cvs log for $nicedate" <\ |
| 232 |
/home/drobbins/gentoo/cvslog.txt |
| 233 |
</pre> |
| 234 |
|
| 235 |
<p> |
| 236 |
Using cron, I run this script every night at midnight. Thanks to |
| 237 |
<path>cvs2cl.pl</path>, my developers now get accurate and readable daily CVS |
| 238 |
updates. |
| 239 |
</p> |
| 240 |
|
| 241 |
</body> |
| 242 |
</section> |
| 243 |
<section> |
| 244 |
<title>The documentation project</title> |
| 245 |
<body> |
| 246 |
|
| 247 |
<p> |
| 248 |
Now, for the Gentoo Linux documentation project. Our new documentation system |
| 249 |
involves two groups of people or target audiences: the documentation creators |
| 250 |
and the documentation readers. The creators need a well-designed XML syntax |
| 251 |
that doesn't get in their way; the readers, who couldn't care less about the |
| 252 |
|
| 253 |
|
| 254 |
|
| 255 |
1.1 xml/htdocs/doc/en/articles/l-redesign-3.xml |
| 256 |
|
| 257 |
file : http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-3.xml?rev=1.1&content-type=text/x-cvsweb-markup&cvsroot=gentoo |
| 258 |
plain: http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-3.xml?rev=1.1&content-type=text/plain&cvsroot=gentoo |
| 259 |
|
| 260 |
Index: l-redesign-3.xml |
| 261 |
=================================================================== |
| 262 |
<?xml version='1.0' encoding="UTF-8"?> |
| 263 |
<!DOCTYPE guide SYSTEM "/dtd/guide.dtd"> |
| 264 |
<!-- $Header: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-3.xml,v 1.1 2005/10/10 19:11:26 rane Exp $ --> |
| 265 |
|
| 266 |
<guide link="/doc/en/articles/l-redesign-3.xml" disclaimer="articles"> |
| 267 |
<title>The gentoo.org redesign, Part 3: A site reborn</title> |
| 268 |
|
| 269 |
<author title="Author"> |
| 270 |
<mail link="drobbins@g.o">Daniel Robbins</mail> |
| 271 |
</author> |
| 272 |
|
| 273 |
<abstract> |
| 274 |
Have you ever woken up one morning and suddenly realized that your cute little |
| 275 |
personal development Web site isn't really that great? If so, you're in good |
| 276 |
company. In this series, Daniel Robbins shares his experiences as he redesigns |
| 277 |
the www.gentoo.org Web site using technologies like XML, XSLT, and Python. |
| 278 |
Along the way, you may find some excellent approaches to use for your next Web |
| 279 |
site redesign. In this installment, Daniel creates a new look for the site as a |
| 280 |
whole. |
| 281 |
</abstract> |
| 282 |
|
| 283 |
<!-- The original version of this article was first published on IBM |
| 284 |
developerWorks, and is property of Westtech Information Services. This |
| 285 |
document is an updated version of the original article, and contains |
| 286 |
various improvements made by the Gentoo Linux Documentation team --> |
| 287 |
|
| 288 |
<version>1.0</version> |
| 289 |
<date>2005-10-10</date> |
| 290 |
|
| 291 |
<chapter> |
| 292 |
<title>The new main pages</title> |
| 293 |
<section> |
| 294 |
<title>The site so far</title> |
| 295 |
<body> |
| 296 |
|
| 297 |
<p> |
| 298 |
So far, www.gentoo.org is showing marked improvement. In the <uri |
| 299 |
link="/doc/en/articles/l-redesign-2.xml">last article</uri>, I designed a new |
| 300 |
documentation system using XML and XSLT, so all our site documentation is |
| 301 |
looking great and is serving the needs of our visitors. However, the look of |
| 302 |
the site as a whole hasn't changed; that's because I haven't really touched the |
| 303 |
HTML that users see when they initially visit our site. Our main page still |
| 304 |
looks the same as it did before. |
| 305 |
</p> |
| 306 |
|
| 307 |
<p> |
| 308 |
Well, it's time for that to change. As I mentioned in the <uri |
| 309 |
link="/doc/en/articles/l-redesign-2.xml">first article</uri>, our main page is |
| 310 |
getting too congested and we have no room for expansion. As you can see, I've |
| 311 |
packed quite a bit of content into <uri |
| 312 |
link="/images/docs/l-redesign-13.gif">the page</uri>. |
| 313 |
</p> |
| 314 |
|
| 315 |
<p> |
| 316 |
I can't continue piling important links and paragraphs onto the main page -- |
| 317 |
there isn't any room! Fortunately for us, real estate on the Web is absolutely |
| 318 |
free. |
| 319 |
</p> |
| 320 |
|
| 321 |
<p> |
| 322 |
So, to solve this problem, I'll split our single main page (index.html) into |
| 323 |
several subject-specific category pages (index-about.html, index-download.html, |
| 324 |
etc.) and create a menu system that will allow the user to easily move from one |
| 325 |
category page to another. The default page that loads when a user visits |
| 326 |
<b>http://www.gentoo.org</b> will be the "About Gentoo Linux" category page. |
| 327 |
This is an excellent choice because it provides general information about the |
| 328 |
project that will be of interest to first-time visitors. |
| 329 |
</p> |
| 330 |
|
| 331 |
</body> |
| 332 |
</section> |
| 333 |
<section> |
| 334 |
<title>Site goals</title> |
| 335 |
<body> |
| 336 |
|
| 337 |
<p> |
| 338 |
Now, I'm going to outline the goals of this new "category page" system, as well |
| 339 |
as some general design goals that you can apply to your own projects. Then, |
| 340 |
we'll take a look at how the category page redesign meets these goals. |
| 341 |
</p> |
| 342 |
|
| 343 |
</body> |
| 344 |
</section> |
| 345 |
<section> |
| 346 |
<title>Modularity</title> |
| 347 |
<body> |
| 348 |
|
| 349 |
<p> |
| 350 |
The new category page system needs to be modular. What does this mean, exactly? |
| 351 |
Well, at the moment I have "About Gentoo Linux" and "Download/Install" |
| 352 |
categories in mind, but in the future I may need to add "About the Team" or |
| 353 |
"Support" categories as well. Having the ability to easily add new categories |
| 354 |
in the future requires that accommodations be put in place during the design |
| 355 |
stage. I'll have to make sure that there's room for additional category links |
| 356 |
on my navigation menu, and that the layout of the page is general-purpose |
| 357 |
enough so that it can be used to present many different kinds of information. |
| 358 |
Then, adding new categories will be relatively easy and I'll be able to avoid |
| 359 |
completely redesigning the site, if in a few months I once again find that |
| 360 |
things don't fit. |
| 361 |
</p> |
| 362 |
|
| 363 |
<p> |
| 364 |
There is a very important second step to modular design -- the use of XML and |
| 365 |
XSLT to separate presentation from content. If you've read part 2 of this |
| 366 |
series, then you're at least familiar with this type of design. Once I have the |
| 367 |
proper XSL template created, I can generate as many category pages as I like by |
| 368 |
simply providing the proper XML. And unlike the HTML, my XML will contain no |
| 369 |
display-related information; it's pure content. We'll take a look at the |
| 370 |
XML/XSLT implementation of the category pages in the fourth and final |
| 371 |
installment in this series. |
| 372 |
</p> |
| 373 |
|
| 374 |
</body> |
| 375 |
</section> |
| 376 |
<section> |
| 377 |
<title>General style guidelines</title> |
| 378 |
<body> |
| 379 |
|
| 380 |
<p> |
| 381 |
It's also very important that the new category layout be visually appealing. |
| 382 |
Remember, when a user types in http://www.gentoo.org, the "About Gentoo Linux" |
| 383 |
category page will appear first, so I want this to be an attractive page. Now, |
| 384 |
the word "attractive" means different things to different people, but this |
| 385 |
article presents a few good general guidelines that I am using during the |
| 386 |
design of the new category page that should apply to almost any Web site. |
| 387 |
</p> |
| 388 |
|
| 389 |
</body> |
| 390 |
</section> |
| 391 |
<section> |
| 392 |
<title>That boxy look</title> |
| 393 |
<body> |
| 394 |
|
| 395 |
<p> |
| 396 |
For general page layout, simple is best. If you're going to organize a bunch of |
| 397 |
complicated information, why not use a master table to split the page into |
| 398 |
various regions? This will also help to ensure that various parts of the page |
| 399 |
line up, which makes for a clean, attractive design. For example, this |
| 400 |
particular type of page layout is generally not very appealing: |
| 401 |
</p> |
| 402 |
|
| 403 |
<figure link="/images/docs/l-redesign-03.gif" caption="A sub-optimal page |
| 404 |
layout"/> |
| 405 |
|
| 406 |
<p> |
| 407 |
However, if the same information is presented using a common master grid, the |
| 408 |
site starts looking a lot cleaner: |
| 409 |
</p> |
| 410 |
|
| 411 |
<figure link="/images/docs/l-redesign-04.gif" caption="Aligned to a grid, |
| 412 |
things become less confusing"/> |
| 413 |
|
| 414 |
<p> |
| 415 |
And remember, the simpler your layout, the more information you'll be able to |
| 416 |
pack into the page without annoying your visitors |
| 417 |
</p> |
| 418 |
|
| 419 |
</body> |
| 420 |
</section> |
| 421 |
<section> |
| 422 |
<title>Text and background color</title> |
| 423 |
<body> |
| 424 |
|
| 425 |
<p> |
| 426 |
Next, we come to color choice. I have to admit that I happen to find bright |
| 427 |
green text on a dark blue background very appealing. But let's face it -- no |
| 428 |
matter how exotic and nifty they may look, dark backgrounds are a poor choice |
| 429 |
for text regions on a Web site. People expect to see dark text on a light |
| 430 |
background, and I for one think we should give them what they want. |
| 431 |
</p> |
| 432 |
|
| 433 |
<p> |
| 434 |
Well, I should clarify my position. Using light text on a dark background is a |
| 435 |
horrible choice for presenting paragraphs of information, but can be quite |
| 436 |
attractive and functional for your menu bar, or a small list of links. In other |
| 437 |
words, inverted text can be a great accent, but go with a traditional color |
| 438 |
scheme for your main text content areas; you'll thank me later. This will also |
| 439 |
help to ensure that your site looks good on paper. |
| 440 |
</p> |
| 441 |
|
| 442 |
</body> |
| 443 |
</section> |
| 444 |
<section> |
| 445 |
<title>Contrast</title> |
| 446 |
<body> |
| 447 |
|
| 448 |
<p> |
| 449 |
Besides the dark text/light background issue, there aren't many hard rules when |
| 450 |
it comes to Web site design. If you like dark colors, it's perfectly fine to |
| 451 |
make the top part of the page dark blue, for example. Now, hear me correctly: |
| 452 |
If you make the entire page dark blue, you've done a bad thing. If you make a |
| 453 |
portion of the page (preferably a portion of the page that doesn't have much |
| 454 |
text in it) dark blue, you might actually be doing a very good thing, because |
| 455 |
that dark blue will contrast nicely with your white text area and add some |
| 456 |
additional drama to your new site. In fact, a large portion of your page can |
| 457 |
contain saturated or dark colors; again, just make sure that your main text |
| 458 |
content is presented in a traditional fashion. |
| 459 |
</p> |
| 460 |
|
| 461 |
|
| 462 |
|
| 463 |
|
| 464 |
1.1 xml/htdocs/doc/en/articles/l-redesign-4.xml |
| 465 |
|
| 466 |
file : http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-4.xml?rev=1.1&content-type=text/x-cvsweb-markup&cvsroot=gentoo |
| 467 |
plain: http://www.gentoo.org/cgi-bin/viewcvs.cgi/xml/htdocs/doc/en/articles/l-redesign-4.xml?rev=1.1&content-type=text/plain&cvsroot=gentoo |
| 468 |
|
| 469 |
Index: l-redesign-4.xml |
| 470 |
=================================================================== |
| 471 |
<?xml version='1.0' encoding="UTF-8"?> |
| 472 |
<!DOCTYPE guide SYSTEM "/dtd/guide.dtd"> |
| 473 |
<!-- $Header: /var/cvsroot/gentoo/xml/htdocs/doc/en/articles/l-redesign-4.xml,v 1.1 2005/10/10 19:11:26 rane Exp $ --> |
| 474 |
|
| 475 |
<guide link="/doc/en/articles/l-redesign-4.xml" disclaimer="articles"> |
| 476 |
<title>The gentoo.org redesign, Part 2: A site reborn</title> |
| 477 |
|
| 478 |
<author title="Author"> |
| 479 |
<mail link="drobbins@g.o">Daniel Robbins</mail> |
| 480 |
</author> |
| 481 |
|
| 482 |
<abstract> |
| 483 |
Have you ever woken up one morning and suddenly realized that your cute little |
| 484 |
personal development Web site isn't really that great? If so, you're in good |
| 485 |
company. In this series, Daniel Robbins shares his experiences as he redesigns |
| 486 |
the Gentoo Linux Web site using technologies like XML, XSLT, and Python. This |
| 487 |
article: Daniel completes the conversion to XML/XSLT, fixes a host of Netscape |
| 488 |
4.x browser compatibility bugs, and adds an auto-generated XML Changelog to the |
| 489 |
site. |
| 490 |
</abstract> |
| 491 |
|
| 492 |
<!-- The original version of this article was first published on IBM |
| 493 |
developerWorks, and is property of Westtech Information Services. This |
| 494 |
document is an updated version of the original article, and contains |
| 495 |
various improvements made by the Gentoo Linux Documentation team --> |
| 496 |
|
| 497 |
<version>1.0</version> |
| 498 |
<date>2005-10-10</date> |
| 499 |
|
| 500 |
<chapter> |
| 501 |
<title>The final touch</title> |
| 502 |
<section> |
| 503 |
<title>A new look, but...</title> |
| 504 |
<body> |
| 505 |
|
| 506 |
<p> |
| 507 |
At the end of the previous article, the Gentoo Linux Web site had a completely |
| 508 |
new look, but there are still some things that aren't quite complete. In this |
| 509 |
article, the final installment in this series, I finally put those finishing |
| 510 |
touches on the site, resulting in a fully-functional, refined, and modular |
| 511 |
XML-based site that's ready for the future. Here's what was missing from the |
| 512 |
site since the last article: |
| 513 |
</p> |
| 514 |
|
| 515 |
</body> |
| 516 |
</section> |
| 517 |
<section> |
| 518 |
<title>Loose ends</title> |
| 519 |
<body> |
| 520 |
|
| 521 |
<p> |
| 522 |
First, while the site has a completely new look, only the documentation portion |
| 523 |
of the site is XML-based. The main "category" pages are still in raw HTML and |
| 524 |
need to be converted to an XML/XSLT solution to make things more maintainable |
| 525 |
and expandable. |
| 526 |
</p> |
| 527 |
|
| 528 |
<p> |
| 529 |
Also, my developers have found several problems with the raw HTML itself. The |
| 530 |
site looks particularly bad when viewed under Netscape 4.77 -- obviously, this |
| 531 |
is a problem. Also, there are a number of other minor rendering problems that |
| 532 |
appear in more modern browsers, the most annoying of which is a thin vertical |
| 533 |
black line that does not extend completely down the entire page, ruining the |
| 534 |
illusion that the main content area is being spoken by our flying-saucer guy. |
| 535 |
Also, our documentation pages don't completely match the more refined look of |
| 536 |
our new main category pages -- clearly something worth updating. |
| 537 |
</p> |
| 538 |
|
| 539 |
</body> |
| 540 |
</section> |
| 541 |
<section> |
| 542 |
<title>The goal</title> |
| 543 |
<body> |
| 544 |
|
| 545 |
<p> |
| 546 |
Here's the plan for the final rework of the Gentoo Linux site. First, we'll |
| 547 |
totally rework the main page HTML, keeping the same overall look, but making |
| 548 |
the page more browser-compatible. At the same time, we'll add a few |
| 549 |
presentation-related refinements suggested by our visitors, and also fix |
| 550 |
browser compatibility problems with our existing "guide" documentation system. |
| 551 |
</p> |
| 552 |
|
| 553 |
<p> |
| 554 |
Next, we'll completely move the site over to XML and XSLT. By the end of this |
| 555 |
article, any change made to the site will be made by modifying XML or XSLT |
| 556 |
rather than directly editing HTML, which will now be generated automatically |
| 557 |
with the help of xsltproc. This will make the site a whole lot easier to |
| 558 |
maintain. Because Gentoo Linux is a community-developed project, this will, in |
| 559 |
turn, allow our developers (and me) to maintain and improve the site as needed. |
| 560 |
I'm really excited about this since it will save us a bunch of time and ensure |
| 561 |
that our visitors are greeted with up-to-date content. |
| 562 |
</p> |
| 563 |
|
| 564 |
</body> |
| 565 |
</section> |
| 566 |
<section> |
| 567 |
<title>Compatibility issues</title> |
| 568 |
<body> |
| 569 |
|
| 570 |
<p> |
| 571 |
While Netscape 4.x is still a very widely used browser, it is difficult for me |
| 572 |
to decide exactly how many hoops to jump through in order to make the site look |
| 573 |
better when viewed through this browser. Should I merely ensure that the site |
| 574 |
is readable (without any major glitches) or should I do everything I can to |
| 575 |
make sure the site looks absolutely perfect under Netscape 4.x, even if that |
| 576 |
means using less or no CSS and adding strange compatibility hacks to the |
| 577 |
existing HTML? |
| 578 |
</p> |
| 579 |
|
| 580 |
<p> |
| 581 |
In the end, I decide to make several major changes to the HTML so that the site |
| 582 |
will still look quite good under Netscape 4.x without focusing too much on |
| 583 |
minor bug-related table spacing and font-rendering issues. Here are some of the |
| 584 |
changes made to the site's HTML to get everything 4.x compatible. (The Gentoo |
| 585 |
Linux development team has submitted several of these fixes.) |
| 586 |
</p> |
| 587 |
|
| 588 |
<p> |
| 589 |
First, Netscape 4.x has a bug that causes CSS background colors of block |
| 590 |
elements to be displayed incorrectly. For example, here's how a particular |
| 591 |
portion of a guide document is supposed to be rendered: |
| 592 |
</p> |
| 593 |
|
| 594 |
<figure link="/images/docs/l-redesign-07.gif" caption="A sample guide document |
| 595 |
in IE5"/> |
| 596 |
|
| 597 |
<p> |
| 598 |
And, here is how Netscape 4.x renders this same portion when background colors |
| 599 |
are specified using CSS: |
| 600 |
</p> |
| 601 |
|
| 602 |
<figure link="/images/docs/l-redesign-08.gif" caption="A sample guide document |
| 603 |
in Netscape 4.7; some fixes are needed"/> |
| 604 |
|
| 605 |
<p> |
| 606 |
This is ugly. To fix it, existing block-level elements, such as this one... |
| 607 |
</p> |
| 608 |
|
| 609 |
<pre caption="Sample paragraph"> |
| 610 |
<p class="note">This paragraph doesn't look so good in 4.x</p> |
| 611 |
</pre> |
| 612 |
|
| 613 |
<p> |
| 614 |
...were replaced with tables, as follows: |
| 615 |
</p> |
| 616 |
|
| 617 |
<pre caption="Sample table"> |
| 618 |
<table width="100%" border="0" cellpadding="0" cellspacing="0"> |
| 619 |
<tr> |
| 620 |
<td bgcolor="#ddffff"><p class="note"> |
| 621 |
This looks a whole lot better in 4.x</p></td> |
| 622 |
</tr> |
| 623 |
</table> |
| 624 |
</pre> |
| 625 |
|
| 626 |
<p> |
| 627 |
This hack fixes the background-rendering problem. However, this "fix" also |
| 628 |
requires color information to be included in the HTML, which undermines the |
| 629 |
benefits of using CSS in the first place. This is an unfortunate situation, |
| 630 |
especially for fans of CSS like myself, but is required for Netscape 4.x |
| 631 |
compatibility. |
| 632 |
</p> |
| 633 |
|
| 634 |
</body> |
| 635 |
</section> |
| 636 |
<section> |
| 637 |
<title>Rebuilding the HTML</title> |
| 638 |
<body> |
| 639 |
|
| 640 |
<p> |
| 641 |
Now it's time to deal with the black vertical line that doesn't always extend |
| 642 |
all the way to the bottom of the screen. I have been unable to find a solution |
| 643 |
to this problem that works in both a 4.x and 5.x browser; every 5.x version has |
| 644 |
triggered bugs in Netscape 4.x, and every 4.x-compatible version looks horrible |
| 645 |
in a 5.x browser. So, I decide to simply remove the black line entirely: |
| 646 |
Finally, the site works in all popular browsers. Next, I will to create a |
| 647 |
guide-like syntax for creating the main pages. |
| 648 |
</p> |
| 649 |
|
| 650 |
</body> |
| 651 |
</section> |
| 652 |
<section> |
| 653 |
<title>Approaching the XML</title> |
| 654 |
<body> |
| 655 |
|
| 656 |
<p> |
| 657 |
Instead of implementing a completely new tagset for the main page, I think it |
| 658 |
would be a good idea to try to use as many of the "guide" XML documentation |
| 659 |
tags as possible (see part 2 of this series for more information on the guide |
| 660 |
XML format). So, I hack away at some new XSL, using my guide XSL as a template |
| 661 |
for my work. After an hour or two, I have a fully-functional set of XSL |
| 662 |
transformations for turning a guide-like syntax into an HTML main page. |
| 663 |
Revision 2 of the new main page looks like this: |
| 664 |
</p> |
| 665 |
|
| 666 |
<figure link="/images/docs/l-redesign-09.gif" caption="The new main page |
| 667 |
revision"/> |
| 668 |
|
| 669 |
<p> |
| 670 |
|
| 671 |
|
| 672 |
|
| 673 |
-- |
| 674 |
gentoo-doc-cvs@g.o mailing list |
Archives