title Nowe Podejście do Projektowania WWW
Uniwersytet Jagielloński, Instytut Informatyki, 4. czerwiec 2007

Nowe podejście do projektowania WWW

Adam Strzelecki <ono@java.pl>

Uniwersytet Jagielloński, Instytut Informatyki

logo

4. czerwiec 2007

Wstęp

Cel prezentacji

Celem tej prezentacji jest przedstawienie pewnej filozofii i metodologii projektowania stron WWW z wykorzystaniem języków (X)HTML. Oczywiście jest to po części właśnie filozofia, a w tym przypadku zdań (gustów) może być tyle co uczestników dyskusji.

Żeby zrozumieć HTML trzeba poznać jego historię...

Pytanie: Kiedy i gdzie powstał HTML ?

Rys historyczny

Skąd się wziął HTML (Żródło)

HTML został wymyślony w roku 1989 przez Tima Bernersa-Lee pracującego w dziale informatyki CERNu w Genewie.

CERN to, tłumacząc z języka francuskiego, Europejskie Centrum Badań Nuklearnych (nie chodzi tutaj bynajmniej o broń nuklearną).

Rys historyczny, c.d.

HTML staje się standardem

Ewolucja filozofii HTML

1989: HTML jako narzędzie naukowców

1995: Strony HTML nabierają indywidualizmu.

1997: HTML staję się powoli profesjonalną platformą komercyjną.

Ewolucja filozofii HTML, c.d.

1999: HTML staje się nieczytelny

2000: Powrót do źródeł, XHTML

Przykład nieczytelnego kodu

Nieczytelny kod HTML generowany przez pakiet Microsoft Office:

<body lang=EN-US style='tab-interval:.5in'>

<div class=Section1>

<p class=MsoNormal><span class=EmailStyle15><font size=2
color=black
face=Arial><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:
Arial'>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah.<span
style="mso-spacerun: yes">&nbsp; </span>Blah Blah Blah Blah Blah Blah Blah Blah
Blah
Blah?<span style="mso-spacerun: yes">&nbsp; </span>Blah Blah Blah Blah Blah
Blah Blah
Blah Blah Blah Blah Blah Blah Blah
Blah.<o:p></o:p></span></font></span></p>

<p class=MsoNormal><span class=EmailStyle15><font size=2
color=black
face=Arial><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:
Arial'><![if
!supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></span></font></span></p>

<p class=MsoNormal><span class=EmailStyle15><font size=2
color=black
face=Arial><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:
Arial'><![if
!supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></span></font></span></p>

<p class=MsoNormal><span class=EmailStyle15><font size=2
color=black
face=Arial><span
style='font-size:10.0pt;mso-bidi-font-size:12.0pt;font-family:
Arial'>Blah<o:p></o:p></span></font></span></p>

</div>

</body>

Nowa metodologia projektowania stron WWW

Oddzielenie treści od wyglądu

Wraz z wprowadzeniem CSS 2 i XHTML oraz rok wcześniej XMLa zaczął się pewien przełom w projektowaniu stron WWW oraz powolny proces zmieniania mentalności programistów Web.

Najistotniejszą zmianą w podejściu stało się oddzielenie treści projektowanej strony WWW od jej wyglądu. W3C wprowadzając XHTML wykluczył wiele możliwości kontroli wyglądu strony wyłącznie z poziomu kodu HTML, jednocześnie dając w zamian możliwość integracji z innymi standardami bazującymi na XMLu. W ten sposób zostajemy w pewien sposób zmuszeni używając XHTMLa do nowej metodologii.

Starożytność

Średniowiecze

Oświecenie

Układ strony HTML za pomocą tabelek

Wycinek kodu starej strony Digitech International wg metodologii "tabelek" (PHPWCMS):

<table border="0" cellspacing="0" cellpadding="0" width="762" class="all" align="center">
<tr>
<td colspan="2" style="height:90px;"  class="top">&nbsp;</td>
</tr>
<tr>
<td valign="top" class="main"><table width="100%" cellspacing="0" cellpadding="0" border="0">
	<tr>

		<td>Accueil</td>
		<td align="right">2006/12/21</td>
		<td width="25" align="right"><a href="0.106.1.1.1.0.phtml" target="_blank"><img src="/images/print.gif" border="0" alt=""/></a></td>
	</tr>
	<tr><td colspan="3"><img src="leer.gif" width="1" height="6" alt=""/></td></tr>
	<tr><td colspan="2" style="background-image: url('/images/dots.gif');"><img src="leer.gif" width="1" height="1" alt=""/></td></tr>
	<tr><td colspan="3"><img src="leer.gif" width="1" height="6" alt=""/></td></tr>
</table>

<hr/>
<a name="jump106"></a><h2>Bienvenue dans notre espace client</h2><div class="articleSummary"><table width="1%" cellspacing="0" border="0" cellpadding="0" align="left"
style="float:left;margin:2px 5px 3px 0;">
<tr><td class="image_td"><img src="content/images/2588132b94cc838a76738086b3bb921e.jpg" border="0" width="120" height="100" alt="" title="" /></td></tr>
</table><table border="0" align="center">
	<tbody>
		<tr>
			<td>				<strong>Agence Ile de France</strong>:<br />
			&nbsp;&nbsp; 64 rue des Meuniers<br />

			&nbsp;&nbsp; F - 92220 Bagneux<br />
			<strong>Téléphone</strong>: +33 (0)1 45 36 14 50<br />
			<strong>Fax </strong>: +33 (0)1 46 65 09 04<br />
			<strong>VoIP</strong>:<br />

			&nbsp;&nbsp; <a href="sip:p0@sip.digit-int.com">p0@sip.digit-int.com</a>,<br />
			&nbsp;&nbsp; <a href="sip:p1@sip.digit-int.com">p1@sip.digit-int.com</a><br />
			<strong>Web</strong>: <a href="http://www.digit-int.com/">www.digit-int.com</a><br />
			</td>
		</tr>

	</tbody>
</table>
<p align="left">Nous sommes a votre disposition, contactez: </p>
<div align="center"> </div>
<ul>
	<li>
	<div align="center">
	<div align="left">Pour tous renseignements commerciaux :<br />
	</div>

	<div align="left"><strong>Agnes Rat Patron</strong> <br />
	<strong>		</strong></div>
	</div>
	<div align="left"><blockquote>			<strong>Tel</strong>.: +33 1 45 36 14 50<br />
	<strong>		E-mail: <a href="mailto:arp@digit-int.com">arp@digit-int.com</a></strong><br />

	<strong>		</strong></blockquote><strong>	</strong><strong>	 </strong></div>
	</li>
	<li>Pour tous renseignements techniques : <br />
	<strong>		<strong>Rémi Corfini</strong> ou <strong>Serge Dedeystere</strong></strong><strong><br />

	</strong><blockquote><strong> 			Tel.: </strong>+33 1 45 36 14 53<strong><br />
	E-mail: <a href="mailto:erm.support@digit-int.com">erm.support@digit-int.com</a></strong></blockquote></li>
</ul>

Układ strony HTML za pomocą DIVów i CSS 2

Szablon nowej strony Digitech International używający MODx i XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>[(site_name)] | [*pagetitle*]</title>
	<style type="text/css" media="screen">@import "[(base_url)]assets/templates/digitech/style.css";</style>
	<!--[if gte IE 5]>
	<style type="text/css" media="screen">#links li a, #loginfrm, #loginreminder, #search, #login > a { zoom: 1; }</style>
	<![endif]-->
	<link rel="icon" href="[(base_url)]assets/templates/digitech/images/dticon.ico" type="image/ico"/>
	<meta name="description" content="Digitech International"/>
</head>

<body id="site">
	<div id="container">
		<div id="header">
			<div id="header_left">&nbsp;</div>
			<div id="header_right">&nbsp;</div>
		</div>
		<div id="menu">
			<div id="links">
				[[Wayfinder? &startId=`0`&hideSubMenus=`1`&hereClass=``&selfClass=`active`]]
			</div>
			<div id="login">
				[!WebLogin? &tpl=`DigitechWebLogin`&useSSL=`1`!]
			</div>
			<div id="search">
				[!AjaxSearchFR? &ajaxSearch=`0`&AS_landing=`75`&AS_showResults=`0`!]
			</div>
		</div>
		<div id="content">
			[[Breadcrumbs? &homeCrumbTitle=`Accueil`]]
			[+phx:if=`[*longtitle*]`:eq=``:then=``:else=`<h1>[*longtitle*]</h1>`+]
			[*#content*]
		</div>
		<div id="footer">
			© 2004-2007 Digitech International |
				<a href="http://validator.w3.org/check?uri=referer">XHTML</a>
			&
				<a href="http://jigsaw.w3.org/css-validator/check/referer/">CSS2</a>
			Compatible
		</div>
	</div>
</body>
</html>

MODx http://www.modxcms.com/ to nowoczesny CMS bazujący na XHTMLu. MODx zostawia programiście XHTML decyzje o strukturze dokumentu i wyglądzie. Szablon jest definiowany jako poprawny kod XHTML, natomiast sam CMS zamienia specjalne tagi treścią z bazy danych.

HTML vs XHTML+CSS (1)

Porównanie "zmieszanego" HTMLa z czystym XHTMLem i CSS

HTML+TABLE 
<body>
	<table border="0" cellspacing="0"
		cellpadding="0" width="762" class="all" align="center">
		<tr>
			<td colspan="2" style="height:90px;" class="top">
				<!-- Nagłówek -->
			</td>
		</tr>
		<tr>
			<td valign="top" class="main">
				<!-- Treść -->
			</td>
			<td valign="top" width="180" class="right" rowspan="2">
				<!-- Menu -->
			</td>
		</tr>
		<tr>
			<td style="height:15px;" class="bottom">
				<!-- Stopka -->
			</td>
		</tr>
	</table>
</body>

Jak widać ta metodologia narzuca sposób wyświetlania treści w samym kodzie HTML, np. rozmiar elementów, ich układ (pozycja po prawej lub lewej).

 CSS 
table.all {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	border-width: 1px;
	border-style: solid;
	border-color: #5E747F;
	height: 100%;
}

img.spacer {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	margin-bottom: 8px;
}

td.header {
	padding-left: 20px;
	padding-bottom: 12px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 32px;
	color: #ffffff;
}

td.top {
	text-align: bottom;
	background-image: url("/images/headertx.jpg");
}

td.main {
	background-color: #ffffff;
	padding: 20px;
	border-top: 1px solid #5E747F;
}

td.left {
	background-color: #e0e0f0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	border-right: 1px solid #a0a0f0;
}

td.right {
	background-color: #dae0eb;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	border-left: 1px solid #5e747f;
}

td.bottom {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: gray;
	background-color: #ffffff;
	padding: 5px;
}

HTML vs XHTML+CSS (1) c.d.

Porównanie "zmieszanego" HTMLa z czystym XHTMLem i CSS

XHTML+DIV 
<body id="site">
	<div id="container">
		<div id="header">
			<!-- Nagłówek -->
		</div>
		<div id="menu">
			<!-- Menu -->
		</div>
		<div id="content">
			<!-- Treść -->
		</div>
		<div id="footer">
			<!-- Stopka -->
		</div>
	</div>
</body>

Zastosowanie XHTML, DIVów i CSS zachowuje w źródle tylko te informację, które stanowią o logicznej strukturze dokumentu. Natomiast wszystkie informacje dotyczące sposobu wyświetlania ten struktury zostają umieszczone w arkuszu styli CSS.

Dzięki temu dostajemy możliwość kontrolowania sposobu wyświetlania wg medium, np. ekran, drukarka, czy też według preferencji czy gustów użytkowników stosując wiele arkuszy styli CSS dla jednego dokumentu XHTML.

 CSS 
#site {
	margin: 0;
	padding: 0;
	background: #c1d2e2 url(images/background.jpg) repeat-x top;
	color: #000;
	height: 100%;
	text-align: center;
}
#container {
	position: relative;
	width: 790px;
	margin: 0 auto;
	text-align: left;
	background: #fff url(images/tools_back.jpg) repeat-y top right;
	min-height: 100%; /* this is where inheritance stops */
	border-left: 1px solid #99b;
	border-right: 1px solid #99b;
	padding: 0;
}
#header {
	height: 90px;
	width: 100%;
	background: #606993 url(images/logo_back.jpg) repeat-x;
	border-bottom: 1px solid #99b;
}
#footer {
	position: absolute;
	bottom: 0;
	height: 20px;
	width: 570px;
	left: 20px;
	text-align: center;
	font-size: 80%;
	border-top: 1px solid #ddd;
	padding-top: 5px;
	color: #999;
}
#content {
	padding: 20px 20px 30px 20px;
	width: 566px;
}
#menu {
	float: right;
	width: 180px;
}

HTML vs XHTML+CSS (2)

Elementy dekoracyjne strony osadzone w HTMLu

HTML 
<body>
	<table border="0" cellspacing="0" cellpadding="0" width="762" class="all" align="center">
		<tr>
			<td colspan="2" height="90" class="top" background="logo_back.jpg">
				<img src="logo_left.jpg">
				<img src="logo_right.jpg" align="right">
			</td>
		</tr>
		(...)
	</table>
</body>

Elementy dekoracyjne osadzone w kodzie samej strony HTML wymuszają pewien "stały" niezmienny wygląd i niezależny od kontekstu.

Elementy dekoracyjne strony wydzielone z XHTMLa do CSS

XHTML+DIV 
<body id="site">
	<div id="container">
		<div id="header">
			<div id="header_left">&nbsp;</div>
			<div id="header_right">&nbsp;</div>
		</div>
		(...)
	</div>
</body>

Dzięki przeniesieniu definicji implementacji wszelkich elementów dekoracyjnych do CSS jesteśmy w stanie kontrolować ich wyświetlanie w obrębie struktury strony tylko z poziomu arkusza styli.

Możemy selektywnie włączać i wyłączać tudzież zmieniać elementy dekoracyjne w zależności od potrzeb.

 CSS 
#header {
	height: 90px;
	width: 100%;
	background: #606993 url(images/logo_back.jpg) repeat-x;
	border-bottom: 1px solid #99b;
}
#header_left {
	float: left;
	height: 90px;
	width: 596px;
	background: #706993 url(images/logo_left.jpg) no-repeat;
}
#header_right {
	float: right;
	height: 90px;
	width: 177px;
	background: #606993 url(images/logo_right.jpg) no-repeat;
}

Dodatkowe zalety XHTMLa

XHTML bazujący na XMLu pozwala na osadzanie ("mieszanie") innych dokumentów XML

XHTML jest bardziej wymagający ("strict") niż HTML

Dodatkowe zalety XHTMLa, c.d.

XHTML i CSS wraz z XSLem pozwalają na łatwe wyświetlanie innych dokumentów XML.

Dokument XML 
<?xml version="1.0" encoding="utf-8"?>
<book>
	<chapter>
		<title>Wstęp</title>
		<para>W tej książce chciałbym zaprezentować
			wiele zagadnień.</para>
	</chapter>
	<chapter>
		<title>Projektowanie WWW</title>
		<para>Projektowanie stron WWW jest stosunkowo
			nową dziedziną.</para>
	</chapter>
</book>
Arkusz XSL 
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="xml"
		encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
	<xsl:template match="/">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
			<head>
				<link rel="stylesheet" href="book.css" type="text/css"/>
				<title>Book</title>
			</head>
			<body>
				<xsl:apply-templates/>
			</body>
		</html>
	</xsl:template>
	<xsl:template match="*">
		<xsl:element name="div">
			<xsl:attribute name="class">
				<xsl:value-of select="name()"/>
			</xsl:attribute>
			<xsl:apply-templates/>
		</xsl:element>
	</xsl:template>
</xsl:stylesheet>
Kod XHTML dla dokumentu 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="book.css" type="text/css" />
	<title>Book</title>
</head>
<body><div class="book">
	<div class="chapter">
		<div class="title">Wstęp</div>
		<div class="para">W tej książce chciałbym zaprezentować
			wiele zagadnień</div>
	</div>
	<div class="chapter">
		<div class="title">Projektowanie WWW</div>
		<div class="para">Projektowanie stron WWW jest stosunkowo
			nową dziedziną</div>
	</div>
</div></body></html>
Arkusz CSS 
/* CSS dla formatu książki XML */
body {
	font-family: Garamond, Arial, helv, serif;
	font-size: 14pt;
	height: 100%;
	background-color: silver;
}
.book {
	margin: 0 auto;
	width: 600px;
	background-color: white;
	padding: 10px;
	border: 1px solid black;
}
.chapter {
	padding-left: 5px;
	margin-bottom: 5px;
	border-left: 1px solid gray;
}
.title {
	font-size: 200%;
}

Dodatkowe zalety CSSa

Kontekstowość CSS

Dzięki atrybutowi media możemy wybrać styl odpowiedni dla danego urządzenia (medium) z dostępnych: aural, braille, emboss, handheld, print, projection, screen, tty, tv 

<link rel="stylesheet" href="site_common.css" type="text/css" media="screen, projection, print, handheld" />
<link rel="stylesheet" href="site_screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="site_print.css" type="text/css" media="print" />
<link rel="stylesheet" href="site_pda.css" type="text/css" media="handheld" />

Wielorakość CSS

Dzięki atrybutowi title możemy udostępnić alternatywne style dla tej samej strony do wyboru dla użytkownika.

<link rel="stylesheet" href="web_modern.css" type="text/css" title="Modern" />
<link rel="stylesheet" href="web_black.css" type="text/css" title="Black" />
<link rel="stylesheet" href="web_reader.css" type="text/css" title="Reader (clear)" />

Stara filozofia projektowania stron WWW

Technologie

"Słaby" podział ról

Nowa filozofia projektowania stron WWW

Technologie

"Dobry" podział ról (odwrotna kolejność)

Zalety nowego podejścia do projektowania WWW

W ogólnym rozrachunku pozwala zaoszczędzić czas = pieniądz



XML i formaty bazujące na nim takie jak XHTML, SVG, MathML, DocBook to przyszłość publikacji w Internecie !!!

Subiektywne przykłady

Przykładowe strony:

Przykładowe systemy CMS zgodne z XHTML:

Nie wymieniam celowo tutaj takich popularnych systemów jak PHPNuke, PostNuke, Xaraya czy PHPWCMS ponieważ ich czystość i zgodność z XHTMLem pozostawia dużo do życzenia.

W czym powstała ta prezentacja....

W czym powstała ta prezentacja.... Oczywiście w XHTML + Slidy

Ta prezentacja została napisana w XTHMLu i zaprezentowana z pomocą Slidy stworzonego przez jednego z ojców HTMLa Dave'a Raggetta: http://www.w3.org/Talks/Tools/Slidy/ 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<title>Nowe Podejście do Projektowania WWW</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="copyright" content="Copyright © 2007 Adam Strzelecki" />
	<meta name="font-size-adjustment" content="-2" />
	<link rel="stylesheet" href="slides.css" type="text/css" media="screen, projection, print" />
	<script src="../slidy/slidy.js" type="text/javascript"></script>
</head>
<body>
	<!-- this defines the slide background -->
	<div class="background">
		<div class="header">
			<!-- sized and colored via <tt>CSS</tt> -->
		</div>
		<div class="footer">
			<img src="nanoant.gif" align="right" />
			Nowe Podejście do Projektowania WWW<br />
			Uniwersytet Jagielloński, Maj 2007
		</div>
	</div>

	<!-- this defines the title page -->
	<div class="slide cover">
		<div class="header">
			<h1>Nowe Podejście do Projektowania WWW</h1>
			<p><a href="http://www.nanoant.com/">Adam Strzelecki</a>
			&lt;<a href="mailto:ono@java.pl">ono@java.pl</a>&gt;</p>
		</div>
		<h2>Uniwersytet Jagielloński, Maj 2007</h2>
		<img src="images/metaskills.jpg" />
	</div>

	(...)

</body>
</html>

Dziękuję za uwagę

Strona WWW

Prezentacja jest dostępna pod następującym adresem:

http://www.nanoant.com/uj/nowe_podejscie_do_projektowania_www.html

Pytania ?