Instanzensystem

Auftraggeber

› Inwestra AG

Leistungen

  • Layout-Umsetzung (HTML)
  • webFormat CMS mit Instanzensystem
  • Mail-Benachrichtigungssystem
  • Foto-Galerien
  • Animationen mit jQuery

Beschreibung

Die von smiroka gestaltete Website wird mit HTML

HTML (Hypertext Markup Language)
x

HTML ist die "Sprache" des Internet. Egal ob eine Website statisch aufgebaut ist, oder ob die Inhalte aus einer Datenbank stammen, hinter jeder Website versteckt sich HTML-Quelltext. Dabei handelt es sich um eine Seitenbeschreibungs- nicht um eine Programmier-Sprache. Das heisst, mit HTML wird definiert, wie die einzelnen Elemente dargestellt und platziert werden.
Im Gegensatz zu Printprodukten besitzt ein Bildschirmfenster keine feste Grösse. Deshalb können Layoutelemente, Textabschnitte oder Bilder oft nicht einfach fixiert werden, sondern sie müssen sich in Grösse und Position den Benutzereinstellungen anpassen.
Dies kommt besonders bei barrierefreien Websites zum Tragen, welche Menschen mit Sehschwäche oder motorischen Einschränkungen entgegenkommen.
Somit ist die Umsetzung einer grafischen Vorlage in HTML-Code nicht nur technische Angelegenheit, sondern immer auch gestalterische Tätigkeit. Erschwerende kommt dazu, dass die unterschiedlichen Browser (z.B. InternetExplorer oder Firefox) den HTML-Quelltext teilweise sehr unterschiedlich interpretieren. Eine saubere Umsetzung setzt somit einiges an Erfahrung und Wissen voraus und macht ausgiebige Tests unabdingbar.
umgesetzt und im webFormat-eigenen CMS

CMS (Content Management System)
x

Das Internet wird immer schnelllebiger, immer höher die Ansprüche an die Aktualität. Aktualisierungen im Tages- oder Stundentakt sind längst an der Tagesordnung. Damit Anpassungen in dieser Frequenz vorgenommen werden können, muss der Betreiber einer Website auf einfache Art direkt selbst seine Inhalte bearbeiten können. Zu diesem Zweck werden so genannte Content Management Systeme (CMS) eingesetzt.
Im einfachsten Fall können mit einem CMS nur neue News-Texte für die Startseite erfasst werden. Üblicherweise, lassen sich aber auch Seiten neu erstellen, Bilder einbauen, und die Navigationsstruktur kann verändert werden.
Ein "gutes" CMS stellt immer exakt die Funktionen zur Verfügung, die der Benutzer auch tatsächlich benötigt. Denn zu viele Spielereien und Einstellmöglichkeiten machen die Bedienung unnötig kompliziert und unübersichtlich.
Gleichzeitig sorgt das CMS dafür, dass der Benutzer nur die Inhalte bearbeiten kann, nicht aber ungewollt oder wieder besseren Wissens in die Gestaltung eingreift. Gerade wenn mehrere Persoen an einem Projekt beteiligt sind, ist es sinnvoll, wenn die Gestaltung auch im Detail vorgegeben ist (z.B. die Schriftgrösse einer Überschrift), damit trotzdem ein einheitliches Bild entsteht.
aufgebaut.
Die Inwestra AG verwaltet mehrere Gebäude. Diese werden im Hauptprojekt dargestellt. Für das Neubauprojekt "Am Parkweg" wird eine eigene inhaltich und gestalterisch an das Hauptprojekt angelehnte Seite gewünscht. Deshalb wird das Projekt als Instanzensystem programmiert, so dass sich von den einzelnen Gebäuden separate Unterseiten erstellen lassen; dies ist in Zukunft für weitere Neubauten von Vorteil (es entstehen dann für den Kunden keine weiteren Kosten mehr). Vor allem müssen auf diese Weise die teilbar identischen Inhalte nur einmal erfasst werden.
Es gibt Anmeldeformulare für freie Wohnungen und eine Warteliste für bereits reservierte Wohnungen. Die entsprechenden Anmeldungen lassen sich im CMS verwalten, und gezielt Mails an bestimmte Interessenten verschicken.
Bildgalerien und Animationseffekte für die Startseite, Aufklapplisten oder die Navigation runden den Webauftritt ab.

Partner

› Heuss Communications
› SMIROKA Kommunikationsdesign
Startseite für das Hauptprojekt "Inwestra Immobilien"
Startseite für die Projektinstanz "Am Parkweg"
Instanzensystem für die Inwestra AG: Wohnungsdetail-Seite

Website-Erweiterung

Auftraggeber

› ABAU GmbH

Leistungen

  • Tabelle für Neuvermietungen
  • Anmeldeformular

Beschreibung

Die bestehende Webseite wird mit einem neuen Bereich für die Erstvermietung einer neuen Siedlung ergänzt. In einer übersichtlichen Tabelle werden die Wohnungen aufgeführt. Per Formular können Interessenten sich für Wohnungen und Parkplätze anmelden.
Die Verwaltung der neuen Informationen und Anmeldungen wird nahtlos ins bestehende CMS integriert.
Website-Erweiterung für die ABAU Wohnbaugenossenschaft: Tabelle und Anmeldeformular für Erstvermietung

Website mit miniCMS

Auftraggeber

› Licht & Produktions GmbH

Leistungen

  • Layout-Umsetzung (HTML)
  • webFormat miniCMS
  • Bildgalerie mit jQuery-Animation

Beschreibung

Die von Nicolas Schaltegger gestaltete Website wird in HTML umgesetzt. Die Website wird mit dem miniCMS von webFormat aufgebaut. Somit kann der Kunde auf einfache Art neue Arbeiten ergänzen und mit Bildgalerien versehen. Bildgalerien lassen sich schnell per Drag&Drop anlegen; dabei werden die hochgeladenen Bilder automatisch gedreht und beschnitten.
Die Animationseffekte für die spezielle Darstellung und die Bildgalerie werden mit jQuery umgesetzt.

Partner

› Nicolas Schaltegger
Website für die Licht & Produktions GmbH: wechselnde Hintergrundbilder
Website für die Licht & Produktions GmbH: Scroll zwischen Kopf- und Fusszeile

Interne Projektverwaltung

Auftraggeber

› Hebetec Förder- und Hebesysteme AG

Leistungen

  • Login-Bereich mit abestuften Berechtigungen
  • Verwaltung (Auftrag, Offerte, Rechnungen)
  • umfassende Filter- und Sortiermöglichkeiten
  • unterschiedliche Ansichten
  • diverse Export-Möglichkeiten
  • Verbindung mit bestehendem Wochenplan
  • optimiertes Erfassen von Einträgen
  • Kopieren von Einträgen per Drag&Drop

Beschreibung

Der Kunde wünscht zum bestehenden Wochenplan eine Projektverwaltung. Diese wird nach den individuellen Wünschen und Anforderungen des Kunden entwickelt.
Die Projektverwaltung kann für unterschiedliche Firmen genutzt werden. Projekte lassen sich mit einer einheitlichen Nummer erstellen, Auftrag, Offerte und Rechnungen können erfasst werden. Damit die Übersicht nicht verloren geht, lassen sich die Projekte sortieren und beliebig filtern.
Es gibt spezielle Ansichten für "offen Offerten" und "nicht abgeschlossen Aufträge", die Summen der Rechnungen werden mitgelistet und Gesamtsummen berechnet.
Sätmliche Ansichten lassen sich in verschiedenen Formaten exportieren, z.B. als PDF für die Weiterarbeit in einer Tabellenkalkulation wie EXCEL oder für die Weiterverabeitung im vom Kunden genutzen SelectLine.
Die Projektverwaltung wird mit dem bestehenden Wochenplan verbunden. Projekte lassen sich dort nun einfach erfassen: sobald eine Projektnummer, ein Kunde oder der Ort eingegeben wird, erscheinen entsprechende Vorschläge, welche nun einfach eingefügt werden können.
Der Wochenplan kann nun auch für einzelne Mitarbeiter und dafür über längere Zeiträume dargestellt werden. Er lässt sich als PDF exportieren und damit sauber ausdrucken.
Zur Vereinfachten Bearbeitung können Einträge per Drag&Drop kopiert werden; und bei Bedarf anschliessend noch angepasst werden.
Projektverwaltung Hebetec AG, Bearbeitungsmaske Einzelprojekt
Projektverwaltung Hebetec AG, Projekte-Export als PDF
Projektverwaltung Hebetec AG, Wochenplan für alle Mitarbeiter
Projektverwaltung Hebetec AG, automatisch passende Treffer auflisten
Projektverwaltung Hebetec AG, Eintrags-Kopien per Drag&Drop

Interne Dokumenteverwaltung

Auftraggeber

› k&w Schulen

Leistungen

  • Login-Bereich
  • Erstellung von Dokumentestruktur
  • Drag & Drop-Upload
  • ZIP-Downloads
  • Filter zur Dokument-Suche

Beschreibung

Der Kunde wünscht eine Dokumenteplattform. Die Schüler sollen aus einer grossen Anzahl, die gewünschten Lerndokumente und Arbeitsmaterialien finden und downloaden können.
Eine entsprechende Dokumentestruktur ist bereits auf dem Server eingerichtet, die einzelnen PDF's sind untereinander verlinkt. Somit muss die Dokumentestruktur und insbesondere die Dateinamen beibehalten werden. Dies stellt besondere Herausforderungen, da die Dokumente Umlaute und französische Sonderzeichen enthalten.
Es gibt einen Admin-Bereich für die Lehrpersonen. Hier können Dokumente einzeln oder per Drag&Drop hochgeladen werden. Die gesamte Dokumentstruktur oder ausgewählte Bereiche lassen sich als ZIP-Datei herunterladen.
Für die Lernenden ist ein Zugang in die bestehende Website mit Passwortschutz eingebunden. Anschliessend können sie auf die Struktur zugreifen und Dokumente downloaden. Ein Filter ermöglicht, die Struktur auf passende Dokumente einzuschränken.
k&w Schulen, Dokumenteverwaltung in der Admin-Ansicht
k&w Schulen, Dokumenteverwaltung in der Benutzer-Ansicht mit Filtereinstellung

One Pager

Auftraggeber

› Pierre André Ammann

Leistungen

  • Layout-Umsetzung (HTML)
  • PHP-System zur vereinfachten Inhaltsverwaltung
  • diverse Animationen (jQuery)

Beschreibung

Die von smiroka gestaltete Website wird in HTML als One Pager umgesetzt. Das Projekt wird mit PHP aufgebaut, so dass sich die Inhalte von einem Fachmann leicht ergänzen oder anpassen lassen.
Diverse Animationen verleihen dem One Pager eine hohe Dynamik. So wird animiert zur gewünschten Position gescrollt, es gibt Bildüberblendungen, zusätzliche Texte lassen sich einblenden, und Rollover-Effekte sind mit weichen Ein- und Ausblendungen gestaltet.

Partner

› SMIROKA Kommunikationsdesign
Startseite mit Bildüberblendung
Die One Pager Website ist animiert scrollbar

Website mit CMS

Auftraggeber

› SHS Steinen

Leistungen

  • Layout-Umsetzung (HTML)
  • webFormat CMS
  • Foto-Galerien
  • Animationen (jQuery)
  • Loginbereich

Beschreibung

Die von smiroka gestaltete Website wird mit HTML umgesetzt und im webFormat-eigenen CMS umgesetzt.
Auf der Einstiegsseite und für Foto-Galerien werden einache Animationseffekte umgesetzt.
Die meisten Inhalte wie News, Teams oder Adressen sind strukturiert aufgebaut, so dass sich die Daten sehr einfach verwalten lassen, und jeweils nur an einer Stelle zentral abgespeichert sind.
Verschiedene interne Bereiche z.B. für Eltern oder Lehrpersonen können im CMS angelegt und verwaltet werden. Diese sind nur nach erfolgreichem Login möglich.

Partner

› SMIROKA Kommunikationsdesign
Startseite mit Überblendung und Teasern
Vorstellung Schulhaus mit Bildgalerie
Loginmaske für interne Bereiche

Website mit CMS

Auftraggeber

› Markus Hutmacher

Leistungen

  • Gestaltung in Zusammenarbeit mit Kunde
  • HTML-Umsetzung
  • CMS-Programmierung
  • Komitee-Registrierung (mit Bestätigung)

Beschreibung

Da es sich um eine Wahlwebsite handelt, welche nur relativ kurze Zeit online ist, wird sehr frei gestaltet. Das unkonventionelle Konzept ermöglicht eine transparente Darstellung des Kandidaten und sticht somit aus den Standardtwebsites von Politikern heraus.
Das Projekt wird mit HTML umgesetzt und im webFormat-eigenen CMS umgesetzt. Die Website verwendet einen Raster, der sich möglichst gut an unterschiedliche Bildschirme anpasst.
Besuchte Detailseiten werden je nach Verweildauer im Raster farbig gekennzeichnet, und die Unterstützungsliste passt sich dynamisch der Anzahl Einträge an.
Ein Registrierungsformular ermöglicht die Eintragung für ein Unterstütztungskomitee. Entsprechende Einträge werden über die Mail-Adresse validiert, und nach Aktivierung durch den Anmeldenden sofort freigeschalten.
Inhalts-Raster mit Markierung der besuchten Detailseiten
Unterstützerliste
Registrierungsformular für Unterstützungskomitee
Detailseite in Popup-Darstellung über dem Raster

Interner Wochenplan

Auftraggeber

› Hebetec Förder- und Hebesysteme AG

Leistungen

  • Login-Bereich; Passwortanforderung
  • Verwaltung von Arbeitsorten und Arbeitern
  • Darstellung für Kantinen-Monitor

Beschreibung

Der Kunden benötigt einen einfachen Wochenplan, der auf dem Kantinen-Monitor dargestellt wird. Verschiedene Mitarbeiter und ihre jeweiligen Arbeitseinsätze können erfasst werden. Feiertage werden automatisch entsprechend hervorgehoben.
Wochenplan im internen Bereich
Wochenplan im Bearbeitungsmodus

Website mit miniCMS

Auftraggeber

› Gitta von Felten

Leistungen

  • einfache Gestaltung
  • HTML-Umsetzung
  • CMS-Programmierung
  • Bildgalerien
  • optimierte Inhaltsverwaltung

Beschreibung

Die bestehende Website soll neu aufgebaut werden. Damit die Bilder der Künstlerin im Vordergrund stehen, wird die neue Website sehr schlicht und hell gestaltet. Bearbeitungsmöglichkeit durch die Kundin werden zwar nicht gewünscht, dennoch wird die Seite im miniCMS von webFormat aufgebaut, so dass künftige Anpassungen und Ergänzungen sehr schnell und mit wenig Aufwand erfasst werden können. Insbesondere die Bildgalerie und die Ausstellungsliste werden entsprechend optimiert.
Bücher der freischaffenden Künstlerin
Bildgalerie mit Thumbnails
Grossansicht der Bilder zum Blättern

One Pager mit CMS

Auftraggeber

› Accessoire Cuir

Leistungen

  • Layout-Umsetzung (HTML)
  • CMS-Programmierung
  • Bildgalerien
  • diverse Animationen (jQuery)

Beschreibung

Die von smiroka gestaltete Website wird in HTML als One Pager umgesetzt, und mit dem webFormat-eigenen CMS aufgebaut.
Das CMS ist stark für die vorgesehenen Inhalte optimiert, so dass sich pro Saison einfach eine neue Kmpagne mit Einstiegsseite, allgemeinen Informationen und Bildgalerien erstellen lässt.
Diverse Animationen verleihen dem One Pager eine hohe Dynamik. So wird animiert zur gewünschten Position gescrollt, es gibt Bildüberblendungen und spezielle Rollovereffekte.

Partner

› SMIROKA Kommunikationsdesign
One Pager mit animierter Scroll-Navigation
Bildgalerie mit Bildüberblendung
Bildgalerie mit Bildüberblendung

Interner Bereich

Auftraggeber

› ENCO Energie-Consulting AG

Leistungen

  • Login-Bereich; Passwortanforderung
  • Verwaltung von Projekten und Benutzern
  • Erstellung von Dokumentestruktur
  • Drag & Drop-Upload
  • ZIP-Downloads

Beschreibung

Der Kunde wünscht eine Plattform für den Dokumenteaustausch, für verschiedene Projekte. Es wird explizit eine sehr einfache Struktur gewünscht, die sich auch gestalterisch zu 100% in die kürzlich erstellte Website einbinden lässt. Somit scheiden bestehende Anwendungen im Stil von DropBox oder ein einfacher FTP-Austausch aus.
Eine Loginmaske direkt auf der Website ermöglicht den Zugriff für berechtigte Benutzer. Damit die Benutzerverwaltung ohne grossen Aufwand erfolgen kann, lassen sich diese einfach im vorhandenen CMS erstellen und deaktivieren. Vergessene Passwörter können von den Benutzern autonom angefordert werden.
Nach dem Login lässt sich je nach Berechtigung das gewünschte Projekt auswählen. Der Upload von Dokumenten erfolgt einzeln über ein Uploadfeld, oder es lassen sich ganze Dokumentgruppen per Drag&Drop in den gewünschten Ordner hochladen. Einzelne Dokumente können per Klick downgeloaded werden. Auf Wunsch lassen sich auch mehrere Dokumente oder ganze Ordnerstrukturen für den Download auswählen. Diese werden dann in Form eines ZIP-Dokuments zur Verfügung gestellt.

Partner

› SMIROKA Kommunikationsdesign
Loginmaske mit Möglichkeit, vergessenes Passwort anzufordern
Interner Bereich mit Dokumente-Verwaltung

Website mit CMS

Auftraggeber

› Pedalflotte Aarau

Leistungen

  • Layout-Umsetzung HTML
  • CMS-Programmierung
  • einfaches Bestellformular

Beschreibung

Die Website wird gemeinsam mit dem Kunden nach dessen Vorstellungen gestaltet. In einem ersten Schritt wird die Website nur statisch mit HTML umgesetzt.
Weil sich die Pedalflotte zunehmend etabliert, und regelmässige Anpassungen erforderlich sind, wird die Seite nun im webFormat-eigenen CMS aufgebaut. Ein einfaches Formular erlaubt eine Online-Bestellung von Delikatessen und Gemüse-Abos.
Einfache Inhaltsseite
Bestellformular für "flotte Delikatessen"
Kontaktseite der Pedalflotte

Website mit CMS

Auftraggeber

› ENCO Energie-Consulting AG

Leistungen

  • Layout-Umsetzung (HTML)
  • webFormat CMS
  • Mehrsprachigkeit (inkl. Chinesisch)
  • strukturierte Daten
  • parametrisierbares Anmeldeformular
  • Animationen (jQuery)

Beschreibung

Die von smiroka gestaltete Website wird mit HTML umgesetzt und im webFormat-eigenen CMS aufgebaut.
Die Website ist teilweise in weitere Sprachen übersetzt, inklusive Sprachen mit nicht lateinischem Zeichensatz. Das CMS erlaubt durch Nebeneinanderstellen von jeweils zwei Sprachen eine einfache Übersetzung.
Auf der Startseite wird mit einer Überblendanimation ein ansprechender Einstieg geschaffen. Weitere Animationen auf den Inhaltsseiten ermöglichen durch Aufklapplisten eine kompakte Darstellung und eine einfache Navigation.
Die meisten Inhalte wie Kompetenzen, Referenzen, Team und Aktuelles sind strukturiert aufgebaut, so dass sich diese Bereiche per CMS besonders einfach verwalten lassen.
Ein Anmeldeformular für Veranstaltungen kann per CMS angepasst und somit für unterschiedliche Events eingesetzt werden. Die erfassten Daten werden in einer Datenbank gesammelt und können so exportiert werden, dass sie sich einfach mit einer Tabellenkalkulation wie EXCEL verarbeiten lassen.
Die Animationen wurden auf jQuery-Basis erstellt - Inhalte werden per AJAX

AJAX (Asynchronous JavaScript and XML)
x

AJAX ermöglicht es, nur einen Teil einer Webseite neu zu laden, während normalerweise die komplette Seite neu geladen wird, auch wenn sich nur einige Bereiche ändern.
AJAX ist eine Technologie, welche auf JavaScript und dem DOM (Document Object Model) basiert. Bei deaktiviertem oder fehlendem JavaScript funktioniert die Technologie nicht. Die entsprechenden Inhalte sind deshalb für Suchmaschinen grundsätzlich nicht erreichbar.
Darum stellt das CMS von webFormat jeweils Alternativen zur Verfügung, so dass mit einem normalen Link (und somit einem kompletten Reload) auf dieselben Inhalte zugegriffen werden kann.
AJAX eignet sich besonders für den Einsatz von Aufklapplisten oder Pseudo-Popup's, da hier die wesentlichen Inhalte der Website unverändert bleiben, während nur ein kleiner Teil neu geladen werden muss.
nachgeladen. Sämtliche Animationseffekte können einfach per CMS justiert werden.

Partner

› SMIROKA Kommunikationsdesign
Startseite mit Überblend- und Aufklappanimation
Referenzseite mit animierten Aufklapplisten
Teamseite mit Personen-Portraits und geschützten Mail-Adressen.
Kontaktseite mit eingebundenem google-maps

Website mit CMS

Auftraggeber

› Grüne Aarau

Leistungen

  • Konzept und Gestaltung
  • Fotografie Home- und Headerbilder
  • Layout-Umsetzung (HTML)
  • CMS-Programmierung
  • Diverse Aufklapplisten mit Filtern
  • Animationen (jQuery)

Beschreibung

Die Website wird auf Basis einer erfolgreichen Flyer-Kampagne geplant. Die umfassenden bisherigen Inhalte werden automatisiert übernommen und übersichtlicher dargestellt.
Aufwändige Headerbilder schaffen Bezug zum User und zur Ortspartei. Die Bilder wurden durch webFormat geplant, fotografiert und aufbereitet.
Die komplette Website wurde mit HTML im webFormat-eigenen CMS umgesetzt. Dabei wurde auf eine möglichst einfache Erfassung der Daten geachtet. Insbesondere gibt es auch einen reduzierten Zugang, so dass die Einwohnerräte selbst ihre Statements und Vorlagen aus dem Rat archivieren können.
Diverse Aufklapplisten schaffen eine übersichtliche einfach zu bedienende Website, erlauben aber dennoch die Darstellung von umfassenden Inhalten.
Durch Filter lässt sich die Anzeige Reduzieren und z.B. recherchieren, in welchem Bereich ein besimmter Einwohnerrat bisher tätig geworden ist.
Aufwändig gestaltete thematische Headerbilder
Agenda-Seite mit Aufklapplisten
Aufklapplisten mit Filter- und Blättermöglichkeit
Portrait-Seite mit Aufklapplisten
x