Anstatt mit iPhoto kann man die Raw-Dateien mit dem Programm “Digitale Bilder” von der Kamera holen.¹ Dort werden einem auch gleich die wichtigsten Bilddaten, wie Blende, Brennweite, ISO-Wert etc. angezeigt.

Was ist eigentlich RAW?

Raw ist ein Rohdatenformat für Digitale Bilder. Es benötigt mehr Speicherplatz als ein bereits komprimiertes Bild (JPEG). Da das Bild unbearbeitet vorliegt, kann es auch nicht zu Belichtungsfehlern durch den Verarbeitungsprozess der Kamera kommen. Das RAW-Format eignet sich also besonders bzw. ausschließlich, wenn man es mit einem RAW-Verarbeitenden Programm (z.B. Photoshop) nachbearbeiten will.

Dateiendungen von RAW-Dateien

Je nach Kamerahersteller haben die erzeugten RAW-Dateien unterschiedliche Endungen. Canon benutzt zB unter anderem die Endung “cr2″.²

Bearbeitungsprogramme

Neben einigen Namenhaften Programmen aus dem Hause Adobe (Photoshop, Photoshop Elements, Lightroom…) gibt es noch viele weitere kostenpflichtige und freie Programme. Darunter auch das Allseitsbeliebte GIMP oder RawStudio. Zu beachten ist, dass Photoshop RAW-Dateien erst ab der Version CS unterstützt darunter ist ein kostenpflichtiges Plugin Vorraussetzung für die Arbeit mit dem Rohdatenformat.

1. findet man unter Programme oder einfach über die Suche
2. Eine ausführliche Liste der Dateiendungen findet sich in der Wikipedia

Hier der Codeschnipsel:

$feed = "http://search.twitter.com/search.atom?q=from:creanu&rpp=4";
$xml = simplexml_load_file($feed);
echo "<strong>Meine letzten Tweets:</strong> 
 
";
foreach($xml->entry as $entry) {
$tweet = $entry->title;
$title = htmlentities($tweet,ENT_QUOTES, 'utf-8');
echo $tweet."
 
";
}

Die Variable $feed enthält die URL zum Feed der Suche. Diesen Feed erhält man ganz einfach, indem man das gesuchte (in diesem Fall “from:creanu”) in die Twittersearch eingibt und auf “Rss Feed for this query” klickt. Diesen Feed kann ich dann mit der simplexml-Funktion bearbeiten. Mittels einer foreach-Schleife werden alle Tweets (in diesem Fall 4 Stück, da wir die Suche mit dem Parameter rpp=4 auf 4 Ausgaben begrenzen) aufgeführt.

So nun möchte ich den Code noch ein wenig umschreiben für einen Hashtag und alle Tweets aufführen, die mit diesem Hastag getaggt wurden. Für dieses Beispiel, möchte ich auf ein Hashtag zurückgreifen, das bisher nur einmal verwendet wurde (zumindes laut der Twittersearch, die nur X Wochen zurück geht). #hebräisch.

$feed = "http://search.twitter.com/search.atom?q=%23hebraeisch";
$xml = simplexml_load_file($feed);
echo "<strong>Tweets mit dem Hashtag #hebraeisch:</strong> 
 
";
foreach($xml-&gt;entry as $entry) {
$tweet = $entry->title;
$title = htmlentities($tweet,ENT_QUOTES, 'utf-8');
echo $tweet."
 
";
}
 
?>

“%23″ in der URL steht für # (wer hätte das gedacht!?)

Mit dem Code werden jetzt alle Tweets mit dem Hashtag #hebraeisch angezeigt. Nun möchte ich passend dazu noch den Twitternamen, desjenigen anzeigen, der den Hashtag getwittert hat.

$twitteruser = $entry->name;

und dann die Ausgabe:

echo $twitteruser.": ".$tweet;

Woher weiß ich, wie die Objekte heißen!?

Die Variable $entry ist ein Objekt, das mehere Elemente enthält. Nämlich alle Elemente, die auch die XML-Datei enthält. XML-Dateien sind wie folgt aufgebaut:

<name>creanu</name>

Mein Tweet

<datum>07.10.2009</datum>

Wenn ich nun auf den Inhalt des Elements “datum” zugreifen möchte, tue ich das mit $entry->datum. Um herauszufinden welche Elemente es in der XML Datei gibt und wie sie heißen öffne ich sie im Browser und lasse mir den Quelltext anzeigen. Falls du eingestellt haben solltest, dass sich Feeds automatisch in deinem Feedreader öffnen, klickst du den Feed und speicherst ihn auf deiner Festplatte (Ziel speichern unter…) um ihn dort mit einem Texteditor zu öffnen und dir die Struktur anzusehen.

1. Eine neue Tastaturbelegung hinzufügen

Unter Systemeinstellungen findet man den Dialog Sprache & Text

Dort müsst ihr die Registerkarte Eingabequellen aufrufen und scrollt runter bis zu Hebräisch (oder der Sprache eurer Wahl).

“Hebräisch QWERTY” oder “Hebräisch”?

Es gibt zwei Tastaturbelegungen, die eine nur “Hebräisch” die andere ist “Hebräisch QWERY”. Bei der klassischen, israelischen Belegung (siehe Bild) findet man z.B. א auf “T”. Es ist etwas gewöhungsbedürftig, ich habe Vorgestern einen Nachmittag damit geschrieben und habe mich “schnell” eingelebt. Dennoch bin ich jetzt auf die Hebräisch QWERTY umgestiegen, weil sie – meiner Meinung nach – für Europäer (und Amerikaner, Australier etc.) einfacher ist. Hier liegt א auf A, פ liegt auf F etc. es erscheint also “logischer”, weil sich bspw. ein “ל” (auf der Taste L) im deutschen auch anhört wie L.

Wer vor hat modernes Hebräisch (עברית) zu schreiben und einen Aufenthalt in Israel plant, sollte sich vielleicht lieber gleich an die “normale” Tastaturbelegung gewöhnen, da ein späteres umgewöhnen evtl. etwas kompliziert wird

Hier seht ihr die Standardtastaturbelegung

Tipp: Tastatur- und Zeichenübersicht und Eingabequellen in der Menüleiste anzeigen

Ganz oben, könnt ihr die Tastatur- und Zeichenübersicht aktivieren. Damit könnt ihr beim schreiben (z.B. in Pages) eine “Hilfstastatur” einblenden, auf der ihr die Tastaturbelegung sehen könnt. Sehr wichtig (da praktisch) ist auch das einstellen der Anzeige in der Menüleiste. So könnt ihr ganz bequem immer zwischen Deutsch und Hebräisch (oder Griechisch, Chinesisch, Arabisch etc.) umherschalten ohne jedes Mal die Systemeinstellungen aufzurufen. Das sieht dann im Einsatz so aus:

Das sieht dann so aus:

Endbuchstaben etc. kann man mit gedrückter Shift-Taste schreiben:

und Vokale mit gedrückter Alt-Taste:

2. Schreiben in Numbers

Nachdem das bei mir gestern noch super funktioniert hat, wollte ich eine Vokabelliste in Numbers anfertigen.

Das hier ist meine Vokabelliste:

Anfangs hatte ich allerdings folgendes Problem:

Immer wenn ich ein neues Verb eingetragen habe, hat er die Buchstaben umgedreht. Aus חיים wurde also “םייח“. Wenn ich dann auf die Zelle geklickt habe, um das Wort zu bearbeiten, wurde es mir wieder in der Laufrichtung von rechts-nach-links angezeigt. Also so:

aber es gibt einen Trick, zumindest ist es eine Notlösung, bis es ein Fix o.ä. für dieses Problem gibt. Man fügt einfach bei der Formeleingabe einen Tabulator ein.

und dann geht es:

Vokalisiert schreiben

Aufgrund einer Mischung aus Unwissenheit und Faulheit habe ich alle Wörter bisher ohne Vokale geschrieben und auch keine Unterscheidung zwischen bspw. Beth (בּ)  und Veth (ב) gemacht. Es geht aber. Zumindest mit der QWERTY Belegung (mit der anderen hab ich es noch nicht raus gekriegt, habe aber auch nicht wirklich danach gesucht ). Dazu schreibt man erst den Konsonanten und dann den Vokal (mit gedrückter Shift- bzw. Alttaste). Das ist etwas ungewohnt, da man ja “normalerweise” konsequent die Konsonanten schreibt und dann erst danach wenn das fertige Wort steht, die Punktierung setzt (so hab ich es zumindest mal gelernt…) die meisten von euch schreiben aber wahrscheinlich (so wie ich inzwischen auch ) so ein “Durcheinander”, wo unter jedem Konsonanten direkt der Vokal gesetzt wird.

Wenn man sich dran gewöhnt hat, gehts aber auch ganz schnell mit der Vokalisierung:

Beispiel für Chajim:

Fragen, Anregungen, Kritik etc. bitte in die Comments posten!

In eigener Sache:

Dieses Tutorial erscheint unter Creative Commons (NC-BY-SA). Ihr dürft es komplett oder auszugsweise zitieren, aber bitte setzt dann einen Link zu meinem Blog und diesem Tutorial.

Wordpress ist eine sehr starke Plattform, die dank ihrer Einfachheit und Flexibilität enorme Verbreitung in der Bloggosphäre gefunden hat. Wer Wordpress Templates schreiben kann, hält ein sehr mächtiges Werkzeug in den Händen. Die Möglichkeiten von viralem Marketing mit Wordpress Themes und auch die der Monetarisierung dieser Templates sind grenzenlos.

Eben das gilt auch für die Wordpress Plugins. Man kann sie monetarisieren, für virales Marketing benutzen, die Usability des eigenen Blogs oder des Blogs seines Kunden verbessern und auch seine Reputation in der Wordpress Community pimpen. Wenn man sein Plugin zum Beispiel unter die Creative Commons Lizenz stellt und mit der Auflage, einen Link zu setzen, weiter gibt kann man so zusätzlich noch SEO betreiben (gilt natürlich auch für Themes). Außerdem sind Plugins eine super Ergänzung für ausgefallene Projekte, Marketingideen, Affiliatezeugs usw.

All das sind verdammt gute Gründe sich mit den Wordpress Plugins auseinander zusetzen.

Zum testen würde ich eien “Testumgebung” auf dem localhost empfehlen. Einfach die aktuelle Wordpressinstallation mit einer extra dafür angelegten Datenbank durchführen und alle tests darin durchführen bevor ihr auf die Idee kommt das ganze in eurem eigenen Blog zu testen Außerdem spart ihr viel Zeit, weil das hochladen entfällt.

Die Dateien

Für eurer Plugin reicht theoretisch eine einzelne Datei. Es empfiehlt sich aber einen eigenen Ordner anzulegen, besonders wenn ihr mehrere Dateien habt ist es sinnvoll alles geordnet in einem Ordner ggf. mit Unterordnern anzulegen.

Nun braucht ihr eure Plugin Datei. Der Name ist egal. Für dieses Beispiel nehm ich einfach mal den Namen tagcloud.php

Das Plugin beginnt mit einem Kommentar, der Informationen enthält die später auf der Plugin Seite angezeigt werden. Das sieht bei mir so aus:

/*
Plugin Name: Tagcloud
Plugin URI: htp://www.online-im-park.de/
Version: 1.0
Author: <a href=”http://www.online-im-park.de/”>Chaim</a>
Description: Nur ein kleiner Test
*/

In der Pluginübersicht sieht es dann so aus:

Anmerkung: Ich habe nicht vor in diesem Artikel einen kompletten Bauplan für das Programmieren einer Sidebar zu liefern. Dafür bin ich jetzt einfach zu faul. Es geht nur um allgemeine Aspekte eines Wordpress Plugins.

In eurem Ordner könnt ihr dann noch einen readme.txt File und/oder Lizenzinformationen ablegen. Wenn ihr das Plugin nur für euch nutzen wollt, braucht ihr dies natürlich nicht zu tun .

Anatomie eines Wordpress Plugins

Wordpress Plugins sind Objekt orientiert aufgebaut. Ihr braucht also erstmal eine “Hauptklasse” und dann die jeweiligen Funktionen. Angenommen unsere Tagcloud soll dem Header einen Kommentar hinzufügen, einen Link in den Footer knallen und ein Widget für die Sidebar liefern.

Dann definieren wir in unserer Hauptklasse erst einmal die Funktion zum ergänzen des Headers und des Footers.

class meinetagcloud {

function addHeaderCode() {
?>
<!– Ich war hier –>
<?php
}

function addFooterCode() {

?>
Danke an <a href=”http://www.online-im-park.de/”>Chaim</a> für das coole Plugin.
<? }
}

}

Und diese Funktion rufen wir dann später mit der Wordpress Funktion add_action auf. Mit add_action kann man bestimmten Wordpress Komponenten (header, footer etc.) Funktionen hinzufügen. Das heißt, dass unsere Kommentar im Quelltext des Frontends da angezeigt wird wo <? wp_header(); ?> steht. Falls das verwendete Template keinen Wordpress Header verwendet ist die Funktion nutzlos.

So geht’s mit add_action:

add_action(‘wp_head’, array(&$wp_suggest, ‘addHeaderCode’), 1);
add_action(‘wp_footer’, array(&$wp_suggest, ‘addFooterCode’), 1);

So weit so gut. Nun möchte ich gerne noch ein Widget in der Sidebar haben.

Dafür lege ich eine extra Funktion an. Die Funktion tagcloud_widget. Sie ist wie folgt aufgebaut:

function meinetagcloud_widget() {
?>

<a href=”http://www.online-im-park.de/”>Chaim</a>, I love your blog!

<?

}

Das ganze muss man dann noch mit:

function init_meinetagcloud(){
register_sidebar_widget(“meinetagcloud”, “meinetagcloud_widget”);
}
add_action(“plugins_loaded”, “init_meinetagcloud”);

Das sieht dann so aus:

Und weil ich so ein netter, endnutzerfreundlicher Entwickler bin richte ich zusätzlich zu meinem Plugin einen Adminbereich ein um den Link aus dem Footer wieder zu entfernen.

Plugin Adminoberfläche:

function wps_admin_options() {

if(isset($_POST['edit'])) {
$wpsOptions['linklove'] = $_POST['linklove'];

echo $wpsOptions['linklove'];

}

/* ————- Linklove Option —————– */

$opt_name = ‘wps_linklove’;
$hidden_field_name = ‘wps_submit_hidden’;
$data_field_name = ‘wps_linklove’;

$opt_val = get_option($opt_name);

if( $_POST[$hidden_field_name] == ‘Y’ ) {

$opt_val = $_POST[$data_field_name];

update_option( $opt_name, $opt_val );

?>

<div class=”updated”><p><strong><?php _e(‘Options saved.’, ‘mt_trans_domain’ ); ?></strong></p></div>
<?

}

?>
<p>
<h1>Einstellungen</h1>
<b>Linklove:</b> <br>

<form method=”post” action=”<?php echo $_SERVER["REQUEST_URI"]; ?>”>
<input type=”hidden” name=”<?php echo $hidden_field_name; ?>” value=”Y”>
Link zu <a href=”http://www.online-im-park.de/”>Chaim</a> im Footer anzeigen
<input type=”checkbox” name=”<? echo $data_field_name; ?>” <? if($opt_val == “on”) echo “checked”; ?>>
<br><br>
<input type=”submit” name=”edit” value=”edit!”>
</form>

</p>
<?
}

Zur Erklärung:

Ich habe die Variable $opt_name sie enthält den Namen der Einstellung “Link anzeigen bzw.verbergen”. Und dazu gibts noch 2 Variablen den Namen eines versteckten Feldes (um zu gucken ob das Formular abgeschickt wurde) und den der Checkbox. Dann hab ich die Variable $opt_val sie enthält den aktuellen Wert meiner Einstellung. Den Wert ziehe ich mir mit get_option();

Dann frag ich ab ob das Formular abgeschickt wurde und wenn ja welchen Wert die Checkbox bekommen hat. Die Einstellung setze ich dann auf diesen Wert. Wenn alles erfolgreich war gibt das Script die automatische Wordpressmeldung aus.

Dann gibts noch das Formular um die Linklove Einstellungen vor zu nehmen:

Einfach mit HTML aufgesetzt. Und an aktuell aufgerufene Seite gesendet ($_SERVER["REQUEST_URI"];) ich frage noch kurz ab welchen Wert meine Einstellung hat. Wenn sie auf on steht dann ist die Box automatisch abgehakt und wenn nicht ist sie leer.

Das ganze ist also ganz einfach.

Nun müssen wir aber auch noch unsere Footer Funktion Ergänzen.

Wir ziehen uns den aktuellen Wert der Einstellung mit $opt_val = get_option(‘wps_linklove’); und fragen dann mit IF ab: if($opt_val == “on”) wenn IF true zurück gibt, dann gibts den Link. Ansonsten gibts ihn nicht. Mit else könnte man noch so eine gehessige Meldung wie “hier bloggt ein linkgeiziger Blogger” oder sowas ausgeben das überlasse ich euch.

Das ganze wars dann auch schon. In den Rest müsst ihr euch mit der Zeit einarbeiten. Hier noch ein paar gute Links:

• Wordpress Funktionsreferenz
• Write a Plugin im Wordpress Codex
• Wordpress Template Tags
• Wordpress Deutschland Forum

Have Fun!

Zunächst mal könnt ihr euch hier das Ergebnis anschauen:

1. Öffne ein neues Dokument mit vier Ebenen (Hintergrund, Fotos, Action) und füge deinen Hintergrund auf der Hintergrundebene ein.

2. Dann importierst du deine Fotos auf die Fotoebene. Vorher musst sicher stellen, dass du ihre Größe angepasst hast und ihnen evtl. einen Rahmen verpasst hast.

3. Nun konvertierst du jedes Bild in einen MovieClip. Achte dabei darauf, dass der Punkt im Feld “Registration” genau in der Mitte ist.

4. Nun können wir die Fotos noch mit einem Schatten verschönern. Dazu markierst du dein Foto und wählst Filters aus. Füge den neuen Filter Glow hinzu und setze Blur auf 10. Als Farbe wähltst du schwarz. Dies machst du für jedes deiner Fotos.

5. Um mit dem ActionScript loslegen zu können, brauchst du die Flash Klasse Tweener für ActionScript 3 (Unter Downloads: tweener_1_31_70_as3.zip) . Sie gibt dir die Möglichtkeit Objekte leicht über den ActionScript Code zu bewegen. Entzippe die den Ordner in deinem Projektordner.

6. Nun wählst du Frame 1 auf der Ebene Actions aus. Und dann gehts los:

Zu erst imporitieren wir Tweener.

und dann definieren wir einige Variablen um die Fotoshow später noch besser zu personalisieren.

import caurina.transitions.*;

var photoOriginX:Number = photo1.x;
var photoDestX:Number = photoOriginX + 200;
var speed:Number = .5;
var rotationRange:Number = 10;
var photoCount:Number = 3;
var easeType:String = "easeoutquad";

7. Nun fügen wir zwei Funktionen hinzu. Die erste tritt in Kraft wenn auf ein Bild geklickt wird. Sie bewegt das Foto zu Position x, die wir zuvor definiert haben. Außerdem dreht sie das Foto zu einem zufälligen Wert. Die zweite Funktion macht die Änderungen wieder rückgängig und bringt das Foto zurück auf seinen ursprünglichen Platz.

function photoSlideOut(e:Event):void
{
	e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
	Tweener.addTween(e.target, {x: photoDestX, time: speed, transition: easeType, onComplete:photoSlideIn, onCompleteParams:[e.target]});
	Tweener.addTween(e.target, {rotation: Math.floor(Math.random()*(rotationRange*2))-rotationRange, time: speed*2, transition: easeType});
}

function photoSlideIn(p:MovieClip)
{
	p.parent.setChildIndex(p, 1);
	Tweener.addTween(p, {x: photoOriginX, time: speed, transition: easeType});

}

8. Nun zum letzten Schritt:

Die Fotos sollen unter die anderen Bilder geschoben werden und wieder in ihre ursprüngliche Form “rotiert” dazu verwendet ihr diesen code:

for(var i=1; i<=photoCount; i++)
{
	this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN, photoSlideOut);
	this["photo"+i].rotation =  Math.floor(Math.random()*(rotationRange*2))-rotationRange;
}

Mögliche Fehlerquellen:

In dem Code wird der Ausdruck “photo” verwendet. Wenn du deine Bilder nach der deutschen Variante “foto” bezeichnet hast, änder entweder den Code ab oder stelle den instanznamen auf “photo”(und dann die Zahl)

Solltest du einen Fehler beim imporiteren der Bilder haben, überprüfe, dass sich deine .fla bzw. .swf Datei auch in dem selben Ordner befindet wie die tweener Klasse!

Noch etwas: Der Code ist für 3 Fotos geschrieben! In meinem Beispiel (siehe Flash) benutze ich 5 Fotos, dafür müsst ihr der Variablen photoCount den jeweiligen Wert (in meinem Fall 5) zuweisen!

Das Spiel lässt sich nach dem Download ohne Probleme auf einem Webserver mit PHP4 installieren unter PHP5 kommt es allerdings zu Problemen. Deswegen hier ein kleines Tutorial um LoGD 0.9.7 PHP5 tauglich zu machen.

Zunächst einmal müssen folgende Dateien rausgesucht werden: common.php, list.php, about.php, configuration.php, create.php, dag.php, dragon.php, gardens.php, gypsy.php, houses.php, inn.php, login.php, prefs.php, pvp.php, rebirth.php, referers.php, setnewday.php, shrine.php, superuser.php, user.php, viewpetition.php.

Bei all diesen Dateien sucht man nach:

strtotime(date(“r”)

und ersetzt es mit:

strtotime(date(“c”)

Und zum Schluss noch die Datei logde.ph:

foreach($titles AS $this) {
if (strtolower($this[0])==$cleartitle || strtolower($this[1])==$cleartitle) {
$falsetitle = true;
break;
}
}

ersetzen mit:

while (list($key,$val)=each($titles)){
if (strtolower($key[0])==$cleartitle || strtolower($key[1])==$cleartitle) {
$falsetitle = true;
break;
}
}

Fragen, Anregungen, Kritik: Kommentar!

Viel Erfolg!

Hier schonmal ein paar Links, die ihr später noch gebrauchen werdet:

TinyMCE Entwicklerseite: http://tinymce.moxiecode.com/

Infos von Wiki: http://de.wikipedia.org/wiki/TinyMCE

TinyMCE Wiki: http://wiki.moxiecode.com/index.php/TinyMCE:Index

1. Den WYSIWYG-Editor von TinyMCE auf der Entwicklerseite herunterladen.
2. Das Archiv(.zip) entpacken
3. Ihr habt nun ziemlich verschachtelt einige Ordner vor euch:
   1. Ihr schnappt euch den Ordner tiny_mce und verschiebt ihn in euer Verzeichnis, wo ihr damit arbeiten wollt. (Bei mir heißt der Ordner WYSIWYG)
   2. Ihr macht dort eine neue Datei auf

In die neue Datei ladet ihr per JavaScript diese Datei: tiny_mce.js sie befindet sich in dem Ordner tiny_mce

<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode : “textareas”
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>

Dann beginnt ihr mit JavaScript. Ihr weißt allen Textareas den WYSIWYG-Editor zu.

Dadrunter macht ihr einfach ein Textarea und habt schon euren ersten kleinen Standard WYSIWYG-Editor.

Mit dem kann man schon ein paar Standardfunktionen umsetzen wie z.B. fett, kursiv etc.

Aber das ganze lässt sich natürlich noch erweitern:

Also ergänzen wir noch ein paar Buttons:

<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init({
mode:”textareas”,
theme:”advanced”,
verify_html:false,
theme_advanced_buttons1: “fontselect,fontsizeselect,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist”,
theme_advanced_buttons2: “image,forecolor,backcolor,indent,outdent,undo,redo,link,unlink”,
theme_advanced_buttons3:”",
theme_advanced_toolbar_location:”top”
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>

Hier habe ich, wie man sieht noch ein paar Buttons hinzugefügt. Eine ausführliche Übersicht über alle Buttons die ihr hinzufügen könnt, findet ihr in der TinyMCE Wiki.

Und so sieht das ganze dann aus:

Nun möchte ich gern noch eine Tabelle hinzufügen. Und zwar in die dritte Buttonreihe, die jetzt noch leer ist:

<html>
<head>
<title>Test</title>
<script language=”javascript” type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>

tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
plugins : “table”,
theme_advanced_toolbar_location:”top”,
theme_advanced_buttons2_add : “code”,
theme_advanced_buttons3_add : “tablecontrols”,
table_styles : “Header 1=header1;Header 2=header2;Header 3=header3″,
table_cell_styles : “Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1″,
table_row_styles : “Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1″,
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5
});
</script>
</head>
<body>
<form method=”post” action=”#”>
<textarea name=”content” cols=”50″ rows=”15″></textarea>
<input type=”submit” value=”Save” />
</form>
</body>
</html>

Im Theme advanced sind in der Regel schon alle wichtigen Buttons enthalten, ich habe nur noch den Button Code in der Reihe 2 hinzugefügt und das Plugin-Tabelle in der dritten Buttonreihe.

Gerade habe ich bei Ne8 Anpassungen an der .htaccess vorgenommen und die Links im phpBB angepasst und da ich so sozial bin, gibts hier auch gleich ein kleines Tutorial zur .htaccess:

Also die .htaccess ist eine Datei, die auf dem Apache Server vorhanden ist. Wenn bei euch mod_rewrite auf on steht (dazu einfach mal die php.ini überprüfen), könnt ihr mit der .htaccess URLs umschreiben. Wie viele sicherlich wissen, möglich Suchmaschinen keine dynamischen URLs. Das sind URLs, wo man mit einem ? mehere Paramter übergibt. Zum Beispiel: index.php?sel=kategorie1&action=seite5&post=agEb4vC usw…

Deswegen kann man diese URLs „umschreiben“ bzw. man teilt seinem Apache Server sozusagen mit, dass diese URLs einen Alias bekommen. Wenn ich also beispielsweise eine index.php Datei habe, die auf den Wert für „sel“ wartet, müsste ich normalerweise den Wert per URL übergeben also z.B.: index.php?sel=1. Ich kann aber meinem Apache Server mitteilen, dass er immer, wenn jemand z.B. index/1.html eingibt, diese 1 an index.php?sel= weiterleitet.

Anzeige:
Gratis-Report herunterladen: `Die 6 Erfolgsfaktoren, mit denen Sie im Internet Geld verdienen`

Wie mach ich das nun? Wie schon gesagt, mit der .htaccess zunächst einmal öffnet man die Datei in einem reinen Texteditor, möglicherweise ist die Datei garnicht sichtbar, da sie vom System ausgeblendet wird. Dann muss man sie evtl. umbennenen in 1.htaccess, damit sie angezeigt wird und man sie erstmal bearbeiten kann (auf dem Webserver kann man sie dann immernoch in .htaccess umbenennen).

Zunächst einmal sagen wir der Datei:

RewriteEngine on

Im Klartext: URL-Umschreibung ist aktiviert

Und dann erstellen wir eine sogenannte Rewrite Rule.

Wenn wir z.B. möchten, dass immer, wenn jemand index.html eingibt, die index.php Datei geladen wird, sieht das so aus:

RewriteRule index.html$ index.php

Die Syntax ist ganz einfach:

Eingeleitet wird die Regel mit RewriteRule, dann folgt, das, was eingegeben wird und wird mit einem $-Zeichen beendet dann ein Leerzeichen und die Datei, auf die in wirklichkeit zugegriffen werden soll.

Das ganze könnte auch so gehen:

RewriteRule bla.html$ bla.php

Dann müsste man bla.html eingeben und es würde auf bla.php zugegriffen werden.

Da man aber – zum Beispiel bei Foren – unmöglich für jeden erdenklichen Eingabefall eine Regel schreiben kann, arbeitet man mit Variablen. z.B. so:

RewriteRule ([0-9]+).html$ index.php?zahl=$1

Ok, das sieht schon

etwas komplizierter aus. Stellen wir uns vor, die index.php reagiert auf die Eingabe von Ziffern zwischen 0-9 (die mehrfach wiederholt werden können) man bekommt also eine Ausgabe, wenn man index.php?zahl=15 eingibt oder wenn man index.php?zahl=8925 eingibt. Nun wird dem Server mitgeteilt, dass immer wenn jemand x.html eingibt, er das an index.php?zahl=x weiterleiten soll.

Wenn ich also die Seite 459.html aufrufe, wird mir die Seite index.php?zahl=459 geliefert wärend in der Adresszeile noch 459.html steht.

( und ) geben an, dass hier eine Art Variable steht. Innerhalb der [ ] stehen die Möglichkeiten von „Typen“ denen die Variable angehört. In diesem Fall, muss die Variable also eine Ziffer zwischen 0-9 sein, das +hinter dem ] gibt an, dass es unendlich viele Ziffern sein könnten. Wenn ich also das + weg lasse, könnte ich immernoch 9.html aufrufen und würde index.php?zahl=9 geliefert bekommen, aber nicht mehr 12.html, da es sich hier um 2 Ziffern handelt.

Der Wert, der für diese Variable eingegeben wird, wird in $1 gespeichert und kann so an die „richtige“ URL weitergegeben werden. Wenn man mehere Parameter über Variablen übergibt, verwendet man auch $ und zwar $1 für den ersten Parameter, der übergeben wird $2 für den zweiten usw. Also z.B.:

RewriteRule ^blog/([a-z0-9-]+)/([a-z0-9-]+).html$ blog.php?kategorie=$1&eintrag=$2

Ich könnte also Bsp. http://www.domain.de/blog/allgemein/bla1.html eingeben und es würde auf http://www.domain.de/blog.php?kategorie=allgemein&eintrag=bla1 weitergeleitet werden.

404-Pages selbst gestalten

Mit Hilfe der .htaccess kann man aber auch Errorpages z.B. für 404-Errors (Not found) selbst gestalten. Dazu designed man eine Seite z.B. eine Suchbox oder ähnliches und speichert sie auf dem Webserver ab. Dann fügt man in die .htaccess folgenden Code ein:

ErrorDocument 404 /adressederdatei.php

Redirect

Außerdem lassen sich mit der .htaccess Weiterleitungen erstellen. Einfach mit

Redirect /aufgerufenedatei.html weiterleitung.html

Wenn man nun http://www.domain.de/aufgerufenedatei.html aufruft, wird man auf die Datei weiterleitung.html weitergeleitet.

Den „Was ist PHP?“-Teil möcht ich einfach mal überspringen, da ich denke, dass jedem bekannt ist, dass PHP eine Serverseitige Sprache ist. Und auf die Voraussetzungen möchte ich an dieser auch nicht großartig eingehen. Es sei nur gesagt, dass ihr für PHP einen Webserver braucht, der PHP unterstütz => euer Webspace Packet sollte PHP enthalten. Entweder Version 4 oder PHP 5 ich denke mit beidem lässt sich gut arbeiten, derzeit arbeite ich aber überwiegend mit PHP 5. Wenn ihr zusätzlich noch eine mysql-Datenbank habt, ist das perfekt.

So dann starten wir einfach mal.

Ein PHP-Dokument beginnt ihr einfach mit <?php und beendet es mit ?>, für faule: es reicht auch aus <? anstatt <?php zu schreiben. Zumindest habe ich noch nie Unterschiede zwischen <? und <?php gemerkt. Wenn jemand da schon Unterschiede gemerkt hat -> Kommentarfunktion! Ein PHP-Dokument hat immer die Endung .php und nicht.html oder ähnliches! Auch wenn ihr in einem Dokument sowohl HTML als auch PHP habt, ist es .php.

Wichtig ist, dass ihr während des PHP-Codes nicht einfach HTML schreiben könnt.  Also

<?

if(1 > 2) {

<div id=”bla”>bla bla bla</div>

}

?>

Führt zu einem Error. Ihr habt 2 Möglichkeiten. Entweder ihr unterbrecht den PHP-Code um in HTML zu schreiben. z.B.

<body>

<?

if($a != $b) {

?>

A ist nicht das selbe wie B

<?

}

?>

</body>

oder ihr verwendet echo! Mit echo könnt ihr über PHP eine Ausgabe generieren.

also zum Beispiel:

<?

echo “hallo”;

?>

Dann gibt er beim Aufrufen der PHP-Datei hallo aus.

Soviel könnte man natürlich auch mit HTML machen

Wichtig: Wenn ihr innerhalb eurer Ausgabe mit echo ” verwendet, führt das zu einem Parse-Error. Warum? Weil PHP dann denkt, die Ausgabe sei zu Ende, weil echo ” “ ; Ja mit einem ” endet und sich PHP dann fragt “und wo ist jetzt das ; ? Und warum kommt noch soviel Text??? ” Also was machen wir? Wir “maskieren” das ” mit einem \ .

Also z.B.

echo “<img src=\”bild.jpg\”>”;

Deswegen kommen wir hier zum ersten unschlagbaren Grund PHP zu nutzen: Variablen!

Folgendes Problem:

Stellt euch vor auf eurer Webseite habt ihr einen Login. Der Besucher soll sich mit             dem Namen „Gisela“ und dem Passwort „Love&Peace“ einloggen.

Nun müsst ihr natürlich wissen, was der User in das Eingabefeld Name und in das             Eingabefeld eingetragen hat, damit ihr dementsprechend den Zugang gewähren könnt     oder auch nicht.

Ihr wollt in eurem Skript überprüfen ob der User Gisela eingegeben hat und nicht Ursula oder Herbert. Da ihr aber vorher nicht wisst, was der User eingibt, arbeitet ihr mit einer Variable, die ihr z.B. Name nennt. Euer Skript soll prüfen ob Name = Gisela ist.

Variablen werden in PHP mit einem $ begonnen. Sie sind praktisch, wenn ich mit einem Wert arbeiten will, den ich noch nicht kenne (siehe oben) oder wenn ich mich nicht ständig wiederholen will. Angenommen, ich müsste in einem Template oder ähnlichem immer wieder den selben Pfad eingeben. Zum Beispiel http://apache.local/~chaimdonnewald/  und das 20 Mal in dieser Datei. Natürlich könnte ich mit Copy&Paste arbeiten, aber ich kann auch mit Variablen arbeiten z.B. so:

<?

$pfad = “http://apache.local/~chaimdonnewald/”;

?>

<img src=”<? echo $pfad; ?>bilder/bild.jpg”>

Dies hat vorallem dann einen Vorteil, wenn ich mein Skript später an jemand anderen weitergebe und er das auf seinem Server testen will und der Pfad auf einmal nicht mehr http://apache.local/~chaimdonnewald/ heißt sondern vielleicht http://apache.local/~julia/ dann muss man einfach nur die Variable ändern und nicht überall die Pfade.

Obwohl Jing – meiner Meinung nach – sehr bedienerfreundlich ist, wissen viele, die es gerade installiert haben oft garnicht, wie sie denn jetzt Videos damit machen bzw. wenn sie ein Video gemacht haben, wie sie es in einen Ordner exportieren sollen anstatt es hochzuladen. Deswegen hier ein kleines Tutorial.

Zunächst einmal müsst ihr euren Bereich wählen, das konnte ich in diesem Video jetzt leider nicht zeigen . Ihr geht mit dem Mauszeiger auf das Sonnensymbol das sich normalerweise oben rechts in der Ecke befindet (bei Aufnahme natürlich nicht) und klickt dort auf das erste der drei Symbole um mit einem „Fadenkreuz“ den Bereich auszuwählen, den ihr abfilmen wollt. Dann erscheint unten links diese Palett. Dort seht ihr, wielange ihr schon aufnehmt und könnt verschiedene Optionen anklicken. Um das Video anzuhalten (also die Aufnahme zu beenden) Stop oder für die Pause: Pause. Und ihr könntet auch das Mikro ausstellen (was ich vielleicht mal hätte machen sollen ) und neustarten oder ganz verlassen. Wenn ihr das gemacht habt, und mit eurem Video fertig seid, klickt ihr auf „Stop“. Und danach könnt ihr das Video exportieren.

Den Bereich zum exportieren konnte ich leider nicht aufnehmen (da ich die Aufnahme vorher stoppen musste) deswegen gibts den hier als Screenshots. Ihr klickt dann unten auf Share und es wird in den File exportiert, den ihr bei den Einstellungen angegeben habt.

Dies könnt ihr übrigens auch ganz leicht ändern, indem ihr bei eurer Sonne auf das dritte Symbol klickt (die beiden Zahnräder) und dort dann wieder die Zahnräder anklickt (Preferences) und dann auf File (oben). Dann öffnet sich ein neuer Dialog, einfach mit Browse den File auswählen und bestätigen.

Heute habe ich verzweifelt nach einem ganz einfachen Weg gesucht um ein Drag & Drop zu programmieren, für ein Widgetscript, das ihr in einem meiner Projekte in ein paar Wochen finden werdet.

Nach dem nich erst mal nur nach „Prototype Drag & Drop“ gesucht habe und trotz gründlicher Recherche nichts gefunden habe was mir 100% weitergeholfen hat, bin ich durch einen kleinen Denkanstoss (Prototype ist soetwas wie eine ideale Lib für LibEntwickler – Drag & Drops lassen sich deswegen nur schwierig allein mit Prototype realisieren), habe ich mich entschieden mein Drag & Drop mit Script.aculo.us
zu realisieren.

Leider fand ich die offizielle Webseite von Script.aculo.us immer schon etwas „schwierig“ (die von Prototype im übrigen auch) und suchte deswegen ziemlich lang. Auch über Google habe ich so schnell keine einfache (!) Lösung gefunden.
Wichtig war mir, dass es einfach um eine HTML + Ajax Lösung ging, den PHP-Code dazu wollte ich später selbst basteln. Leider hab ich überwiegend Tutorials gefunden, wo das Drag&Drop Script in eine größere Lösung eingebaut war. Beispielsweise Einkaufswagen, für die man zur Realisierung neben Ajax zu Ruby on Rails gegriffen hatte oder Objekt-Orientierte-PHP Lösungen für einen Onlineshop mit Drag&Drop.

Nach ein paar Klicks bin ich auf der Script.aculo.us Page fündig geworden und möchte euch meine Erkenntnis in einem kurzen Tutorial vorstellen.

Zum Tutorial ist noch zu sagen, dass derjenige, der schon Grundwissen in Ajax hat die grauen Texte überspringen darf, diese sind Basiswissen.

1. Man unterscheidet draggables und droppables
   1. Draggables sind die „Bausteine, die sich verschieben lassen.
   2. Droppables sind soetwas wie Container, auf die man etwas schieben kann.
2. Sowohl die Draggables als auch die Droppables haben verschiedene Optionen, die ihr auf der Script.aculo.us Website nachlesen könnt (die jeweiligen Begriffe sind verlinkt)

Merke: Draggables lassen sich auch von Droppables unabhängig bewegen, aber Droppables sind ohne Draggables etwas „unsinnvoll“ !

Wie bastel ich mir jetzt ein Draggable?

new Draggable('id_of_element',[options]);

Das allein bringt uns natürlich garnichts und da viele meiner Leser bestimmt die Lösung schon schön vorgekaut haben möchtet, gibt es diese jetzt auch.

<div id=”bewegmich“>Beweg mich </div>

<script type=”text/javascript”>

new Draggable(‘bewegmich’,{revert: true});

</script>

Dazu muss man noch sagen, dass man vorher die Prototype-Bibliothek sowie die Script.aculo.us Bibliothek runterladen und einbinden muss. Für alle, die davon noch garkeine Ahnung haben:

Prototype: http://www.prototypejs.org/

Script.aculo.us: http://script.aculo.us/

Ganz einfach einzubinden:

<script type=”text/javascript” src=”inc/prototype.js”></script>
<script type=”text/javascript” src=”inc/scriptaculous.js”></script>

Inc, müsste man in dem Fall natürlich durch das Verzeichnis ersetzen, in dem man die Bibliotheken abgelegt hat. Bei mir ist das standardmässig „inc“ (inc = include).

Ich erzeuge also zuerst einen Div-Container, den kann ich dann mit CSS später noch formatieren indem ich einfach mit meinem CSS-Code auf die ID zurückgreife (IDs die vom Javascript verwendet werden sind die selben wie die CSS IDs, deswegen ist es auch so wichtig, dass man IDs nur einmal benutzt. Will man mehrere Objekten die selbe Formatierung verpassen nimmt man Klassen.)

Dann beginne ich mit meinem Ajax Code. Ich erzeuge ein neues Draggable, dieses soll der Div-Container mit der ID „bewegmich“ sein. Das allein reicht, um mein Draggable benutzen zu können. Aber ich gebe zusätzlich noch eine Option an.

Revert: true bedeutet, dass das Draggable beim loslassen an seine ursprüngliche Stelle zurück wandert. Standardmässig steht diese Option auf False. Natürlich kann ich noch andere Optionen angeben. Optionen werden jeweils mit Kommas voneinander getrennt innerhalb der geschweiften Klammern, schliesst man diese „Optionsbefehle“nicht mit einem Semikolon ab. Also nicht {option1 : true; option2 : false; } und auch nicht {option1 : true, option2 : false; } sondern {option1: true, option2. false }! Als Zuweisungsoperator dient hier NICHT das Gleichzeichen, sondern der Doppelpunkt.

Eine Auflistung aller Optionen findet ihr hier.

Nun zu Droppables:

Damit ich meine Draggables auch irgendwo drauf ziehen kann um etwas zu „erreichen“ brauche ich nun ein Droppable.

Droppables.add('id_of_element',[options]);

Also zum Beispiel:

<div id=”dropp“></div>
Droppables.add(‘dropp‘,{onDrop: function(element) { Element.hide($(element)); new Ajax.Updater(“ausfuehren”,”ajax/tuetwas.php?drag=”+element.id+”&platz=1″,{method: ‘get’, evalScripts: true}); }, hoverclass: ‘hclass’ });

Das ist hoffentlich jetzt nicht etwas viel auf einmal. Ich versuche es mal zu strukturieren:

1. Ich habe einen Div-Container, hier soll mein Draggable draufgezogen werden. Dieser Container hat die ID “dropp”. Ich kann ihn per CSS formatieren (Größe angeben, Position, Rahmen, Hintergrundfarbe usw…)
2. Ich gebe mehere Funktion und trenne sie durch Kommas.
   1. onDrop: Wenn jemand ein Draggable drauf doppt (fallen lässt/darauf zieht und loslässt) wird die folgende Funktion aufgerufen: function(element) { Element.hide($(element)); new Ajax.Updater(“ausfuehren”,”ajax/tuetwas.php?drag=”+element.id,{method: ‘get’, evalScripts: true}); }
      
      1. Das Element „element“ -> also das Draggable, das auf das Droppable gezogen wurde, wird unsichtbar gemacht. Es verschwindet also. (Das habe ich gemacht, weil in meiner Applikation die Draggables nur einmal auf ein Droppable gezogen werden können.)
      2. Es wird ein Ajax.Updater eingeleitet. Er läd in der <div>-„ausfuehren“ (nicht im Codeausschnitt enthalten) die Datei tuetwas.php aus dem Ajax-Ordner. Er übergibt an sie den Parameter Drag mit dem Wert element.id. Element.id ist die ID des elements (element ist eine Variable mit dem Punkt kann ich auf einen bestimmten „Wert“ einer Variable zugreifen). Dann benutzt der Ajax.Updater noch zwei Optionen. Einmal die Methode get um die Daten zu laden und einmal ist evalScripts auf true gesetzt, mit dieser Option kann ich auch in der geladenen Datei Prototype Code verwenden.
3. hoverclass setze ich auf den Wert hclass. hclass ist eine Klasse, die ich im CSS-Code verwende sie hat die Eigenschaften, die das Droppable annehmen soll, wenn ein Draggable sozusagen „hover“ ist. Beispiel: Normalerweise hat mein Droppable einen weissen Hintergrund und einen schwarzen 1px dicken Rahmen. Nun möchte ich, dass mein Droppable die Hintergrundfarbe orange annimmt, wenn jemand ein Draggable drauf zieht (aber noch nicht los lässt). Dann speicher ich diesen Wert in einer CSS Klasse und nenne sie in dem Fall hclass und setze dann die hoverclass auf diese CSS-Klasse.
   

Ok, ich hoffe es ist klar geworden wie das mit Drag&Drop funktioniert. Mit meiner PHP-Datei kann ich dann zB diese Veränderung in meiner Datenbank speichern oder sie per PHP auswerten. Auf die ID des Draggables kann im im PHP Code mit $_GET['drag'] zugreifen, weil wir ja über die Methode get den Parameter drag übergeben haben.

Beispiele hier: Drag & Drop mit Prototype und Script.aculo.us