Bootstrap – Ein Framework für Responsive Webpages

Webseiten sollten heutzutage nicht nur auf dem Desktop gut aussehen, sondern auch auf mobilen Endgeräten unterschiedlicher Größe (z.B. Tablet oder Smartphone). Wenn sich die Darstellung einer Webseite automatisch an die Größe des Bildschirms des Endgeräts anpasst, spricht man von „Responsive Webpages“.

Ein interessantes Framework in diesem Bereich ist Bootstrap, das ursprünglich von Twitter entwickelt wurde. Durch eine umfangreiche CSS und JavaScript-Bibliothek ist es relativ einfach, ansprechende responsive Webseiten zu gestalten, die beispielsweise Navigationsleisten enthalten, die je nach Bildschirmgröße in ein Dropdown-Menü „kollabieren“ (siehe Abbildung). Die verwendeten CSS-Dateien können auch angepasst bzw. konfiguriert werden (dazu wird u.a. auch eine separate Sprache LESS verwendet, die vor der Verwendung in CSS compiliert werden muss).

Ich selbst habe heute meine erste kleine Bootstrap-Seite gemacht (Codeenvy als Cloud-Editor und Google App Engine als Ablaufumgebung).

Mein Fazit: Es tut irgendwie, aber ich werde in diesem Leben kein Web / Javascript -Frontendentwickler mehr 🙂

Für erfahrene Frontendentwickler sicher eine gute Sache … es ist eines der beliebtesten Projekte auf GitHub.

Responsive Seiten mit Bootstrap
Responsive Seiten mit Bootstrap

Oliver Höß

Cloud IDEs – Entwicklungsumgebungen in der Cloud

Im Rahmen des Cloud-Trends sind bereits eine Reihe von Ablaufumgebungen, wie z.B. die Google App Engine (GAE) oder Amazon Elastic BeansTalk, nach dem PaaS-Paradigma (Platform-as-a-Service) in die Cloud gewandert. Daher ist es naheliegend, sich auch mit der Migration der IDEs in die Cloud zu beschäftigen, so dass die Softwareentwicklung von überall, insbesondere ohne eine lokale Entwicklungsinfrastruktur, erfolgen kann (DaaS, Development-as-a-Service).

In der letzten Zeit haben sich daher eine Reihe von Entwicklungsumgebungen in der Cloud entwickelt, die naturgemäß bereits Schnittstellen zu weit verbreiteten PaaS-Umgebungen und Cloud-basierten Sourcecode-Management-Systemen (z.B. auf GIT-Basis) besitzen und primär für die Web (HTML/CSS/JavaScript) bzw. Mobil-Entwicklung gedacht sind. Beispiele hierfür sind:

  • Codenvy (u.a. für Java, PHP, Python, Node.js, kostenlose Basis-Version)
  • Orion Hub (kostenlos, basiert auf Eclipse Orion, u.a. Java, erweiterbar über PlugIns)
  • Cloud9 (freie Einstiegsversion, u.a. PHP, Python, Ruby, Node.js, Collaboration-Features)
  • DevTable (freie Einstiegsversion, auch ausgefallene Features, z.B. LaTeX)

Im Internet gibt es eine Reihe von relativ ausführlichen Gegenüberstellungen (z.B. hier, hier und hier). Naturgemäß verändern sich diese Plattformen jedoch schnell, so dass eine Untersuchung immer nur einen aktuellen Stand darstellen kann.

In der folgenden Abbildung ist beispielhaft der Wizard für die Erstellung eines neuen Projekts in der Cloud IDE Codenvy dargestellt. Nach einer Auswahl der Technologie bzw. Entwicklungssprache (z.B. Java Web Application, Python, PHP, …) kann in einem zweiten Schritt eine passende PaaS-Umgebung (z.B. Google App Engine, Heroku, AWS Elastic Beanstalk, …) ausgewählt werden. Beispielsweise kann auch die in einem früheren Blog-Eintrag beschriebene Kombination PHP auf der Google App Engine gewählt werden, so dass sehr schnell ein Projekt zum Laufen gebracht werden kann.

Die Cloud IDE Codenvy - Neues Projekt anlegen
Die Cloud IDE Codenvy – Neues Projekt anlegen

Oliver Höß

Google App Engine unterstützt jetzt auch PHP

Die Google App Engine (GAE) unterstützt seit Oktober 2013 nun auch die beliebte Web-Entwicklungssprache PHP.

Die Google App Engine ist eine Plattform, die gemäß dem PaaS-Paradigma (Platform-as-a-Service) im Rahmen der Google Cloud Platform das Deployment von Anwendungen in der Cloud unterstützt. Eine geringfügige Nutzung ist kostenlos, für die volle Funktionalität fallen Kosten an. Neben den bereits seit längerem angebotenen Sprachen Java, Python und Go ist seit Oktober auch PHP verfügbar.

Es wurden bereits eine Reihe von PHP-basierten Anwendungspaketen, z.B. WordPress, auf der App Engine zum Laufen gebracht (ein Tutorial finden Sie hier). Ggf. sind kleinere Anpassungen, z.B. hinsichtlich der persistenten Speicherung von Daten mit Google Cloud SQL notwendig. Nach einer ersten Untersuchung scheint es so, dass bei Google Cloud SQL jedoch leider das Paradigma der kostenlosen Nutzung der Einstiegsvariante nicht mehr gilt.

PHP-Unterstützung in der Google App Engine
PHP-Unterstützung in der Google App Engine

Oliver Höß

XING-Kontakte graphisch visualisieren – ShowMyContacts

Mit ShowMyContacts (showmycontacts.appspot.com) können die XING-Kontakte in einer Karte visualisiert werden.

Ursprünglich wurde ShowMyContacts als Demo-Anwendung im Rahmen eines iX-Artikels zur Nutzung der XING-API entwickelt und war auf die Darstellung von 42 Kontakten beschränkt.

Da die Anwendung als solche auf positive Resonanz gestoßen ist (Danke an TS), wurde die Anwendung nun erweitert. Im Vergleich zur ursprünglichen Version können nun alle Kontakte dargestellt werden (mit bis zu 1075 Kontakten getestet). Möglich wurde dies durch einen Wechsel des GeoCoding-Services (von Google zu http://open.mapquestapi.com/).

Natürlich sind noch ein paar Bugs drin und es bestehen auch noch Weiterentwicklungspotenziale … Feedback ist durchaus erwünscht.

ShowMyContacts
ShowMyContacts

Oliver Höß

Soziale Netzwerke integrieren – Beispiel XING API

UPDATE (22.12.2016): XING hat bekannt gegeben, die öffentliche API nicht mehr zu supporten und nur noch mit ausgewählten Partnern zusammen zu arbeiten. Eine Neuregistrierung ist nicht mehr möglich. Schauen wir mal, wie lange bestehende Applikationen, wie z.B. ShowMyContacts noch auf die API zugreifen können … echt schade und läuft dem globalen Trend eher entgegen 🙁

Seit Anfang 2013 hat das im deutschsprachen Raum sehr beliebte Business-Netzwerk XING eine öffentlich zugängliche Schnittstelle  (API, Application Programming Interface) veröffentlicht. Über diese Schnittstelle können nach einer Registrierung die wesentlichen Daten und Funktionalitäten von XING in eigene Anwendungen integriert werden.

Auf dieser Basis sind bereits eine Reihe von Anwendungen entstanden, die in der AppGallery von XING ersichtlich sind. Eine einfache Demo-Anwendung, die die Darstellung von Kontakten auf einer Google-Karte zeigt, ist unter showmycontacts.appspot.com abrufbar.

Weitere Informationen zur XING API finden Sie unter dev.xing.com oder in einem netten Übersichtsartikel in der Zeitschrift iX in der Ausgabe 7/2013.

The XING Developer Page
The XING Developer Page

Oliver Höß