Sie sind auf Seite 1von 35

Moderne Webseiten entwickeln

von André Wösten


Die Welt der Webstandards

Quelle: http://commons.wikimedia.org/wiki/File:HTML5-Spezifikations-%C3%9Cbersicht.svg
Was kann CSS?
Abstände Bilder

Farben Farbverläufe (Gradients)

Schatten Rahmen

Animationen (Transitions) Layouting

3D-Objekte Schriften

Transformationen Responsive Design (Media Queries)


Responsive Design, Mobile Evolution, Mobile First?
Kommunikation zwischen Client & Server
Client
Browser Internet
(Chrome, Firefox, IE, Safari)

Server (XAMPP!)
Webserver (Apache)

Dateisystem mit Datenbankserver (MySQL)

- HTML
- CSS „Dynamische“
- JavaScript Anwendungsskripte
- PHP (PHP) Inhalte
- Medien wie
- Grafiken
- Musik
Content Management Systeme (CMS)
Browser
Seitenbesucher

Joomla
Anzeigen
Typo3 Frontend
Datenbank
Drupal Backend
Verwalten

Wordpress
Server

Browser
Betreiber
Joomla: Integration von Module in ein Template
Logo Header

Login

Rechter Seitenbereich
Linker Seitenbereich
Menü PR

Inhalts- PR

PR bereich
Die Entwicklung von HTML
- 1999 2000 - ~2009 2009 -
HTML 4 XHTML HTML5

● Textausgabe ● Basiert auf XML ● Für die mediale Welt


● Formatierung ● Layout → CSS ● Von Herstellern
● Formulare ● Syntax & Semantik mitentwickelt
● Tabellen ● Definiert nur noch
● Textfluss Struktur
● Bilder ● Bringt
● Frames Inhalte unter
● Skripte ● Canvas
● Stylesheets ● Audio & Video
● Bewegung
● WebGL
Die Auszeichnungssprache HTML

< Tag/Auszeichner Attribut=“Wert“ Attribut=“Wert“ >

Inhalt

</ Tag/Auszeichner >


Aufbau eines HTML-Dokuments
DOCTYPE

HTML

HEAD

META-Infos

TITLE

Stylesheets

Skripte

BODY

Inhalt
CSS: RGB-Farbraum

Quelle: Wikipedia
CSS: HSV-Farbraum

Quelle: Wikipedia
DOM (Document Object Model)
CSS: Boxen
Block

Inline

Inline-Block

Table
CSS: Das Block-Box-Modell
content-box width

width
padding
border
margin
NEU: border-box width
CSS: Line-Box bei Inline-Elementen

<p>In 1912, <span class=“ship“>Titanic</span> sank on her maiden voyage.</p>


CSS: Schriftgrößen
„Responsive Gridsysteme“
.container
.row
.col-4 .col-4 .col-4

.row
.col-2 .col-5 .col-5

.row
.col-3 .col-3 .col-3 .col-3

Volle Seitenbreite – Standard 960px – unterteilt in 12 Spalten


CSS: Transitions

Quelle: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Tabellen
Definition der Tabelle „Projekt“

Spaltenname Datentyp Weitere Eigenschaften


id INT PRIMARY KEY
bezeichnung VARCHAR(32) NOT NULL
anlagedatum DATE DEFAULT NOW()
angestellter_id ... INT FOREIGN KEY → Angestellter.id
... ...
„NULL“ = „leer“

'' != NULL != 0

NULL
'' NULL
0 0
1
NULL für Tristates
NULL Kunde hat sich nicht entschieden.

0 Kunde möchte keinen Newsletter

1 Kunde möchte einen Newsletter


Beziehungen

Angestellter Projekt
1 leitet N
- ID - ID
- Vorname - Bezeichnung
- Nachname - ID des Leiters
- ... Projektmitarbeiter -
N M
- ID des
Projektes
- ID des
Angestellten
Fremdschlüsselbeziehungen
Projekt Aufgaben
ID Bezeichnung ID Projekt-ID Name
1 Internetseite 1 1 Frontend
2 DVD 2 1 Backend
3 2 Cover
4 2 Video
1. Normalform
Falsch: Nicht atomar
Tabelle „Personen“
ID Name Anschrift PKWs
1 André Wösten Musterstr. 1; 12345 Musterstadt M-W 123;M-W 345
2 Muster Stefan Gartenstr. 2; 12345 Musterstatt M-M 123

Richtig: Atomar
Tabelle „Personen“
ID Vorname Nachname Strasse HNr PLZ Ort PKW1 PKW2

1 André Wösten Musterstr. 1 12345 Musterstadt M-W 123 M-W 345

2 Stefan Muster Gartenstr. 2 12345 Musterstatt G-M 123 NULL


2. Normalform
Falsch: Keine Zugehörigkeit aller Felder zum Objekt
Tabelle „Personen“
ID Vorname Nachname Strasse HNr PLZ Ort PKW1 PKW2

1 André Wösten Musterstr. 1 12345 Musterstadt M-W 123 M-W 345

2 Stefan Muster Gartenstr. 2 12345 Musterstatt G-M 123 NULL

Richtig: Zugehörigkeit aller Felder zum Objekt


Tabelle „PKW“
Tabelle „Personen“ PersonID KZ
ID Vorname Nachname Strasse HNr PLZ Ort 1 M-W 123
1 André Wösten Musterstr. 1 12345 Musterstadt 1 M-W 345
2 Stefan Muster Gartenstr. 2 12345 Musterstatt 2 G-M 123
3. Normalform
Falsch: Felder sind voneinander abhängig
Tabelle „PKW“
Tabelle „Personen“ PersonID KZ
ID Vorname Nachname Strasse HNr PLZ Ort 1 M-W 123
1 André Wösten Musterstr. 1 12345 Musterstadt 1 M-W 345
2 Stefan Muster Gartenstr. 2 12345 Musterstatt 2 G-M 123

Richtig: Felder sind nicht voneinander abhängig


Tabelle „PKW“
Tabelle „Personen“ PersonID KZ
Tabelle „Orte“
ID Vorname Nachname Strasse HNr PLZ 1 M-W 123
PLZ Ort
1 André Wösten Musterstr. 1 12345 1 M-W 345
12345 Musterstadt
2 Stefan Muster Gartenstr. 2 12345 2 G-M 123
Nach der Normalisierung
Tabelle „Orte“ Tabelle „Personen“
wohnhaft in
PLZ Ort ID Vorname Nachname Strasse HNr PLZ

12345 Musterstadt 1 André Wösten Musterstr. 1 12345

2 Stefan Muster Gartenstr. 2 12345

Tabelle „PKW“
gefahren von
PersonID KZ

1 M-W 123

1 M-W 345

2 G-M 123
SQL
DDL DML DQL
Data Definition Language Data Manipulation Language Data Query Language

CREATE INSERT SELECT

ALTER UPDATE

DROP DELETE

TRUNCATE
Statisch vs. Dynamisch
Client/Browser Client/Browser

Server Server
index.php
index.html kontakt.html referenzen.html
DB (Webanwendung)

style.css logic.js style.css logic.js


Schichten einer Webanwendung
JavaScript
(Logik, Interaktivität, Verhalten)

CSS
(Layout, Design, Verhalten) Client / Browser

HTML
(Struktur, Layout)

PHP
(sog. Geschäftsprozesse)

Server
MySQL
(Inhalte, Metadaten)
PHP-Workflow
Webserver

PHP
.php Datei
Interpreter
3

4 2

Rückgabe Anfrage
Client / Browser
von HTML von PHP
5 1
Formulare
Webserver
Client / Browser
Mail
an Admin

HTTP-Request

URL | http://www.meineseite.de/index.php?seite=bestellung PHP

Vorname: André
POST | Nachname: Wösten
Bestellung
Anzahl: 4 speichern
Architektur unserer Webanwendung
Base Bootstrap
Frontend Backend
jQuery

PHP → MySQL PHP → MySQL

MySQL-Datenbank
Webinhalte Künstler Alben

Benutzer Sitzungen Shop

Dateisystem mit
Medien Medien
LESS → CSS
LESS-Datei: CSS-Datei:

header { header {
margin: 10px 0; margin: 10px 0;

ul { header ul {
margin: 0;
padding: 0;
LESS margin: 0;
padding: 0;
CSS }
li { Preprocessor
display: inline-block; header ul li {
padding: 0 10px; display: inline-block;
} padding: 0 10px;
} }
}