Archive for the ‘ DEVELOPMENT ’ Category

Elgg Community 1.8.2 rewrite rules for Nginx

Leider ist der Eintrag nur auf English verfügbar.

Codeschnipsel: Cross-Browser CSS3 Box-Shadow

Wie man einen Cross-Browser CSS3 Box-Shadow erstellt.
Benutze -moz für Mozilla, -webkit für Chrome und Safari und -o für Opera:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  -o-box-shadow: 10px 10px 10px #000; /* Opera */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

Kombinierte AND / OR Conditions mit mit TypoScript erstellen

Oft kommt es vor das man auf bestimmten Typo3 Seiten-IDs speziellen TypoScript Code einfügen möchte, der sich von anderen Seite unterscheidet.
Für diesen Fall gibt es in TypoScript Conditions. So hatte ich diese Woche den Fall das ich auf zwei bestimmten Seiten jeweils ein Dojo-Modul einbinden und ausführen wollte, aber auf allen anderen Seiten diese Module aus Performance Gründen nicht eingebunden werden sollten – die Dojo-Einbindung aber nicht fehlen sollte.
Für diesen Fall brauchte ich eine Condition mit zwei ‚ungleich‘ / ‚!=‘ Bedingungen, die ich mit einem ‚logischem UND‘ / ‚AND‘ verknüpfe.
Das Resultat ist das folgende TypoScript:

[globalVar = TSFE:id = 3]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Collection");
        dojo.requireLocalization("mop", "collection");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Collection.create("./fileadmin/templates/collection.php", "content_main_full", "subNavi");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id = 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Slider");
        dojo.requireLocalization("mop", "slider");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Slider.create("./fileadmin/templates/slider.php", "sliderCampaign");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id != 3] AND [globalVar = TSFE:id != 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
        
        dojo.addOnLoad(function() {
          startUp();
        });
      </script>
    )    
  }
}
[global]

Typo3 pageID mit TypoScript für JavaScript zur Verfügung stellen

Manchmal ist es notwendig, die aktuelle pageID von Typo3 innerhalb einer Website für JavaScript-Aktionen und oder ähnliches verfügbar zu haben.
Mit dem folgenden kleinem Wrap ist dies leicht möglich:

page.bodyTagCObject = HTML
page.bodyTagCObject.value.field = uid
#page.bodyTagCObject.value.wrap = <body id="pageID_|">
#page.bodyTagCObject.value.wrap = <body onload="sendPageIdToAnyFunction(|)">
page.bodyTagCObject.value.wrap = <body onload="alert(|)">

Das Dojo-Toolkit mit TypoScript in Typo3 integrieren

Wenn Du das Dojo Toolkit in Typo3 benötigen, brauchen Sie nur die folgenden paar Zeilen TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
 
  # Dojo-Libraries
  file3 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js
  file3.external = 1
  file3.type = text/javascript
}

 
In diesem Fall habe ich die Dojo-Konfiguration in einer separaten JavaScript-Datei:

var djConfig = {
  parseOnLoad: true,
  locale: 'de'
};

 
Aber Achtung, wie Du sicher weißt muss die Konfiguration vor der Dojo-Bibliothek integriert werden. Daher hat die ‚file‘-Variable geringere Nummer .. 😉

Im nächsten Schritt müssen wir das erforderliche CSS integrieren:

page.includeCSS {
  file2 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css
  file2.external = 1
  file2.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!

Abschließend müssen wir die Dojo-Theme class ’nihilo‘ in den Body-Tag schreiben. Dies kann mit dem nächsten TypoScript vorgenommen werden:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class="nihilo">

 
Und das war’s .. Nun sollten Sie in der Lage sein Dojo in Ihrer Typo3 Website zu nutzen. 🙂

Google Web Fonts mit TypoScript in Typo3 einbinden

Für die Integration von Google Web Fonts in Typo3 brauchst Du das folgende TypoScript:

page.includeCSS {  
  file5 = http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic
  file5.external = 1
  file5.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!
 
Danach kann die Font ganz normal mit CSS deklariert werden:

.webFont {
  font-family: 'Marvel',Arial,Helvetica,sans-serif;
}

Der laufende Mann von Andrew Hoyer – Benutzt nur CSS3 & HTML5

Das ist heiß! 🙂

Der laufende Mann (Andrew Hoyer) auf dieser Seite: http://andrew-hoyer.com/experiments/walking/ , ist nur mit CSS3-Animationen und einfachem HTML umgesetzt. Du kannst hier mehr darüber lesen wie es umgesetzt wurde. Teste dieses Experiment auch auf einem iPhone, iPod oder iPad (oder Android-Gerät). 😉

Klettere die Leiter der Abstraktion hoch und runter

..ein systematischer Ansatz zur interaktiven Visualisierung.

Lese mehr unter http://worrydream.com/#!/LadderOfAbstraction  vonBret Victor.

Das ist ein wirklich großartiger Artikel, und pures JavaScript und HTML5: Also unbedingt lesen!! 😉

Flow3, das neue Framework mit dem auch Typo3 5 entwickelt wird

Wow, das ist nett..

Gerade eben habe ich mir eine Video-Einführung zu Flow3 angesehen, und ich muss sagen es gefällt mir richtig gut. Absolute neue Technik, Methodiken und Programier-Paradigmen. Es ist alles komplett Objekt-Orientiert und es wird beispielsweise Aspekt-Orientierte Programmierung, Domain-Driven Design und vieles mehr angewandt. So muss es sein, da macht entwickeln erst richtig Spass 🙂

So, ich mache nun hier Schluss und erstelle mein erstes Flow3-Projekt. Also, bleibt dran und lest hier meine nächsten Artikel zu Flow3, die ganz bestimmt kommen werden 😉

Meine Lieblings 500 Internal Server Error Seite ;)

Meine Lieblings 500 Internal Server Error Seite 😉