Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
Der Blog über Ajax und Web2.0 - Ajaxschmiede.de


Apr 29 2009

canvas.text für jeden Browser

Tag: CanvasPatrick @ 10:16 pm

In den vergangenen Monaten habe ich schon viel über Canvas geschrieben. Doch etwas fehlte mir um damit umfassendere, grapfische Projekte umzusetzen: Die Möglichkeit Text zu integrieren.

Methoden zum Darstellen von Text sind in den (vorläufigen) Spezifikationen des Canvas-Elementes bereits vorgesehen.

Aktuelle Versionen von Webkit, Safari4 (Beta), Chrome 2 (Beta) und Firefox 3.5 (Beta) implementieren die Canvas-Text-Methoden, doch für die breite Masse eingesetzter Browser gilt dies nicht.

Die Lösung liefert ein Javascript-Bibliothek mit dem einfachen und treffenden Namen canvas-text.

Diese Bibliothek fügt die drei HTML5-Methoden zum Zeichnen von Text in Canvas (strokeText, fillText und measureText) den Browsers hinzu, die diese Funktionen nicht von Haus aus beherrschen (Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3 und Chrome 1.0).

Canvas-text wurde so umgesetzt, dass es die Richtlinien des W3C und des WHATWG für das canvas-Elemente nach HTML5 erfüllt. Außer der ExCanvas-Bibliothek für den Internet Explorer und der canvas.text.js-Datei werden keine anderen Dateien benötigt.

Vorhandene browser-spezifische Implementierungen werden nicht überschrieben, es sei denn, man gibt dies explizit an.

Der Einbau sieht wie folgt aus:

<!--[if IE]><script type="text/javascript" src="excanvas.js" /><![endif]-->
<script type="text/javascript" src="canvas.text.js" />

Um canvas.text auch zu nutzen,benötigt man nun noch Schriftarten. Typeface.js bietet einige Font-Files an. Eine größere Auswahl gibt es bei Mada’s Playground. Diese müssen unbedingt in einem Ordner mit dem Namen faces abgelegt werden, der sich im selben Verzeichnis wie die Datei canvas.text.js befindet.

Zudem gilt es zu beachten:

Der Dateiname canvas.text.js darf NICHT geändert werden!

Die Schriftartendateien müssen klein geschrieben werden und dem Format family-weight-style.js entsprechen. Family gibt den Namen der Schriftart an wie Arial oder Times new roman, weight steht für die Stärke (bold [=fett] oder normal) und style für den Stil (italic [=kursiv] oder normal).

Bei Schriften mit mehreren Wörtern werden die Leerzeichen durch Unterstriche ( _ ) ersetzt.

Hier ein korrektes Beispiel: optimer-normal-normal.js

Die Schriftarten-Dateien müssen nicht explizit eingebunden werden. Dies geschieht per Ajax zur Laufzeit.

Die browsereigenen canvas.text-Umsetzungen lassen sich per Schalter deaktivieren. Dafür ist folgender Aufruf geeignet:

<script type="text/javascript" src="canvas.text.js?reimplement=true" />

Auf der Projektseite von canvas.text finden sich 5 Live-Demos, die die Möglichkeiten aufzeigen. Ein Blick in den Quellcode zeigt auch einige Kniffe zur Umsetzung.

Zu guter letzt noch ein Codeschnipsel, wie man in Canvas dann damit umgeht:

canvas.font = "20px 'optimer'";
canvas.strokeStyle = "rgb(0,0,200)";
canvas.textAlign = 'left';
canvas.textBaseline = 'middle';
canvas.fillText('Ein normaler Beispieltext ...', 150, 100);
canvas.font = "bold 25px 'optimer'";
canvas.strokeText('... und noch ein fetter Beispieltext', 150, 200);

Apr 27 2009

Überblick: CSS-Hacks

Tag: AllgemeinesPatrick @ 8:19 pm

An dieser Stelle möchte ich heute die geläufigste CSS-Hacks präsentieren, die man ab und an mal braucht – vor allem wenns um Microsofts Internet Explorer geht. Diese sind danach geordnet, welche Browser sie ansprechen.

CSS-Hacks nennt Selektoren, die nur von bestimmten Browsern interpretiert und angewandt werden. So kann man Unterschiede in der Darstellung wie beispielweise beim Box-Modell des Internet Explorers durch spezifische Angaben korrigieren.

Selector-Hacks:

IE 6 (und darunter) [Star-HTML-Hack]

* html #uno  { … }

IE 7 (und darunter) [Star-Plus-HTML-Hack]

*:first-child+html #dos { … }

IE 7 und moderne Browsers [Kind-Selektor]

html>body #tres { … }

Moderne Browsers (ohne IE 7)

html>/**/body #cuatro { … }

Opera 9.27 (und darunter)

html:first-child #cinco { … }

Safari

html[xmlns*=““] body:last-child #seis { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:nth-of-type(1) #siete { … }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+

body:first-of-type #ocho {  … }

Safari 3, Chrome 1+

@media screen and (-webkit-min-device-pixel-ratio:0) {

#diez  { …  }

}

Attribute-Hacks:

IE 6 (und darunter)

once { _color:blue }

IE 7 (und darunter)

doce { *color: blue }


Apr 24 2009

Die ganze Welt der Domains…

Tag: AllgemeinesTobi @ 11:17 pm

…auf einer Karte. Vor ein paar Wochen berichteten wir über eine Aktion bei United Domains, an der wir selbst teil nahmen. Die Domainweltkarte ließ nicht lange auf sich warten, vielen Dank United Domains! Nachdem die Rolle mit der Karte nach dem ersten Auspacken nun schon wieder ein paar Tage in der Ecke stand, habe ich sie mir spontan noch einmal vorgeknöpft. Sie wird die weiße, doch sehr triste, Wand in unserem Büro zieren. Und wenn ich mal keine Lust habe zu arbeiten, lerne ich ein paar Länder und ihr Hauptstädte…ähh Domains meine ich. 😉

Das man in seinem Blog über den Erhalt der Weltkarte berichtet und ein Foto von sich un der Karte veröffentlicht ist übrigens Teil 2 der Aktion. Das Bild wir auf der Seite von United Domain veröffentlicht und man erhält einen Link auf seinen Blog.

Der dritte und letzte Teil der Aktion ist, dass die 10 besten Fotos zusammen mit der URL des zugehörigen Blog in Zeitschriften wie wie c’t oder Internet World Business veröffentlicht werden. Wir lassen uns überraschen. :)

Domainweltkarte Büro


Apr 20 2009

Grafische Darstellung von Sortieralgorithmen mit Canvas

Tag: CanvasPatrick @ 9:56 pm

Auf seiner Page Nihilogic zeite Jacob Seidelin vor wenigen Tagen grafische Darstellungen der gängigsten Sortieralgorithmen. Umgesetzt hat er dies nur mitteln Canvas und Javascript.

Angeregt durch einen Bericht von Aldo Cortesi über die Visualisierung von Algorithmen, machte er sich dran, die bestehende Python/Cairo-Bibliothek in Javascript umzusetzen und zu Darstellung Canvas zu nutzen.

Seidelin brauchte zur Realisierung seines Vorhabens lediglich einen Vormittag. Der Code ist – wie er selbst zugibt – nur „quick and dirty“, also unsauber und in keinster Weise optimiert.

Man kann etliche Einstellungen an seiner Demonstration ändern. Vor allem di Auswahl zwischen den grundverschiedenen Algorithmen finde ich hervorragend. Zur Wahl stehen: Quicksort, Heapsort, Selection Sort, Insertion Sort, Bubblesort und Shell Sort. Die meisten kenne ich selbst noch von Informatikvorlesungen.

Heapsort darstellt mit Canvas


Mrz 26 2009

Neuerungen in ImageFlow 1.1

Tag: Javascript,ToolsPatrick @ 10:30 pm

Seit einiger Zeit bietet Finn Rudolph sein Javascript-Tool ImageFlow in Version 1.1 an.

Im Vergleich zur Version 1.0.1, über die wir im Oktober des vergangenen Jahres berichtet hatten, ergeben sich nachfolgende Änderungen und Neuerungen:

  • zusätzliche onClick-Option öffnet Bilder in einem neuem Fenster
  • Überarbeitung der Evaluierung der individuellen Einstellungen
  • Pfeiltasten werden nun in allen Browsern unterstützt, jedoch nur in einer Imageflow-Instanz
  • zusätzliche Option scrollbarP (Breite des Scrollbalken in Prozent)
  • Fehlerbehebung in der Option imageFocusM in Firefox und Safari
  • unload-Fehler im Internet Explorer gefixt
  • Verbessertes Bild-Resampling im IE7
  • zusätzliche Option aspectRatio zum Anpassen des Verhältnisses von Höhe und Breite des ImageFlow-Containers
  • zusätzliche Option zum Festlegen der Bildausmaße: imagesHeight, imagesM, percentOther und percentLandscape

Viel Spaß beim Einbauen. Wir helfen euch auch gern dabei!


Mrz 25 2009

ExplorerCanvas erfährt IE8-Update

Tag: Canvas,JavascriptPatrick @ 10:01 pm

Kurz nach Erscheinen der finalen Internet Explorer 8-Version, stellte Erik Arvidsson im eigenes eingerichteten Explorer Canvas-Blog eine – längst überfällige – neue, überarbeitete Version von ExCanvas zum Anzeigen von Canvas-Grafiken mittels VML Im Microsoft-Browser.

Auffälligste Neuerung ist die Unterstützung des IE8. Da der neuste Redmonder Sprößling in Sachen VML etliches anderes handhabte als die Vorgänger, hatten die Explorer Canvas-Entwickler etliches zu tun um ihre Bibliothek für den IE8 fit zu bekommen.

Zusätzlich wurden eine Vielzahl Fehler behoben und einige Funktionen erweitert und beschleunigt. Die Änderungsliste fällt umfangreich aus:

  • die Methoden transform und setTransform wurde nach HTML5-Standard integriert
  • der aktuelle Pfad wird bei strokeRect, fillRect und clearRect nun stets korrekt entfernt
  • vollständige Unterstützung des IE8 in allen Modi
  • diverse Fehler in linearen Farbverläufen behoben
  • neue, erweiterte Methode zur Berechnung der Linienstärke
  • Rendern von Linien mit einer Stärke kleiner 1px sehen besser aus
  • stroke-Methode ignoriert nun nicht mehr lineCap, lineJoin and miterLimit, falls fillStyle-Attribut gesetzt wurde
  • stroke schließt nun nicht mehr automatisch den Pfad
  • strokeRect und fillRect schließt nun stets korrekt den Pfad
  • Einbau des document.createElement(‚canvas‘)-Hacks von Sjoerd Visscher
  • diverse Speicherlecks wurden gefixt

Mrz 19 2009

Internet Explorer 8 erschienen!

Tag: TrendsPatrick @ 6:57 pm

Ohne große Vorankündigungen stellte Microsoft heute den Internet Explorer der 8. Generation für Windows XP und Vista in 32- und 64-bit zum Download zur Verfügung. Die Windows 7-Variante, die ich auch persönlich für mein System benötige, wird wohl erst mit der Veröffentlichung des W7-ReleaseCandidates im Mai ausgeliefert werden.

Über die drei Betriebsmodi (Standard, IE7-Mode und Kompatibilitäsmodus) haben bereits nach dem Erscheinen der ersten Beta-Version berichtet.

Wie bereits mehrfach berichtet, sucht Microsoft mit dem IE8 den Anschluß an die moderenen Browser und deren Unterstützung der Web-Standards. Das neue Renderwerk der Trident4-Engine erzielt dabei schon für MS gute Ergebnisse und ist ein Schritt in die richtige Richtung.

Die mangelnde Unterstützung von Canvas und SVG-Grafiken sowie CSS3 trüben die Freude über den Neuling und lassen ihn nicht auf einem Stufe mit beispielweise Firefox3 und Safari4 stehen.

Die JavaScript-Engine des IE8 ist zwar um ein vielfaches schneller als beim Vorgänger, an die sehr guten Ergebnisse der Konkurrenz kommt er jedoch nicht heran.

Obwohl Microsoft die Sicherheit zwar weiter verbessert ist, ist davon auszugehen, das Hacker sich  gleich auf den Newcomer stürzen werden um Lücken ausfindig zu machen und auszunutzen. Von daher sollte man mit dem Umstieg vorsichtig sein und eventuell noch paar Monate warten bis die Redmonder die gröbsten Schnitzer ausgemerzt haben.


Mrz 19 2009

Microsoft SuperPreview soll Browsertests revolutionieren

Tag: ToolsPatrick @ 4:05 pm

Wer kennt sie nicht, die Eigenheiten der Browser. Welches Web-Entwickler ist nicht genervt von unterschiedlichen CSS- und HTML-Implementierungen der Browser, wodurch man gezwungen ist, das eigene Projekt auf unzähligen (virtuellen und realen) System mit den unterschiedlichsten Browsern und deren Versionen zu testen.

Microsoft präsentierte nun auf der in Las Vegas stattfindenden Messe MIX mit SuperPreview ein neuartiges Programm zur Web-Entwicklung aus dem MS Expression Web-Bereich.

SuperPreview erlaubt es, eine Homepage gleichzeitig in verschiedenen Browsern und deren Modi anzeigen zu lassen und zu vergleichen. In der für jedermann verfügbaren Vorabversion scheint jedoch nur (zumindest auf meinem Windows7-System) der IE8 im Standard- und IE7-Kompatibilitätsmodus zum Testen zur Verfügung zu stehen.

Zur Darstellung kann man die Renderergebnisse nebeneinander oder – was ich sehr nützlich finde – auch übereinander mittels overlay anzeigen lassen, wodurch eine pixelgenaue Analyse der gerenderen Website möglich ist, um Unterschiede festzustellen. Dies kann man im zweiten, angehängten Bild am Beispiel von Ajaxschmiede deutlich erkennen.

Ein echter Nutzen entsteht aber erst, wenn man auch – wie auf dem ersten Bild, das eine weiterentwickelte, interne Version zeigt, erkennbar  – auch alternative Render-Engines wie die von Opera, Firefox und Safari auswählen kann.

Der Erscheinungstermin und ein Preis (sofern es kostenpflichtig ist) wurden nicht genannt.

SuperPreview - Ein Programm zum Testen der eigenen Webseite auf verschiedenen Browsern SuperPreview - Nützlich ist die overlay-Ansicht für pixelgenaues Vergleichen


Mrz 18 2009

JavaScript-Xeyes für jede Homepage

Tag: JavascriptPatrick @ 10:21 pm

David King hatte wohl zu viel mit Linux zu tun. Anders kann man sich es nicht erklären, dass er aus Spaß an der Freude vor kurzem eine JavaScript-Version des bekannten Tools Xeyes geschrieben hat.

Zur Umsetzung nutzte er lediglich einige Grafiken, simples JavaScript und das Anwenden von Trigonometrie in der Praxis.

Um das Gimmick im eigenen Projekt zu nutzen, müssen die Datei eyes.js eingebunden, die Augen-Bilder eingebaut und die Funktion aufgerufen werden. Beispielsweise wie folgt:

<script type="text/javascript" src="eyes.js"></script>
<div id="myEye" style="width: 100px; height: 100px; background: url('white.png') center center no-repeat;">
<img src="pupil.png" width="30" height="30" />
</div>
<script type="text/javascript">
EYES.follow ('myEye');
</script>

Viel Spaß damit!

Javascript Eyes That Follow


Mrz 17 2009

Gratis Domain-Weltkarte von United Domains

Tag: AllgemeinesTobi @ 11:20 am

Einige von euch kennen sicher die Domainweltkarte von United Domains. Auf dieser Topografischen Weltkarte sieht man zu jedem Land die entsprechende Top-Level-Domain. Das ist z.B. in einem Büro äußerst praktisch. Diese laminierte Karte in der Größe 120cm x 60cm ist normalerweise für 29,- EUR erhältlich.

Momentan läuft bei United Domains eine Aktion für alle Kunden, die einen eigenen Blog betreiben. Wer einen Blogeintrag zur Domain-Weltkarten-Aktion schreibt, bekommt diese Karte gratis! Der Beitrag muss einen Link zu United Domains oder domain-karte.de enthalten. Den Link und seinem Blogeintrag und die Vollständige Anschrift, an die die Karte geschickt werden soll, sendet man dann per Email an aktion@united-domains.de. Und schon klappt’s mit der Karte. 😉

Die Aktion läuft noch bis 31.03.2009, solange der Vorrat reicht.

Domain Weltkarte


« Vorherige SeiteNächste Seite »