Funktionsweise

Die Dreiecke werden über die border-Eigenschaft von CSS realisiert. Hier Schritt 1:

Vergrößert man den Rahmen nun sehr stark - bei gleichzeitig sehr kleinem Inhalt, erhält man die Ausgangsform für die CSS-Dreiecke:

Wenn man jetzt den Rahmen an einigen Seiten entfernt (border-color:transparent;), erhält man das gewünschte Dreieck (in dem Beispiel habe ich die anderen Rahmen auf einen helleren Rotton gesetzt):

Hinweis: Die Technik lässt sich am flexibelsten mit allen vier Rahmen einsetzen, es funktioniert allerdings auch mit nur zwei Rahmen. Was letztendlich sichtbar ist, bestimmt man über die Rahmenfarbe, die Rahmen müssen aber in jedem Fall gesetzt werden.

Leere Elemente vermeiden

Leider hätte ein Einsatz der Technik in dieser Form einen entscheidenden Nachteil: Das Element, das das Dreieck erzeugt, hätte eine Höhe und Breite von 0 Pixeln. In den beiden oberen Beispielen habe ich, zur Veranschaulichung, den Inhalt auf 1px gesetzt, damit die Dreiecke aber nicht zu Trapezen mutieren, sollte der Inhalt möglichst 0 Pixel betragen. Also ziemlich wenig Inhalt, was wiederum ziemlich unpraktisch wäre, weil man dadurch einige Elemente ohne semantische Bedeutung verwenden würde.

Glücklicherweise gibt es aber einen Ausweg aus diesem Dilemma: Die beiden Pseudo-Klassen :before und :after. Setzt man die content-Eigenschaft auf " " (ein Leerzeichen), display auf block; und vergibt Werte für height und width, kann man die jeweilige Pseudo-Klasse wie ein gewöhnliches Element stylen.

Erzeugt man nun anstelle des Vierecks ein Dreieck wie oben beschrieben und verschiebt dieses mittels absoluter Positionierung nach links, erhält man den gewünschten Effekt:

Der Quelltext für dieses Beispiel sieht folgendermaßen aus:

(X)HTML:

<div id="beispiel">
	<p>Et voilà: Dreieck und Inhalt :-)</p>
</div>

CSS:

#beispiel:before {
    /* Rahmen nur an einer Seite einblenden */
    border-color:transparent transparent transparent #e20019;
    border-style:solid;
    border-width:50px;

    /* Pseudo-Element stylebar machen */
    content:" ";
    display:block;
    height:0;
    width:0;

    /* Pseudo-Element positionieren */
    left:0;
    position:absolute;
}

#beispiel {
    min-height:100px;
    padding-left:60px;
    position:relative;
}

Einsatzbeispiele für die CSS-Dreiecke

Diesen Trick kann man sich gut bei Breadcrumb-Navigationen zunutze machen.

Tipp: Will man einzelne Menüpunkte besonders hervorheben, bietet sich der CSS 3-Selektor :nth-child() an.

Die möglichen Einsatzgebiete gehen aber über Breadcrumb-Navigationen hinaus. So könnte man beispielsweise einen Download-Button ebenfalls mit den Dreiecken gestalten...

... oder vielleicht Listen-Symbole:

Bei Fortschrittsanzeigen (zum Beispiel bei einem Bezahlvorgang) oder einem Dateibrowser (für explorer-ähnliche, erweiterbare Bereiche) könnte man diese Dreiecke ebenfalls gut einsetzen.

Probleme im Praxiseinsatz

Browser-Support

Auch wenn es sich um keine neue CSS3-Eigenschaft handelt, ist der Browser-Support doch ähnlich wie bei CSS3.

Dreimal dürft ihr raten, welche Browser mit den CSS-Dreiecken nichts anfangen können. Richtig: Unsere allseits geliebten Internet Explorer 6 und 7. Internet Explorer 8 und neuer können die Dreiecke wie gewünscht darstellen. Das Beispiel mit der Breadcrumb-Navigation verwendet die für IE8 unbekannte rgba-Eigenschaft, funktioniert ansonsten aber problemlos.

Die anderen (modernen) Browser haben in der Regel keine Probleme, die Dreiecke darzustellen - zumindest in der derzeit aktuellen (stabilen) Version.

Border-Eigenschaft wird auf Dreiecke erweitert

Webdesigner, die zum Unterstreichen von Text (üblicherweise bei Links) die border-Eigenschaft aufgrund der größeren Flexibilität gegenüber der text-decoration-Eigenschaft bevorzugen, werden mit CSS-Dreiecken wohl kaum glücklich werden, denn die border-Eigenschaft funktioniert nicht mehr so, wie vielleicht erhofft: Die Dreiecke werden zu einem Teil des Inhalts (den beiden Pseudo-Klassen :after und :before sei Dank) und damit auch unterstrichen.

Komplizierte Implementierung

So schön das Ganze auch sein mag, einfach ist die Anwendung dieser Technik nicht. Die Herangehensweise ist erst einmal ziemlich ungewohnt und neu. Webdesigner, die die beiden Pseudo-Klassen :before und :after öfter einsetzen, werden sich aber schnell zurechtfinden.

Vorteile gegenüber Grafiken

Bei den ganzen Nachteilen muss das Ganze dann aber doch irgendwelche Vorteile bieten... Und diese Vorteile gibt es auch:

Weniger HTTP-Request und kleinere Dateigrößen

Letztendlich kann man damit seine Webseite noch ein Stückchen kleiner bekommen und schneller anzeigen lassen (alle die, die mit der Stoppuhr oder einer tollen App die Millisekunden zum Aufbau Ihrer Webseite messen, werden wissen, wovon ich rede). Auch wenn einige Zeilen Code nötig sind, schrumpft die Dateigröße der gesamten Webseite um wenigstens einige Byte, während gleichzeitig die Anzahl der HTTP-Request kleiner wird - schließlich braucht man keine extra Bilddateien mehr zu laden.

Skalierbar wie Vektorgrafiken

Sofern man die Dreiecke nicht mit absoluten Einheiten, sondern beispielsweise mit em oder % anlegt, erhält man eine Art Vektorgrafik. Eine wirkliche Grafik ist es natürlich nicht, aber der Vorteil der schier endlosen Skalierbarkeit ist trotzdem vorhanden.

Praxisbeispiel

Eine kleine Firma aus Mountain View (vielleicht hat der eine oder andere schon mal von denen gehört) setzt diese Technik in einer leicht abgewandelten Form für die Gestaltung der einzelnen Tabs im Android Market ein:

Der wesentliche Unterschied ist, dass nur zwei Rahmen - anstelle von vier - gesetzt werden. Damit lassen sich zwar nur rechtwinkelige Dreiecke erstellen, für diesen Einsatzzweck reicht das aber. Flexibler ist man sicherlich mit allen vier Rahmen - nur zwei Rahmen zu benutzen, vereinfacht die Technik aber und reicht oftmals aus.

Was haltet ihr von dieser Technik? Kennt ihr weitere Webseiten, die so etwas praktisch umgesetzt haben?

Hinweis: Es war technisch leider nicht möglich, die Grafiken hier auf t3n.de direkt mit CSS umzusetzen. Deshalb könnt ihr euch die CSS-Dreiecke auf TimKraut.de "live" (und in Farbe - an Stereo und 3D arbeite ich noch) ansehen und selbstverständlich dann auch mit Firebug und ähnlichen Tools untersuchen.

Über den Gastautor

Tim Kraut studiert derzeit Informatik in Frankreich und Deutschland, erstellt seit etwa 4 Jahren Webseiten, ist bekennender Firefox-Fan und stets auf der Suche nach interessanten CSS-Tricks. Aktuelle Informationen gibt es auf seiner Webseite TimKraut.de.

Mit JavaScript-Bibliotheken wie jQuery ist es zwar möglich, Drag and Drop innerhalb eines Browsers zu realisieren, will man aber den Desktop einbeziehen oder mit verschiedenen Browsern arbeiten, kommt man an HTML5 nicht vorbei. Die dafür vorgesehene Drag-and-Drop-API wurde ursprünglich von Microsoft bereits 1999 mit dem IE5 auf den Markt gebracht, später von Safari und Mozilla übernommen (Chrome unterstützt sie ebenfalls) und fand deshalb Eingang in den HTML5-Standard. Eine saubere Cross-Browser-Verwendung macht aber, wie sollte es anders sein, ein wenig Mühe.

Tücken, Fallen und Implementierungsschwächen

Alle Image- und Anker-Elemente sind per Default „draggable“, also für Drag-and-Drop verwendbar, anderen Elementen muss man das HTML-Attribut draggable mitgeben, damit es klappt, so die HTML5-Specs. Webkit hält sich nicht an den Standard, hier muss der Draggable-Status über CSS gesetzt werden (was viele Experten für eine eher merkwürdige Idee halten), und im IE muss man, da er das draggable-Attribut nicht kennt, mit einem Trick nachhelfen und ein <div>-Element, das draggable sein soll, zu einem <a>-Element umbauen. Man sieht mal wieder: Die schöne neue Cross-Browser-Welt war noch nie einfach und schmerzfrei. Das HTML-Attribut dropzone für die Zielzone des Vorgangs, in die „gedropt“ werden soll, wird gar von noch überhaupt keinem Browser unterstützt, stattdessen muss man sich auch hier mit JavaScript behelfen.

HTML5 heißt: JavaScript

Verschiedene DOM-Events stehen nun zur Verfügung, um mit dem Drag-and-Drop-Vorgang umzugehen, zum Beispiel dragstart („Jetzt geht's lohos“), drag („Es passiert!“) und dragged („Das war's, wir sind fertig“). Über setData lassen sich per Drag-and-Drop auch Daten übertragen, denen man einen MIME-Type mitgeben kann. Diese Daten lassen sich dann auf der anderen Seite der Operation mit getData wieder auslesen.

Auf diese Weise Dateien und Daten zwischen Browserfenstern oder sogar auf den Desktop hin und her zu schieben, eröffnet Möglichkeiten, die Browser-Apps wieder ein Stück näher an native Applikationen heranrücken. Die detaillierte technische Abwicklung (sprich, der JavaScript-Code) ist freilich etwas anspruchsvoller, und die 15 Slides von The CSS Ninja bieten nur einen Einstieg. Alles in allem ist die HTML5-Drag-and-Drop-API kein Anfängerthema, hat man aber Lust, sich mit JavaScript und HTML5 näher zu beschäftigen, ist sie sicher eine lohnenswerte Spielwiese. Und wenn es mal nicht klappt, kann man sich trösten: Selbst HTML5-Editor Ian Hickson nannte die API höchstselbst furchtbar (horrible). Man darf die Schuld für Fehlschläge im Zweifel also ruhig beim „Hersteller“ suchen.

Habt Ihr Erfahrung mit der Drag-and-Drop-API? Haltet Ihr sie für bereits sinnvoll benutzbar?

Weiterführende Links:

• jQuery Mobile in Zusammenarbeit mit HTML5: Local Storage - t3n News
• CSS3: Neue Möglichkeiten mit Hintergrundgrafiken - t3n News
• Tutorial: Websites auf HTML5 umstellen – so geht’s - t3n News

Mac-Software hat eine Eleganz, die man auf dem PC vergeblich sucht. Da kann man mir erzählen, was man will. Auch Tower, die grafische Benutzeroberfläche für die Versionsverwaltung Git macht da nicht nur keine Ausnahme, sondern gereicht dem Vorurteil sehr zur Ehre. Tower setzt dem eher spröden und komplizierten Git ein User Interface auf, das an sich schon regelrecht Spaß macht und sogar Lust auf die Entdeckung des zähen Themas Versionsverwaltung wecken kann. Tower setzt auf Git ab Version 1.7.0.1 auf, weshalb Git bereits installiert sein muss.

Tower - Die Funktionen des Git-Client

Tower ermöglicht sogar Einsteigern in die Welt der Version Control einen fast schon intuitiven Zugang und einen Leistungsumfang, der nur wenige Ansprüche absoluter Vollprofis offen lassen wird. Werfen wir einen Blick auf den Funktionsumfang:

Tower verwaltet beliebig viele Repositories lokal in eigenen Ordnern und sorgt für die Remote-Synchronisation. Dabei erlaubt es einen umfassenden Überblick über alle Aktivitäten in den einzelnen Projekten. Dieser Überblick erfolgt in gut lesbarer Präsentation. Zu jeder Aktivität lassen sich Detailinformationen abrufen, insbesondere der Status etwaiger Änderungen, deren Inhalt und Hintergrund.

In einer dateibasierten Übersicht erkennt Ihr schnell, welche Datei sich wie verändert hat. Die Wiederherstellung einer früheren Dateiversion oder die Bereitstellung der Änderungen lässt sich komfortabel per Mausklick vornehmen. Zusätzlich lässt sich dezidiert festlegen, wie mit Versionskonflikten umgegangen werden soll. Tower ist hier in der Lage, den Anwender bei der Konfliktbeseitigung zu unterstützen.

Das Verwalten von Entwicklungs-Branches gehört zu den Hauptfeatures von Tower. Hier gibt es eine umfassende Drag-and-Drop-Funktionalität, die das Anlegen neuer Branches aus vorhandenen, das Zusammenführen mehrerer Branches zu einer oder die Integration entfernter Daten stark vereinfacht. Tower unterstützt zudem die beiden Onlineversionsverwalter GitHub und Beanstalk, kann also nahtlos mit dort vorhandenen Repositories arbeiten. Ferner ist es möglich, seine Lieblingsentwicklungstools, wie TextMate, BBEdit oder TextWrangler in die Umgebung einzubinden. Kein Wunder also, dass Tower auch bei meinem t3n-Kollegen David Maciejewski zum Handwerkszeug gehört.

Tower - Systemvoraussetzungen und Kosten

Tower läuft auf allen Intel-basierenden Macs unter Mac OS X 10.5 oder höher. Wie bereits erwähnt, ist eine Git-Installation ab Version 1.7.0.1 erforderlich. Das Tool kostet 49 Euro als Ein-Benutzer-Lizenz und enthält alle Updates derselben Versionsnummer. Aktuell also alle Updates bis zur letzten 1.x-Version. Studenten zahlen die Hälfte, Mehrbenutzerlizenzen und Mengenrabatte sind auf Anfrage erhältlich. Auf der Website steht eine voll funktionsfähige Testversion zur Verfügung, die ohne Einschränkungen 30 Tage lang getestet werden kann.

Tower für Euch - Wir verlosen eine Lizenz!

Die Softwareschmiede fournova mit Büros in Stuttgart und Berlin hat uns für die t3n-Leser eine Tower-Volllizenz zur Verfügung gestellt, die wir zu folgenden einfachen Konditionen verlosen wollen:

Wer teilnehmen will, twittert einfach den Link zu diesem Beitrag hier bzw. retweetet den entsprechenden Tweet und - ganz wichtig - verwendet dabei das Hashtag #towert3n. Unter allen Teilnehmern verlosen wir dann die Lizenz. Wer hierbei kein Glück hat, kann immerhin bis zum 31.03.2011 einen Rabatt von 10 % beim Kauf einer Lizenz von Tower erhalten. Hierzu gebt Ihr beim Bestellvorgang einfach den Gutscheincode T3N10 an.

Wir wünschen Euch viel Erfolg!

Symfony 2 in den Startlöchern

Symfony 2 soll Ende März diesen Jahres als stabil veröffentlicht werden. Bis dahin können sich noch grundlegende Architekturen und Schnittstellen ändern. Dennoch gab es eine Vielzahl von Themen, über die es sich lohnte sich auszutauschen.

Größte Neuerungen sind der konsequente Einsatz eines Dependency Injection Containers als Integrationsschicht der ansonsten unabhängig einsetzbaren Komponenten sowie die Implementierung eines Caches, der das HTTP Protokoll umsetzt und neben Performancegewinnen vor allem deshalb interessant ist, weil er ohne weiteres durch jeden anderen HTTP Cache wie beispielsweise Varnish ersetzt werden kann. Ein Feature, welches vor allem für Unternehmen von großem Interesse sein dürfte. Eine weitere Implementierung des HTTP Protokolls ist im neuen Security Feature zu finden, welches sich um Authentifizierung und Autorisierung kümmert.

Das Interesse an Symfony 2 ist groß und so waren auch alle Trainingsveranstaltungen lange vor der Konferenz ausverkauft. Doch auch andere Technologien fanden viel Aufmerksamkeit. Mit Doctrine 2.0, welches standardmäßig mit Symfony eingesetzt wird, kann neben den üblichen RDBMS wie z.B. MySQL nun mit MongoDB auch eine NoSQL Datenbank angebunden werden.

Solche nicht-Symfony Technologien werden über sogenannte Bundles eingebunden und bereits jetzt ist eine Fülle von Bundles verfügbar, wenn auch der Einsatz bis zum finalen Release von Symfony mit Vorsicht zu genießen ist. Bundles für Facebook oder Twitter existieren schon und auch für speziellere Systeme wie z.B das Messaging System RabbitMQ, das Directory Access Protokoll LDAP, die Suchmaschinen Abstraktion Ariadne oder der Key-Value Store Redis befinden sich bereits Bundles in der Entwicklung und werden zum Teil sogar schon eingesetzt.

Ein weiteres Feature aus dem Bereich der Kernentwickler ist Assetic, eine PHP Bibliothek, die Assets wie Javascripte oder Stylesheets organisieren hilft. Dabei können verschiedene Filter angewendet werden, die beispielsweise CSS aus LESS Dateien bilden oder Javascripte mit z.B. dem YUI Compressor komprimierten. Auch HTTP Requests können mit Hilfe von Assetic minimiert werden, indem alle Scripte oder Stylesheets zu je einer einzelnen Datei verschmolzen werden können. In zukünftigen Versionen sollen sogar Bilder automatisiert zu einzelnen Sprite-Bilddateien zusammengefasst werden können.

Die Symfony Components, die die Grundbestandteile des Frameworks darstellen, können aber auch unabhängig eingesetzt werden. Mit Behat z.B. bekommt PHP nun ein eigenes Behaviour Driven Development Werkzeug. Behat ist eine Portierung des in der Ruby Welt bekannten Tools Cucumber und basiert ebenfalls auf den Symfony Components.

Zum Abschluss der Konferenz gab es nochmal eine Überraschung als Fabien Potencier, der Lead Entwickler des Symfony Projektes, die neue Website symfony.com mit dem neuen Logo präsentierte.

Die Symfony Live 2011 war eine spannende Konferenz mit interessanten Themen und vielen noch interessanteren Kontakten. Ich persönlich freue mich schon auf das nächste Jahr!

Etwas detailliertere Berichte der einzelnen Tage können auf test.ical.ly nachgelesen werden.

Frontend-Entwickler/-in (JavaScript/Flash/PHP) - Native Instruments GmbH, Berlin

„Ihre Position

• Weiterentwicklung und Optimierung der Flash basierten Website
• Umsetzung von User Frontends in State of the Art JavaScript, CSS und XHTML
• Unterstützung bei der Entwicklung von Website-Frontends für mobile Endgeräte

Ihr Profil

• Umfangreiche Kenntnisse in der Umsetzung von Frontends in XHTML und CSS(3) sowie Erfahrungen mit HTML5
• Umfangreiche Kenntnisse in JavaScript  und der Nutzung von jQuery und Prototype
• Sicherer Umgang mit Flash und ActionScript 3
• Erfahrung in der Implementierung von Internetanwendungen in PHP und MySQL von Vorteil
• Sowohl analytisches als auch kreatives Denken, eigenständiges und methodisches Vorgehen
• Neugierde, Lernwille und Begeisterung für neue Technologien
• Gute Kommunikations- und Teamfähigkeit
• Solide Englischkenntnisse wünschenswert."

...zur Stellenanzeige

Senior Web Developer - Native Instruments GmbH, Berlin

„Als...

Senior Web Developer (m/w) bieten wir Ihnen die vielseitige und herausfordernde Möglichkeit, gute Ideen in einer kreativen Arbeitsumgebung und flachen Hierarchien zum Leben zu erwecken.

Ihre Position

• Planung (Aufwandsschätzung), technische Konzeption und Implementierung webbasierter Projekte
• Weiterentwicklung bestehender Applikationen
• Leitung des Web Developer Teams
• Qualitätssicherung der im Team entstandenen Projekte
• Enge Zusammenarbeit mit den Fachabteilungen

Ihr Profil

• Mindestens 5 Jahre Berufserfahrung im Bereich Web-/Software-Entwicklung
• Hervorragende Kenntnisse von PHP5 und MySQL
• Sehr gute Kenntnisse von (X)HTML, Javascript und CSS
• Erfahrungen mit TYPO3, FLOW3 sind von Vorteil
• Wünschenswert sind Erfahrungen mit qualitätssichernden Verfahren wie Unittesting
• Gute Fertigkeiten in der Umsetzung von Projekten
• Erfahrungen im Projektmanagement sind von Vorteil
• Ausgeprägtes analytisches Denken und methodisches Vorgehen
• Neugierde und Begeisterung für neue Technologien
• Erfahrung in der fachlichen Betreuung von Mitarbeitern
• Sehr gute Kommunikationsfähigkeiten
• Hohe Eigenmotivation
• Sehr gute Englischkenntnisse in Wort und Schrift.“

...zur Stellenanzeige

E-Commerce Spezialist - DENIOS AG, Bad Oeynhausen

„E-Commerce Spezialist (w/m). Ihr Profil:

• erfolgreich abgeschlossenes Studium in den Bereichen Wirtschaftsinformatik, Medieninformatik, E-Commerce oder eine vergleichbare Ausbildung
• mehrjährige Erfahrung in der Umsetzung von Webprojekten und Online Marketing Aktionen
• SEO/SEM Kompetenz
• idealerweise Erfahrung mit TYPO3 CMS und Kenntnisse in der Anwendung gängiger Webtechnologien (HTML, CSS, PHP)
• hohes Maß an Eigeninitiative und selbständige, zielorientierte Arbeitsweise
• gute Englischkenntnisse

Ihre Aufgaben:

In einem dynamischen und kreativen Team führen Sie gemeinsam unseren internationalen Webauftritt zum Erfolg. Sie steigen im Anschluss an den unmittelbar bevorstehenden Relaunch der Unternehmenswebsite und des Online Shops der Denios AG ein.“

...zur Stellenazeige

TYPO3-Entwickler/-in - Freiland Netzlösungen GmbH, Hamburg

„Zur Unterstützung unseres Entwicklerteam in Hamburg haben wir ab sofort folgende Position zu besetzen: TYPO3-Entwickler/-in.

Ihr Aufgabenbereich:

• Umsetzung von Internetseiten unter Verwendung des Content Management Systems TYPO3
• Umsetzung von Shop-Lösungen basierend auf fertigen Shop-Systemen
• Weiterentwicklung und Betreuung von vorhandenen Internetseiten und -anwendungen
• Implementierung von eigenen Webanwendungen

Unsere Anforderungen:

• Sehr gute Kenntnisse und Erfahrung in der Entwicklung mit PHP und dem Umgang mit Datenbanken (mySQL) sowie in HTML, CSS und JavaScript
• Erfahrung in der Umsetzung von Internetseiten mit dem Content Management System TYPO3
• Grundkenntnisse im Umgang mit Bildbearbeitungsprogrammen
• Gute Deutsch- und Englischkenntnisse, in Wort und Schrift.“

...zur Stellenanzeige

Praktikum im Suchmaschinenmarketing: AdWords & SEO - SEM Deutschland, Hannover

„Wie suchen...

für 5-6 Monate einen motivierten Praktikanten für unsere SEM-Agentur. Wir bieten ein angenmehmes Arbeitsumfeld in einem jungen Team mit Platz für Individualität. Du bist während Deines Praktikums in das tägliche Geschäft involviert. Kaffee kochen, Botengänge und Staubsaugen gehören nicht zu Deinen Tätigkeiten!

Folgende Eigenschaften solltest Du einbringen:

• Hohe Motivation und Engagement
• Großes Interesse am Thema Online Marketing
• Hohe Bereitschaft zum Lernen
• Analytisches Denken
• Keine Angst vor Statistiken und Zahlen
• Sehr gute Fähigkeiten beim Erstellen von Texten

Wünschenswert aber nicht Vorraussetzung sind:

• Vorkenntnisse im Bereich SEO und AdWords
• Arbeiten mit Photoshop
• Arbeiten mit Flash
• Erfahrungen bei der Erstellung von Pressetexten
• Erfahrungen mit WordPress/Joomla!
• HTML-Kenntnisse
• PHP-Kenntnisse.“

...zur Stellenanzeige

Webentwickler/-in-PHP - KWICK! Community GmbH & Co. KG, Weinstadt

„Diese Aufgaben warten auf Sie:

• Agile Software-Entwicklung mit Scrum auf Basis von PHP, AJAX/jQuery, MySQL und NoSQL
• Arbeiten mit unserem eigenen OOP-basierten Framework
• Erweiterung und Betreuung unserer vielseitigen Community-Software mit spannenden Themengebieten wie Realtime, High Performance, i18n
• Entwicklung von Funktions- und Servicekomponenten sowie Schnittstellen (z.B. API, Widgets, für mobile Anwendungen wie iPhone und Android)
• Erstellung von Unit- und Systemtests
• Einbringung eigener Ideen und Kreativität
• Selbstständiges Aufgabenmanagement und enge Zusammenarbeit im Scrum-Team
• Abstimmung zwischen Entwicklerteams, Fachbereichen und Qualitätssicherung

Das erwarten wir:

• Experten-Wissen in PHP, MySQL und Softwarearchitektur
• Abgeschlossenes (Fach-)Hochschulstudium einer geeigneten Fachrichtung oder vergleichbare Ausbildung
• Mehrjährige einschlägige Berufserfahrung
• Kreativität und Problemlösungen statt Bugfixing
• Selbstorganisation, Teamfähigkeit und Kommunikationsstärke
• Gute deutsche und englische Sprachkenntnisse

Kenntnisse in folgenden Bereichen sind uns wichtig:

• JavaScript, jQuery, XHTML, CSS
• Strategien zur Skalierung und Performanceoptimierung wie Caching, Sharding, NoSQL
• Erfahrungen im Umgang mit Versionskontrollsystemen
• Unit testing
• Design Patterns
• Kenntnisse im Bereich Volltextsuche (z.B. Sphinx, Solr)  und asynchrone Verarbeitung (z.B. Gearman) von Vorteil.“

...zur Stellenanzeige

Webentwickler/-in - UVA Kommunikation und Medien GmbH, Potsdam

„Wir suchen...

zum nächstmöglichen Zeitpunkt einen Mitarbeiter im Bereich Webentwicklung. Zu ihren Aufgaben gehören die Umsetzung verschiedenster Internet- und Intranetkonzepte sowie deren Pflege und die Betreuung unserer Server und Arbeitsplatzrechner. Sie sind teamfähig, kommunikativ, flexibel und verfügen über eine schnelle Auffassungsgabe.

Sie besitzen Erfahrungen...

in der Umsetzung von Webprojekten mit XHTML, CSS, JavaScript sowie PHP und MySQL. Darüber hinaus sind Sie vertraut mit der Installation und Konfiguration von Content Management Systemen innerhalb von LAMP-Systemen. Wünschenswert sind Erfahrungen mit Adobe Flash und Photoshop.“

...zur Stellenanzeige

Webentwickler/-in - sirup° Agentur für Neue Medien GmbH & Co. KG, Berlin

„Du...

arbeitest Dich gern und schnell in neue Aufgaben ein und kennst die aktuellen Trends und Entwicklungen in den digitalen Medien. Darüber hinaus solltest Du folgende Anforderungen erfüllen:

• Sehr gute Kenntnisse und Erfahrungen mit den Content Management Systemen TYPO3 und/oder Drupal
• Fundierte Kenntnisse in der objektorientierten PHP5-Entwicklung und in SQL basierten Datenbanken
• Mehrjährige Erfahrung in Architektur, Entwicklung und Betrieb von Web-Portalen/Web-Applikationen
• Gute Kenntnisse in der Frontend-Entwicklung: XHTML, CSS, JavaScript, AJAX
• Sehr ausgeprägte analytische und konzeptionelle Fähigkeiten
• Idealerweise abgeschlossenes Hochschulstudium Informatik, Medieninformatik, Wirtschaftsinformatik oder eine vergleichbare Ausbildung

Am meisten Wert legen wir auf: Engagement, Teamfähigkeit, Zuverlässigkeit,  Offenheit – und natürlich Spaß an der Arbeit.“

...zur Stellenanzeige

Applikations-Entwickler/-in - gyselroth GmbH, Zürich

„Für...

die Mitarbeit an der Weiter- und Neuentwicklung verschiedener Web-Anwendungen. Sie planen und entwickeln komplexe Anwendungen für Intranets im Bildungsbereich und betreuen und entwickeln Open-Source CMS. Für diese abwechslungsreichen Aufgaben suchen wir einen Applikations-Entwickler (w/m) mit ausgezeichnetem Know-how im Bereich:

• serverseitiger Skriptsprachen (v.a. PHP)
• Datenbanken wie MySQL und MSSQL
• Verzeichnisdienste (v.a. LDAP)

Sie haben keine Berührungsängste vor AJAX oder Anwendungen für das mobile Internet und besitzen Kenntnisse aus den Bereichen Verzeichnisdienste, Authentisierung/Autorisierung. Als engagierter Teamplayer schätzen Sie die tägliche Herausforderung. Sie denken kundenorientiert und qualitätsbewusst. Sie besitzen ein analytisches und vernetztes Denken und sind motiviert, sich laufend in neue Technologien und Entwicklungen einzuarbeiten. Es erwartet Sie eine spannende und selbständige Tätigkeit in einem innovativen, vielseitig agierenden Unternehmen mit interessanten Entwicklungs- und Einsatzmöglichkeiten. Ihr Arbeitsort befindet sich in der Stadt Zürich.“

...zur Stellenanzeige

International Magento Support - Rebate Networks GmbH, Berlin

„Currently, we are looking for...

a motivated, talented and experienced Magento Support Member  to take over the support and teaching of our international portfolio companies. You are responsible for Magento user requests and the creation of teaching material. You inform both our CTO and the Product Manager about necessary changes in the backend to facilitate the usage of our platform. You are passionate about improvements of the user experience (B2B) and facilitation of processes on our platform

Your tasks:

• Support Business Partners all over the world in Magento issues
• Provide Feedback about user experience of the Magento platform
• Think proactively to solve problems before they arise

Your profile:

• You have experience with Magento platforms
• You have advanced communications skills
• You are able to explain complex issues and extensive interrelations
• You have a hands-on mentality, are able to switch priorities and focus as needed
• You are proficient in English and preferably speak other languages.“

...zur Stellenanzeige

Software-Entwickler/-in PHP - redhotmagma GmbH, Stuttgart

„Für...

die Mitarbeit an Neu- und Weiterentwicklung von umfangreichen Service-basierten Softwaresystemen und E-Commerce Anwendungen suchen wir zum nächstmöglichen Zeitpunkt einen versierten PHP-Software-Entwickler (m/w).

Anforderungen:

• sehr gute Kenntnisse in objektorientierter Anwendungs-Entwicklung mit PHP5
• belegbare Erfahrung in der Entwicklung auf Designpattern-Basis (v.a. MVC-Pattern)
• belegbare Erfahrung im Umgang mit der LAMP-Architektur und deren Konfiguration
• belegbare Erfahrung mit HTML, CSS und JavaScript (Kenntnisse gängiger Libraries wie JQuery sind von Vorteil)
• Kenntnisse im Umgang mit versionsverwaltungsbasierter Entwicklung (z.B. Subversion)
• Hohe Ansprüche an die Qualität der eigenen Arbeit sowie Begeisterungs- und Teamfähigkeit

Erfahrungen in der Entwicklung von Anwendungen in gängigen PHP-Frameworks (Symfony, Zend Framework o.ä.) sind ebenso von Vorteil wie Erfahrungen mit E-Commerce Systemen und/oder komplexen PHP-Anwendungen.“

...zur Stellenanzeige

Web Developer - intelliShop AG, Achern

„Unser Unternehmen...

und unser Team wächst seit Jahren kontinuierlich und sucht zur weiteren Expansion am Standort Achern oder Karlsruhe eine/-n Web Developer. Ihre Aufgaben…

• Kontinuierliche Weiterentwicklung der IntelliShop eCommerce Suite auf Basis von PHP5 (objektorientiert), MySQL 5 und XML
• Umsetzung von individuellen Konzepten und Anpassung der IntelliShop eCommerce Suite im Rahmen von Kundenprojekten
• Beratung und Unterstützung bei der Erstellung von kundenspezifischen Lösungen
• Bearbeitung technischer Anfragen zu den von Ihnen verantworteten Kundenprojekten
• Entwicklung und Betreuung von Standard-Modulen
• Unterstützung unserer Partner und deren Entwickler bei komplexen Fragestellungen

Sie bringen mit…

• Abgeschlossene Ausbildung zum Fachinformatiker, Berufserfahrung als Webentwickler oder abgeschlossenes technisches Studium
• sehr gute Kenntnisse und Erfahrungen in der objektorientierten Entwicklung mit PHP5
• sehr gute Kenntnisse im Bereich MySQL
• Umfassendes Verständnis von (X)HTML, JavaScript und CSS, AJAX und Webservices
• gute Kenntnisse moderner Softwarearchitekturen und Entwicklungsmethoden
• Englisch in Wort und Schrift.“

...zur Stellenanzeige

Noch mehr Stellenanzeigen finden sich in der Stellenbörse t3n Jobs. Wer selbst gern ein Jobangebot aufgeben möchte, findet unter „Stellenanzeige schalten" alle notwendigen Informationen.

Diaspora: Das Soziale Netzwerk setzt auf Open Source

Das Soziale Netzwerk Diaspora wird von vier jungen Geeks aus New York entwickelt und machte sich im letzten Jahr schnell als neuer Facebook-Konkurrent – als „Anti-Facebook“ – einen Namen. Die Hoffnungen lagen dabei besonders in den Faktoren Dezentralität und Datensicherheit. Der erste Buzz verhallte aber zunächst.

Zur Website von Diaspora...

Weiterführende Links auf t3n:

• Anti-Facebook „Diaspora“: Vier Geeks wollen das bessere Facebook bauen - t3n News
• Facebook-Alternative: Erste Screenshots von Diaspora – Code steht für Entwickler bereit - t3n News
• Diaspora: Welche Chancen hat die dezentrale Facebook-Alternative? - t3n News
• Diaspora Alpha: Erste Tests verlaufen eher enttäuschend - t3n News

Sintel: Der Kurzfilm ist komplett Open Source

Der dritte Film der Blender Stiftung wurde mit einem Budget von 400.000 Euro finanziert und hat mehr als 14 Minuten Lauflänge. Der Film wurde mit Open-Source-Programmen, wie etwa mit der 3D Suite Blender, umgesetzt – auch das gesamte Material wurde unter Creative-Commons-Lizenz veröffentlicht. Viel Spaß!

Zur Website von Sintel...

HPHP: HipHop für PHP als Open-Source-Projekt

Zu Beginn des letzten Jahres gab ein Entwicklerteam von Facebook bekannt, in einem internen Hackathon mit dem Beschleuniger HipHop (HPHP-Projekt auf GitHub) die Open-Source-Programmiersprache PHP zu einem Hyper-PHP entwickelt zu haben. Anschließend veröffentlichte das kleine Team den Quelltext dieses auf C++ optimierte PHP. Facebook soll seit dieser Umstellung bis zu 50 Prozent weniger Prozessorleistung verschlingen.

Zum Entwickler-Blog von Facebook...

Canabalt für iOS: Open Source Game

Das Touchscreen-Spiel Canabalt wurde von den Entwicklern ohne das ursprünglich verwendete Flash umgeschrieben und für Apples iOS portiert. Der Code ging anschließend Open Source (hier das Projekt auf GitHub), da unter anderem 25.000 US-Dollar für das Projekt gespendet wurden. Seitdem lässt sich der Code für eigene Entwicklungen nutzen – Flashspiele ohne Flash für Geräte unter iOS.

Zu Canabalt in iTunes...

Shopware: Open Source E-Commerce-Lösung

Shopware ist eine noch relativ junge E-Commerce-Lösung: Die Community Edition 3.5 weiß vor allem durch die leistungsstarke Architektur im Back- und Frontend zu überzeugen. Insgesamt bietet sich Shopware als gute Alternative zu bestehenden Lösungen an, auch durch bereits integrierte Live-Shopping-Elemente.

Zur Website von Shopware...

Weiterführender Link auf t3n:

• Shopware als Community Edition - t3n News

openSEOdata: OrangeSEO als Open Source

Das SEO-Tool OrangeSEO ging im letzten Jahr als openSEOdata Open Source. Ein bemerkenswerter Schritt des verbliebenen Entwicklers Fabian Rossbacher, der nun seit einiger Zeit eine Community rund um das Tool aufbaut. Die 10 Millionen Keywords (Ranking, CPC, Suchvolumen) und 150 Millionen Backlinks sind über eine API auf PHP-Basis verfügbar.

Zum Blog des Tool-Entwicklers SEOprogrammier...

fise: HTTP-Service ist Open Source

Der HTTP-Dienst fise will es Entwicklern von CMS ermöglichen, Inhalte wie Bilder oder Texte semantisch zu ordnen und zu verlinken. Ganz nach dem Konzept des „Semantic Web“.

Zur Projektseite von fise...

OpenStack: Open Source für Cloud Computing

Wer freien Code, freie Standards und freies Wissen über Cloud Computing sucht, der ist bei der Software OpenStack richtig. Die Lösung ist auf Kollaboration ausgelegt und dem schnellen Austausch von Information und Wissen. Das Projekt wird außerdem unter anderem von der NASA und Rackspace unterstützt. Zur Zeit gibt es zwei OpenStack-Projekte: Compute und Object Storage.

Zur Website von OpenStack...

Microsoft Outlook: E-Mail-Client jetzt teilweise Open Source

2010 legte Microsoft Bestandteile des E-Mail-Clients Outlook offen: Mittels freier PST-Dateien können Anwendungen geschrieben werden, in die Outlook-Daten implementierbar sind. Ein Datei-Viewer gibt darüber hinaus Einblick in die Datenstruktur des Clients.

Zur Website des Outlook Development Centres...

ThinkUp: Open Source im Weißen Haus

Das PHP/MySQL-basierte Tracking-Tool für Social Media ist noch in einer Beta und überwacht die Aktivitäten auf Facebook oder Twitter. Die erhobenen Daten werden dann gesammelt und stehen zur Analyse oder für weiteres Monitoring bereit. Berühmt wurde es unter anderem durch seinen Einsatz im Social Media Department des Weißen Hauses, dem Amtssitz des US-Präsidenten.

Zur Website von ThinkUp...

Contao: Open Source-CMS

TYPOlight hat zwar nicht 2010 das Licht der Welt erblickt, aber im letzten Jahr mit der Namensänderung auf Contao einen gravierenden Schritt hinter sich gebracht. Weiter hat das Projekt 2010 ein ordentliches Wachstum hingelegt – was nicht zuletzt an den zahlreich veröffentlichten Contao-Buchtiteln erkennbar ist. Ein aufstrebendes Open-Source-CMS also, das wir für 2011 im Auge behalten sollten.

Zur Website von Contao...

Hintergrund-Videos im Webdesign

Dank Technologien wie Flash oder HTML5 ist die Platzierung von Videos als Hintergrund einer Website heute technisch kein Problem mehr. Richtig interessant und kreativ wird eine solche Webdesign-Lösung, wenn man den Videos einige interaktive Elemente verpasst. Das könnten beispielsweise Menüs sein, wie man sie von DVDs und Blurays kennt. Natürlich sind solche Websites keine Performance-Wunder und benötigen meist schnelle Internetverbindungen, aber die Ergebnisse können sich dann auch umso mehr sehen lassen.

Ein gelungenes Beispiel, sogar in 3D, liefert die Modemarke Jay Jays ab. Gleich neun verschiedene Modells präsentieren die Kollektion auf eine sehr dynamische Art und Weise, unterlegt mit passender Musik. Per Mausklick kann man das Video jederzeit anhalten und bekommt dann interaktiv angezeigt, welche Kleidungsstücke das Modell gerade zeigt und was sie kosten. Mit einem weiteren Klick auf das gewünschte Kleidungsstück werden dann zoombare Bilder angezeigt. Die Modells lassen sich übrigens mit den Pfeiltasten der Tastatutur jeder Zeit wechseln. Ein echter interaktiber Katalog eben, der ein ganz neues Shoppinggefühl vermittelt. Also 3D-Brille aufsetzen, zurücklehnen und staunen.

Ein Fülle weiterer schöner Beispiele gibt es bei Smashing Magazine...

Mit Awards ausgezeichnete Webseiten?

„Für eine Recherche suche ich Webseiten von großen Unternehmen, die Aufgrund des Designs und/oder der Usability ausgezeichnet wurden. Hier kommen Webseiten aus den Bereichen Finanzen, Versicherung, Healthcare und Industrie in Frage. Für jeden Tipp bin ich dankbar.“

Zur Frage und zu den Antworten...

Firmenblog in Seite integrieren oder extern?

„In welchen Fällen ist es sinnvoll einen Firmenblog in die Hauptseite als Menüpunkt zu integrieren und in welchen Fällen sollte man den Blog extern unter eigener (Sub-)Domain führen? Wann bringt es aus SEO-Sicht mehr?“

Zur Frage und zu den Antworten...

Welche Collaboration-Programme nutzt ihr für SCRUM-Teams?

„SCRUM-Teams haben spezielle Anforderungen was die Projektunterstützung durch Collaboration-Tools und -programme angeht. Derzeit habe ich agile42 und OpenAtrium getestet; basecamp habe ich mir kurz angeschaut. OpenAtrium ist bei mir im Produktiveinsatz. Ich bin aber weiterhin auf der Suche nach Collaboration-Tools und möchte dieses Forum und die Gunst der Stunde nutzen und Euch fragen: Welche weiteren Tools könnt ihr für den Einsatz in SCRUM-Teams empfehlen?“

Zur Frage und zu den Antworten...

Welche Technologie für CRUD-Anwendungen im Web?

„Hallo, ich möchte für geisteswissenschaftliche Themen Wissensdatenbanken erstellen, die von einer breiten Comunity über das Web gefüllt und abgefragt werden können. Die Anwendungen sollen möglichst einfach mit wenig Programmierung (sorry Nerds) aber optisch anspruchsvoll erstellt werden können. Ideal ist Open Source, da ich Wissen schaffen aber keine Software verkaufen möchte.“

Zur Frage und zu den Antworten...

Was verdient t3n mit seiner Webseite?

„Was kann man im Monat mit einer Webseite wie t3n verdienen?“

Zur Frage und zu den Antworten...

Minimal Mailchimp-SignUp-Integration: t3n-like?

„Hallo,

seit einiger Zeit nutze ich Mailchimp für Newsletter. Dafür möchte ich gerne ein einfaches, schnelles SignUp- Formular für eine WordPress Website. Zur Integration in die eigene Website gibt es verschieden Möglichkeiten: JavaScript/WordPress & CMS-PlugIns/PHP-Skript/API.

Da auf t3n auch ganz fleißig Mailchimp genutzt wird (Newsletter Sidebar) würde es mich ungemein interessieren wie ihr die Integration gemacht habt. =)

Ich gehe davon aus, dass t3n natürlich die beste Methode verwendet habt… (Profis und so ^^) Die oben genannten Integrationsmöglichkeiten sind – IMHO – recht “fett” (ausser API), und ich konnte keine verräterichen Spuren davon im t3n-Quelltext entdecken – mysteriös. Und bevor ich jetzt den vorgefertigten PHP-Skript verschandle, sprich die 2400 PHP-Zeilen MCAPI.class.php irgendwie ausdünne, frage ich mal lieber in der t3n Community nach. =)

Kennt ihr einfache, schnelle Lösung, bzw wie hat das t3n Team das hinbekommen?“

Zur Frage und zu den Antworten...

Bürosoftware: Abrechnung?

„Ich wollte mal nachfragen, welche “Büro Software” hier so verwendet wird…

Das Problem ist dabei nicht die Wahl eines “Office” (sehr gut, Anglizismen erleichtern die Kommunikation.. :-/ ) Programmes, sondern um die Wahl einer DAU-Lösung für Unternehmer. Ich bin über den Punkt “wende dich an einen Steuerberater” längstens hinaus und wünsche mir ehrliche Meinungen zu Produkten wie Lexware Büro Easy/WISO Mein Büro etc. Am Liebsten würde ich eine mehr oder minder freie Lösung verwenden, da ich hier ohne troubel meistens Connectoren zu Systemen wie Redmine, oder Virtualmin beschreiben könnte.

Was verwendet Ihr zur Abrechnung, einfach um den Überblick zu behalten? Habt Ihr ein System, welches SaaS Angeboten wird? Ich will mir einfach einen Überblick beschaffen und denke, hier sollten einige Meinungen und Anregungen zusammen kommen :-)“

Zur Frage und zu den Antworten...

Fragen, die bislang noch keine Antwort bekommen haben

Auf die meisten Fragen gibt es bei uns auch eine Antwort - oft innerhalb weniger Minuten. Auf dieser Seite findet Ihr alle Fragen, bei denen es noch keine Reaktionen gibt. Hier eine Auswahl:

• RSS Grafitti Facebook News: Import der Bilder?
• Mobile Web Development?
• Alternativen zum Apple iPad?

Ihr habt auch eine Frage? Oder Ihr habt gar eine Antwort parat? Dann macht mit bei t3n Fragen.

• Zum Artikel „Zugängliche Webseiten mit TYPO3 sind kein Problem: Barrierefreiheit mit TYPO3“
• Komplettes Inhaltsverzeichnis von t3n Magazin 21
• t3n Magazin 21 als Einzelheft versandkostenfrei bestellen

Experten-Interview zur AdWords-Optimierung

Olaf Koop von Online Marketing Hannover hat den AdWords-Experten Martin Rötterding zu einem Interview gebeten. Darin stellt er sich einigen sehr interessanten Fragen rund um das Thema AdWords-Optimierung und erklärt beispielsweise welche Ansatzpunkte dabei seiner Meinung nach besonders wichtig sind.

Tweetie 2.0 kommt heute zusammen mit dem Mac App Store

Heute soll, wie von uns berichtet, der mit Spannung erwartete Mac App Store an den Start gehen. Vermutlich um 18:00 Uhr deutscher Zeit soll dann auch der immer noch sehr beliebte Twitter-Client Tweetie eine Renaissance erleben und in der Version 2.0 gelauncht werden.

Die 25 nützlichsten Posts aus 2010 zum Thema Social Media

Social Media gehörte 2010 zu den absoluten Hype-Themen, über die sehr viel geschrieben wurde. Klar, dass man da nicht alle wichtigen und interessanten Beiträge mitbekommen hat. Bei Social Media Today wurden daher noch mal die nützlichsten Social-Media-Posts aus 2010 zusammengetragen und in Kategorein wie Infografiken, Cheat Sheets & Checklisten, Tools, Statistik, Strategie uvm. eingeteilt.

Wieso man JavaScript nicht im Head lädt...

JavaScript hat seit den 90er Jahren eine erstaunliche Wandlung durchgemacht. Wurde es zunächst nur sehr sehr sparsam eingesetzt, auch weil die damaligen Browser so ihre Schwierigkeiten damit hatten, so gehört JavaSript heute in einer Vielzahl einfach dazu, wenn man über moderne Webseiten spricht. Für die Website-Optimierung ergibt sich daraus eine interessante Fragestellung: An welcher Stelle sollte man die JavaScripte laden lassen? Guido Mühlwitz hat sich mit dieser Frage auseinander gesetzt.

Like-Button in Static-FBML-Seiten einbauen

Mit der Static-FBML Anwendung lassen sich mit einfachen HTML-Kenntnissen unterschiedliche Landing Tabs für Fans und Nicht-Fans erzeugen. Um die Nicht-Fans zu Fans zu machen, kann man in ihren Landing Tab auch einen Like-Button integrieren - facebookmarketing.de zeigt wie es geht.

Schönen Feierabend!