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.
Flash, JavaScript und HTML5: Gegenwart und Zukunft
Die Diskussion um Flash und dessen Einsatzgebiete dürfte unter Webentwicklern oft ein Streitpunkt darstellen. In der Regel findet der Dialog zwischen Flash-Evangelisten und Web-Standard-Veteranen statt — die Frage nach der Verwendung von Flash wird dementsprechend bewertet. Mit HTML5 werden sich in ferner Zukunft in diesem Bereich sicherlich einige Veränderungen zeigen. Man sollte HTML und Flash jedoch nicht als Konkurrenz, sondern als gegenseitige Ergänzung ansehen. Da ich Web-Projekte sowohl mit HTML/CSS als auch mit Flash realisiere, will ich den aktuellen Stand der Techniken beleuchten.
Zum einen stellen der Open Source-Gedanke und offene Standards wichtige Aspekte dar. Das Flash-Format ist proprietäre Closed Source-Software und wird dadurch als Holperstein im Bezug auf Web-Standards angesehen. Wie offen Flash im Vergleich zu HTML5 ist, wird zum einen in diesem Artikel beschrieben. Über diese Thematik gibt es im Netz mittlerweile etliche Diskussionen und Vorschläge. Zum aktuellen Zeitpunkt besteht die Tatsache, dass sich das Flash-Plugin auf nahezu jedem Computer mit Internetzugang befindet und Microsofts Trident-Engine noch mit über 50% am Browsermarkt vertreten ist. Wie sich diese Zahlen in der kommenden Zeit verändern werden, dürfte durch die Verbreitung von HTML5/CSS3 und modernen Webbrowsern ersichtlich sein.
Weiterlesen...Flash: Notepad++ als Code-Editor benutzen
Beim Entwickeln von Flash-Anwendungen kann es von Vorteil sein, wenn der favorisierte Code-Editor für ActionScript genutzt werden kann. Der Editor von Adobe Flash Professional bietet seit Version 9 (CS3) nützliche Funktionen wie beispielsweise die "Zusammenfassen"-Funktion — durch einen Klick wird markierter Code in einer Zeile zusammengefasst und kann per "+" wieder ausgeklappt werden. Dadurch behält man auch bei größeren Projekten den Überblick.
Dennoch bietet der eingebaute Editor der Flash-Entwicklungsumgebung nicht alle Funktionalitäten, die ein moderner Code-Editor beinhaltet. Der "SEPY Actionscript Editor" stellt in jedem Fall eine empfehlenswerte Alternative für komplexere Flash-Applikationen dar. Wer die Shortcuts und Funktionalitäten von Notepad++ auch in ActionScript nicht missen möchte, kann den beliebten Editor einfach verwenden. Die Syntax-Hervorhebung für ActionScript ist bereits integriert. Eine wichtige Funktionalität ist allerdings nicht vorhanden: Das Kompilieren des geöffneten Flash-Projekts. Dieser Vorgang wird in der Flash-IDE durch STRG + RETURN durchgeführt ("Film testen"). Mit einem Trick lässt sich auch diese Funktion in Notepad++ nutzen.
Adobe Flash unterstützt JSFL-Skripts (JavaScript Flash), durch die eigene Befehle in der Entwicklungsumgebung ausgeführt werden können. In Flash kann diese Möglichkeit unter Anderem über das Menü "Befehle" verwendet werden. Mehr dazu in den Adobe LiveDocs. Zudem kann der Flash-Umgebung als Parameter ein JSFL-Skript übergeben werden, durch das so auch die "Film testen"-Funktion in Notepad++ eingebaut werden kann.
Weiterlesen...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...