PraktikumWebtechnologien      Wintersemester 2010Jens Grochtdreis und Martin Kliehm
Session 1
Ebenen einer Webseite          Javascript            CSS         (X)HTML     PHP, Java, Perl usw.       Datenbanken
Am Anfang ging alles schnell!
‣ 1995: HTML 2      ‣ 1996: CSS 1‣ 1997: HTML 3.2    ‣ 1998: CSS 2‣ 1998: HTML 4‣ 1999: HTML 4.01‣ 2001: XHTML 1
Die Basis unserer Arbeit ist   mehr als 10 Jahre alt!
HTML oder XHTML?
Schreibweisen    HTML             XHTML‣   <image>          ‣   <image />‣   <br>             ‣   <br />‣   <meta>        ...
Der IE kann kein echtesXHTML (und wird es nie       können).
Content-Header‣ Echtes XHTML benötigt         application/xhtml+xml im Content-Header.‣ Möchtegern-XHTML kommt mit        ...
Kenne Dein (X)HTML!‣ Wie sehen ungeordnete Listen aus?‣ Wie sieht eine Überschrift dritten Grades aus?‣ Wie sieht ein Zita...
HTML ohne eigenes CSS
HTML ungestylt
browser.cssSafari4 (Mac)         Firefox 3.5 (Mac)
http://www.iecss.com/
Simpler Browser-Reset
Yahoo-Resethttp://developer.yahoo.com/yui/3/cssreset/
Eric Meyers Resethttp://meyerweb.com/eric/tools/css/reset/index.html
Diverse Stylesheets‣ HTML sieht nicht aus, sondern transportiert  Bedeutung und Struktur!‣ Browser haben eigene Stylesheet...
Block- und Inlineelemente‣ Blockelemente erzeugen einen Absatz nach sich.‣ Nicht alle Elemente können ineinander  geschach...
Beispiele‣ Blockelemente: ‣ div | dl | fieldset | form | h1-6 | hr | ol | p | table    | ul‣ Inlinelemente: ‣ a | abbr | ac...
Besser wär das
Gern falsch gemacht‣ Falsch:‣ <br><font size="7"><b>Heading Text</b></  font><br>‣ Richtig:‣ <h1>Heading Text</h1>
Semantik‣ Mit der Bedeutung der Inhalte beschäftigen‣ Eine semantisch ausgezeichnete Seite zeigt, daß  man sich Gedanken ü...
Semantik‣ Die Struktur erfassen und aufschreiben ‣ richtig:   <h2>Überschrift</h2> ‣ falsch:   <div class="headline">Übers...
Überschriften‣ Google ignoriert <h1>, da dort meist ein Logo  und der Firmenname drin sind.‣ Wenn die Überschrift die glei...
Überschriften‣ Überschriften sind eine Navigationsmöglichkeit  für Screenreader.‣ Wikis generieren aus den Textüberschrift...
Überschriftenreihenfolge‣ Im Quellcode sollten die  Überschriftenhierarchien logisch aufeinander  folgen. ‣ Nicht <h4> auf...
Überschriftenreihenfolge              h2              h3              h4              h5              h3              h4
Überschriftenreihenfolge<h2>Gammelkäse ist nur selten ungesund</h2><h3>Ernährung</h3>h2 { position: relative; top: 35px;}h...
Kaskade und Spezifität‣ Grundlage des Überschreibens der  Standardkonfiguration sind Kaskade und  Spezifität.‣ Kaskade: „wer ...
http://css-tricks.com/specifics-on-css-specificity/
Wichtige Regeln‣ Vorsicht walten lassen.‣ Mit allgemeinen Regeln beginnen‣ Spezifität nur im Notfall erhöhen‣ Lieber eine n...
Wen interessieren Browser?http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Nur Entwickler!
Wen interessieren Browser?http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Feindliche Umgebunghttp://www.gtalbot.org/BrowserBugsSection/
http://www.findmebyip.com/litmus/#target-selector
Nur wer vergleicht, kannUnterschiede 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-Warshttp://andysworld.org.uk/blog/wp-content/uploads/2010/03/browser-war.jpg
1. Krieg               ‣ Microsoft gegen Netscape                ‣ Netscape verschwindet                ‣ Aus der Asche en...
2. Krieg               ‣ Neue Browser gegen Microsoft                ‣ Mozilla führt die Attacke an                ‣ Micro...
3. Krieg                ‣ Apple treibt die Konkurrenz in Sachen Innovation                     vor sich her               ...
Browserkunde (1)‫‏‬‣ Aus CSS-Sicht unterscheiden wir grob in zwei  Kategorien: ‣ Die IEs für Windows ‣ Der Rest‣ 100% rich...
Browserkunde (2)‫‏‬‣ Nur-Text-Browser wie Lynx‣ Browser zur Ausgabe für Sehbehinderte (meist  "Browsererweiterungen")‣ alt...
Browserkunde (3)‫‏‬‣ IE 6‣ IE 7‣ IE 8‣ IE 9‣ Gecko-Browser (Mozilla und die Abarten  inklusive Firefox)‣ Opera‣ Webkit-Bro...
Doctypes und Quirks-Modus
Doctypes‣ Doctypes kann man unterschiedlich schreiben.‣ Zudem kann man die XHTML mit oder ohne  XML-Prolog schreiben.
Quirks-Modus‣ Ein XML-Prolog schickt den IE6 IMMER in den  Quirks-Modus. ‣ <?xml version="1.0"?>‣ Auch ein Kommentar VOR d...
Quirks-Modus‣ 	 Es gibt grundsätzlich zwei Modi: ‣ Standard- und Quirks-Modus.‣ Die größten Unterschiede gibt es beim IE6....
Quirks-Modus bei IE6 und 7 ‣ keine DTD angegeben ‣ <!DOCTYPE HTML PUBLIC "-//W3C//DTD  HTML 4.0 Transitional//EN"> ‣ <!DOC...
Informationen sammelnhttp://snurl.com/t58dc
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
Browserhacks‣ Manchmal ist es während der Entwicklung  sinnvoll, schnell eine Browser auszuschließen  oder anzusprechen.‣ ...
Browserhacks‣    p {-width: 300px;}    ‣ versteht nur der IE Windows bis Version 6‣ * html p {width: 300px;} ‣ versteht nu...
Browserhacks‣ Man muss nicht zwangsweise Hacks nutzen.‣ Um die alten IE bis Version 6 auszusperren  genügen schon intellig...
Interessante Browserhacks ‣ /* Hack gegen IE 5 Mac */  ‣ body { overflow-y: auto;} ‣ /* Erst hier schließt sich für den IE ...
http://github.com/ginader/CSS-Hacks
http://github.com/ginader/CSS-Hacks
Conditional Comments
progressive enhancement  graceful degredation
IE ≠ modernhttp://css3generator.com/
wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
http://shouldwebsiteslookthesameinallbrowsers.com/
Der Konsument kannInformationen 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               ‣ Fokus ist auf den Content, denn um den geht es                    am Ende (fast) i...
Graceful Degredation‣ Fokus ist auf den modernsten Browsern‣ ältere Browser bekommen eine abgespeckte  Version
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Nächste SlideShare
Wird geladen in …5
×

Praktikum in Frontendentwicklung - Session1

2.251 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.251
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
98
Aktionen
Geteilt
0
Downloads
17
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Praktikum in Frontendentwicklung - Session1

  1. 1. PraktikumWebtechnologien Wintersemester 2010Jens Grochtdreis und Martin Kliehm
  2. 2. Session 1
  3. 3. Ebenen einer Webseite Javascript CSS (X)HTML PHP, Java, Perl usw. Datenbanken
  4. 4. Am Anfang ging alles schnell!
  5. 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. 6. Die Basis unserer Arbeit ist mehr als 10 Jahre alt!
  7. 7. HTML oder XHTML?
  8. 8. Schreibweisen HTML XHTML‣ <image> ‣ <image />‣ <br> ‣ <br />‣ <meta> ‣ <meta />
  9. 9. Der IE kann kein echtesXHTML (und wird es nie können).
  10. 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. 11. Kenne Dein (X)HTML!‣ Wie sehen ungeordnete Listen aus?‣ Wie sieht eine Überschrift dritten Grades aus?‣ Wie sieht ein Zitat aus?
  12. 12. HTML ohne eigenes CSS
  13. 13. HTML ungestylt
  14. 14. browser.cssSafari4 (Mac) Firefox 3.5 (Mac)
  15. 15. http://www.iecss.com/
  16. 16. Simpler Browser-Reset
  17. 17. Yahoo-Resethttp://developer.yahoo.com/yui/3/cssreset/
  18. 18. Eric Meyers Resethttp://meyerweb.com/eric/tools/css/reset/index.html
  19. 19. Diverse Stylesheets‣ HTML sieht nicht aus, sondern transportiert Bedeutung und Struktur!‣ Browser haben eigene Stylesheets‣ Nutzer können eigene Stylesheets haben
  20. 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. 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. 22. Besser wär das
  23. 23. Gern falsch gemacht‣ Falsch:‣ <br><font size="7"><b>Heading Text</b></ font><br>‣ Richtig:‣ <h1>Heading Text</h1>
  24. 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. 25. Semantik‣ Die Struktur erfassen und aufschreiben ‣ richtig: <h2>Überschrift</h2> ‣ falsch: <div class="headline">Überschrift</div>
  26. 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. 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. 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. 29. Überschriftenreihenfolge h2 h3 h4 h5 h3 h4
  30. 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. 31. Kaskade und Spezifität‣ Grundlage des Überschreibens der Standardkonfiguration sind Kaskade und Spezifität.‣ Kaskade: „wer zuletzt kommt malt zuerst“‣ Spezifität
  32. 32. http://css-tricks.com/specifics-on-css-specificity/
  33. 33. 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
  34. 34. Wen interessieren Browser?http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  35. 35. Nur Entwickler!
  36. 36. Wen interessieren Browser?http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  37. 37. Feindliche Umgebunghttp://www.gtalbot.org/BrowserBugsSection/
  38. 38. http://www.findmebyip.com/litmus/#target-selector
  39. 39. Nur wer vergleicht, kannUnterschiede entdecken
  40. 40. http://stuffandnonsense.co.uk/
  41. 41. Ein normaler Konsument vergleicht aber keine Browserdarstellungen.
  42. 42. Müssen Webseiten überall gleich aussehen?http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  43. 43. Und gehst Du zum Browser, vergiss die Peitsche nicht. In Anlehnung an F. Nietzsche
  44. 44. Die drei Browser-Warshttp://andysworld.org.uk/blog/wp-content/uploads/2010/03/browser-war.jpg
  45. 45. 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 gemachthttp://www.open2.net/blogs/media/blogs/netscape_corner.jpg
  46. 46. 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 Orthttp://www.pc1news.com/articles-img/small/browser_war.jpg
  47. 47. 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 Webhttp://publizieren-im-netz.de/browser-schicksal
  48. 48. 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!
  49. 49. 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
  50. 50. Browserkunde (3)‫‏‬‣ IE 6‣ IE 7‣ IE 8‣ IE 9‣ Gecko-Browser (Mozilla und die Abarten inklusive Firefox)‣ Opera‣ Webkit-Browser (Safari + Chrome)
  51. 51. Doctypes und Quirks-Modus
  52. 52. Doctypes‣ Doctypes kann man unterschiedlich schreiben.‣ Zudem kann man die XHTML mit oder ohne XML-Prolog schreiben.
  53. 53. 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 -->
  54. 54. 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
  55. 55. 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
  56. 56. Informationen sammelnhttp://snurl.com/t58dc
  57. 57. http://webkrauts.de
  58. 58. http://dev.opera.com/articles/wsc/
  59. 59. http://jendryschik.de/wsdev/einfuehrung/
  60. 60. http://little-boxes.de/little-boxes-teil1-online.html
  61. 61. http://developer.yahoo.com/yui/theater/
  62. 62. http://icant.co.uk/
  63. 63. http://net.tutsplus.com/
  64. 64. http://www.smashingmagazine.com/
  65. 65. http://sixrevisions.com/
  66. 66. http://developer.mozilla.com/
  67. 67. Gute Bücher
  68. 68. Jedem Browser das Seine - Hacks und Filter
  69. 69. 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.
  70. 70. 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
  71. 71. 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;}
  72. 72. 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 */
  73. 73. http://github.com/ginader/CSS-Hacks
  74. 74. http://github.com/ginader/CSS-Hacks
  75. 75. Conditional Comments
  76. 76. progressive enhancement graceful degredation
  77. 77. IE ≠ modernhttp://css3generator.com/
  78. 78. wichtige Erkenntnis:Es kann nicht DIE EINEDarstellungsform geben!
  79. 79. http://shouldwebsiteslookthesameinallbrowsers.com/
  80. 80. Der Konsument kannInformationen aus dem Internet nutzen, wie er es möchte.
  81. 81. Unser Layout ist nur eine Empfehlung!
  82. 82. Wenn einige Browserhersteller der technischen Entwicklung hinterherhinken sollte das nicht unser Problem sein.
  83. 83. http:/www.ameriser.com/wp-content/uploads/2010/05/IE.jpg
  84. 84. Progressive Enhancement ‣ Fokus ist auf den Content, denn um den geht es am Ende (fast) immerhttp://www.alistapart.com/articles/understandingprogressiveenhancement/
  85. 85. Graceful Degredation‣ Fokus ist auf den modernsten Browsern‣ ältere Browser bekommen eine abgespeckte Version

×