Web Standards in Germany

Webstandards-Spezialisten in Deutschland

Webkrauts

Mittwoch
Aug 26,2009

Die Webkrauts sind ein Zusammenschluss deutschsprachiger Webdesigner. Sie setzen sich dafür ein, die Vorteile der Webstandards auch im deutschsprachigen Raum stärker zur Geltung zu bringen. Ansprechpartner ist Jens Grochtdreis.

Aktuelle Themen bei Webkrauts:
  • Flexbox light – das neue Layoutprinzip schon heute anwenden
    Schriftzug flexible auf einem Tor. Sieht nicht sehr flexibel aus.Modernes Layout mit CSS

    Flexbox ist eine interessante neue CSS-Technik, mit der Webworker einfacher Inhalte in einem Layout anordnen können. Dabei können sie auch Elemente unabhängig von der Codereihenfolge sortieren. Leider ist die Verbreitung dieser Technik nicht besonders groß. Einfaches Umsortieren kann aber mit einem einfachen Trick schon heute realisiert werden.

    Im Juni letzten Jahres veröffentlichte Ian Devlin einen Vorschlag, wie man mittels der Display-Eigenschaft die Darstellungsreihenfolge einer Webseite entscheidend beeinflussen kann. Diese Technik ist sozusagen »Flexbox light«, weil sie in die Richtung der mächtigen Technik Flexbox weist. Diese wird glücklicherweise immer besser implementiert. Aber leider gibt es keinen Fallback-Zustand und auch kein Polyfill, weshalb wir Flexbox sicherlich erst in vier oder fünf Jahren flächendeckend werden einsetzen können.

    Bis dahin können allerdings im kleinen Maßstab Webseiten mit einfachen Mitteln für kleine Bildschirme umarrangiert werden. Meine Beispielseite bei Codepen zeigt das Grundprinzip an einem Zweispalter. Das Beispiel wurde mit YAML aufgebaut. Die meisten CSS-Regeln stecken deshalb in externen Dateien. Auch die Inhalte stecken in separaten Pens, die man bei dieser Testumgebung inkludieren kann.

    Ein Beispiellayout in breiter Darstellung, die rechte Spalte floatet
    Das Beispiellayout in voller Breite, zweispaltig

    Die Contentspalte kommt am Ende des Codes, weil sie flexibel in der Breite ist. Die Seitenspalte mit den nebensächlichen Inhalten (die im Zweifel allerdings die Kohle bringt) kommt als erstes im Code und floatet nach rechts. Es soll nun dafür gesorgt werden, dass der Inhalt auf einem schmalen Bildschirm vor der Werbung und den weiterführenden Links kommt. Im Beispiel kommt Ians Idee bei einem Breakpoint von 720px Maximalbreite zum Zuge:

    1. @media only screen and (max-width: 720px){
    2. /* vorher floatende Seitenspalte */
    3.         .ym-col1 {
    4.         float: none;
    5.         width: 100%;
    6.         display: table-footer-group;
    7.         }
    8. /* statische Inhaltsspalte */
    9.         .ym-col3 {
    10.         margin-right: 0;
    11.         width: 100%;
    12.         }
    13. }
    Ein Beispiellayout in schmaler Darstellung, die vorher rechte Seitenspalte hängt nun nach dem Ende des Inhalts
    Das linearisierte Beispiellayout mit der zweiten Spalte am Ende der Seite

    Die floatende Seitenspalte wird »entfloatet« und bekommt eine neue Display-Eigenschaft: display: table-footer-group;.
    Die umgebenden Container werden vom Browser automatisch zu einer neuen Tabelle umdefiniert. Und da in dieser die table-footer-group am Ende der Darstellung ist, wird der Inhalt nun am Ende der neu implizit gedachten Tabelle platziert. Es ist wichtig, dass das nicht automatisch das Ende der Seite ist. Die Unterstützung von display: table reicht bis runter zum IE8. Es ist doch einen Versuch beim nächsten Projekt wert, in dem die Sourceorder für die Darstellung auf kleinen Bildschirmen unpassend ist.

    Jens Grochtdreis
  • 3. Kasseler Web Montag

    Der Web Montag wurde 2005 in Köln aus der Taufe gehoben und bietet seither eine Plattform für alle Webentwickler, Webdesigner und Webarchitekten, die kreativ am Fortschritt des Internets teilhaben wollen und sich mit anderen Enthusiasten auf diesem Gebiet austauschen möchten. Usprünglich inspiriert vom Hot Spot Silicon Valley ist der Web Montag heute eine Institution in über 40 Städten mit aktiven Gruppen in Deutschland, Österreich, Schweden und Kalifornien.

    Weitere Infos zum Web Montag im allgemeinen.

    Der dritte Web Montag Kassel findet am 17. März statt! Ab 19:00 Uhr in der Kombinatsgasstätte »Zur Marbachshöhe«, Amalie-Wündisch-Str. 3, 34131 Kassel. Um Voranmeldung via Web Montag Wiki wird gebeten (das erleichtert uns die Planung).

    Übrigens: Wir suchen noch Leute, die den Web Montag Kassel mit guten Ideen und mit Freude an der Sache unterstützen wollen (Präsentationen, Organisation, Programmierung etc.). Und natürlich sind wir auch einem Sponsoring gegenüber nicht abgeneigt (immerhin müssen Örtlichkeiten & Verköstigung usw. finanziert werden).

    17.03.20142014Web Montag Kassel
    Zur Marbachshöhe
    Amalie-Wündisch-Str. 3
    34131 Kassel
    Deutschland

Webzeugkoffer Blog

Samstag
Jul 26,2008

Björn Seibert ist Dipl.-Betriebswirt (FH) / Wirtschaftsinformatik und beschäftigt sich als Manager für Websites und Onlineservices. Er hat, zusammen mit Manuela Hoffmann, das Buch “Professionelles Webdesign mit (X)HTML und CSS” veröffentlicht. Er verfügt über Profiwissen zu Webstandards, CSS und XHTML. In seinem Webzeugkoffer werden Themen und Know-How aus der Webpraxis gepackt.

Aktuelle Themen bei WebdevBits:
Björn Seibert

bsmarkup

Heinigstr. 46

Ludwigshafen
67059
Germany

0621-5723075

webinale 08 – The Holistic Web Conference!

Montag
Mai 26,2008
Beginn: 9:00 am, May 26, 2008
Ende: 8:00 pm, May 27, 2008
Ort:  Festplatz Karlsruhe, Baden-Württemberg 76133 Germany

Das Buzzword "Web 2.0″ stand in den vergangenen Jahren im Mittelpunkt. Doch was folgt? Wie wird das Web der Zukunft aussehen? Worauf kommt es an? Auf diese Fragen werden Ihnen Experten auf der webinale 2008 Rede und Antwort stehen. Mit einem umfangreichen Programm, zahlreichen Sessions und Power Workshops, internationalen und nationalen Top-Speakern und Industrie-Vordenkern.

Aktuelle Themen:

    Oliver Gassner on Germany 2.0

    Dienstag
    Mai 6,2008

    Kommunikations-Werkzeuge wie "Twitter", und Schlagwörter wie "User Generated Content" sind in aller Munde. Durch den raffinierten Einsatz verschiedener Social Media Werkzeuge, kann Oliver nun in aller Ruhe am Strand sein Handtuch suchen, während seine Inhalte automatisch aktualisiert werden. Oliver Gassner hilft anderen in seiner Freizeit, Social Media besser zu verstehen und zu nutzen.

    Aktuelle Themen:
    • Wie binde ich Facebook-Inhalte in mein Blog ein? (Social Web Tipps)

      Frage: Wie binde ich Facebook-Inhalte in mein Blog ein?
      Antwort:
      Ö
      ffentliche Facebook-Posts können in Blogbeiträge dynamisch eingebunden werden.

      Achtung: Dabei werden eventuell Informationen über Surfer auf Ihren Seiten Facebook bekannt, datenschutzrechtliche Fragestellungen diskutiere ich hier nicht. Urheberrechtliche Aspekte sollten sie ebenfalls beachten; auch hierzu kann ich nichts sagen.

      Sie finden oben rechts bei Posts ein kleines graues Pfeilsymbol, das nach unten zeigt. ein Klick darauf klappt ein Menue aus, das verschiueden viele Elemente enthält - je nach Status des Beitrrags.
      Falls eines davon “Beitrag einbetten” lautet: Klicken sie diesen. (Ist er nicht vorhandne ist der beirag nicht einbettbar und könnte maximal als Screenshot/LInk eingebettetw erden.)

      Es öffnet sich nun ein Fenster, das einen HTML-Code enthält, diesen sollten Sie kopieren und in der HTML-Ansicht ihres Blogbeitrags (heißt manchmal auch ‘Text’ o.ä.) an der gewünschten Stelle einfügen können.

      Der Code ist bereits markiert, Sie können ihn also mit ‘Rechtsklick/Kopieren’ kopieren und z.B. mit Rechtsklick-einfügen oder Strg-V bzw Ctrl-V einfügen.

      Wird der Ursprungsbeitrag gelöscht, verschwindet wahrscheinlich auch der eingebettete Inhalt.
      Inhalte, die so eingebettet sind, werden i.d.R. von Suchmaschinen nicht erfasst, eventuell möchten Sie relevante Inhalte auch anderweitig sichern oder textlich beschreiben.

      Vorteil: Ihre Leser_inne können direkt mit den Facebookinhalten interagierten. Das ist natürlic besonders sinnvoll, wenn es sich um Ihre eigenen Beiträge handelt. So können auch Likes und Fans für Pafes generiert werden.

      Unten ein Beispiel:




      ***
      Übersicht über alle Tippletter (Produktivität, XING allg., XING-Profil, Weblogs, Social Web) hier:
      http://blog.oliver-gassner.de/archives/5647-Oliver-Gassners-kostenlose-woechentliche-TIPPletter.html


      Facebook Kommentare


    • Cross- und multimediale Aktion: #salesforcegratuliert ZEISS Aalen zu einem Produktlaunch
      Ich hab mich heute Vormittag in Aalen herumgetrieben. Bei der Carl Zeiss AG. Und da lief unter der Koordination der PR-Agentur achtung! (München und Hamburg ) eine wirklich extrem crossmediale Aktion:
      Printmedien waren eingebunden, lokales TV, Anzeigen gab es, Tweets, Facebook und ein Real-Event sondersgleichen: einige Dutzend Promoter haben über 1000 Cupcakes als Dankeschön an Mitarbeiter von Zeiss verteilt. Die KOnnten sogar Cupcakes in speziellen Containern mit nach Hause nehmen. “Versteckt” waren diese Cupcakes in einem 2 Meter hohen Holz-Klapp-Cupcake, der im Bus mit “Schaufenster” angerollt kam. Das Ganze wurde auch auf Social-Media-Kanälen begleitet und Alexandra Rittner und ich waren sozusagen als “embedded blogger” geladen und ich konnte Vetreter von ZEISS und Salesforce live interviewen. Heute abend ab 19 Uhr wird ein geschnittenes Video bei Youtube verfügbar sein.

      Ich habe mit Meike Leopold von Salesforce (Social Media) vereinbart, dass wir auch noch mal ein NachgespräCH als #netzstimmen-Interview machen.

      Hier die Footage von heute morgen.
      Die Ankunft (ich stelle fest, dass man keine Hangouts on Air per Handy machen kann - Skandal!):



      Eine Korrektur zum Videotext: 9 von 10 der von ZEISS **angesprochenen**  Augenoptiker waren bei einer Nachbefragung mit dem neuen Produkt “Digital-Brillengläser” sehr zufrieden.

      Die digitalen Brillengläser sind für die Arbeit an Bildschirm und Smartphone optimiert und vermeiden Augenermüdung und Verspannungen. sie wirken für den Träger wie ein Einstärkenglas und sind ideal für solche Brillenträger, die noch kein Gleitsichtglas benötigen.

      Interview mit Marc Hoenke (das aus rätselhaften Gründen ohne Ton ist, wir gucken ob sich das behebt bzw machen es neu …):



      Interview mit Dr. Ulrich Faisst von ZEISS (Group Sales Support/ Customer Realtions Excellence):


      Und ein paar blödelnde Blogger im Zuckerrausch beim Wrap Up (mit Alexandra Rittner und dem Blogger-Relations-Koordinator für achtung!  Thorsten Ulmer - incl. Big Thanks an achtung! und die ganzen Supporteinheiten (flogo hatten wir noch vergessen, die die regengebeutelten und fliegenden Schaumlogos bereitstellten…):



      Sowohl gestern Abend beim gemeinsamen Essen als auch Heute konnte ich viel interessantes über das Augengläserbusiness lernen. (Zitat: “Wer reich werden will, sollte keine Brillengläser herstellen.”) Über Marktanteile, Qualitätsunterschiede, darüber wie Augenoptiker ticken, über Gleitsicht vs. andere Spezialgläser (wie die Digitalgläser), darüber, wie ZEISS nach dem Krieg in Oberkochen und Aalen landete, wir schwer Social Media in Konzernstrukturen ist (und wie es trotzdem super klappen kann), wie B2B-Content-Marketing eine Endkundenausrichtung haben und so weiter. Je tiefer man in Geschäftsmodelle hineinschaut, desto spannender wird das Ganze.

      Disclosure: Ich wurde von der Orga des Events für meinen Aufwand kompensiert. Inhalte o.ä. waren nicht abgesprochen.
      Ich werde das hier sicher noch mit ein paar Tweets bzw Fotos updaten.

      Folgende 2 Bilder: 
      achtung!/Salesforce Pressekit


      Der Bus:


      Der Megacupcake:




    • Wie postet man öffentliche Links bei XING? (XING-Tipps)
      Beiträge zu XING hier im Weblog. Frage:
      Wie postet man öffentliche Links bei XING?

      Antwort:
      Das ist nicht so einfach zu beantworten, denn es hängt von einigen Einstellungen und Faktoren ab.


      - Gesharte Links bei XING kann nur sehen, wer in XING angemeldet ist. Insofern könnte man auf obige Frage antworten: gar nicht.
      - Zudem werden Links in den Startseitenaktivitäten nur unter zwei Bedingungen angezeigt
      a) Posts in (öffentlichen) XING-Gruppen sehen (meine Kontakte und) die MItglieder der Gruppe.
      b) Links von mir sehen in den Startseitenaktivitäten nur meine Kontkakte ODER Leute, die den Tab “Aktivitäten” in meinem Profil besuchen
      c) WENN dieser Tab über Zahnrad/Privatsphäre zum öffentlichen Lesen freigeschaltet ist (was ich empfehle)

      - In Gruppenbeiträgen gesharte Links sind öffentlich zugänglich, wenn die Gruppe öffentlich lesbar ist (”Lesen: alle.”)

      - In Aktivitätskommentaren lesbar sind Links für all jene, die auch die Aktivitätsnachricht sehen bzw. sehen können. Aktiv angezeigt wird der Kommentar allen, die mit der Aktivitätsnachricht interagiert haben.

      Links sind außerdem via XING-Status nach Twitter und Facebook teilbar.

      Bei Twitter sind sie für alle sichtbar, die auch den Twitteraccount sehen können (Standard: öffentlich). Facebook-Posts auf Pages sind immer öffentlich, Posts auf persönlichen Profilen haben die selbe Sichtbarkeit, wie das Profil bzw. wie für die (XING-)Schnittstellen-App bei Facebook eingestellt.


      ***
      Wöchentlich gratis XING-Tipps per E-Mail


      Facebook Kommentare


    • “Ich bin ein Marbacher”: Projekt “Netzliteratur authentisch archivieren und verfügbar machen”
      Im Deutschen Literaturarchiv Marbach - auf der Schillerhöhe etwas nördlich von Stuttgart wird alles gesammelt, was mit deutschsprachiger Literatur zu tun hat. Also beispielsweise Tagebücher und NAchlässe von Autoren, Manuskripte, Briefe etc.

      And I am proud to say:
      Ein paar meiner digitalen Werke sind dort jetzt auch archiviert.

      Und zwar hier & so:

      Das Wiki findet sich unter https://wwik-prod.dla-marbach.de/line/index.php/Hauptseite

      „kwadrant c/y“: https://wwik-prod.dla-marbach.de/line/index.php/Kwadrant_c/y (ein Beitrag zum Zeit-IBM Digital-Literaturwettbewerb 1997
      „noise 99“  https://wwik-prod.dla-marbach.de/line/index.php/Noise_99 (das war ein Auftragswerk für die Migros Kulturstiftung)
      „The Famous Sound of Absolute Wreaders“ https://wwik-prod.dla-marbach.de/line/index.php/The_Famous_Sound_of_Absolute_Wreaders (wenn ich mich dumpf entsinne ein Auftragswerk des ORF)

      Damit, dass das überhaupt so kam, hatte ich auch am Rande zu tun.
      Irgendwann 1999 oder 2000 hatte ich einen Termin in Marbach mit nur 3-4 Personen und man sprach darüber, wie man die Beiträge der IBM-Literaturwettbewerbe sichern könnte. Das gestaltete sich u.a deswegen schwierig, weil nicht nur viele werke mit Skripten arbeiteten, weil die Diskussion in den Foren mit archiviert werden sollte, und weil von dem ganzen Klumpatsch nur noch ein IBM-Band existierte, das auf keiner Hardware mehr lief, weil es das Umgebungssystem nicht nur nicht mehr gab, sondern weil es schon nicht mehr rekonstruierbar war. (Oder keiner das priorisiert hat.)

      Mitte 2008 dann gab es eine 2-tägige Konferenz (auf Einladung ) / bei der?) Deutschen Nationalbibliothek Frankfurt. Jedenfalls saßen da Vertreter aus irgend einem Ministerium (Kultur?), diverse Vertreter von Literaturarchiven in D und A (und CH?) und einige Online-Literatur-Organisatoren, Wissenschaftler und Juristen zwei (halbe?) Tage zusammen und überlegten, wie was wo zu machen sei.

      Was genau rauskam, weiß ich nicht mehr, aber irgendwann trudelten hier Nutzungsrechtsfreigabeformulare per Mail ein, in denen erbeten war, dass ich mich dazu äußere, wie was in Marbach zur Verfügung gestellt werden darf.

      Die Erlaubnis habe ich, soweit ich die Rechte hatte (bei der Digitalausgabe Literaturzeitschrift Wandler konnte ich da z.B. keine Freigabe geben), natürlich gegeben. Und jetzt ist das alles schön digital verfügbar.

      Manchmal dauert es eben etwas länger. Auch bei Digitalprojekten.
    • Google+ kommuniziert Viewzahlen von Profilen

      “863,085 views of Profile and its content” verkündet mein Profil auf G+ heute. Siehe; Oliver Gassner - Google.
      Ich gehe jetzt mal davon aus, dass das kein Aprilscherz ist, auch wenn ich drauf kam weil jemand sogar 11 Millionen Views verzeichnet.

      Also mit einem ‘caveat’ ist diese Zahl dann voll zu versehen.  Wie sehen denn eure Zahlen aus?