Aufgabe: Horizontales Menü

Wir haben alles gelernt was es braucht, um ein horizontales Menü zu erstellen. Versuche das nun selbständig zu erarbeiten. Vorgabe ist ein Menu mit Punkten die sich auf einer Linie befinden. Die Links haben etwas Raum um den Text und jeder Menüpunkt wird von einer dezenten Linie umrandet. Das gesamte Menü selber hat auch einen feinen Rand welcher mit wenigen Pixeln Abstand alle Punkte umfass:

Versuche die Aufgabe in kleine Teilaufgaben zu unterteilen:

  • Ränder definieren
  • Hintergrundfarben definieren
  • Elemente nebeneinander anordnen
  • Abstände definieren
  • Optimierungen

Als Zusatzaufgabe kann dem aktiven Menupunkt eine besondere Auszeichnung gegeben werden. Was wird wohl den aktiven Menüpunkt von den Anderen unterscheiden? Wie “weiss” ich, auf welcher Seite ich bin? Nicht vergessen, wir haben PHP als Werkzeug.

Termine für Nachholprüfung

Die ofizziellen ZbW Nachholprüfungen finden an folgenden Daten statt:

  • Montag, 19. März 2012 ab 17:00
  • Dienstag, 20. März 2012 ab 17:00

Jeder der eine Prüfung verpasst hat, muss an einem der beiden Termine die entsprechende Prüfung nachholen.

Einrichten eines neuen Hosts

Veröffentlicht am von • Typ Articles • Permalink

Auf einem Server können mehrere Webseiten betrieben werden. Diese werden Host genannt. In diesem Artikel möchte ich beschreiben, welche Schritte nötig sind, um einen neuen Host auf dem eigenen Rechner einzurichten.

  1. Server installieren
  2. Server richtig konfigurieren
  3. Virtuellen Host konfigurieren
  4. Dateien für die Webseite am richtigen Ort platzieren
  5. URL des Hosts in der hosts Datei mit der IP des eigenen Rechners verbinden damit

Server installieren

Zuerst muss ein Server auf dem eigenen Rechner installiert werden. Darauf gehe ich nicht im Detail ein, es gibt dazu bereits eine Präsentation und einen Post. Für den Mac kann man MAMP und für Windows XAMPP einsetzen.

Server richtig konfigurieren

Um die Entwicklung einfacher zu gestallten werden wir die Server unter Port 80 – dem Normalen Port für Webseiten – betreiben. Dies ist ein potenzielles Sicherheitsrisiko!

Auf dem Mac muss ausserdem noch eine Anpassung an der Konfiguration des Apache vorgenommen werden. In der Datei /Applications/MAMP/conf/apache/httpd.conf nach folgendem Text suchen “# Virtual hosts”. Dort muss in der dartunter stehenden Zeile das # entfernt werden:
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
Damit werden die Konfigurationen für die einzelnen virtuellen hosts aus dieser Datei korrekt geladen.

Virtuellen Host konfigurieren

Nun konfigurieren wir, mit welcher URL die Webseite angesprochen wird, und wo die Dateien zur Webseite abgelegt sind.

Eine Minimale Konfiguration für Windows sieht etwa so aus:

<VirtualHost local-dwap.zbw.ch:80>
ServerName local-dwap.zbw.ch

DocumentRoot “C:/xampp/htdocs/zbw/dwap/www”
<Directory “C:/xampp/htdocs/zbw/dwap/www”>
Options Includes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

Unter windows werden diese Zeilen in folgender Datei am Ende eingefügt:
C:\xampp\apache\conf\extra\httpd-vhosts.conf

Für Mac mit MAMP sind die Pfade leicht anders:

<VirtualHost local-dwap.zbw.ch:80>
ServerName local–dwap.zbw.ch

DocumentRoot “/Applications/MAMP/htdocs/zbw/dwap/www”
<Directory “/Applications/MAMP/htdocs/zbw/dwap/www”>
Options Includes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

Diese Konfiguration wird nun zuunterst in folgendem File eingefügt /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Achtung, in dieser Datei sollte der Befehl “NameVirtualHost *:80″ auf “NameVirtualHost 127.0.0.1″ geändert werden.

Nun kann der Webserver neu gestartet werden und die vorgenommenen Änderungen sollten aktiv sein. Wenn MySQL nicht startet, im Taskmanager oder in der Aktivitätsanzeige alle Tasks mit dem Namen “mysqld” abschiessen und den Server nochmals neu starten.

Dateien für die Webseite am richtigen Ort platzieren

Nun können die Dateien am in der Virtual-Host Konfiguration unter “DocumentRoot” spezifizierten Stelle abgelegt werden.
In diesem Beispiel also unter C:/xampp/htdocs/zbw/dwap/www
beziehungsweise unter /Applications/MAMP/htdocs/zbw/dwap/www

Hosts Datei anpassen

Da die neue URL local-dwap.zbw.ch nur lokal vorhanden – und somit nicht über einen DNS Server mit einer gültigen IP verbunden werden kann, muss man diese URL in der lokalen hosts Datei mit der IP des eigenen Rechners verbinden – 127.0.0.1. Damit weiss der Browser, unter welcher IP die neue URL local-dwap.zbw.ch zu finden ist.
Folgende Zeile muss in die Hosts Datei eingetragen werden:
127.0.0.1 local-dwap.zbw.ch

Dies muss mit administartorrechten geschehen. Unter Windows kann es ausserdem sein, dass ein Anti-Virus Scanner dazuwischenfunkt. Da es für den Mac nicht wirklich Viren gibt, ist das da kein Problem ;)
Die Datei befindet sich unter Windows hier:
C:/windows/system32/drivers/etc/hosts
Die Hosts Datei sind beim Mac & anderen Unix Systemen unter /etc/hosts und nicht direkt sichtbar. Um die Datei zu finden im Finder die Tastenkombination CMD + Shift + G drücken und den Pfad /etc/ eingeben. Danach kann die Datei mit einem Text-Editor editiert werden. Sollte dies nicht gehen, die Datei auf den Schreibtisch kopieren, editieren und zurückkopieten.

Phu… geschaft. Nachdem alle diese Schritte getan sind, kann die Webseite im Browser aufgerufen werden.

Hausaufgaben – Gewichtung und Kaskade

Hausaufgaben auf nächsten Freitag:
* Im unterstehenden Post hat es in der Näher des Unterlagen-Links einen verborgenen Link zu den Lösungen – diesen gilt es zu finden
* Auf dem Aufgabenblatt “CSS Syntax – Übung” sind Übung eins und zwei zu lösen
* Im Little Boxes Kapitel 13 über die Regeln der Kaskade lesen – es gibt einen Kurztest. Zum Kapitel passen die weiteren Folien der heutigen Präsentation die auch im Link des letzten Posts enthalten sind

Neuer Projektstand & funktionierende vHost Config (Update)

Veröffentlicht am von • Typ Articles, download, Mediatechnik HF 10-13, project • Klasse , • Permalink

Ich habe Euch den neuen Projektstand vom letzten Freitag zum Download bereitgestellt.

Den Inhalt des entpacken und in folgendem Pfad ablegen;
C:\xampp\htdocs\zbw\example\
/Applications/MAMP/htdocs/zbw/example/

Danach sollte es folgende Ordner dort haben;
C:\xampp\htdocs\zbw\example\www
/Applications/MAMP/htdocs/zbw/example/www

Unter application/configuration/examples hat es neu eine Datei “httpd.conf” welche Mac User verwenden können um die alte zu ersetzen. Danach kann die Datei “httpd-vhosts.conf” an den entsprechenden Ordner kopiert werden. Windows-User müssen darin noch die Pfade anpassen. Dazu gibt es eine Anleitung in der readme.txt Datei. Wenn alles korrekt gemacht wurde und MAMP und XAMP neu gestartet sind, sollten alle drei vHost configs sowie MySQL gehen. Bei Reto hat’s geklappt (von ihm stammt die httpd-vhosts.conf Datei). Er kann bei Problemen vielleicht weiterhelfen. Sonst kann auch hier ein Comment hinterlassen werden.

Update:
V-Host Config Separat