praktikum in frontendentwicklung - session1

Praktikum Webtechnologien

Wintersemester 2010

Jens Grochtdreis und Martin Kliehm

Session 1

Ebenen einer Webseite

Datenbanken

PHP, Java, Perl usw.

(X)HTML

CSS

Javascript

Am Anfang ging alles schnell!

‣ 1995: HTML 2

‣ 1997: HTML 3.2

‣ 1998: HTML 4

‣ 1999: HTML 4.01

‣ 2001: XHTML 1

‣ 1996: CSS 1

‣ 1998: CSS 2

Die Basis unserer Arbeit ist mehr als 10 Jahre alt!

HTML oder XHTML?

Schreibweisen

‣ <image>

‣ <br>

‣ <meta>

‣ <image />

‣ <br />

‣ <meta />

HTML XHTML

Der IE kann kein echtes XHTML (und wird es nie

können).

‣ Echtes XHTML benötigt application/xhtml+xmlim Content-Header.

‣ Möchtegern-XHTML kommt mit text/htmlim Content-Header (Tag-Soup)

Content-Header

Kenne Dein (X)HTML!

‣Wie sehen ungeordnete Listen aus?

‣Wie sieht eine Überschrift dritten Grades aus?

‣Wie sieht ein Zitat aus?

HTML ohne eigenes CSS

HTML ungestylt

browser.css

Safari4 (Mac) Firefox 3.5 (Mac)

http://www.iecss.com/

Simpler Browser-Reset

Yahoo-Reset

http://developer.yahoo.com/yui/3/cssreset/

Eric Meyers Reset

http://meyerweb.com/eric/tools/css/reset/index.html

Diverse Stylesheets

‣ HTML sieht nicht aus, sondern transportiert Bedeutung und Struktur!

‣ Browser haben eigene Stylesheets

‣ Nutzer können eigene Stylesheets haben

‣ Blockelemente erzeugen einen Absatz nach sich.

‣ Nicht alle Elemente können ineinander geschachtelt werden.

‣ Bei Inlineelementen gibt es keine vertikalen Margins.

‣ Niemals Block- in Inlineelemente verschachteln!

Block- und Inlineelemente

‣ Blockelemente:

‣ div | dl | fieldset | form | h1-6 | hr | ol | p | table | ul

‣ Inlinelemente:

‣ a | abbr | acronym | br | del | em | img | ins | input | label | span | strong | sub | sup

Beispiele

Besser wär das

‣ Falsch:

‣ <br><font size="7"><b>Heading Text</b></font><br>

‣ Richtig:

‣ <h1>Heading Text</h1>

Gern falsch gemacht

‣ Mit der Bedeutung der Inhalte beschäftigen

‣ Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.

‣ Erst fragen, WAS es ist, dann fragen, wie es AUSSEHEN soll.

Semantik

‣ Die Struktur erfassen und aufschreiben

‣ richtig: <h2>Überschrift</h2>

‣ falsch: <div class="headline">Überschrift</div>

Semantik

‣ Google ignoriert <h1>, da dort meist ein Logo und der Firmenname drin sind.

‣ Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, kann man trotzdem nicht auf die Überschrift verzichten

‣ Trennung von Sinn und Optik!

‣ h1 { font-size: 12px;}

‣ p { font-size: 12px;}

Überschriften

‣ Überschriften sind eine Navigationsmöglichkeit für Screenreader.

‣ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.

‣ Dafür gibt es auch ein jQuery-Plugin: jqPlanize [http://snipurl.com/2v4wm]

Überschriften

‣ Im Quellcode sollten die Überschriftenhierarchien logisch aufeinander folgen.

‣ Nicht <h4> auf <h2> folgen lassen.

‣ Es gibt keine Meta-Überschriften, wie in den traditionellen Printmedien.

‣ Semantik der Überschriften ist unterentwickelt und sehr strikt.

Überschriftenreihenfolge

h2h3h4h5

h3

h4

Überschriftenreihenfolge

<h2>Gammelkäse ist nur selten ungesund</h2>

<h3>Ernährung</h3>

h2 { position: relative; top: 35px;}h3 { position: relative; top: -35px; color: red;}

Überschriftenreihenfolge

‣ Grundlage des Überschreibens der Standardkonfiguration sind Kaskade und Spezifität.

‣ Kaskade: „wer zuletzt kommt malt zuerst“

‣ Spezifität

Kaskade und Spezifität

http://css-tricks.com/specifics-on-css-specificity/

‣ Vorsicht walten lassen.

‣ Mit allgemeinen Regeln beginnen

‣ Spezifität nur im Notfall erhöhen

‣ Lieber eine neue Klasse als Ausnahme

‣ IDs selten nutzen

Wichtige Regeln

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Nur Entwickler!

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Feindliche Umgebung

http://www.gtalbot.org/BrowserBugsSection/

http://www.findmebyip.com/litmus/#target-selector

Nur wer vergleicht, kann Unterschiede entdecken

http://stuffandnonsense.co.uk/

Ein normaler Konsument vergleicht aber keine

Browserdarstellungen.

Müssen Webseiten überall gleich aussehen?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Und gehst Du zum Browser, vergiss die Peitsche nicht.

In Anlehnung an F. Nietzsche

Die drei Browser-Wars

http://andysworld.org.uk/blog/wp-content/uploads/2010/03/browser-war.jpg

1. Krieg

‣ Microsoft gegen Netscape

‣ Netscape verschwindet

‣ Aus der Asche entsteigt Mozilla

‣ Kampf der proprietären Erweiterungen

‣ Microsoft war der Innovator bis IE6

‣ Sieg hat Microsoft träge gemacht

http://www.open2.net/blogs/media/blogs/netscape_corner.jpg

2. Krieg

‣ Neue Browser gegen Microsoft

‣ Mozilla führt die Attacke an

‣ Microsoft braucht lange, um aus der Erstarrung zu erwachen

‣ Innovation

‣ Ohne Mozilla wär das Web ein öder Ort

http://www.pc1news.com/articles-img/small/browser_war.jpg

3. Krieg

‣ Apple treibt die Konkurrenz in Sachen Innovation vor sich her

‣ Neue Ideen werden erst proprietär für die iGeräte gelöst, dann als Standardisierung vorgeschlagen

‣ Großer Fokus auf mobiles Web

http://publizieren-im-netz.de/browser-schicksal

‣ Aus CSS-Sicht unterscheiden wir grob in zwei Kategorien:

‣ Die IEs für Windows

‣ Der Rest

‣ 100% richtig ist das aber nicht, denn wir haben eine große Vielfalt mit Eigenheiten zu betrachten, und wir haben uns noch nicht Spielkonsolen und Handys zugewandt!

‣ Und: der IE9 wird gut werden!

Browserkunde (1) ‏

‣ Nur-Text-Browser wie Lynx

‣ Browser zur Ausgabe für Sehbehinderte (meist "Browsererweiterungen")

‣ alte Browser, die kein CSS können oder dies nur rudimentär

Browserkunde (2) ‏

‣ IE 6

‣ IE 7

‣ IE 8

‣ IE 9

‣ Gecko-Browser (Mozilla und die Abarten inklusive Firefox)

‣ Opera

‣ Webkit-Browser (Safari + Chrome)

Browserkunde (3) ‏

Doctypes und Quirks-Modus

‣ Doctypes kann man unterschiedlich schreiben.

‣ Zudem kann man die XHTML mit oder ohne XML-Prolog schreiben.

Doctypes

Quirks-Modus

‣ Ein XML-Prolog schickt den IE6 IMMER in den Quirks-Modus.

‣ <?xml version="1.0"?>

‣ Auch ein Kommentar VOR der DTD

‣ <!-- Du depperter IE -->

‣ Es gibt grundsätzlich zwei Modi:

‣ Standard- und Quirks-Modus.

‣ Die größten Unterschiede gibt es beim IE6.

‣ Dieser kennt das korrekte Boxmodell nur im Standardmodus.

‣ Im Quirks-Modus verhält er sich dann wie ein IE 5.

‣ Der IE 6 verfällt zudem beim Vorliegen eines

Quirks-Modus

‣ keine DTD angegeben

‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD

Quirks-Modus bei IE6 und 7

http://snurl.com/t58dc

Informationen sammeln

http://webkrauts.de

http://dev.opera.com/articles/wsc/

http://jendryschik.de/wsdev/einfuehrung/

http://little-boxes.de/little-boxes-teil1-online.html

http://developer.yahoo.com/yui/theater/

http://icant.co.uk/

http://net.tutsplus.com/

http://www.smashingmagazine.com/

http://sixrevisions.com/

http://developer.mozilla.com/

Gute Bücher

Jedem Browser das Seine - Hacks und Filter

‣ Manchmal ist es während der Entwicklung sinnvoll, schnell eine Browser auszuschließen oder anzusprechen.

‣ Oder wir wollen für ganz wenige Extrawürste nicht ein spezielles IE-Stylesheet erstellen.

‣ Dann kann man „Hacks“ nutzen.

‣ Es gibt davon sehr viele, nur wenige sind praktikabel.

Browserhacks

‣ p {-width: 300px;}

‣ versteht nur der IE Windows bis Version 6

‣ * html p {width: 300px;}

‣ versteht nur der IE Windows bis Version 6

‣ * + html p {width: 300px;}

‣ versteht nur der IE 7

Browserhacks

‣ Man muss nicht zwangsweise Hacks nutzen.

‣ Um die alten IE bis Version 6 auszusperren genügen schon intelligentere Selektoren und CSS3

‣ div > p {width: 300px;}

‣ div[id=navigation] { width: 300px;}

Browserhacks

‣ /* Hack gegen IE 5 Mac \*/

‣ body { overflow-y: auto;}

‣ /* Erst hier schließt sich für den IE 5 Mac der Kommentar */

‣ div { color: blue; }

‣ * html div { color: red;} /* nur IE bis inkl. Version 6 */

Interessante Browserhacks

http://github.com/ginader/CSS-Hacks

http://github.com/ginader/CSS-Hacks

Conditional Comments

progressive enhancementgraceful degredation

IE ≠ modern

http://css3generator.com/

wichtige Erkenntnis: Es kann nicht DIE EINE Darstellungsform geben!

http://shouldwebsiteslookthesameinallbrowsers.com/

Der Konsument kann Informationen aus dem Internet

nutzen, wie er es möchte.

Unser Layout ist nur eine Empfehlung!

Wenn einige Browserhersteller der technischen Entwicklung

hinterherhinken sollte das nicht unser Problem sein.

http:/www.ameriser.com/wp-content/uploads/2010/05/IE.jpg

Progressive Enhancement

http://www.alistapart.com/articles/understandingprogressiveenhancement/

‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immer

Graceful Degredation

‣ Fokus ist auf den modernsten Browsern

‣ ältere Browser bekommen eine abgespeckte Version