Ich bin immer mehr in jQuery und so haben eine eingerichtet HTML/Javascript/CSS-Basis-Website die ich für alle meine Tests verwende.
Da diese Tests schließlich zu PHP und ASP.NET MVC Websites möchte ich die Gelegenheit nutzen, um die Grundlagen für moderne Browser und Webstandards zu schaffen, bevor ich die Skriptsprachen darauf aufbaue.
Ich habe mich für die Verwendung entschieden:
- XHTML 1.0 Streng
- UTF-8 Kodierung
- so wenig CSS-Referenzen wie möglich (setzen Sie alles in 1 CSS-Datei für die Ladegeschwindigkeit)
- so wenig Javascript-Referenzen wie möglich ( 1 Javascript-Datei sowie die Jquery-Code-Basis-Referenz - ich nehme an, dass Sie die Google jQuery-Codebasis ist die beste Praxis für Geschwindigkeit)
- Ich überprüfe meinen Code bei der Erstellung mit dem http://validator.w3.org
Gibt es sonst noch etwas, das ich beachten muss?
Hier ist ein Beispiel für eine meiner Test-Websites:
index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Text XHTML Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<h1 class="highlightTitle">Text</h1>
<p class="main">First</p>
<p>Second</p>
<p id="selected" class="regular">Third</p>
<p>Fourth</p>
<form action="">
<div>
<input type="button" value="highlight it" onclick="highlightIt();countThem()" />
<input type="button" value="highlight title" onclick="highlightTitle()" />
<p>here is another paragraph</p>
</div>
</form>
</body>
</html>main.cs:
p.highlighted {
background-color:orange;
}
h1.highlightTitle {
background-color:yellow;
}
h1.deselected {
background-color:#eee;
}
p.regular {
font-weight: bold;
}main.js:
google.load("jquery", "1.3.2");
function highlightIt() {
$('#selected')
.toggleClass('highlighted');
}
function countThem() {
alert("there are " + $("p.main").size() + " paragraphs");
}
function highlightTitle() {
$("h1").toggleClass("deselected");
}
