Web Grundlagen

WWD
Inhalt
Web Grundlagen .................................................................................................................................................................................................................................. 1
DTD (HTML)...................................................................................................................................................................................................................................... 2
Attribute....................................................................................................................................................................................................................................... 2
HTML.................................................................................................................................................................................................................................................... 2
Doctype: ........................................................................................................................................................................................................................................... 2
HTML vs XHTML ............................................................................................................................................................................................................................... 2
HTML5.............................................................................................................................................................................................................................................. 3
CSS ....................................................................................................................................................................................................................................................... 3
JavaScript ............................................................................................................................................................................................................................................. 4
Ajax ...................................................................................................................................................................................................................................................... 6
jQuery .................................................................................................................................................................................................................................................. 6
Serverseitiges ....................................................................................................................................................................................................................................... 7
PHP .................................................................................................................................................................................................................................................. 7
PEAR (PHP Extension and Application Repository) und PECL (PHP Modulsammlung) ..................................................................................................................... 7
PHP und Datenbanken ..................................................................................................................................................................................................................... 8
Template Systeme ........................................................................................................................................................................................................................... 8
Web-Frameworks............................................................................................................................................................................................................................. 9
CodeIgniter .................................................................................................................................................................................................................................... 10
Semantic Web .................................................................................................................................................................................................................................... 10
RDF................................................................................................................................................................................................................................................. 11
Microformats ................................................................................................................................................................................................................................. 11
CMS (WCMS Web Content Management Systems) ........................................................................................................................................................................... 11
Mambo .......................................................................................................................................................................................................................................... 13
Plone .............................................................................................................................................................................................................................................. 13
Wiki (schnell).................................................................................................................................................................................................................................. 13
Blogs (Weblogs) ............................................................................................................................................................................................................................. 14
Glossar ........................................................................................................................................................................................................................................... 14
Web Grundlagen
-
Geschichte: Tim Berners-Lee CERN, SGML angelehnt
Varianten: strict, transitional, frameset
Metasprachen: SGML Standard Generalized Markup Langugae, XML, Konkrete Sprachen: HTML, XHTML
HTML Element
a
img
<a href="http://www.zhwin.ch">Startseite</a>
<img src="images/logo.jpg" width="48" height="298" alt="ZHW Logo" />
Src und alt benötigt
Div, Span
-
Verwendung moistens mit id und class
Block-Elemente: h1, p, ol, li, div
neue Zeile, Grösse anpassbar, Breite 100%
-
Inline-Elemente: a, img
gleiche Zeile, Breite abhängig content
SGML (Standard Generalized Markup Langugae)
-
Kann auch andere Tag Zeichen benutzen
Namenseinschränkungen
Features: OMITAG: kann man Tag weglassen SHORTTAG: sind Abkürzungen zulässig  checked oder id=zwei(ohne anführungszeichen)
DTD (HTML)
<!ELEMENT elementname reqstart reqend content-model >
O Optional, - Required
<!ELEMENT OL - - (LI)+
Connectors:
Zeichen
,
&
|
Bezeichnung
SEQ
AND
OR
Bezeichnung
alle in dieser Reihenfolge
alle, in beliebiger Reihenfolge
genau eines der Teile
Bezeichnung
PLUS
REP
OPT
Bezeichnung
Mindestens einmal
Mehrmals optional
Höchstens einmal
<!ELEMENT FIELDSET - - (#PCDATA,LEGEND,(%flow;)*) >
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) >
<!ENTITY % head.content "TITLE & BASE?" >
Occurence
Zeichen
+
*
?
-
<!ELEMENT OL - - (LI)+ -- ordered list -->
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?,
TBODY+)>
#PCDATA
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- Text -->
EMPTY
<!ELEMENT META - O EMPTY –- leeres Element -->
+(..)
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) >
Inclusion irgendwo innerhalb
-(..)
<!ELEMENT A - - (%inline;)* -(A) >
Exclusion  Inhalt darf nichtvorkommen
Attribute
<!ATTLIST elementname attributname type required-or-default ... >
<!ATTLIST FORM
method (GET|POST)
name
CDATA
GET
-- HTTP method ... -#IMPLIED oder #REQUIRED
-- name of form ... --
HTML
-
Notwendig: Titel aber kein Head
Body optional
Doctype:
-
HTML 4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5: <!DOCTYPE html> bei XHTML5 keiner nötig
HTML vs XHTML
-
Keine Abkürzungen: Attributwerte ohne Anführunszeichen, checked
Keine Tags weglassen, leere Element emit />
Kleinschreibung
Verweise von Ankern über id nicht mehr name
Scripts extern oder in CDATA bereichen anstelle von Kommentar
XHTML eigentlich im Mime-Type text/xml aber aus kompatibilität text/html und keine xml deklaration
Vorteile XHTML
-
Kompatibilität andere XML Sprachen
Mischen von XML Sprachen
Einheitlicher Zugriff: DOM
XSL verwendung
XHTML 1.1 : in Module aufgeteilt, nur noch strict: alte Elemente nicht mehr vorhanden
HTML5
-
ursprünglicher Name : Web Applications 1.0
Zusammenarbeit WHATWG, W3C
Neue Spezielle Elemente für Seitenstruktur: article, section, nav, aside, header
Überschriften h1 bedeutung aus Position h2-h6 geht aber noch)
Video und Audio
Canvas: Bitmapgrafiken
Syntax: HTML oder XHTML
Rendering Engines:
-
Gecko: Firefox
Trident: IE
Tasman: IE5 und Macintosh versionen
Webkit: Safari, Chrome
KHTML: Conqueror
Presto: Opera
Validatoren:
-
http://validator.w3.org/
http://validator.de.selfhtml.org/
HTML Tidy: korrigiert Fehler
CSS
Einbinden
-
Externes Stylesheet: <link href="css/screen.css" rel="stylesheet" media="screen" type="text/css" />
Intern: <style> oder style=””
Per JavaScript
Quirksmode/Standards Mode
-
Gleicht alte Browser aus  IE Box Model Bug
Modus abhängig von DOCTYPE  strict meistens Standards
Frameworks
-
Blueprint
YAML: Yet Another Multicolumn Layout
Graceful Degradation: oft neue Features verwenden  sollte aber aufpaasen das auch ohne ansehbar ist.
Gliederung Aufbau der Datei:
-
Nach Position im Dokument
Nach Art: Typograhpie, Farben, Layout
Formatierung , Einzeilig mehrzeilig etc.
CSS 3.0
-
Implementierte Features mit prefix: -moz-, -webkitNeue Selektoren ^=, $=, *=,
CSS-Fonts: Problem IE Embedded Open Type .eot andere OpenType.otf
CSS 3.0 Befehle:
Runde Ecken
Rahmen Bild
Schatten auf Text
Text Wörter umbrechen
Spalten Bilden
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-border-image: url(border.png) 27 27 27 27
round round;
text-shadow: 2px 2px 2px #ddccb5;
word-wrap: break-word;
.columns {
-moz-column-width: 20em;
-moz-column-gap: 3em;
-moz-column-rule: medium solid;
-webkit-column-width: 20em;
-webkit-column-gap: 3em;
-webkit-column-rule: medium solid;
}
XML mit CSS bearbeiten: display: block etc.. weil kein Default
Einheiten: em,ex,px, in, cm, mm, pt, pc, %
JavaScript
Wozu:
-
Uhrsprünglich LiveScript dann JavaScript aus Popularitätsgründen
Implementierung de ECMAScript Standards
Ähnlichkeiten: Syntax ähnlich wie Java, Vererbung Dynamik wie SELF, Lambda Dynamische Typen wie Lisp/Scheme
Rhino: JavaScript in Java schreiben
Case-Sensitive
Sicherheit
Wird in Sandbox ausgeführt
Kein Zugriff auf lokalsystem
Trotzdem gelegentlich Sicherheitsprobleme
Validierung
Animation und Effekte
Asynchrone Zugriffe  Ajax
GUIs wie Desktopanwendung
MultimediaInhalte steuern
JavaScript Einbinden
Im HTML
<script type="text/javascript">
<!-alert("Hello World");
-->
</script>
Referenziert (typ required, inhalt ignoriert)
<script type="text/javascript"
src="scripts.js"></script>
Kommentar
// oder /* */ zweites schlechter weil auch in Regex vorkommen kann
Gleichheit
== !=
Vergleich mit Typunwandlung
=== !== Vergleicht auch Typ
Logische Operatoren: && || !
False = false, 0, „“, NaN, Null, undifeined
Objekte ( Key-Value-Paare)
Erzeugen
var obj = new Object();
var obj = {};
var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}
Zugreifen
obj.name = "Simon";
obj["name"] = "Simon";
Funktionen
Inhalt in Seite einfügen
Nicht schön
document.write("Hello World");
Besser
function init() {
var add = document.createTextNode("Hello");
document.getElementById("out").appendChild(add);
}
window.onload=init;
Zahlen
Nur Gleitpunktzahl 64bit double
Rechnen mit Math.
Parsen mit parseInt(zahl, system), parseFloat
NaN  not a number
isNaN() zum prüfen
Zahlen ausserhalb bereich  infinity
Kontrollstrukturen
If .. else oder bedingung ? true-ausdruck : false-ausdruck
For, while, do..while Schleifen
Switch
Arrays
var a = new Array();
var a = ["dog", "cat", "hen"];
a[0] = "dog";
a[100] = "cow";
a.length; // 101
a.push('cow')
a.pop();
a.sort();
// mit Punkt
// Indexer
Vordefinierte Objekte
-
Keine Typangaben Parameter/Rückgabetyp
Direkt aufrufbar mit (paremeter)
Variablen mit var  nur lokal sichtbar
Keinen Blockscope
Ohne return  undefined
Name optional
Math
Konstanten
E Eulersche Konstante
LN2 natürlicher Logarithmus von 2
LN10 natürlicher Logarithmus von 10
LOG2E konstanter Logarithmus von 2
LOG10E konstanter Logarithmus von 10
PI Konstante PI
SQRT1_2 Konstante für Quadratwurzel aus 0,5
SQRT2 Konstante für Quadratwurzel aus 2
Methoden
abs() , ceil(), floor(),log(),max(),min(),pow(),random(),round(),sin(),sqrt()
Datum - Date
var now = new Date();
Achtung: Monaten -> Januar = 0 Dez = 11
Window, document, event, history, location, navigator, Array, Date, Function,
Math, RegExp, String
Document
Document.cookie, document.lastModified, forms,images,
links
document.forms[0].elements[0].value
document.meinformular.eingabe.value
document.forms["meinformular"].elements["eingabe"].value
navigator
-
appName offizieller Name des Browsers
appVersion Browser-Version
language Browser-Sprache
appCodeName Spitzname des Browsers
platform Plattform, auf der der Browser läuft
userAgent HTTP-Identifikation des Browsers
window (Browserfenster)
standard  kann weggelassen werden
function neuesFenster() {
window.open("http://www.zhaw.ch","zhawwindow",
"menubar=1,width=200,height=300,scrollbar=1" );
}
Event Handling
function initEvents() {
document.getElementById("btn").onclick = alert('.');
}
window.onload = initEvents;
getTime()  Anzahl millisekunden seit 1.1.1970
Funktionen Erweiterung
Variablen im Funktionskontext:
this
arguments
Mehrere Funktionen in Array abgelegt
var a = [ function(n){return n;}, function(n){return
n*n;} ];
var b = a[1](5);
Innere Funktionen
Innere Funktion zugriff auf äussere Variable
function init() {
var name = "Mozilla";
function displayName() {
alert(name);
}
displayName();
}
Objektmodell
Bei normalen Konstruktor mit Funktion, wird für jedes Objekt
neue Funktion angelegt
// Funktionen über Prototyp anhängen
function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
var s = new Person("Hans", "Muster");
Methode (this ist Objekt)
var myObj = {
value: 0,
increment: function(inc) {
this.value += (typeof inc === 'number') ? inc :
1;
}
}
Funktion (this ist window)
obj.square = function () {
var that = this;
var myfunc = function() {
that.value = that.value * that.value;
};
myfunc();
};
Konstruktor (this ist neues Objekt) Grossbuchstaben
function Shape (centerX, centerY, color) {
this.centerX = centerX; // Eigenschaften
this.centerY = centerY;
this.color= color;
this.move = moveShape; // Methode (Funktion muss
// bereits existieren)
}
var myShape = new Shape(15, 25, "#ff3300");
Erweitern
function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
function User(first, last, uid) {
this.base = Person;
this.base(first, last);
this.uid = uid;
}
User.prototype = new Person;
Anpassen bestehender Typen
Number.prototype.integer = function() {
return Math[this < 0 ? 'ceil' : 'floor'](this);
}

3.75.integer() //3
Ajax
Bei Interaktion wird Seite immer neu geladen! Schlecht und langsam.
-
Java-Applet: Programmcode wird von Server geladen und auf Client ausgeführt
Flash: Propritär, Plugin (weit verbreitet)
Idee: Remote Scripting  Datenaustausch ohne neues Laden
-
Applet, Active-X, Flash, XML-RPC, http mit unsichtbarem IFrame (Neativ: Seite in History vermerkt)
Ajax: Asynchronous JavaScript + XML
Konkretes siehe Folien!
jQuery
Allgemein
Über jQuery oder $
Auswahl über CSS-Selektoren
Mehrere Aktionen nacheinander mit . getrennt  ausführung in
dieser Reihenfolge
Hänge einen Button in DOM mit Funktionalität / Progressiv Enhancment
$('<input type="button" value="un/sichtbar"
id="toggleText">')
.insertAfter('#temptext');
$('#toggleText').click(function() {
$('#temptext').toggle();
});
HTML und Text ändern
$('p').html(Gleicher Text in <em>allen</em> Abs');
$('h2').text('Ich bin eine Überschrift 2');
Laden wenn DOM fertig geladen
$(document).ready(function() {
}
CSS-Eigenschaft lesen
$('#mainnav li').css('font-size')
CSS-Eigenschaft setzen
$('#mainnav li').css('font-size','12')
$('#mainnav li').css( {'font-size': '12', 'color':
'#336' } )
CSS-Klasse hinzufügen
$('table.data tr:even').addClass('tablerow2');
Event hinzufügen
$('#hideText').click(function() {
$(this).hide();
});
Serverseitiges
PHP
Formulardaten
<?php
if (isset($_POST['beliebigername'])) {
$feldinhalt = $_POST['beliebigername'];
echo "Sie haben $feldinhalt eingegeben\n";
}
?>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method=POST>
<input name="beliebigername">
<input type="submit">
</form>
Dateien Zugreifen
$datei = fopen("readme.txt","r");
$inhalt = "";
while (!feof($datei)) {
$inhalt .= fgets($datei,1000);
}
fclose($datei);
$datei = fopen("writeme.txt","w");
fwrite($datei, $inhalt)
fclose($datei);
Kopieren von Objekten PHP 5
class MyClass {
function __clone() {
print "Object is being cloned";
}
}
$obj = new MyClass();
$clonedobj = clone $obj
Konstruktoren
Alt: Konstruktor Namen von Klasse
Konstrukter der übergeordneten Klasse:
parent::__construct()
Ohne Konstruktor wird die von oben aufgerufen
Interface implements extends
interface Throwable {
public function getMessage();
}
class MyException implements Throwable {
public function getMessage() {
// ...
}
}
class MyClass {
function
print
}
function
print
}
}
__construct() {
"Inside constructor";
__destruct() {
"Destroying object";
Final und const
Final: nicht mehr weitervererbt werden
Man kann auf konstanten einer Klasse zugreifen:
class MyClass {
const SUCCESS = "Success";
const FAILURE = "Failure";
}
print MyClass::SUCCESS;
Abstrakte Klassen
abstract class MyBaseClass {
abstract function display();
}
// is_a veraltet
if ($WF instanceof WidgetFactory) {
echo 'Yes, $WF is a WidgetFactory';
}
Static Singleton
class Singleton {
static private $instance = NULL;
private function __construct() {
}
static public function getInstance() {
if (self::$instance == NULL) {
self::$instance = new Singleton();
}
return self::$instance;
}
}
$obj = Singleton::getInstance();
Weiteres
Kein Überladen von Methoden
Iterator Interface  ermöglicht foreach
Einfaches XML über simplexml
__autoload kann Code nachladen
function __autoload($class_name) {
include_once($class_name . "php");
}
PEAR (PHP Extension and Application Repository) und PECL (PHP Modulsammlung)
-
Opensource
Komplett Objektorientiert
470 Pakete
Andere Bibliotheken: SPL, eZ Components, Zend Framework
-
Wiederverwendbarkeit
Qualität
Packen und ausliefern von PHP Code
Standard
Plattformunabhängigkeit
Ziele:
-
Installation ähnlich wie Debian Linux (Abhängigkeiten erkennen, auto Update)
PHP und Datenbanken
-
Früher sehr DB spezifisch
PHP5 SQLite unterstützung seit 5.1 PDO PHP Data Objects vorher über PECL
SQLite
-
DB besteht aus einem File
Sehr schnell
Bis 2TB grösse
Kein eigener Prozess
SQLite Beispiel
<?php
// Open database (create if not exists)
$db = sqlite_open("foo.db");
$result = sqlite_query($db, "SELECT * from
foo");
while ($row = sqlite_fetch_array($result)){
print_r($row);
}
sqlite_close($db);
?>
PDO
try {
$dbh = new PDO($dsn, $user, $password,
$options);
// use the database here
// ...
// done; release the connection
$dbh = null;
} catch (PDOException $e) {
echo "Failed to connect:" . $e->getMessage();
}
Daten ändern
$del = $dbh->exec("DELETE FROM FOO WHERE 1");
$change = $dbh->exec("UPDATE FOO SET active=1
WHERE " . "NAME LIKE '%joe%'");
Transaktionen
$dbh->beginTransaction();
$dbh->commit();
$dbh->rollBack();
Prepared Statements
$stmt = $dbh->prepare("INSERT INTO REGISTRY
(name, value) VALUES
(:name, :value)");
$stmt->bindParam(':name', $name);
$stmt->bindParam(':value', $value);
PDO PHP Data Objects
Vereinheitlichen Schnittstelle
Kann immernoch spezifische aufrufe machen
DSN
mysql:host=name;dbname=dbname
pgsql:native_pgsql_connection_string
odbc:odbc_dsn
sqlite:/path/to/db/file
sqlite::memory:
sqlite2:/path/to/sqlite2/file
sqlite2::memory:
Daten aus DB holen
// unbuffered
$dbh = new PDO($dsn);
$stmt = $dbh->prepare("SELECT * FROM FOO");
$stmt->execute();
while ($row = $stmt->fetch()) {
print_r($row);
}
$stmt = null;
// buffered
$dbh = new PDO($dsn);
$stmt = $dbh->query("SELECT * FROM FOO");
$rows = $stmt->fetchAll();
$count = count($rows);
foreach ($rows as $row) {
print_r($row);
}
$stmt = null;
// iterator
$dbh = new PDO($dsn);
$stmt = $dbh->query("SELECT name FROM FOO",
PDO::FETCH_COLUMN, 0);
foreach ($stmt as $name) {
echo "Name: $name\n";
}
$stmt = null;
// insert one row
$name = 'one';
$value = 1;
$stmt->execute();
// insert another row with different values
$name = 'two';
$value = 2;
$stmt->execute();
Template Systeme
-
Dateien als Vorlage mit Platzhaltern
Vorteil: Trennung Code Visuelles
Nachteil: Zusatzaufwand, Einarbeitung
Systeme für PHP: Smarty, verschiedene PEAR Pakete, patTemplate
Smarty
-
Nicht vollständig Trennbar
Smarty Beispiel
Template
//index.php
include('Smarty.class.php');
// create object
$smarty = new Smarty;
// assign some content. This would typically
come from DB etc.
$smarty->assign('name', 'george smith');
$smarty->assign('address', '45th & Harris');
// display it
$smarty->display('index.tpl');
//index.tpl
<html>
<head>
<title>User Info</title>
</head>
<body>
<p>User Information:</p>
<p>
Name: {$name} <br>
Address: {$address}
</p>
</body>
</html>
Schleifen wieder im Template
Variablen-Modificatoren
{foreach key=cid item=con from=$kontakte}
<a href="kontact.php?contact_id={$cid}">
{$con.name} - {$con.nick}</a><br />
{/foreach}
Name: {$name|capitalize}<br>
Addr: {$address|escape}<br>
Date: {$smarty.now|date_format:"%d.%m.%Y"}
Includes in Template
Html_options
{include file="header.tpl" title="User Info"}
User Information:<p>
Name: {$name|capitalize}<br>
Address: {$address|escape}<br>
{include file="footer.tpl"}
$smarty->assign('id', array(1,2,3));
$smarty->assign('names',
array('bob','jim','joe'));
<select name=user>
{html_options values=$id output=$names
selected="5"}
</select>
Web-Frameworks
-
Bibliothek: Kontrolle liegt beim eigenen Programm, Bibliothek wird benutzt
Framework: Rahmen, Kontrolle beim Framework, Inversion of Control, Hollywood-Prinzip, Einschränkungen
Model View Controller MVC
-
Architekturmuster das in 3 Einheiten teilt  Bessere Erweiterbarkeit, Einfacher, Wiederverwendbarkeit von Komponenten
o
Datenmodell  Model
o
Präsentation View
o
Programmsteuerung  Controller
Ruby on Rails
Framework Web-Anwendungen mit DB
Ziel: schnelles erstellen
Open source
CodeIgniter Siehe Folien!
Ähnlich CakePHP
Ziele: geringer Einarbeitungsaufwand, Effizienter Code,
übliches Webhosting, Konvention vor Konfiguration
URL-Aufbau
Prinzip: www.your-site.com/class/function/arg
Beispiel: www.your-site.com/index.php/news/article/my_article
Beispiel:
$ cat address.rb
#!/usr/bin/ruby
class Address
def initialize(street)
@street = street
end
# Just return @street
def street
@street
end
end
address = Address.new("23 St George St.")
puts address.street
$ ./address.rb
23 St George St.
CakePHP
Framework PHP 4 oder 5,
Ruby Rails ähnlich
Symfony
PHP5
Robuste Anwendungen in UG Feld
Andere
-
-
MVC
DRY (Don’t repeat yourself)
MVC
Umfangreich
Turbo Gears  Phyton
Django  Python
Struts  Java
Spring  Java
CodeIgniter
Welcome.php
<?php
class Welcome extends Controller {
function Welcome()
{ parent::Controller(); }
function index()
{
$data = array ('username' => '');
$username = $this->input->post("username");
$password = $this->input->post("password");
if($username == "Andy" && $password == "Andy" ) {
$data = array('username' => $username);
$this->load->model("Item");
$data['items'] = $this->Item->getAllItems();
$this->load->view('datasite',$data );
}
else {
$this->load->view('welcome_message', $data);
}
}
}
Views/welcome_message.php
<body>
<h1>Login</h1>
View/datasite.php
<body>
<h1>Ich bin drin</h1>
<p>Bitte einloggen um nirgendwo hinzugelangen!</p>
<p>Du hast dich eingeloggt.</p>
<p>Beispiel des Code Ignitors</p>
<form action="#" method="post">
<input type="text" name="username" value="<?php echo
$username ?>" />
<input type="text" name="password" />
<input type="submit" name="Senden" value="send" />
</form>
<p>Hallo <?php echo $username ?></p>
<p>From Database:</p>
<ul>
<?php foreach($items as $item): ?>
<li><?php echo $item->name; ?></li>
<?php endforeach; ?>
<ul>
</body>
</body>
Semantic Web
-
Collaborative Tagging: Gemeinsames Indexieren
User Generated Content: Kommentarfunktion, Wikis
Crowdsourcing: Auslagern von Arbeit an Freiwillige
Richer User Interfaces: Ajax
Tag CLoud: Wortlisten für suchmaschinen und co
Semantisches Web: Beschreibung des Inhaltes so das auch für Maschine lesbar -> h1, h2 etc erster schritt
Formate
Strukturelle Kategorie: div, span, list
Inhalt: abbr, address, code
Rhetorisch: em, strong
-
Microformats
RDF (Resource Description Framework,)
OWL (Web Ontology Language)
RDF
-
-
Auszeichnungssprache für Metadaten
Tripel Subjekt, Prädikat, Objekt  Statements
o
Resource: Was  URL (Ellipse)
o
Eigenschaft: Bezug zum Objekt/Relation
o
Objekt: Wert des Prädikats Rechteck
XML oder Notation 3 attribute dc:title etc.
Abfragesprachen ähnlich SQL, RDQL  SELECT.. WHERE…AND…USING
DUBLIN CORE: set von Namen
Microformats
-
Verwendet vorhandene Standards
Firefox: Greasemonkey
CMS (WCMS Web Content Management Systems)
Merkmale/Ziele:
–
–
–
–
–
–
Bedienbar ohne Programmierkenntnisse
Bedienbar ohne ohne Kenntnis von HTML bzw. XML
Medienneutrale Datenhaltung
Rechteverwaltung
Workflow / Freigabe von Änderungen
Versionskontrolle
Terminologie
-
Content Management (System)
Enterprise Content Management (System)
Document Management (System)
Web Content Management (System)
CM/CMS
ECM/ECMS
DMS
WCMS
Unternehmenseinsatz
Teil von ECM Dokumente Verwalten
Publiziert Inhalte im Web
Grundfunktionen
-
Vorlagen
Autoren: Bearbeiten und erstellen
Pflege/Inhalts anpassungen über Web-Interface
WCMS übernimmt Menustruktur selbst
Berechtigungssystem
Automatische aufbereitung von Material (Bilder Grafiken etc.)
Suchfunktionen
Workflow Integration
Realisierung
-
Dynamisch oder Erzeugt statische Version  erzeugt immer fertige Struktur und legt diese ab
Clientseitig oder Serverseitig
Beurteilung
-
Funktionsumfang einer Default-Installation: Grundfunktionalität ohne Schnickschnack verfügbar
Verfügbarkeit von Zusatzmodulen: Erweiterbarkeit
Flexibilität über Vorlagen: Darstellung anpassbar
Art der Implementierung : Code anpassbar
CMS finden / Infos zu CMS
-
OpenSource CMS:
OSCOM
CMS Matrix
Namen und Beispiele
-
Livelink: Professionel
http://www.opensourcecms.com
http://www.oscom.org/
http://www.cmsmatrix.org/
-
Mambo / Joomla
Plone: für grosse Seiten
Typo 3: gross und flexibel
Open Engine
http://www.mamboserver.com/
http://plone.org/
http://typo3.com/
http://www.openengine.de
Mambo
Default-Installation
Positiv
Sehr einfache Installation
–
Gut bedienbares User Interface
–
Inhalt optional mit WYSIWYG Editor bearbeitbar
–
Separate Administrationsschnittstelle
–
Einfaches Einfügen von Bildern
–
Bestimmte Anpassungen der Darstellung (z.B. Position
von Elementen) über das Admin-Interface
–
Menüs einfach anzupassen
–
PDF Ausgabe von Seiten standardmässig unterstützt
–
Gutes Hilfe-System
Zusatzmodule
–
Viele Module verfügbar, zum Beispiel
•
File Repository
•
Events Calendar
–
Grosse und aktive Community
Flexibilität Vorlagen
–
Kleinere Anpassungen über das Admin Interface
–
Anpassung über Stylesheets möglich
Negativ
–
–
–
Benutzer, Rollen und Berechtigungen: Nicht sehr fein
spezifizierbar
Keine Versionierung der Änderungen; kein Zurück zur
letzten Version
Administrationsschnittstelle nicht auf Anhieb
verständlich
–
–
Module von ziemlich unterschiedlicher Qualität
Versionsabhängigkeiten (Module, die unter Mambo 4.5
funktionieren und unter 4.5.1 nicht)
–
–
Vorlagen: HTML mit PHP-Code gemischt
Anpassen oder neue Vorlagen erstellen nur mit PHP
Programmierkenntnissen
–
Kein sauberes Design: Mischung von Seitenstruktur und
Programmlogik, kaum funktionale Abstraktion
Kein klar definiertes API, das Module benutzen können
Art Implementierung
–
Plone
Platoform: Zope Server
Default-Installation
Positiv
–
Installationspakete inklusive Zope für verschiedene
Plattformen
–
verfügbar und einfach zu installieren
–
DB und Webserver enthalten
–
Webbasiertes Management Interface
–
WYSIWYG Editor für Inhalte
–
Jeder Benutzer mit eigenem Arbeitsbereich
–
Grundfunktionen: Nachrichten, Ereignisse, Diskussionen
–
Default Vorlagen sind barrierefrei und valides XHTML
–
Anpassbares, flexibles Workflow-System zum
Einreichen, Begutachten, und Freischalten von Inhalten
–
Eigene Inhaltstypen können hinzugefügt werden
Zusatzmodule
–
Viele Module verfügbar, zum Beispiel
–
gleichzeitig auf dem Server
o
Database adapters für MySQL, PostgreSQL,
Firebird, SQL
–
Server, Oracle
–
Module in der Regel stabil und ausgereift
Flexibilität Vorlagen
–
Flexibles Template System ZPT (Zope Page Templates)
–
Erlaubt es, Elemente aus der Objekt-Datenbank in HTML
Seiten einzufügen
–
Anpassung der Darstellung auch über Styles möglich,
sowie über das Hinzufügen oder Entfernen
vordefinierter Seitenelemente über das Management
Interface
Art Implementierung
–
Objektorientierte Design-Prinzipien berücksichtigt
Wiki (schnell)
-
Verlinkte Webseiten
In Browser bearbeitbar
Negativ
–
Umfangreiche Einarbeitung für Anpassungen nötig
–
Trotz dem klaren Design aufgrund hoher Komplexität
nicht auf Anhieb zu verstehen
-
Alle Besucher können bearbeiten
Formatierung mit einfachen Regeln
Zentrale Idee
-
Besucher ändern Seiten
Erleichtertes Verändernd der Seite
Übliche Funktion
-
Versionierung
Letzte Änderungen
Volltextsuche
Engines
-
MediaWiki, TWiki, TikiWiki, PmWiki, MoinMoin, Wakka Wiki, PhpWiki, UseMod
Verwendungsbeispiele:
-
Wissen zusammentragen
Konventionelle Webseite vereinfacht
Projektkommunikation
Anleitungen
Lernplattform
Unterscheidung zu CMS
-
Wiki = Einfachheit
Weniger komplexe Berechtigungsverwaltung
Keien Workflowfunktionalität
Blogs (Weblogs)
-
Periodische Einträge
Themengebiet
Kommentarfunktion
RSS Feed oft
Glossar
SGML
DSSSL
FOP
CSS
Standard Generalized Markup Langugae
Document Style Semantics and Specification Language
Formatting Object Processor
Cascading Stylesheet
jQuery – Text-Anpassbar machen
var url = "http://dublin.zhaw.ch/~regnimar/wwd/P11/";
$(document).ready(function() {
$("p.editable").each(function(index) {
var editable = $(this);
$.ajax({
type: "POST",
url: url + "simpledb/simple_db.php?func=retrieve",
data: "key=text" + index +"&auth=wwdsimple",
success: function(msg){
editable.text(msg);
}
});
});
$("p.editable").click(editableText);
});
function editableText()
{
var saveP = $(this);
var newContentObj = $("<div class='editDiv'><textarea class='editArea'>" + saveP.text() +"</textarea><br /><input
class='cancle' type='button' value='Abbrechen'/> <input class='save' type='button' value='OK'/></div>");
$(this).replaceWith(newContentObj);
newContentObj.children("input.cancle").click(function() {
$(this).parent().replaceWith(saveP);
saveP.click(editableText);
});
newContentObj.children("input.save").click(function() {
var text = $(this).parent().children("textarea").val();
saveP.text(text);
saveP.click(editableText);
$(this).parent().replaceWith(saveP);
$.ajax({
type: "POST",
url: url + "simpledb/simple_db.php?func=insert",
data: "key="+ saveP.attr("id") +"&value=" + text + "&auth=wwdsimple"
});
});
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery</title>
<script src="jquery.js"></script>
<script src="editable.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="ausgabe">
<p class="editable" id="text0">blabla</p>
<p class="editable" id="text1">blabla</p>
</div>
</body>
</html>
CSS 3.0 Fonts einbinden
@font-face {
font-family: “YanoneKaffeesatz”;
src: url(’YanoneKaffeesatz-Regular.otf’ );
font-weight:normal;
}
@font-face {
font-family: “YanoneKaffeesatz”;
src: url(’YanoneKaffeesatz-Bold.otf’ );
font-weight:bold;
}
@font-face {
font-family: “YanoneKaffeesatz”;
src: url(’YanoneKaffeesatz-Light.otf’ );
font-weight:lighter;
}
Verwenden über den font-family Namen.
CSS Sprites
#superlink {
display: inline-block;
width:250px;
height:200px;
overflow: hidden;
position:relative;
}
#spaceship {
position: absolute;
left: -160px;
top: -110px;
}
#spaceship:hover {
position: absolute;
left: -270px;
top: -250px;
}
CSS: Adaptlet
@charset 'utf-8';
@import url(reset.css);
@import url(fancybox.css);
/* ----------------------------------------------------- Comment */
.js div { } /* apply only on JavaScript enabled browsers */
.ie7 div { } /* apply only on Internet Explorer 7 and below */
.ie6 div { } /* apply only on Internet Explorer 6 and below */
body {
margin: 0 auto;
width: 1024px;
font-family: Verdana, Tahoma, Arial;
position: relative;
}
#main {
position: relative;
width:1024px;
}
#nav {
position: relative;
background-image: url("../img/navi.png");
background-position: 0 0;
width: 1024px;
height: 37px;
}
#nav li {
width: 103px;
list-style: none;
}
#nav li a {
position:absolute;
display: block;
width: 103px;
height: 37px;
top: 0;
text-indent: -2000px;
}
#nav li a:hover {
background-image: url("../img/navi.png");
}
#home a {left: 309px;}
#home a:hover {
#home a:active {
background-position: -309px -38px;}
background-position: -309px -76px;}
#home a.active {
background-image: url("../img/navi.png");
background-position: -309px -114px;
}
#slideshow a {
left: 412px;
}
#slideshow a:hover {
background-position: -412px -38px;
}
#slideshow a:active {
background-position: -412px -76px;
}
#slideshow a.active {
background-image: url("../img/navi.png");
background-position: -412px -114px;
}
.section {
margin-top: 30px;
margin-bottom: 15px;
height: 500px;
width: 1019px;
border: 1px solid rgb(200, 200, 200);
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.aside li
{
list-style: url('../img/zahnrad.png');
margin-left:25px;
padding: 4px;
}
.article li
{
list-style: url('../img/zahnrad.png');
margin-left:25px;
padding: 4px;
}
.article a
{
color: rgb(95, 130, 130);
}
.article h3 {
padding-top: 18px;
font-size: 14px;
font-weight: bold;
color: rgb(95, 130, 130);
}
.aside {
float: right;
padding: 20px;
line-height: 16px;
font-size: 14px;
}
#footer {
clear: both;
text-align: center;
font-size: 12px;
color: rgb(150,150,150);
margin-bottom:10px;
}
#back {
position: absolute;
top: 2px;
width: 36px;
height: 23px;
padding:7px;
background-image: url('../img/shortbutton_left.png');
background-position: 0 0;
text-indent: -2000px;
}
#back:hover {
position: absolute;
background-position: 0 -38px;
}
#back:active {
position: absolute;
background-position: 0 -76px;
}
#next {
position: absolute;
top: 2px;
right: 0;
width: 36px;
height: 23px;
padding:7px;
background-image: url('../img/shortbutton_right.png');
background-position: 0 0;
text-indent: -2000px;
}
#next:hover {
position: absolute;
background-position: 0 -38px;
}
#next:active {
position: absolute;
background-position: 0 -76px
}
#zhawmap {
border: solid 2px rgb(150,150,150);
border-radius: 6px;
-moz-border-radius: 6px;
}
/*a[href$=".pdf"] { background: url (../img/pdf.png) no-repeat right top; padding-right: 10px;} */
/*a[href$=".jar"] { background: url (../img/jar.png) no-repeat right top; padding-right: 10px;}*/
a[href$=".pdf"] {
a[href$=".jar"] {
background: url("../img/pdf.png") no-repeat left; padding-left: 18px;}
background: url("../img/jar.png") no-repeat left; padding-left: 18px;}
Adaptlet jQuery
var currentPart = 0;
var maxParts = 0;
$(document).ready(function() {
maxParts = $(".section").length - 1;
if(maxParts != currentPart) slideshow();
if($("#accordion").length ==1)
{
$("#accordion").accordion({ header: "h3" });
}
});
function slideshow()
{
$(".section").each(function(index) {
if(index != currentPart)
{
$(this).hide();
}
else
{
$("#back").remove();
$("#next").remove();
$("#part" + currentPart).fadeIn('slow');
if(currentPart != 0)
{
var backObj = $("<div id='back'>Back</div>");
backObj.click(function() {
$("#part" + currentPart).fadeOut('slow', function() {
currentPart--;
slideshow();
});
});
$(this).before(backObj);
}
$(this).css("width","800px");
$(this).css("position","relative");
$(this).css("left","112px");
$(this).css("right","112px");
var nextObj = $("<div id='next'>Next</div>");
if(maxParts != currentPart)
{
nextObj.click(function() {
$("#part" + currentPart).fadeOut('slow', function() {
currentPart++;
slideshow();
});
});
$(this).after(nextObj);
}
}
});
}
Ajax
Anruf absetzen
var requester = null;
function onchangeReceipt() {
/* Check for running connections */
if (requester != null && requester.readyState != 0 && requester.readyState != 4) {
requester.abort();
}
try {
requester = new XMLHttpRequest();
}
catch (error) {
try {
requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error) {
requester = null;
return false;
}
}
requester.onreadystatechange = onreadystatechangeReceipt;
requester.open("GET", "receipt.php?receipt=" + this.value);
requester.send(null);
return true;
}
Empangen
function onreadystatechangeReceipt() {
if (requester.readyState == 4) { // If the data was retrieved successfully
if (requester.status == 200) {
writeDetails(); // do something with requester.responseText
}
// IE returns a status code of 0 on some occasions, so ignore
// this case
else if (requester.status != 0) {
alert("There was an error while retrieving the URL: “ + requester.statusText);
}
}
return true;
}
Microformats
<div id="hcard-Ewald-Maria-Mund" class="vcard">
<span class="fn n">
<span class="given-name">Ewald</span>
<span class="additional-name">Maria</span>
<span class="family-name">Mund</span>
</span>
<div class="org">InIT</div>
<div class="adr">
<div class="street-address">Technikumstrasse 9</div>
<span class="postal-code">8400</span> <span class="locality">Winterthur</span> <br />
<span class="country-name">Schweiz</span>
</div>
<a class="email" href="mailto:[email protected]">[email protected]</a>
</div>
<div id="hcard-Eduard-P.-Mumprecht" class="vcard">
<span class="fn n">
<span class="given-name">Eduard</span>
<span class="additional-name">P.</span>
<span class="family-name">Mumprecht</span>
</span>
<div class="org">InIT</div>
<div class="adr">
<div class="street-address">Technikumstrasse 9</div>
<span class="postal-code">8400</span> <span class="locality">Winterthur</span> <br />
<span class="country-name">Schweiz</span>
</div>
<a class="email" href="mailto:[email protected]">[email protected]</a>
</div>
Canvas
<!DOCTYPE html>
<html>
<head>
<title>Canvas Beispiel</title>
<script type="text/javascript">
var uhr = {
draw : function (){
var now = new Date();
var canvas = document.getElementById('wwdsample');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Befehle zum Zeichnen..., zum Beispiel
ctx.fillStyle = "rgb(250,250,250)";
ctx.beginPath();
ctx.arc(200, 200, 200, 0, 360, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.fillStyle = "rgb(0,50,0)";
ctx.beginPath();
ctx.arc(200, 200, 10, 0, 360, false);
ctx.fill();
ctx.closePath();
ctx.translate(200, 200);
for (var i = 0; i < 60; i++)
{
ctx.beginPath();
ctx.moveTo(0, -200);
ctx.lineTo(0, -180);
ctx.rotate(6 * Math.PI / 180);
ctx.stroke();
ctx.closePath();
}
ctx.save();
ctx.rotate((6 * now.getSeconds()) * Math.PI / 180);
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 3;
ctx.moveTo(0, -170);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.closePath();
ctx.restore();
…
}
},
setTimer: function(){ window.setInterval("uhr.draw()", 1000); }
}
window.onload = uhr.setTimer;
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="wwdsample" width="400" height="400"></canvas>
</body>
</html>