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:
    • Zeiss Vision: Ein Brillengläsertest (Teil 1)
      Disclosure:
      “Zeiss Vision”, die Brillengläser-Sparte der Carl Zeiss AG stellt mir kostenlos eine Brille mit Gleitsicht-Individualgläsern zur Verfügung.
      Ich erhalte für diese Aktion selbst keine weitere Vergütung von Zeiss und es gibt keinerlei Absprachen über Art, Umfang und Tonalität meiner Thematisierung.
      ***
      So, gestern ist etwas gestartet, dessen Idee bei der Zeiss-Salesforce-Aktion geboren wurde: Ich steige von meiner “Gleitsicht-Discounterbrille” (meine erste Gleitsicht) auf eine Hightechbrille von Zeiss Vision um. also auf eine Gleitsicht-Brille mit Zeigssgläsern.

      Das Kommunikationsproblem ist spannend: Jeder, der eine Brille kauft, sucht zuerst den Rahmen aus. das ist irgendwie das wichtigste. Dasjenige aber, was am Produkt eigentlich das Wesentliche ist -und auch, jedenfalls bei mir, den größten Teil der Kosten ausmacht-, rückt in den Hintergrund: die Gläser.

      Klar, die Refraktionswerte müssen stimmen, man muss damit gut sehen können. aber macht man sich wirklich Gedanken über die Qualität dessen, wodurch man die Welt sieht? Unsere Augen sind nicht nur eins unserer wichtigeren Sinnesorgane, kürzlich habe ich sogar gelernt, dass sich das Hirn sozusagen als “Ausbuchtung unseres Nervensystems in Augennähe” entwickelt hat. Was wir sehen, wie wir sehen, wie gut wir sehen und ob uns nach einem halben Tag “Starren” schon der Schädel brummt: Das sollte uns nicht egal sein. Und wenn ich das, was heute an Brillengläsern möglich ist, mit dem vergleiche, was meine erste Brille, die ich als Drittklässler trug, so “konnte”, das ist schon wild.
      “Früher sind die Träger von Gleitsichtbrillen an die Wand gerannt.” sagte die Optikerin, bei der ich gestern war. Und eine meiner Augenärztinnen sagte zur Studienzeit - also deutlich vor der Gleitsicht-Zone: “Sie tragen da keine Brille. Sie tragen ein optisches Hochleistungsinstrument.” - und ermutigte mich, zu einem “ordentlichen Optiker” zu gehen.
      Als ich vor eineinhalb Jahren meine Discounterbrille abholte (ja, es war ein Eröffnungsgangebot und ich MUSSTE… und nein, ich sag nicht, welche Kette) hat jedenfalls bei einer einer beiden Brillen - ich hatte zusätzlich zur Gleitsicht noch eine Sportbrille besorgt - an einem Auge die Achse nicht gestimmt. (Zuerst deutete man an, das sei wohl das Ungewohnte der Gleitsicht…) Also nochmal neu.
      Und wie ich im Video erzähle: An sich sind alle Brillengläser von ihren Herstellern “unsichtbar” graviert, damit man weiß, was man da vor sich hat. Die Brillengläser, die ich da aktuell drin habe, waren auch eher “Topklasse” in Relation zum Restangebot. Aber die Gläser sind nicht graviert, und so wird man kaum erkennen können, was wirklich in der Brille eingesetzt wurde. Interessant oder? Bei Augentropfen müssen die Inhaltsstoffe angegeben sein; Brillengläser aber bleiben ungraviert beim Discounter “unter dem Radar”. Nicht verbraucherfreundlich.

      Das folgende Video ist teilweise eher aus der Hüfte geschossen. Ich hätte wohl doch eine weitere Kameraperson mitbringen sollen. Ich denke aber, es vermittelt einen ganz guten Eindruck, was gestern so ablief und wo sich Qualitätsunterschiede finden.

      Im Video erzähle ich auch noch das eine oder andere mehr: Zeiss Vision: Ein Brillengläsertest (Teil 1)
    • Biete-Kompetenzen elegant sortieren (Video, XING-Tipp)
      Beiträge zu XING hier im Weblog. XING-Tipp: Biete Kompetenzen elegant sortieren - YouTube:
    • Netzwerken vs. Akquirieren
      Beiträge zu XING hier im Weblog. Intro

      Die folgenden Äußerungen waren durch XING veranlasst. Sie gelten natürlich homolog für alle Netzwerke, sind aber an sich nur bei Businessnetzwerken relevant. Linkedin fehlen z.B. die Biete/Suche-Felder (da gibt es nur ‘Skills’), da wird man feinfühliger tasten müssen,w as ein Kontaktgrund sein kann. Linkedin sagt an sich: “Ausschließlich persönliche Bekanntschaft.” BÄM!

      Networking vs. Akquirieren

      Ja. XING ist eine Businessplattform. Aber eine für Business-Networking. XING ist keine “Kundenjagdzone mit unbeschränkter Feuererlaubnis”.

      Ich beschreibe Networking immer so:

      “Man lernt nette Leute kennen, erklärt sich, was man gegenseitig tut und erinnert sich an die Person, wenn man um eine Empfehlung gebeten wird.”

      Das ist auch mit dem XING-Motto gemeint: “Persönliches steht im Vordergrund, Geschäftliches ergibt sich.”

      Akquise wäre:
      “Man lernt nette Leute kennen und bearbeitet sie so lange, bis sie kaufen.”

      Ich denke, dass jeder subjektiv sagen kann, in welcher Rolle er sich besser fühlt.

      Wer mit Verkaufszielen auf Networkingevents geht, der/die ist falsch.
      Wer Networking mit Akquise verwechselt, mit dem möchte nach kurzer Zeit keiner mehr reden.

      Es ist nicht überraschend, dass einige sehr verkaufsorientierte Branchen oder Marketingsysteme hier besonders negativ auffallen. deswegen z.B. untersagt XING Aktivitäten im bereich MLM (Multi Level Marketing), Network-Marketing o.ä. komplett. Die Erfahrung hat einfach gezeigt, dass solche Systeme enorm viel unnütze Kommunikation erzeugen. Und die mag niemand.

      Und wie ist es richtig?
      - Man trifft sich
      - Man hat Visitenkarten dabei
      - die wirft man nicht in die Runde sondern tauscht sie mit Gesprächspartnern aus (Platzwechsel ist nach einer Weile vollkommen OK)
      - mit einem “und was machen Sie” leitet man nach einer kurzen Vorstellung, bei der man klar sagt, was man tut, den Austausch ein

      (
      Anektote zur Hebung der Networkingmoral (wer erkennt die Anspielung?):
      I.
      Bei einem Lunch hatte ich drei der fünf Anwesenden gefragt was sie tun, sie hatten es dem ganzen Tisch erzählt. Dann machte ich eine Pause. Keiner kam auf die Idee, mich oder die anderen beiden zu fragen was sie tun. Ich hab das dann übernommen. Als alle erzählt hatten,w as sie tun, fragte mich immer noch keiner, was ich tue. ich hab es dabei bewenden lassen. aber DAS ist kein Networking. Das ist eine Konsumhaltung.

      II.
      Bei einem anderen Lunch fragte ich eine Neubesucherin, was sie macht. Wir waren nur zu fünft. Die restlichen eineinhalb Stunden dominierte die Dame das GespräCH mit dem was SIE tut. Sie kam nicht auf die IDee, sich nach dem zu erkundigen,w as die anderen tun.
      )
      - wenn und nur wenn jemand signalisiert, dass das, was man da tut, für ihn als Kunden interessant ist, dann kann man sich zu einem AkquisegespräCH treffen. Die Akquise gleich beim Networkingevent zu machen ist in der Regel unpassend, da man sich dadurch ja abkapselt.

      - dem Event folgende Kontaktanfragen sind OK; in der Regel aber nur an Anwwesende

      - dem Event vorangehende Kommunikation ist ok, WENN man konkretes Interesse hat, die betreffende Person zu treffen. In der regel wegen etwas, das diese Person BIETET.

      - Kontaktanfragen und Nachrichten auf XING (bei “Nichtgetroffenen”) sollen sich idR (d.h. es gibt Ausnahmen) auf das Profil der Person und dabei vor allem auf Suche/Biete beziehen.

      Was tun?
      - empfehlen Sie jemand weiter
      - empfehlen Sie etwas auf der Startseite an Ihr Netzwerk oder via Twitter und Facebook weiter
      - interagieren Sie mit Ihren Kontakten auf der Startseite und lernen Sie mehr darüber, was Sie tun
      - Leisten Sie einen eigenen Beitrag in einer (Fach- oder Regional-)Gruppe, der einen Nutzwert für die Lesenden hat.
      - Stellen Sie eine Frage in einer Fach- oder Regionalgruppe
      - Gratulieren Sie Ihren Kontakten zum Geburtstag (dabei jede Werbung oder Bezugnahme auf Business vermeiden!)

      Fragen?
      Ideen?
    • Ingress für iPhone-Nutzer (und andere Tipps für Einsteiger)
      Seit ziemlich früh bin ich Ingress-Spieler. Ich mach viel allein hier im Dorf, ganz selten war ich auch mal bei Events. Spaß macht es trotzdem.
      Ingress? Ein Handyspiel, das man draußen spielt. Ich nenne es auch: “Geeks lüften.” Und: Es kommt in diesen Tagen für iOS raus, deshalb ist es prima, dass das Notizblog eine kleine Handreichung bereitstellt:

      Ingress für iPhone-Nutzer

      Darüberhinaus empfiehlt sich die Suche nach Ingress (ggf. ergänzt um den Namen der eigenen Region oder Stadt) bei Google+ (da sind alle) und die Lektüre von “How not to suck at Ingress” von Kris Köhntopp.

      Und denkt dran: The world is not what it seems ;)
    • Selbstmarketing im Social Web: Webinale 2014 - Video-Interview mit Oliver Gassner - YouTube
      Selbstmarketing im Social Web: Webinale 2014 Interview mit Oliver Gassner - YouTube:

      Und da drüben: Eine Kurzfassung des Selbstmarketing-Vortrags inkl Audio.