WinterSemester 2023/24
TH-Nürnberg: Technikjournalismus / PR

email Dozent: Mirko Schramm

ONLINE Vorlesung am 15.12.2023!

Discord Channel "web_23/24"

zeitgleich laufender Blockkurs

Aus gesundheitlichen Gründen findet die Vorlesung am Freitag, den 29.10.2021 nicht statt.

Konzeption

Konzeption von journalistischen Angeboten im Web (Grundlagen): Konzeption und Aufbau einer Website; zeitgemäßes Layout, Benutzerführung, Bildbearbeitung, Darstellungsformen auf Webseiten; Screenresponsiveness; Journalistische Webseiten optimieren: Wie optimiere ich journalistische Webseiten für Suchmaschinen? Wie lassen sich die aktuellen Ergebnisse der Forschung zu Bedienerfreundlichkeit in Webseiten umsetzen? Welche Ausgabekanäle sind zu bedenken?

Entwicklung

An praktischen Beispielen werden die Grundlagen der agilen Webentwicklung mit Hilfe moderner Web Frameworks erlernt. Schwerpunkt der Vorlesung ist das Anwenden aktueller Webtechnologien (HTML5, CSS3 [SASS/LESS] und JavaScript), das Einsetzen von Tools zur Versionsverwaltung (git) und zur Task-Automatisierung (gulp/grunt). Abschließend befassen wir uns mit den Grundprinzipien des maschinellen Lernens am Beispiel von IBM Watson und/oder Microsoft Cognitive-services.

Chat zur Vorlesung

Discord Channel "web_23/24"

Kurs Inhalte

important_devices

11. Umsetzung und Wiederholung

19.01.2021

Demo Sites auf SchrammIT

attach_fileGitjou attach_fileMint4School

important_devices

10. Umsetzung und Wiederholung

12.01.2021

Demo Sites auf SchrammIT

attach_fileGitjou attach_fileMint4School

important_devices

9. SEO
Ranking Faktoren & Tools

Weitere Infos close
important_devices

8. Layouting
RD - Media Queries

Weitere Infos close
developer_board

Wordpress
Block Theme Entwicklung

Weitere Infos close
view_compact

7. Layouting
Seitenstruktur & Ausrichtung

Weitere Infos close
priority_high

Aufgabe
Layout erstellen

Was ist zu tun? close

Versuchs mal selbst.

Farben
Link: #ff7235; Hintergrund: #fff; Schrift: #000;
Schrift
default
Bilder
Unsplash
  • Hero: https://source.unsplash.com/weekly?water
  • Card: https://source.unsplash.com/600x400/daily
  • Teaser: https://source.unsplash.com/600x400/weekly
Texte
Blindtextgenerator
developer_board

Wordpress
Lokales Entwickeln

Weitere Infos close

Wordpress: mehr ...

Wordpress:
open_in_newWordpress open_in_newWordpress (deutsch)
Block Theme Entwicklung:
open_in_newWordpress Theme Handbook - Block Theme open_in_newFull Site Editing
call_to_action

6. UX Gesetze
Gestaltung von benutzerfreundlichen Websites

Weitere Infos close
explore

Aufgabe
Erstellung Website-Konzepte

close

Das jeweilige Konzept ist die Basis für die Umsetzung der Website in den kommenden Wochen.

Inhalt:

  • Zieldefinition (2-3 Sätze)
  • Zielgruppe (1-2 Sätze)
  • Low Fidelity (Wireframe oder Mock) Darstellung (1 Seite)

Bedenkt dabei die Rahmenbedingungen!

group_work

4. Konzeption
Web Projekt - Ablauf

Weitere Infos close

Web-Konzeption: mehr ...

Bücher:
open_in_newInformation Architecture for the World Wide Web open_in_newSteve Krug - Don't make me think open_in_newJesse James Garret - The Elements of User Experience
blogs - deutsch:
open_in_newKulturbanause Blog open_in_newWebDesign Journal
blogs - englisch:
open_in_newNielsen Norman Group open_in_newa list apart open_in_newSmashing Magazine
view_compact

3. IDE & Entwicklung
erste Website

Weitere Infos close
priority_high

Aufgabe
IDE lokal installieren

Was ist zu tun? close

Installiere den plattformübergreifenden Quelltext-Editor Visual Studio Code lokal auf Deinem Rechner. Mit Visual Studio Code werden wir in den kommenden Wochen unsere Website entwickeln.

Dir steht es auch frei andere Entwicklungsumgebungen zu benutzen.

code

2. HTML & CSS
Textauszeichnung & Textformatierung

Weitere Infos close
priority_high

Aufgabe
Textauszeichnung

Was ist zu tun? close

Zeichne die Texte aus der Vorlage (vorlage.txt) mit entsprechenden HTML Tags aus. Das zu erwartende Ergebnis ist in "ergebnis.pdf" sichtbar. Nutze zur Erstellung Codepen.io.

history

1. Einführung
Internet, WWW, Browser

Weitere Infos close

Web-Entwicklung: weitere Lernquellen

open_in_newSelfHTML open_in_neww3school open_in_newMDN web docs open_in_newMarkSheet open_in_newinterneting is hard