Website mit CMS

Auftraggeber

› Pfarrei Rheinfelden - Magden - Olsberg

Leistungen

  • HTML-Umsetzung
  • CMS-Programmierung
  • jQuery-Animationen
  • Agenda mit Filtermöglichkeiten

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 Seite enthält eine umfassende aufklappbare Navigation, Inhaltsseiten mit diversen Zusatzinformationen, Querlinks und Bild-Galerien, und eine Agenda mit diversen Filtermöglichkeiten.
Einige jQuery-Animationen, wie ein animierter Header auf der Startseite oder Bildüberblendungen runden das Projekt ab.

Partner

› SMIROKA Kommunikationsdesign
CMS Pfarrei Rheinfelden: Intro-Seite mit Übersicht
CMS Pfarrei Rheinfelden: Inhaltsseite und Container mit diversen Zusatzinformationen
CMS Pfarrei Rheinfelden: Agenda mit Filter-Möglichkeit
CMS Pfarrei Rheinfelden: Bildgalerie mit Überblendung

Responsive Webseite und Newsletter-Tool

Auftraggeber

› Füchter Peter GmbH

Leistungen

  • HTML-Umsetzung (responsive)
  • CMS-Programmierung
  • strukturierte Daten
  • diverse jQuery-Animationen
  • Newsletter-Tool in CMS integriert

Beschreibung

Die von SMIROKA gestaltete Website wird vollständig responsive mit HTML umgesetzt. Somit werden für grafische Element konsequent SVG's eingesetzt, damit Icons auch bei starker Skalierung und Retina-Displays ihre Schärfe behalten.
Bei den Inhaltsbildern und Bildanimationen wird mit Fokus-Punkt gearbeitet; d.h. grosse Bilder werden auf kleinen Bildschirmen nicht verkleinert, sondern seitlich beschnitten; welcher Bildbereich im Zentrum stehen soll, kann per CMS für jedes Bild frei definiert werden.
Die komplette Webseite ist abwärtskompatibel bis IE8; selbst das responsive Verhalten wird per jQuery simuliert.
Sämtliche Inhalte können durch den Kuden im webFormat eigenen CMS bearbeitet werden. Um Doppelspurigkeiten zu vermeiden wird stark mit strukturierten Daten gearbeitet; besonders häufig genutzte Bereiche wie die News sind separat auf besonders einfache Art zu bearbeiten.
Es kommen etliche Animationen zum Einsatz, z.B. Bildwechsel und Aufklapplisten. Die Bildwechsel sind so gestaltet, dass sich die Bilder auf touchfähigen Geräten durch Wischen wechseln lassen.
Ein Newslettersystem rundet das Projekt ab. Dieses ist vollständig ins CMS integriert. Auf einfache Weise lassen sich so sauber gestaltete HTML-Mails erstellen, welche per SMTP verschickt werden. Zusätzlich gibt es die Möglichkeit automatisch Geburtstags-Mails zu versenden.

Partner

› SMIROKA Kommunikationsdesign
Startseite mit animiertem Bildwechel
responsive Website (optimiert für alle Bildschirmgrössen)
gestochen scharfe Icons auch bei starker Vergrösserung
Newslettertool direkt ins CMS integriert

One Pager mit Teil-CMS

Auftraggeber

› Peter Meier Orgelbau

Leistungen

  • Layout-Umsetzung in HTML
  • Teil-CMS für Referenzen und Aktuelles
  • diverse Animationen (jQuery)
  • Bildgalerien und Video-Einbindung

Beschreibung

Die Gestaltung von SMIROKA wird als Onepager in HTML umgesetzt. Die Webseite wird anschliessend mit dem CMS von webFormat aufgebaut, so dass der Kunde die wichtigen Bereiche Aktuelles und Referenzen selbst bearbeiten kann.
Sowohl die Scroll-Navigation als auch Aufklapplisten und Bildgalerien sind mit jQuery animiert.
Die Referenzen sind sehr umfassend gehalten; neben einem Text kann der Kunde diese auf Wunsch mit Bildserie, PDF-Factsheet, einem eingebundenen Video oder einer Hörprobe ergänzen.

Partner

› SMIROKA Kommunikationsdesign
Peter Meier Orgelbau: Startseite mit Bildüberblendungen
Peter Meier Orgelbau: Kompetenzliste
Peter Meier Orgelbau: Referenzliste

Webseite mit miniCMS

Auftraggeber

› smart ahead GmbH

Leistungen

  • Ausführliche Beratung
  • einfache Gestaltung
  • HTML-Umsetzung und mini-CMS
  • Fotografie und Bildbearbeitung
mini CMS für smart ahead gmbh: Inhaltsseite mit Bild vom Raum
mini CMS für smart ahead gmbh: Inhaltsseite zum Angebot

Chat-Tool

Auftraggeber

› HB9Q

Leistungen

  • Neuprogrammierung Chat-Tool
  • Filter, Suche, Paginierung, Online-Status
  • diverse jQuery-Animationen
  • AJAX für schnelles Neuladen von Inhalten
  • Anbindung an bestehende Joomla-Webseite

Beschreibung

Der Kunde ist ein privater Amateur-Funker, welcher eine Plattform für andere Funker aufgebaut hat, die via Mond als Reflektor weltweit miteinander kommunizieren. Zur parallelen Kommunikation während dem Aufbau der Funkverbindung wurde mit rudimentären Mitteln ein einfaches Chat-Tool erstellt. Mittlerweise wird dieses weltweit von mehreren hundert registrierten Mitgliedern rege genutzt. Deshalb waren einige Anpassungen, insbesondere eine Paginierung der mittlerweile umfassenden Datensätze gewünscht.
Eine erste Analyse des bisher genutzten Scripts ergab, dass diverse weitere Optimierungen möglich wären. Etliche davon stiessen beim Kunden auf Interesse, so dass das Chat-Tool komplett neu aufgebaut wurde. Dieses setzt neu AJAX-Technologie ein, um Login-Status und Chat-Beiträge möglichst in Echtzeit wiederzugeben. Zudem können die Einträge nun sortiert, und nach diversen Kriterien gefiltert werden. Die Paginierung erlaubt das schnelle Navigieren durch die umfangreichen älteren Einträge. Ein Status-Fenster listet alle eingeloggten User auf, und ermöglicht gewünschte Teilnehmer mit Farbmarkierung hervorzuheben.
Die bestehende Joomla-Webseite zum Projekt wurde beibehalten, und das Chat-Tool in die bestehenden Strukturen von Joomla zur Benutzerverwaltung integriert.

Partner

scsi44
Chat-Tool für HB9Q: Paginierung
Chat-Tool für HB9Q: Filter
Chat-Tool für HB9Q: Markierung und Detailinfos zu Usern

Responsive Webseite mit CMS

Auftraggeber

› Herbert Haag Stiftung

Leistungen

  • Gestaltung anhand Erscheinungsbild
  • Responsive HTML-Umsetzung
  • CMS-Programmierung
  • strukturierte Daten
  • diverse jQuery-Animationen

Beschreibung

Die Webseite wird angelehnt an das neue Erscheinungsbild gestartet. Es wird eine sehr schlichte Darstellung mit viel Weissraum gewünscht. Die Webseite wird responsive mit HTML umgesetzt, d.h. sie ist nicht nur für mobile Geräte oder Desktop-Computer optimiert, sondern passt sich praktisch jedem Bildschirmformat optimal an.
Die Bearbeitung der Inhalte erfolgt durch den Kunden im webFormateigenen CMS. Wichtige und häufig genutzte Bereiche, wie die News, Personen des Vorstands und die Preisverleihungen werden strukturiert aufgebaut, so dass sie sich besonders leicht und übersichtlich bearbeiten lassen.
Inhaltsseite in der Desktop-Ansicht
Liste mit Preisträger/innen zum animierten auf- und zuklappen

Webseite mit CMS

Auftraggeber

› FINNLANDCOOL.CH

Leistungen

  • Layout-Umsetzung in HTML
  • CMS-Programmierung
  • Agenda mit Rubriken und Monatsunterteilung

Beschreibung

Die Webseite wurde von bigfish möglichst schlicht aber mit einigen farbigen Akzenten gestaltet. Das Layout wurde mit HTML umgesetzt, und im webFormat eigenen CMS aufgebaut. Dabei wurde insbesondere auf eine einfache Verwaltung der Agenda geachtet. Pro Veranstaltung können auf unterschiedliche Weise Zeiträume erfasst werden; daraus wird dann automatisch die Agenda für den Websitebesucher aufgebaut.
Auf Wunsch wird die Agenda nach Monaten und/oder Rubriken gefiltert.

Partner

› bigfish. Büro für Auge und Ohr
Startseite FINNLANDCOOL.CH
Agenda-Übersicht mit Rubriken- und Monats-Filter

Website mit CMS

Auftraggeber

› Gersbach AG

Leistungen

  • Neuaufbau des bestehenden CMS
  • Neue Referenzenverwaltung
  • Filterung der Referenzen
  • PDF-Export von Referenzprojekten

Beschreibung

Der Kunde wünscht ein komplette Neugestaltung und Erweiterung des Referenzbereichs seiner Website. Da diese bereits knapp fünfjährig ist, wird zu günstigen Konditionen ein kompletter Neuaufbau von CMS und Programmierung vorgeschlagen. Somit ist die Website auch technisch wieder auf dem neusten Stand. Bisher durch Grafiken umgesetzte Speziaschriften werden durch eingebundene Fonts ersetzt, umständliche Archiv- und Blätter-Mechanismen werden durch automatisch beim Scrollen nachgeladene Inhalte ersetzt. Zudem ist die Bearbeitung im CMS nun deutlich einfacher. Inbesondere Bilder lassen sich kompfortabel im CMS beschneiden, drehen und skalieren.
Der neue Referenzbereich arbeitet mit unterschiedlichen Kategorien. Nach diesen lassen sich die Referenzprojekte filtern. Entsprechende Suchresultate lassen sich als übersichtliche PDF's exportieren.

Partner

› SMIROKA Kommunikationsdesign
Gersbach AG, Themen-Einstiegsseite mit eigebundenen Spezialschriften
Gersbach AG, neuegestalteter Referenzbereich mit diversen Filtermöglichkeiten
Gersbach AG, automatisch erstelltes Referenz-PDF

One Pager

Auftraggeber

› education in mOve

Leistungen

  • Layout-Umsetzung in HTML
  • PHP-System zur vereinfachten Inhaltsverwaltung
  • diverse Animationen (jQuery)
  • Anmeldeformular mit SMTP-Versand

Beschreibung

Die von smiroka gestaltete Webseite wird in HTML als One Pager umgesetzt. Das Projekt wird mit PHP aufgebaut, so dass die Inhalte einfach bearbeitet werden können.
Diverse Animationen ermöglichen eine intuitive Bedienung der Seite: Es wird animiert zur gewünschten Position gescrollt und der Benutzer kann durch Bildgalerien blättern.
Das Anmeldeformular wird per SMTP zur Bestätigung an den Benutzer und an einen Administrator versendet.

Partner

› SMIROKA Kommunikationsdesign
One Pager mit animiertem Scroll zur gewünschten Position
Bildserien mit Überblendung beim Blättern

Webseite mit mini-CMS

Auftraggeber

› Linderberatung

Leistungen

  • Layout-Umsetzung (HTML)
  • webFormat mini-CMS
  • Aufklapplisten mit jQuery

Beschreibung

Die von bigfish gestaltete Seite wird mit HTML umgesetzt und im mini-CMS von webFormat aufgebaut.
Mit dem mini-CMS kann der Gestalter auf einfache Weise die Header-Bilder auswechseln oder bearbeiten, neue Navigationspunkte hinzufügen, und direkt mit HTML-Code den Inhalt jeder Seite aufbauen.
Einfache Aufklapplisten erlauben eine Art zweite Navigations-Stufe. Die Aufklapplisten sind mit jQuery realisiert.

Partner

› bigfish. Büro für Auge und Ohr
mini-CMS: Inhaltsseite
mini-CMS: Inhaltsseite
x