Archiv für die Kategorie ‘Entwicklung’

  • CSS Compressor - PHP-Klasse

    Für momentane Arbeiten an einem Projekt habe ich gerade eine PHP-klasse erstellt, die schnell, einfach und effektiv CSS-Dateien komprimiert. Als kleines Weihnachtsgeschenk stell ich sie hier für alle frei zur Verfügung, ist ja auch kein Hexenwerk. Viel Spaß damit, Nutzung ist uneingeschränkt.

    final class CSSCompressor {
    	public static function compressFile($filepath,$removeComments=false){
    		if(file_exists($filepath)){
    			$fgets = file_get_contents($filepath);
    			return self::compressContent($fgets,$removeComments);
    		}
    	}
     
    	public static function compressContent($content,$removeComments=false){
    		$fgc = str_replace(array("\r","\n","\t",'  '),'',$content);
    		$fgc = str_replace('; ',';',$fgc);
    		$fgc = str_replace('}',"}\r\n",$fgc);
     
    		if($removeComments===true) {
    			$fgc = preg_replace('/(\/\*.*\*\/)/mi','',$fgc);
    		}
     
    		return $fgc;
    	}
    }
  • nanum CMS - Screenshots

    Nach den vielen Anfragen wegen des nanum CMS habe ich heute mal ein paar Screenshots gemacht. Es sind nicht alle Funktionen gezeigt, aber die allermeisten. Viel Spaß beim Anschauen.

    Die Preise für die Nutzung des CMS variieren, für Schüler gibt es aber Ermäßigungen. Wer sich mal ein Angebot einholen will, kann mir einfach ne Mail schreiben.
    Bitte entschuldigt diese doofen Rahmen, die man teilweise sieht, habe es verpennt in Photoshop auszuschalten, aber es sollte ja nun weniger stören ;).

    Die Bilder:

  • JavaScript im Hintergrund ausführen - Web Worker

    Workers, genauer noch Web Workers heißen sie und sind eine neue Technologie in Sachen JavaScript. Eine Implementierung seitens IE ist noch nicht vorhanden, ist aber früher oder später zu erwarten. Der Firefox beherrscht sie ab Version 3.5, der Seamonkey ab Version 2. Doch was ist ein Worker und wie funktioniert er?

    Der Worker an sich ist eine JavaScript-Klasse. Der Constructor lädt eine JavaScript-Datei im Hintergrund, wie folgt:

    1
    
    var myWorker = new Worker('src/javascript-file.js');

    Das tolle am Worker ist, dass er einfach im Hintergrund geladen werden kann und dort dann ausgeführt wird. Der Sinn eines Workers besteht also darin Hintergrundaktionen zu verarbeiten. Der effektive Sinn bzw. das Ziel von Workern ist aber eine bessere Strukturierung von Code. Während der Worker bspw. Berechnungen durchführt oder andere Algorithmen laufen lässt, bearbeiten die ganz normal implementierten JavaScript-Dateien bspw. den DOM oder Werten Rückgaben des Workers aus.

    Wichtig zu wissen: Komplexe mathematische Berechnungen blockieren nicht mehr die Website wenn Sie als Worker ausgeführt werden.

    Zum Verständnis des Prinzips habe ich ein kleines Schema erstellt:
    JavaScript Worker Schema



    Das heißt, das “Standard-JavaScript” und die Worker kommunizieren untereinander - und zwar mit einer ganz bestimmten Schnittstelle.
    Mit onmessage definieren wir die Funktion die aufgerufen wird, wenn der Worker mit uns reden will, der Worker also etwas sendet.

    1
    2
    3
    4
    
    var myWorker = new Worker('src/javascript-file.js');
    myWorker.onmessage = function(event){
      alert('Worker meldet: '+event.data);
    }

    Doch wie reden wir mit dem Worker? Schließlich wollen wir ihm Aufgaben geben. Das geschieht noch einfacher als das Empfangen:

    1
    
    myWorker.postMessage('Rede mit mir!');

    Ok, nun kommunizieren wir mit dem Worker. Doch woher weiß der Worker selbst, dass wir mit ihm reden? Die onmessage-Funktion gibt es hierzu zweimal. Einmal im eigentlichen Script (siehe oben) um Daten zu empfangen. Desweiteren aber natürlich auch im Worker (javascript-file.js) selbst:

    1
    2
    3
    4
    5
    
    onmessage = function(event){
      if(event.data == 'Rede mit mir!'){
        postMessage('Hier bin ich, der Worker persönlich!');
      }
    }

    Natürlich kann der Worker auch Fehlerbehandlung. Ich persönlich wollte euch das Thema kurz und bündig näher bringen, für mehr Informationen dienen die Links unten. Der Worker ist an sich eine tolle neue Implementierung in JavaScript, funktioniert aber bisher nur in Firefox, Safari und ähnlichen neuen/modernen Browsern (Webkit, Gecko).

    Für mehr Informationen über den Worker und seine Möglichkeiten einfach mal folgende Quellen anklicken:
    https://developer.mozilla.org/En/Using_web_workers
    http://ejohn.org/blog/web-workers/
    http://www.phphatesme.com/blog/webentwicklung/arbeitstier-browser-web-workers/

  • ISPEM Verschlüsselung - Aktualisierung, Sicherheitsupdate

    Ich habe bereits einmal über die ISPEM-Methode zur Verschlüsselung von Passwörtern berichtet. Dank einem aufmerksamen Leser wurde ich auf ein kritisches Leck aufmerksam gemacht. Dies fiel mir nicht auf, da ich in der Zwischenzeit bereits eine verbesserte ISPEM-Verschlüsselung programmiert und in meine Projekte implementiert hatte.

    Wer irgendwo ISPEM implementiert hat muss dringend das Update auf das neue ISPEM durchführen (siehe Code-Abschnitt unten)

    Was ISPEM ist und wodurch es sich auszeichnet findet ihr im Beitrag ISPEM-Verschlüsselung.

    Hier das sichere Script:

    define('ISPEM_FCONST_SPL','your_unknown_value1',true);
    define('ISPEM_SCONST_SPL','your_unknown_value2',true);
     
    function ISPEM_encrypt($clear_password){
       $cr	= str_rot13($clear_password);
       $cr  = base64_encode(ISPEM_FCONST_SPL.'!'.$cr);
       $cr  = substr(md5('::/'.$clear_password.'/::'.ISPEM_SCONST_SPL),0,13).md5($cr.strlen($clear_password));
     
       return $cr; #liefert 45-Charakter-String, sehr sicher
    }
  • Mozilla Prism - doch kein AIR-Konkurrent

    Prism Mozilla Firefox ExtensionDie Tage wurde es mal wieder Zeit zu schauen, was Mozilla so arbeitet, schließlich werden sie dafür bezahlt (ja auch Open-Source-Entwickler müssen nicht auf der Straße leben). Viel neues gabs nicht, bis auf eine neuere Version von Prism, das mittlerweile nahtlos in Firefox integriert werden kann, betriebssystemunabhängig. Vor einigen Monaten übte ich Kritik an Prism, als ein sehr schlechter AIR-Abklatsch, doch mittlerweile kristallisiert sich heraus, dass Prism das gar nicht ist und gar nicht sein will.

    Das Prinzip ist grundsätzlich dasselbe: AIR und Prism ermöglichen Webapplikationen direkt vom Desktop aus bzw. im Desktop zu starten. Doch es gibt einen wesentlichen Unterschied bei den beiden Plattformen:  Adobe’s AIR ist sehr sehr mächtig und lässt Entwickler tatsächlich echte, eigenständige Applikationen erstellen, die aufs OS zugreifen kann. Man kann solch eine Applikation dann runterladen und installieren ähnlich wie wenn man unter Windows mit einer .exe oder unter Linux mit einer .deb installiert.

    Prism geht jedoch einen anderen Weg: Alles was per Browser zugänglich ist kann zur Applikation gemacht werden. Das Prinzip ist super-simpel: Eine Art superabgespeckter Firefox läuft in Prism. Ist man nun auf einer Seite wie bspw. Google Mail, fügt man diese als Applikation einfach in Prism hinzu - nun kann man Google Mail direkt mit einer Verknüpfung auf dem Desktop starten. Dabei wird ein Prism-Fenster geöffnet in dem Google Mail läuft (genau wie im Browser auch). Der Riesenvorteil: Keine Browserabhängigkeit und die erweiterte Schnittstelle für Entwickler in Prism.

    Wenn ihr nun Google Mail laufen habt in Prism, gerade surft und den Firefox schließt, ist euer Prism-Fenster trotzdem noch da. Prism ist also eine Art Browser für Dinge die ständig da sein sollen.

    Es ist etwas schwer zu erklären, aber umso leichter zu bedienen, wenn man es heruntergeladen hat (am besten als Firefox-Erweiterung). Probiert es doch mal aus. Ich persönlich nutze es bspw. für Streamdrag und kann damit die ganze Zeit per SD Musik hören, auch wenn der Browser zu ist ;).

  • nanum Sensory - ein CMS das überzeugt

    nanum Sensory LoginfensterSeit vielen Monaten schon arbeite ich an an einem neuen innovativen CM-System für kleine bis mittlere Websites. Zum Einsatz kommt dabei mein eigenes PHP-Framework Senso (daher auch nanum Sensory).

    Das CMS wurde mittlerweile fertiggestellt und gilt nun als final in der Version 1.05.

    Folgende Grundfunktionen sind im CMS verankert:

    • Inhalte einfach verwalten
    • News- / Blog-System
    • Bildergalerien erstellen und verwalten

    Weitere Funktionen / Eigenschaften des Systems sind:

    • sehr  einfaches, intuitives Interface
    • stark AJAX-orientiertes System
    • Drag’n'Drop - Systeme
    • Profileinstellungen / Themaauswahl
    • Benutzerverwaltung (für Admins)
    • Dateiuploads mit Typ-Erkennung
    • selbstauflösendes Update-System um das System aktuell zu halten
    • Pluginsystem für Entwickler: Filter- und Standalone-Plugins können nathlos integriert werden

    Das CMS baut sehr stark auf Sicherheit auf. Neue Sicherheitssysteme verhindern Datenklau (Loginklau) oder Bruteforce-Logins. Nach 5 falschen Login-Versuchen gibt es eine Zeit-Sperre für den entsprechenden Nutzer. Das System ist sehr gut geeignet für private Seiten und mittlere Firmenwebsites.

    Das nanum CMS wird wie auch schon das alte CM-System nur intern vertrieben. Bei Interesse reicht eine E-Mail an mich, dann können wir über Möglichkeiten der Nutzung reden. Ich würde mich freuen.

  • PHP: 1 ist nicht true

    Wir kennen sie alle, if-Konstruktionen. Doch in PHP sind manche Abfragen schon recht eigenwillig und ergeben nicht das, was man eigentlich haben möchte.

    Beispiel:

    1
    2
    3
    
    if('hallo'==1){
      //ergibt true, komisch oder?
    }

    Um das zu verhindern gibt es die Typen-Kontrolle. Die Typen-Kontrolle in PHP vergleicht 2 Parameter und erwartet auf beiden Seiten exakt die selben Werte. Das funktioniert mit 3 Gleichzeichen.

    1
    2
    3
    
    if('1'===1){
      //ergibt false, da '1' ein String und 1 ein Integer ist
    }

    hingegen

    1
    2
    3
    
    if('1'==='1'){
      //ergibt true
    }

    . Somit ist eine genaue Typenprüfung in PHP problemlos möglich und unnötige Fehlersuchen werden verhindert.

  • PHP-Dateien unbemerkt direkt online bearbeiten

    Jeder kennt es: Es stehen marginale oder nur passiv große Änderungen an einem Projekt an, bei sich selbst oder bei einem Kunden und man hat die Dateien irgendwo im entferntesten Backup überhaupt. Die Dateien direkt online zu bearbeiten z.B. über einen Editor, der FTP unterstützt, kommt für viele nicht in Frage, da Fehler bei Änderungen sofort für den Nutzer sichtbar werden.

    Doch die Lösung für das Problem ist richtig einfach - eine GET-Variable! Wie? So:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    function tuwas(){
     echo 'Hallo Welt!';
    }
     
    function tuwas2(){
     echo 'Ich arbeite gerade an dieser Datei';
    }
     
    if(isset($_GET['devOnly'])){
     tuwas2();
    }else{
     tuwas();
    }

    Wenn ihr nun die entsprechende Datei mit dem Parameter &devOnly aufruft bekommt ihr die veränderte Version zu sehen. Einfacher geht’s echt nicht!

  • IPv6 - Application fail

    Wir brauchen IPv6 - auf der IPv6-Konferenz kam das klar zum Ausdruck. Doch die wichtigste Frage ist ja eigentlich: Warum stellen wir nicht um - jetzt und sofort? Diese Frage ist berechtigt. Die Erklärung ist nicht ganz so einfach. Ein anschauliches Beispiel habe ich jedoch gefunden: Elektroautos. Sie sind die PKWs der Zukunft und doch gibt es sie noch nicht einmal zu verkaufen, zumindest keine Serienmodelle. Das Problem liegt also an der Umstellung. Während es bei Elektroautos ein Riesenaufwand ist, die Welt so umzustellen, dass wir Benzin links liegen lassen können, ist es bei IPv6 der Aufwand der globalen Umstellung. Wenn nicht jeder mitspielt gibt es Chaos.

    Weiterlesen »

  • onMouseLeave - Workaround mit onmouseover

    Viele verzweifeln daran: ein eigenwilliges onmouseout, hier onmouseleave genannt. Falsche onmouseout-events

    Man hat eine fixe DIV-Box mit diversen Inhalten und will im Bezug auf die gesamte Box ein onmouseleave haben. Man codet also die Box, fügt hier und da ein paar Links ein und stellt am Ende fest, dass wenn man der Box ein onmouseout-Event zuweist, dass man nicht nur ausserhalb, also rund herum, das Event getriggert bekommt, sondern auch, wenn man innerhalb der Box ein anderes Element berührt. Das passiert, wenn man für diesen Zweck falsch gecodet hat. Da auch ich jedoch nicht nochmal von vorne anfangen wollte, um das Problem anders anzugehen, habe ich mir einen sehr sinnvollen Workaround erstellt, den ich bisher so noch nirgends gesehen habe und mit euch teilen möchte.

    Weiterlesen »