webdesign. technologien im web text inhalt worte, pfade, bilder, videos,... html struktur...
TRANSCRIPT
Webdesign
Technologien im Web
Text
• Inhalt• Worte, Pfade, Bilder, Videos,...
HTML
• Struktur• Abschnitte, Überschriften, Links,...
CSS
• Layout• Design, Schriften, Farben,...
JS
• Interaktion• Veränderungen (clientside)
Web2.0Interaktion
(serverside)
Datenbanken
CMS(alles zusammen)
Ablauf Semester
– Grundkurs HTML & CSS (codecademy)
– Übungen Layout gestalten mit HTML & CSS
– Probe HTML & CSS
– Projekt design Website (Ausschreibung Mockup)
– Grundkurs PHP (codecademy)
– Einführung CMS (WordPress)
– Übungen Formulare und Datenbankabfragen
– Probe PHP & Datenbanken
– Projekt dynamische Webseite (WordPress)
– Ende AF infcom.ch
Vorläufige ZeitplanungTHEMA: 1L 2LDatum (Mo) Mi 13:05 - 13:50 Do 10:30 - 12:05
9-Feb-2015 7 HTML&CSS (Codecademy) HTML&CSS (Codecademy)16-Feb-2015 8 HTML&CSS (Codecademy) HTML&CSS (Codecademy)23-Feb-2015 9 HTML&CSS (Übungen) HTML&CSS (Übungen)
2-Mär-2015 10 HTML&CSS Layout Principles9-Mär-2015 11 Kollegiumstag/Erarbeitung Text Corporate Design
16-Mär-2015 12 Corporate Design Corporate Design/Ausschreibung23-Mär-2015 13 Projekt Ausschreibung Projekt Ausschreibung30-Mär-2015 14 Projekt Ausschreibung Abgabe Ausschreibung
Ferien (Wochen 15 & 16)20-Apr-2015 17 Arbeitswoche MA Arbeitswoche MA27-Apr-2015 18 CMS WP4-Mai-2015 19 PHP PHP
11-Mai-2015 20 PHP Auffahrt (Do & Fr frei) 18-Mai-2015 21 Formulare & Datenbanken Formulare & Datenbanken25-Mai-2015 22 PHP & Datenbanken WP1-Juni-2015 23 WP WP8-Juni-2015 24 WP WP
15-Juni-2015 25 WP WP22-Juni-2015 26 WP Abgabe WP29-Juni-2015 27 Debattiertag Maienzug
STATISCHE WEBSEITEN
.com
– (immer) Einloggen mit dem bereitgestellten login
– Kurs (HTML & CSS) selbständig bearbeiten
– Sie haben 2 Wochen (Unterricht & zuhause)
– Optional: „Make a Website“-Kurs / JS-Kurs
DYNAMISCHE WEBSEITEN
HTML & CSS
<!DOCTYPE ... ><html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body></html>
Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:
Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1-Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt
h1 { color: orange; font-weight: bold;}
HTML & CSS
<!DOCTYPE ... ><html> <head>
<link rel="stylesheet" href="meinCSS.css" type="text/css" />
</head> <body>
<div id="nav"> <ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> </div>
</body></html>
Noch immer wird “meinCSS.css” benutzt:
Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll
...#nav { width: 60%; float: right;}...
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
Statische Webseite
Der Webdesigner erstellt die Dateien (HTML, ggf. CSS separat), die der Host dann im Internet für die Clienten (Browser) bereit stellt. Also sieht jeder dieselbe, unveränderliche Webseite, die der Webdesigner gestaltet hat.
Layout der Seite(CSS)
Inhalt der Seite(Buchstaben, ...)
Struktur der Seite(HTML)
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
Dynamische Webseite:
Der Webdesigner schreibt ein Programm (in PHP), das die benötigten Dateien (HTML, ggf. CSS) produziert. Deshalb kann die Seite unterschiedlich aussehen, in Abhängigkeit von Rechten oder Verhalten des Benutzers.
Layout der Seite(CSS)
Inhalt der Seite(Buchstaben, ...)
Struktur der Seite(HTML)
Inhalt | Struktur | Layout
<div id=„chat“> Hallo! </div>
WEB2.0 / CMS:
Die einzubeziehenden Inhalte werden in einer Datenbank gespeichert. Daher können sie flexibel benutzte/geordnet und sogar online geändert werden (mit den entsprechenden Rechten).
Layout der Seite(CSS)
Inhalt der Seite(Buchstaben, ...)
Struktur der Seite(HTML)
Wordpress 4.0
oder:
Wie man ein CMS benutzt und administriert.
Ein Anwendungsbeispiel
– Frontend: vom Client auszuführender Code was der Endbenutzer zu sehen bekommt
– Backend: vom Server auszuführender Code (inkl. Einstellungen)
bestimmen das Ergebnis im Frontend
Content Management System
Bei einem Content Management System – kurz CMS – geht es darum, den Inhalt einer Webseite, also den Content, zu verwalten. Im Gegensatz zu statischen Webseiten, deren Inhalt sich nicht oder nur selten ändert, werden CMS für dynamische Webseiten mit wechselndem Inhalt eingesetzt. Mit Hilfe von CMS ist es möglich, Inhalte ohne Programmierkenntnisse zu erstellen. Außerdem lassen sich Benutzer in Gruppen organisieren, denen wiederum unterschiedliche Rechte vergeben werden können. So lässt sich ziemlich genau einstellen, welcher Benutzer was darf.
Bild: www.rackspace.com/blog/choosing-an-open-source-content-management-system-infographic/Text: Lars Becker; http://www.wp-campus.de/content-management-system-kurz-erklaert/#prettyPhoto
Die gängigsten kostenlosen CMS sind:
• WordPress
• Joomla
• Drupal
• Typo3
Infografic: http://www.cms2cms.com/blog/content-management-systems-jungle-how-to-find-your-way/
Also los: WordPress installieren
Der Host ist bereits angemietet, die zu WordPress 4.0 gehörenden Dateien sind auf den Server geladen, die Datenbank ist angelegt, und das für jede(n) von ihnen. Jetzt müssen sie ihre WP-Version nur noch installieren:
– http://www.nksainf.ch/nicolasruh/wp-admin/install.php
hier sollte natürlich ihr Name stehen, siehe Zettel
Wird im header angezeigt, hat nichts mit der URL zu
tun.
vornamenachname
Passwort bitte merken!
geben sie eine funktionierende Adresse an
Häkchen entfernen !
hier geht’s zum administrator-login
Einloggen: http://www.nksainf.ch/nicolasruh/wp-admin/
Backend: http://www.nksainf.ch/nicolasruh/wp-admin/
Frontend: http://www.nksainf.ch/nicolasruh/
Der Beitrag...
– ist die Grundeinheit eines Blogs
(WP kennt auch Seiten, aber damit beschäftigen wir uns später)
http://www.topwebhostinggeek.com/how-to-use-wordpress-features-and-functionalities-infographic.htm
Aufgaben
1. Zunächst sorgen sie für ein wenig Inhalt:• Erstellen und Veröffentlichen sie > 5 Beispiel-Beiträge• Experimentieren sie auch mit Bildern, Videos, Links, ...• Machen sie sich mit der Text-Ansicht des Editors vertraut• Setzen sie Beitragsbilder, Schlagwörter und Kategorien ein• Überprüfen sie das Ergebnis im Frontend
2. Machen sie sich weiter mit dem Backend vertraut: • schauen sie sich an, welche Einstellungen man vornehmen
kann• probieren sie Verschiedenes aus, z.B.
– neues Theme installieren, Theme anpassen, Kommentare moderieren
• Aber Achtung! Sie sind der Administrator und müssen Dinge ggf. auch wieder in Ordnung bringen
Die grosse Aufgabe
– Sie haben jetzt ihre eigene WordPress-Seite. Auf dieser Seite sollen im Laufe der Zeit möglichst viele Informationen aufgeschaltet werden, die ihnen bei der Vorbereitung der Abschlussprüfung helfen können (Binf und/oder andere Fächer)
– Als Admin sorgen sie dafür, dass
• die Inhalte der Seite sinnvoll ausgewählt und inhaltlich korrekt sind, die Sprache klar und richtig ist und nötige Quellen angegeben sind
• die Strukturierung von Seite und Inhalten es Besuchern einfach macht, Relevantes zu finden
• das Layout der Seite einheitlich und ansprechend gestaltet ist und die Ordnung klar transportiert
– Ihre Seite wird gegen Ende des SJ anhand diese Kriterien bewerten (ganze Note, Kriterien bekommen sie noch genauer)
Die letzten 15 Minuten...
– Erstellen sie mindestens einen Beitrag, mit
1. Gut gewähltem Titel
2. Sauber formuliertem Text (ca. 5 – 10 Sätze)
3. Beitragsbild, z.B. Screenshot
4. Kategorie(en) & Tag(s) – sobald wir das eingeführt haben
Inhaltlich soll es in diesem Beitrag darum gehen, was sie heute im BInf (neues) gelernt haben.
Heute könnten sie z.B. einen Beitrag zu Frontend/Backend schreiben, oder erklären, was ein CMS ist.
ab jetzt immer
HTML & CSS
<!DOCTYPE ... ><html> <head>
<link rel="stylesheet" href=”style.css" type="text/css" />
</head> <body>
<div class=”site-header"></div> <div class=”site-main"> </div> <div class=”site-footer"> </div>
</body></html>
seite.html
Das Beispiel, das uns jetzt eine Weile beschäftigen wird Sehr nah am WordPress Standard-Aussehen
(nur etwas vereinfacht und nicht mehr dynamisch)
...
.site-header { width: 100%; height: 48px;}...
style.css
HTML & CSS
<article id="post-4" class="post "><header class="entry-header">
<h1 class="entry-title">Ein Beitrag</h1></header><!-- .entry-header --><div class="entry-content">
Text Text Text Text Text Text Text </div><!-- .entry-content -->
</article><!-- #post-## --> <article id="post-1" class="post ">
<header class="entry-header"><h1 class="entry-title">Noch ein Beitrag</h1>
</header><!-- .entry-header --><div class="entry-content">
Text Text Text Text Text Text Text Text</div><!-- .entry-content -->
</article><!-- #post-##
seite.html
seite.html enthält zwei Beispiel-Beiträge In Teil 1 des Arbeitsblatts geht es darum, die Details der
Formatierung diese Beiträge anzupassen
...
.post { margin: 2px 18px; color: #002AFF;}...
style.css
HTML & CSS
<!DOCTYPE ... ><html> <head>
<link rel="stylesheet" href=”style.css" type="text/css" />
</head> <body>
<div class=”site-header”> </div>
<div class=”site-main">
<div class=”main-content">
<div class=”post”> </div> <div class=”post”> </div>
</div>
<div id=”secondary"> </div> </div>
<div class=”site-footer"> </div>
</body></html>
seite.html
site.html enthält drei Hauptcontainer, der (mittlere) Hauptinhaltsbereich ist weiter unterteilt
In Teil 2 des Arbeitsblatts geht es darum, diese Container zu positionieren, um bestimmte Layouts zu erreichen
...
.main-content { float: right;}#secondary { float: left;}...
style.css
Typisches Layout mit float
Layout-Variationen
Das Grundgerüst kann man sich erstellen lassen, z.B. von diesem
Layout-Generator: http://csscreator.com/version2/pagelayout.php
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
Statische Webseite
Client/Browser:Erfragt Dateien (per URL) und stellt sie dar.
www-Server:Speichert Dateien (HTML,
CSS, JS, ...) und stellt sie auf Anfrage bereit
• HTML, CSS, JS, ... Dateien schreiben• Host mieten und einrichten• Dateien hochladen (per FTP)
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
Dynamische Webseite
Client/Browser:Erfragt Dateien (per URL) und stellt sie dar.
www-Server:Speichert PHP-Skripte, die bei Anfrage ausgeführt werden und HTML-Dateien produzieren
• PHP, CSS, JS, ... Dateien schreiben• Host mieten und einrichten• Dateien hochladen (per FTP)
1. Http-Request an URL
2. HTML-Datei schicken
3. ggf. weitere Dateien nachladen
CMS(content management system)Client/Browser:Erfragt Dateien (per URL) und stellt sie dar.
www-Server:Erfragt Inhalte der Seite aus einer Datenbank (SQL), baut diese dann mit PHP in HTML-Datei ein
erfragt Daten
gibt Daten
zurück
Dann: Interaktion wie normaler Client, aber als admin eingeloggt Seite verändern über Backend
Zu Beginn: CMS (inkl. Datenbank) installieren
Zei
tach
se
kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten
WWW-Server
Browser
Datenbank Server
ServerClient
weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET)
Browser
Browser
WWW-Server
WWW-Server
ServerClient
weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt HTML-Code an Browser weiter
statische Webseitendynamische Webseiten
HTML-Dateien
(CSS,
JavaScript)
mySQL
JavaScript
Auf einen Blick:
PHP
Wie funktioniert das Internet?
IPVS(IMPLE)
Wir spielen Internet
IPvS(imple) Rollen
Client
MAC:
IP: 1.2.3.4
DNS: 4.5.6.4
Gateway: 1.2.3.9
DNS-Server
MAC:
IP: 4.5.6.4
DNS: 4.4.4.4
Gateway: 4.5.6.9
WWW-Server
MAC:
IP: 7.8.9.4
DNS: 4.4.4.4
Gateway: 7.8.9.9
Ziel Maske Gateway Schnittstelle1.2.3.1 9.9.9.0 1.2.3.9 1.2.3.93.3.3.1 9.9.9.0 3.3.3.1 3.3.3.14.5.6.1 9.9.9.0 3.3.3.2 3.3.3.18.8.8.1 9.9.9.0 3.3.3.3 3.3.3.11.1.1.1 0.0.0.0 3.3.3.3 3.3.3.1
Ziel Maske Gateway Schnittstelle4.5.6.1 9.9.9.0 4.5.6.9 4.5.6.93.3.3.1 9.9.9.0 3.3.3.2 3.3.3.21.2.3.1 9.9.9.0 3.3.3.1 3.3.3.28.8.8.1 9.9.9.0 3.3.3.3 3.3.3.21.1.1.1 0.0.0.0 3.3.3.3 3.3.3.2
Ziel Maske Gateway Schnittstelle3.3.3.1 9.9.9.0 3.3.3.3 3.3.3.38.8.8.1 9.9.9.0 8.8.8.1 8.8.8.11.2.3.1 9.9.9.0 1.2.3.9 3.3.3.34.5.6.1 9.9.9.0 4.5.6.9 3.3.3.37.8.9.1 9.9.9.0 7.8.9.9 8.8.8.11.1.1.1 0.0.0.0 8.8.8.9 8.8.8.1
Router A
MAC:
IP: 1.2.3.93.3.3.1
Router B
MAC:
IP: 4.5.6.9 3.3.3.2
Router C
MAC:
IP: 3.3.3.3 8.8.8.1
Ziel Maske Gateway Schnittstelle8.8.8.1 9.9.9.0 8.8.8.2 8.8.8.27.8.9.1 9.9.9.0 7.8.9.9 7.8.9.93.3.3.1 9.9.9.0 8.8.8.1 8.8.8.21.1.1.1 0.0.0.0 8.8.8.1 8.8.8.2
Router D
MAC:
IP: 8.8.8.2 7.8.9.9
IPvS(imple) Daten
HTTP-Request des Clients:
GET /index.html HTTP/1.1 Host: www.beispiel.ch
DNS-Request des Clients:
URL IP
www.beispiel.ch ?
index.html auf WWW-Server:
<!DOCTYPE ... ><html> <head> <title>Beispiel Webseite</title> <link rel="stylesheet" type="text/css" href="css/beispiel.css"> ... </head> <body> <h1>Hallo</h1> <img src="bilder/bild.jpg" alt="Bild“ /> ... </body></html>
URL IP
www.beispiel.ch 7.8.9.4
www.leo.org 9.8.7.6
... ...
Lookup-liste auf DNS-Server:
ARP-Request
IPvS(imple) Topologie
Client:1.2.3.4
1.2.3.93.3.3.1
3.3.3.24.5.6.9
3.3.3.38.8.8.1
8.8.8.27.8.9.9
DNS-Server:4.5.6.4
WWW-Server:7.8.9.4
Ausprobieren: 1. http://www3.rad.com/networks/2005/clieserv/ClieServ.swf 2. WIKI: TCP_IP_Applet.zip entpacken startApplet.html öffnen
Übersicht