Zur Zeit wird gefiltert nach:Entwicklung
Filter zurücksetzen

06. Mär 2014

Neuer Entwickler an Bord

Gravatar: Dominik Piekarski
Dominik Piekarski

Captain Picard bei den Entwicklern

Nicht der selbe Captain wie aus der Serie Raumschiff Enterprise bekannt, aber phonetisch ähnlich: Piekarski. Seit Sternzeit 15102013 unterstütze ich mit meinen 32 Jahren Lebenserfahrung die junge networkteam Crew in Sachen Programmierung.

Dabei nehme ich den Posten des PHP Entwicklers ein und kontrolliere auch umfangreiche Subsysteme wie SQL, JavaScript und HTML.

In Kiel wohne ich seit ungefähr 2006 und habe davor in Berlin gelebt. Mich haben die unendlichen Weiten der Ostsee und die unendlichen Möglichkeiten des Kitesurfens nach Kiel gezogen. Hier habe ich zunächst als Kitesurflehrer gearbeitet, mich anschließend für ein Studium an der FH Kiel entschieden und bin, nach einigen Zwischenstopps, letzten Endes bei networkteam gelandet. Hier freue ich mich auf die gemeinsame Zukunft und hoffe auf umfangreiche und anspruchsvolle Projekte.

08. Jan 2014

Der #networktree

Gravatar: Sören Rohweder

Wir bedanken uns für die zahlreichen Ideen, mit denen wir unseren Weihnachtsbaum schmücken konnten und möchten einen kurzen Einblick in die Technik dahinter geben.

Die Technik hinter dem Weihnachtsbaum

Der networkteam networktree

So ein Weihnachtsbaum reagiert nicht von selbst auf Tweets aus dem Netz. So gab es auch hier Technik im Hintergrund, die dies ermöglichte. In diesem Fall war es eine Sammlung von mehreren Techniken die das Spiel möglich machten.

Erst einmal müssen die relevanten Tweets, aus den über 500 Milliarden Tweets die jeden Tag gesendet werden, herausgefiltert werden. Dies erfolgt durch eine nodejs Anwendung die mittels der Bibliothek nTwitter auf den Datenstrom von Twitter gelauscht hat. Immer wenn ein Tweet mit dem Hashtag #networktree gesendet wurde, informierte die Streaming API von Twitter unsere Anwendung über das Auftreten eines Tweets. Dieser wurde dann von der Anwendung weitergehend analysiert und für den Fall, dass es sich um einen für den Weihnachtsbaum relevanten Tweet handelt, wurde diese Information über unser Firmennetzwerk weiter gereicht.

Die Information wurde dann von einer Anwendung auf einem Arduino empfangen. Die Aufgabe des Arduinos war es das Signal, das ein Tweet gesendet wurde, aufzunehmen und daraufhin die Lichterkette zum Pulsieren zu bringen. Über ein PWM (Pulsweitenmodulation) Signal wurde dann die LED-Lichterkette in kurzen Intervallen An- bzw. Ausgeschaltet so das der Eindruck entsteht, dass die LEDs mal heller und mal dunkler leuchteten.  

Das Bild des Weichnachtsbaumes, welches als Livestrem zu sehen war, wurde mit einem iPhone aufgenommen und über WebSockets an einen Proxy (in Google Go geschrieben) weitergeleitet der dann den Stream für jeden Besucher kopierte und zur Verfügung stellte. Die Anzeige des Videos im Browser erfolgte über ein HTML5 Canvas-Element mit einem in JavaScript geschriebenen MPEG-Encoder.

Alles in allem hatten an diesem Projekt alle Entwickler und Grafiker viel Spaß beim Aufhängen der Ideen am Baum und bei der Entwicklung der Anwendung.

Vielleicht haben Sie ja in diesem Jahr auch eine etwas andere Idee für eine Weihnachtsaktion die aus dem Netz heraus ins RealLife übergeht.

Ein gesundes und erfolgreiches 2014 wünscht networkteam.

23. Okt 2013

Fronteers 2013

Gravatar: Berit Hlubek
  • Fronteers-Location: Pathé Tuschinski von Außen
  • Fronteers-Location: Pathé Tuschinski von Innen

Die Fronteers Konferenz steht bereits seit einigen Jahren auf meiner Konferenz-Wunschliste, doch leider hatte sich diese in den letzten Jahren regelmäßig mit der TYPO3 Konferenz T3CON überschnitten. Als aktives Mitglied der TYPO3 Community und Mitarbeiterin einer TYPO3 Agentur hatte ich mich daher immer gegen die Fronteers entschieden. Dieses Jahr passte der Termin aber endlich und Christopher Hlubek und ich konnten die Konferenz zum ersten Mal besuchen.

Die Fronteers ist eine englisch-sprachige Konferenz fokussiert auf Frontend-Entwicklung und Web-Technologien, organisiert von dem gleichnamigen holländischen Verein. Bereits zum sechsten Mal fand sie dieses Jahr statt und wie immer im Pathé Tuschinsky, einem historischen Theater mitten in Amsterdam. Die Konferenz zeichnet sich nicht nur durch namhafte internationale Speaker aus, sondern ebenso durch ein ausgereiftes Konzept. Über beide Konferenztage werden die Teilnehmer (dieses Jahr ca. 550) durch den Ceremony Master durch die Veranstaltung geleitet. In diesem Jahr wurde diese Aufgabe von Paul Irish (Google Chrome Developer Advocate) übernommen. Neben der Begrüßung hat er jeden Speaker mit kurzer Beschreibung angekündigt und während der Vorträge alle auftretenden Fragen gesammelt (die Teilnehmer sollten über Twitter Fragen zum Talk posten). Als Abschluss jedes Talks gab es eine kurze Q&A Session in welcher Paul Irish die aufgekommenen Fragen zusammengefasst an den jeweiligen Speaker gerichtet hat. Ein aus meiner Sicht sehr gelungenes Konzept, bei welchem zum einen gesammelt alle relevanten Fragen geklärt werden und zum anderen die kurze Überbrückungszeit beim Wechsel der Speaker sinnvoll genutzt wird.

Im Folgenden gebe ich einen kurzen Überblick über einige Themen und Talks.

Performance

Eines der großen Themen der Konferenz war die Performance von Webseiten aus Frontend-Sicht. Paul Lewis (Google Chrome Developer Relations Team) hat hierzu einen Überblick gegeben, indem er gezeigt hat wie genau der Browser jeden Pixel einer Webseite rendert. So wurde zum Beispiel klar, dass das Ändern einer Klasse auf dem body-Tag ein komplettes Neu-Zeichnen der Webseite zur Folge hat, weil sich theoretisch jedes Element verändert haben könnte. Klassen sollten also immer möglichst dicht am zu verändernden Element gesetzt werden.

Auch bei Steve Souders‘ (Google Head Performance Engineer) Talk „Pre-Browsing“ ging es um das Thema Performance, allerdings von einem völlig anderen Gesichtspunkt ausgehend. Auf Basis der Rendering-Abfolge des Browsers (1. Prerender und Prefetch, 2. Transitions, 3. Preloading) ist er auf die verschiedenen Möglichkeiten eingegangen, wie ein Browser die Ressourcen einer Website möglichst schnell laden kann. Dazu gehört zum Beispiel das asynchrone Ausliefern von JavaScript, damit nicht das Laden der Webseite von den Skripten verzögert wird. In diesem Fall entfällt dann auch der Umweg Skripte im Footer einzubinden, anstatt im Header „Scripts in the bottom are so 2007 ;)“. Eine weitere Möglichkeit besteht darin neue Techniken wie Prerender und Prefetch zu nutzen. Darüber kann man den Browser zum Beispiel dazu bringen auf Seite X bereits Seite Y vorzuladen, wenn diese Seite zum Beispiel in den meisten Fällen als Folgeseite der Benutzer aufgerufen wird oder der Benutzer mit der Maus über einen Link hovert.

Frontend-Techniken der Zukunft

Natürlich ist ein Ziel einer Konferenz wie der Fronteers auch der Blick in die Zukunft. Hierzu hat Zoe Mickley Gillenwater (Web accessibility specialist at AT&T) einen Einblick in die aktualisierte Version der Flexbox-Eigenschaft gegeben.  Mit Flexbox können Layouts weitaus flexibler umgesetzt werden als mit Floatings. Das Besondere daran ist, dass darüber auch Einheiten gemischt werden können und Definitionen im Verhältnis zur Gesamtbreite möglich sind. Beispielsweise kann man ein Label neben einem Input-Feld ausrichten und dem Input-Feld über eine einfache Anweisung die Regel mitgeben, dass es die volle Restbreite neben dem Label einnehmen soll. Eine weitere Einsatzmöglichkeit betrifft die Ausrichtung der Höhe von nebeneinander positionierten Elementen. Bislang war es nur über JavaScript möglich zwei nebeneinander dargestellte Elemente, abhängig von deren Inhalten, in derselben Höhe darzustellen. Die Flexbox-Eigenschaft wird leider noch nicht von allen Browsern unterstützt, aber es ist denkbar dieses Feature als Optimierung für alle modernen Browser einzusetzen und für ältere Browser auf das verbesserte Layout zu verzichten (Progressive enhancement) oder per JavaScript nachzubilden.

Angelina Fabbro (Mozilla Firefox OS) hat einen Überblick über den aktuellen Status von Web Components gegeben. Mit der neuen HTML5 Technik ist es möglich HTML Elemente flexibel selber zu definieren und auszugeben.Die Spezifikation befindet sich derzeit noch in Entwicklung, einige Features lassen sich aber jetzt bereits über Polyfills nutzen (z.B. Google Polymer oder Mozilla X-Tag). In der Zukunft ergeben sich mit den Decorators von Templates neue Einsatzmöglichkeiten: für responsive Webseiten  ist es häufig erforderlich, dass Elemente in der mobilen Ansicht in einer anderen Reihenfolge dargestellt werden sollen als in der Desktop-Ansicht. Nicht immer ist dies einfach per CSS möglich, sondern erfordert JavaScript-Manipulationen des DOM. Über Web Components könnte die Darstellung ohne umfangreiche DOM-Manipulation durch CSS und Media Queries gelöst werden. 

Fronteers 2013: Harry Roberts Fazit

Design und Umsetzungsprozess bei modernen Projekten

In letzter Zeit hat sich das Tätigkeits-Feld eines typischen Frontend-Entwicklers stark verändert. Es geht schon lange nicht mehr nur darum ein Design pixelgenau umzusetzen. Mit dieser Thematik hat sich Harry Roberts (Senior UI Developer bei BSkyB) in seinem Talk auseinander gesetzt. So geht es bei der Umsetzung von Designs heute nicht mehr nur darum eine möglichst exakte Abbildung dessen umzusetzen, sondern über Kompromisse den besten Weg zwischen Design, Performance und Usability zu finden. Aber nicht jeder Designer ist glücklich damit, wenn sein Design nicht exakt umgesetzt wird. Eine Möglichkeit hierzu wäre, Designer und Frontend-Entwickler näher zusammen zu bringen und im Rahmen der Umsetzung gemeinsam die besten Wege zu finden.

Responsive Images

Die Anforderung Bilder für responsive Webseiten zu optimieren ist gar nicht mehr so neu, aber dennoch gibt es bislang keine ideale Lösung. Marcos Caceres (Mozilla API designer) ist unter anderem Lead Editor der <picture> Spezifikation innerhalb der „Responsive Images Community Group“ und hat einen Einblick in die bisherigen Lösungswege gegeben. Zusammenfassend kann gesagt werden, dass bisher keine Lösung alle Anforderung abdeckt und eine Standardisierung in Browsern dringend benötigt wird. Aus unserer Sicht ist der Vorschlag „src-N“ ein guter Ansatz im Vergleich zu den bisherigen Entwürfen und Spezifikationen. 

Typeface Design

Es gab gleich zwei gute Vorträge mit ausführlichem Einblick in das Thema Font Erstellung. Lucas de Groot (LucasFonts) ist wohl einer der bekanntesten Font-Designer. Er hat in seinem Talk eindrucksvoll gezeigt wie komplex das Erstellen eines guten Webfonts ist, der für alle Betriebssysteme und Bildschirmgrößen optimiert ist. Oliver Reichenstein (Founder of Information Architects) war als einer der Ersten davon überzeugt, dass eine Webseite mit Schriftgrößen um 12 Pixel nicht für das Lesen im Web geeignet ist und 16 Pixel völlig in Ordnung sind. Indem er den Leseabstand eines Buchs mit dem Abstand am Monitor verglichen hat, wurde klar, dass für die vergleichbar gute Lesequalität Schriftgrößen von 16 Pixel sehr passend sind. Zudem hat er gezeigt wie unterschiedlich ein Buchstaben in verschiedenen Schriftgrößen wirkt und worauf ein Font-Designer hier achten muss, damit die Schriftwirkung in verschiedenen Größen vergleichbar bleibt.

Fazit

Dies war nur ein kleiner Einblick in einen Teil der Fronteers Talks. Viele der Themen werden wir uns in der nächsten Zeit genauer anschauen und überall wo möglich in unsere tägliche Arbeit einfließen lassen. Es hat sich demnach definitiv gelohnt nach Amsterdam zu fahren und ich bin nächstes Jahr gerne wieder mit dabei.

03. Sep 2013

Extension für mobile.de-Schnittstelle

Gravatar: Christian Lange
Standard mobile.de Händlerseite
Standard mobile.de Händlerseite mit festem Layout

Immer mehr unserer Kunden aus der Automobil- / Kfz-Branche fragen uns nach Lösungsmöglichkeiten zur Darstellung und Einbindung von Fahrzeugen in deren Internetseiten. Für solche Anwendungsfälle entwickeln wir normalerweise individuelle Lösungen, bei denen die Pflege und Datenhaltung direkt in TYPO3 erfolgt. Basierend auf diesen Daten werden passende Listen- und Detailansichten ausgeliefert. Solche individuellen Erweiterungen können mit Schnittstellen flexibel an die internen Systeme angebunden werden, wodurch eine zusätzliche manuelle Pflege der Datensätze entfallen kann.

Solche Schnittstellen müssen immer individuell auf die Spezifikationen des eingesetzten Verwaltungssystems angepasst werden und erzeugen hierdurch zusätzliche Aufwände. Bei unseren Kunden konnten wir als Gemeinsamkeit feststellen, dass obwohl unterschiedliche Systeme eingesetzt und darüber verschiedene Online-Fahrzeugbörsen bedient werden, die Fahrzeuge früher oder später in 99% aller Fälle zu mobile.de exportiert werden.

Somit lag es für uns auf der Hand nach einer praktikablen Lösung zu suchen, mobile.de als zentrale Schnittstelle zu verwenden und dadurch weiterhin unabhängig von der intern eingesetzten Software zu sein. Glücklicherweise bietet die Automobil-Plattform eine sehr gute Export-Schnittstelle über welche die gepflegten Fahrzeuge eines Händlers, wie Lager- / Gebrauchtwagen, für die weitere Verwendung abgerufen werden können - Sogar für Motorräder und LKW kann diese Schnittstelle genutzt werden.

Auf Basis von Extbase und Fluid haben wir eine Erweiterung (Extension) für TYPO3 entwickelt, die diese mobile.de-Schnittstelle nutzt und die Fahrzeuge - bei Bedarf auch von mehreren Händler-Accounts - abruft, zusammen fasst und je nach Wunsch auf der Webseite darstellt. Im Gegensatz zu der einfachen iFrame-Lösung die von mobile.de im Händlerbereich angeboten wird und einfach einzurichten ist, hat man mit unserer TYPO3-Extension die Möglichkeit das Layout & Design komplett flexibel an den Rest der Webseite anzupassen. Die angezeigten Werte und Filter lassen sich individuell bestimmen und positionieren. Durch den Einsatz von responsiven Templates lassen sich sämtliche Ansichten auch für Smartphones, Tablets und weitere Geräten optimiert ausgeben. Unerwünschte Werte wie z.B. die Gesamtanzahl der Fahrzeuge können dabei weggelassen werden und die komplexen Filtermöglichkeiten kann man auf eine jeweils sinnvolle Auswahl reduzieren. Bei Bedarf können die Fahrzeugdatensätze in TYPO3 durch eigene, nicht bereits durch mobile.de zur Verfügung gestellte, Werte / Informationen erweitert werden, so dass durch den externen Dienstleister hier keine Einschränkung geschaffen wird.

Screenshots vom TYPO3-Backend

Backend-Plugin für Listenansicht
Backend-Plugin für Listenansicht
Filterung über Schnittstelle
Filterung über Schnittstelle
Backend-Plugin Teaserbox
Backend-Plugin Teaserbox

Die Extension bringt bereits verschiedene Plugins mit einer Vielzahl an Einstellungsmöglichkeiten mit sich, so dass neben einer umfassenden Fahrzeugauflistung mit Filter- und Sortierungsmöglichkeit auch vordefinierte Listen ausgegeben werden können, um z.B. auf den Unterseiten bei einem Mehrmarkenbetrieb zu einem Fahrzeughersteller direkt die passenden Gebrauchtwagen zu dieser Marke anzeigen zu lassen. Modell-Detailseiten können automatisch mit passenden Gebraucht- / Lagerwagen angereichert werden, so dass ein Interessent direkt sehen kann, was der Händler vorrätig hat. Schließlich ist dies einer der Hauptunterschiede zu den Mitbewerbern.

Zusätzlich zu diesen Listenansichten besteht die Möglichkeit ausgewählte Fahrzeuge in sogenannten Teaser-Boxen anzupreisen. Darüber lässt sich z.B. das „Fahrzeug des Monats“ zu einem besonders interessanten Preis an präsenten Stellen der Website darstellen.

Durch die Darstellung der Detailseiten direkt innerhalb der eigenen Webseite kann nicht nur deren Darstellung auf die eigenen Bedürfnisse angepasst werden, sondern der Inhalt kann von Suchmaschinen auf der Seite gefunden werden und steigert dadurch die Sichtbarkeit der Internetseite in Google & Co. Die Fahrzeuge lassen sich somit über feststehende URLs unterhalb der eigenen Domain direkt aufrufen. Für diese URLs kann man z.B. QRCodes erstellen, die dann direkt im Fenster des jeweiligen Fahrzeugs positioniert werden und dem Interessent direkt vor Ort weitere Informationen zur Verfügung stellen können.

Nicht nur auf der eigenen Webseite kann mit Hilfe unserer Erweiterung das Fahrzeugangebot präsentiert werden. Über TYPO3 lassen sich damit auch spezielle Ansichten generieren, die losgelöst von der eigentlichen Webpräsenz als Facebook App oder im iFrame innerhalb einer anderen Applikation anzeigt werden können. Der Vorteil gegenüber der von mobile.de zur Verfügung gestellten Facebook App ist dabei, dass auch dort das eigene Look & Feel eingehalten werden kann und außerdem mehrere Händler-Accounts (z.B. von unterschiedlichen Standorten / Marken) zusammengefasst angezeigt werden können, was ansonsten nicht möglich wäre.

Sollten wir jetzt Ihr Interesse geweckt haben, zögern Sie nicht uns direkt anzusprechen. Gemeinsam finden wir für Sie die optimale Lösung, um Ihre Gebraucht- und Lagerwagen auf Ihrer Webseite anzuzeigen.

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