Archive for Sep. 2011

Meine Lieblings 500 Internal Server Error Seite ;)

Meine Lieblings 500 Internal Server Error Seite 😉

Freie Webfonts mit Hilfe von Google Web Fonts einbinden

Die Verbreitung von Web-Fonts findet nach und nach immer mehr Verwendung auf vielen Websites. Lange haben viele Designer und Webentwickler auf Grund von mangelnder Browser-UnterstĂŒtzung und Problemen mit den Urheberrechten der Schriftarten auf diese verzichtet, und stattdessen bspw. Headlines als Bild in Ihre Websites integriert.

Wichtige Punkte beim Verwenden von Web-Fonts sind somit, das es freie Fonts sein mĂŒssen (bspw. der Open Font License unterliegen) und nach Möglichkeit ein Format gewĂ€hlt wird, das viele oder sogar alle Browser verstehen.

Wir wollen nun mit Hilfe von Google Web Fonts eine freie Schriftart in einem Website einbinden.
Als erstes öffnen wir die Google Web Fonts Website und suchen uns eine beliebige Schriftart aus. Haben wir uns fĂŒr eine Schriftart entschieden, klicken wir unten rechts auf ‚Use‘.

Hier gehen wir einfach den Schritten nach, die uns Google Web Fonts vorgibt:
1. Die Stile auswÀhlen die wir verwenden wollen
2. Den Zeichensatz auswÀhlen der verwendet werden soll
3. Den vorgegebenen Code in den Header der Website einfĂŒgen. Alternative kann man sich hier auch die Fonts oben links herunterladen und auf dem eigenen Webspace ablegen.

<link href='http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

 
4. Als letztes muss die Schriftart nur noch in den erforderlichen Stellen im CSS eingebunden werden.

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

 

Achtung: Mit zu vielen Schriftarten kann man sein Webseite verlangsamen. WĂ€hle daher besser nur die Schriftarten, die auch tatsĂ€chlich der auf Webseite benötigen werden. Achte also auf den Page-Load Tachometer 😉
 
Leider wird das TTF-Format vom Internet-Explorer erst ab Version 9 unterstĂŒtzt. Ältere Versionen des Internet-Explorers verstehen nur sein eigenes Format Embedded OpenType, kurz EOT. Es gibt jedoch einen neuen Standard der dieses Problem langfristig lösen soll. Das Web Open Font Format, kurz WOFF. Bisher wird es jedoch nur von den aktuellsten Browser-Versionen unterstĂŒtzt. Somit muss man, damit man sichergehen kann das jeder Besucher auch die Web-Font zu sehen bekommt, alle drei Format in seine Seite einbinden.
 

  IE Firefox Chrome Safari Opera
TTF 9 3.5 4 3.1 10
EOT 4
WOFF 9 3.6 5 5.1 11.1

 
Ein Online-Tool mit dem man TTF zu Web-Fonts (EOT, OTF, SVG, WOFF) konvertieren kann gibt es unter www.font2web.com
Nach dem man sich nun seine Web-Font in alle drei Formate konvertiert hat, geht es an die Einbindung ins System. Dies löst man mit dem folgenden CSS:

@font-face {
  font-family: 'Marvel';
  src: url('fonts/Marvel.eot#iefix') format('embedded-opentype'),
       url('fonts/Marvel.woff') format('woff'),
       url('fonts/Marvel.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

Code-Schnipsel und -Vorlagen in Aptana Studio 3 zu erstellen und zu bearbeiten

Dieser Post ist erstellt auf und fĂŒr Ubuntu-Linux Installationen. Dies ist eine WeiterfĂŒhrung und Verbesserung von diese post.

Wenn Aptana Studio 3 gestartet wird, erstellt das System ein Verzeichnis im Home-Directory des aktuellen Benutzers. Dieses Verzeichnis sieht wie folgt aus:

~/Documents/Aptana Rubles

 
Nach dem ersten Start von Aptana Studio 3 ist dieses Verzeichnis leer.

Nun, wir sind gerade dabei eine PHP-Datei zu programmieren. Die Datei ist im Editor geöffnet und der Fokus liegt auf dieser. In diesem Moment hat man die Möglichkeit standard Schnipsel und Vorlagen zu verwenden. Um nun eigene zu erstellen, klicke einfach in der Navigation auf ‚Commands‘ -> ‚PHP‘ -> ‚Edit this bundle‘.

Es scheint als wĂ€re nicht passiert, aber ohne einen Mucks hat Aptana Studio 3 ein Projekt namens ‚PHP‘ im Projekt-Explorer erstellt. Die Dateien von diesem Projekt liegen in dem Verzeichnis:

~/Documents/Aptana Rubles/php.ruble

 
Das Ergebnis ist nun ein ‚php.ruble‘ Verzeichnis, das eine personalisierte ‚bundle.rb‘ enthĂ€lt.
Um nun seine eigenen Coder-Schnipsel oder -Vorlagen zu erstellen, musst Du einfach das PHP-Projekt aus deinem Projekt-Explorer öffnen und die ‚bundle.rb‘ bearbeiten
Hier findest Du ein kleines Tutorial zum Erstellen und Bearbeiten von diesen Code-Schnipsel und -Vorlagen.

Hier noch ein paar weitere fertige Schnipsel: 😉

#
# Trigger: foreach
#
# PHP foreach template
#
# if(!empty(array_name))
# foreach(array_name as array_entry) {
#   code to do...
# }
#
snippet "PHP foreach template" do |snip|
  snip.trigger = "foreach"
  snip.expansion  = "if(!empty(${1:array_name}))\n"
  snip.expansion += "foreach(${1:array_name} as ${2:array_entry}) {\n"
  snip.expansion += "\t${3:code to do...}\n"
  snip.expansion += "}\n"
end



#
# Trigger: var_dump_pre
#
# PHP var_dump mit <pre>
#
# echo "<pre>";
# var_dump(var_to_dump);
# echo "</pre>";
#
snippet "PHP var_dump mit <pre>" do |snip|
  snip.trigger = "var_dump_pre"
  snip.expansion  = "echo \"<pre>\";\n"
  snip.expansion += "var_dump(${1:var_to_dump});\n"
  snip.expansion += "echo \"</pre>\";\n"
end



#
# Trigger: doc_func
#
# PHP-Doc Function
#
snippet "PHP-Doc Function" do |snip|
  snip.trigger = "doc_func"  
  snip.expansion  = "/**\n"
  snip.expansion += " * ${1:description}\n"
  snip.expansion += " *\n"
  snip.expansion += " * @author     Thomas Deuling <tdeuling@iscope.de>\n"
  snip.expansion += " * @param      ${2:type} ${3:name} ${4:description}\n"
  snip.expansion += " * @return     ${5:void} ${6:returnDescription}\n"
  snip.expansion += " * @global     ${7:array} ${8:Config-Array}\n"
  snip.expansion += " * @uses       ${9:checkField::checkEmail()}\n"
  snip.expansion += " */"
end



#
# Trigger: doc_file
# PHP-Doc File
#
# /**
# * description
# *
# * @author     Thomas Deuling <tdeuling@iscope.de>
# * @package    default
# *
# * @property   type varname description
# *
# */
#
snippet "PHP-Doc File" do |snip|
  snip.trigger = "doc_file"  
  snip.expansion  = "/**\n"
  snip.expansion += " * ${1:description}\n"
  snip.expansion += " *\n"
  snip.expansion += " * @author     Thomas Deuling <tdeuling@iscope.de>\n"
  snip.expansion += " * @package    ${2:default}\n"
  snip.expansion += " *\n"
  snip.expansion += " * @property   ${3:type} ${4:varname} ${5:description}\n"
  snip.expansion += " *\n"
  snip.expansion += " */"
end

 
Snippet-Collection Download: Aptana Studio 3 - PHP-Snippets (1767)

Komplette Websites mit wget downloaden/offline verfĂŒgbar machen

Wer eine komplette Website offline verfĂŒgbar machen möchte, der kann dies schnell und einfach mit dem folgenden Shell-Befehl machen:

wget --mirror --page-requisites --convert-links http://www.google.com

Oder auch mit der Kurzform:

wget -mpk http://www.google.com

 
Die Optionen:
‚-mirror‘ bzw ‚-m‘: Spiegelt die komplette Website
‚-page-requisites‘ bzw. ‚-p‘: LĂ€dt auch alle externen verwendeten Elemente der Seiten benötigten
‚-convert-links‘ bzw. ‚-k‘: Konvertiert die Hyperlinks, so dass sich die Kopie lokal durchsurfen lĂ€sst.
 
Jetzt kann die Website bequem offline mit dem Lokalen-Browser verwendet werden. 😉

Tipp: FĂŒr weitere Infomationen einfach die Manpage lesen, welche man mit dem folgenden Aufruf bekommt:

man wget