TYPO3 Akademie
Das heisst zwei intensive Tage mit spannenden Vorträgen und intensivem Networking in den
Agenturräumen von Marit AG.
Temin: 10. bis 11. Februar in München
Website: www.typo3-akademie.de

FLOW3 Experience
Da FLOW3 noch sehr jung ist ist dies auch die erste Konferenz, sie bietet Talks einer hochkarätigen Gruppe von Speakern, die u.a. die Lead-/Kern-Entwickler des Frameworks umfasst. Auch dem ergänzenden ganztägigen Workshop von einem der beiden Hauptentwickler bietet das Event im Kesselhaus lassen wir uns nicht entgehen. Wir sind gespannt!
Termin: 30. bis 31.3.2012 in Rosenheim
Website: www.flow3experience.de

TYPO3 Developer Days
Die offiziellen Entwickler Tage, sind für uns als TYPO3 Agentur Pflicht.
Termn: 12. bis 15. April in München
Website: t3dd12.typo3.org

TYPO3 Camp Stuttgart
Bei lockerer Camp Atmosphäre im wunderschönen Schloss Hohenheim, unser Favorit der TYPO3Camps!
Termin: 26. bis 29. April 2012
Website: www.typo3camp-stuttgart.de

Dies ist die Entwicklung von Webapplikationen (Web-Softwareentwicklung) und das Realisieren von komplexeren Websites und E-Commerce Lösungen die immer eine gewisse Individualität und Innovation fordern sowie das kundennahe Konzeptionieren, Planen und Entwickeln mit agilen Methoden.

2012

Neupositionierung / Redesign

• Die comsolit AG wird straffer positioniert und enthält ein Redesign.
• Wir fokussieren uns auf das was wir gut können und leidenschaftlich tun und in dem wir erfolgreich und konkurrenzlos sind.
• Dies ist die Entwicklung von Webapplikationen (Web-Softwareentwicklung) und das Realisieren von komplexeren Websites und E-Commerce Lösungen die immer eine gewisse Individualität und Innovation fordern sowie das kundennahe Konzeptionieren, Planen und Entwickeln mit agilen Methoden.
• Die Dienstleistungen im Grafik und Design Bereich werden nicht mehr angeboten.
• Die Dienstleistungen im E-Marketing Bereich werden wir nicht mehr anbieten und Interessenten gerne an unsere darauf spezialisierte Partner verweisen.

lightswan GmbH

• Entwicklung von einfachen Websites von der Konzeption über das Screendesign bis zur modernen Website wird in die Tochtergesellschaft lightswan GmbH ausgegliedert.
• Durch kurze und Teils automatisierte Arbeitsprozesse werden wir hochwertige Websites mit individuellem Design, mobile tauglich und mit dem CMS TYPO3 anbieten können.
• Wir werden damit das untere bis mittlere Preissegment ansprechen.

2011

Im bald zu Ende gehenden Jahr wurde bei comsolit vor allem optimiert, dazugelernt und ausgebaut.

Planung / Projektleitung

• Anfang Jahr haben wir das Produktivitätstool Kanban eingeführt und stetig weiterentwickelt, mittlerweile produzieren wir alles über dieses Tool.
• Dazu kamen neue Qualitätssicherungswerkzeuge wie: Design Review, definierte Testprozeduren und Projekt Controlling.
• Die agilen Entwicklungsmethoden die bei uns vom Requirements Engineering bis zum Deployment reichen haben wir weiter verfeinert.
• Neue Zeiterfassungs- und Rapportierungsprozesse ermöglichen den Kunden und Projektleiter noch mehr Transparentz in den Arbeitsprozessen.

Software und Webentwicklung

• Durch Weiterbildungen und Schulungen haben wir unser Wissen im Bereich moderne Entwicklungsmethoden weiter verbessert und entwickeln mittlerweile sehr komplexe Webapplikationen in einem Umfeld das sehr hohe Ansprüche an Qualität, Datenintegrität, Sicherheit und Ausbaufähigkeit stellt.
• Wir haben uns zudem viel mit der E-Commerce Lösung Magento beschäftigt und uns in diesem Bereich ein sehr gutes Know-How angeeignet.
• Für Frontend Entwicklungen setzten wir dieses Jahr voll auf jQuery und ein paar sehr interessante CSS Frameworks.
• Die Entwicklung für mobile Geräte mit der responsive Webdesign Technologie mit HTML5 und CSS3 ist bei uns mittlerweile Standard bei allen Webapplikationen und Websites.

Hosting

• Wir haben bisher eigene Server in eigener Verantwortung betrieben, da dies nicht Kostendeckend war und wir mit dem Preis/Leistungsverhältnis nicht mehr konkurrenzfähig haben wir alle Kunden auf neue Infrastrukturen zu den beiden Partner Mittwald und Hetzner in Deutschland umgezogen.

Ferien

• Jetzt gehen wir alle zuerst einmal in die Ferien vom 24.12.2011 bis 2.1.2012 und sind ab dem 3.2.2012 wieder für sie da.

Unseren Kunden, Lieferanten und Partnern danken wir für das entgegengebrachte Vertrauen und die angenehme Zusammenarbeit im vergangenen Jahr und wünschen erholsame Feiertage und ein erfolgreiches neues Jahr.

Ihre comsolit AG

Wieso Responsive Webdesign?

Mobile Websites kann man auch auf herkömmliche Art und Weise machen, wo man z.B. zwei verschiedene Website ausliefert, eine für mobile Geräte und eine für herkömmliche Bildschirme. Dies ist nicht sehr effizient und bedeutet meistens viel Aufwand.
Durch die vielen neuen Arten von Geräten (iPhone, iPad usw) mit verschiedenen Bildschirmgrössen und immer mehr Geräte mit Bedienung per Touch müssten so viele verschiedene Websites ausgeliefert werden.

Responsive Webdesign ist eine Herangehensweise die theoretisch unabhängig von Geräten ist und die es ermöglicht mit einer Website Auslieferung alle Geräte abzudecken dabei nutzt man Mediaqueries, fluide Grids, HTML5 und CSS3.

Mit diesem Projekt haben wir uns einen guten Einblick in die Technologie verschafft und werden in den nächsten Monaten mit weiteren Projekten diese Technologie anwenden und verfeinern.

Die IQ-Import GmbH bietet Ihren Kunden trendige Produkte zu fairen Preisen an.

Der Online Shop kommt vor allem mit einem ganz eigenen Design daher.
Zudem wurde das Einkaufsvergnügen mit einigen Effekten wie fly-to-the-basket, one-page-checkout mit Akkordeon und einigen neuen Funktionen verbessert.

Für die umfassende Integration mussten viele neue Funktionen programmiert werden und einige Anpassungen an Corefunktionen vorgenommen werden um die Anforderungen ohne Abstriche zu verwirklichen.

Magento ist die professionelle Open Source eCommerce und Online-Shop Lösung. Dank der offenen und flexiblen Schnittstellenarchitektur lässt sich Magento gut in firmeninterne Systeme integrieren.

Magento eCommerce bietet schon in der Standard-Version die wichtigsten Funktionen und die professionelle Version lässt praktisch keine Wünsche offen

Domain: www.iqimport.ch

Die neuen Hosting Abos weisen wesentlich höhere Leistungen und neue Funktionen sowie neue Administrations-Panel auf. Neu gibt es nur noch zwei Hosting Abos. Spam-Filter welche vorher optional waren, sind nun zum Teil im Abo integriert.

Neue Leistungen / Funktionen

• Backupfunktion
• Spam-Filter (ComPower mit Quarantäneordner)
• CatchAll E-Mail
• 10 res. unlim FTP Benutzer
• ComPower: Python, Ruby, Symfony, FLOW3
• ComPower: Versions und Softwaremanager
• ComPower: SSH Zugang

Detaillierte Auflistung der wichtigsten Eingenschaften.

Wir trennen uns von unserem bisherigen Dienstleister Metanet und bieten die neuen Hosting mit den neuen Partnern Hetzner und Mittwald an.

Die Positionierung, Konzeption, Naming und Kreation vom Corporate Design wurde in Zusammenarbeit mit lightswan realisiert.

Bei der Website kommt das Content Management System TYPO3 zum Einsatz, das Jobmodul wurde mit dem TYPO3 Newsmodul und einer Verbindung zum Formularmodul realisert.

Website www.peacockplan.com

Beim EZAG handelt es sich um eine internationale Zahlungsmethode der PostFinance ähnlich dem DTA mit dem Unterschied, dass es auf Postkonten bezogen ist.

Wie auch das DTA bietet das EZAG viele verschiedene Transaktionstypen für nationale und internationale Zahlungen, in diesem Fall wird die Transaktionsart 27 – “Record für Clearing-Zahlungen im Inland” genauer betrachtet. Transaktionsart 27 bietet den Vorteil, dass die Zahlung an den Empfänger über IBAN und somit fast keine weiteren Daten des Empfängers benötigt werden.

Die EZAG-Datei besteht grundsätzlich aus drei Teilen, dem Kopfrecord, dem Record für die jew. Auszahlung und dem Totalrecord. Jeder dieser drei Bereiche hat einen Kontrollbereich, der abgesehen von Transaktionsnummer und der Laufnummer identisch ist. Der Totalrecord beinhaltet die Anzahl der Transaktionen und die ausgezahlte Gesamtsumme.

Ähnlich wie auch beim DTA muss bei der Erstellung des EZAGs vor allem darauf geachtet werden, dass:

• die korrekten Abstände wie spezifiziert eingehalten werden (nicht zu kurz oder lang, 701 Zeichen lang)
• der Inhalt das richtige Format hat (wo wird mit blanks aufgefüllt, wo mit ’0′)
• korrekter Inhalt
• jeder Bereich muss 701 Zeichen lang sein
• am Ende jeder Zeile ein Carriage return (CR, \r) und darauf ein Carriage return + linefeed (LF, \n) erfolgt

Download cheat sheet EZAG File

Wird eine der oben genannten Regeln verletzt, kann das EZAG nicht eingelesen werden und es erfolgt eine Fehlermeldung. Weiterführende Informationen finden sich im EZAG Handbuch oder in der  Spezifikation der EZAG-Recordstrukturen.

comsolit AG bietet individuelle Payment Anbindung von Webapplikationen an Postfinance und Banksysteme.

Für die Animation braucht man nur jQuery zu implementieren und natürlich sein eigenes Skript, im Beispiel wurde mit jQuery Version 1.6.1 gearbeitet.

Das HTML braucht einen Link „Warenkorb“ und das entsprechende Produktbild, Bsp.-Link:

Warenkorb

(hier wird der Link über eine Javascript Funktionen setLocation getriggert, da das Beispiel in einem Magento Shop implementiert wurde. Den Event fange ich ab, starte die Animation und führe dann den Link mittels ajax aus.)

Die Animation soll starten wenn man den Link auf dem Produkt „Warenkorb“ klickt.

jQuery(".blue_button_link").click(function(event) {
var productIDValSplitter 	= (this.id).split("_");
var productIDVal 			= productIDValSplitter[1];

var productX 		= jQuery("#artikelSliderImageId_" + productIDVal).offset().left;
var productY 		= jQuery("#artikelSliderImageId_" + productIDVal).offset().top;

var basketX 		= jQuery("#WarenkorbIdSidebar").offset().left;
var basketY 		= jQuery("#WarenkorbIdSidebar").offset().top;

var gotoX 			= basketX - productX;
var gotoY 			= basketY - productY;

var newImageWidth 	= jQuery("#artikelSliderImageId_" + productIDVal).width() / 3;
var newImageHeight	= jQuery("#artikelSliderImageId_" + productIDVal).height() / 3;
});

Schritt 1: Wir selektieren den Link (jQuery(“.blue_button_link”)) und starten ab dem click event (.click(function(event)) und schalten darauf unseren Code.

Die nächsten Schritte sind die Selektierung des zum Link gehörenden Bildes und die Berechnung der Positionen des Bildes und des Warenkorbs. Ausserdem noch die Grösse des fliegenden Bildes.

Schritt 2: Zur Selektierung des zum Link gehörenden Bildes, vergeben wir jedem Bild und Link eines Produktes eine ID mit der selben fortlaufen Nummer am Ende der ID (Bsp.:Bild-ID: #artikelSliderImageId_1, Link-ID: link-produktid_1), dies sollte vorher im Template festgelegt worden sein. Die ID setzt sich dann aus dem normalen Namen #artikelSliderImageId
und der fortlaufenden Nummer (Bsp: 1) zusammen, getrennt durch ein underscore („_“). Damit können wir jeden Link der geklickt wird, seinem entsprechende Bild eindeutig zuordnen. Dazu splitten wir die ID (.split(„_“)) durch den underscore wissen wir recht einfach wo unsere fortlaufende Nummer beginnt.

Schritt 3: nun merken wir uns die fortlaufende Nummer

Schritt 4-7: Hier holen wir uns die Position des Warenkorbs bzw. Bild zum linken Rand durch: – Selektierung der Warenkorb/Bild ID (hier kommt die fortlaufende Nummer zum tragen jQuery(“#artikelSliderImageId_”+ productIDVal ) . Mit der jQuery Funktion .offset() bekommen wir die Position relativ zum Dokument und mit .left bzw. .right nur den Wert zum linken/rechten Rand.

Schritt 8/9: Die Berechnung um welchen Wert das zu animierende Bild sich verschieben soll.

Schritt 10/11: Hier wird die Ziel-Bildgrösse des fliegenden Bildes berechnet. Wir selektieren das Bild, holen uns die Breite bzw. Höhe und teilen es einfach durch 3. Das fliegende Bild wird sich also zu einem drittel der Originalgröße während der Animation verkleinern.

Nun zur eigentlichen Animation.
Der reine Code für die Animation ist sehr schlank, wie von jQuery gewohnt:

jQuery("#artikelSliderImageId_" + productIDVal + " img")
		.clone()
		.prependTo("body")
		.css({'position' : 'absolute', 'left': productX , 'top' : productY})
		.animate({opacity: 0.9}, 100 )
		.animate({opacity: 0.6, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth,
                         height: newImageHeight}, 1200, function() {
			$(this).remove();
		});

1: Als erstes das Produktbild, das zum Warenkorb fliegen soll selektieren, mit dem jQuery-Selektor.

2: Der nächste Schritt klont dieses Image, da ja nur ein Kopie des Bildes fliegen soll und das Original normal auf der Seite bleibt.

3: Nun muss man dem geklonten Objekt sagen von wo es los fliegen soll und natürlich wo es im DOM sitzen soll. Das Wo ist leicht zu beantworten, vom Platz des Originalbildes. Die Frage wo es im DOM eingehängt werden soll, kommt auf das Layout an. Normal reicht es wenn man es an das Original mit prependTo auf das Original anhängt (.prependTo(“#productImageWrapID_” + productIDVal)) in meinem Fall ging dies nicht, da manche Produkte in einem Slider mit einem Div Container mit overflow: hidden waren, fliegt das Objekt nun zum Warenkorb würde es verschwinden sobald es den Container verlässt.
Also hängen wir das Objekt einfach an den body und verschieben es mit left, top, position genau auf das Original Produktbild. Endlich haben wir das zu animierende Objekt da wo wir es haben wollen, nun geht es an die eigentliche Animation.

4: Mit jQuery ist das wirklich kein Hexenwerk, als erstes machen wir das fliegende Objekt ein wenig Transparent mit opacity: 0.9 in 100 ms.

5: Jetzt beginnt das eigentliche Fliegen. Wir fangen nochmal mit der Transparenz an, es wird während dem fliegen einfach noch ein wenig transparenter auf den Wert 0.6, der Magic-Point kommt jetzt, mit marginLeft / marginTop. Übergeben wir der animate() Funktion die Werte um welche Werte es sich verschieben bzw. hin fliegen soll. Dann noch die Grösse des Bildes die es haben soll wenn es im Warenkorb ankommen soll, da der Warenkorb oft natürlich nicht die Grösse hat, wie die des Produktbildes. Dann noch die Zeit für die Animation, hier 1200 ms, als Callback Funktion wird zum Schluss der Animation das Element entfernt. Es soll ja nicht auf dem Warenkorb liegen mit einer absoluten Position. Um die richtige Integration des Warenkorbs mit eine Liste wird in einem extra Abschnitt behandelt. Also einfach this.remove() und das Element ist weg.

Uns fehlt jetzt noch der Ajax call:

In dem Beispiel wird ein ganz einfaches verwendet ohne spezielle Ajax Schnittstelle, da diese noch nicht fertig war beim schreiben des Eintrages. Man sendet den normalen Request ab, nur halt über einen Ajax Call und verarbeitet die Antwort. Normalerweise würde man eine richtige Ajax-Api ansteuern, aber dies soll für das Beispiel reichen. Es soll hier auch nicht gross erklärt werden, da es nicht das beste Beispiel ist, nur der Vollständigkeit halber, hauptsächlich ging es ja um die Animation.

jQuery.ajax({
	type: "POST",
	url: substrLinkUrl(this),
	success: function(result){
		var StartIndex = result.indexOf("supporttop");
		StartIndex -= 12;
		var EndIndex= result.indexOf("supportbottom");
		EndIndex -= 12;
		var supportTopContainerHtml = result.substring(StartIndex, EndIndex);

	jQuery(".supporttop").replaceWith(supportTopContainerHtml);
			jQuery(".lastAddedItemName").animate({ "background-color": "#284AB7" },150)
                        .animate({"background-color": "white" },150)
                        .animate({"background-color": "#284AB7" },150)
                        .animate({"background-color": "white" },150, function(){
                        jQuery(".lastAddedItemName").css({"background-color": "transparent"});
			});
		},
		error: function(){
			console.log("Fehler");
		}
	});

Ich habe unseres Beispiel schon in ähnlicher weise gesehen, dort wurde der Ajax Call nach der Animation gestartet, was ich aber für Zeitverschwendung halte, da man die Zeit während der Animation ja perfekt für den Requestzyklus des Ajax Calls nutzen kann.
Also feuern wir den Ajax Call vor der Animation, dann kommt die Animation und wenn der ajax Call fertig ist, aktualisieren wir den Warenkorb mit Hilfe des Resultsets.
Im unseren Fall ziehe ich mir den DIV Container des Warenkorbs aus dem result String heraus, und mit der jQuery Funktion replaceWith() wird er aktualisiert. Danach noch eine kurze blinkende Animation, dass der Kunde mitbekommt dass es fertig ist.

Fertig.

Thomas Meyer
Er hat die Ausbildung zum Fachinformatiker erfolgreich abgeschlossen und bereits erste Erfahrungen bei Seitenbau GmbH in Konstanz gesammelt.
Herr Meyer unterstützt das Softwareentwicklungsteam als Web- und Softwareentwickler ab dem 1. Juli 2011.

Job
Wir suchen ab sofort Screendesigner/in
Jobsseite

Wir freuen uns auf Deine Kontaktaufnahme.

Auf den ersten Blick ist Google+ erst mal ganz anders als Facebook und überhaupt nicht zu vergleichen.

Google+ hat eine ganz andere Oberfläche und Bedienung, ist modular aufgebaut und bestehende Dienste wie YouTube, Picasa, GMail werden nahtlos integriert und bietet differenzierte wie auch neue Moglichkeiten im Vergleich zu Facebook.

Auf den ersten Blick scheint Google diesmal mit Google+ wesentlich besser zu machen als mit vergangenen Flops wie z.B. Wave.

Allein schon das Userinterface ist sehr gelungen!
Google+ hat bei der Umsetzung und Konzipierung auf den ersten Blick zu Facebook einige Verbesserungen gemacht wenn man z.B. die Module/Funktionen: Circles, Sparks, Hangouts und Huddle anschaut.

The Google+ project: A quick look

Nun wird sich zeigen ob die User von Facebook, dass mittlerweile auch nur noch etwa so interessant wie das Telefonbuch ist, zu Google+ abwandern.

Offizieller Blogbericht über Google+
Google+ Einladung
Website von Google über Google+