Meine aktuellen Schulungs­an­ge­bote

Die folgenden Über­sichten geben einen Ein­druck von der inhalt­lichen Band­breiten meiner Schulungen. Die Themen­komplexe können je nach Bedarf er­weitert oder zusam­men­ge­strichen werden. Je nach Wunsch gebe ich im Wesentlichen einen Über­blick oder leite auch praktische Tests an. Themen wie "Responsive Web­design" und "CSS3" eignen sich nicht nur für Ent­wickler. Auch Designer und Konzepter können von besserem Wissen über diese Themen­komplexe profitieren.

Portrait von Jens Grochtdreis

Flexbox

Mit Flexbox gibt es endlich eine Layouttechnik für das Web. Nur ältere Internet Explorer (bis einschliesslich Version 9) können mit dieser Technik nichts anfangen. Es ist Zeit, diese mächtige und bequeme Technik zu erlernen. Die Schulung besteht aus folgenden Themen:

  • Neue Begriffe
  • So funktioniert Flexbox
  • Die Achsen
  • Die Richtungen
  • Umbrüche
  • Umsortieren
  • Schrumpfen und Wachsen
  • Flexbox als Progressive Enhancement
  • Feature Detection
  • Flexbox in der Praxis
    • Eine Tagliste ganz einfach erstellt
    • Eine horizontale Navigation
    • Tastaturreihenfolge
    • Container mit gleicher Höhe
  • Flexbox-Tools
  • Tipps für die Praxis
  • Lesenswertes

Responsive Webdesign - Webseiten für alle Devices

Responsive Webdesign ist in erster Linie kein technisches Problem. Es ist ein konzeptionelles Problem. Alle am Projekt Beteiligten benötigen die richtige Sicht auf die Dinge. Sie müssen begreifen, dass die meisten Vorgehensweisen der Vergangenheit und die sicher geglaubten Wahrheiten heute nichts mehr Wert sind. Es sollte ein neuer Blick auf unsere Produkte entstehen, neue Arbeitsmethode sollten üblich werden.

Deshalb ist dieser Workshop so angelegt, dass auch Projektmanager, Konzepter, Designer, Kundenberater, Kunden viele wichtige Informationen bekommen. Für sie werden die Technikdetails ausgespart.

Entwickler bekommen die Möglichkeit, einige technische Probleme selber zu lösen. Wesentliche Inhalte der Schulung sind folgende Themen:

  • theoretischer Unterbau: Das Web ist per se flexibel!
  • Was ist Responsive Webdesign?
  • Brauchen wir Responsive Webdesign?
  • Wofür optimieren?
  • Standardbreiten?
  • Viewport und Mediaqueries
  • Der tägliche Testwahnsinn
  • mobile first oder desktop first?
  • Mausinteraktionen und Touchinterfaces
  • Technische Fähigkeiten der Browser
  • Unterschiedliche Layoutkonzepte
  • Tabellen
  • Bilder
  • Navigationen
  • Links und Mausinteraktionen
  • Ausblenden von Inhalten
  • Seitengrößen und Performance
  • Wir benötigen einen neuen Workflow!
  • Module und Living Styleguides
  • Link- und Buchtipps

Bootstrap 3

Bootstrap ist mittlerweile zu einer Art Industriestandard für Frontend-Frameworks geworden. Die Nutzung hilft, einheitlichen, gut dokumentierten Code zu schreiben. Es gibt zahllose Erweiterungen, die auf dem Toolset aufbauen.

Leider wird Bootstrap viel zu oft falsch genutzt. Unnötig aufgeblähtes CSS ist das Ergebnis. Dagegen kann an etwas tun. Es hilft, die Eigenarten und Bestandteile von Bootstrap zu kennen. Deshalb ist mein Schulung recht umfangreich:

  • Installation
  • Die Variablen
  • Der Wrapper
  • Das Grid
  • Helferklassen
  • Acessibility
  • Komponenten/Module
  • Navigation(en)
  • Tabellen
  • Listen
  • Alert
  • Das Media-Object
  • Linktipps

CSS3 in der Praxis

Schon seit einigen Jahren können wir mit CSS dynamische und interessante Oberflächen erschaffen und dabei auf unnötige Bilder und JavaScript verzichten. In diesem Workshop entdecken wir die große Welt von CSS3:

  • Orientierung über Browserfähigkeiten
  • Strategien für den Umgang mit den alten IE-Versionen
    • Javascript-Polyfills
    • IE-Filter
    • Graceful Degredation
    • Aufwand für die Sonderbehandlung
    • Konkrete Hacks
    • CSS nur dem IE servieren
  • beliebte CSS3-Features - die Basics
    • neue Selektoren und Pseudoklassen
    • runde Ecken (sie sterben nicht aus!)
    • Schatten (box-shadow und text-shadow)
    • Verläufe
    • Transparenz
    • individuelle Schriften mit @font-face
    • Animationen, Transitionen, Transformationen
    • mehrere Hintergrundbilder
    • outline
    • text-overflow
  • intelligentes und schlechtes Fallback für "Nichtkönner"
  • CSS3 zusammenklicken
  • Linktipps

Einstieg in HTML5

HTML wird schon lange nicht mehr nur zur Auszeichnung von Dokumenten genutzt. Das W3C trägt diesem Umstand mit einer Modernisierung der Spezifikation Rechnung. HTML5 zielt auf komplexe Webseiten und auf Applikationen ab. Es gibt viel zu entdecken. Die Entwicklung steht dabei auch nicht still. Ende 2016 wurde HTML5.1 verkündet. Wesentliche Inhalte der Schulung sind folgende Themen:

  • Was soll HTML5?
  • Was gehört alles zu HTML5?
  • Die neuen semantischen Elemente
  • Die neuen Formularelemente
  • Die eingebaute Formularvalidierung
  • Das Videoelement
  • Das Audioelement
  • Browsersupport für die neuen Techniken
  • Polyfills - neue Techniken für “Nichtkönner”
  • wichtige Infoseiten und Tools/Frameworks

Modulare Webentwicklung - Arbeitspraxis

Eine Webseite ist eine Ansammlung von Einzelteilen. Fokussiert man seine Arbeit auf diese Einzelteile, dann wird die resultierende Webseite flexibler anpassbar und man kann besser im Team arbeiten.

In dieser Schulung geht es vor allem darum, das CSS eines Projektes gut und wartbar aufzubauen. Folgende Themen können gerne durch Beispiele aus der eigenen Praxis ergänzt werden:

  • Qualitätssicherung
    • gemeinsame Coderichtlinien
    • Qualitätscheck am Praxisbeispiel
  • modulare Arbeitsweise
    • Modularisierung von Webseiten
    • CSS mit Sass (und node.js) schreiben
  • Arbeiten im Team
    • Versionierung
    • Ticketsystem
    • Kommunikation
  • gute Blindtexte und Platzhalterbilder
  • Präprozessoren am Beispiel von Sass und Compass
  • Debugging in unterschiedlichen Browsern
  • Strukturiertes Arbeiten mit CSS
    • Shorthand, sinnvolle Abfolge der Deklarationen, etc.
    • Organisation eines CSS (eine Anregung)
  • Grundregeln für bessere Performance

Einführung in Sass

Insbesondere die Arbeit im Team wird durch Präprozessoren erleichtert. Das CSS kann leicht in viele Einzelteile unterteilt werden, die von unterschiedlichen Entwicklern bearbeitet werden. Mixins machen die Nutzung auch komplizierter Lösungen für jeden Entwickler einfach.

Wesentliche Inhalte der Schulung sind folgende Themen:

  • Installation
  • Projektorganisation
  • Namensgebung
  • Code-Output
  • Die SCSS-Syntax
  • BEM mit Sass
  • Variablen
  • Mit Sass rechnen
  • Mixins erstellen und nutzen
  • Platzhalter
  • Mixins vs. Platzhalter
  • Funktionen
  • Die Sass-eigenen Farbfunktionen
  • Die if-Direktive
  • Der for-Loop
  • Interpolierung
  • Listen
  • Maps
  • Linktipps

Barrierefreiheit

Es ist die unbestreitbare Stärke des Internets, dass ein Jeder auf dessen Inhalte zugreifen kann. Menschen mit Behinderung (Blinde, Gehörlose, einseitig Gelähmte u.v.m.) können genauso Informationen lesen und Güter bestellen, wie Menschen ohne Behinderung. Es sei denn, bei der Webseite wurden elementare Qualitätskriterien nicht beachtet und unnötige Barrieren aufgebaut.

In dieser Schulung möchte ich mit Ihnen die offensichtlichen und die weniger offensichtlichen Aspekte von Barrierefreiheit durchgehen. Es geht am Ende darum, die Zahl der möglichen Nutzer Ihrer Webseite zu erhöhen und keine unnötigen Hürden aufzubauen. Es geht dabei im Wesentlichen um folgende Themen:

  • Sinn
  • Gesetze, Verordnungen, wirtschaftlicher Nutzen
  • Betroffene/Nutznießer
  • immer wiederkehrende "Klassiker"
  • Barrierefreiheit und Javascript
  • Webseiten mit WAI-ARIA anreichern
  • Tastaturfokus
  • Kurztest auf Barrierefreiheit
  • Barrierefreiheit muss nicht häßlich sein
  • wichtige Infoseiten

Formulare

Formulare sind neben E-Mails die einzige Möglichkeit der Kommunikation zwischen dem Betreiber einer Webseite und dem Kunden. Und natürlich sind sie der Kern eines jeden Bestellprozesses. Deshalb ist es wichtig, sich genauere Gedanken über die Usability, die Semantik und die Gestaltungsmöglichkeiten von Formularen zu machen.

Wesentliche Inhalte der Schulung sind folgende Themen:

  • Die Konstruktion eines Formulars
  • Formularelemente und Attribute mit Fokus auf HTML5
  • Label und Placeholder
  • CSS für Formulare
  • Validierung im Frontend
  • Best Practices für Formulare

Fontawesome

Icons werden an vielen Stellen einer Webseite genutzt. Anstatt Icons als Pixelbilder einzubinden, hat sich vor einigen Jahren die Nutzung von Iconfonts durchgesetzt. Fontawesome dürfte der beliebteste und bekannteste Iconfont sein. In dieser Schulung stelle ich vor, wie man die Icons einbindet und kreativ nutzt:

  • Icons einbinden
  • Eigene Modifikationen
  • Mein eigenes Fontawesome
  • Accessibility

YAML4

YAML ist das erste CSS-Framework, das auf den Markt kam. Aber weil es viele Jahre nur auf Deutsch dokumentiert worden war, erlangte es nie weltweite Berümtheit. YAML bietet alle notwendigen Features, um eine responsive und barrierefreie Webseite zu erstellen. Es konzentriert sich dabei auf das Wesentliche.

Die Inhalte der Schulung sind:

  • Grundaufbau von YAML
  • Blick in die base.css
  • Die einzelnen YAML-Bausteine
  • Eigene Grids erstellen
  • Formulare mit YAML gestalten
  • Die YAML-Addons
  • Einen Klickdummy mit YAML, Blindtexten und Platzhalterbildern zusammenstellen
  • Dem soliden YAML-Layout ein Design verpassen
  • YAML und Sass

Tipps und Tricks

Mit den Jahren haben sich bei mir viele Anleitungen für Designprobleme angesammelt. Aus einem großen Fundus können Sie wählen oder mir neue Aufgaben stellen, die Sie gerne lernen möchten. Es ist mir immer ein Anliegen, dass meine Schulungen möglichst viel Nutzen haben. Ich spreche auch gerne über Tools und Arbeitsweisen, die ich meiner langen Berufspraxis getestet habe. Mögliche Praxistipps sind unter anderem:

  • Tabellen responsive machen
  • Ein Masonry-Layout nur mit CSS
  • Navigation mit schrägem Hintergrund
  • Ein farbiger Rahmen um die Website
  • Seitenbreite Balken hinter Überschriften
  • Der :not-Selektor
  • Eigenarten von Breite und Höhe
  • Spezifität im Detail erklärt
  • Das Seitenverhältnis beibehalten - nur mit CSS
  • Eigene Checkboxen und Radiobuttons mit CSS gestalten
  • Die Pseudoelemente :before und :after sinnvoll und kreativ einsetzen

Ist etwas für Sie dabei?

Mein Angebot ist facettenreich. Gerne stimme ich mit Ihnen die genauen Inhalte ab. Ich gehe auch gerne auf neue Themenwünsche ein, wenn ich sie abbilden kann.

Alles zum Download

Sie können gerne die detaillierte Übersicht meiner Schulungsthemen als PDF herunterladen.