In diesem Bereich findet Ihr Artikel, Tipps und Anleitungen (Tutorials) zu den Themen Webdesign, Photoshop, CSS, XHTML, JavaScript, jQuery, Flash, Typo3 und TextPattern.
Die Beiträge richten sich sowohl an Einsteiger als auch an Fortgeschrittene und sollen bei der täglichen Arbeit im Web-/Grafikdesign helfen.
Webentwicklung: Checkliste für Website-Launch
Wenn die Programmierung an einem Webprojekt abgeschlossen ist, kann die Seite in der Regel veröffentlicht und der Zielgruppe zugänglich gemacht werden. Mit dem Upload der entsprechenden Dateien oder der Freischaltung durch ein Content-Management-System ist der Vorgang prinzipiell abgeschlossen. Dennoch können sich bei dem Launch einer Website schnell Fehler einschleichen oder banale Dinge unbeachtet bleiben. Gemeint sind hier in erster Linie technische Details und Kleinigkeiten, die etwa für Suchmaschinen relevant sind. Die Überprüfung der Dateien nach dem Upload sollte selbstverständlich sein. Zudem verläuft die Live-Schaltung einer Website von Projekt zu Projekt unterschiedlich, weshalb sich nur allgemeine Tipps geben lassen.
Ich habe daher eine kleine Checkliste erstellt, in denen die wichtigsten Punkte enthalten sein sollen, die vor dem Launch beachtet werden sollten.
Weiterlesen...jQuery-Tutorial: Eigenes Tooltip-Plugin erstellen
Das jQuery-Framework bietet eine sehr gute und einfache Schnittstelle für individuelle Plugins. So finden sich im Netz unzählige Lösungen und Skripte, die bei Projekten viel Arbeit und Zeit sparen können. Dennoch kann die Notwendigkeit oder das Interesse bestehen, ein eigenes Plugin zu entwickeln. In diesem Workshop will ich die Schritte der Plugin-Entwicklung anhand eines simplen Tooltip-Plugins erklären. Zudem soll das Tutorial ein paar neue Funktion von jQuery 1.4 demonstrieren, da die aktuelle Version des JavaScript-Frameworks mit interessanten Features ausgestattet wurde.
Zur Veranschaulichung, worum es sich bei dem Tooltip-Plugin handelt, folgt hier ein Demo-Link:
Der Inhalt dieses Tooltips wird aus dem title-Tag des Demo-Links extrahiert. Später werde ich noch eine Variante des Skriptes erstellen, die es ermöglicht, für mehrere Elemente individuelle Inhalte per Parameter festzulegen. So können mit einem einzigen Plugin-Aufruf viele Elemente mit unterschiedlichen Texten und dem Tooltip-Effekt ausgestattet werden.
Der Workshop richtet sich an jQuery-Einsteiger, die schon Erfahrung mit dem Framework gesammelt haben und JavaScript-Kenntnisse besitzen. Für die interaktive Entwicklung des Tutorial-Codes kann JS Bin verwendet werden.
Weiterlesen...jQuery-Tutorial: Eingabefelder bei Fokus leeren
Mit jQuery können schnell und relativ einfach Ereignisse (Events) abgefragt und mit Funktionen belegt werden. Eine beliebte Funktionalität stellen so auch Eingabefelder dar, die mit einem vordefinierten Beispieltext gefüllt sind und bei einer Aktivierung (Fokus) geleert werden — anschließend kann das leere Feld mit Benutzereingaben gefüllt werden. Dies findet sich häufig in Suchfeldern oder Kontaktformularen wieder.
In diesem Tutorial will ich die Schritte beschreiben, die in jQuery notwendig sind, um eine derartige Funktionalität zu entwickeln. Hierfür werden nur wenige Befehle und eine Variable benötigt, weshalb diese kleine Anleitung besonders für Einsteiger interessant sein kann. Eine Besonderheit stellt in der hier vorgestellten Lösung die Wiederverwendbarkeit dar: Die Funktion kann auf beliebig viele Eingabefelder angewendet werden, so dass auch größere Formulare damit ausgestattet werden können.
Weiterlesen...Photoshop: Ebenenstil auf andere Ebene kopieren
Mit Ebenenstilen lassen sich in Photoshop dezente Effekte wie Schatten, Verläufe oder Muster realisieren. Das Bildbearbeitungsprogramm bietet hierfür etliche Einstellungsmöglichkeiten, die dennoch ein hohes Maß an Genaugikeit und Kreativität erfordern. Ebenenstile können kopiert und auf andere Ebenen angewendet werden, so dass bei mehreren Elementen mit gleichen Effekten nur einmal ein Ebenenstil erstellt werden muss. Photoshop bietet hierfür zum einen die Möglichkeit, Ebenenstile per Kontextmenü zu kopieren. Die Einträge nennen sich "Ebenenstil kopieren" bzw. "Ebenenstil einfügen" und finden sich im Kontextmenü der entsprechenden Ebene.
Weiterhin gibt es die Funktionalität, Ebeneneffekte per "Drag and Drop" auf andere Ebenen zu kopieren: Dabei muss sich der Mauszeiger direkt über dem "fx"-Symbol der gewünschten Ebene befinden. Anschließend muss die ALT-Taste in Verbindung mit der linken Maustaste gedrückt und gehalten werden, so dass durch Bewegen des Cursors ein vergrößertes "fx"-Symbol erscheint — dieses kann auf die neue Ebene verschoben werden, welche dann den jeweiligen Ebenenstil übernimmt.
Übrigens kann ein kopierter Ebenenstil auch auf mehrere Ebenen angewendet werden. Dazu müssen lediglich die Zielebenen ausgewählt werden (per STRG oder SHIFT), so dass anschließend der Stil per Kontextmenü eingefügt werden kann.
Website-Optimierung: Grafiken richtig abspeichern
Gutes Webdesign ist visuell ansprechend und weist individuelle Stilelemente auf, die in der Regel durch Bilder hergestellt werden. Mit Bildern sind die Grafiken gemeint, die zum Design gehören (Assets). Dazu zählen beispielsweise Farbverläufe, Muster, Navigationen oder Schaltflächen, welche dem Stil des restlichen Designs entsprechen. Die Grafiken sollten als JPG- oder PNG-Bilder abgespeichert und in eine Website per CSS eingebettet werden. Zur Reduzierung der Serveranfragen (Requests) können CSS-Sprites verwendet werden.
Grafische Webdesigns und -layouts entstehen zum Großteil in Programmen wie Adobe Photoshop oder Adobe Fireworks — beide Anwendungen bieten etliche Einstellungen für das Exportieren von Grafikdateien für das Web.
Man sollte in jedem Fall von diesen Möglichkeiten Gebrauch machen und mit den verschiedenen Optionen experimentieren. In diesem Workshop will ich auf die wichtigsten Punkte eingehen.
Weiterlesen...