Als PDF, PPTX herunterladen
![Ü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]](https://image.slidesharecdn.com/session1-101209081202-phpapp02/85/Praktikum-in-Frontendentwicklung-Session1-27-320.jpg)
![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;}](https://image.slidesharecdn.com/session1-101209081202-phpapp02/85/Praktikum-in-Frontendentwicklung-Session1-77-320.jpg)
Hochgeladen vonJens Grochtdreis
Praktikum in Frontendentwicklung - Session1
Das Dokument behandelt verschiedene Aspekte der Webtechnologien, inklusive der Entwicklung von HTML, CSS und JavaScript sowie der Bedeutung von Semantik in der Webentwicklung. Es diskutiert die Evolution von Browsern und den Einfluss von Browserkriegen auf Standards und Innovationen im Internet. Zudem werden Techniken wie Browserhacks und die Konzepte des 'progressive enhancement' und 'graceful degradation' vorgestellt, um sicherzustellen, dass Webseiten in verschiedenen Umgebungen funktional bleiben.
Weitere ähnliche Inhalte
Ähnlich wie Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
- 1. Praktikum Webtechnologien Wintersemester 2010 Jens Grochtdreis und Martin Kliehm
- 2.
- 3. Ebenen einer Webseite Javascript CSS (X)HTML PHP, Java, Perl usw. Datenbanken
- 4. Am Anfang gingalles schnell!
- 5. ‣ 1995: HTML2 ‣ 1996: CSS 1 ‣ 1997: HTML 3.2 ‣ 1998: CSS 2 ‣ 1998: HTML 4 ‣ 1999: HTML 4.01 ‣ 2001: XHTML 1
- 6. Die Basis unsererArbeit ist mehr als 10 Jahre alt!
- 7.
- 8. Schreibweisen HTML XHTML ‣ <image> ‣ <image /> ‣ <br> ‣ <br /> ‣ <meta> ‣ <meta />
- 9. Der IE kannkein echtes XHTML (und wird es nie können).
- 10. Content-Header ‣ Echtes XHTMLbenö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.
- 13.
- 14. browser.css Safari4 (Mac) Firefox 3.5 (Mac)
- 15.
- 16.
- 17.
- 18.
- 19. Diverse Stylesheets ‣ HTMLsieht 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.
- 23. Gern falsch gemacht ‣Falsch: ‣ <br><font size="7"><b>Heading Text</b></ font><br> ‣ Richtig: ‣ <h1>Heading Text</h1>
- 24. Semantik ‣ Mit derBedeutung 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 Strukturerfassen 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 sindeine 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 Quellcodesollten 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 nurselten 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.
- 34. Wichtige Regeln ‣ Vorsichtwalten lassen. ‣ Mit allgemeinen Regeln beginnen ‣ Spezifität nur im Notfall erhöhen ‣ Lieber eine neue Klasse als Ausnahme ‣ IDs selten nutzen
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. Nur wer vergleicht,kann Unterschiede entdecken
- 43.
- 44. Ein normaler Konsument vergleicht aber keine Browserdarstellungen.
- 45. Müssen Webseiten überall gleich aussehen? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
- 46. Und gehst Duzum Browser, vergiss die Peitsche nicht. In Anlehnung an F. Nietzsche
- 47.
- 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) ‣ AusCSS-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-Browserwie Lynx ‣ Browser zur Ausgabe für Sehbehinderte (meist "Browsererweiterungen") ‣ alte Browser, die kein CSS können oder dies nur rudimentär
- 54. Browserkunde (3) ‣ IE6 ‣ IE 7 ‣ IE 8 ‣ IE 9 ‣ Gecko-Browser (Mozilla und die Abarten inklusive Firefox) ‣ Opera ‣ Webkit-Browser (Safari + Chrome)
- 55.
- 56. Doctypes ‣ Doctypes kannman unterschiedlich schreiben. ‣ Zudem kann man die XHTML mit oder ohne XML-Prolog schreiben.
- 57. Quirks-Modus ‣ Ein XML-Prologschickt den IE6 IMMER in den Quirks-Modus. ‣ <?xml version="1.0"?> ‣ Auch ein Kommentar VOR der DTD ‣ <!-- Du depperter IE -->
- 58. Quirks-Modus ‣ Esgibt 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 IE6und 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.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 74. Jedem Browser dasSeine - Hacks und Filter
- 75. Browserhacks ‣ Manchmal istes 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 mussnicht 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.
- 80.
- 81.
- 82. progressive enhancement graceful degredation
- 83.
- 84. wichtige Erkenntnis: Es kannnicht DIE EINE Darstellungsform geben!
- 85.
- 86. Der Konsument kann Informationenaus dem Internet nutzen, wie er es möchte.
- 87. Unser Layout istnur eine Empfehlung!
- 88. Wenn einige Browserherstellerder technischen Entwicklung hinterherhinken sollte das nicht unser Problem sein.
- 89.
- 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 ‣ Fokusist auf den modernsten Browsern ‣ ältere Browser bekommen eine abgespeckte Version