Webprogrammierer:in

Kurs-ID 9998-2023-05-22
Datum 22.05.2023 bis 06.10.2023
Dauer 20 Woche(n)
Unterrichtszeiten Montag bis Freitag von 08:30 bis 15:35 Uhr (in Wochen mit Feiertagen von 8:30 bis 17:10 Uhr)
Kosten k. A.
Zielgruppe Webdesigner:innen, Webprogrammierer:innen, Grafiker:innen, Mediengestalter:innen, Fachkräfte aus künstlerischen Berufen oder Personen, die bei der Konzipierung, Gestaltung und praktischen Umsetzung von Internet-Auftritten verantwortlich mitwirken und die dafür notwendigen Kenntnisse und Fähigkeiten erwerben wollen.
Abschluss alfatraining-Zertifikat
Förderung Bildungsgutschein (Arbeitsuchende und Arbeitslose), Weiterbildungsförderung für Beschäftigte, Europäischer Sozialfonds ESF (Kurzarbeit oder Transfergesellschaften). Weitere Förderstellen: Berufsförderungsdienst (BFD), die Berufsgenossenschaft (BG) sowie der Rentenversicherungsträger (DRV).
Präsenzkurs Keine Angabe.
mind. Teilnehmerzahl 6
max. Teilnehmerzahl 25
URL des Kurses Details beim Anbieter
Anmelde URL des Kurses Direkte Anmeldung beim Anbieter
spezielles Angebot für Dozenten Keine Angabe.
Veranstaltungsort
 
alfatraining Bildungszentrum GmbH
Kriegsstraße 100
76133 Karlsruhe

 

AbendkursBildungsgutscheinBarierrefreier Zugang
NeinJak. A.

 

Beschreibung
Die professionelle Konzeption und Umsetzung ansprechender Webseiten sind die Kernthemen des Webdesigns. Daher beinhaltet der Kurs unter anderem HTML, Dreamweaver, CSS, JavaScript und Ajax sowie die Themen Grafikdesign und User Experience.

Webdesigner:in

Webdesign mit HTML, Dreamweaver, CSS, Photoshop

HTML (ca. 5 Tage)
Grundgerüst
Tags zur Texterstellung (h1-h6, p, br)
Grundlagen CSS
Text-Format-Befehle
Gerüstbildende HTML-Tags (z. B. header, nav)
Grafiken einbinden und in Photoshop aufbereiten
Favicons
Verlinkungen
Interne-, Externe-, Tel.-, mailto-Links
Listen und Tabellen
Formulare in HTML
Formularelemente
Einbindung von Video- und Audioelementen
Einbindung von YouTube und Google-Maps
Unterschiede zwischen XHTML und HTML

Grundlagen CSS (ca. 5 Tage)
Grundlagen Dreamweaver
Einbindungsmöglichkeiten von CSS-Angaben (intern, extern, inline-Style)
Textgestaltung mit CSS
CSS-Attribute zur Gestaltung von Bordern und Abständen (padding, margin)
Hintergrundgestaltung per CSS
Grundlagen float/clear
Spaltigkeit mit float
Farben mit CSS
Clearfix
Pseudoelemente (::before/::after)
Pseudoklassen (:nth-of-type)
Listen/display/Link-Pseudo-Klassen
Navigation mit ul/li (horizontal/vertikal)

CSS-Flexbox (ca. 5 Tage)
Spaltigkeit mit Flex
Ausrichtung von Elementen mit Flex
Spalten in Spalten mit Flex
Individuelle Schrift verwenden (@font-face)
Schriften mit Dreamweaver
Dreamweaver – CSS-Designer
CSS-Position
Positionen: relative/absolute/fixed
Möglichkeiten zur Formulargestaltung per CSS
CSS-Farbverläufe
CSS – transition/transform

Responsives Webdesign (ca. 6 Tage)
Breakpoints, Viewport, Media-Querys
Header und header-img responsiv gestalten
Picture-Elemente in HTML
Mobile Navigation mit hover
Hover in click auf Apple-Handys ermöglichen
Klick-Event per CSS (mittels checkbox)
Responsive Navigationen mit click
Animierter Burger-Button
CSS-Akordeon (mittels Radio-Buttons)
Drop-Down-Menü für Desktop und Mobile
Unterschiedliche Designs
CSS-Pseudoklasse :target
One-Page-Site – Seitenstruktur
Responsive Navigation mit :target-Steuerung
Vorteile von One-Page-Sites

JavaScript (ca. 9 Tage)
Anwendungen einbinden
Einstieg in JavaScript/jQuery
If-then-else
Variablen
Data Objekt
Array Datentyp
ScrollTop
For-Schleife
Math-Objekt
Sticky-menu (js/css)
Menu mit Scrollen ein-/ausblenden
Verwendung von vh/vw und calc
Pflichtangaben Impressum/Datenschutz
Cookiehinweis
Font-awesome – Symbol Bibliothek
CSS-Filter
CSS-Variablen
Optim. der Site für die Suchmaschinen (SEO)
Object fit – Rahmenfüllende Grafiken
CSS-Animation
CSS-Grid
Grid-template-areas
Einführung in CSS-Framework: Bootstrap

Projektarbeit (ca. 10 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse

Grafikdesign mit Adobe CC

Einführung in die Adobe Creative Cloud (ca. 2 Tage)
Desktop Programme im Überblick: Photoshop, Illustrator, InDesign
Adobe Mobile Apps für Grafikdesign
Creative Cloud Bibliotheken
Farbtrends und Inspirationen (z. B. Adobe Stock, Adobe Color)
Adobe Bridge, Adobe Exchange

Grundlagen (ca. 1 Tag)
Kunst vs. Design
Designdisziplinen, Design-Prinzipien
Designprozess
Gestaltgesetze der Wahrnehmung
Blickverlauf und Anordnung
Figur-Grund-Beziehung
Optische Täuschungen und Phänomene
Interferenzeffekte, Hicks Gesetz
Perspektive und räumliche Wirkung

Form und Farbe (ca. 2 Tage)
Punkt, Linie und Fläche
Anordnung und Gewichtung
Format, Proportionen und Seitenverhältnisse
Farbenlehre und Farbsysteme
Eigenschaften, Wirkung und Bedeutung
Farbgestaltung (Harmonien, Kontraste)
Aufmerksamkeit durch Form und Farbe
Erstellung und Bearbeitung von Formen (Zeichen, Piktogramme, Icons)

Bilder (ca. 3 Tage)
Bildkompetenz und Bildqualität
Pixel- und Vektorgrafik
Recherche, Idee, Moodboard
Eyecatcher und Storytelling
Der Mensch als Motiv
Bilder in der Unternehmenskommunikation
Bildgestaltung und Bildbearbeitung

Typografie und Layout (ca. 5 Tage)
Anatomie der Buchstaben
Schriftgeschichte, Schriftklassifikation
Schriftmischung
Lesetypografie, Detailtypografie
Workflow: Layout
Grundregeln guter Layouts
Satzspiegel und Gestaltungsraster
Dramaturgie, Blickführung und Fokus
Layoutideen umsetzen, präsentieren
Dateiausgabe im Überblick (Print, Digital)

Corporate Design (ca. 2 Tage)
Corporate Design vs. Corporate Identity         
Basisbausteine
Logodesign, Signets und Marken
Umsetzung – Wort-Bild-Marke
Das Corporate – Design-Manual (Styleguide)

Projektarbeit (ca. 5 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse

JavaScript/Ajax

JavaScript Grundlagen (ca. 7 Tage)
Einführung
Einbinden in HTML-Seiten
Sprachelemente
Variablen, Konstanten und Datentypen
Operatoren
Kontrollstrukturen
Bedingte Anweisungen
Schleifen
Funktionen
Arrays
Objekte
Cookies
Webstorage
Fehlerbehandlungen

DOM-Manipulation mit JavaScript (ca. 3 Tage)
Grundlagen
HTML-Selektieren
Inhalt und Attribute
Styling
Events
DOM-Elemente anlegen
DOM-Elemente kopieren, verschieben, löschen

AJAX  (ca. 3 Tage)
Einführung
Funktionsweise
Voraussetzungen
http-Anfragen
XMLHttpRequest-Objekt
Synchrone und asynchrone Requests
Web Services/Übertragungen
-JSON-XML/XML-Response

Frameworks / Libraries (ca. 2 Tage)
Eigene Bibliothek erstellen
jQuery
Vor- und Nachteile

Projektarbeit (ca. 5 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse

UI/UX-Design mit Adobe XD

Prinzipien der Nutzerzentrierten Gestaltung (ca. 1 Tag)
ISO 9241-210: Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme
Design Thinking
Überblick agiles Projektmanagement
Nutzungskontext beschreiben
Überblick Usability Research
Methoden
Web Analytics
Mapping-Methoden

Analyse Nutzungskontext (ca. 3 Tage)
Kontextdokumentation
Nutzungsanforderungen beschreiben (Use Case)
Richtlinien und Normen
Usability-Definition und Zusammensetzung des Nutzungskontextes nach ISO 9241-11
Konzeption eines Fragebogens
Spezifizierung des Nutzungskontextes
Human/User Centered Design mit Mental Models
Zielgruppen, Nutzertypen, Personas
Personas erstellen
Arbeitshypothese formulieren
Customer Journey und Empathy Map
Agiles Anforderungsmanagement
User Stories

Card Sorting (ca. 1 Tag)
Sortieren in Teams
Auswertung im Team
Feedbackrunde

Entwurfstechniken (ca. 1 Tag)
Adobe XD
Einführung
Flow Chart
Wireframe
Prototyping
Komponenten
UI KITs

User Interface Design (ca. 3 Tage)
Visuelle Wahrnehmung, Gesetzmäßigkeiten
10 Prinzipien des User Interface Designs nach Jakob Nielsen
Brandfilter
Moodboard
Styleguide und Designsysteme
Navigationskonzepte
Kognition
Schrift und Typografie im UI
Rastersysteme, responsives Design
Formulare
Farben im UI
Icons

Prototyping (ca. 3 Tage)

Evaluierung/Testing (ca. 3 Tage)
Usability Testmethoden
Labortests
Thinking Aloud
Online/Crowd Tests
Usability Review
Test Summery

Projektarbeit (ca. 5 Tage)
Zur Vertiefung der gelernten Inhalte
Präsentation der Projektergebnisse



Änderungen möglich. Die Lehrgangsinhalte werden regelmäßig aktualisiert.

 

Schlagworte
html, css, adobe, javascript, webdesign, dreamweaver, prototyping, webprogrammierung, ajax, grafikdesign

 

Gelistet in folgenden Rubriken: