Schlagwort-Archive: Tutorial

An der eigene Seite basteln

image-932

Für unser diesjähriges Wunderkammerprojekt (letztes Jahr: Artefakte moderner Archäologie) legen wir wieder selbst Hand an in der Welt des Internet. Die Möglichkeiten Internetseiten selbst zu bauen, ohne Kenntnisse von HTML und CSS, werden immer einfacher (hier stellte ich schon letztes Jahr ein paar Internet-Programme vor). Doch möchte man seinen eigenen Kopf durchsetzen oder in die bereits gestalteten Templates kreativ eingreifen, kommt man an der Bastelei nicht vorbei. Hier ein paar Hinweise: Weiterlesen

Schriften in die Website einbinden

War es bis vor kurzem nur möglich, Standart-Systemschriften (Arial, Verdana, Times New Roman, Courier etc.) auf seiner Website anzeigen zu lassen, so setzt sich die individuelle Schriftgestaltung auf Seiten immer mehr durch. Nicht nur in Blog-Systemen oder Seiten wie about.me lassen sich individuell Schriften auswählen. Jeder kann auf seiner eigenen Seite für typografische Individualität und, durch die technische Optimierung für die Bildschirmausgabe, für bessere Lesbarkeit sorgen. Dafür stellen die großen und kleinen Schriftenhäuser immer mehr Webfonts her und bieten sie zum Kauf oder kostenlosen Download an. Jedoch nicht jeder Browser zeigt zur Zeit diese Webfonts an.

Grundsätzlich muss man zwischen zwei Varianten der Einbindung individueller Schriften unterscheiden:

1.
Man legt die Schriften in einem Verzeichnis auf dem Server der eigenen Website ab und fügt sie mittels CSS in die Seiten ein.

Diese Schriften liegen bei Schriftenhändlern, z.B. bei FontShop oder Fontspring, im .woff und .eot Format vor. Diese Formate werden von Firefox, Internet Explorer und Chrome unterstützt (Safari leider nicht). Mit der Seite Fontfonter kann man schon mal vorab die Wirkung bestimmter Schriften auf seiner Seite ausprobieren (Achtung! Durch einen Programmiertrick funktioniert dies auch in Safari!).

Alle notwendigen Informationen zum Einsatz von Webfonts und einen kostenlosen Font zum Download bietet FontShop auf einer Themenseite.

«Fontspring» bietet einige seiner Schriften kostenlos oder zum kleinen Lizenz-Preis für die Einbindung in Websites an. Großer Vorteil, man erhält ein Schriftenpaket, das neben den Formaten .woff und .eot auch eine OpenType-Schrift (für die Desktop-Nutzung) enthält. Einen Überblick über die Webfonts, die unterstützten Browser und Formate und die Vorteile gegenüber des Schriftenmietens bei «Typekit» (siehe 2.) gibt es hier.

Fontssquirrel, eine gute Quelle für Free Fonts, bietet mit dem @font-face generator ein Werkzeug, zur Umwandlung von Fonts in das .eot- und .woff- Format

2.
Die Schrift liegt auf einem fremden Server und wird kostenlos oder kostenpflichtig mittels CSS in die Seiten eingebunden. Der Vorteil dieser Technik liegt in der Darstellung der Schriften in nahezu allen Browsern und auf mobilen Geräten.

Google hostet eine Reihe von Webfonts und bietet diese kostenlos zur Einbindung in die eigene Seite an. Eine Anleitung und einen Schriftenüberblick gibt es hier.

Bei «Typekit» mietet man Schriften auf Grundlage von Seitenaufrufen (Page Views) auf seinen Seiten.

Die Nutzung einer Schrift bei bis zu 25.000 Seitenaufrufen ist kostenlos. Für kleine Seiten also durchaus, angesichts der Auswahl an hochwertigen Schriften, eine Alternative zu den Schriften bei google. Die Nutzung ist einfach und auf der Seite von Typekit gut erklärt.

Weitere Informationen bei drweb.de

Benötigte Werkzeuge zum Einbinden der Schriften in die eigene Seite

Um die Stylesheets in seinen Quellcode einzubinden, kann man auf jeden Texteditor zurückgreifen. Einfacher machen diese Arbeit aber spezialisierte Programme, besonders wenn man keine oder wenig Erfahrung mit CSS hat. Einen Überblick über CSS-Editoren gibt es hier.

Ich benutze auf dem Mac das einfach zu bedienende CSSEdit. Sehr nützlich zum analysieren der Seite und ausprobieren von Programmierungen (CSS, HTML, JavaScript) live in der Website ist das Firefox Add-on Firebug.

Für den Transfer der CSS-Dateien vom und zum Server nutze ich den empfehlenswerten FTP-Client Cyberduck (für Mac & Win) der es auch ermöglicht, Dateien direkt auf dem Server zu bearbeiten.

So, das war nun genug zu Webfonts! Pinsel in die Hand!
Film: Ein großer und ein kleiner Mensch Schreiben das Alphabet.

Die eigene Website einfach gebaut

Das Erstellen einer eigenen Website stellt heute kein Problem mehr dar. Durch Seiten wie Facebook ist es jedem möglich, seine eigene Präsenz im Internet aufzubauen und mit anderen darüber zu kommunizieren. Die Liste der möglichen Programme und Möglichkeiten, eine Website auf einem Server zum laufen zu bringen, ist lang. Und ich wette, dieses Jahr kommen noch unzählige Möglichkeiten dazu. Hier eine kleine Auswahl:

Eine sehr einfache Möglichkeit kurze Texte und Bilder ins Netzt zu stellen ist das kostenlose «tumblr».
Es bewegt sich, nutzt man es als einen Nachrichtenkanal, zwischen einem Blog und Twitter. Man kann durch verwenden eines der unzähligen kostenlosen und kostenpflichtigen Layouts aber auch so etwas wie eine «richtige» Website gestalten. Auch eine deutschsprachige Oberfläche lässt sich einrichten.

Ebenfalls ein einfach einzurichtendes kostenloses Blog-System ist «posterous», das neben der Möglichkeit einer eigene Seite auch Gruppenseiten für praktische Kommunikation ermöglicht. Die Verwendung einer eigenen Domain ist bei diesem System möglich und es lassen sich die Einträge aus älteren eigenen Blogs importieren.

Mit «google sites» lassen sich einfach, wie mit einem Texteditor Seiten bauen und das gesamte Paket von google-Programmen (Kalender, Bilder, Video etc.) integrieren. Besonders praktisch, per Einladung kann man anderen Gruppenmitgliedern ermöglichen, die Seite aktuell zu halten.

weebly ein kostenloser Online-Webseiten-Editor, tritt mit dem Ziel an, Website-Gestaltung für Jedermann so einfach wie nur möglich zu machen. Mit Vorlagen und per Drag & Drop lässt sich die Seite bauen und mit multimedialen Inhalten füllen. Es besteht aber auch die Möglichkeit mit HTML und CSS die Seite zu modifizieren.

Sehr beliebt unter Künstlern, Fotografen und Designern ist das kostenlose Redaktionssystem (Content-Management-System, CMS) «indexhibit».
Beschränkte auf eine einfache Bedienoberfläche, lassen sich schnell und unkompliziert Galerien z.B. als Diashows anlegen und aktuell halten. Ein großes Plus – die Oberfläche lässt sich in deutscher Sprache installieren. Das schlichte Design kann man über die CSS an die eigenen Bedürfnisse anpassen oder verändern. Für dieses System muss der Server mit der Möglichkeit eine Datenbank (mysql) einzurichten ausgestattet sein. Meine eigene Website habe ich mit indexhibit gebaut http://www.awebfish.de und viele weitere Beispiele finden sich hier: http://www.indexhibit.org/participants/

Eine prima Anleitung für indexhibit bietet der «dasignblog» mit Videotutorials zur Installation. Anpassung der CSS und weiterführenden Arbeiten an der eigenen Indexhibit-Seite.

Ähnlich simpel scheint, von mir aber nicht getestet, «Stacey» zu sein.

Die Praxis zeigt, wer online lebt, hat mehrere Plätze, auf denen er sich tummelt: Das Portfolio eigener Arbeiten (z.B. mit indexhibit gepflegt), Videos bei vimeo, private Konversation bei Facebook, aktuelle Berichte bei tumblr, Kurznachrichten bei Twitter, ein Fotostream bei Flickr und, und, und. Mit «about.me» https://about.me/ bekommt man eine einfache Möglichkeit, sich in Form einer «Visitenkarte» zu präsentieren, zu allen eigenen Plätzen im Web zu verweisen und die Zugriffe auf die Seite auszuwerten (wer hat mich von wo besucht und was hat er sich angeschaut). So sieht z.B. meine Seite aus.

Noch ein paar nützliche Links:
Beim Bau von Seiten natürlich immer dabei: SELFHTML
Umfangreiche Informationen für Webdesigner: drweb.de
Kompakt sortiert: eine Menge nützlicher Links für Webdesigner.

Du willst mehr über die Programmierung von Internetseiten lernen? Besuche P2PU School of Webcraft.

Und zum Schluss etwas Unterhaltung – Herrlich verrückt! Du wirst es lieben.