Selbstportrait – Nikkor AF-S DX 35mm f1.8 Keine Kommentare
Heute hab ich mein neues (gebrauchten) Nikkor 35mm f1.8 abgeholt. Dank fehlender Motive habe ich mal zwei Portraits von mir geschossen. Kamera war meine Nikon D50 mit 6 Megapixeln ;)
Versteckten Layer sichtbar machen Keine Kommentare
Irgendwann ist dieser Artikel mal abhanden gekommen. Trotzdem gibt es noch eine Menge Leute die über andere Seiten und Google auf diesen Artikel stoßen. Also schreib ich nochmal kurz das Wichtigste auf.
Als Erstes kommt das Javascript. Wir holen uns das Button-Element (kann ein Link oder sonstwas sein) und unser DIV, dass wir abwechselnd bei jedem Klick anzeigen und verstecken lassen wollen. Das bewerkstelligen wir indem wir abfragen, ob das DIV-Element sichtbar ist oder nicht und entsprechend die Sichtbarkeit verändern
1 2 3 4 5 6 7 | init = function() { var button = document.getElementById('buttonID'); var div = document.getElementById('divID'); button.onclick = function() { div.style.display = div.style.display!="none"?"none":"block"; } } |
Und dann fehlt noch der HTML-Teil:
1 2 3 4 5 6 | <body onload="init()"> <input type="button" id="buttonID" value="klick mich" /> <div id="divID"> Versteck mich! </div> </body> |
Mit jQuery sieht der Javascript-Teil übrigens folgendermaßen aus:
1 2 3 4 5 | $(document).ready(function() { $('#buttonID').on('click', function(evt) { $('#divID').toggle(); }); }); |
Gemeinsame Jade-Templates für Client und Express Node-Server Keine Kommentare
Wenn man schon eine feine Template-Engine wie Jade nutzt, dann bietet es sich auch an diese nicht nur server-, sondern auch clientseitig im Browser zu nutzen. Man erspart sich so eine Menge an redundanten Code und verringert die Fehlerquellen.
Was wird benötigt?
- Nodejs und npm natürlich
- Express.js global installiert
- Require.js für euer browserseitiges Javascript
- Die text-Erweiterung für require.js um unsere Jade-Templates im Browser bequem nachzuladen
Nach Download und/oder Installation kann es dann auch gleich losgehen.
Der Server
Mit express eureapp generiert ihr eure Server-Umgebung inklusiver aller Abhängigkeiten.
$ express jade-shared-templates |
Anschliessend öffnet ihr in eurem frisch erstellten Ordner die Datei app.js und verändert den Pfad für die views in __dirname + ‘/public/templates’). Natürlich solltet ihr dann auch den entsprechenden Unterordner in public/ erstellen.
14 15 16 17 | app.configure(function(){ app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/public/templates'); app.set('view engine', 'jade'); |
Wenn ihr schon dabei seid erstellt doch gleich euer erstes Template. Nennt die Datei layout.jade und schreibt folgendes hinein:
1 2 3 4 5 6 7 8 9 10 11 | !!! 5 html(lang="en") head script(data-main="/javascripts/requirements.js", src="/javascripts/require.js") body h1 Hallo Welt ul#mylist each zeile in zeilen color = zeile.color content = zeile.content include listitem |
Und dann auch gleich das Zweite namens listitem.jade, dass wie zu sehen ist durch layout.jade aufgerufen wird:
1 | li(style="background-color: #{color}") #{content} |
Jetzt entsprechend das Template mit ein paar Beispieldaten in app.js rendern lassen
30 31 32 33 34 35 36 | app.get('/', function(req, res){ res.render('layout', { zeilen: [ {color: '#aaa', content: 'Zeile Server 1'}, {color: '#bbb', content: 'Zeile Server 2'}, {color: '#ccc', content: 'Zeile Server 3'} ]}); }); |
Dann probehalber die Express-App mit npm start ausführen und im Browser http://127.0.0.1:3000 aufrufen. Ihr solltet ein Hallo Welt sehen.
War das erfolgreich, dann geht es jetzt daran, den Client vorzubereiten.
Der Client/Browser
Zunächst kopiert ihr die Datei jade.min.js oder jade.js aus dem Ordner node_modules/jade/ in euren Ordner public/javascripts/. Das Gleiche macht ihr mit den heruntergeladenen Dateien require.js und text.js. Außerdem erstellt ihr noch eine Datei requirements.js.
Euer javascripts/ Ordner sollte nun so aussehen:
Wer sich noch nicht mit require.js auskennt sollte sich unbedingt die Webseite anschauen und sich von den Vorteilen überzeugen lassen ;)
Als nächstes öffnen wir die neu erstellte requirements.js und fügen folgende Zeilen hinzu:
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 | requirejs(['jade'], function() { // Wir laden das Template fuer unsere Liste requirejs(['text!/templates/listitem.jade'], function(listitem) { // Wir kompilieren das Template - es entsteht eine Funktion var compiledLine = jade.compile(listitem); // Ein paar Zufallszeilen var myLines = [ {color: '#a44', content: 'Zeile Client 3'}, {color: '#4a4', content: 'Zeile Client 4'}, {color: '#44a', content: 'Zeile Client 5'} ]; var mylist = document.getElementById('mylist'); // Wir befuellen die Liste for(var i=0; i < myLines.length; i++) { // Wir wenden das kompilierte Template an mit dem Objekt der // entsprechenden Zeile und haengen es an #mylist var lineDOM = compiledLine(myLines[i]); mylist.innerHTML+= lineDOM; } }); }); |
Wir schauen nochmal in den Browser:
Und sehen, dass es wunderbar funktioniert. :)
Download jade-shared-templates auf Github (Vor dem Starten npm install nicht vergessen)
Luxa2 H4 – iPad Ständer für iPad und Tablets 2 Kommentare
Ein schönes Angebot habe ich am Montag auf Schnäppchenfuchs.de gefunden. Gleich mal bestellt und heute ist der iPad-Halter eingetroffen. Schöne Sache für den Schreibtisch um seine Twitter-Timeline zu verfolgen oder Videos zu schauen und und und. Der Desktop ist bei mir eben doch regelmäßig überfüllt ;) Aber das gute Stück macht eben auch was für Präsentationen her. Drehen, neigen funktioniert wunderbar und dazu auch noch schön robust und wertig!
Die Frage ist natürlich, ob man so ein Helfer braucht … ich würde mal “nein” sagen – aber nice to have auf jeden Fall :)
Hagelsturm und Gewitter in Rostock am 18.06. 2012 (Video) 1 Kommentar
Das war mal ganz ordentlich ;)
Mit python SimpleHTTPServer Ordner unter OS X freigeben 1 Kommentar
Eben brauchte ich mal schnell einen HTTP-Server der einfach nur ein paar HTML-Dateien zum testen bereitstellt. Unter OS X ist das gar kein Problem und innerhalb von einer Minute geschehen.
Einfach das Terminal öffnen und in den freizugebenden Ordner navigieren mittels
cd /zu/deinem/pfad |
und anschliessen den Server starten
python -m SimpleHTTPServer 8080 |
Et voilà! Über http://localhost:8080 könnt ihr die Dateien erreichen ;)
RED5 1.0 RC2 unter OS X Keine Kommentare
Der Red5-Server wollte bei mir in der neuesten Version nicht so recht. Der Versuch den Server per Doppelklick zu starten schlug ohne Rückmeldung fehl … also der Versuch via
1 2 3 4 | $ cd /Applications/Red5.app/Contents/Resources/Java/ $ sh red5.sh </code> Ebenfalls ohne Erfolg aber mit folgender Fehlermeldung: <code>Exception org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'red5.common' defined in class path resource [red5.xml]: Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.springframework.context.support.FileSystemXmlApplicationContext]: Constructor threw exception; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'mbeanExporter': Instantiation of bean failed; nested exception is java.lang.NoClassDefFoundError: org/springframework/aop/TargetSource |
Der Punkt, an dem das Ganze schief läuft konnte ich letztendlich in der red-common.xml unter /Applications/Red5.app/Contents/Resources/Java/conf/ lokalisieren. Durch entfernen der Zeile 50:
1 | <context:mbean-export registration="replaceExisting" default-domain="org.red5.server"/> |
startete der Server über das Terminal dann ohne Probleme (per Doppelklick funktioniert es weiterhin nicht!!)
Harzer Schmalspurbahn 1 Kommentar
Wahrscheinlich eines der am häufigsten aufgenommenen Motive von Harzurlaubern :)
Nikon D50 + Nikkor 50mm 1.8 5 Kommentare
Viele Worte will ich eigentlich nicht verschwenden. Nachdem ich die Spiegelreflexfotografie pausiert habe und mich von allem getrennt hatte was ich so besaß, habe ich jetzt einen kleinen Neueinstieg gestartet. Fotografie sollte nicht so gezwungen sein. Das fängt dabei an, unbedingt die beste Ausrüstung haben zu müssen und dann auch in allen möglichen Situationen zum Fotografieren “verdonnert” zu werden. Nun fange ich (wieder) klein an. Mit einer 6 Megapixel-Kamera und einer schönen Festbrennweite für wenig Geld :)
Hier mal die ersten Schnappschüsse:
