Universelles Browser-Tool

Geschrieben in crazyideas von natalia am 28 Februar 2008

In einer perfekten Welt gäbe es einen, vielleicht auch viele Browser, aber alle würden die gleichen Styles unterstützen und das Leben der Web-Programmierer wäre so einfach. Aber unsere Welt ist nicht perfekt (vielleicht macht sie das so spannend), daher kam mir heute der folgende Gedanke. Es müsste ein Tool geben, dass es möglich macht, mehrere Browser-Darstellungen direkt miteinander zu vergleichen. In einer Anwendung lassen sich mehrere Browser-Engines in kleine Fenster reinladen, wie bei Editoren, z.B. bis zu vier. Die Browser müssten natürlich auf dem System installiert sein, z.B. Firefox, IE 6, IE 7 und Opera. Dann gibt es die Möglichkeit wie mit MeasureIt im Firefox über alle Fenster zu messen. So was wie Firebug müsste es da für alle Browser-Engines geben.
Das Highlight wäre, wenn man die Fenster übereinander legen könnte mit einer leichten Transparenz, um direkt Seiten miteinander zu vergleichen. Und außerdem würde die Anwendung bei unterschieden Vorschläge machen für Browser-Hacks. Wenn ich irgendwann mal Zeit habe, werde ich so etwas vielleicht programmieren, hab keine Ahnung wie (nur nicht mit Java). Und wenn es so funktioniert, dann habe ich den Programmierer-Oscar verdient :)

Schicke Input-Buttons und Links

Geschrieben in css,typo3 von natalia am 28 Februar 2008

Einen Input-Button zu stylen ist an sich nicht so schwer, die Probleme entstehen dann, wenn man es in mehrern Browsern (Firefox, IE6 und IE7) gleich haben möchte. Außerdem sollten die Buttons skalierbar sein und trotzdem einen schönen Hintergrund haben.
Dazu habe ich erstmal eine Klasse definiert, die für input-Buttons und Links gleichermaßen gelten sollte und darin folgendes definiert:

  1. padding: 2px 30px 2px 10px;
  2. border: 0 none;
  3. background: #fff url('schicke_buttons/submit_button_green.gif') top right no-repeat;
  4. cursor: pointer;
  5. font-weight: bold;
  6. margin-top: 5px;
  7. margin-bottom: 5px;
  8. outline: 0 none;
  9. color: #555555 !important;

Die Eigenschaft padding passte aber nicht für Links, daher wird sie ein wenig angepasst. Gleichzeitig wird für Links ein Rand links definiert, was dem Button sein endgültiges Aussehen gibt. Damit wäre man erstmal mit allem fertig, wenn da nicht der IE wäre. Dieser gibt dem Button, sobald man irgendwie die Eigenschaft border setzt, einen Rand, und zwar häßlich und an allen Seiten.
Daher wird der Rand nur für den “unproblematischen” Browser Firefox definiert mit einem Selector, den der IE7 nicht versteht (html>body kann der mittlerweile auch).
Da man dem Input-Button im IE nicht einfach einen Rand geben kann aus dem eben genannten Grund, muss man sich mit einem Span drumrum gehelfen. Dieser Span definiert den Rand links neben dem Feld und löst gleichzeitig das Problem mit dem 3px-floating-bug.
Wenn man diese schicken Buttons in Typo3 benutzen möchte, besteht das Problem, dass die Formulare automatisch generiert werden und man keine Möglichkeit hat, einen Span um den Button einzufügen. Daher habe ich kleines Skript geschrieben, das diesen Span automatisch um einen Mailform-Button packt. So sollten die Buttons in allen Browsern aussehen, und hier ist das Beispiel zum Anschauen.

schicke_buttons.gif

Step I

Geschrieben in choreos von natalia am 27 Februar 2008

Block A:
8 ZZ – Chacha re, Mambo li (oder Pivot Turn)
8 ZZ – 2 Side Leg Lift
8 ZZ – V-Step, V-Step Drehung li
8 ZZ – T-Step

Block B:
8 ZZ – Basic Straddle, Mambo re
16 ZZ – Repeater Knee um das Step herum
8 ZZ – Mambo re, Flieger nach vorn

Block C:
8 ZZ – L-Step re
8 ZZ – Mambo Chacha li, re
16 ZZ – 4 Knee Lift um das Step herum

Aufbau Block A:
Chacha hin und her, dazwischen einige Tap Ups zum Ausruhen. Dann Chacha, Mambo und 2 Tap Ups üben (die Mambos im Warm Up einführen). Dann 4 Basic am Ende der Gruppe einfügen. Aus den ersten 2 Basic 2 V-Step machen, aus Basci 3+4 den T-Step. Zuletzt den zweiten V-Step zum A oder zur Drehung variieren.

Aufbau Block B:
Beginne mit Back Leg Lift, dann Mambo, reduzieren zu Mambo+Flieger mit 2 Basics davor. Weiter mit Kneelift, aus den Kneelift den Repeater machen. Vor den Repeater 2 Basic, dahinter die Mambo-Flieger-Kombi einfügen. Dann die Repeater Variation zeigen. Zuletzt aus dem zweiten Basic einen Mambo machen.

Aufbau Block C:
Beginne mit Mambo Chacha am Platz. Dann Tap Up and Down. Dann jeweils zwei auf einer Seite, L-Step aufbauen. Dann reduzieren zu L-Step und Mambo Chacha im Wechsel. Den Mambo Chacha öffnen. Schließlich 4 Kneelift dranhängen und um das Step herum variieren.

User Registrierung erweitern

Geschrieben in typo3 von natalia am 12 Februar 2008

Zu der Benutzerregistrierung sr_feuser_register sollten neue Felder dazukommen. Wie also in der Dokumentation zu der Extension beschrieben habe ich mit der EM mit dem Kickstarter eine neue Extension angelegt. Diese Extension konnte nichts anderes außer neue Felder in der Tabelle fe_users anzulegen. Da die vom Kickstarter automatisch generierten Spaltennamen zu lang sind, hab ich sie ein wenig geändert. Nach der Einrichtung und der Installation hatte die Extension die Tabelle um einige Felder erweitert: ein Eingabefeld, ein Auswahlfeld (Checkbox), einige Textfelder (längere Texte) und eine Drop-Down-Box (Auswahl).
Dann musste man nun noch das Template um die Felder erweitern und die Felder in die Konstanten reinschreiben, damit sie auch angezeigt werden.

Dann habe ich festgestellt, dass die Extension sr_feuser_register keine Ansicht bietet, es gibt ein Bearbeitungsformular, ein Formular zum Anlegen eines Accounts, aber keine Einstellung, um die gespeicherten Daten einfach nur anzuzeigen. Die Idee war, die eben angelegte Extension zu erweitern zu einem Frontend Plugin.
Im Kickstarter hatte ich die entsprechenden Einstellungen vorgenommen: Frontend Plugin als Typ und wieder neu schreiben lassen. Da ich die Spaltennamen vorher geändert hatte, musste ich die aus der alten Datei kopieren oder wieder ändern.

Man muss ja nichts neu erfinden: die Felder, die angezeigt werden sollen und das Template liefert ja schon sr_feuser_register, den Pfad zum Template sollte der Benutzer auch nicht zweimal eingeben müssen. Da diese Definition aber in den Konstanten steht, kann man einfach im Setup der eigenen Extension darauf zugreifen und verfügbar machen.

  1. plugin.tx_npptafeuserregister_pi1 {
  2. # copy stuff you need from sr_feuser_register
  3. formFields = {$plugin.tx_srfeuserregister_pi1.formFields}
  4. templateFile = {$plugin.tx_srfeuserregister_pi1.file.templateFile}
  5. }

Dann sucht man sich aus dem Template von sr_feuser_register einen Teil aus, der gut passt, z.B. TEMPLATE_CREATE_PREVIEW. Dort stehen die Daten nicht in Input-Feldern, sondern einfach mit Labels untereinander. Das einzige was ein wenig stört, ist das Formular und die Buttons, aber wozu gibt es reguläre Ausdrücke?
Die Beschriftung der Buttons kann man auch von der sr_feuser_register “klauen”. Dazu brauche ich aber eine Instanz dieser Klasse, lade dort die Locallang rein und lasse mit die Labels übersetzen.
Weiterer Trick (danke Boris) ist die Locallang für die TCA reinzuladen und die Int-Werte durch die dazugehörigen Labels ersetzen zu lassen. Anschließend werden die unnötigen Labels entfernt.

  1. // Klassenvariable
  2. var $originalTemplateCode;
  3. function main($content,$conf)    {
  4.     global $TCA;
  5.     $this->conf=$conf;
  6.     $this->pi_setPiVarDefaults();
  7.     $this->pi_loadLL();
  8.    
  9.     $this->getTemplateCode();
  10.    
  11.     $srpath = t3lib_extMgm::extPath('sr_feuser_register');
  12.     $srpath.= 'pi1/class.tx_srfeuserregister_pi1.php';
  13.     require_once($srpath);
  14.     $srclass = t3lib_div::makeInstance('tx_srfeuserregister_pi1');
  15.     $srclass->pi_loadLL();
  16.    
  17.     $dbllfile = file_get_contents(t3lib_extMgm::extPath($this->extKey).'locallang_db.xml');
  18.     $dbllfile = t3lib_div::xml2array($dbllfile);
  19.     $dbll = $dbllfile['data']['default'];
  20.     if($dbllfile['data'][$this->LLkey])  {
  21.         $dbll = array_merge($lang,$dbllfile['data'][$this->LLkey]);
  22.     }
  23.    
  24.     $templateCode = $this->cObj->getSubpart($this->originalTemplateCode,'###TEMPLATE_CREATE_PREVIEW###');
  25.    
  26.     $feuser = $GLOBALS['TSFE']->fe_user->user; // get the fe user
  27.  
  28.     // replace markers
  29.     $fields = explode(',',$this->conf['formFields']);
  30.     $markerArray = array();
  31.     for($i=0;$i<count($fields);$i++) {
  32.         $key = trim($fields[$i]);
  33.         if($key != 'password') {
  34.             $markerArray['###FIELD_'.$key.'###'] = $feuser[$key];
  35.             $markerArray['###LABEL_'.strtoupper($key).'###'] = $srclass->pi_getLL($key,$dbll['fe_users.'.$key]);
  36.         }
  37.     }
  38.     $key = 'pta_job';
  39.     $value = $feuser[$key];
  40.     $markerArray['###TCA_INPUT_'.$key.'###'] = $dbll['fe_users.'.$key.'.I.'.$value];
  41.    
  42.     // remove useless labels
  43.     $markerArray['###HIDDENFIELDS###'] = '';
  44.     $markerArray['###LABEL_V_DEAR###'] = '';
  45.     $markerArray['###LABEL_V_VERIFY_BEFORE_CREATE###'] = '';
  46.    
  47.    
  48.     // remove form and input tags from template
  49.     $search = '/<form.*?>/i';
  50.     $templateCode = preg_replace($search,'',$templateCode);
  51.     $search = '/<\/form>/i';
  52.     $templateCode = preg_replace($search,'',$templateCode);
  53.     $search = '/<input.*?>/i';
  54.     $templateCode = preg_replace($search,'',$templateCode);
  55.    
  56.     $content = $this->cObj->substituteMarkerArray($templateCode,$markerArray);
  57.    
  58.     $removeFields = array('gender','name','status','date_of_birth','title','company','title','address','city','zone','static_info_country','country','zip','telephone','fax','usergroup','module_sys_dmail_category','module_sys_dmail_html','language','www','image','comments');
  59.     for($i=0;$i<count($removeFields);$i++) {
  60.         $key = trim($removeFields[$i]);
  61.         if(!in_array($key,$fields)) {
  62.             $content = $this->cObj->substituteSubpart($content,'###SUB_INCLUDED_FIELD_'.$key.'###','');
  63.         }
  64.     }
  65.     return $this->pi_wrapInBaseClass($content);
  66. }
  67.  
  68. function getTemplateCode() {
  69.   $this->originalTemplateCode = $this->cObj->fileResource($this->conf['templateFile']);
  70. }

Locallang mit TypoScript überschreiben

Geschrieben in typo3 von natalia am 12 Februar 2008

Prinzipiell ja nicht schwieriges und häufig in Foren gefragt und in Tutorials erklärt. 08/15 Lösungen sind vielleicht gut, aber solche Tutorials (“so und so, ist doch ganz einfach”) bringen manchmal einfach nicht weiter.
In meinem Fall hatte ich eine Erweiterung der Extension tipafriend geschrieben. Hier beschreibe ich, wie es geht.
http://www.npostnik.de/typo3/extension-per-xclass-erweitern-tipafriend/

Nun hatte ich in der Erweiterungsklasse ein Template mit Markern benutzt und mit Locallang die Sprachsteuerung gemacht (nicht wie vorher übers Template). Einige Sprach-Labels waren nun so spezifisch, dass ich diese Änderungen nicht in der locallang.xml vornehmen wollte, also überschreibt man die Labels per TypoScript, aber wie? Die Abweichung von der “Norm” sind folgende:
- die Extension tipafriend hat schon TyposCript-Konfiguration, diese steht aber anstatt in plugin.tx_tipafriend_pi1 einfach nur in plugin.tipafriend
- meine Erweiterungsextension heißt np_tipafriend_ext, die Klasse heißt aber ux_tx_tipafriend, die ursprüngliche Klasse heißt tx_tipafriend
- meine Erweiterungs-Klasse liegt nicht in einem pi1 Ordner

Dann hatte ich alles ausprobiert, mit ux_tx_tipafriend_pi1, mit tx_nptipafriendext, mit ux_tx_tipafriend, sogar die Variation von _LOCAL_LANG ohne Unterstrich am Anfang.
Die Lösung ist einfach (wenn mans weiß): Es gab ja schon Plugin-Konfiguration in TypoScript für die ursprüngliche Erweiterung, diese musste man nur noch um die Sprach-Labels erweitern, also:

  1. plugin.tipafriend._LOCAL_LANG.de.formComment = Wenn Sie diese Seite als Link an eine(n) Freund(in) oder eine(n) Kollegin/en versenden möchten, füllen Sie bitte die unten stehenden Felder aus.

Ach ja, hier sind ein paar 08/15 Beispiele:

  1. plugin.tx_newloginbox_pi1._LOCAL_LANG.de.oLabel_header_logout = Sie haben sich abgemeldet
  2. plugin.tx_indexedsearch._LOCAL_LANG.de.pi_list_browseresults_page =
  3. plugin.tx_indexedsearch._LOCAL_LANG.de.res_size = Relevanz:

Anpassungen am kb_mahjongg

Geschrieben in typo3 von natalia am 8 Februar 2008

Beim Spiel kb_mahjongg soll die Auswahl der Tilesets und Layouts nicht angezeigt werden, vielmehr ist nur ein Spiel möglich. Es müssen aber zwei Variablen gesetzt werden, nämlich die Tileset-ID und die Layout-ID. Da musste ich zu einem blöden Mittel zurückgreifen – das Pfuschen im Quellcode. In der Datei pi2/class.tx_kbmahjongg_pi1.php habe ich vor den ganzen Abfragen einfach folgendes eingefügt:

  1. $this->layout_uid = intval($this->piVars['layout']);
  2. $this->tileset_uid = intval($this->piVars['tileset']);
  3. /* NEU */
  4. $this->layout_uid = $this->conf['layout_uid'];
  5. $this->tileset_uid = $this->conf['tileset_uid'];
  6. /* bis hier */
  7. $this->layouts = $this->funcs->getLayouts();
  8. $this->tilesets= $this->funcs->getTilesets();

Jetzt muss man im Template-Setup die Variablen einfügen:

  1. plugin.tx_kbgamemahjongg_pi2.layout_uid = 1
  2. plugin.tx_kbgamemahjongg_pi2.tileset_uid = 1

Damit startet man mit dem Default-Tileset.

Nun soll ein neues Tileset und ein neues Layout dazukommen, ein möglichst einfaches. Dazu kopiere ich das Default-Tileset, füge es neu ein (neue ID z.B. 2) und benenne einige Sachen um, vor allem ändere ich die Datei, aus der das eingelesen wird. Das gleiche mache ich mit dem Layout.

Dann will ich ein einfaches Spiel machen, nur mit 60 Steinen anstatt mit 144. Dazu müssen im Layout und im Tileset Anpassungen vorgenommen werden. Zunächst bearbeite ich das Tileset: alles entfernt bis auf circle_1 bis circle_5, character_1 bis character_5 und bamboo_1 bis bamboo_5. Das sind insgesamt 60 Steine. Das Layout muss auch entsprechend angepasst werden, sonst wird das Spiel nicht gestartet. In der ersten Ebene liegen 8 x 5 Steine, dann mittig darauf ein Block aus 4 x 5 Steinen, das sind auch 60. Die Layoutdatei sieht wie folgt aus: 0 2 0, 0 4 0 bis 0 16 0, 2 2 0, 2 4 0 bis 2 16 0 etc. bis 8 16 0. Das ist die erste Ebene. In der zweiten stehen Zahlen 0 6 1, 0 8 1, 0 10 1, 0 12 1 etc. bis 8 12 1.

Die Dateien dann abspeichern und dem Layout und Tileset entsprechend neu zuweisen. Jetzt fehlt nur noch die TypoScript Konfiguration für das Spielfeld. Die einfachste Variante ist, die default Werte zu kopieren. Wenn Layout und Tileset beide z.B. easyLayout bzw. easyTileset heißen, dann reicht folgendes im Template:

  1. plugin.tx_kbgamemahjongg_pi2.easyLayout < plugin.tx_kbgamemahjongg_pi2.default
  2. plugin.tx_kbgamemahjongg_pi2.easyLayout.easyTileset < plugin.tx_kbgamemahjongg_pi2.default.default

Step Basic

Geschrieben in choreos von natalia am 7 Februar 2008

gemacht am 8.2.2008 im Just Fit Amsterdamer Straße
Das Step wird längs vor die TN gestellt, man beginnt an der kurzen Seite. Das war schonmal ungewöhnlich und Spaß gemacht hat es auch.

Block A:
8 ZZ – Chacha mit rechts li am Step vorbei, Basic li am anderen kurzen Ende
8 ZZ – Chacha zurück mit links, Basic re
8 ZZ – L-Step
8 ZZ – 2 Leg Curl

Block B:
8 ZZ – 8 Marches (nach vorn über das Step, auf 5 mit dem rechten Fuß vorn auf den Boden, auf 7-8 öffnen)
8 ZZ – 2 Kicks Straddle
8 ZZ – Basic, zur linken Seite ab; Knee Lift
8 ZZ – Knee Lift mit Sprung, dabei zurückkommen, Knee Lift am Platz

Block C:
8 ZZ – Basic Lunge zur Seite
8 ZZ – 2 V-Step (mit Drehung)
8 ZZ – 2 Side Leg Lift “verschmelzen” (li Fuß vor re auf Step abstellen)
8 ZZ – Mambo, Arme schwingen, Flieger

Aufbau Block A:
Tap Ups im Wechsel, dann zweimal jede Seite, zur Seite öffnen zum L-Step, L-Step mit Curl, Knee, Curl; Leg Curls dazu, dann halbieren zum L-Step und 2 Curl; 4 Chacha dazu (zum üben so viel), dann 2 Chacha pro Seite und 2 Basic, schließlich Chacha und Basic umstellen

Aufbau Block B:
Knee Lift im Wechsel; Basic, 3 Knee Lift im Wechsel; Marches und Kicks davor einfügen; auf dem Step marchieren, Kicks, Basic, Knee Lift; mit dem Basic zur Seite ab mit Knee Lift zurück; die Marches auf 7-8 öffnen, Kick im Straddle, mit dem Basic zur Seite ab, Knee Lift zurück; nach vorn marchieren, auf 7-8 Straddle; letze Änderung auf 5 hinten runter

Aufbau Block C:
Flieger im Wechsel; 2 Tap Ups, Mambo, Flieger als Block im Wechsel; 4 Basic davor einfügen; aus den 3. und 4. Baisc V-Step machen; die ersten zwei Basics zum Basic Lunge ändern; aus den Tap Ups Side Leg Lift machen; die verschmelzen Variante einführen; V-Step mit Drehung versehen

Step Basic

Geschrieben in choreos von natalia am 7 Februar 2008

von Nadine im Just Fit vom 06. Februar 08

Block A
8 ZZ – Knee Lift Straddle
10 ZZ – Flamenco (double Stomp re und li, hinteren Fuß mit aufs Step, Arme nach oben)
6 ZZ – Six Point Mambo
8 Zz – Repeater Knee (Knee, rüber Knee, zurück Knee)

Block B
16 ZZ – 2 Taps nach vorn, 1/2 Basic Straddle gedreht, Taps aufs Step von außen, 1/2 Basic zurück
8 ZZ – 2 Mambo
8 ZZ – Repeater (Knee, Tap mit Ferse, Knee)

Block C
8 ZZ- Mambo, Pivot Turn
8 ZZ – 2 Tap Up n Down
8 ZZ – Saturday Night (rauf, Bein re zur Seite, Arme einer hoch, einer seit, li Bein zur Seite, Arme andersherum, runter)
8 ZZ – Repeater Knee