Gestatten, ich mache Internet!

Severin Glöckle

Hey! Ich bin Severin und ich mache Internet. Von mir erstellte  Webseiten glänzen durch den Einsatz modernster Technologien und sind nach aktuellen Standards umgesetzt. Ein ansprechendes Design ist mir dabei genauso wichtig wie optimale Usability und Barrierefreiheit. Außerdem entwickle ich Webapps, die dem Nutzer den Komfort von Desktopanwendungen in den Browser bringen. Dabei ist Javascript die Sprache meiner Wahl.

Es funktioniert - und sieht gut aus

Jedes Projekt bekommt meine volle Aufmerksamkeit und ist genau dann fertig, wenn es nicht nur funktioniert, sondern auch gut aussieht. Durch meine hohe Motivation und Ausdauer halte ich Termine und Deadlines stets ein. Auf Nachrichten und Fragen antworte ich schnell und zuverlässig. Probier es doch einfach aus!

Es funktioniert nicht nur, es sieht auch gut aus!

HTML/CSS
JavaScript
PHP
UX Design
Javascript aktivieren

Bitte schalte Javascript in deinem Browser ein, um mehr über meine Skills zu erfahren!

HTML/CSS

Die Erstellung von Designs für Webseiten und Webapplikationen, sowie deren Umsetzung in validem HTML- und CSS-Code stellt für mich kein Problem dar. Ich beherrsche die CSS3-Spezifikationen ebenso wie die semantischen Auszeichnungen nach dem HTML5-Standard.

JavaScript

Von einfacher DOM-Manipulation bis zur Programmierung von Webapplikationen: JavaScript ist die Sprache meiner Wahl. Dabei habe ich stets den Anspruch, in einem sauberem und modernem Stil zu programmieren. Sei es mit jQuery, Backbone.js oder mit purem JavaScript.

PHP

Saubere und skalierbare Backend-Systeme, am besten mit einem RESTenden Server? Gerne. Ich arbeite mit PHP - selbstverständlich objektorienitert und nach dem MVC Prinzip.

User Experience

Nutzerzentrierte Entwicklung (= ein iterativer Entwicklungsprozess) allein reicht heute nicht mehr aus. Daher schreibe ich meine Bachelor-Thesis über den Stellenwert von Storytelling und Gamification für die User Experience. Interessant? Ich berichte gerne darüber!

Was ich mache:
  • Webdesign
  • Webdevelopment
  • Social Media
  • User Experience
Komplette Übersicht

Detaillierte Informationen gibt's hier.

Das kann ich, das mach ich!

Webseite: GADOW

Webdesign | Corporate Design | CMS Joomla | PHP | JavaScript

» Zur Webseite

Im Rahmen eines interregionalen EU-Projektes wird die Zusammenarbeit deutscher und dänischer Offshore-Unternehmen verbessert. Einen ersten Schritt stellt eine bessere Vernetzung der Unternehmen dar. Aus diesem Grund entstand in Zusammenarbeit mit dem FuE-Zentrum Kiel die Webseite www.gadow-offshore.net.

Mehrere hundert Unternehmen

Die Webseite umfasst final mehrere hundert Unternehmen, die sich grob in wirtschaftliche Unternehmen und Forschungseinrichtungen gliedern lassen. Da in der Branche häufig regionale Nähe von Bedeutung ist, beinhaltet das Verzeichnis eine interaktive Karte. Auf dieser werden aktuelle Suchergebnisse dargestellt und direkt verlinkt. Die Umsetzung der Karte baut auf der GoogleMaps API von Google auf.

Deutsch, Dänisch und Englisch

Eine besondere Herausforderung der Webseite besteht in der Tatsache, dass die Inhalte in drei Sprachen (Deutsch, Dänisch und Englisch) verwaltet werden müssen. Um diese Verwaltung so leicht und komfortabel wie möglich zu gestalten werden sehr viele Inhalte durch einen zentralen Sprachen-Override gespeist.

Webseite: Gaunerkartei

Webdesign | JavaScript | PHP | CMS Contao

» Zur Webseite

In der Gaunerkartei finden sich weit über einhunderttausend Einträge von Straftätern seit dem 15. Jahrhundert. Insbesondere Ahnenforscher werden die Suchmaschine und das komfortable Bestellsystem der Webseite zu schätzen wissen, mit dem sich die Masse an Einträgen effektiv durchsuchen lässt.

Bestellung on the fly

Gefundene Einträge können direkt von der Seite aus bestellt werden, auf der sie gefunden werden (Stichwort Conversion). Bei weiteren Bestellwünschen werden die bisher angeforderten Namen via Cookie gespeichert.

100.000 Minuten gespart

Die Einträge wurden bisher mit Microsoft Works verwaltet. Für die Migration habe ich einen Converter geschrieben, der nicht nur die bisher einzeiligen Einträge sauber auftrennt, sondern auch Fehler meldet und eine komfortable Wartung und Recherche in der Datenbank ermöglicht.

Webseite: FINO3

Webdesign | Corporate Design | CMS Joomla

» Zur Webseite

Die Konzeption und Entwicklung der Webauftritte www.fino1.de und www.fino-offshore.de gefiel dem Kunden so gut, dass direkt ein Auftrag zum Relaunch der Webseite www.fino3.de folgte. Ähnlich der vorangegangenen Webseiten stellt die Seite die FINO3-FOrschungsplattform und das Projekt vor. Außerdem kann auf Livedaten und Webcambilder der Station zugegriffen werden.

Design 2.0

Aufbauend auf der Gestaltung der beiden vorangegangenen Webseiten kleidet sich die FINO3-Webseite ebenfalls in das entwickelte Corporate Design. Dennoch wurden nahezu alle Elemente der Seite im Vergleich zu FINO1 weiterentwickelt und verfeinert. So erscheinen die beiden Seiten einheitlich, aber nicht identisch.

Viel Joomla, etwas PHP

Die Umsetzung der Webseite erfolgt mit dem CMS Joomla. Zuästzlich sind Features wie die Einbindung der Livedaten direkt von der Forschungsstation und das interaktive Glossar selbst programmiert worden.

Webseite: Gesundheit studieren in Schleswig-Holstein

Webdesign | CMS Contao | PHP | JavaScript

» Zur Webseite

In Schleswig-Holstein gibt es zahlreiche Studiengänge im Gesundheitsbereich. Um diese komfortabel durchsuchen und ansteuern zu können, ist das Internetportal www.gesundheit-studieren-sh.de entstanden.

Zusammenarbeit mit dem Präsidium der FH Kiel

Die Webseite entstand in enger Absprache mit dem Präsidium der Fachhochschule Kiel. Grundlegende Überlegungen wurden anhand interaktiver Prototypen ('Axure RP') diskutiert, um möglichst früh übereinstimmende Vorstellungen des Projektes zu erhalten.

Komfortable Suchfunktion..

Da das Durchsuchen der Studiengänge die Kernfunktion der Webseite darstellt, ist dieser Vorgang so komfortabel und ansprechend wie möglich gestaltet. Mittels JavaScript können die einzelnen Einträge interaktiv gefilter werden. Zusätzlich können Studiengänge direkt angesteuert werden, sowie entsprechend ihren Hochschulen auf einer Karte Schleswig-Holsteins gesucht werden.

..und leichte Verwaltung

Die Verwaltung der Studiengänge erfolgt über einen Katalog im Backend. Auf diese Weise können einzelne Einträge leicht und strukturiert hinzugefügt bzw. bearbeitet werden. Bei Projektabschluss erhielten die verantwortlichen Mitarbeiter der FH Kiel zudem eine kurze Schulung, sowie eine Anleitung zur Verwaltung der Seite.

PHP: [PHP framework]

Webentwicklung | PHP | MVC | Bootstrap

» Zur Webseite

Für das Abschlussprojekt des Fachs 'Sicherheits- und Kundenbindungskonzepte im Web' an der FH Kiel waren keine größeren PHP Frameworks gestattet. Da ich ohnehin schon lange Lust darauf hatte, ein eigenes Framework zu schreiben, war das der richtige Moment.

Eine MVC-Boilerplate

Das Framework - wenn auch noch in den Kinderschuhen - ermöglicht MVC-konformes Programmieren der eigenen Webapplikation und stellt einige hilfreiche Helper-Funktionen (redirect, sessions, bootstrap_navigation, etc.) bereit. Zudem bietet das integrierte Template eine HTML5 Boilerplate, erweitert um das CSS und JavaScript von Bootstrap.

Die Migration zu Github ist geplant.

Webseite: FINO1,2,3

Webdesign | Corporate Design | CMS Joomla | JavaScript

» Zur Webseite

Das Thema Windenergie und die damit verbundene Entstehung von Offshore-Windparks spielt in der Wirtschaft sowie in der Gesellschaft eine zunehmende Rolle. Auf der Webseite der Forschungsplattform FINO1 soll in Anlehnung an die Webseite der FINO3-Plattform ein Überblick über die Ziele und Hintergründe des Forschungsprojektes gegeben werden. Zudem werden aktuelle Messergebnisse, sowie interessante Erlebnisse und Meldungen in Blog-ähnlicher Form präsentiert

Ein einheitliches Design

Gleichzeitig mit dieser Webseite wird eine Webseite für die Forschungsplattform FINO1 erstellt. Im Vordergrund steht die einheitliche Präsentation des gesamten Projekts, die durch die Erstellung eines gemeinsamen Corporate Designs erreicht wird.

Viel Joomla, etwas PHP

Die Umsetzung der Webseite erfolgt mit dem CMS Joomla. Zuästzlich sind Features wie die Einbindung der Livedaten direkt von der Forschungsstation und die interaktive Karte selbst programmiert worden.

Flash Adventskalender

Screendesign | Flash | ActionScript 3

» Zum Adventskalender

Die Fachhochschule Kiel hat im Winter 2010 einen Wettbewerb für einen interaktiven Weihnachtsgruß ausgeschrieben. Gewonnen hat meine Einsendung eines interaktiven Adventskalenders.

Als Flash noch lebte

Der Adventskalender ist mittels Flash in ActionScript 3 umgesetzt. Die Inhalte der einzelnen Türchen lassen sich dabei komfortabel aus einer XML-Datei heraus steuern. Heutzutage würde ich den Kalender jedoch auf Basis von Canvas und JavaScript umsetzen, um iPhone- und iPad-Besitzer nicht auszuschließen.

Social Media: FINO auf Facebook

Social Media | Facebook | Screendesign | CMS Joomla

» Zur Webseite

Mehr Informationen kommen...

Webseite: Online Portfolio

Webdesign | CMS Contao | JavaScript

» Zur Websei.. Du bist schon drauf!

Online-Portfolios bieten die ideale Möglichkeit, eigene Arbeiten und Kenntnisse optimal zu präsentieren. In diesem Fall stellt die Webseite selbst bereits eine praxisnahe Demonstration der eigenen Fähigkeiten dar.

Technische Besonderheiten

Ein persönliches Corporate Design dient als Gestaltungsgrundlage, das fertige Design ist in Adobe Fireworks gestaltet worden. Die Seite basiert auf dem CMS Contao, dessen Templates an den eigenen Bedarf angepasst wurden. Mittels JavaScript - insbesondere mittels jQuery - werden sämtliche Inhalte der Seite dynamisch geladen, ein Neuladen der Seite wird komplett verhindert. Dies führt zu einer besonders angenehmen und fließenden Nutzererfahrung. Dennoch funktioniert die Webseite auch komplett ohne JavaScript, jedoch muss dabei auf einige Annehmlichkeiten verzichtet werden. Insbesondere für die Gestaltung interaktiver Elemente wurde CSS3 eingesetzt und die komplette Webseite ist nach dem neuen HTML5-Standard strukturiert. Das komplette JavaScript - bis auf die Einbindung meiner Songs und das Portfolio - der Webseite ist selbst programmiert, lediglich das jQuery-Framework wurde eingebunden.

Webseiten-Relaunch: FINO1

Webdesign | Corporate Design | CMS Joomla

» Zur Webseite

Das Thema Windenergie und die damit verbundene Entstehung von Offshore-Windparks spielt in der Wirtschaft sowie in der Gesellschaft eine zunehmende Rolle. Auf der Webseite der Forschungsplattform FINO1 soll in Anlehnung an die Webseite der FINO3-Plattform ein Überblick über die Ziele und Hintergründe des Forschungsprojektes gegeben werden. Zudem werden aktuelle Messergebnisse, sowie interessante Erlebnisse und Meldungen in Blog-ähnlicher Form präsentiert

Ein einheitliches Design

Gleichzeitig mit dieser Webseite wird eine Webseite für das gesamte 'FINO'-Projekt erstellt. Im Vordergrund steht die einheitliche Präsentation des gesamten Projekts, die durch die Erstellung eines gemeinsamen Corporate Designs erreicht wird.

Viel Joomla, etwas PHP

Die Umsetzung der Webseite erfolgt mit dem CMS Joomla. Zuästzlich sind Features wie die Einbindung der Livedaten direkt von der Forschungsstation und das interaktive Glossar selbst programmiert worden.

Social Media: Funkel Mode auf Facebook

Social Media | Facebook | Screendesign

» Zur Webseite

Mehr Informationen kommen...

Social Media Auftritte

Social Media | Webdesign

Links zu den Profilen auf 'Facebook' | 'Google+' | 'Twitter' | 'XING'

Die Auftritte in den Netzwerken erweitern die eigene Präsenz deutlich und schaffen bei entsprechender Nutzung zusätzliche Kommunikations- und Networkingplattformen. Nützlich ist insbesondere die Möglichkeit, eigene Arbeiten und Artikel leicht und effektiv bewerben zu können

Die vier großen Netzwerke

Im Rahmen meines "Self-Promotion Kits" sind ansprechend gestaltete Auftritte in den Netzwerken 'Facebook', 'Google+', 'Twitter' und 'XING' entstanden. In der 'Facebook'-Page wird via I-Frames eine Webseite eingebunden, die unter anderem über eine interaktive Galerie und ein Kontaktformular verfügt. Insgesamt wurde darauf geachtet, die für jedes Netzwerk spezifischen Anforderungen und Möglichkeiten optimal auszunutzen.

Technische Umsetzung

Die verwendeten Fotos sind speziell für die jeweiligen Netzwerke geplant und umgesetzt worden. Die grafische Gestaltung der Profile erfolgte zuert in Form von Dummies mithilfe des Mock-Up Programms 'Balsamiq Mockups' und wurde anschließend in Photoshop umgesetzt.
Die 'Mini-Webseite' ist in HTML und CSS implementiert und via jQuery interaktiv aufgewertet worden.

Designentwurf: büro94

Screendesign | Webdesign

Mehr Informationen kommen...

Webseite: i2Digital

Webdesign | CMS Joomla

» Zur Webseite

Die Webseite des studentischen Teams von i2Digital.de gibt einen Überblick über angebotene Leistungen, Referenzen und Kontaktmöglichkeiten der 'Mini-Agentur'. Auch ein Corporate Blog und Profile der Mitarbeiter sind vorhanden.

Content-Management-System Joomla

Der Internetauftritt wurde auf Basis des CMS Joomla umgesetzt. Es wurde ein eigenes Template angelegt, das mit eigenem HTML-Code angepasst und via CSS gestylt wurde. Die grafische Umsetzung der Seite erfolgte in Adobe Fireworks, das Corporate Design wurde größtenteils in Adobe Illustrator entworfen.

Webseite: GADOW

Webseite: Gaunerkartei

Webseite: FINO3

Webseite: Gesundheit studieren in Schlewig-Holstein

PHP: [PHP framework]

Webseite & Social Media: FINO Offshore

Flash Advenstkalender

Social Media: FINO auf Facebook

Portfolio Webseite

Webseite: FINO1

Social Media: Funkel Mode auf Facebook

Social Media

Designentwurf: büro94

Webseite: i2Digital

Fragen, Interesse, Networking? Schreib mir!




2 + 9?
Severin Glöckle

tl_files/content/home32.pngStubenrauchstraße 53
24248 Mönkeberg

Download

Was sonst noch zu erwähnen ist

Meine Musik

Seit Jahren gibt es für mich den perfekten Ausgleich zur Arbeit am Computer: meine Gitarre. Einige Stücke haben es schon auf CD geschafft. Lust zum Reinhören?

Multimediale Arbeiten

Im Rahmen meines Studiums "Multimedia Production" an der FH Kiel sind zahlreiche Werke von Filmen über Audios bis hin zu 3D-Animationen entstanden. Eine kleine Auswahl gibt es hier.

Was ich zur Zeit mache

Ich tickere meine Arbeitszeit immer mit, um einen Überblick zu bekommen, was ich eigentlich den ganzen Tag mache. Jeden Monat gibt's hier eine Übersicht.

Gute Bücher, Blogs & Webseiten

Von O'Reilly bis John Resig: Schön, wenn mir jemand diese Quellen empfohlen hätte. Reinschauen!