02. Jul 2013

TYPO3 Developer Days 2013

Gravatar: Berit Hlubek
TYPO3 Developer Days 2013 in Hamburg

Diese Woche starten in Hamburg die 8. TYPO3 Developer Days unter dem Motto „Getting together to make it happen!“.

Ab Donnerstag treffen sich Entwickler des TYPO3 Universums zu der jährlichen Entwickler-Veranstaltung. Das Ziel der Developer Days besteht darin die verschiedenen Systeme und Extensions weiter zu entwickeln und auch Neulingen einen Einstieg in die verschiedenen Teams zu geben. Bereits in den letzten Jahren haben sich die Developer-Days von einem vortragsbasierten Ansatz zu Workshops unter dem Motto „Getting things done“ entwickelt. In diesem Jahr wird es vorerst nur ein Tutorial geben, alle weiteren Time-Slots werden mit Workshops gefüllt.

Wie jedes Jahr sind natürlich auch wir wieder mit von der Partie. Aus unserem Team werden Christopher Hlubek, Kai Lassen, Christoph Lehmann, Lars Lehners und ich dabei sein. networkteam unterstützt die Developer Days dieses Jahr auch tatkräftig als Sponsor der Coding Night.

Als Mitglieder des Neos-Teams sind Christopher und ich bereits seit Montag in Hamburg und treffen uns dort mit anderen Mitgliedern, um an Neos zu arbeiten. Außerdem werden wir bei den Workshops zu Neos dabei sein, insbesondere bei den Contribution-Workshops. Diese haben das Ziel Interessierten eine Möglichkeit zu geben in die Arbeit des Teams einzusteigen und an der Entwicklung von TYPO3 Neos oder TYPO3 Flow mitzuhelfen.

Wir freuen uns auf viele interessante Workshops, Gespräche und Diskussionen bei diesem TYPO3 Event.

Schedule der TYPO3 Developer Days

24. Jun 2013

Responsive Webdesign

Gravatar: Laura Weiss

Mobile Endgeräte werden immer wichtiger in unserem Alltag. Große Monitore sind auf unseren Schreibtischen auch bereits die Norm. Dieser technologische Fortschritt hinterlässt seine Spuren bei der Entwicklung von Webseiten. Daher werden Webseiten nun immer häufiger "responsive" aufgebaut.

Responsive Webdesign stellt eine aktuelle Technik dar, wobei mit Hilfe von HTML5 und CSS3 Media-Queries eine Optimierung des Layouts und der Inhalte auf Desktop PC, Tablet und Smartphone vorgenommen werden kann.

Media Queries

Media Queries sind dabei eine wesentliche Voraussetzung, welche die Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Tablet oder Smartphone. Erfahrungsgemäß entsteht für die Entwicklung eines Responsive Designs zwar ein Mehraufwand in der Konzeption und Gestaltung, der bei der technischen Umsetzung aber wieder eingespart werden kann.

Standard Auflösungen der verschiedenen Geräte sind:

  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Computer-Desktop: 1024px+

Frameworks

Viele Frameworks bieten mehr oder weniger unkompliziert nutzbare Komponenten für die Gestaltung responsiver Webseiten. Derzeit setzen wir als Framework Bootstrap ein, welches von Twitter entwickelt wurde. Bootstrap basiert auf einem 12-spaltigen Grid-System mit einer Default-Breite von 940px. Der Kern des Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten. Bootstrap ist sehr umfangreich und enthält sehr viele Oberflächenelemente, Navigationselemente, Labels und Hinweisnachrichten.

Auch aus SEO Sicht sollen Webseiten die eine schlechte mobile Ansicht liefern, laut Google, bald im Index nach unten rutschen. Um so wichtiger ist es also, Webseiten immer auf dem neuesten Stand zu halten und Responsive Webdesign zu nutzen. So wird ermöglicht, dass alle Inhalte auf allen Bildschirmen ideal dargestellt werden.

Auch wir haben Erfahrungen in diesem Bereich und bereits einige Seiten in Responsive Webdesign umgesetzt. Weitere werden in nächster Zeit folgen.

Link: Offizieller Google Beitrag zum Ranking von mobilen Webseiten

19. Jun 2013

Transparente Hintergründe von Schriften

Gravatar: Christian Lange

Um beispielsweise Überschriften etwas mehr Individualität zu geben, ist man immer auf der Suche nach neuen CSS-Styles, mit deren Hilfe man diese noch ansprechender gestalten kann. Über Schriftfarben mit Verläufen, Rahmen und Schatten kann man mit einem schönen Schriftschnitt schon Einiges anstellen. Was ist aber, wenn man diese gerne mit einer fotorealistischen Textur oder den Effekt einer ausgestanzten Schrift darstellen möchte?

Lösung für Webkit-Browser

Für Webkit-Browser gibt es hierfür eine proprietäre Eigenschaft mit deren Hilfe man sehr einfach einer Schrift einen entsprechenden Hintergrund zuweisen kann:

  1. background: url(image.png) repeat 0px 0px, #ffffff;
  2. -webkit-background-clip: text;
  3. -webkit-text-fill-color: transparent;
Transparente Überschrift mit Hintergrundbild
Original
Fallback für Transparente Überschrift mit Hintergrundbild
Fallback

Dadurch erhält man z.B. eine transparente Überschrift im Chrome. Durch eine kleine Verschachtelung kann man sogar einen relativ guten Fallback erzeugen, der dann allerdings invertiert ist:

  1. h1 {
  2. font-size: 120px;
  3. padding: 50px;
  4. margin: 0;
  5. background: #ffffff;
  6. color: #ffffff;
  7. }
  8. h1 span {
  9. background: url(image.png) repeat 0px 0px, #ffffff;
  10. -webkit-background-clip: text;
  11. -webkit-text-fill-color: transparent;
  12. }

JavaScript-basierte Cross-Browser Lösung

Dadurch, dass einem aber nicht wirklich geholfen ist, wenn ausschließlich in Webkit-Browsern die gewünschte Darstellung angezeigt wird, kann man JavaScript zur Hilfe ziehen. Benötigt wird nur ein kurzes Skript welches man zusammen mit dem Javascript-Framework jQuery in den Kopf der Seite einbindet:

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  2. <script src="https://rawgithub.com/myadzel/patternizer/master/jquery.patternizer.js"></script>

Das vorhandene <span>-Tag erweitert man dann mit einer speziellen Klasse und dem gewünschten Hintergrundbild im data-pattern Attribut:

  1. <h1><span class="background-clip" data-pattern="image.png">TEST</span></h1>

Am Ende der Seite kann die Ersetzung über das folgende kleine Snippet gestartet werden, welches alle Pattern der Elemente mit der Klasse background-clip ersetzt:

<script>
jQuery(function ($) {
	$(".background-clip").patternizer();
});
</script>

Somit kann man auf die CSS-Definition von h1 span verzichten. Eine Fallbackfarbe wird dann dem h1 zugewiesen, die dem gewünschten Hintergrund am ähnlichsten kommt, so dass ohne JavaScript die Überschrift trotzdem lesbar bleibt.

Alternative Hintergrund-Transparenz z.B. für eine Navigation

Transparente Navigation

Der Nachteil an dieser Methode ist es allerdings, dass der Hintergrund in der Schrift immer gleich positioniert ist. Daher eignet sich diese Methode eigentlich ausschließlich für Patterns oder transparente Überschriften. Möchte man hingegen die Punkte in einer Navigation transparent darstellen, eignet sich diese Methode nicht. Eine schöne Alternative ist das folgende Navigations-Beispiel mit transparenten Listenpunkten:

Hier wirken die einzelnen Listen Punkte, als ob sie einen transparenten Hintergrund hätten. Was über die Vergabe von Hintergrundgrafiken pro Listenpunkt oder durch die Wiederverwendung des Haupt-Hintergrundbildes auf Anhieb plausibel erscheint, ist in der Praxis so gut wie unmöglich, da die Verschiebung der Positionierung per JavaScript berechnet oder durch feste Werte und Abstände fest definiert werden müsste. Dies ist auf einem Fullscreen Hintergrundbild welches mit wächst jedoch nahezu unmöglich.

Der Trick hierbei ist recht einfach: Nicht die Listenpunkte werden transparent dargestellt, sondern der Rahmen außen herum wird eingefärbt. Das ist aufgrund des derzeit angesagten Flat Designs zum Glück auch recht einfach möglich, da keine Kanten durch Verläufe oder Schatten entstehen.

Das im Screenshot gezeigte Beispiel besteht ausschließlich aus einer einfachen Liste, dessen Listenpunkte mit <span>-Tags erweitert wurden. Zugleich dienen diese der Erzeugung von Pausen bei älteren Screenreadern und dienen der Barrierefreiheit:

  1. <li class="active"><a href="#">Aktuelles<span>.</span></a></li>
  2. <li><a href="#">Infos<span>.</span></a></li>
  3. <li><a href="#">Anmeldung<span>.</span></a></li>
  4. <li><a href="#">Termine<span>.</span></a></li>
  5. <li><a href="#">Bilder<span>.</span></a></li>
  6. <li><a href="#">Videos<span>.</span></a></li>
  7. <li><a href="#">Schulen<span>.</span></a></li>
  8. <li><a href="#">Partner<span>.</span></a></li>
  9. <li><a href="#">Kontakt<span>.</span></a></li>
  10. </ul>

Das <ul>-Tag erhält dabei die Styles für den äußeren weißen Rahmen und die <li>-Elemente eine weiße Border die als Abstände zwischen den Listenpunkten dienen. Der eigentliche Effekt wird durch die <span>-Tags erreicht, die eine viel zu großen Breite, die gleiche Höhe wie die Listenelemente und eine absolute Positionierung erhalten, die dafür sorgt, dass sich der weiße Streifen immer am Ende des jeweiligen Linktextes befindet.

  1. ul {
  2. margin: 30px 0 0 10%;
  3. padding: 0;
  4. list-style: none;
  5. overflow: hidden;
  6.  
  7. width: 260px;
  8. float: left;
  9. border: 10px solid #ffffff;
  10. border-bottom: 30px solid #ffffff;
  11. }
  12.  
  13. li {
  14. clear: both;
  15. float: left;
  16. width: 100%;
  17. position: relative;
  18.  
  19. font-size: 20px;
  20. height: 1.3em;
  21. line-height: 1.3em;
  22. white-space: nowrap;
  23.  
  24. margin: 0;
  25. padding: 0;
  26. list-style: none;
  27.  
  28. color: #ffffff;
  29. border-bottom: 7px solid #ffffff;
  30. }
  31.  
  32. li span {
  33. height: 100%;
  34. width: 1000px;
  35. position: absolute;
  36. right: -1000px;
  37. top: 0px;
  38. background: #ffffff;
  39. display: block;
  40. overflow: hidden;
  41. text-indent: -9999px;
  42. }
  43.  
  44. li a {
  45. float: left;
  46. height: 100%;
  47.  
  48. position: relative;
  49. padding: 0px 10px 0px 7px;
  50. }

Durch die relativen Größenangaben bleiben die gezeichneten Rahmen und Flächen auch bei Anpassung der Schriftgröße, über font-size oder auch direkt in den Browser-Eigenschaften, immer noch korrekt. Gerade bei sich wechselnden Hintergründen oder durch Veränderung der Browsergröße bei vollflächigen Hintergrundbildern kommt der Transparent-Effekt sehr gut zur Geltung.

31. Mai 2013

Die neue Team Struktur für Neos und Flow

Gravatar: Berit Hlubek
CMS TYPO3 Neos

Vor zwei Wochen fand in Karlsruhe ein TYPO3 Neos Code Sprint statt, bei welchem nicht nur an den offenen Features gearbeitet wurde, sondern auch zu verschiedenen Themen Diskussionen stattfanden.

Eines dieser Diskussions-Themen beschäftigte sich mit der Team-Struktur, denn auch das TYPO3 CMS Team hat erst kürzlich eine Überarbeitung seiner Team-Struktur bekannt gegeben. Dies war im Falle des CMS dringend nötig, denn seit den Anfängen des CMS gab es keine Anpassungen an neue Bedingungen wie eine gewachsene Team-Größe oder verstärkte Unterteilung in Unterprojekte für spezifische Teile des TYPO3 Kerns.

Für TYPO3 Neos ist es vor allem wichtig, dass das Team einfacher wachsen kann. Für Interessenten sollte es möglichst einfach sein an Neos oder Flow mitarbeiten zu können und gleichermaßen sollte jeder Beitrag auch als solcher anerkannt werden. Die gesamte Team-Struktur baut hierbei auf gegenseitiges Vertrauen auf, denn jeder aktiv Mitwirkende erhält einige Privilegien (z.B. Merge-Rechte im Git-Repostitory und Zugriff auf die Projekt-Webseite). Weiterhin wird es keine technischen Hürden geben, die sich beispielsweise nach einem gewissen Aktivitäts-Level oder der Art der Beiträge richten. Dadurch kann das Team auf diverse kleinere Unterrollen verzichten und sich auf zwei verschiedene Hauptrollen Contributor und Active Contributor beschränken.

Neben der Mitarbeit an Neos selbst und dem Framework gibt es in einem solchen Team allerdings auch Aufgaben, die in jedem Fall erledigt werden müssen und für die es klare Zuständigkeiten geben sollte. Aus diesem Grund hat das Team beschlossen neben den folgenden Haupt-Rollen auch ein paar weitere Gruppen und Rollen zu definieren.

Contributor

Alles startet mit dem ersten Beitrag (Contribution) zu TYPO3 Neos oder Flow: Jeder Interessierte, der Neos oder Flow mit der eigenen Arbeitsleistung voranbringen möchte, ist eingeladen zu helfen. Wobei dies nicht zwangsweise in Form von Code geschehen muss: neben der Programmierung gibt es viele andere Bereiche, wie etwa Design, die offiziellen Webseiten und nicht zuletzt die Dokumentation der Systeme.

Active Contributor

Active Contributor ist gewissermaßen der neue Name für die bisherigen Core Team Member. Damit bilden alle Active Contributor zusammen das Neos Team.

Leistet ein Contributor regelmäßig qualitativ hochwertige Beiträge, beschließen die bisher aktiven Mitwirkenden gemeinsam, dass der Contributor eingeladen wird ein Active Contributor zu werden. Mit dieser Rolle erhält man zum Beispiel volle Merge-Rechte für das Git Repository und Zugriff auf die Infrastruktur für die Flow und Neos Entwicklung. Es wird aber auch erwartet, dass man konstant mitarbeitet und sich an aufgestellte Regeln, wie den Code of Conduct des TYPO3-Projekts und die Werte des Neos Teams hält.

Neben diesen beiden generellen Rollen gibt es zudem ein paar besondere Gruppen und Rollen innerhalb des Teams:

Coordination Group

Diese Gruppe ist für die Leitung und Koordination wichtiger Aufgaben zuständig und besteht wiederum aus einigen Active Contributors, die festgelegte Zuständigkeiten erhalten. Zunächst wurden die folgenden Rollen definiert, die sich aber im Laufe der Zeit ändern können:

  • Project Leader: Leitet das Projekt und die Vision und hat den Blick auf das große Ganze
  • Quality Manager: Stellt sicher, dass die Qualitäts-Standards des Projektes eingehalten werden und stellt hierzu ein Team von „Quality Guardian“ zusammen
  • Community Contact: Ist der Ansprechpartner für Anwender und vorhandene oder neue Contributor
  • Public Relations Manager: Ist der Kontakt-Punkt zum Marketing Team und der Presse , stellt Neuigkeiten bereit und betreut die Produkt-Webseiten
  • Treasurer: Ist der sogenannte Budget-Owner (verwaltet also das vorhandene Budget) und kümmert sich um Fund-Raising für das Projekt

Quality Guardian

Diese Gruppe setzt sich aus einigen Active Contributorn zusammen, deren Aufgabe darin besteht Konsistenz und Stabilität des Projektes zu gewährleisten. Enthält eine Anpassung beispielsweise nicht-abwärtskompatible Änderungen oder neue Konfigurations-Optionen ist es Aufgabe dieser Gruppe zu klären, für welchen Release diese Änderungen passend sind.

Release Manager

Der Release Manager organisiert jegliche Arbeit bezogen auf einen speziellen Release eines Produkts und kümmert sich auch um die darauf bezogene Kommunikation. Den jeweiligen Release Manager bestimmen die Active Contributor gemeinsam mit dem Quality Manager.

Package Maintainer

Sowohl Neos als auch Flow bestehen aus vielen verschiedenen Paketen und neben dem jeweiligen Kern des System gibt es für jedes Paket einen Zuständigen der sich leitend um die Weiterentwicklung dieses Paketes kümmert. Wer erstmals etwas zu einem dieser Pakete beisteuern möchte sollte sich mit dem jeweiligen Package Maintainer absprechen.

Bislang habe ich viel darüber geschrieben, dass diese Team Struktur für Neos und Flow gleichermaßen gilt. Bis auf Weiteres wird dies auch der Fall sein. Bislang gab es ein Team für beide Systeme und um es nicht unnötig kompliziert zu machen, wird dies bis zum ersten stabilen Release von Neos auch so bleiben. Alle Rollen und Gruppen gelten momentan also gleichermaßen für Neos und Flow.

06. Mai 2013

Inspiring Flow 2013

Gravatar: Berit Hlubek
Inspiring Flow Logo

Christopher Hlubek auf der Inspiring Flow
Quelle: Flickr: Pankaj Lele
Die Inspiring Flow Torte
Die Inspiring Flow Torte

Vor zwei Wochen fand in Kolbermoor (bei Rosenheim, München) die Inspiring Flow Konferenz (2012 noch F3X) statt und hat zum zweiten Mal Interessierte rund um das PHP Framework TYPO3 Flow in den Süden Deutschlands gelockt.

Die größten Änderungen der Konferenz vom letzten Jahr zu 2013 bestanden in der Internationalisierung der Konferenz und der Verlängerung auf zwei Tage. Aufgrund der großen Nachfrage wurden die Talks dieses Jahr nicht mehr auf Deutsch sondern auf Englisch gehalten und konnten so ein internationales Publikum ansprechen. Dass das Interesse an Flow groß ist und das Know-How von 2012 zu 2013 einen großen Sprung gemacht hat, konnte man vor allem daran merken, dass trotz der doppelten Anzahl an Talks alle Slots mit unterschiedlichen Themen rund um das Framework gefüllt werden konnten.

Als TYPO3 Flow Agentur waren natürlich auch wir wieder mit von der Partie und Christopher hat nicht nur selber einen Talk zu dem Thema Single Sign-On gehalten sondern damit auch den zweiten Platz beim Voting belegt. Platz eins ging an den Gast und Keynote-Speaker des zweiten Tages: Stefan Priebsch. Durchaus provokant hat er sich mit dem Thema MVC im Web beschäftigt und die Zuhörer nicht nur durch eine spontane Schauspiel-Einlage einiger Teilnehmer gefesselt.

Neben Talks über ergänzende Techniken zu dem Framework (NoSQL mit CouchDB, Ember.js oder TypoScript und EEL) gab es in diesem Jahr auch einige Praxis-bezogene Talks in welchen Flow im Live-Einsatz gezeigt wurde. Dazu zählten zum Beispiel das beeindruckende Projekt medialib.tv bei dem Dominique Feyer ein Video on Demand Portal basierend auf Flow und TYPO3 Neos entwickelt hat, Talks zum Thema Deployment (z.B. mit TYPO3 Surf, Git und Jenkins) oder die Integration von Solr. Christophers Talk lief unter dem Titel „A fully integrated single sign-on solution with TYPO3 Flow“ und gab einen Einblick in die Single Sign-On Lösung die wir in Zusammenarbeit mit Robert Lemke für einen Kunden entwickelt haben.

Auch das Rahmenprogramm der Konferenz konnte, wie bereits im letzten Jahr, überzeugen. Das hervorragende Catering während der Konferenz und das Flying Buffet des Social Events machten das Event zusammen mit der „traditionellen“ Flow-Torte zu einer rundum gelungenen Veranstaltung.

Wir werden im nächsten Jahr auf jeden Fall wieder dabei sein und freuen uns auf noch mehr neue Erfahrungen und Erfahrungsaustausch nach einem weiteren Jahr Flow Entwicklung.

Alle Talks wurden übrigens aufgezeichnet und werden nach dem finalen Schnitt zusammen mit Bildern und Slides der Konferenz auf der Inspiring Flow Webseite veröffentlicht.