Hier ein kurzer Tipp, der sehr nützlich sein kann wenn man eine HTML/CSS Website baut die auch ein paar Flash-Elemente beeinhalten soll. Manchmal kommt es nämlich vor, dass sich die Größe des Flash´s verändern soll und die ist leider durch die Größe des HTML-Containers in dem das Flash eingebunden ist begrenzt. Mit ein wenig Java- und ActionScript kann man das Problem aber ganz leicht beheben.

Dieser Code muss in das HTML oder in eine von extern eingebundene JavaScript Datei:

1
2
3
4
5
6
7

<script type="text/javascript">
    function containerAnpassen(id, width, height) {
	    var container = document.getElementById(id);
	    container.style.width = width+'px';
	    container.style.height = height+'px';
    }
</script>

Diese 3 Zeilen JavaScript sorgen dafür, dass das HTML-Element mit der übergebenen ID die ebenfalls übergebene neuen Werte für Breite und Höhe bekommt. Bindet man sein SWF jetzt mit 100% Höhe und Breite ein (z.B. mit SWFObject 2.0) ist das Flash immer so groß wie der Container und wird somit mitskaliert

In Flash muss man dann diese JavaScript Funktion dann nur noch aufrufen, und das funktioniert folgendermaßen:

ActionScript 3:

1

    ExternalInterface.call("containerAnpassen", "container", 300, 200);

Mit der Funktion ExternalInterface.call werden zuerst der Funktionsname im Javascript und anschließend zu übergebende Parameter übergeben (in diesem Fall den Namen des Flashcontainers, sowie die neuen Angaben für Höhe und Breite).

Wer das ganze mal in Aktion sehen will: Demo
Und hier gibts ein Codebeispiel zum Download

Viele Kunden wollen ihre Website selbst pflegen und verändern können. Für ein Content-Management-System kein Problem. Doch nicht immer lohnt sich ein „großes” CMS für jedes Projek, wenn der Kunde sowieso nur kleine Textänderungen vornehmen oder hier und da mal ein Bild austauschen möchte.
Und hier kommt das geniale, wie einfache CushyCMS ins Spiel. Mit Cushy kann man ohne nennenswerten Mehraufwand eine Seite pflegbar machen. Wie's geht erkläre ich euch hier.

Schritt 1: Anmelden

Zuerst muss man sich als „Designer” registrieren. Als Designer kann man mehrere Seiten verwalten und mehrere „Editoren” anlegen. Außerdem kann man festlegen, welcher Editor welche Seite bearbeiten darf.

Nach der Registrierung gelangt man in den Backendbereich, hier klickt man auf „Add Site” um eine neue Website im CushyCMS zu verwalten.

Schritt 2: FTP-Daten eingeben

Die Verwaltung durch CushyCMS erfolg mittels FTP und direkter Manipulation des HTML-Contents. Damit das CMS auch auf die Seiten zugreifen kann muss man die entsprechenden FTP-Daten hinterlegen.

Dazu gibt man einfach die benötigten FTP-Daten ein. Schwupps - hat man eine neue Seite angelegt.

Schritt 3: CushyCMS Klassen vergeben

Als nächstes muss man dem CMS noch sagen, welche HTML-Teile einer Seite bearbeitet werden dürfen. Alles was man dafür tun muss ist dem umschließenden Container die Klasse „cushycms” zu geben. Aus folgendem HTML-Code:

1

<div>Inhalt</div>

wird also:

1

<div class="cushycms">Inhalt</div>

Falls man mehrere HTML-Elemente auf einmal bearbeiten will (z.B. mehrere Absätze plus ein umfließendes Bild) muss man um diese Element noch einen umschließenden Div-Container einfügen (falls noch keiner vorhanden). Aus:

1
2
3

<p>Das ist ein Absatz</p>
<p>Das ist noch ein Absatz</p>
<img src="bild.jpg" alt="Testbild"</img>

wird:

1
2
3
4
5

<div class="cushycms">
    <p>Das ist ein Absatz</p>
    <p>Das ist noch ein Absatz</p>
    <img src="bild.jpg" alt="Testbild"</img>
</div>

Schritt 4: HTML-Seite ins CushyCMS einfügen

Damit das CMS weiß, welche HTML-Seiten auf dem Server überhaupt bearbeitet werden dürfen, muss man die eben vorbereitete Seite noch einfügen. Dafür klickt man auf den Link „Assign Page to Site” und kann im Dateifenster einfach die entsprechende Datei auswählen. Nachdem man einen „Page Name” vergeben hat klickt man auf „Assign Page” und hat somit die Vorbereitungen zum Bearbeiten einer Seite abgeschlossen.

Schritt 5: Lospflegen!

Fertig! Wenn man eine Seite mit dem CushyCMS bearbeiten will, klickt man einfach im Seitenbaum auf die entsprechende Seite und kann nun alle in Schritt 3 vorbereiteten Elemente bearbeiten.

Tipps & Tricks

Allgemein

Viele Tipps und Tricks im Umgang mit dem CushyCMS stehen in der Designer Documentation, für außergewöhnliche Fragen gibt es eine Google Support Group. Beides findet man im Supportbereich.

Metadaten pflegbar machen

Zusätzlich habe ich eine Möglichkeit gefunden mittels PHP Metadaten pflegbar zu machen und einen Schnipsel dafür hier gepostet.

Update: Surreal CMS

Vor kurzem ist mir noch eine interessante Alternative zu CushyCMS untergekommen: SurrealCMS. Das System schlägt in eine ganz ähnliche Kerbe wie das CushyCMS (naja eigentlich die gleiche...), hat aber einige interessante Features mehr im Gepäck. Ich werde sicher mal einen genaueren Blick drauf werfen.

Noch n Update: PageLime

Gerade bin ich auf eine weitere Alterative zum CushyCMS gestoßen: PageLime. Ich hab zwar nur einen kurzen Blick drauf geworfen, aber das Demo Video sieht ganz vielversprechend aus.

„Äääh wie war nochmal der Doctype für X(HTML) Strict?”
„Da gabs doch diese Funktion zu Anzeigen von ...”
„Verdammt, wo hab ich diesen CSS-Reset”.

So gehts mir oft. Viele Sachen muss man nicht neu schreiben, sondern kann sie einfach aus alten Projekte kopieren und weiterverwenden. Aber alte Daten aufmachen und den Code durchsuchen kann schonmal in Arbeit ausarten und ist außerdem alles andere als effizient. Viele Programme bieten deshalb eine integrierte Codesnippetverwaltung um häufig verwendete Codeschnipsel ablegen zu können. Ich habe schon mehrere verschiedene Sachen ausprobiert, war aber mit keiner Lösung so richtig zufrieden.

Was ich kenne

Da gibts zum einen die integrierten Lösungen für Flash und Espresso. Problem für mich dabei: Das ganze ist programmspezifisch und mir irgendwie zu umständlich. Wenn ich mal ne ActionScript Klasse in Espresso aufmachen will, komme ich nicht an meine Snippets dafür. Was ich brauche ist eine zentrale Verwaltungsstelle.

Und so bin ich auf Snippely gestoßen, eine AIR-Anwendung zum Speichern und Verwalten von Snippets. Eigentlich perfekt...aaaaaber: Mir fehlt eine saubere Backupmöglichkeit sowie eine Suchfunktion.

Darf ich vorstellen: Schnipsel!

Glücklicherweise hat David das gleiche Problem. Er hat kurzerhand Nägel mit Köpfen gemacht und mit Wordpress eine Snippetverwaltung aufgesetzt. Bei den jQuery Sachen habe ich ihm geholfen und darf dafür nun in Zukunft meine Schnipsel dort ablegen. Das ganze ist zentral, durchsuchbar und um Backups muss man sich auch nicht kümmern. Die werden von Wordpress nämlich automatisch gemacht.

Das ganze ist zwar eher als privates, eigennütziges Projekt gedacht, wird in Zukunft aber möglicherweiße durch eine Vorschlagen-Funktion erweitert und dann kann jeder an der Schnipseldatenbank mitarbeiten. Ganz web2.0 halt :-)

http://schnipsel.davidhellmann.com/

Browser Update!

Ein Grund ist sicherlich, dass viele User überhaupt nicht wissen, dass es neben dem Internet Explorer 6, der bei Windows „dabei ist”, noch andere Browser gibt - ein Umstand den man ändern kann! Und genau aus diesem Grund gibt es die Initiative www.browser-update.org. Dieser Dienst stellt ein JavaScript zur Verfügung, das Webentwickler auf ihrer Seite einbinden können. Kommt ein Besucher mit einem veralteten Browser auf diese Seite, wird er durch eine unaufdringliche, schmale Leiste am oberen Bildschirmrand darauf hingewiesen und zum Update aufgefordert. Ein Klick darauf, leitet ihn auf diese Seite weiter, auf der kurz und verständlich die Vorteile aktueller Browser aufgelistet sind und erklärt wird wie man sich genau einen neuen Browser installieren kann.

Meine Lösung

Eine gute und sinnvolle Sache wie ich finde! Ich habe zwar auf meiner Website schon eine ähnlich Lösung eingebaut, überlege aber diese durch das Script von Browser-Update zu ersetzen. Im Moment bekommen alle Internet Explorer 6 Nutzer über ein eigenes CSS-Stylesheet auf der Startseite einen Hinweis angezeigt, der ebenfalls einige Alternativbrowser aufführt und zum Update bittet:

]]> http://www.thomas-aull.de/2009/04/ie6-nutzer-zum-update-bewegen/feed/ 6