Tag: safari

201210Jan

Impress.js: Effektvolle Zoom-Präsentationen mit CSS3

Das Flash-Präsentationstool Prezi erfreut sich schon einiger Zeit großer Beliebtheit, da sich relativ einfach räumliche Präsentationen erstellen lassen: Einzelne Slides werden in einem dreidimensionalen Raum platziert und durch Navigieren entsprechend vergrößert oder verkleinert. Diesem Vorbild folgt der Entwickler Bartek Szopka, der mit seinem JavaScript-Framework Impress.js ein ähnliches Werkzeug geschaffen hat. Der Unterschied liegt in der Technologie, da Impress-Präsentation mit JavaScript und CSS3 auskommen.

Impress.js - Presentation tool based on the power of CSS3 transforms and transitions in modern browsers

Ähnlich wie in Prezi-Präsentationen werden auch hier die Slides räumlich angeordnet und durch einen Zoom-Effekt animiert. Zum Einsatz kommen unter Anderem die CSS3-Attribute "rotate" und "perspective", die beispielsweise auf dieser WebKit-Seite gut demonstriert werden. Leider liegt auch hier noch das Problem: Durch die Verwendung von "perspective" funktionieren die Präsentationen derzeit nur in WebKit-Browsern wie Safari oder Chrome. In Firefox werden solche Transformationen erst ab Version 10 möglich sein.
Wer sich das Framework dennoch ansehen und damit experimentieren möchte, kann den Quelltext bei GitHub herunterladen.

201022Jun

OpenWYSIWYG: JavaScript-Editor für Websites

Umfangreiche WYSIWYG-Editoren gerhören zum Repertoire eines guten Content-Management-Systems. Durch die JavaScript-Anwendungen werden textarea-Bereiche mit etlichen Funktionen ausgestattet, um Benutzern die Eingabe und Formatierung von Texten zu erleichtern. Einer der bekanntesten WYSIWYG-Editoren dürfte der CKEditor, der zuvor den Namen "FCKEditor" trug.
Wer eine Alternative ausprobieren möchte oder einfach auf der Suche nach einem anderen Editor ist, sollte sich das OpenWYSIWYG-Projekt ansehen. Dabei handelt es sich um einen ausgereiften JavaScript-Editor, der ähnliche Features wie die bekannten WYSIWYG-Editoren bietet.

OpenWYSIWYG - Open Source Cross-Browser WYSIWYG Editor

Auf der Demo-Seite kann die Anwendung getestet werden. Zu den Hauptfunktionen zählen die bekannten Textformatierungen (fett, kursiv, unterstrichen, farbig, usw.), Textausrichtungen, Listen, eine Schriftart-Vorschau und weitere Optionen. Sehr schön ist die "Vollbild"-Funktionalität, mit der sich der Editor per Knopfdruck auf die Größe des Browserfensters maximieren lässt. Weiterhin gibt es einen Farbwähler, erweiterte Möglichkeiten zur Bearbeitung von Tabellen und Optionen für das Platzieren von Bildern.
Die Implementierung des Editors ist denkbar einfach:

  • WYSIWYG.attach("textarea1");

Das Projekt wurde unter der LGPL veröffentlicht und steht hier zum Download bereit. Der Editor funktioniert auch unter Internet Explorer 6.

200911Dez

WebGL: Erste Spezifikation des 3D-Standards fertig

Die Khronos Group hat einen ersten Entwurf (Working Draft) der WebGL-Spezifikation veröffentlicht. WebGL ist eine plattformunabhängige API für 3D-Grafik im Webbrowser, die auf OpenGL ES 2.0 basiert und mithilfe des HTML5-Canvas-Elements komplexe 3D-Welten darstellen kann. Apples Safari (Entwicklerversion) und der aktuelle Nightly Build von Firefox (Minefield) unterstützen die aktuelle Version des neuen Formats bereits. Zudem beteiligen sich weitere Browserhersteller wie Google (Chrome) und Opera an der WebGL Working Group. Man kann hoffen, dass Microsoft nachzieht.

WebGL Specification - Working Draft

Auf der Website der Khronos Group finden sich wertvolle Informationen rund um das Thema WebGL — dazu gehören ein Wiki sowie ein kleines Tutorial. Weiterhin kursieren diverse Demos im Netz und ein erstes Werkzeug für die Erstellung von WebGL-Code existiert auch schon. JavaScript stellt die Sprache dar, mit der Bewegung ins Spiel kommt.
Ich bin sehr gespannt auf die neuen Möglichkeiten, die sich mit WebGL eröffnen.

200903Okt

HTML/CSS: Safari ist nicht gleich Safari

Mit der Veröffentlichung von Safari für Windows hatte Apple den globalen Browsermarkt erneut beeinflusst. Der WebKit-Browser glänzt durch eine flotte JavaScript-Engine und tolle Entwicklertools. Die aktuelle Version 4 des Browsers läuft im Gegensatz zur ersten Beta-Version recht stabil (Ausnahmen bestätigen die Regel).
Wenn man Webprojekte für Kunden erstellt und diese einen Apple-Computer benutzen, empfiehlt sich das Testen der Website in Safari unter Mac OS X. Man könnte meinen, dass die Windows-Version identisch mit der Mac-Software ist: Theoretisch ist das der Fall, allerdings ist ein Webbrowser an die Darstellungsmethoden des laufenden Betriebssystems gebunden. Das betrifft vor allem die Berechnungsmethode, die zur Kantenglättung (Anti-Aliasing) benutzt wird. Dem Cocoa-Rendering von Mac OS X steht "ClearType" von Windows (XP und aufwärts) entgegen. Die Subpixel werden von beiden Engines unterschiedlich berechnet und so kann es daher auch zu Darstellungsunterschieden kommen. Diese Unterschiede zeichnen sich vor allem durch die Strichstärke und somit durch die Breite der einzelnen Zeichen aus. Auch wenn man per CSS die Breite eines Containers fest definiert, kann der Text in Safari unter Windows und Mac OS X unterschiedlich laufen, wie die Abbildung zeigt:

Safari Windows / Mac OS X

Weiterlesen...
200927Mär

Photoshop: PNG-Gamma entfernen mit TweakPNG

Im Leben eines Webdesigners gibt es oft spezielle Spezialfälle. So könnte auch der Fall auftreten, dass man mit Photoshop CS2 (oder darunter) ein PNG-Bild für eine Website abgespeichert hat und der Kunde die entsprechende Seite mit einem Apple-Computer und dem Safari-Browser betrachtet. Bei diesem Szenario gibt es ein Problem, das dem Webdesigner, der mit Windows und Internet Explorer (oder Firefox) arbeitet, nicht auffällt:
Die mit Photoshop CS2 exportierten PNG-Dateien werden mit einem Gammawert abgespeichert, der unter Mac OS X von Apples Safari interpretiert wird — es entsteht ein unschöner Fehler, da die entsprechenden PNG-Bilder etwas dunkler angezeigt werden.

Mit einem kleinen Windows-Programm namens TweakPNG lässt sich der Fehler einfach beheben. Nachdem man die Software installiert hat, muss die betroffene PNG-Datei mit TweakPNG geöffnet werden. Anschließend erhält man eine Tabelle, die verschiedene Werte enthält.

TweakPNG

Weiterlesen...