Webportfolio Kurs 2 1
Inhalte Übersicht Konzeption und Gestaltung von Websites Strukturierung von HTML-Dokumenten Formatierung von HTML-Dokumenten Verwenden von Bildern, Links, Listen, Tabellen.. Einbettung von Video, Audio Einsatz von Cascading Style Sheets (CSS) Umsetzung eines Responsiven Layout Einsatz von JavaScript Einführung und Vertiefung in Adobe Dreamweaver
Organisation des Kurses jeden Freitag bis zum 30.01.2015 ausser: 26.12.2014 und 02.01.2015 13 Termine 10:00 Uhr - 13:00 Uhr Software Texteditor Adobe Dreamweaver TextWrangler, Notepad++, Brackets, Sublime, Espresso evt. Adobe Edge Animate, Adobe Edge Inspect, Adobe Edge Reflow, Fireworks Browser: Safari, Firefox, Chrome, Opera, Internet Explorer & Mobile Browser
Kursziel Website Freie Themenwahl: Portfolio, Projekte, Produktseite,... keine Verwendung von Templates, Wordpress etc. Einbinden von Bildergalerien oder anderen Plugins ist erlaubt Umfang Startseite Über Projekte Kontakt Impressum Projekt 1 Projekt 2 Projekt 3
Inhalte nach Seminarterminen Termin 1 24.10.2014: Termin 2 31.10.2014: Termin 3 07.11.2014: Termin 4 14.11.2014: Termin 5 21.11.2014: Termin 6 28.11.2014: Termin 7 05.12.2014: Termin 8 12.12.2014: Termin 9 19.12.2014: Termin 10 09.01.2015: Termin 11 16.01.2015: Termin 12 23.01.2015: Termin 13 30.01.2015: Einführung & Einstieg in HTML Dreamweaver, HTML-Textauszeichnungen PB: Thema Listen, Tabellen, Verlinkungen Einstieg in CSS, Selektoren PB: Aufbau der Website Schrifteigenschaften, Farben, Hintergründe Boxeigenschaften, Rahmen, Abstände PB: Wireframes Ausrichten & Positionieren Layoutvarianten Responsives Layout PB Layoutpräsentation Webgrafiken & Webfonts Projektarbeit Video & Audio Projektarbeit PB: aktueller Projektstand
Inhalte nach Seminarterminen Termin 1 24.10.2014: Termin 2 31.10.2014: Termin 3 07.11.2014: Termin 4 14.11.2014: Termin 5 21.11.2014: Termin 6 28.11.2014: Termin 7 05.12.2014: Termin 8 12.12.2014: Termin 9 19.12.2014: Termin 10 09.01.2015: Termin 11 16.01.2015: Termin 12 23.01.2015: Termin 13 30.01.2015: Einführung & Einstieg in HTML Dreamweaver, HTML-Textauszeichnungen PB: Thema Listen, Tabellen, Verlinkungen Einstieg in CSS, Selektoren PB: Aufbau der Website Schrifteigenschaften, Farben, Hintergründe Boxeigenschaften, Rahmen, Abstände PB: Wireframes Ausrichten & Positionieren Layoutvarianten Responsives Layout PB: Layoutpräsentation Webgrafiken & Webfonts Projektarbeit Video & Audio Projektarbeit PB: aktueller Projektstand
Projektschritte 1_8 1. Idee entwickeln Thematische Festlegung 2. Material sichten und organisieren Welche Inhalte sollen auf die Website? Was habe ich bereits? Was muss ich erst noch erstellen? 3. Navigation Umfang der Website festlegen Festlegen der Seitenhierarchie
Projektschritte 1_8 4. Layoutentwurf Erstellung eines grafischen Entwurfes in Photoshop 5. HTML-Grundstruktur erstellen Anlegen des Website-Templates rein semantische Auszeichnung, keine Stilinformationen 6. Designumsetzung mittels CSS Umsetzung des Layouts Positionierung der Elemente Versehen aller Elemente mit Stilinformationen 7. Interaktivität mittels CSS, Javascript oder PHP hinzufügen 8. Präsentation
Weblook 3_5
Sketch 3_10
Feedback 10
Workflow
Präsentation
Prüfung Voraussetzung für die Zulassung zur Prüfung: aktive Teilnahme an allen Besprechungen: 31.10.2014: Besprechung des Themas 14.11.2014: Besprechung des Websiteaufbaus 28.11.2014: Layoutbesprechung (Wireframes) 09.01.2015: Layoutpräsentation des eigenen Projektes Layout als PDF bitte bis zum 06.01.2014 23:59:59 Uhr per Mail an mich Präsentation des Projektes Layout umfasst: einen finalen Entwurf für die Startseite exemplarische finale Entwürfe für die Unterseiten 30.01.2015: Besprechung des aktuellen Projektstandes Abschlusspräsentation (Termin folgt)
Bewertungskriterien Umfang Aufbau Anspruch Technische Umsetzung Gestalterische Umsetzung Sauberkeit der Umsetzung Crossbrowser-Funktionalität aktive Teilnahme am Kurs Präsentation
Literatur - Offline Einstieg in HTML, CSS Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis (Galileo Design) - Manuela Hoffmann John Duckett - HTML & CSS: Erfolgreich Websites gestalten und programmieren Florence Maurice - CSS3: Die neuen Features für fortgeschrittene Webdesigner Christoph Zillgens - Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen Adobe Dreamweaver Galileo Press - Adobe Dreamweaver CC - Das umfassende Training Video2Brain 16
Literatur - Online Online-Ressourcen zu HTML, CSS http://www.w3schools.com http://de.selfhtml.org http://de.html.net http://www.htmlgoodies.com... Sonstiges zum WWW http://www.smashingmagazine.com http://t3n.de... 17
Fragen? 18