Web 2.0-Stammtisch 0.3

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 <nl role="breadcrumbs"> <label>Sie sind hier:</label> <li href="/">Startseite</li> <li href="/produkte/">Produkte</li> <li href="/produkte/widgets/">Widgets</li> <li>Funktionen</li> </nl>

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 <label> Part number: <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by three uppercase letters."/> </label> <ul> <li><label> Name: <input type="text" name="name" required="required" /></label> <label> Comment: <input type="text" name="comment" /></label></li> </ul>

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 <style type="text/css"> dl { display: "ab" "cd" } #sym1 { position: a } #lab1 { position: b } #sym2 { position: c } #lab2 { position: d } </style> <dl> <dt id=sym1>A <dd id=lab1>A is een aapje <dt id=sym2>B <dd id=lab2>B is de bakker </dl>

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!