Archive for September, 2011

My favorite 500 Internal Server Error Page ;)

That’s my favorite 500 Internal Server Error Page 😉

Integrate free Web-Fonts by using Google Web Fonts

The distribution of usage of web fonts is gradually increasing on many websites. A long time, many designers and web developers have waived them, because of lack of browser-support and problems with the copyrights of many fonts, and used instead for example headlines as an image within their website.

Important points while using Web Fonts are therefore that it must be free fonts (for example under Open Font License) and chosen if possible, a format that does many or even all browsers understand.

We now want to integrate with the help of Google Web Fonts a free font in a website.
First we open the Google Web Fonts website and select any font. Have we decided on a font, we click the bottom right on ‘Use’.

Here we simply go to the steps that are pretending Google Web fonts:
1. Select the styles you want to use
2. Select the character set that should be used
3. Add the given code in the header of the website. Alternatively you can also download the fonts above the left and place it on your own webspace.

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

 
4. At last just include the font in necessary places in the CSS.

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

 

Attention: With too many fonts can slow down its website. Choose therefore better only the fonts that are actually in need of website. So check on the Page Load speedometer 😉
 
Unfortunately the Internet-Explorer only supports the TTF format from version 9. Older versions of Internet Explorer only understand their own format Embedded OpenType, short EOT. However there is a new standard that should solving this problem. The Web Open Font Format, short WOFF. So far it is only supported by the latest browser versions. Therefore you must include all three formats of Web-Fonts, to make sure that every visitor can see the right fonts on your website
 

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

 
An online tool that allows you to convert TTF to Web-Fonts (EOT, OTF, SVG, WOFF) is available at www.font2web.com
After the we now converted all three Web-Font formats, it’s time to integrate these into the system. This one solves the following 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;
}

Best way to add or edit Code snippets and templates in Aptana Studio 3

This post is created with and for Ubuntu-Linux installations. It is a continuation and improvement of this post.

By starting up Aptana Studio 3, the system creates a folder in the users home directory like:

~/Documents/Aptana Rubles

 
After the first start of Aptana Studio 3 these directory is empty.

Now, if you’re currently progamming a PHP-File. The file is opened with the Editor and have the focus. At this moment you are able to use the default snippets and templates. To create your own, just click in the navigation under ‘Commands’ -> ‘PHP’ -> ‘Edit this bundle’.

It seems as it’s nothing happens, but without a noise aptana has created a project names ‘PHP’ in your Project-Explorer. The files from these Project are located in the directory:

~/Documents/Aptana Rubles/php.ruble

 
The result is now a ‘php.ruble’ directory, that’s contains your personalized ‘bundle.rb’.
To create now your own code snippets or templates, you just need to open the PHP-Project from your Project-Exporer and edit the ‘bundle.rb’.
Here you will find a little How-To for creating some snippets.

Here some other snippets, ready to use: 😉

#
# 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 (1787)

Grab/Download complete websites using wget to make them available offline

If you wants to make a complete website offline available, you can do this quickly and easily with the following shell command:

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

Or as well with the short form:

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

 
The Options:
‘-mirror’ or short ‘-m’: Mirrors the complete Website
‘-page-requisites’ or short ‘-p’: Loading all external elements, that are needed to used the pages
‘-convert-links’ or short ‘-k’: Converts Hyperlinks for using these offline
 
Now you can easily use the site offline with your lokal browser. 😉

Tip: For more informations read simply the man page. You will get them with the following shell action:

man wget