Tag: tutorials
Webdesign: Farbspiele, Typografie und mehr
Mit Farben lässt sich nicht nur in Bildbearbeitungsprogrammen spielen: Zur kommenden Seite Method of Action wurde das Spiel Color entwickelt, in dem es darum geht, möglichst schnell Farben und Farbpaare anhand eines Farbkreises zuzuordnen. Was zu Beginn relativ einfach durch die Werte "Hue" und "Saturation" zu bewerkstelligen ist, wird später schon etwas schwieriger, wenn analoge oder ternäre Farbschemata erkannt werden müssen.
Das Spiel ist sehr gelungen und hilft in jedem Fall dabei, Farben und deren Anordnungen besser zu verstehen. Zudem stehen noch zwei weitere Spiele bereit, mit denen sich typografische Details studieren lassen: Bei Shape Type und Kern Type können sowohl die Pfade einzelner Buchstaben als auch deren Laufweite in ganzen Wörtern analysiert und abgeschätzt werden.
Bei der Seite "Method of Action", die sich derzeit in einer Preview-Phase befindet, wird es unter Anderem darum gehen, ein besseres Verständnis für Design zu vermitteln. In "Missionen" können Benutzer bestimmte Design-Tasks erledigen und von erfahrenen Benutzern bewerten lassen. Nach und nach werden dann komplexere Missionen freigeschaltet und mit jeder erfolgreich abgeschlossenen Mission steigt auch die virtuelle "Erfahrung", die dann auch dazu genutzt werden kann, über eingereichte Design-Tasks von anderen Benutzern zu entscheiden. Man darf also gespannt sein.
Windows 7 und Mac OS X: Fehler bei Verbindung
Wer ein Netzwerk zwischen einem Windows 7- und einem Mac OS X-Computer herstellen möchte, sollte in der Regel ohne Probleme auskommen. Es dürfte allgemein bekannt sein, dass von Mac OS X aus per Menü "Gehe zu -> Mit Server verbinden…" und einer Serveradresse wie "smb://win7pc" auf Windows zugegriffen werden kann. Von der anderen Seite aus ist der Vorgang auch problemlos möglich, sofern auf dem Mac OS X-Rechner die "Windows-Freigabe" aktiviert ist.
Je nachdem, wie die Benutzerkonten in OS X konfiguriert sind, ist eine Anmeldung mit oder ohne Benutzername und Kennwort möglich. Hierbei sollten eigentlich keine Komplikationen auftreten. Es kann dennoch vorkommen, dass der Zugriff trotz bestehender Verbindung fehlschlägt. Eine Firewall oder eine fehlerhafte Konfiguration der IP-Adressen (DHCP) könnten die Gründe sein. Wenn diese Faktoren ausgeschlossen werden können, kann die Suche nach der Fehlerquelle lästig werden.
Es gibt daher noch einen weiteren Trick, mit dem die Verbindung erneuert werden kann, so dass der Zugriff anschließend wieder funktionieren sollte.
HTML5 Cheatsheet: Tags, Event Handler und Support
Dokumentation, Referenzen oder kurze Beispiele können das Leben eines Entwicklers wesentlich erleichtern. Oft werden nur kompakte Informationen zu einer Thematik benötigt — hier haben sich Kurz-Referenzen in Form von Cheatsheets bewährt. Bei Devcheatsheet oder Cheat-Sheets.org finden sich gleich ganze Sammlungen an Cheatsheets zu verschiedenen Sprachen.
Auch für HTML5 gibt es mittlerweile nennenswerte Referenzen: Neben dem Canvas-Cheatsheet lohnt sich auch ein Blick in die HTML-Cheatsheets von InMotion Hosting, die sowohl Tags und Event Handler als auch den Browser-Support abdecken.
Bei den Übersichten handelt es sich um hochauflösende PNG-Grafiken mit einer Größe von 2.740 × 1.880 Pixeln. Das erste Cheatsheet zeigt einen Überblick von neuen, bestehenden und obsoleten HTML-Tags, die alphabetisch sortiert sind. In der zweiten Grafik finden sich die neuen Event Handler, die als DOM-Attribute oder per JavaScript-Event-Listener eingesetzt werden können. Dazu zählen beispielsweise Drag 'n' Drop-Events, Medien-Aktionen oder Formular-Ereignisse.
Im letzten Cheatsheet werden schließlich die Webbrowser und deren HTML5-Unterstützung aufgezeigt, so dass die 3 Referenzen eine nützliche Kurz-Dokumentation für HTML5-Entwickler darstellen.
JavaScript: Objektorientierte Programmierung verstehen
Dass sich JavaScript und die klassische objektorientierte Programmierung etwas unterscheiden, dürfte inzwischen allgemein bekannt sein. Mit Projekten wie JavaScript++ wird versucht, dem prototypischen Ansatz entgegenzuwirken — das dürfte vor allem für Entwickler interessant sein, die aus einer echten Programmiersprache wie Java oder C++ kommen.
Wer dem (durchaus leistungsfähigen) Pfad der nativen JavaScript-Programmierung folgen möchte, muss sich mit den Gegebenheiten auseinandersetzen und diese verstehen. In JavaScript besteht alles aus Objekten und eine Klassenhierarchie samt Vererbung muss daher auf einem anderen Weg umgesetzt werden. Hierzu gibt es bereits etliche Artikel, aber der Beitrag von Quildreen Motta ist sehr gelungen und lesenswert.
Der Entwickler unterstreicht die reine Theorie mit anschaulichen Darstellungen, welche die Materie verdeutlichen. Für den Artikel wird Grundwissen in JavaScript vorausgesetzt: Der prototypische Ansatz von JavaScript wird detailliert erklärt und anhand von einfachen Code-Beispielen vertieft.
HTML5: Tutorial-Serie über WebGL von Opera
Dass hinter Opera nicht nur eine Browser-Schmiede, sondern auch eine Community bzw. eine Entwicklergemeinde steckt, dürfte seit der Opera Developer Community allgemein bekannt sein. Dort werden regelmäßig interessante Beiträge aus verschiedenen Bereichen der Webentwicklung veröffentlicht, die für gewöhnlich eine hohe Qualität aufweisen.
Kürzlich wurde eine Tutorial-Serie über WegGL gestartet und der erste Artikel dieser Serie beschäftigt sich mit der Funktionsweise von WebGL und bestehenden Frameworks, welche die Entwicklung von WebGL-Anwendungen wesentlich vereinfachen.
Da WebGL im Gegensatz zu anderen Web-Technologien etwas komplexer ist, ist ein grundsätzliches Verständnis wichtig für die Umsetzung von entsprechenden Ideen. WebGL-Frameworks wie Three.js oder PhiloGL kümmern sich bereits um die etwas schwierigeren Tasks, doch Hintergrundwissen zur Rendering Pipeline beispielsweise kann das Verständnis von Szenen, Lichtern und Modellen unterstützen.
Der erste Artikel der Opera Developer-Serie ist also gelungen und bietet nützliche Informationen zum Thema WebGL.
jQuery 1.6: Neuerungen im Blick
Das JavaScript-Framework jQuery steht aktuell in Version 1.6.4 zur Verfügung. Mit dem letzten Major-Update, Version 1.6, wurden einige Neuerungen eingeführt, die interessante Funktionen beinhalten. Wer die Updates noch einmal auf einen Blick sehen möchte, kann sich dazu den entsprechenden Blog-Eintrag bei Developer Drive ansehen.
So gibt es nun beispielsweise die Funktion "holdReady()", mit der sich das "ready()"-Event verzögert ausführen lässt (etwa für Plugins). Zudem können Attribute mittels "prop()" manipuliert und endlich auch mit "removeProp()" komplett entfernt werden.
Weiterhin steht mit "promise()" eine Möglichkeit zur Verfügung, mit der sich eine Aktion ausführen lässt, sobald eine Kette von Animationen beendet wurde. Hier können die neu eingeführten Deferred-Methoden "done()" und "fail()" eingesetzt werden.
Schließlich gibt es noch den ":focus"-Pseudo-Selektor, mit dem sich jetzt auch Fokus-Elemente ansprechen lassen. Mehr Details über die Änderungen finden sich in bei Developer Drive.
SEOmoz: Google Algorithm Change History
Apropos interaktiver Zeitstrahl: Bei SEOMoz wurde kürzlich eine schöne Übersicht der bisherigen Änderungen am Google-Algorithmus veröffentlicht. Die Übersicht kann durch eine interaktive Timeline angesehen werden. Für gewöhnlich führt Google innerhalb mehrerer Monate ein Major-Update durch, das den eigentlichen Such-Algorithmus beeinflusst. Diese Major-Updates sind in der Übersicht von SEOmoz chronologisch aufgeschlüsselt und enthalten Informationen zu den entsprechenden Änderungen.
Der Such-Algorithmus von Google gilt zwar nicht als ungelöstes Rätsel, bleibt aber durch seine stetige Veränderung ein schleierhaftes Thema für Suchmaschinen-Experten: Der Betreiber der Suchmaschine bemüht sich stets darum, nur qualifizierten und für den Benutzer sinnvollen Inhalt auszuliefern. Daher wirken sich Änderungen am Such-Algorithmus nicht immer positiv auf entsprechend strukturierte Websites aus. Diese Aktualisierungen sollten Suchmaschinenoptimierer daher im Auge behalten.
Superexpert JavaScript Reference: Zum Nachschlagen
JavaScript hat mit der Einführung der fünften Edition von ECMAScript (ECMA-262-5) interessante Neuerungen erhalten und zudem stehen erweiterte Möglichkeiten in modernen Browsern zur Verfügung. Derzeit wird fleißig an der sechsten Edition, "Harmony", gearbeitet und gleichzeitigt will Google die JavaScript-Welt mit einer eigenen Skriptsprache namens "Dart" bereichern, deren Zielsetzung allerdings noch zur Diskussion steht.
Nützlich kann bei all den Funktionen der unterschiedliche ECMAScript-Versionen und Browser-Implementierungen eine interaktive Referenz wie die von Stephen Walther sein. Dabei handelt es sich um eine kompakte HTML5-Anwendung, die eine Suchfunktion und hilfreiche Informationen zu den JavaScript-Funktionen bietet.
So lässt sich einsehen, in welchen Browsern welche Features genutzt werden können. Das ist gerade im Hinblick auf die Unterstützung von älteren Browsern wichtig, da nicht alle Funktionen selbstverständlich sind.
Interessant an der JavaScript-Referenz von Stephen Walther ist zudem auch die Tatsache, dass der Quelltext eingesehen und heruntergeladen werden kann. Die Anwendung setzt auf HTML5 Local Storage und bietet ein Login-System, wodurch die Referenz offline verwendet und verändert werden kann.
Kommentare [1]