Die Inhalte meiner ersten "Session" des Praktikums über Frontendentwicklung an der Uni Mainz. Die Stundenten sollten erst einmal in die Grundproblematik eingeführt werden.

1. Praktikum
Webtechnologien
Wintersemester 2010
Jens Grochtdreis und Martin Kliehm

2. Session 1

3. Ebenen einer Webseite
Javascript
CSS
(X)HTML
PHP, Java, Perl usw.
Datenbanken

4. Am Anfang ging alles schnell!

5. ‣ 1995: HTML 2 ‣ 1996: CSS 1
‣ 1997: HTML 3.2 ‣ 1998: CSS 2
‣ 1998: HTML 4
‣ 1999: HTML 4.01
‣ 2001: XHTML 1

6. Die Basis unserer Arbeit ist
mehr als 10 Jahre alt!

7. HTML oder XHTML?

8. Schreibweisen
HTML XHTML
‣ <image> ‣ <image />
‣ <br> ‣ <br />
‣ <meta> ‣ <meta />

9. Der IE kann kein echtes
XHTML (und wird es nie
können).

10. Content-Header
‣ Echtes XHTML benötigt
application/xhtml+xml
im Content-Header.
‣ Möchtegern-XHTML kommt mit
text/html
im Content-Header (Tag-Soup)

11. Kenne Dein (X)HTML!
‣ Wie sehen ungeordnete Listen aus?
‣ Wie sieht eine Überschrift dritten Grades aus?
‣ Wie sieht ein Zitat aus?

12. HTML ohne eigenes CSS

13. HTML ungestylt

14. browser.css
Safari4 (Mac) Firefox 3.5 (Mac)

15. http://www.iecss.com/

16. Simpler Browser-Reset

17. Yahoo-Reset
http://developer.yahoo.com/yui/3/cssreset/

18. Eric Meyers Reset
http://meyerweb.com/eric/tools/css/reset/index.html

19. Diverse Stylesheets
‣ HTML sieht nicht aus, sondern transportiert
Bedeutung und Struktur!
‣ Browser haben eigene Stylesheets
‣ Nutzer können eigene Stylesheets haben

20. Block- und Inlineelemente
‣ 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!

21. Beispiele
‣ 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

22. Besser wär das

23. Gern falsch gemacht
‣ Falsch:
‣ <br><font size="7"><b>Heading Text</b></
font><br>
‣ Richtig:
‣ <h1>Heading Text</h1>

24. Semantik
‣ 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.

25. Semantik
‣ Die Struktur erfassen und aufschreiben
‣ richtig:
<h2>Überschrift</h2>
‣ falsch:
<div class="headline">Überschrift</div>

26. Überschriften
‣ 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;}

27. Ü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]

28. Überschriftenreihenfolge
‣ 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.

29. Überschriftenreihenfolge
h2
h3
h4
h5
h3
h4

30. Ü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;}

31. Kaskade und Spezifität
‣ Grundlage des Überschreibens der
Standardkonfiguration sind Kaskade und
Spezifität.
‣ Kaskade: „wer zuletzt kommt malt zuerst“
‣ Spezifität

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

34. Wichtige Regeln
‣ Vorsicht walten lassen.
‣ Mit allgemeinen Regeln beginnen
‣ Spezifität nur im Notfall erhöhen
‣ Lieber eine neue Klasse als Ausnahme
‣ IDs selten nutzen

37. Wen interessieren Browser?
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

38. Nur Entwickler!

39. Wen interessieren Browser?
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

40. Feindliche Umgebung
http://www.gtalbot.org/BrowserBugsSection/

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

42. Nur wer vergleicht, kann
Unterschiede entdecken

43. http://stuffandnonsense.co.uk/

44. Ein normaler Konsument
vergleicht aber keine
Browserdarstellungen.

45. Müssen Webseiten überall
gleich aussehen?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

46. Und gehst Du zum Browser,
vergiss die Peitsche nicht.
In Anlehnung an F. Nietzsche

47. Die drei Browser-Wars
http://andysworld.org.uk/blog/wp-content/uploads/2010/03/browser-war.jpg

48. 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

49. 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

50. 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

52. Browserkunde (1)‫‏‬
‣ 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!

53. Browserkunde (2)‫‏‬
‣ 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

54. Browserkunde (3)‫‏‬
‣ IE 6
‣ IE 7
‣ IE 8
‣ IE 9
‣ Gecko-Browser (Mozilla und die Abarten
inklusive Firefox)
‣ Opera
‣ Webkit-Browser (Safari + Chrome)

55. Doctypes und Quirks-Modus

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

57. 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 -->

58. Quirks-Modus
‣
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

59. Quirks-Modus bei IE6 und 7
‣ 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

60. Informationen sammeln
http://snurl.com/t58dc

61. http://webkrauts.de

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

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

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

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

66. http://icant.co.uk/

67. http://net.tutsplus.com/

68. http://www.smashingmagazine.com/

69. http://sixrevisions.com/

70. http://developer.mozilla.com/

71. Gute Bücher

74. Jedem Browser das Seine -
Hacks und Filter

75. Browserhacks
‣ 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.

76. 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

77. 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;}

78. Interessante 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 */

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

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

81. Conditional Comments

82. progressive enhancement
graceful degredation

83. IE ≠ modern
http://css3generator.com/

84. wichtige Erkenntnis:
Es kann nicht DIE EINE
Darstellungsform geben!

85. http://shouldwebsiteslookthesameinallbrowsers.com/

86. Der Konsument kann
Informationen aus dem Internet
nutzen, wie er es möchte.

87. Unser Layout ist nur eine
Empfehlung!

88. Wenn einige Browserhersteller der
technischen Entwicklung
hinterherhinken sollte das nicht
unser Problem sein.

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

90. Progressive Enhancement
‣ Fokus ist auf den Content, denn um den geht es
am Ende (fast) immer
http://www.alistapart.com/articles/understandingprogressiveenhancement/

91. Graceful Degredation
‣ Fokus ist auf den modernsten Browsern
‣ ältere Browser bekommen eine abgespeckte
Version