Presentation Transcript
Web2.0-Stammtisch 0.3: Web2.0-Stammtisch 0.3
Agenda: Agenda HTML 5 und CSS 3
Neue Websites
Literaturempfehlungen
Community Marketing Management
Leitfaden Integrierte Kommunikation
Virales Marketing
Kommunikologie
Slide3: http://code.google.com/webstats/index.html Erstmal gucken…
(X)HTML 5(2) und CSS 3: (X)HTML 5(2) und CSS 3 HTML5 oder XHTML2?
XHTML 2 bringt Semantik ins Web 2.0
HTML 5, der kleine Schritt zu XHTML 2
CSS 3 macht alles schöner
HTML5 oder XHTML2?: HTML5 oder XHTML2? HTML 5 ist eine Weiterentwicklung von HTML 4.0 und XHTML 1.0
HTML 5 muss abwärtskompatibel sein (Stichwort: Tag-Soup)
HTML 5 setzt darauf auf, wie HTML 4.01 in der Praxis angewendet wird und wurde
HTML 5 wird als text/html versendet und somit nicht auf semantisch korrekte Strukturen geprüft
HTML5 oder XHTML2?: HTML5 oder XHTML2? XHTML 2 setzt sich aus der XHTML 2 und Web Application 1.0 Spezifizierung zusammen
XHTML 2 wird (im Gegensatz zu HTML 5) von keinem bekannten Browser unterstützt
XHTML 2 wird streng auf Konformität validiert und somit als xml-Dokument gesendet
XHTML 2 bringt Semantik ins Web 2.0: XHTML 2 bringt Semantik ins Web 2.0 Navigationslisten
Jedes Element kann ein Link sein
Neue Überschrift-Konstrukte
Das role-Attribut!
Neue Attribute (z. B. hrefmedia=„print“, nextfocus=„w“ uvm.)
http://www.w3.org/TR/xhtml2/
XHTML 2 bringt Semantik ins Web 2.0: XHTML 2 bringt Semantik ins Web 2.0 Beispiel einer Breadcrump-Navi mit XHTML 2
Sie sind hier:
Startseite
Produkte
Widgets Funktionen
Slide9: HTML 5 wird auch oft als (X)HTML5 bezeichnet…
HTML 5, der kleine Schritt zu XHTML 2: HTML 5, der kleine Schritt zu XHTML 2 Baut auf der Verwendung von HTML 4.01 und XHTML 1.0 auf
Wird bereits teilweise unterstützt und kann (im Gegensatzu zu XHTML 2) sehr leicht in zukünftige Browser implementiert werden
Unterstützt weiterhin Tag-Soups
Web Forms 1.0
HTML 4.01 -> HTML 5: HTML 4.01 -> HTML 5 Quelle: A List Apart http://www.alistapart.com/articles/previewofhtml5
HTML 4.01 -> HTML 5: HTML 4.01 -> HTML 5 Quelle: A List Apart http://www.alistapart.com/articles/previewofhtml5
HTML 5, Web Forms 1.0: HTML 5, Web Forms 1.0 Part number:
Name:
Comment:
Slide14: CSS 3 dauert zwar noch, schön ist es aber trotzdem
CSS 3 macht alles schöner: CSS 3 macht alles schöner Mehrer Seitenbereich definieren
CSS 3 macht alles schöner: CSS 3 macht alles schöner Mehrer Seitenbereich definieren
dl { display: "ab" "cd" } #sym1 { position: a }
#lab1 { position: b }
#sym2 { position: c }
#lab2 { position: d }
A
A is een aapje
B
B is de bakker
CSS 3 macht alles schöner: CSS 3 macht alles schöner Der Medientyp Reader hält Einzug in die Spezifikation
Werte können mit calc berechnet werden
div.spalte {
float: left;
margin: 1em;
width: calc(100%/3 – 2*1em); } Quelle: http://meiert.com/de/publications/articles/20051224/
CSS 3 macht alles schöner: CSS 3 macht alles schöner Mehrere Hintergründe verwenden
Runde Ecken dank border-radius
Das target-Attribut wurde aus XHTML entfernt und in CSS 3 implementiert
a { target: tab; } Öffnet eine URL innerhalb eines Tabs (sogar ohne Ajax)
Slide19: Entspannt durch Neues surfen…
Neue Web 2.0 Sites: Neue Web 2.0 Sites http://www.photophlow.com/
http://www.alpengluehen.com/
http://stockflock.de/
http://www.carmondo.de/
http://dauerwerbeblog.de
Slide21: Bis zum nächsten Web 2.0 Stammtisch!