Für jQuery gibt es einen ganzen Batzen an Plugins, und einige davon braucht der fleißige Webentwickler auch von Zeit zu Zeit, z.B. die Thickbox oder iFixPng2.
Manchmal findet man jedoch auch sehr innovative und originelle Plugins, so z.B. jParallax. Parallax ermöglichst es dem User eine Art 3D-Gefühl zu vermitteln, und das ganz einfach durch die Überlagerung mehrerer 2D-Ebenen und der Möglichkeit diese mittels der Maus zu bewegen.
So hat man z.B. die Möglichkeit mehrere Fotos freizustellen und wie auf einer Bühne hintereinander zu platzieren um später mit der Maus den Viewport dynamisch versetzen zu können.
Dabei zeigen die Demos gleich mögliche Anwendungsgebiete, so z.B. eine Karte, einen Bergsteiger oder auch andere Spielereien.
Das Prinzip ist ähnlich wie die Verschiebung der Hintergrundgrafiken auf der Webseite von Silverback. Sobald man das Browserfenster horizontal erweitert oder verkleinert kommt ein räumliches Gefühl auf.
Das Plugin ist sicherlich nichts für den täglichen Gebrauch, doch eventuell findet sich ja die eine oder andere nützliche Verwendung. Vielleicht kommt es auch ganz gut als Gimmick in Headern die auf den ersten Blick zwar statisch aussehen, bei einem Mouseover dann aber zum Leben erweckt werden…
via: Webappers
Zu meinen reinen Freelancer-Zeiten arbeitete ich ja einige Zeit regelmäßig mit dem MVC-Framework CakePHP, seit Ende letzten Jahres jedoch leider wieder etwas weniger. Das lag zum einen daran das sich meine Aufgabengebiete etwas verschoben haben, zum anderen jedoch an der bis Dato wirklich bescheidenen Dokumentation des Frameworks.
Es gab zwar eine grobe API in der man sich im Notfall z.B. mal ansehen konnte wie einer der Standardhelper überhaupt arbeitet und welche Variablen man einer Funktion überhaupt übergeben kann, um damit dann sein Script zu debuggen, doch am Ende führte dies zu etlichen Stunden von Try & Error.
Nun habe ich mich mal wieder an ein kleines Projekt gewagt was wieder mit CakePHP 1.2 umgesetzt wird, und ich bin begeistert was sich in der Dokumentation so alles getan hat. Mit dem Cookbook kann man endlich richtig arbeiten! Alles ist ordentlich gegliedert und auch die Suche spuckt endlich passable Ergebnisse aus. So habe ich mich z.B. vorher nie an die Auth-Component heran gewagt, einfach weil ich kaum etwas über sie wusste.
In der neuen Dokumentation wird einem nun endlich alles erklärt was man braucht. Es werden direkte Codebeispiele und Vorschläge ausgegeben, so das es wieder richtig Spaß macht sich an neuen Cake-Entdeckungen zu versuchen.
Wer sich also bisher aufgrund der noch schlechten Dokumentation mit CakePHP nicht anfreunden konnte, dem sei ein zweiter Versuch ans Herz gelegt!
Gerade ist mir bei Learning jQuery das praktische jQuerify Bookmarklet über den Weg gelaufen.
Wie, wo, was? Ein Bookmarklet für jQuery? Wozu?
Einfach den Bookmarklet-Link in die Favoriten ziehen, danach kann man nun auf jeder Seite mit einem Klick auf das Bookmarklet den jQuery-Core laden und in der JavaScript-Console (z.B. über Firebug) beliebigen jQuery-Code auf der Seite ausprobieren.
Zur Bestätigung erscheint nach dem aktivieren des Bookmarklet eine kleine Box mit der Aufschrift: This page is now jQuerified
Wie ich finde eine praktische Sache um auch auf Seiten die noch kein jQuery nutzen oder an dessen Zugangsdaten man gerade nicht kommt, mal lokal und auf die schnelle ein wenig mit jQuery zu spielen.
P.s.: Juchu, gewonnen!
Das Netz ist seit Jahren vollgestopft mit Thickboxes, Lightboxes, Slimboxes, Greyboxes und vielen anderen Galeriescripten die eben gerne dazu genutzt werden Bilder oder andere Inhalte wie z.B. Flashmovies zu präsentieren.
Ob diese Art der Präsentation noch schön ist, darüber lässt sich natürlich streiten… doch was fast alle Lösungen gemeinsam haben ist, das sie oftmals nicht Stand-Alone ausgeliefert werden, sondern zur Ausführung ein JavaScript-Framework wie jQuery, mootools oder Prototype benötigt wird.
Wer nur mal eben eine Galerie einbinden möchte und ansonsten nicht viel mit JavaScript zutun hat, der stört sich dabei schnell an der wachsenden Dateigröße die mit allem drum und dran schnell auf über 30-40Kb ansteigt.
Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.
Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.
Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.
In der Praxis könnte das also z.B. so aussehen:
if($("div#accordion").length){
$.getScript("/js/plugins/jquery.accordion.js");
}
Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.
Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.
Gerrit van Aaken hat gestern sein HTML/CSS/JS-Kickstart-Paket vorgestellt. Eine sehr feine Sache wie ich finde, die jeder Webentwickler auf der Festplatte haben sollte.
Der Ablauf ist ja fast bei allen Entwicklern der selbe. Man macht/bekommt eine Layout-Datei welche nun im nächsten Schritt in ein XHTML-Dokument portiert werden muss um danach dann in den meisten Fällen als Template für ein CMS dienen zu können.
In einem Startup-Paket werden dabei alle Features vereint die man bei einer Design-Umsetzung in den meisten Fällen eh benötigen würde. Bei mir heißt das das eine index.html mit einer gewissen Struktur samt DOCTYPE und Metatags vorhanden ist, als auch eine Ordnerhierarchie mit CSS-Dateien für Screen, Print und Browserhacks (IE6).
Das CSS beinhaltet zudem bereits einige Resets und Klassen die sich im Alltag als nützlich erwiesen haben.
In Gerrits Paket wurde zudem bereits jQuery integriert, was ich als sehr nützlich ansehe, denn mittlerweile gehört auch jQuery bei mir zu fast allen neuen Umsetzungen dazu.
Da mir das Kickstart-Paket sehr gefallen hat habe ich mir dieses einmal vorgenommen und meinen persönlichen Ansprüchen nach noch einmal modifiziert, denn nur so ist ein schneller Start aus meiner Sicht möglich. Jeder hat einen etwas anderen Workflow und somit auch unterschiedliche Vorlieben was solch ein Paket angeht. Wer sich evtl. für meine Vorlieben interessiert, kann sich nun also auch meine Modifikation herunterladen.
Im Prinzip wurde dem Paket erstmal ein gewisses Grundmarkup beschert, was sich hier jedoch auf <div id="wrapper"> und ein <h1> beschränkt. Denn diese beiden Elemente sind aus meiner Sicht erstmal bei jedem Projekt der Grundstein. Das CSS-Reset von Eric Meyer wurde in die screen.css übernommen und ein wenig komprimiert. Das spart ein wenig Ladezeit. Die ie7.css wurde ebenfalls verbannt, da ich in letzter Zeit eher weniger Probleme mit dem IE7 hatte und daher die kleine Anzahl an Hacks auch in die screen.css übernehmen kann.
Ansonsten wurden noch einige Feinheiten wie z.B. ein Favicon zur schnellen Identifikation im Browser, robots.txt, sowie einige Metatags beigelegt. Schauts euch einfach an und sagt mir eure Meinung.
Der nette Veit wies mich gerade darauf hin das soeben mein lieblings Javascript-Framework jQuery endlich in Version 1.2 veröffentlicht wurde.
Mit dem Versionssprung sind auch einige Neuerungen einhergegangen. Eine ganze Hand voll neuer Selektoren, Attribute und auch Effekten hat den Weg in die neue Version gefunden.
XPath-Selektoren wurden sofern ich das herauslesen kann nun aus jQuery 1.2 herausgelöst und werden optional als separates Plugin angeboten.
Ein neuer Effekt ist z.B. die Color Animation wodurch sich sehr einfach Farbübergänge zaubern lassen. Mit dem Effekt können derzeit folgende CSS-Properties animiert werden:
backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor.
In der Ajax-Funktionalität wurde nun alles auf die große $.ajax()-Funktion ausgelegt, die seit längerem schon alle separaten Ajax-Funktionen in einer vereint. Die bisher als deprecated markierten Funktionen (wie z.B. loadIfModified()) wurden nun aus dem Core entfernt, wodurch es bei älteren Scripten evtl. zu Fehlern kommen könnte. Kurzzeitige Abhilfe schafft da das jQuery 1.1 Compatibility Plugin.
Mit dem Update ist das Framework leider wieder ein wenig gewachsen und zwar auf nun mehr 26 Kilobyte in gepackter Form. Immerhin mal wieder ein Sprung um 4 Kilobyte. Um dem entgegen zu wirken wurde nun auf einen Beitrag von Julien Lecomte hingewiesen, indem beschrieben wird wie man mit ein wenig PHP bzw. dem GZip-Modul jQuery mit nur noch 14 Kilobyte ausliefern kann. Ich habe dieses “Verfahren” schon bei einigen Seiten in Gebrauch und dabei bisher keine Nachteile erlebt.
Wer generell all seine .JS und evtl. auch .CSS-Dateien in gepackter Form ausliefern möchte sollte sich evtl. den Blogpost Compressing Javascript with PHP anschauen. Dort wird beschrieben wie man mit Hilfe von PHP, GZip und mod_rewrite generell all seine Javascript-Dateien über das GZip-Modul ausliefern lassen kann.
Auf immer mehr der von mir erstellten Webseiten kommt in der letzten Zeit das jQuery-Framework zum Einsatz. Die Anwendung ist aus meiner Sicht genial einfach und dennoch super flexibel. Innerhalb weniger Stunden kann damit auch ein Javascript-Laie erste kleinere Ajax-Funktionen in seine Seiten implementieren.
Seit geraumer Zeit bietet jQuery nun auch den Bezug des Frameworks über den Amazon S3-Service an.
Mit Amazon S3 ist es möglich die gleiche Servertechnik wie das Amazon-Portal zu nutzen, was theoretisch eine fabelhafte Performance und eine nahezu hundertprozentige Ausfallsicherheit bedeutet.
Wie der Cakebaker berichtet hat die Mambo Foundation nun bekannt gegeben, dass die nächste Version der CMS-Software auf CakePHP aufbauen wird.
Mambo ist übrigens der Vorgänger des heutigen Joomla-CMS, was denke ich mittlerweile sehr vielen ein Begriff sein düfte. Mambo legte damals den Grundstein für die Entwicklung des CMS, leider trennten sich jedoch vor ca. 2 Jahren dann die Entwickler und Joomla wurde geboren.
Ich persönlich finde die Entscheidung ein Framework für die nächste Version zu verwenden sehr gut, denn umso leichter dürfte es Cake-Entwicklern später fallen eigene Funktionen und Anpassungen in Mambo zu implementieren.
Aus meiner Sicht sollten diesen Schritt noch viel mehr Projekte gehen. Bisher kocht ja jedes Projekt da mehr oder weniger sein eigenes Süppchen, für Außenstehende ist der Quelltext daher oft mehr als verwirrend. Gerade der MVC-Pattern könnte hier für mehr Ordnung und Struktur sorgen.
Ich für meinen Teil bin gespannt wie sich das Projekt weiter entwickelt.
Tja, Totgeglaubte leben bekanntlich länger…
Nun habe ich mich ja in letzter Zeit neben CakePHP auch mit dem jQuery-Framework beschäftigt, und in diesem Zusammenhang eine kleine “Probeanwendung” gebaut, nämlich eine Login-Seite mit Ajax-Funktionalität. Für den ein oder anderen stellt sich nun sicherlich die Frage, ob solch eine Funktion wirklich sinnvoll ist…doch für mich zählt hier eher die Erklärung als der Sinn des Ganzen :-).
Wie das Ganze später aussehen könnte seht ihr in dieser kurzen Demo (richtiger Login: gast:gast). Das ganze wurde grafisch natürlich ein wenig aufgepeppt. Um die jQuery-Animationen auf dem variablen Hintergrund hinzubekommen musste auf das PNG-Format zurückgegriffen werden, zudem wurde für die IE6-User ein PNG-Behaviour eingesetzt.
Vor einiger Zeit begann ich ja das CakePHP-Framework für mich zu entdecken. Schneller ging die Arbeit damit schon nach kurzem Lernprozess von statten, ohne dabei seine Flexibilität irgendwie einengen zu müssen.
Nach diesem positiven Startschuss in Sachen Framework-Erfahrung habe ich mich heute an das jQuery-Framework heran getraut und bin wirklich begeistert. Die Syntax ist dank Gerrits Vortrag schnell erklärt, und eine kompakte Dokumentation zum Mitnehmen findet man bei Visual jQuery und Bennadel (vorsicht, PDF-Dokument).
So habe ich mich nun heute einige Zeit daran gesetzt die ersten Schritte zu gehen, und sie vielen mir so einfach wie nie, ich war wirklich überrascht.
Man muss dazu sagen, dass ich was JavaScript bisher angeht wirklich nur seeeehr oberflächliches Wissen habe.
Ich denke das ich in die nächsten anstehenden Projekte sicherlich die ein oder andere sinnvolle Funktion einbauen werde, gerade bei dieser Zeitersparnis. Das lernen macht durch die tollen Animationen sogar noch ein wenig mehr Spaß als mit Cake :)
Wenn mir nun noch jemand sagen könnte wie man in jQuery bzw. Javascript allgemein so etwas wie eine “Pause” einbinden kann (z.b.: slideOut(), dann 5 Sekunden warten, dann wieder slideIn(), das wäre super! Was mir auch noch so Gedanken macht sind Schleifen jeglicher Art in JavaScript (also z.B. alle <li> eines <ul> nacheinander durchlaufen.
Für Antworten bin ich jederzeit zu haben…und natürlich werde ich einige meiner Lernerfolge hier auch protokollieren :)
In letzter Zeit liest man als Webdesigner immer mehr von dem YAML-Framework für CSS basierte Webseiten. YAML soll, so habe ich es zumindest verstanden, viele grundlegende Elemente und Formatierungen bereits mit sich bringen, die im Nachhinein dann noch variiert und angepasst werden können.
Nun habe ich mir in letzter Zeit einige Projekte die mit YAML umgesetzt wurden angesehen, und ich verstehe einfach den Sinn des ganzen nicht? Eine Zeitersparnis? Wohl kaum!
CSS ist nicht wirklich komplex, jedenfalls bei weitem nicht so komplex wie z.B. Programmiersprachen wie PHP, JavaScript oder Ruby. Wozu hier ein Framework benötigt wird ist mir wirklich rätselhaft.
Bin ich mal ehrlich, so muss ich gestehen dass ich evtl. seit 18 Monaten effektiv auf CSS setze, und mich konsequent von Tabellen befreit habe. Anfangs war alles natürlich noch ein wenig holperig, doch schon nach 2-3 Umsetzungen brauchte kaum eine Webseite länger als einen Nachmittag zur reinen XHTML & CSS-Umsetzung, und das ohne sich dabei auf nur eine kleine Anzahl von Browsern festzulegen.
YAML hat zwar gute Ansätze, doch finde ich es persönlich einfach unnütz. Jeder der sich eine kurze Zeit mit semantischem XHTML und CSS auseinander setzt wird schnell in der Lage sein, flexible Layouts umzusetzen und das auch Browser übergreifend.
Für mich persönlich bietet YAML derzeit einfach kaum Vorteile. Der Quelltext ist bei manchen Seiten einfach alles andere als logisch, semantisch oft erst recht nicht. Es wird Code übertragen der einfach nicht sein müsste, auch in den CSS-Dateien.
Ein weiteres Manko ist wie ich finde die fehlende Unterstützung des IE5, der leider immer noch nicht das zeitliche gesegnet hat. Hier setzt YAML darauf, dem User einfach kein Stylesheet auszugeben. Ich will nicht angeben, doch bisher ist es mir fast immer gelungen meine Projekte fast vollständig für den IE5 umzusetzen, und das mit minimalem Aufwand und vielleicht 200 Byte mehr Quelltext.
Ich würde gerne von den Anwendern des Frameworks erfahren wo hier wirklich die Vorteile liegen, vielleicht erkenne ich Sie auch einfach nur nicht.
Ich würde an Anfänger jedoch appellieren, sich einfach ein gutes Buch zum Thema zu kaufen und anhand von Projekten gaaaaanz viel zu üben. Das ist auf lange Sicht hin sicherlich besser, als sich von einem Framework abhängig zu machen.
Eine kleine Starthilfe auf die ich persönlich seit einiger Zeit zurückgreife ist übrigens das schmale Standard Template von Manuela Hoffmann.
Zwar nicht perfekt, aber als Ausgangsbasis zu gebrauchen.
P.s.: Ich sollte mir in Zukunft angewöhnen nicht mehr so oft das Wort “einfach” zu verwenden ;)
