Beiträge mit dem Schlagwort ‘YUI’

25. Februar 2010

CSS-Frameworks

css-framework-header

Was sind CSS-Frameworks und wo braucht man die “Dinger”? Das sind die Fragen, die oft im Zusammenhang mit den nützlichen Frameworks auftauchen. War im Web 1.0 CSS mehr als Schrift und Tabellenformatierung verwendet worden, hat sich das in den letzten Jahren immer mehr verändert.

Im Web 2.0 werden fast immer die kompletten Websites über CSS Positionierung gestaltet und designed. Wie bereits im Web 1.0, ist immer noch ein deutlicher Unterschied erkennbar, wie die einzelnen Browser mit CSS umgehen (hierzu gibt es Tonen an speziellem  Material im WWW, deshalb lass ich das einfach mal so stehen).

CSS-Frameworks beschäftigen sich in Summe damit, eine entsprechend einfache und trotzdem browserübergreifende Gestaltung zu ermöglichen und zwar nicht nur für ausgesprochene CSS Spezialisten, sondern bereits für den ambitionierten Hobby WebDesigner.

Was alle nachfolgenden Frameworks gemeinsam haben, ist die Tatsache, dass sich diese mehr oder weniger an einem Raster-System (Grid) orientieren um Elemente entsprechend auf der Seite zu positionieren. Je nach verwendetem System kann dies mehr oder weniger komfortabel von statten gehen.

Nachfolgend mal eine Übersicht über die vier großen Frameworks, die in vielen Projekten Verwendung finden:

Blueprint

blueprint

Das Blueprint CSS Framework besteht aus 24 Spalten mit einer Breite von 30 Pixeln + jeweils 10 Pixeln Freiraum zwischen den einzelnen Spalten. Dadurch ergibt sich für das Basis-Framework eine feste Seitenbreite von 950 Pixeln. Im Downloadpaket enthalten sind zusätzlich eine gut aufgebaute Typography – CSS Datei, sowie eine gute Formatierung für Formulare. Die Dateien sind sowohl in einem lesbaren Format vorhanden, als auch zusammengefasst in einer Datei um die Ladezeiten entsprechend zu reduzieren. Wer eigene Blueprint basierende Dateien erstellen will, findet sogar einen entsprechend verwendbaren Kompressor. Durch letzteres ist es möglich ein individuelles Blueprint zu erstellen und auf den ganzen Balast einer “Download-Lösung” zu verzichten.

10. März 2009

AJAX und Javascript

Und zwar eine Menge davon. Ganze 70 Scripts gibt’s beim Smashing Magazine zu bewundern. Darunter alte bekannte Scripte, die sich fast in jeder Scriptübersicht wieder finden (Beispiel Fancy Upload, was ich Euch auch hier schon mal präsentiert habe), aber auch einige nennenswerte Neuerscheinungen, z. B. einige sehr schicke DatePicker oder das gut gelungen Upload-Form der ExtJS.

ajax-js-techniques69

Im Netz gibt es bereits Tonnen von solchen Übersichten. Allerdings fällt momentan auf, dass sich im Endeffekt drei bzw. vier Bibliotheken um die “Krone” streiten. Zum einen sind da JQuery und Mootools, aber auch Prototype und YUI. Wer sich in diesem Zusammenhang beispielsweise mit Joomla beschäftigt, dem fällt auf, dass sich der Kern von Joomla mit MooTools beschäftigt, sich aber einige Erweiterungen an anderen Bibliotheken vergnügen.

ajax-js-techniques4

Passt der Designer oder eben derjenige, der sich aus den umfangreichen Erweiterungsmöglichkeiten von Joomla die benötigten Module zusammenklickt, an dieser Stelle nicht wirklich auf, kann es durchaus passieren, dass sich verschiedene Scripte in die Wege kommen. Da hier oft nicht die minified Versions in den Erweiterungen verwendet werden, sondern die oft noch großen Entwicklungspakete (wobei ich gar nicht weiß, ob es von Prototype eine minified Version gibt), wird die Seite schnell richtig groß. Im DSL-Zeitalter ist das Laden der Seite nicht mehr das Problem, die Geschwindigkeit mit der allerdings die JS-Engine der Browser den JavaScript-Code verarbeiten aber schon.

ajax-js-techniques36

Insofern achte ich vermehrt darauf, dass verwendete Erweiterungen (und da war Joomla nur ein Beispiel, das Gleiche gilt für Wordpress, Drupal und viele andere CMS oder Blog-Systeme für die viele Erweiterungen angeboten werden) immer gut zusammenpassen. Manchmal ergeben sich so durchaus aus Sparpotenziale im Code, die man nutzen kann und sollte.

Quelle: 70 New, Useful AJAX And JavaScript Techniques
Quelle: Mootools-Sammlung hier im astBlog

24. Februar 2008

YUI – Neue Version 2.5.0 erschienen

Kaum ist man mal eine Woche nicht im Lande, gibt’s schon wieder einiges Neues zu berichten. Besonders erwähnenswert ist für mich die neue Version 2.5.0 von Yahoo’s User Interface Library (YUI).

In der aktuellen Version 2.5.0 gab es sehr viele und interessante Neuerungen. Nachfolgend mal eine Auflistung mit einigen der neuen Themen.

  • DataTable Control
  • Eine stark überarbeitete Version des bisherigen Moduls mit verschiedensten Möglichkeiten Daten in tabellarischer Form darzustellen oder via AJAX zu bearbeiten

  • Layout Manager
  • Mit dem Layout Manager ist es zukünftig mögliche komplexe Layouts über das YUI zu gestalten. Dabei ist es möglich sowohl die Größe einzelner Einheit innerhalb des Layouts zu verändern, als auch diese komplett ein- oder auszublenden.

  • Upload
  • Die Upload Komponente gibt jetzt auch einen Multi-File-Upload her, der auf Flash und JavaScript aufbaut und letztendlich auf dem Code des Flickr Uploaders basiert. Wichtig für alle UI-Designer ist dabei die Möglichkeit den Upload-Fortschritt mit anzuzeigen.

Layout Manager

Das sind meiner Meinung nach mit die wichtigsten Neuerungen, die in vielen UI’s zum Einsatz kommen könnten. Zusätzlich gibt es noch ein Resizer Utility, ein Utility um Bilder zu beschneiden, sowie ein Cookie Utility mit dem es möglich ist Daten in Sub-Cookies zu packen, wenn die Zahl der vom Browser möglichen Cookies nicht mehr ausreicht.

Neben den eigentlichen Neuerungen haben einige Komponenten den Beta-Status verlassen und sind jetzt als Stable im Paket enthalten. Darunter z. B. der Color-Picker, das JSON-Utility, der Image Loader und noch einige andere.

Neben den vielen Neuerungen ist auf der Seite des YUI eine Seite mit Beispielanwendungen verfügbar, die in Summe über 270 Beispiele mit den YUI-Komponenten zeigen. Im YUI-Developers Blog sind noch einige Notizen der Entwickler zu finden, die noch den einen oder anderen Hinweis geben.

Viel Spaß beim ausprobieren der YUI-Komponenten..

5. Dezember 2007

Yahoo’s AJAX Bibliothek Version 2.4.0

Yahoo hat eine neue Version seiner unter der BSD-Lizenz stehenden AJAX-Bibliothek veröffentlicht.

Mit dabei sind einige richtig interessante Neuerungen, die in vielen Web-Entwickler die Experimentierfreude wecken wird.

Selector Utility:

Das Selector Utility ist ein CSS-Query Tool, womit es möglich wird über bestimmte Abfragen den Inhalt gewünschter HTML Elemente zurückzugeben oder diesen zu ändern. Unterstützt werden dabei Pseudo-Klassen, Attribute, Operatoren und bereits der CSS 3 Entwurf.

1 var nodes = YAHOO.util.Selector.query('ul li.selected');

So werden in diesem Fall  alle ul > li mit der CSS-Class selected ausgewählt und können anschließend mit der Variable nodes verarbeitet werden.