praegnanz.de büro für intervernetzte medien

Gerrit, 02.04.2007

Webmontag Liveblog

19:27 Uhr – gleich geht’s los!

19:29 Uhr – Harry begrüßt die Anwesenden – es gibt einen eigenen Beamer, dank der Spenden! Applaus im Saal. Jetzt kommt Andreas Demer mit dem ersten Vortrag

19:30 Uhr – Bado sortiert noch seine Folien, dewegen ein geändertes Programm. Andreas zuerst, dann später Bado.

Thema: Nützliche Firefox-Erweiterungen für Web-Entwickler. 4 Kurze Ideen, die nützlich sein könnten

Web-Developer-Plugin

Dolle Sache: Cookies, Stylesheets, Live-CSS-Preview, Formulare, Bildschirmlineal, Hilfslinien – all das ist toll!

Firebug

Werkzeug zum DOM-Baum oder Styles inspizeiern. Andreas zieht sich den Firebug in eine Extra-Seite und schaut sich das HTML an, Auf- und Zuklappen. Layout-Zuweisungen im CSS-Fenster. Zugewiesene Styles werden angezeigt, auch überschriebene Styles.
Skripte angucken, Seitenelemente anzeigen, die geladen wurden, usw. Das Werkzeug der Wahl zum JS- und Ajax-Debuggen! »Unverzichtbar«

iMacros

Formulareingaben und Klicks automatisieren. Andreas macht ein Admin-Formular auf und legt mehrere Weblog-Eintrage automatisch an. A. öffnet die Leiste und zeichnet ein neues Makro auf. Legt einen Weblog-Eintrag an, füllt ein paar Felder aus. Jetzt stoppt er das Makroaufzeichnung.

Doppelklick – wunderbar, alles wird automatisch wiederholt und legt von selber einen zweiten Eintrag an. Kann für Formulartesten verwendet werden oder wenn man sich das Passwort nicht merken kann.

Pearl Crescent Page Saver

Kleines Plugin, das schnell erklärt werden kann mit einem komischen Namen.

Screenshot machen von der Webmontags-Seite. Aber noch besser: Komplette Website abspeichern ohne Scrolling.

Das war’s, Applaus für Andreas, jetzt kommt der nächste Redner.

19:40 Uhr – Lukas Rosenstock spricht über »Das fotosoziale Netzwerk – Kurze Demo eines Projektes«

Was ist das? Eine Fotosharing-Plattform, ein soziales Netzwerk?

Ja und Nein. Wenn ja, denn dann wär’s ja blöd.

Zeigt Foto, das soeben angefertigt wurde: Drei Menschen am Biertisch unten in der Brotfabrik.

Jeder will das Foto, auf dem er drauf ist, aber nicht jeder andere soll es sehen.

Also: das fotosziale Netzwerk basiert auf diesen einfachn Aussagen.

  • Ich lade Bilder rauf und markiere die Menschen, die drauf zu sehen sind. (Wie bei StudiVZ)
  • Die Zustellung der Bilder erfolgt automatisch nach den Wünschen der dargestellten Personen
  • Basiert auf Einladungen, nur getaggte Personen dürfen teilnehmen
  • Login auch über OpenID, wo Lukas ebenfalls aktiv beteiligt ist.

Lukas zeigt Screens von der Plattform, seine Profilseite. Man sieht Verbindungen von personen, die gemeinsam auf Fotos sind udn andere Verbindungen.

(Gerrit denkt: Lukas Rostenstock ist ein echt toller, kreativer und sympatischer Typ. Liebe Personalmenschen: Bitte einstellen, er sagt und denkt gute Sachen)

Jetzt habe ich meinen Vortrag gehalten – in Kürze bei Sevenload!


19:59 Uhr: jens Grochtdreis über XHTML/CSS Frameworks: YUI Grids und YAML

Technische Probleme mit Powerpoint, war klar.

Webseiten erstellen kann komplex sein. Frameworks gibt’s vor allem für JavaScript, aber warum nicht was mit HTML/CSS, damit man mit den Browserbugs zurecht kommt.

Normalerweise hat man CSS-Libraries und Template-Sammlungen (CSS-Gala …), die nerven aber, weil sie grob sind und das war’s dann. Website ist mehr als Zweispalter und Dreispalter. Wir brauchen universelle Ansätze, aber da gibt’s nur zwei: Grids von Yahoo und YAML von Dirk Jesse.

YUI ist ein komplexes JavaScript-Framework von Yahoo, Basis aller modernen Yahoo-Seiten. Grids ist davon ein kleiner Subbereich. Schmale Dokumentation, aber es gibt ein gutes Zusatz-Tool.

Jens stellt mit Codebeispielen die Grundstruktur vor. Templates, Subtemplates

  • YAML ist ein XHTML/CSS-Framework, kein JavaScript
  • Basis vieler kleiner und großer Webauftritte
  • Sehr umfangreiche Dokumentation, es gibt auch ein Buch
  • Ein Zusatztool ist in Arbeit (Mit jQuery)

YAML ist anders als Grids. Bei Grids fügt man einem Kern Dinge hinzu, bei YAML hat man erst ganz viel und nimmt Dinge weg.

Grundstruktur: 1 Kopf, 1 Footer, dazwischen 3 Spalten, die frei definierbar sind. Source-Order frei anpassbar. Floatclearing wird gut gelöst.

Das Faszinierende daran: Dirk ist sehr schnell bei der Implementierung von neuen Features, wenn neue Bugs auftreten.

Struktur der CSS-Dateien ist sehr komplex, Jens zeigt ein Schema am Beamer. Das wird aber demnächst verständlicher werden, hat Dirk versprochen. Der »Core«-Ordner bleibt unangetastet, den Rest bindet man selber ein, kann dann alles modden.

YUI ist Voodoo, aber YAML ist ersichtlich.

Jens zeigt Subtemplates und komplexere Layouts, die mit YAML erstellt wurden. Subcolumns mit zusammengehörigen Klassen.

Jens kommt zum Ende: Die Präsi gibt’s im Blog und auch im Wiki, steht unter einer CC-Lizenz.

20:16 Uhr – Martin Kliehm: International Liaison Group
  • Da gibt’s wichtige und namhafte Menschen drin, die sich zum Ziel gesetzt haben, Webstandards zu verbreiten.
  • Öffentlichkeit schaffen
  • Internationalisierung, Lokalisierung

Öffentliche Diskussion

  • Blogs
  • WaSP Cafés (Geek Meetings)
  • Feedback an WaSP, von dort zum W3C oder Browserherstellern

Information

  • Blogs, Bücher, Artikel, Präsentationen, lehre, Quellcode, Design …

ich hör auf :-)

3 Kommentare

  1. bob am 3. April 2007 #

    Satt »Pearl Crescent Page Saver« kann man auch das kostenlose http://www.screengrab.org/ verwenden.

  2. Andreas Demmer am 3. April 2007 #

    Ich habe die ‘Basic’ Variante des Page Savers gezeigt, die ist ebenfalls gratis und beinhaltet alle gezeigten Features.

  3. nennett am 5. April 2007 #

    Danke fürs Einstellen Deines Vortrages. Wollte diesmal kommen, hat leider nicht geklappt.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.