Webprogrammierung Deluxe

Die Webentwicklung der heco gmbh  ist momentan in der Evaluierungsphase, um ein geeignetes Framework zu finden, womit die Webseite auf unterschiedlichen Anzeigegeräten optimal dargestellt werden kann. Die mobilen Geräte gewinnen immer mehr an Beliebtheit und daher müssen die Darstellungsmöglichkeiten für eine moderne Webseite sehr flexibel gehalten werden, damit auf jedem Anzeigemedium das gewünschte Design angeboten werden kann. Dabei sind wir auf das Framework Bootstrap gestoßen, mit welchem wir eine Spike Solution oder kurz Spike implementiert haben.

Normalerweise beginne ich damit  mir ein Layout selbstständig zusammenzuschustern, um mich dann stundenlang damit zu verausgaben, mit CSS und den damit verbundenen, üblichen browserübergreifenden Diskrepanzen abzumühen. Wer kennt das nicht: Ist endlich die Anzeige so zusammengebaut und jeder Pixel an die Stelle geschubst, an der dieser stehen soll, so gibt es mindestens einen Browser, der Darstellungsfehler ausgibt.

Diesmal habe ich jedoch die CSS-/ HTML5 – Bibliothek von Bootstrap in mein Projekt eingebunden. Bootstrap bringt eine große Sammlung vordefinierter Klassen mit sich und ermöglicht das Orchestrieren einer Webseite ohne selber Style-Elemente zu schreiben. Zusätzlich sind optionale JavaScript-Erweiterungen verfügbar, die sich im eigenen Projekt sinnvoll integrieren lassen.

Zur Positionierung des Grundgerüsts bietet Bootstrap eine Art Grid-System, welches beispielsweise div-Tags mit bestimmten Klassennamen versieht, um so die Position (relativ oder absolut) und auch die Größe des Elements zu bestimmen. Zur weiteren Gestaltung der Webseite bringt Bootstrap eine ganze Reihe von Style-Vorlagen. Dazu gehören beispielsweise Formulare und Formularelemente, verschiedene Buttons, schön gestaltete Tabellen-Layouts, u.v.m.

Um für die mobilen Geräte keine extra Seite bauen zu müssen, kann die Webseite so angepasst werden, dass je nach Anzeigemedium Seitenelemente dynamisch angepasst werden. So werden Bildergrößen je nach Anzeigeformat bestimmt und auch die Anordnung  und die Breite der Grid-Elemente können an die Auflösung des Anzeigegeräts angepasst werden. So lässt sich die Seite gleichzeitig mit Desktop-, Tablet- und Smartphone bedienen.

Die Klassennamen sind bewusst „sprechend“ gewählt, so dass der Programmierer intuitiv ableiten kann, was an CSS-Code dahinter stehen sollte. Alternativ zu den vorgefertigten Standards, existiert die Möglichkeit entweder ein „Customized Framework“ herunterzuladen oder die Einstellungen direkt in der CSS-File anzupassen.  In erstem Fall erhält man nach nur wenigen Klicks ein dediziertes Framework gemäß den eigenen CI Vorgaben.

Den großen Vorteil in Bootstrap sehe ich an 3 Stellen:

  • Als Open Source Produkt ist es kostenfrei und als populärstes Projekt bei GitHub hat es einen schnellen Releasezyklus (vgl. http://de.wikipedia.org/wiki/Bootstrap_%28Framework%29)
  • Es ist sehr leichtgewichtig und bietet hervorragende Customizing Möglichkeiten
  • Der Fokus auf mobile Geräte, sowie der Ursprung im Twitter Team, machen es zu einem ansprechenden Produkt

Verfasser: Waldemar Merk

Advertisements

Über hecogmbh

Die heco gmbh ist ein Handelshaus sowie ein Produzent für Fittings und Armaturen aus rostfreiem Edelstahl. Unsere Produkte werden im Maschinen-, Anlagen- und Fahrzeugbau sowohl in der chemischen Industrie als auch in der Nahrungsmittelindustrie eingesetzt. Mit mehreren Standorten europaweit sind wir immer in Ihrer Nähe.
Dieser Beitrag wurde unter Waldemar Merk veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s