logging in or signing up web2null-Stammtisch 01 durakh Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 341 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: November 16, 2007 This Presentation is Public Favorites: 0 Presentation Description No description available Comments Posting comment... Premium member Presentation Transcript Web2.0-Stammtisch 0.1: Web2.0-Stammtisch 0.1Agenda: Agenda Soziales kleine Vorstellungsrunde Erwartungen und Wünsche Fachliches Offline Websites, Ideen und wie funktioniert es Barrierefreiheit, MikroformateSlide3: http://www.flickr.com/photos/zippy/ Soziales: Wer wir sind…Erwartungen:: Erwartungen: Slide5: http://www.flickr.com/photos/e-nikkos/ Offline Websites, Ideen und wie funktioniert esOffline mit Goggle Gears: Offline mit Goggle Gears Bestandteile von Google Gears Architektur von Offline-Anwendungen Wofür braucht man Offline-Anwendungen? BeispieleWas ist Google Gears: Was ist Google Gears Google Gears ist eine Browsererweiterung, die ähnlich Flash, vom User selbst installiert werden muss Es werden Dienste bereitgestellt, die es Webanwendungen erlauben Offline dieselben Funktionalitäten zu bieten wie OnlineBestandteile von Google Gears: Bestandteile von Google Gears Localserver Database WorkerpoolBestandteile von Google Gears: Bestandteile von Google Gears Localserver Ist der Webserver-Ersatz Speichert Resourcen einer Anwendung (Bilder, Stylesheets, Javascript, HTML etc.) Ist permanent verfügbar und verbunden Bestandteile von Google Gears: Bestandteile von Google Gears Database Ist eine voll funktionsfähige SQL-Datenbank Wird über Javascript angesprochen Mächtiger als Cookies, da typische Datenbankoperationen durchgeführt werden können Bestandteile von Google Gears: Bestandteile von Google Gears Workerpool Unterstützt Javascript Threading Es können mehrere Funktionen parallel ausgeführt werden, ohne den Browser zu blockieren Kein Zugriff auf das Browser-DOM Online-Architektur aus Usersicht: Online-Architektur aus Usersicht Quelle: GoogleOffline-Architektur aus Usersicht: Offline-Architektur aus Usersicht Quelle: GoogleWofür Offline?: Wofür Offline? Ideen…? Kritik…?Beispiele: Beispiele http://www.rememberthemilk.com http://writer.zoho.com http://brian.shaler.name/digg/oracle/ http://passpack.com/info/extras/ Slide16: BarrierefreiheitBarrierefreiheit, Mikroformate und Ajax: Barrierefreiheit, Mikroformate und Ajax Barrierefreiheit Was ist Barrierefreiheit? Was gehört zur Barrierefreiheit? Wieso wird Barrierefreiheit immer wichtiger?Was ist Barrierefreiheit?: Was ist Barrierefreiheit? Barrierefreiheit bedeutet, dass Gegenstände und Einrichtungen so gestaltet werden, dass sie von jedem Menschen unabhängig von einer eventuell vorhandenen Behinderung uneingeschränkt benutzt werden können. Bedingt durch Antidiskriminierungskampagnen, die die Berücksichtigung der besonderen Ansprüche von Menschen mit Behinderung einforderten, sind in Deutschland unter hohen Kosten etliche öffentliche Einrichtungen umgebaut worden. Zum anderen ist durch die demografische Entwicklung das Thema seit den 1990er Jahren zunehmend ins öffentliche Bewusstsein gerückt. In Deutschland etwa wird sich nach Prognosen des Statistischen Bundesamtes die Zahl der 80-jährigen und Älteren von heute nicht ganz vier Millionen auf zehn Millionen im Jahr 2050 nahezu verdreifachen. Quelle: WikipediaSlide19: Arbeitsplatz eines behinderten MenschenWas gehört zur Barrierefreiheit?: Was gehört zur Barrierefreiheit? Design Technik Semantik „Niemand darf wegen seiner Behinderung benachteiligt werden.“ Artikel 3 Absatz 3 des Grundgesetzes. http://www.barrierefreies-webdesign.de/bitv/bedingungen.php BITV (Barrierefreien Informationstechnik-Verordnung) Barrierefreies Design: Barrierefreies Design Anforderung 1: Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen. Anforderung 2 Texte und Graphiken müssen auch dann verständlich sein, wenn sie ohne Farbe betrachtet werden. Anforderung 13 Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.Barrierefreie Technik: Barrierefreie Technik Anforderung 6 Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent neuere Technologien nicht unterstützt oder diese deaktiviert sind. Anforderung 8 Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist sicherzustellen.Semantik: Semantik Anforderung 3 Markup-Sprachen (insbesondere HTML) und Stylesheets sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden. Anforderung 4 Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar zu machen. Anforderung 5 Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.Wieso wird Barrierefreiheit immer wichtiger?: Wieso wird Barrierefreiheit immer wichtiger? Dinge und Tätigkeiten des täglichen Lebens werden im Web abgebildet und zur Verfügung gestellt Fairness und Rücksicht auf Menschen mit Beeinträchtigungen Gerade Menschen mit Beeinträchtigungen sind auf das Internet als Dienstleistung angewiesen. Thema eingeschränkte Mobilität SEO ist z. B. ein nicht unerheblicher Nebeneffekt von barrierefreien Websites, wenn o. g. Argumente auf taube Ohren stoßenWeb2.0 != Barrierefreiheit: Web2.0 != Barrierefreiheit Web 2.0 Anwendungen sind aufgrund der beschränkten Möglichkeiten von (X)HTML oft nicht barrierefrei Es kann alles ein Button sein oder Funktionalität hinterlegt haben Der Standard-Entwurf des W3C für Accessible Rich Internet Applications (ARIA) überbrückt diese Beschränkungen und schafft neue Wege zur Kommunikation von Bedeutung, Relevanz, BeziehungenSemantik im Web2.0: Semantik im Web2.0 Anhand z. B. des role-Attributs kann jedem Element eine Bedeutung zugewiesen werden <ul role=“Schnelleinstieg"> […] </ul> <input type="text" name=“name" aaa:required="true" /> <div role="wairole:button" aaa:controls=“datum">Sortierung ändern</div> <h2 id=“datum" aaa:sort="descending">Datum</h2> Browserunterstützung?: Browserunterstützung? Roles, States und Properties können sofort eingesetzt werden. Firefox 1.5 und späteren Versionen sowie drei großen Screenreadern unterstützen (Window Eyes 5.5+, Jaws 7.0+, ZoomText) diese bereits Für andere Browser ebenfalls verfügbar gemacht werden: XML Schema Namespaces DOM Scripting DTD Erweiterung Links und Literatur: Links und Literatur Accessibility RIA/Web2.0 http://www.w3.org/WAI/intro/aria http://www.w3.org/TR/aria-roadmap/ http://www.w3.org/TR/xhtml-role/ http://www.w3.org/TR/aria-role/ http://developer.mozilla.org/en/docs/Accessible_DHTML#Sample_widgets Barrierefreiheit testen http://firevox.clcworld.net/Barrierefreiheit testen: Barrierefreiheit testen http://firevox.clcworld.net/ http://www.cynthiasays.com/ Slide30: MikroformateMikroformate: Mikroformate Beispiel vCard Was sind Mikroformate? Anwendungsmöglichkeiten Tools um Mikroformate zu nutzenMikroformate: Mikroformate <div class="vcard"> <a class=”url fn” href=”http://www.letzte-ausfahrt.de”>Oliver Klar</a> <div class=”org”>Solvians</div> <div class=”adr”> <div class=”street-address”>65185 Eleonorenstraße 4</div> <span class=”locality”>Wiesbaden</span>, <span class=”region”>De</span> <span class=”postal-code”>65185</span> </div> <div class=”tel”>0611-3413926</div> </div>Slide33: Mikroformate am Beispiel von Twitter Slide34: Mikroformate am Beispiel von Twitter Was sind Mikroformate: Was sind Mikroformate Mikroformate gehören zum sogenannten „lower case“ semantic web Müssen von Menschen lesbar sein Erweitern existierende Technologien (XML, XHTML) Nutzbar heute und in Zukunft mit bereits existierenden MikroformatenAnwendungsmöglichkeiten: Anwendungsmöglichkeiten Universelle Kalender gemeinsam nutzbare Aufgabenlisten Maßgeschneiderte Suche Kontaktmanagement hCalendar, hCard, hReview, rel-Tag etc. http://microformats.org vCards mit Bluetooth übertragen http://www.youtube.com/v/azoNnLoJi-4Slide37: hCalendar bei last.fmSlide38: hCalendar bei last.fmSlide39: hCalendar bei last.fmSlide40: hCalendar bei last.fmWünsche:: Wünsche: You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
web2null-Stammtisch 01 durakh Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 341 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: November 16, 2007 This Presentation is Public Favorites: 0 Presentation Description No description available Comments Posting comment... Premium member Presentation Transcript Web2.0-Stammtisch 0.1: Web2.0-Stammtisch 0.1Agenda: Agenda Soziales kleine Vorstellungsrunde Erwartungen und Wünsche Fachliches Offline Websites, Ideen und wie funktioniert es Barrierefreiheit, MikroformateSlide3: http://www.flickr.com/photos/zippy/ Soziales: Wer wir sind…Erwartungen:: Erwartungen: Slide5: http://www.flickr.com/photos/e-nikkos/ Offline Websites, Ideen und wie funktioniert esOffline mit Goggle Gears: Offline mit Goggle Gears Bestandteile von Google Gears Architektur von Offline-Anwendungen Wofür braucht man Offline-Anwendungen? BeispieleWas ist Google Gears: Was ist Google Gears Google Gears ist eine Browsererweiterung, die ähnlich Flash, vom User selbst installiert werden muss Es werden Dienste bereitgestellt, die es Webanwendungen erlauben Offline dieselben Funktionalitäten zu bieten wie OnlineBestandteile von Google Gears: Bestandteile von Google Gears Localserver Database WorkerpoolBestandteile von Google Gears: Bestandteile von Google Gears Localserver Ist der Webserver-Ersatz Speichert Resourcen einer Anwendung (Bilder, Stylesheets, Javascript, HTML etc.) Ist permanent verfügbar und verbunden Bestandteile von Google Gears: Bestandteile von Google Gears Database Ist eine voll funktionsfähige SQL-Datenbank Wird über Javascript angesprochen Mächtiger als Cookies, da typische Datenbankoperationen durchgeführt werden können Bestandteile von Google Gears: Bestandteile von Google Gears Workerpool Unterstützt Javascript Threading Es können mehrere Funktionen parallel ausgeführt werden, ohne den Browser zu blockieren Kein Zugriff auf das Browser-DOM Online-Architektur aus Usersicht: Online-Architektur aus Usersicht Quelle: GoogleOffline-Architektur aus Usersicht: Offline-Architektur aus Usersicht Quelle: GoogleWofür Offline?: Wofür Offline? Ideen…? Kritik…?Beispiele: Beispiele http://www.rememberthemilk.com http://writer.zoho.com http://brian.shaler.name/digg/oracle/ http://passpack.com/info/extras/ Slide16: BarrierefreiheitBarrierefreiheit, Mikroformate und Ajax: Barrierefreiheit, Mikroformate und Ajax Barrierefreiheit Was ist Barrierefreiheit? Was gehört zur Barrierefreiheit? Wieso wird Barrierefreiheit immer wichtiger?Was ist Barrierefreiheit?: Was ist Barrierefreiheit? Barrierefreiheit bedeutet, dass Gegenstände und Einrichtungen so gestaltet werden, dass sie von jedem Menschen unabhängig von einer eventuell vorhandenen Behinderung uneingeschränkt benutzt werden können. Bedingt durch Antidiskriminierungskampagnen, die die Berücksichtigung der besonderen Ansprüche von Menschen mit Behinderung einforderten, sind in Deutschland unter hohen Kosten etliche öffentliche Einrichtungen umgebaut worden. Zum anderen ist durch die demografische Entwicklung das Thema seit den 1990er Jahren zunehmend ins öffentliche Bewusstsein gerückt. In Deutschland etwa wird sich nach Prognosen des Statistischen Bundesamtes die Zahl der 80-jährigen und Älteren von heute nicht ganz vier Millionen auf zehn Millionen im Jahr 2050 nahezu verdreifachen. Quelle: WikipediaSlide19: Arbeitsplatz eines behinderten MenschenWas gehört zur Barrierefreiheit?: Was gehört zur Barrierefreiheit? Design Technik Semantik „Niemand darf wegen seiner Behinderung benachteiligt werden.“ Artikel 3 Absatz 3 des Grundgesetzes. http://www.barrierefreies-webdesign.de/bitv/bedingungen.php BITV (Barrierefreien Informationstechnik-Verordnung) Barrierefreies Design: Barrierefreies Design Anforderung 1: Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen. Anforderung 2 Texte und Graphiken müssen auch dann verständlich sein, wenn sie ohne Farbe betrachtet werden. Anforderung 13 Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.Barrierefreie Technik: Barrierefreie Technik Anforderung 6 Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent neuere Technologien nicht unterstützt oder diese deaktiviert sind. Anforderung 8 Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist sicherzustellen.Semantik: Semantik Anforderung 3 Markup-Sprachen (insbesondere HTML) und Stylesheets sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden. Anforderung 4 Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar zu machen. Anforderung 5 Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.Wieso wird Barrierefreiheit immer wichtiger?: Wieso wird Barrierefreiheit immer wichtiger? Dinge und Tätigkeiten des täglichen Lebens werden im Web abgebildet und zur Verfügung gestellt Fairness und Rücksicht auf Menschen mit Beeinträchtigungen Gerade Menschen mit Beeinträchtigungen sind auf das Internet als Dienstleistung angewiesen. Thema eingeschränkte Mobilität SEO ist z. B. ein nicht unerheblicher Nebeneffekt von barrierefreien Websites, wenn o. g. Argumente auf taube Ohren stoßenWeb2.0 != Barrierefreiheit: Web2.0 != Barrierefreiheit Web 2.0 Anwendungen sind aufgrund der beschränkten Möglichkeiten von (X)HTML oft nicht barrierefrei Es kann alles ein Button sein oder Funktionalität hinterlegt haben Der Standard-Entwurf des W3C für Accessible Rich Internet Applications (ARIA) überbrückt diese Beschränkungen und schafft neue Wege zur Kommunikation von Bedeutung, Relevanz, BeziehungenSemantik im Web2.0: Semantik im Web2.0 Anhand z. B. des role-Attributs kann jedem Element eine Bedeutung zugewiesen werden <ul role=“Schnelleinstieg"> […] </ul> <input type="text" name=“name" aaa:required="true" /> <div role="wairole:button" aaa:controls=“datum">Sortierung ändern</div> <h2 id=“datum" aaa:sort="descending">Datum</h2> Browserunterstützung?: Browserunterstützung? Roles, States und Properties können sofort eingesetzt werden. Firefox 1.5 und späteren Versionen sowie drei großen Screenreadern unterstützen (Window Eyes 5.5+, Jaws 7.0+, ZoomText) diese bereits Für andere Browser ebenfalls verfügbar gemacht werden: XML Schema Namespaces DOM Scripting DTD Erweiterung Links und Literatur: Links und Literatur Accessibility RIA/Web2.0 http://www.w3.org/WAI/intro/aria http://www.w3.org/TR/aria-roadmap/ http://www.w3.org/TR/xhtml-role/ http://www.w3.org/TR/aria-role/ http://developer.mozilla.org/en/docs/Accessible_DHTML#Sample_widgets Barrierefreiheit testen http://firevox.clcworld.net/Barrierefreiheit testen: Barrierefreiheit testen http://firevox.clcworld.net/ http://www.cynthiasays.com/ Slide30: MikroformateMikroformate: Mikroformate Beispiel vCard Was sind Mikroformate? Anwendungsmöglichkeiten Tools um Mikroformate zu nutzenMikroformate: Mikroformate <div class="vcard"> <a class=”url fn” href=”http://www.letzte-ausfahrt.de”>Oliver Klar</a> <div class=”org”>Solvians</div> <div class=”adr”> <div class=”street-address”>65185 Eleonorenstraße 4</div> <span class=”locality”>Wiesbaden</span>, <span class=”region”>De</span> <span class=”postal-code”>65185</span> </div> <div class=”tel”>0611-3413926</div> </div>Slide33: Mikroformate am Beispiel von Twitter Slide34: Mikroformate am Beispiel von Twitter Was sind Mikroformate: Was sind Mikroformate Mikroformate gehören zum sogenannten „lower case“ semantic web Müssen von Menschen lesbar sein Erweitern existierende Technologien (XML, XHTML) Nutzbar heute und in Zukunft mit bereits existierenden MikroformatenAnwendungsmöglichkeiten: Anwendungsmöglichkeiten Universelle Kalender gemeinsam nutzbare Aufgabenlisten Maßgeschneiderte Suche Kontaktmanagement hCalendar, hCard, hReview, rel-Tag etc. http://microformats.org vCards mit Bluetooth übertragen http://www.youtube.com/v/azoNnLoJi-4Slide37: hCalendar bei last.fmSlide38: hCalendar bei last.fmSlide39: hCalendar bei last.fmSlide40: hCalendar bei last.fmWünsche:: Wünsche: