Divx, jQuery und der IE9

Veröffentlich am | 8. März 2012 | Keine Kommentare

Da muss man auch erstmal drauf kommen. Beim Testen von Änderungen eines Kundenauftritts funktionierten plötzlich die Ajax Requests für ein paar, via jQuery eingebundenen Skripte nicht mehr, natürlich nur im Internet Explorer 9. Zuerst dachte ich, ok, wird wohl irgendwo ein Scriptfehler im jQuery Code sein, ich habe dort aber keinen gefunden, nur eine lustige Fehlermeldung:

SCRIPT65535: Invalid calling object

Beim googeln stieß ich dann auf den Hinweis, dass DivX Plugins für den IE9 hier zu Fehlern führen. Sobald man diese deaktiviert und dann den Internet Explorer neu startet, läuft auch alles wieder wie erwartet. Da könnte man Stunden beim debuggen verlieren.

IE8, HTML5 und Fancybox

Veröffentlich am | 29. Februar 2012 | Keine Kommentare

Tja, der liebe IE8 kann halt auch nicht mit HTML5, wenn man Fancybox verwenden möchte. Das kann jetzt natürlich auch am modernizr liegen, dass eben Inhalte, die per Ajax nachgeladen werden, nicht mehr für die alten IE Versionen modifiziert werden.

Ich werde wohl mal mit innerShiv beschäftigen, vielleicht läuft es dann ja wie gewünscht. So lange aber werde ich nachladbare Inhalte lieber noch ohne HTML5 Elemente erstellen.

Wenn ich dann noch einen Wunsch frei hätte, würde ich mir wünschen, dass Microsoft dem Internet Explorer die gleiche Silent Update Routine Ihrem Produkt hinzufügt, wie Sie Google schon seit langem für Chrome verwendet. Bedenken ob des Zugriffs auf den Anwenderrechner hin oder her, aber so könnte man gewährleisten, dass alte IE Versionen endlich mal nahezu aussterben würden.

*Update*
innerShiv funktioniert auch mit via Fancybox und Ajax nachgeladenen Inhalten scheinbar einwandfrei. Das hat mir jetzt eine menge Arbeit beim umschreiben von HTML5 zurück zu HTML4.01 oder XHTML1.0 erspart.

Color Match Game

Veröffentlich am | 15. Februar 2012 | Keine Kommentare

Ich habe gestern via Facebook ein nettes Spiel für Designer und Web-Entwickler gefunden, um mal Ihre Farbseh-Fähigkeiten auf die Probe zu stellen. http://color.method.ac/

Auch schön

Veröffentlich am | 2. Februar 2012 | Keine Kommentare

Ich habe gerade bei Twitter in meinen Profileinstellungen mal geschaut, welchen Apps ich so alles Zugriff auf meine Tweets gegeben habe und da ich doch über die Tweet Clouds gestolpert. Sieht immer noch schön aus und das Ergebnis kann auch ganz lustig sein, hat ja schon was von Dadaismus.

Tweet Cloud der letzten drei Monate

Zugriff auf diese Cloud gibt es hier: http://tweetcloud.icodeforlove.com/62781379/539528

Zensur bei Blogger.com

Veröffentlich am | 2. Februar 2012 | Keine Kommentare

Wenn man das so liest, was jetzt auch bei Blogger.com passiert, da bin ich froh, dass ich mein eigenes Blog hoste. Ich meine, wenn zum Beispiel ein Land wie China bestimmte Inhalte, die Ihnen nicht passen als nicht gesetzeskonform deklariert und Google sich dann entscheidet, diese Blogs in dem Land nicht mehr zu Verfügung zu stellen, sind sie lediglich die Erfüllungsgehilfen einer staatlichen Zensur.

Schade eigentlich, gerade weil Unternehmen und Dienste wie Google oder Twitter in Ihrer Position viel mehr macht hätten, Meinungsfreiheit zu unterstützen, weltweit.

Mehr bei Heise: Blogger.com bereitet länderspezifische Sperren vor

Start der Rückrunde

Veröffentlich am | 20. Januar 2012 | Keine Kommentare

Heute mal was anderes. Ich freu mich einfach nur den Start der Bundesliga Rückrunde. Für mich als Ruhrpott-Kind sieht es ja ganz gut aus, so viele Clubs aus dem Sektor mischen oben mit. Als eingefleischter BVB Fan drücke ich den Fohlen aus Gladbach heute die Daumen und hoffe, dass Sie das Spiel 2:0 gewinnen, was auch meiner Platzierung beim Tipp-Kick entgegen kommen würde. Hauptsache die Bayern verlieren drei Punkte und Dortmund gewinnt am Sonntag 3:1 in Hamburg.

Heya BVB.

Zend Server endlich auch für Mac OS X

Veröffentlich am | 19. Januar 2012 | Keine Kommentare

Endlich gibt es den Zend Server (Version 5.6) auch nativ für Mac OS X.

Wenn man, wie ich, auf einem Mac entwickelt, musste man sich immer mit der doch recht ätzenden Installation des Zend Servers für den Mac herumplagen. Ich glaube, ich habe beim ersten Mal locker drei Versuche benötigt, bis ich eine vernünftige Installation hinter mich gebracht habe.

Hier geht es zum Download: Zend Server

Zend Forms mit Ajax versenden

Veröffentlich am | 16. Januar 2012 | Keine Kommentare

Im Netz gibt es ja zahlreiche Artikel zu Zend Forms und wie man diese mit Ajax validiert. Eigentlich alle Treffe via Google, die ich gefunden habe, basieren auf die selbe Lösung und exemplarisch dafür möchte ich hier nur auf eine mögliche Seite, die sich diesem Thema annimmt, verweisen: Ajaxify your Zend Form, validation with jquery.

Da eigentlich alle Seiten die gleichen Codefragmente verwendet haben und man hier noch einen ausführlichen Webcast dazu bekommt, hat mir das Tutorial bei Zendcast zu diesem Thema am besten gefallen. Der Vorteil bei dieser Art der Validierung liegt auf der Hand, das Zend Framework nimmt einem jegliche Programmierung bei der eigentlichen Validierung ab und noch wichtiger, die Validierung an sich bleibt Server-Seitig. Leider fand ich nirgends einen Hinweis darauf, wie man die Form, nach erfolgreicher Validierung dann doch abschicken kann. Viele fragten auf einschlägigen Seiten nach, oft gab es aber nur die Antwort darauf, wie man ein automatisches Submit der Form bei erfolgreicher Validierung verhindert.

Als erstes muss man ganz klassisch eine Form mit Hilfe von Zend_Form definieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class Website_Form_Contact extends Zend_Form {
 
  public function init() {
  $this->setMethod('post');
 
  $surname = new Zend_Form_Element_Text('surname');
  $surname->setLabel('Name');
  $surname->setRequired(false);
  $surname->addFilter('StringTrim');
  $this->addElement($surname);
 
  $givenname = new Zend_Form_Element_Text('givenname');
  $givenname->setLabel('Vorname');
  $givenname->clearFilters();
  $givenname->setRequired(false);
  $givenname->addFilter('StringTrim');
  $this->addElement($givenname);
 
  $email = new Zend_Form_Element_Text('email');
  $email->setLabel('E-Mail');
  $email->setRequired(true);
  $email->addValidator('NotEmpty', false, array('messages' =>; 'Bitte geben Sie Ihre E-Mail Adresse an.'));
  $email->addFilter('StringTrim');
  $this->addElement($email);
}

Natürlich sollte hier mindestes ein Pflichtfeld vergeben sein, sonst gibt es nichts zu validieren und das Formular kann immer versendet werden. In diesem Beispiel ist es das E-Mail Feld $email->setRequired(true);. Jetzt benötigt man noch den Controller und die View, schließlich möchte man das Formular ja sehen und falls es valide ist, soll ja irgendwas mit der Eingabe geschehen.

Der Controller sieht vorerst so aus und macht erst einmal nichts weiter als das Formular anzuzeigen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

class DefaultController extends Website_Controller_Action {
    public function contactAction () {
        $this->disableLayout();
 
        try {
            $request = $this->getRequest();
            $form = new Website_Form_Contact();
 
            $this->view->form = $form;
        } catch (Exception $e) {
            return $e->getMessage();
        }
    }
 
    public function validateformAction() {
        $this->_helper->viewRenderer->setNoRender();
        $this->disableLayout();
 
        $form = new Website_Form_Contact();
 
        if ($form->isValid($this->_getAllParams())) {
            if ($this->_getParam("send-mail") == "true") {
                // etwas machen, Datenbankeintrag erstellen oder E-Mail versenden.
            }
 
            $this->_helper->json(array('success' => 'true'));
        } else {
            $this->_helper->json($form->getMessages());
        }
    }
}

Die zugehörige View könnte dann zum Beispiel so aussehen:

1
2
3
4
5
6
7
8
9
10

<section class="contact-content">
    <form name="ContactForm" id="ContactForm" method="<?php echo $this->escape($this->form->getMethod()); ?>" action="<?php echo $this->escape($this->form->getAction()); ?>">
        <div>
            <?php echo $this->form->givenname . PHP_EOL; ?>
            <?php echo $this->form->surname . PHP_EOL; ?>
            <?php echo $this->form->email . PHP_EOL; ?>
            <?php echo $this->form->submit . PHP_EOL; ?>        
        </div>
    </form>
</section>

Oder einfacher (je nachdem, wie flexibel man beim Layout seien muss oder möchte):

1
2
3

<section class="contact-content">
    <?php echo $this->form . PHP_EOL; ?>
</section>

Als nächstes kommt dann noch, wie bei ZendCast vorgeführt die eigentliche Validierung via Ajax und dem Serverseitigen Mechanismus, der durch Zend Form zur Verfügung gestellt wird. Hierzu werden einige kurze Javascript Funktionen benötigt, die sich in der entsprechenden View befinden und schnell erstellt sind. Ferner werden die Pflichtfelder bereits bei der Eingabe überprüft (.blur()). Das ganze könnte dann ungefähr so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<script type="text/javascript">
    var success = false;
 
    $(function() {
        $("input").blur(function() {
            if ($(this).parent().prev().find('label').attr('class') == 'required') {
                var formElementId = ($(this).parent().prev().find('label').attr('for'));
                doValidation(formElementId);
            }
        });
        $('#ContactForm').submit(function () {
            doValidationAll();
            return false;
        });
    });
 
    function doValidationAll() {
        var url = 'validateform';
        var data = {};
 
        $("dt label").each(function () {
            data[$(this).parent().next().children().attr('name')] = $(this).parent().next().children().val();
        });
        data["send-mail"] = "true";
 
        $.post(url, data, function (resp) {
            if (resp.success) {
                // bei Erfolg dem User irgendein Feedback geben
            } else {
                for (key in resp) {
                    // Fehlermeldungen bei jedem Feld entfernen
                    $("#" + key).parent().find('.errors').remove();
 
                    if (resp[key] != null) {
                        // Fehlermeldung bei jedem nicht erfolgreich
                        // validiertem Feld hinzufügen.
                        $("#" + key).parent().append(getErrorHtml(resp[key], key));
                    }
                }
            }
        }, 'json');
    }
 
    function doValidation(id) {
        var url = 'validateform';
        var data = {};
 
        $("input").each(function () {
            data[$(this).attr('name')] = $(this).val();
        });
 
        $.post(url,data,function(resp) {
            $("#"+id).parent().find('.errors').remove();
 
            if (resp[id] != null) {
                $("#"+id).parent().append(getErrorHtml(resp[id], id));
            }
        }, 'json');
    }
 
    function getErrorHtml(formErrors, id) {
        var e = '<ul id="errors-'+id+'" class="errors">';
        for(errorKey in formErrors) {
            e += '<li style="color:#f90;">' + formErrors[errorKey] +'</li>';
        }
        e += '</ul>';
        return e;
    }
</script>

Es gibt, wie man sehen kann, zwei Funktionen für die Validierung. Zum einen, wie bei den ganzen anderen Tutorials die Funktion doValidation(). Hier wird jedes Feld direkt bei der Eingabe überprüft und sofort das entsprechende Feld mit einer Fehlermeldung markiert, bzw. diese Markierung wieder entfernt, sobald das Feld valide ist. Da man aber sicher nicht schon bei der Eingabe eines an sich validen Formulars dieses automatisch absenden möchte, da vielleicht die Felder, die nicht validiert werden, fertig ausgefüllt sind oder man seine Eingabe noch ändern möchte, habe ich eine zweite, angepasste Funktion (doValidationAll()) implementiert, die zum einen das valide Formular absendet und zum anderen alle Felder gleichzeitig beim drücken des Submit Buttons validiert und entsprechende Fehlermeldungen positioniert. Gleichzeitig ist dieser Teil auch dafür zuständig, alle Daten des validen Formulars an den Controller weiter zu reichen, um dann hier die Daten zu verarbeiten.

Man könnte das ganze sicher noch vereinfachen und vor allem bei Erfolg einen leeren JSON-String zurück geben und anschließend auf einen leeren String testen und so ein paar Zeilen sparen. Sicher könnte man auch aus zwei Controllern nur einen machen, aber das sind dann Feinheiten für das Refactoring.

Jedenfalls hat mit genau dieser Teil bei meiner Suche im Netz gefehlt. Vielleicht hilft es ja Jemandem.

Frohes neues!

Veröffentlich am | 3. Januar 2012 | Keine Kommentare

Ich wünsche Euch allen da draussen eine frohes neues Jahr. Ich bin mal gespannt, was die Webtrends des Jahres 2012 werden und wie sich Google+ im Vergleich zu Facebook entwickeln wird. Ich muss zugeben, dass ich mich derzeit wesentlich seltener bei Google+ als bei Facebook rumtreibe, was wohl daran liegt, das die meisten meiner aktiven Kontakte noch nicht gewechselt haben und wenn doch, dann G+ kaum nutzen.

Und so langsam sollte ich mich um schon relativ großes Schlafdefizit im noch jungen Jahr kümmern.

Neue Seite meines Arbeitgebers

Veröffentlich am | 20. Dezember 2011 | Keine Kommentare

In den letzten Wochen hatte ich kaum kaum Zeit mich groß um irgendwas zu kümmern, was dieses Blog hier anging, da ich beruflich doch ziemlich eingespannt war, zudem hatte ich im November noch zwei Wochen Urlaub, in denen ich Computer eher versucht habe komplett zu meiden. Jedenfalls sind wir jetzt mit einer neuen Unternehmens-Webseite am Start, die man auch unter www.rsk.com findet. Basis des Projekts ist wieder das CMS Pimcore.

Die Seite ist noch nicht ganz fertig. Es fehlen noch einige Kleinigkeiten, die aber wegen eines festen Abgabe-Termins hinten angestellt werden mussten. Alles in allem ist es eine Single-Side-Page, was auch immer man davon halten mag. Optisch hat es sicher Vorteile, von den Ladezeiten sind hier aber Abstriche zu machen. Ach, und irgendwie muss man dann auch noch die Javascript-Verweigerer irgendwie außen vor lassen. Ich muss zugeben, ist nicht so meine Welt, aber na ja, dennoch kann sich das Ergebnis jetzt schon sehen lassen (vor allem im Vergleich zur alten Seite) und reichlich bei gelernt habe ich zwangsläufig auch bei der Umsetzung, vor allem im Bezug auf Ajax.

Nebenbei: Ich habe vorhin mal Testweise Javascript deaktiviert und zu meiner Überraschung sieht man noch erstaunlich viel. Ok, die Funktionsweise der meisten Elemente ist quasi im Eimer, aber immerhin sieht man noch die wesentlichen Inhalte und die auch noch nah am eigentlichen Layout.

Neben dieser Seite gab es natürlich auch noch einige Kundenpräsenzen zu betreuen, so dass für eigene Projekte weder die Zeit noch Lust vorhanden waren. Ich hoffe, im neuen Jahr wird es hier etwas entspannter, denn ich hätte schon gern mal wieder Lust auf ein eigenes Projekt.