![Page 1: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/1.jpg)
Digital Publishing I
![Page 2: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/2.jpg)
Grundlagen webbasierter Medien
![Page 3: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/3.jpg)
Superpower für Designer_innen & Künstler_innen 😎
![Page 4: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/4.jpg)
Umsetzen und Experimentieren von eigenen Ideen.
Warum? | Intro
Keine Abhängigkeit. Kontext. Flow. Generativer Charakter
![Page 5: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/5.jpg)
Grundlegendes Verständnis für das digitale Material.
Wie funktioniert das Gesamtsystem, wieso sind Dinge, wie sie sind?
![Page 6: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/6.jpg)
Vorteile durch zusätzliche Fähigkeiten
Höhere Qualifikation. Money. Breiteres Jobangebot – Hybride sind gesucht.
![Page 7: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/7.jpg)
Einführung in Webtechnologien. Umsetzung von Layouts in statische Websites. Wie funktioniert das Web? Grundlagen Design.
DP I
DP Kursübersicht
Zusätzliche (fortgeschrittene) Webtechnologien, UI-Framework »React«. Webanwendungen und eigene Tools entwickeln. »Digital maker culture«
DP II
Digitale Produkte, Entwurf, Konzeption, Prototyping. Methoden & Tools. Mobile, AR / VR, AI. Design Systeme
DP III
![Page 8: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/8.jpg)
"Unimpressed by technology […]"
Ziele
Meso Frankfurt
![Page 9: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/9.jpg)
Kickoff für Digitale Produkte und Artefakte. Verdrängung von Hemmnissen vor Technologie, Programmierung - Handwerk(?)
Begeisterung für das kreative Potenzial, wenn Gestaltung und Technologie aufeinandertreffen.
Eigene Websites erstellen.
Superpower
Ziele
![Page 10: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/10.jpg)
Zeitplan
DP1 Sommer 19
1 18.04. Intro, HTML, CSS, Floats
2 25.04. Intro, HTML, Positions
3 02.05. Wiederholung, Figma,
4 09.05. Flexbox
5 16.05. Responsive WD
6 23.05. Gridsysteme
7 30.05 Christi Himmelfahrt
8 06.06. Webtypografie
9 13.06. CSS Transitions & Animations
10 20.06. Fronleichnam
11 27.06. JavaScript
12 04.07. p5.js
13 11.07. Rundgang
14 18.07. p5.js. 2 / JavaScript 2
Kurszeiten: Donnerstag 10-16 Uhr, ~1h Mittagspause
![Page 11: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/11.jpg)
Eigene Website mit den Techniken aus dem Kurs. Minimalanforderung: min. 2-3 verlinkte Seiten & responsiv (mobil)
Abgabe bis 26.07.2019
Abgabe
DP1 Intro
![Page 12: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/12.jpg)
Dennis Praschak [email protected] R114 Hauptgebäude
freie Projektarbeit / Sprechstunde Mo: 10-17 Mi: 10-13 und nach Absprache
Kontakt
DP1 Intro
![Page 14: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/14.jpg)
https://anmeldung.digitalpublishing.design
Anmeldung
DP1 Intro
![Page 15: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/15.jpg)
Informationen, die auf Servern (Webservern) zum Abruf bereitliegen. Der Webbrowser stellt eine Anfrage und der Webserver beantwortet diese.
Im einfachsten Fall sind diese Informationen in einer Datei gespeichert und diese wird an den Webbrowser gesendet.
Was sind Websites?
DP1 Intro
![Page 16: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/16.jpg)
Hyper Text Markup Language sind einfache Textdateien mit der Endung ».html« und können im einfachsten Texteditor erstellt und bearbeitet werden.
HTML
DP1 Intro
» HTML beschreibt dabei die Struktur von Inhalten.
Die Auszeichnung erfolgt mithilfe von Tags.
![Page 18: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/18.jpg)
Grundlegende Struktur
DP1 Intro
<html> <head> <title>Seitentitel</title> </head> <body> <h1>Dies ist eine Überschrift</h1> <p>Dies ist ein Fließtext…</p> </body> </html>
![Page 19: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/19.jpg)
Grundlegende Struktur
DP1 Intro
<p> </p>öffnendes Tag schließendes Tag
![Page 20: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/20.jpg)
Grundlegende Struktur
DP1 Intro
<p lang="de-de"> Absatz in deutsch</p>
Attributname
Attributwert
![Page 21: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/21.jpg)
Überschriften
DP1 Intro
<h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6>
![Page 22: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/22.jpg)
Absätze
DP1 Intro
<p>Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte.</p>
<p>Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte.</p>
<p>Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte.</p>
![Page 23: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/23.jpg)
Zeilenumbruch
DP1 Intro
<br/>
![Page 24: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/24.jpg)
Bilder
DP1 Intro
<img src="bildname.endung" alt="Beschreibung" />
![Page 25: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/25.jpg)
Links Verweise
DP1 Intro
externer Link: <a href="http://www.hfg-offenbach.de">HfG Offenbach</a>
interner Link: <a href="rezepte.html">Rezepte</a>
![Page 26: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/26.jpg)
Elementypen
DP1 Intro
BLOCKELEMENTE (h1, p, ul)
INLINE ELEMENTE (a, img)
![Page 27: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/27.jpg)
IDs Klassen
DP1 Intro
<div id="inhalt">…</div>
<div class="texte">…</div>
![Page 28: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/28.jpg)
Blöcke Layer
Container Gruppierungen
DP1 Intro
<div>…</div>
<span>…</span> inline
block
![Page 29: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/29.jpg)
Cascading Style Sheets
CSS
DP1 Intro
<head> <link href="css/styles.css" type="text/css" rel="stylesheet">
</head>
externe CSS-Datei
CLASS
<div class=„texte wichtig">…</div> <div class=„texte">…</div>
<div class=„texte">…</div>
![Page 30: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/30.jpg)
Cascading Style Sheets
CSS
DP1 Intro
body { color: yellow; }
h1 { background-color: black; color: white; }
.texte { text-decoration: underline; }
.wichtig { color: #ff00000; text-decoration:none; } #inhalt { text-decoration: line-through; }
![Page 31: Digital Publishing I - Dennis Praschak...2019/04/19 · Absätze DP1 Intro Dies ist ein Absatz, der beliebig lang sein kann und ganz viel Text beinhalten könnte](https://reader035.vdokument.com/reader035/viewer/2022081517/5fddff43ffbd1554c5393159/html5/thumbnails/31.jpg)
Boxmodell
DP1 Intro