Im Magazin für Computer und Technik, Heft 18 hatte ich einen Artikel über Personal Pages gelesen.
Eine ideale Möglichkeit das Wissen vom HTML 5.0 und CSS im Unterricht zu vertiefen und die neuen Möglichkeiten von responsive Design zu erproben.
Im ersten Teil gebe ich einen Überblick über Personal Pages und im zweiten Teil eine Lösung für den HTML 5.0 und CSS Unterricht.
Personal Pages
Im Web verlagert sich die Selbstdarstellung verstärkt in soziale Netzwerke. Die alte herkömmliche Webseite hat ausgedient. Doch auch die herkömmliche Homepage eignet sich immer noch bestens zur Selbstdarstellung. Heute nennt man sie nicht mehr „Homepage“, sondern „Personal Page“ und zeigt auf einer Seite alle wichtigen Informationen: Name, was man macht oder anbietet, und vor allem, wer man ist. Weiter verlinkt man die Seite zu eigenen Projekten, Blogs und Webpräsenzen.
Gedacht ist die Personal Page als Anlaufstelle und „Landing Page“. Sie vermittelt dem Besucher einen ersten Eindruck.
Im Januar 2011 griff Naz Hamid die Idee der aufs Wesentliche reduzierten Homepage in seinem Blog Weigthtshift http://weightshift.com/ auf, wo er seine eigene Minimal-Seite nazhamid.com vorstellt.
Er stellte eine Fertiglösung an „The Personal Page„, diese besteht aus einer Musterseite und dem jQuery-Plug-in Backstrecht von Scott Robin, welches das Hintergrundbild automatisch an die Grösse des Browsers-Fenster anpasst (responsive Design).
Weitere Personal Pages
Jen Schuetz
Tim Lum
Paul Amstrong
Erstellen einer Personal Page
In einem ersten Schritt erstellt man mit den Schülern eine Fertiglösung Personal Page. So lernen Sie die verschiedenen Möglichkeiten und verschiedene Designs kennen, z.B. mit:
Flavors.me
About.me
Dooid.me
ThePersonalpage
Im zweiten Schritt schaut man mit den Schülern eine vordefinierte Lösung an. Ich habe die von ct verwendet.
Als erstes lohnt es sich, die css Dateien und die Bilddateien in separate Order css und images zu verschieben. Die Schüler sollen HTML und CSS Datei so anpassen, dass die Verlinkung zu Bildern und CSS wieder funktioniert.
Nun soll die Seite auf die eigene Bedürfnisse angepasst werden. Eigene Bilder, Icons, Schrift etc.
Folgende Seiten könnten dabei helfen.
Icons
Webdesingtunes
Weloveiconsfonts
Dribble
Webfonts
Typekit
Google Fonts
Dieses Beispiel habe ich mit einer zusätzlichen small.css ergänzt. Diese CSS Datei wird durch <link rel=“stylesheet“ type=“text/css“ media=“only screen and (max-device-width: 480px)“ href=“small.css“ /> aufgerufen, falls der Bildschirm höchstens 480px breit ist.
Um die verschiedenen Bildschirmgrössen zu testen, empfehle ich euch Protofluid.
In einem weiteren Schritt kann man mit den Schülern eine eigene Personal Page mit entsprechenden CSS Dateien aufbauen. Folgende Seiten als Inspiration.