Erstellt am 19. September 2011

Javascript Variablen und IE/Win

Javascript2

Man ist sich als Webdesigner schon einiges vom InternetExplorer gewöhnt, doch das Problem, mit welchem ich letzthin zu Kämpfen hatte, war mir neu. Ich entwickelte für RapidWeaver eine Erweiterung, welche die Google Suche in eine Webseite einbaut. Bei meinen Tests funktionierte dies in allen Browsern problemlos. Die einzige Ausnahme war der InternetExplorer 8 (frühere Versionen habe ich gar nicht getestet). Ich durchsuchte mein Script auf alle mögliche Fehler, bis ich durch den Debugger der Developer Toolbar des IE8 auf etwas gestossen bin:

In meinem Skript verwendete ich eine Variable “wrapper”. IE8 meldete mir stets, dass dieses Objekt keine Zuweisung eines DOM-Elements gestattet. Kurzerhand habe ich die Variable in “theWrapper” umgetauft und siehe da: jetzt funktioniert das Script auch problemlos im IE8. Es scheint so, als benutzt der Explorer die Variable “wrapper” intern für irgendwas.

Was ich dabei gelernt habe: ich werde ab jetzt meine Variablen immer mit “the” beginnen, also z.B. “theContainer” oder “theElement”.

VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: 0 (from 0 votes)

Erstellt am 8. September 2011

RGBA-Unterstützung im InternetExplorer

RGB Cubes

Eines der tollsten Neuigkeiten von CSS3 ist die Möglichkeit, RGBA Farbwerte zu bentuzen. RGBA steht für RGB mit Alpha-Kanal. So ist es möglich, direkt einer Schrift oder einem Hintergrund eine halb-transparente Farbe zuzuordnen. Wir kennen schon schöne solcher Effekte von PNG-24 Bildern: Webseiten erhielten dadurch auf einfache Weise Tiefenwirkung. Auch die CSS-Regel “opacity” wurde für genau diese Zwecke eingeführt, doch ist RGBA der opacity-Regel meist vorzuziehen, denn opacity bezieht sich immer auf das ganze Objekt. Das heisst, auch die Schriften, welche im Block enthalten sind, werden transparent und somit schlechter leserlich. Mit RGBA ist es möglich, nur einem Hintergrund eine Transparenz zuzuweisen, ohne die Inhalte selber zu ändern. Wow!

Hier ein Beispiel, bei welchem RGBA-Werte für Textschatten eingesetzt werden:

RGBA Text Shadow

Solche Dinge sind mit “opacity” kaum machbar.

Aber kommen wir zum eigentlichen Problem: Browsersupport bzw. der Internet Explorer. Firefox kann damit seit Version 3 und Safari seit Version 3.2.1 umgehen. Doch erst der IE9 kennt RGBA und viele Besucher benutzen noch eine ältere IE-Version.

Nun kann man entweder sagen “Selber Schuld” oder aber einen Weg suchen, RGBA auch in älteren Browsern zu unterstützen. Dazu gibt es einige Möglichkeiten, wobei insbesondere das Projekt CSS3 Pie zu erwähnen ist.

Doch leider klappte das bei einem meiner Projekte nicht. Das liegt wahrscheinlich daran, dass Inhalte per AJAX nachgeladen werden und so bestimmte Skripte nicht ausgeführt wurden. So machte ich mich daran, und erstellte von Grund auf eine eigene Lösung des Problems.

Weiter lesen

VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: 0 (from 0 votes)

Erstellt am 26. Mai 2011

Create HTML5 web content with Hype

Using Hype, you can create beautiful HTML5 web content. Animations and interactive content made with Hype work on desktops, smartphones and iPads. No coding required. Learn More.

Wow, what a cool app. Mac like, great UI and astonishing idea. Have to get it and try it out.

Interessanter Blog-Eintrag gefunden im Web mit dem Pulse News Reader fürs iPad

VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: 0 (from 0 votes)

Erstellt am 20. September 2010

Shadowbox und andere Lightboxen für iPhone und iPad fixen

Ich wollte in einer Webdesign Vorlage shadowbox verwenden und musste feststellen, dass es damit einige Probleme gibt:

1. Der Overlay Container erstreckt sich nicht auf die ganze Höhe des Displays

2. Der shadowbox Container sitzt immer zuoberst an der Seite. Wenn der Besucher sich daher innerhalb der Seite befindet und die Shadowbox aufruft, kann es vorkommen, dass diese nicht gesehen werden kann
Das Hauptproblem liegt an der fixierten Positionierung des shadowbox containers. MobileSafari kennt “position: fix” nicht. Anscheinend werden alle so positionierten Elemente wie “position: absolute” behandelt. Das andere Problem ist, dass die relative Grösse von 100% angewendet auf den HTML body nicht funktioniert.

Nachdem ich das Web nach möglichen Lösungen durchforstet habe, stellte ich fest, dass es anscheinend noch keine wirkliche Lösung für das Problem gibt. So habe ich mich selber daran gemacht um die Darstellung von shadowbox in MobileSafari in Ordnung zu bringen. Und anscheinend ist das auch gar nicht so schwierig.

In diesem Artikel möchte ich kurz meine Lösung des Problems beschreiben. Da ich jQuery verwendet habe, ist der verwendete Code nicht in allen Projekten 1:1 zu übernehmen, doch denke ich, wird klar, was unternommen werden muss.

Weiter lesen

VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: +4 (from 4 votes)

Erstellt am 18. Januar 2010

Doch noch Flash auf dem iPhone

Bisher wurde von vielen am iPhone bemängelt, dass es keine Flash-Dateien anzeigen kann. Das ist nun vorbei! Dazu muss die Flash-Datei jedoch entsprechend in einer Webseite eingebunden werden. Es gibt diverse Tools, um swf-Dateien via Javascript einzubinden (das bekannteste dürfte wohl swfobject sein). Das Framework Gordon erlaubt es nun, Flash in Webseiten zu benutzen:

Der Entwickler Tobias hat mit Gordon eine Open Source Flash Runtime (JavaScript basiert) entworfen, die es erlaubt Flash-Dateien (.swf) in Html-Seiten einzbauen und diese auf dem Mobile Safari auf dem iPhone anzuzeigen. Dazu müssen auf dem iPhone jedoch keinerlei Einstellungen vorgenommen oder ein Jailbreak durchgeführt werden. Für alle Interessierten gibt es ein Wiki, dass einige Beispiele zeigt und zudem Hilfe beim Einbinden der Flash-Medien.

Hier ein Beispiel für die Einbindung


<head>
<title>Gordon: An open source Flash™ runtime written in pure JavaScript</title>
<script type="text/javascript" src="../gordon.js"></script>
</head>
<body onload="new Gordon.Movie('blue.swf', {id: 'stage', width: 500, height: 400})">
<div id="stage"></div>
</body>

via myblog-iPhone – Blog über das iPhone

Anmerkung von mir: Wenn möglich sollte man stets auf “body onload” verzichten. Javascript gehört wenn möglich in den Header eines HTML Dokuments oder ganz ausgelagert.

VN:F [1.9.10_1130]
Rating: 8.5/10 (2 votes cast)
VN:F [1.9.10_1130]
Rating: 0 (from 0 votes)

Erstellt am 16. Juli 2009

Netzwerk für Mehrwert

Soeben habe ich versucht, irgend ein Forum für Spezialisten im Bereich Webdesign und Programmierung in der Schweiz zu finden. Vergebliche Liebesmüh. Entweder ist google doof oder es existiert kaum ein Schweizer Forum für Web-Profis.
Meine Idee ist es, verschiedene professionelle Programmierer zusammen zu bringen, um ein hochqualifiziertes Netzwerk zu schaffen. Angestellte kann ich mir erstens nicht leisten und zweitens ist ein Netzwerk viel flexibler. Falls also jemand freie Zeit hat und sich mit einem der folgenden Themen bestens auskennt, so darf er/sie sich gerne bei mir melden:

- Serverscripting (PHP, MySQL)
- Clientscripting (Javascript)
- Flash, Flex

Natürlich darf sich auch jeder melden, der das Gefühl hat, sein Wissen könne ein solches Design-Programmier-Netzwerk bereichern.

Obschon das zwar für die Entwicklung ziemlich egal ist, sind mir folgende Punkte wichtig:

- Macianer
- ideenreich und visionär
- Liebe zu Essen und Trinken
- Chaotisch aber trotzdem strukturiert denkend
- Atheist
- bestimmtwerdenmirnochtausendanderedingeeinfallen

Ach, und sollte jemand trotzdem eine gute Adresse für ein Forum bzw. Netzwerk kennen, so schreibt es doch in den Kommentar.


VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: 0 (from 0 votes)

Erstellt am 26. Juni 2009

CMS einfach und schön

Achtung: dieser Artikel ist für normale Leser wahrscheinlich etwas verwirrend. Versucht es nicht, es zu verstehen, sondern geniesst einfach das Wochenende!

Schon seit einigen Tagen setze ich mich mit dem Thema “CMS” für ein Kundenprojekt auseinander. Dabei ist es für mich enorm wichtig, dass ein solches System:

a) für den Kunden sehr einfach zu handhaben ist
b) in der Gestaltung und Anordnung der Site so viel Freiraum wie möglich bietet

Weiter lesen

VN:F [1.9.10_1130]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.10_1130]
Rating: +1 (from 1 vote)