eso es mi primer artículo en español. Aprendo español y porque no tengo mucho tiempo para escribir artículos por mi blog he pensado que empiezo escribir artículos en español porque puedo aprender la lengua y compartir en el web.

Mi tema hoy es una recomendación de una página de web que es lo mejor sitio si necesitarás informaciones sobre web development. La página se llama: smashingmagazine.com y allí encuentras…

• recomendaciones sobre wordpress (por ejemplo como usar ajax en wp o algunos themes que se puede usar)
• artículos sobre el design de páginas de web o como usar letras (fonts) que son perfecto por tu proyecto actual
• tools que se puede usar en su proyectos de web por ejemplo para desarrollar más efectivo o más rapido
• que frameworks son los más famosas en el red, como jQuery o plugins para jQuery
• y mucho más

Este página es lo mejor porque dicen que es importante y ponen ejemplos que se puede usar efectivamente. Si tienes tiempo puedes surf más de una semana solo en esta página.

Por final tienen también un libro pero no tengo experiencias porque no lo tengo. Quizás compraré numero 3 del este edición.

La próxima vez escribo sobre un PDF Reader de Windows que se puede usar en Linux perfectamente.

Hasta luego y si encuentras faltas o algo, por favor dímelos!

Zuerst kümmern wir uns um die Zertifikate:

• sucht euch einen beliebigen Ort, z.B. /tmp/test um dort die Zertifikate zu erstellen und erstmal zu speichern
• und los gehts:

  $ sudo openssl genrsa -des3 -out <name>-ssl-cert-private.key 1024
  

  ihr müsst nichts eingeben, außer dem Passwort und das natürlich gut merken!

• ok, dann nehmen wir den erstellten Key und erstellen ein ‘certificate request’:

  $ sudo openssl req -new -key <name>-ssl-cert-private.key -out <name>-ssl-cert-file.pem
  

• und jetzt erstellen wir noch das selbst-signierte Zertifikat:

  $ sudo openssl x509 -req -days 365 -in <name>-ssl-cert-file.pem -signkey <name>-ssl-cert-private.key -out <name>-ssl-server.crt
  

• jetzt müssen die Zertifikate an den richtigen Ort kopiert werden:

  $ sudo cp <name>-ssl-server.crt /etc/ssl/certs
  

  $ sudo cp <name>-ssl-cert-private.key /etc/ssl/private
  

Das wars auch schon fürs Erste.

Apache Konfiguration

• ssl Modul aktivieren:

  $ sudo a2enmod ssl

• jetzt müssen die Ports, auf denen der apache lauschen soll konfiguriert werden, dazu in /etc/apache2/ports.conf den Port 443, den wir nicht wollen auskommentieren und die gewünschten Ports hinzufügen:

  #nur ein Auszug der Datei
  <IfModule mod_ssl.c>
      #Listen 443
      Listen 2000
      Listen 3000
      #und mehr.... oder weniger
  </IfModule>
  

• und jetzt kopieren wir die default-ssl Seite (Konfigurationsdatei), die wir gleich als virtuellen Host nutzen wollen:

  $ sudo cp default-ssl <name>-ssl
  

• jetzt geht heißt es die Datei richtig zu konfigurieren, hier ein Auszug wie eure Datei aussehen könnte. Beachtet die Kommentare:

  <IfModule mod_ssl.c>
  #nicht vergessen!
  NameVirtualHost *:3000
  
  <VirtualHost *:3000>       #port auch hier nicht vergessen
  	ServerAdmin webmaster@localhost
  
  	DocumentRoot /var/www/<name>-ssl   #den Pfad anpassen
  	<Directory />
  		Options FollowSymLinks
  		AllowOverride None
  	</Directory>
  	<Directory /var/www/<name>-ssl>   #den Pfad anpassen
  		Options -Indexes FollowSymLinks MultiViews
  		AllowOverride None
  		Order allow,deny
  		allow from all
  	</Directory>
  
  	ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
  	<Directory "/usr/lib/cgi-bin">
  		AllowOverride None
  		Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
  		Order allow,deny
  		Allow from all
  	</Directory>
  
  	ErrorLog /var/log/apache2/error.log
  	LogLevel warn
  
  	CustomLog /var/log/apache2/ssl_access.log combined
  
  	#   SSL Engine Switch:
  	#   Enable/Disable SSL for this virtual host.
  	SSLEngine on
  
          #
          ##  HIER SIND UNSERE ERSTELLTEN ZERTIFIKATE!!!
          #
          SSLCertificateFile    /etc/ssl/certs/<name>-ssl-server.crt
          SSLCertificateKeyFile /etc/ssl/private/<name>-ssl-cert-private.key
  
  	<FilesMatch "\.(cgi|shtml|phtml|php)$">
  		SSLOptions +StdEnvVars
  	</FilesMatch>
  	<Directory /usr/lib/cgi-bin>
  		SSLOptions +StdEnvVars
  	</Directory>
  
  	BrowserMatch ".*MSIE.*" \
  		nokeepalive ssl-unclean-shutdown \
  		downgrade-1.0 force-response-1.0
  
  </VirtualHost>
  </IfModule>
  

• Jetzt die Datei speichern und dann:

  $ sudo a2ensite jk-ssl
  

  jetzt den apache neu starten; ihr müsst jetzt natürlich die Passwörter für die Zertifikate eingeben

  $ sudo /etc/init.d/apache2 restart
  

• wenn ihr nur kleine Konfigurationseinstellungen macht, reicht es auch die apache Konfiguration neu zu laden:

  $ sudo /etc/init.d/apache2 reload
  

Ihr habt es geschafft, auf geht’s nach https://<ip|dns>:<port> und alles müsste funktionieren. Eine kleine Anmerkung noch, wenn ihr alle Seiten/ Dienste unter ‘/var/www’ speichert und die default Seite aktiviert ist, solltet ihr in dieser sicherheitshalber ‘-Indexes’ statt Indexes eingeben. Dies ist eig. nicht nötig, aber solltet ihr mal die index.html (in der It works! steht) versehentlich löschen, da ihr denkt, ach die Datei brauche ich ja wirklich nicht. Dann kann man durch einen Aufruf im Browser auch auf eure eig. https basierten Dienste per http zugreifen.

Have fun

als Webmaster versucht man stets seine Homepages zu optimieren. Dazu gehört auch der korrekte Umgang einer .htaccess-Datei, v.a. wenn man eben keinen direkten Zugriff auf die Apache Konfiguration hat. Mit einer .htaccess-Datei könnt ihr relativ einfach Konfigurationsvariablen für den zugehörigen Apache Server setzen und einstellen. Dies setzt natürlich voraus, dass der Hoster die Einstellungen, die ihr vornehmen wollt auch selbst in seiner Konfiguration des Apache genehmigt hat. Normalerweise könnt ihr recht viel Einstellungen machen.

Ich will hier aber gar keine große Anleitung schreiben, was ihr alles machen könnt oder was ihr genau bei WordPress machen solltet, sondern ich will euch ein paar hilfreiche und informative Links zur Verfügung stellen und ihr könnt dann selbst nachlesen, was ihr für sinnvoll haltet.

Ein paar Tipps gebe ich natürlich schon:

• komprimiert eure Anfragen mit gzip (howto)
• schützt eure htaccess-Datei & wp-config.php
• verhindert, dass eure Bandbreite genutzt wird, in dem Bilder von eurer Seite in anderen eingefügt werden
• versucht zu cachen
• leitet http://<domain> anfragen an www.<domain> um

Und hier ein paar Links:

• der Hoster all-inkl bietet einen .htaccess Generator an, der auch nützlich sein kann, wenn man keine Domain bei dem Hoster hat
• ein anderer großer Hoster – dreamhost – bietet einen interessanten Wiki Eintrag über htaccess tricks
• 24 sehr gute Tipps bietet devmoose.com (die Tipps sind auch aus mehreren Tutorials zusammen gefasst und wirklich hilfreich!)
• noch ein paar Tipps http://www.javascriptkit.com/howto/htaccess.shtml
• eig. ist das hier noch eine super Seite für apache Tricks: http://www.askapache.com/htaccess/htaccess.html (im Moment leider down, probierts einfach mal aus)

Es gibt sicher noch jede Menge Anleitungen, aber zu viel Informationen bringen auch nur Verwirrung. Ich denke mit der obigen Sammlung kann man schon so einiges aus seiner Seite raus holen.

Viel Vergnügen und falls ihr gute Links habt, postet sie in den Kommentaren.

für diesen kleinen Beitrag könnte es viele Überschriften geben, z.B. Divs richtig anordnen, divs positionieren, divs in divs, divs nebeneinander, etc….

Ich habe schon des öfteren divs in divs benötigt und manchmal auch nebeneinander oder untereinander und so weiter, heute wollte ich euch mal zeigen, wie einfach dies gehen kann.

Hier erstmal der CSS Code:

<style>

#wrapper {
	height: 165px;
	width: 500px;
	border: 1px solid blue;
	padding: 25px;
}

#demo_div1 {
	float:left;
	width: 190px;
	height: 160px;
	background: green;
}

#demo_div1_sub1  {
	float:left;
	margin: 5px;
	width: 170px;
	height: 70px; b
	ackground: red;
}

#demo_div1_sub2  {
	float:left;
	margin: 5px;
	width: 170px;
	height: 70px;
	background: black;
	color: red;
}

#demo_div2 {
	float:left;
	width: 190px;
	height: 160px;
	background: red;
	margin-left: 19px;
}

#demo_div2_sub1  {
	float:left;
	margin: 5px;
	width: 170px;
	height: 70px;
	background: green;
}

#demo_div2_sub2 {
	float:left;
	margin: 5px;
	width: 170px;
	height: 70px;
	background: black;
	color: red;
}
</style>

Dann noch ein paar HTML Schnippsel:

<div id="wrapper">
   <div id="demo_div1">
		<div id="demo_div1_sub1">div1_sub1</div>
		<div id="demo_div1_sub2">div1_sub2</div>
	</div>

	<div id="demo_div2">
		<div id="demo_div2_sub1">div2_sub1</div>
		<div id="demo_div2_sub2">div2_sub2</div>
	</div>
</div>
<p>ready...</p>

und fertig ist das ganze:  Demopage

Vor allem ist das hier nützlich für Bilder, oder für kleine oder auch größere Formulare, wenn ihr eure label-tags über euren input-Feldern oder Checkboxen wollt. Natürlich muss man dann noch ein paar Größenanpassungen machen, mehr ist allerdings nicht nötig.

Have fun

but that’s not important, what we need is browser support for html5 standard and we almost have it (more or less)

have fun

das berühmte JavaScript Framework jQuery ist in einer neuen Version erschienen und bringt so einige schöne Verbesserungen mit sich. Eine nette Liste aller neuen Features findet ihr hier, und hier. Und hier gibt es noch ein Video der Entwickler zu den Neuerungen und was man evtl. bei einem Upgrade beachten sollte.

Anbei möchte ich euch noch eine sehr gute Seite empfehlen, die viele nette Links zu Tutorials, Frameworks und mehr über Webentwicklung postet. www.scriptandstyle.com

Have fun

Viel Spaß

Ein Punkt ist zum Beispiel, dass man versucht seine JS- und CSS-Dateien jeweils in eine große Datei packt und am besten auch noch alle Kommentare und Whitespaces entfernt.

Um die besagten Dateien zu komprimieren kann man entweder YUI Compressor oder JSMin nehmen.
Ich gehe hier nur auf JSMin ein:

Installation:

wget http://www.crockford.com/javascript/jsmin.c
gcc -o jsmin jsmin.c

Und los gehts:

./jsmin < bloated.js

oder die komprimierten Zeilen direkt in eine neue Datei schreiben:

./jsmin < bloated.js > minified.js

Das ganze funktioniert auch mit CSS-Dateien. Mit YUI Compressor hat man noch ein paar mehr Möglichkeiten, mir reicht JSMin vorerst jedoch völlig.

Have fun

Wer also interessiert ist, soll öfter mal rein schauen. Ich habe das WordPress Theme selbst entwickelt und man muss einfach mal wieder sagen, wie gut Firefox im Vergleich zum IE oder Opera ist. Wenn ihr buehne2.de mal mit Opera oder IE ansurft, entdeckt ihr, dass es keine schönen Rundungen an den Kanten mehr gibt und im Firefox gibt es diese sehr wohl. Im Safari sollten diese Rundungen auch sichtbar sein, denn sowohl Webkit als auch die Gecko Engine können mit runden Rändern umgehen:

Der einzige wahre Browser ist und bleibt eben doch Firefox, allein wegen diesen CSS Eigenschaften:

-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

Es erspart einem Entwickler unheimlich viel Arbeit, man muss nicht extra 4 Bilder erstellen und per CSS einpassen.

Ein paar Beispiele und bisschen Lesestoff gibt es hier und hier.
Have fun.

1. mehrere delicious Accounts (wobei ich es nicht getestet habe, sollte aber gehen)
2. Zugriff auf Logins in einem Profil mit Masterpasswort, etc. für E-Mails, Wikis, Foxmarks und co.
3. zum Testen von Homepages mit unterschiedlich installierten Plugins (z.B.: FlashBlock, AdBlock)

Viel Spaß mit 2 Profilen