Schnee Schnee Katze Keine Kommentare

KatzeKatzeKatze

Selbstportrait – Nikkor AF-S DX 35mm f1.8 Keine Kommentare

Selbstportrait LundnerSelbstportrait Lundner
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?

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:
express_js_folder

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:
jade_template_fertig

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
&lt;context:mbean-export registration="replaceExisting" default-domain="org.red5.server"/&gt;

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 :)

Harzer SchmalspurbahnHarzer Schmalspurbahn

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:

nächste Seite