Post empfehlen

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).

Beispielseite
Download Code

 

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

Ein Beispiel von mir.

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.

Flavors
About
Onepagelove

Personal Page

Post empfehlen
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Markiert in:         

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.