Netzkescher

11.01.2011

Abgefischt: Sprites online gestalten

Was sind Sprites (bezogen auf Webdesign)?

Ich habe sie hier und hier schon einmal erwähnt.

In der Wikipedia steht dazu

Im Webdesign wird der Begriff Sprites als Bezeichnung für Grafikdateien verwendet, welche aus mehreren kleinen Einzelgrafiken bestehen. Diese Sprites werden per CSS derart in Webseiten eingebunden, dass vom Webbrowser jeweils die benötigten entsprechend zugeschnittenen Teilgrafiken angezeigt werden. Zweck dieser Technik ist einerseits die Verringerung der Gesamtladezeit einer Webseite durch Reduzierung der Serveranfragen und andererseits das Verhindern von Verzögerungen, die durch Nachladen – beispielsweise bei Hovereffekten – entstehen würden

Besser kann ich es ja nicht erklären.

Das Erstellen von Sprites hat immer etwas mit dem Abmessen einer Grafik und dem Formulieren von CSS-Eigenschaften zu tun. Ein praktisches Onlinetool namens Spritebox greift einem dabei unter die Arme. Gefunden habe ich den Hinweis auf dieses Tool bei hpvorlagen24.de. Und weil dort auch sehr schön erklärt ist, wie man das Tool bedient, spar ich mir das hier.

10.01.2011

JavaScript-Tutorials für Beginner

Kleiner Tutorial-Tipp für Leute, die einen Einstieg in JavaScript finden möchten, aber zu faul zum Lesen sind. Voraussetzung ist allerdings, dass man englisch versteht.

Auf der Webseite learntoprogram.tv gibt es ein sechsteiliges Video-Tutorial für Einsteiger in die Programmiersprache. Ich habe ja selbst nicht viel Ahnung davon und verschaffe mir gern anhand solcher Angebote einen ersten Überblick über ein Thema, hier eben JavaScript. Jedes Video dauert um die 10 Minuten. Folgende Themen werden behandelt:

• Hello World
• Variables
• Branching and Conditionals
• Loops
• Arrays
• The String Object

Wenn es dann tiefer in die Materie gehen soll, stehe ich ja auf Bücher. Es müssen zum Einstieg ja nicht unbedingt die neuesten sein. Günstig gibt es etwas ältere Exemplare z.B. bei Terrashop.

26.12.2010

Ausprobiert: i-tec USB Docking Station Lite

Ich bin ja nun kein Hardwaretester. Aber ich hatte nun mal diese USB-Docking-Station hier und dann kann ich auch kurz darüber etwas schreiben.

Der Hintergrund: Ich benutze mein Notebook (Esprimo Mobile) sowohl zu Hause als auch auf der Arbeitsstelle. Zur Zeit mit einer Original-Docking-Station an beiden Standorten. Das ist natürlich sehr bequem. Einfach das Notebook andocken - fertig. Das Ganze hat natürlich, wegen der Originalteile, seinen Preis. Nun ja, bisher musste ich den nicht tragen. Würde ich mir allerdings ein neues, leistungsstärkeres Notebook kaufen wollen, wäre es aus mit diesem Komfort. Es sein denn, ich kaufe ein Notebook, das in die vorhandene Station passt, was ich allerdings nicht möchte. Mir schwebt da mehr ein 13”-Gerät vor und da sieht es mit “echten” Dockingstationen mau aus - oder sie haben einen Preis, den ich nicht bezahlen möchte. Als Alternative bieten sich USB-Docking-Stationen an. Die kann man auch behalten, wenn man das Notebook wechselt. Und so kam ich also zur i-tec USB Docking Station Lite.

Zunächst mal, es funktioniert. Jedenfalls mit meinem Windows Pro 7 - Notebook. Zunächst habe ich den Vorgaben gemäß die CD eingeschmissen und die Treiber installiert. Dann die Station mit dem mitgelieferten Netzteil mit Strom verbunden und per USB-Kabel (ebenfalls dabei) mit dem Notebook verbunden. Anschließend einen TFT über VGA-Kabel und den (wieder mitgelieferten) VGA-DVI-Adapter mit der Station verkabelt und auch noch die LAN-Verbindung hergestellt. Zum Schluss PS/2-Tastatur und Maus. Die habe ich über einen Adapter, den ich schon hatte, mit einem USB-Port der Docking-Station verbunden. Das war’s und alles lief sofort und ohne Mucken. Respekt. Dabei konnten externer Monitor und Notebookbildschirm zeitgleich genutzt werden. Sowohl im Clone-Betrieb als auch als erweiterter Desktop.

Wo ist der Haken? Natürlich gibt es einen Haken. Die Bilddarstellung war qualitativ völlig ok. Ich habe beim stehenden Bild keine Unterschiede in Schärfe oder so bemerkt. Allerdings beim bewegten Bild. Das heißt, bewegt man die Maus, folgt der Mauszeiger nicht ganz gleichmäßig. Es ist immer ein leichtes Ruckeln festzustellen. Ebenso, wenn man ein minimiertes Fenster öffnet. Der Fensteraufbau ist nicht ruckelfrei. Ob man dies als störend empfindet oder nicht, kann man wohl nur selbst entscheiden und hängt natürlich auch davon ab, was man am Notebook so tut. Für Officeaufgaben, Internet und Amateur-Bildbearbeitung muss das nicht zwingend ein Problem darstellen. In diesem Einsatzbereich kann eine solche Dockingstation sicher Sinn machen. Filme gucken auf dem externen Monitor habe ich nicht probiert. Stelle ich mir allerdings nicht ganz unproblematisch vor. Auf der Packung steht:

To play DVD on the add-on monitor, …, the following requirements should also be met:
- …
- The adapter screen resolution be set to 800×600 with 16bit color

Das ist doch wenigstens ehrlich.

Hier könnt ihr die Technischen Daten nachlesen.

Vom selben Hersteller gibt es auch noch ein Gerät, dass zusätzlich Audiobuchsen besitzt. Informationen hier.

27.04.2010

Photoshop-Tipps für Webdesigner

Auch Freizeit-Webdesigner kommen immer mal wieder mit dem Thema Bildbearbeitung in Berührung. Dass man dabei auf einem Level arbeitet, das vergleichsweise niedrig ist, liegt in der Sache begründet - es ist halt eine Freizeitbeschäftigung, Zeit dafür ist eher knapp. Dennoch arbeiten vermutlich nicht wenige mit Photoshop. Für diese kann der Artikel “9 Photoshop Editing Tips Web Developers Should Know“, erschienen auf sixrevisions.com interessante Informationen bieten. Hier eine Übersicht der Tipps von Omer Greenwald:

• Changing the background color of an icon
• Selecting a layer with Auto-Select
• Selecting a layer with Ctrl/Cmd + click
• Isolating a layer
• Copying a layer from one document to another by drag and drop
• Refining a selection by contracting or expanding it
• Using Layer Comps
• Basic image manipulation: changing colors
• Using measurement tools

Wie man sieht geht es um Inhalte, die im Webdesign-Prozess wohl zum Standardrepertoire gehören. Sicher ist es sinnvoll, sie zu kennen.

13.04.2010

Tutorial-Tipp: PHP-Webseiten-Template erstellen

Auf 1stwebdesigner.com ist heute ein ausführliches und meiner Ansicht nach empfehlenswertes Grundlagentutorial erschienen: “How to Create a PHP Website Template from Scratch“.

Zunächst wird erklärt, wie man mit HTML und CSS eine statische Webseite erstellt. Um das zu verstehen reichen wenige Grundkenntnisse in beiden Bereichen. Anschließend beschreibt der Autor Kevin Stanley, wie dieser Seite mit Hilfe von PHP ein wenig Dynamik eingehaucht werden kann. Die HTML-Seite wird zur PHP-Seite und Bereiche wie Header, Footer und Navigation werden in externe PHP-Dateien ausgelagert, die dann includiert werden. Zum Schluss wird noch ein wenig mit Variablen gearbeitet. Beispielhaft werden etwa der Titel der Webseite und der Footer-Text durch Variablen ersetzt. Es wird erläutert, wie man diese Variablen wiederum mit konkretem Inhalt gefüllt bekommt.

Das Tutorial vermittelt einen guten Einstieg in die Thematik php-basierter Web-Templates. Dies ist auch das erklärte Ziel des Autors. Auf dieser Basis kann man bei Interesse Möglichkeiten finden, die Anregung selbstständig weiter zu entwickeln. Z.B. ließe sich ein Formular kreieren, dass die oben erwähnten Variablen mit Inhalt füllt. Man lernt ja immer am besten, wenn man sich selbst (lösbare) Aufgaben stellt.

Alle für das Tutorial erforderlichen Dateien stehen zum Download bereit.