HTML-Techniken – Wir verstehen unser Handwerk

Allgemein arbeitet opus 5 vorzugsweise mit modernen Browser-Techniken wie

  • HTML 5
  • CSS 3
  • JavaScript mit jQuery

Für ältere Geräte und Browser nutzen wir Fallback-Lösungen wie Float-Layout etc.

3 CSS

1 Corporate Design

2 JavaScript


CI/CD-konformes Design

Herausforderung

  • Erstellen von Stilen und Layout-Vorlagen, die dem Corporate Design des Kunden entsprechen
  • Anpassen von Stil- und Layout-Vorlagen von CMS-Systemen wie z.B. SharePoint für das Corporate Design des Kunden

Lösung

  • Erstellen angepasster Style-Sheets, JavaScript-Skripte und Layout-Vorlagen
  • Erstellen von Themes
  • Anpassen bzw. Überladen vorhandener Stile und Vorlagen
  • Anpassen vorhandener Seitenelemente an die Stil- und Layout-Vorgaben

3 Media Queries

2 Smartphones

1 Responsive Design

3 Tablets

2 Flex-Layout


Responsives Layout

Herausforderung

Erstellen von Layouts, die auf vielfältigsten Endgeräten eine angepasste, gut les- und bedienbare Darstellung liefern

Lösung

  • Nutzung des Flex-Layout
  • Nutzung von Media-Queries in CSS
  • Vermeidung aller Elemente, die ein dynamisches Layout erschweren (z.B. Tabellen)
  • Für ältere Geräte und Browser ggf. Fallback-Lösungen (Float-Layout etc.)

3 Ajax

1 Kontext-Modal

2 Layer


Modale Layer

Herausforderung

Erstellen variabler Layer für Informationen oder Formulare, die vor der weiteren Bedienung der unterliegenden Seite abgeschlossen werden müssen

Lösung

  • Halbtransparenter Layer als HTML-Element mit Browser-absoluter Positionierung und 100%-iger Flächenabdeckung
  • Aufrufen des Layers über traditionelle Bedienelemente oder als Kontextmenü
  • Wahlweise Positionierung des Layer-Dialogs absolut, relativ zur Maus oder relativ zum aufrufenden Element
  • Bewegen des Layer-Inhalts-Dialogs mit der Maus
  • Wechsel des Layer-Dialog-Inhalts über AJAX

Mit ältere HTML-Techniken mit Allgemein vorzugsweise arbeitet Handwerk für wir wie verstehen unser jQuery modernen •CSS •JavaScript •HTML Browser-Techniken opus 5 Fallback-Lösungen CI CD-konformes von etc. Corporate wir CSS und Herausforderung Float-Layout Geräte Stilen Design wie Browser Design nutzen •Erstellen JavaScript z.B.

Und Layout-Vorlagen des die Layout-Vorlagen wie Kunden Design dem von Stil- und für •Anpassen CMS-Systemen entsprechen von SharePoint Corporate das Design Style-Sheets Kunden Themes Stile •Erstellen Corporate und •Anpassen Lösung JavaScript-Skripte •Erstellen bzw. Von Layout-Vorlagen des Überladen vorhandener angepasster und vorhandener Layout an Flex-Layout Queries Responsives Herausforderung •Anpassen Stil- Seitenelemente Responsive Media Smartphones die Layout-Vorgaben Vorlagen Tablets Design und liefern •Nutzung Endgeräten gut die des vielfältigsten •Nutzung angepasste Darstellung Flex-Layout und Erstellen bedienbare eine auf les- Lösung Layouts von Elemente z.B. Ein Layout dynamisches ältere Geräte Media-Queries von CSS und erschweren •Vermeidung Browser in die ggf. Tabellen •Für aller Layer oder Informationen Herausforderung Float-Layout etc. Vor die Formulare variabler Erstellen Kontext-Modal für weiteren der Modale Layer Ajax Fallback-Lösungen Layer des Bedienung mit •Aufrufen müssen und werden Lösung Browser-absoluter Seite •Halbtransparenter Flächenabdeckung abgeschlossen der Layer unterliegenden Positionierung als 100%-iger HTML-Element traditionelle Layer-Dialogs Kontextmenü Element als zur aufrufenden oder Layers absolut oder Maus über Positionierung •Wahlweise relativ Bedienelemente zum des relativ über •Wechsel AJAX Layer-Dialog-Inhalts des mit •Bewegen der Maus des Layer-Inhalts-Dialogs