Divis Blog

Just another geeks blog.

Verschiedene Javascript Bibliotheken

clock März 10, 2008 22:04 by author Divi

Ich habe in den letzten Tagen die Zeit gefunden ein paar liegengebliebene Zeitschriften durchzulesen und bin dabei auf ein paar sehr interessante JS-Bibliotheken gestoßen:

 

Bevel-JS

Link: http://www.netzgesta.de/bevel/

Ein cooles Script, um Grafiken via Javascript zu modifizieren.^

image

Im Vordergrund könnt ihr die Grafikdatei aus dem Beispielordner sehen, während im Hintergrund die Beispielseite mit angewendetem Javascript dargestellt ist. Beide mitgelieferten Javascript-Dateien haben nur eine Größe von 48kb.

 

Flot-JS

Link: http://code.google.com/p/flot/

Der folgende Code stammt aus dem Beispielverzeichnis:

$(function () {

var d1 = [];

for (var i = 0; i < 14; i += 0.5)

d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments

var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

$.plot($("#placeholder"), [ d1, d2, d3 ]);

});

Was hier ein wenig sehr mathematisch aussieht, ist nicht mehr als die Beschreibung bestimmter Graphen - und zwar folgender:

image 

Das ist noch eine relativ einfache Darstellung für das, was die Flot-Bibliothek anbietet. Eine schon etwas komplexere Beispieldarstellung gleich mehrerer verschiedener Graphen findet sich ebenfalls im Beispielverzeichnis:

image

Um es mit den Worten eines Arbeitskollegen zu sagen: "Das werd ich nicht mehr als einmal pro Jahr brauchen, aber dann könnte es echt interessant sein."

Das nette an den Diagrammen ist, dass die Bibliothek gleichzeitig Methoden mitbringt, die bei der Wertebestimmung oder dem vergrößern von Ausschnitten helfen.

 

Ext-JS

Link: http://extjs.com

Die ExtJS scheint sehr nette vordefinierte Controls mitzubringen. Ein Screenshot der API-Doku des Frameworks demonstriert gleichzeitig einige der Controls, die auf der hauseigenen Seite zum Einsatz kamen:

image

Wie man im Baum auf der linken Seite lesen kann, sind einige der vorhandenen Controls sehr sinnvolle Controls, die in den meisten Anwendungen ihren Platz finden könnten. Darunter u.a.: Grid, Menu und Tree.

Für die Lesefaulen gibt es dort übrigens ebenfalls eine Seite mit Videotutorials.

 

zXml

Link: http://nczonline.net/downloads/

Auf der oben genannten Seite, findet man mehrere nette Bibliotheken für Javascript. Eine davon ist z.B. eine Erweiterung der JS-Arrays um Methoden wie "Clone".

Die Klasse, die mich aber am meisten interessiert hat, stellt eine browserunabhängige Schnittstelle für die Verarbeitung von XML zur Verfügung. Die JS-Datei ist gerade einmal 14kb groß und erlaubt es einem über Code ähnlich dem folgenden zu verwenden:

//create a DOM document

var oXml = zXmlDom.createDocument();

//fill it with some XML

oXml.loadXML("<root><child index=\"1\"/><child index=\"2\"/> <child index=\"1\"/><child index=\"3\"/></root>");

//look around

alert("Root is: " + oXml.documentElement.tagName);

alert("First child is: " + oXml.documentElement.firstChild.tagName);

Wie man sehen kann, kann man über übliche Begriffe wie firstChild oder tagName auf die einzelnen Elemente und ihre Werte zugreifen.

 

Dojo-Offline-Toolkit

Link: http://dojotoolkit.org/offline

Im "entwickler"-Magazin (Ausgabe: März/April) befindet sich ein Artikel über die Verwendung des Dojo-Offline-Toolkits in Zusammenarbeit mit Google-Gears. Google-Gears stellt eine SQLite Datenbank und einen Proxy zur Verfügung, mit dem sich dynamischer Content auf dem Client ablegen und bei Bedarf gesteuert angezeigt werden kann.

Das Dojo-Offline-Toolkit fügt Google-Gears keine neuen Methoden hinzu, jedoch stellt es einige Methoden zur Verfügung, die die Arbeit mit Gears wesentlich erleichtern sollen. Darunter fallen Methoden wie den Dojo-Storage, bei dem sich Objekte persistent ablegen lassen, sowie Befehle zur Ausführung von SQL oder dem Nachladen von Ressourcen einer Webseite.

 

Nur der Vollständigkeit halber hier noch einige weitere Links von mir bekannten Javascript-Frameworks:

- Prototype

- Script.Aculo.Us

- Moo-Ajax und Moo-FX

- JQuery

- ASP.Net Ajax

Alle von diesen sind großartige Frameworks, die sich nicht nur auf die normale Arbeit mit Ajax beschränken, sondern auch perfekte Effekte liefern. Ich gehe jedoch davon aus, dass diese Frameworks den Leuten eher geläufig sind und deswegen eher weniger Erklärungsbedarf bestehen dürfte.

Bewertung: 5.0 von 1 Benutzern

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Sitecore Xpress released

clock Februar 7, 2008 23:13 by author Divi

Heute morgen war es soweit. Fast wie an Weihnachten freute ich mich, als ich beim betreten der "Sitecore Xpress"-Seite nicht mehr den altbekannten Teaser "Coming to a server near you..." sah, sondern der Download direkt vor meiner Nase lag. Ich hab mich natürlich auch direkt eingeloggt, um es zu herunterzuladen. Knappe 250MB haben dann weniger als 10Minuten gebraucht, um sich auf meinem Desktop einzufinden ... der Lizenz-Code leider etwas länger ... den hatte ich erst gegen 16Uhr in Händen, aber das war das warten auch wert, denn ICH KANN ENDLICH UNTER VISTA DAMIT SPIELEN ...

image

Das kommerzielle Sitecore (neuerdings auch "Sitecore red" benannt), hat da bei mir noch ein paar Probleme mit dem IIS unter Vista gemacht, was aber in der nächsten Version auch behoben werden soll.

Schön ist auf jeden Fall, dass es wirklich ausreichte die Fehlermeldung am Anfang (über den nicht laufenden IIS) zu ignorieren und einfach drauflos zu installieren - und siehe da - nach einigen Minuten tauchte die vorkonfigurierte Standard-Seite in meinem Browserfenster bei mir auf:

image

Das hat mein Herz dann doch sehr erfreut.

 

Aber was ist Sitecore eigentlich? Sitecore ist ein hochentwickeltes CMS - und zwar das beste, dass ich bisher gesehen habe. Man fühlt sich quasi auf dem heimischen Desktop, wenn man direkt nach dem Login auf einer Seite wie folgender begrüßt wird:

image

(Und das ist ein Screenshot von der aktuellen Version) ... wundert euch übrigens nicht, wenn alle Funktionen beim ersten Mal etwas länger brauchen ... Das liegt schlichtweg daran, dass .Net die Sitecore-Libraries ja kompilieren muss.

Wie ihr auf dem Screenshot sehen kann, ist die Oberfläche einem Windows-Desktop nachempfunden ... und auch der so genannte "Content Editor" entspricht schon sehr dem Aussehen des Windows-Explorers. Als Windows-User dürfte man also kaum Probleme haben sich zurechtzufinden:

image

 

Wenn ihr also gerne mal ein CMS ausprobieren möchtet, dass normalerweise kostenpflichtig ist und in Enterprise Lösungen eingesetzt wird, dann ladet euch Sitecore Xpress auf jeden Fall einmal herunter, denn es ist kostenlos und soviel Spaß mit einem CMS werdet ihr selten haben ;-).

 

Links

Sitecore Webseite

Sitecore Xpress Webseite (DOWNLOAD)

Deutscher Sitecore Solution Partner "netzkern GmbH"

Gib die erste Bewertung ab

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Content auf der Seite zentrieren

clock Januar 31, 2008 10:47 by author Divi

Immer wieder stand ich vor dem Problem, dass ich den Content einer Seite zentrieren musste.

Mein standardmäßiger Weg wurde deshalb ein <center>-Tag um die komplette Seite zu setzen und den Content dem entsprechend aufzubauen, dass er mit dem Tag zusammenarbeitete.

Ab und an kam mir aber immer mal wieder die Lösung unter, bei der die "margin"-Style-Eigenschaft zur Problemlösung verwendet wurde. Das Problem: Irgendwie funktionierte es manchmal - und manchmal nicht. Aber jetzt weiß wie es definitiv funktioniert:

margin:0 auto

Mit dieser Kombination sagt ihr der Seite "kümmer dich selber darum, dass die Seite links und rechts den selben Abstand hat - oben und unten brauchst du aber keinen Abstand".

Erklärung: Der erste Wert behandelt das margin-top und -bottom, während der zweite Wert -left und -right beeinflusst.

Damit aber die Seite auch wirklich zentriert wird, reicht es nicht aus diese Eigenschaft zu setzen, denn dann sagt sich der Browser: Dann nehm ich halt die ganze Breite des Bildschirms. Deshalb müsst ihr dem Content ebenfalls eine feste Breite geben:

width: Xpx (X = numerische Angabe der Breite)

Wenn ihr diese beiden Style-Eigenschaften dem umschließenden Content zugeweißt, zentriert sich dieser automatisch, egal wie breit ihr das Fenster macht.

 

AutoMargin

 

Hinweis: Wenn ihr übrigens mit dem oben genannten <center>-Tag arbeitet: Das funktioniert auch - allerdings richten sich dann alle Elemente in eurem Content entsprechend mittig aus. Das bedeutet, dass ihr Positionen anders bestimmen und ggf. allen Elementen ein text-align:left geben müsst.

Gib die erste Bewertung ab

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Ungünstig gewähltes Design

clock Januar 9, 2008 20:35 by author Divi

Nachdem wir heute eine Liste mit angegebenen Gutscheincodes exportieren sollten, stellten wir geschockt fest, dass die Liste komplett leer war. Es gab nur zwei Einträge von Usern, die offensichtlich versucht hatten einen Code anzugeben, doch von diesen waren nur die ersten beiden Ziffern gespeichert.

Wir haben bestimmt 45 Minuten mit zwei Personen nach dem Bug gesucht, da wir vermuteten, dass ein Fehler beim Speichern der übrigen Teile des Codes aufgetreten sein könnten - doch egal welche Sonderfälle wir prüften: Alles schien einwandfrei zu funktionieren.

Irgendwann schauten wir uns dann die Einbindung in die Seite an und uns wurde folgendes klar: Es lag schlichtweg am Design :-D.

Die Textboxen, in die der Gutscheincode eingegeben werden konnte, bestanden aus zwei (unbeschrifteten) Textboxen. Ungefähr so:

 

Das Problem welches sich nun auftat war folgendes: Die linke von beiden Boxen war für den Code gedacht - die rechte Box hingegen sollte eine Ortskennzahl (eine Postleitzahl oder ähnliches) beinhalten, welche aber Freitext zuließ. Da der Gutscheincode allerdings vermutlich mit Bindestrichen geschrieben worden war, oder schlichtweg, weil keine Erklärung angegeben war, was in die zweite Box sollte, teilten die potentiellen Kunden den Gutscheincode in beide Felder auf, was bei der Validierung zu einem Fehler führte. Offensichtlich haben danach die meisten Leute aufgegeben zu versuchen dort etwas einzufügen und die Felder einfach leer gelassen - - oder sie haben schlichtweg den Bestellvorgang abgebrochen.

Merke: Man sollte nicht davon ausgehen, dass die Leute, die die eigene Seite besuchen, die selben Gedankengänge haben wie jemand, der sich schon wochenlang mit einem Layout beschäftigt hat ;-)

Nachtrag: Offensichtlich hatte ich vergessen es zu erwähnen - das Design war uns vorgegeben ;-)

Gib die erste Bewertung ab

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5