Permalink

1

Workshop: HTML5, CSS3 und responsive Webdesign

am 7. Sptember 2013 von 10.00 bis 17.00 Uhr
im mobilesuite Coworking Berlin (zur Karte)
Teilnahme für 10 Personen, Anmeldung am Ende dieser Seite oder Ihr nutzt die Anmeldemöglichkeit auf Xing, Teilnahmegebühr: 110,00 €, Webgrrls und mobilesuiters 55,00 € (Aktionscode gibts über die webgrrls-Liste und Susanne Traumann , Achtung: bei der Anmeldung mit Aktionscode zuerst auf „Click here to enter a promotion code“ klicken, erst dann weiter gehen!)
Was Du benötigst: Laptop, Software: Firebug, Colorpicker z.B. Colorzilla, Editor z.B. Notepad++, Webdeveloper Toolbar von Vorteil.
Getränke und Snacks sind in der Gebühr enthalten, für das Mittagessen zahlt jeder selbst.

Zielgruppe: Web-Designer/innen und –Entwickler/innen mit Kenntnissen in HTML und CSS

Folie HTML5 CSS3HTML5 ist angesagt und soll das Entwicklerleben vereinfachen, gilt es doch als „Flash-Killer“, spielt Videos ohne Plugin direkt im Browser ab und ermöglicht im Zusammenspiel mit CSS3-Media-Queries die nahtlose Anpassung an mobile Displays. Responsive Design ist derzeit das Zauberwort.

Da lohnt sich der Blick hinter die Kulissen. Mit den Teilnehmerinnen und Teilnehmern erkundet Renate Hermanns den neuen Webstandard und führt in die Neuerungen ein: Tags wie header, nav, section und footer ermöglichen eine differenziertere HTML-Struktur. Die Beziehungen zwischen den Teilen des Webauftritts treten deutlicher hervor. Ein Schritt in Richtung semantisches Web. Doch wo Licht ist, ist auch Schatten. Ältere Browser brauchen ein wenig Nachhilfe, um die neuen Tags zu verstehen. Und die Neuerungen in CSS3 sind für Kundenprojekte bislang mit Vorsicht zu genießen. Die neue Version der Stilsprache ist ebenso wie ihr ständiger Begleiter HTML5 noch kein Standard. Die Browser-Hersteller schaffen aber derzeit Fakten. Viele Elemente werden inzwischen unterstützt – leider nicht einheitlich. Und wie üblich erweist sich der Internet Explorer in den älteren Versionen 7 und 8 als Hemmschuh. Hier hilft das Stichwort Modernizr.

Renate Hermanns baut gemeinsam mit den Teilnehmerinnen und Teilnehmern Stück für Stück eine Webseite mit HTML5 und CSS3 auf. Genutzt werden Möglichkeiten und Effekte, die moderne Browser wie Firefox, Safari und Chrome bereits unterstützen. Auch die für mobile Geräte geeignete Darstellung, das responsive Webdesign mit Hilfe von Media-Queries, ist inbegriffen.

Inhalte Teil 1:

  • HTML5
    • Vorstellung der neuen Tags – welche gibt es und wo werden sie verwendet
  • CSS3
    • Basics: Abgerundete Ecken, Schlagschatten und Farbverläufe
    • Texteffekte und Inhaltselemente
    • Anpassung an unterschiedliche Bildschirmgrößen – Responsive Webdesign mit Media-Queries
    • Exkurs: kurze Einführung in die Bewegung mit Transitions, Animations und Transforms

Inhalte Teil 2:

  • Arbeitsumgebung zusammenstellen
    • Editor für die Arbeit am Quellcode
    • Browser mit Testumgebung einrichten
  • Webseite mit HTML5 und CSS3 erstellen
    • Grundgerüst erstellen unter Berücksichtigung von responsive Webdesign
    • Stilelemente wie Verlauf, Schatten, abgerundete Ecken anlegen
    • Nav-Element horizontal im Header
    • Klappnavigation mit Transitions
    • Inhalt strukturieren (section, article, h1-6 und columns)
    • Bedienelemente Buttons und Icons mit CSS3 stylen und animieren
    • Media-Queries für die Darstellung auf mobilen Geräten nutzen
    • Toggle Menübar für responsive Navigation

Eigene Bilder und Logos können natürlich verwendet werden. Es ist aber Bildmaterial vorhanden.

Renate Hermanns

Renate HermannsRenate Hermanns ist seit 2002 freiberufliche Webentwicklerin. Besonderes Augenmerk legt sie dabei auf Webstandards und Barrierefreiheit. Seit einem Jahr setzt sie HTML5 und CSS3 in Kundenprojekten ein. In unregelmäßigen Abständen schreibt sie Fachbeiträge für das Linux Magazin und im Gemeinschaftsblog expertinnen-web.de.
www.css-manufaktur.de, Twitter: @renaade

Anmeldung:

Online Event Management mit Ticketing Lösung von amiando

Print Friendly, PDF & Email

1 Kommentar

  1. Wirklich guter Beitrag der Lust auf das Angebot macht.
    Ich finde ebenfalls, dass responsive Webdesign derzeit und wohl auch in Zukunft den professionellen Internetauftritt ausmacht, da die Zugriffe mit Smartphones enorm gestiegen sind. Darum sollte jede Marketing Agentur dies in einer Marketingberatung erwähnen und responsive Design im Repertoire haben.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.