cms-technologien für next generation websites
DESCRIPTION
Was darf man von den neuesten Content Management Systeme (CMS) und Technologien wirklich erwarten? Was leisten Software Tools und online Plattformen wie: - Tumblr- Wordpress- Drupal- jQuery / Phonegap / MobifyUnd vor allem welches Tool ist das richtige für welchen Zweck?Prodosh Banerjee bespricht anhand von Beispielen wie die folgende "Use Cases" mit den neuesten Content Management Tools optimal gelöst werden können:- Ein Blog mit Facebook und Twitter Integration- Eine informative Webseite mit Newsletter, Blog und Foren z.B.für eine Firma Eine "User Generated Content" Webseite integriert mit Facebook, Twitter, Foursquare usw.Eine Marketing Webseite mit speziellen Landing Pages, Suchmaschinen-Optimierung und Social Media Integration- Mobile Webseite auf der Basis der CMS ohne einem App zu bauen- Eine Social Media Dienst wo die Nutzer miteinander interagieren können.TRANSCRIPT
CMS-‐Technologien für Next Genera7on Websites
Absolutely No Limits -‐ www.anolim.com
Prodosh Banerjee, Managing Partner
Agenda
Was sind NG Websites?
DIY (Do It Yourself) Tools: Tumblr
Flexibel, erweiterbar, Enterprise-‐Klasse: Drupal
Einfach mit vielen Features: Wordpress
Ergänzungen: Mobify, Phonegap, jQuery
NG Web / CMS
Technologie
Interak7on mit dem Besucher
Mul7-‐medial
Dyn. Inhalte / “mash-‐ups”
Externe Dienste integriert
SchniZ-‐stellen / APIs
“Widge7za7on”
Mobile
Ecommerce integriert
NG Webseiten – ein paar Beispiele ...
Next Genera7on Webseiten hZ
p://www.now
public.com
Next Genera7on Webseiten hZ
p://www.cabinetoffi
ce.gov.uk
Next Genera7on Webseiten hZ
p://socialmed
ia.ano
lim.com
Next Genera7on Webseiten hZ
p://www.pinkspage.com
Tumblr Überblick
Eigenscha* Details
Design ✔ Viele schöne “Themes” verfügbar
Blog ✔ Perfekt
Bilder, Videos ✔ Flickr, YouTube usw.
Social ✔ Facebook, TwiZer usw.
Schnell ✔ Keine Programmierung notwendig
Flexibilität ✗ Nicht programmierbar
Portabilität ✗ Nicht gewährleistet
Blog: schön, interak7v
Tumblr Use Case
Blog: gut gestaltet, interak7v
Tumblr Use Case
Weitere Tumblr Beispiele
hZp://crookedindifference.com/
hZp://www.stoweboyd.com/
hZp://www.stoweboyd.com/
hZp://copycats.tumblr.com/
Tumblr Check: NG Kriteria
Eigenscha* Details
Interak7on ✔ Reichlich
Externe Dienste ✔ Flickr, YouTube, Facebook, TwiZer uvm.
APIs ✗ Minimal
Mash-‐ups ✗ Limi7ert
Widge7za7on ✗ Nicht wirklich
Mobile ✗ Ja, aber minimal
Ecommerce ✗ Nein
Tumblr Alterna7ve: VIRB
Drupal
Content Management Framework
Content Management System
Lego mit 10’000 Modulen
Programmier Tool
Webseite ohne Programmierung zusammenstellen
Hosted: hZp://drupalgardens.com
Drupal: 2% der Webseiten weltweit
hZp://www.drupalgarde
ns.com
/
Drupal Überblick Eigenscha* Details
Komplexe Systeme ✔ Perfekt geignet
Modular ✔ Lego-‐ar7g, 10’000+ Module
Flexibilität ✔ Gut dokumen7erte PHP Framework
Bilder, Videos ✔ Eigene Gallerien, Flickr, YouTube uvm.
Social ✔ +1, Facebook, TwiZer uvm.
Design ✔ Viele Themes
Portabilität ✔ Immer möglich
Skalierbar ✔ Für sehr grosse Seiten geeignet
Meistern ✗ Braucht viel Zeit DIY ✗ Partner Unterstützung notwendig
Drupal Beispiele
Medien / Unterhaltung
• DRS • Edipresse • Axel Springer • BBC • Economist • MTV • France 24 • Al-‐Jazeera • Pink • Eric Clapton • Robbie Williams • Beyonce
Öffentliche Hand / Non-‐Profit
• GB • Frankreich • White House • USA House of Reps
• WEF • London • Weltbank • Belgien
Industrie
• ING Bank • TwiZer • Intel • Zappos • AT&T • Garmin • Fedex • Ericsson • IKEA • Expedia • Tesla Motors
Bildung
• Stanford • MIT • Harvard • Duke
Bekannteste Drupal Webseite hZ
p://www.whiteho
use.gov/
Drupal Mul7medial + Social Media hZ
p://www.pinkspage.com
… Zeitschrir mit Ecommerce hZ
p://www.bilanz.ch/
CH Poli7k: Mul7medial mit Social Media hZ
p://www.isaacreb
er.ch/
CH Ecommerce … hZ
p://www.isaacreb
er.ch/
Search Engine Op7mierung hZ
p://www.levelte
ndesign.com/seo
-‐too
ls
Drupal: Fer7ge Lösungen
Medien: Open Publish
Ecommerce: Drupal Commerce, Ubercart
Government: Open Public
Intranet: Open Atrium
Nachrichten / Mashup: Managing News
High Performance: Pressflow
Drupal Check: NG Kriteria
Eigenscha* Details
Interak7on ✔ Reichlich
Externe Dienste ✔ Flickr, YouTube, Facebook, TwiZer uvm.
APIs ✔ Alles via API zugänglich (gute Doku)
Mash-‐ups ✔ Ideal
Widge7za7on ✔ Kein Problem
Mobile ✔ Ja, über Mobilfy und andere Module
Ecommerce ✔ Drupal Commerce, Ubercart
Wordpress
Blog mit CMS
Programmierbar / API
Webseite ohne Programmierung zusammenstellen
Viele schöne Themes (> 1400 Templates)
Viele Zusatzmodule (>16’000)
Hosted: hZp://wordpress.com
Wordpress Überblick Eigenscha* Details
Erweiterbar ✔ Sehr viele Erweiterungen
Design ✔ Viele gute Vorlagen (>1400 Themes)
Blogs, News ✔ Ideal
Bilder, Videos ✔ Flickr, YouTube uvm.
Social ✔ Facebook, TwiZer, +1 uvm.
APIs ✔ Alles in PHP Bibliotheken
Portabilität ✔ Immer möglich
DIY / Meistern ✔ Es kann ohne Hilfe viel erreicht werden
Skalierbarkeit ✗ Nicht beliebig skalierbar
Wordpress – Tech Blog hZ
p://gigaom
.com
/
Wordpress – Tech Blog hZ
p://techcrun
ch.com
/
Wordpress Webseite hZ
p://typo
graphica.org/
Wordpress Webseite hZ
p://www.ta
ylorandrew
.com
/
Wordpress mit Ecommerce hZ
p://icon
dock.com
/
Wordpress Webseite hZ
p://worldpo
pvideo
s.com/
Wordpress Check: NG Kriteria
Eigenscha* Details
Interak7on ✔ Reichlich
Externe Dienste ✔ Flickr, YouTube, Facebook, TwiZer uvm.
APIs ✔ Alles via API zugänglich (gute Doku)
Mash-‐ups ✔ Möglich aber nicht einfach
Widge7za7on ✔ Kein Problem
Mobile ✔ Ja, über Zusatzmodule
Ecommerce ✔ Viele Ecommerce Module verfügbar
Zusätzliche NG Webseiten Tools
Phonegap: Mit HTML5 + CSS + Javascript na7ve cross-‐plaworm apps bauen
Mobify: bestehende Webseiten mobile-‐fähig machen
Jquery: Verbreitetste Javascript Tool für RIA
NG Web Technologie: Zusammenfassung
Lösung SaaS PaaS So*ware Preis
Tumblr ✔ ✗ ✗ Gra7s
Virb ✔ ✗ ✗ Ab $10/mo
Wordpress ✔ ✔ Open Source Gra7s +
Drupal ✔ ✔ Open Source Gra7s +
Expression Engine ✗ ✗ Proprietär Einmalige Lizenzgebühren
jQuery ✗ ✗ Open Source Gra7s
Mobify ✗ ✔ Proprietär Gra7s +
Phonegap ✗ ✔ Open Source Gra7s +
Präsenta7on: hZp://anolim.com/blog
Absolutely No Limits -‐ Anolim.com
Consul7ng – Technologie – Design Strategie -‐ Entwicklung
Anolim Porwolio