Archive for the ‘ DEVELOPMENT ’ Category

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

Creating an AJAX OpenLaszlo Preloader for SWF Files

Since the SWF9 runtime in OpenLaszlo, the internal splashscreen isn’t anymore available. So if you need some preloader animation with a progressbar, you must implement an ajax-loader. You also have the option, to implement a preloader based on actionscript, but these isn’t multi runtime compatible and will not work with the HTML Runtime. So it’s the best solution, to implement a preloader for your OpenLaszlo applications based of JavaScript.

Click here for a quick demo 😉

In the first step, we will create the Preloader for the SWF10-Runtime. In a further step, we will change them for the HTML5-Runtime.
Sure you can use this preloader also for Flash- or Flex-Compiled SWF-Files 😉

At first we take the HTML embedding from a previous Solo Export, and extend it in the following steps.

<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
		<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
		<meta http-equiv="PRAGMA" content="NO-CACHE">
		<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
		<meta http-equiv="EXPIRES" content="0">
		<meta name="viewport" content="width=device-width; initial-scale=1.0;">
		<meta name="keywords" content="" /> 
		<meta name="description" content="" /> 

		<title></title>

		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<!--[if IE]>
			<link rel="stylesheet" type="text/css" href="./css/style.css">
		<![endif]-->
		
		<script type="text/javascript" src="./js/flash_detect.js"></script>
		<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="./js/embed-compressed.js"></script>
		<script type="text/javascript" src="./js/custom.js"></script>
		<script type="text/javascript" src="./js/loader.js"></script>
        
	</head>
	<body>

		<noscript>
			<font class="statusFont">Please enable JavaScript in order to use this application.</font>
		</noscript>

		<div id="lzsplash">
		 	<p id="lzsplashp">
				<img id="loadstatusimage" src="./img/ajax-loader.gif" />
				<br />
				<br />
				<font id="loadstatus" class="statusFont">&nbsp;&nbsp;0% cached...</font>
			</p>
		</div>

	</body>
</html>

 
In this part we have included the required CSS and JavaScript-Files, checking if JavaScript is available and created a Div-Layer for our Preloader.

Attention: By integrating the preloader into your HTML design, do not change the hierachy of the Div-Structure. If you do that, the swfobject will be not displayed anymore in some Internet Explorer Versions. Another problem is the wmode attribute, that is used to let some other elements upper the flash displayed, this isn’t recommendable. The practice have showed, that within some Firefox browser that are running on Windows the Flash file isn’t correctly loaded.

Tip: For creating quick a nice loading animation as a gif, i use the www.ajax-loder.info Site. There you can create directly online your own load animation, by choosing an animation and colored it with your prefered color.
 
The embedded CSS-Files are only for styling and placing the Div-Layers. Further there is a Flash-Detection, which you can get on www.featureblend.com, so we could give the visitor a message and the download-link if there’s no Flash available.

if(FlashDetect.versionAtLeast(10)) var flashDetected = true;
else var flashDetected = false;

window.onload = function(){
	if(!flashDetected){
		document.getElementById('loadstatus').innerHTML = "Please download the current version of the Adode Flash Player:<br /><a href=\"http://get.adobe.com/de/flashplayer/\" target=\"_blank\">http://get.adobe.com/de/flashplayer/</a>";
	}
}

 
Additional we have integrated jQuery, for doing some Actions a quite bit faster 😉
 
The main-part of this Preloader is located in the loader.js:

// Reminds that the onload is already called
// The Internet Explorer sometimes seems to call that twice
var loadedCalled = false;


// Load Application
if(flashDetected) {
	lz.embed.swf({
		url: 'index.lzx.swf10.swf', 
		allowfullscreen: 'true', 
		width: '100%', 
		height: '100%', 
		id: 'lzapp', 
		accessible: 'false'
	});

	// Make Application Container invisible
	if($.browser.msie) { 
		$('#lzappContainer').hide(); 
	}
	else {
		$('#lzappContainer').css('width', '0px');
		$('#lzappContainer').css('height', '0px'); 
	}

	// called with a percentage (0-100) indicating load progress
	lz.embed.lzapp.onloadstatus = function loadstatus(p) {

		// Set styles
		//if(!basicStylesSetted) setBasicStyle();
		$('#loadstatus').html('&nbsp;&nbsp;' + p + '% cached...'); 
                          
	}

	// called when this appli
cation is done loading
	lz.embed.lzapp.onload = function loaded() {
		
		// Check if the function is 
		// already called
		if(loadedCalled) return;
		else loadedCalled = true;

		// Set styles
		//if(!basicStylesSetted)  setBasicStyle();
		
		$('#lzappContainer').show();
   		$('#lzapp').show();
   		$('#lzsplash').hide();
	}
}

 
The ‚lz.embed.swf(..);‚ initials the Application-Loading and placement, the ‚lz.embed.lzapp.onloadstatus‚ fires the current percent-number for feeding the progressbar and the ‚lz.embed.lzapp.onload‚ will be fired when the Application is ready to use.
That’s all. The main-problem by all this work is, to get it work in every Browser, like my prefered Browser the Internet Explorer 6 😛
 
Finishing Notice:
If you use a PHP-File as container for your HTML, and you want to pass some GET-, POST- or other PHP-Variables, there’s attention needed! These variables must be strictly checked, if you want to prävent a possible Script-Injection or bad variables.

As sample, you pass any ID by a GET- or Post-Parameter, like:

http://...index.php?anyID=123

 
You can catching the ID and pass it without any actions to your OpenLaszlo-/Flash-Application:

...
<script type="text/javascript">
//<![CDATA[
...
lz.embed.swf({url: 'index.lzx.swf10.swf?ses_id=?ses_id=<?php echo $ses_id; ?>&anyID=<?php echo $_GET['anyID']; ?>&lzr=swf10&lzproxied=false', allowfullscreen: 'false', width: '100%', height: '100%', id: 'lzapp', accessible: 'false', cancelmousewheel: false, appenddivid: 'lzappContainer'});
...
//]]>
</script>
...

 
This is very bad and dangerous!

If your visitor do change these ID you’ve catched from a GET- or Post-Parameter, like:

http://...index.php?anyID=123&badParameter1=bad&badParameter=superbad&

 
or even better:

http://...index.php?anyID=123 '}); document.title = 'mega bad'; //

 
Then maybe you have a problem. Everybody can inject any JavaScript into your site!
In the last sample, your visitor closed with ‚123 ‚});‚ the ‚lz.embed.swf(..);‚ and injects a new JavaScript action like ‚document.title = ‚mega bad‘;‚. Finally he cuts the rest of your statements with a ‚ //‚, to get no JavaScript-Errors.

So, you must validate all passed Parameters in the head of your PHP-File strictly, copy these into their own self-created variables, validate them and use only this copies in your following code. Don’t use GET- or POST-varibles midst of your scripts.
Also, don’t access GET- or POST-Variables directly inner Functions or Class-Methods. Always pass all Variables you need as Function-Parameters.
That is best Practice!

Click here finally for a demo 😉

Sourcecode: OpenLaszlo - Preloader (1483)

If you found some bugs or have some Tips, please contact me.
Do you make some changes, because any Browser-Version has some fault, contact me too… So i can update these little Tutorial-Scripts, and give other guys also this corrected files.. 🙂

Joining two files by using the shell command cat

I’ve currently download two files, which are simple splitted from one file.
Now i want to join these files. This can be done with a simple shell action like:

cat file.wmv.002 >> file.wmv.001

 
But attention, it’s better to make a backup before trying to join the files.
The direction of the files is, the second file is ‚>>‘ attached to the first.

Subversion / SVN Problem: Attempted to lock an already-locked dir

Today i had the Problem, that my Aptana Studio 3 crashes during a svn-commit. After restarting the IDE and the try to finish the commit, i’ve become the following error message:

Attempted to lock an already-locked dir

 
It seem’s that my working-copy is already locked by the last commit 🙁
A solution to resolve this problem is to ‚cleanup‘ the working-copy.
Take a right-click on your SVN-Project, and select ‚Team‘->’Cleanup‘. After perform this action, the commit should work again. 😉

The types of cloud computing (SaaS, PaaS, IaaS, DaaS)

Cloud computing can be divided into three types:
SaaS – Software as a Service is an offering of applications over the Internet, without that the application is saved directly by the user.
PaaS – Platform as a Service provides as one example, a developer a runtime environment or a development environment that can be used to develop applications on it or run it. Often, many functions already provided by the Platform
IaaS – Infrastructure as a service, and the shape DaaS – Data Storage as a service, which is a subspecies of IaaS. Here, the user will be provided hardware (storage, processing power, etc.) offered as a service.

Integrate a JavaScript File (as sample jQuery) into a Typo3 Website

Currently i need some JavaScript-Actions in my Typo3-Website, therefore i will integrate jQuery.
 
First of all, download the current version of jQuery and upload the .js-File to your Webspace, as sample in:

/fileadmin/template/javascript/jquery/

 
After that, navigate into the Typo3 Backend to the TypoScript Main-Template and add the following TypoScript to the Setup:

# Assign the JavaScripts
page.includeJS { 
  file1 = fileadmin/templates/javavcript/jquery/jquery-1.6.2.min.js 
}

 

 
Now your JavaScript-Library is ready to use 🙂

Install the tscobj Extension under Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

In order to use some PHP-generated Content within a Content-Element in Typo3, i need to insert a TypoScript-Mark within these Content-Element.
Therefore i want to install the tscobj. The tscobj Extensions allows you, to use a TypoScript-Mark within a Content-Element. So you are able to manage all your TypoScript centrally in the Setup-Area of your Template. So you have no more widespread TypoScript Code in several Content-Elements.. 🙂

The installation of the tscobj Extension is very easy, just do the following few steps:

At first, navigate to ‘ADMIN TOOLS’ -> ‘Extension Manager’, and select ‘Import extensions’ within the Select-Box on the top of the mainframe. Here enter the Extension-Name ‘tscobj’ in the ‘Look up extensions’ Field, then press ‘Look up’ 😉


 
After that, do import the Extension into your System by clicking on the Brick-Symbol from the ‘tscobj’-Row


 
And that’s it..


 
Read in a following Post, how to use this Extension… So, stay tuned 😉

Select an open File by using Keyboard in Aptana Studio 3

In order to work much more effective, it is best practice to select other open-files by keyboard.
With Aptana Studio 3 you do this very easy and comfortable 🙂

While the editor have the focus, just press ‚Strg’+’E‘ and on the right side of the File-Tabs open a small Filelist.


 
The Focus directly switched to an Filter-Field on the top of these List. So you are able to input the name of the needed file. Is the Filelist filtered down to a few files, just use the Up- and Down-Keys to select the needed File.

An other useful shortcut is ‚STRG’+’PageDown‘ to select the right next opened File, or ‚STRG’+’PageUp‘ to select the left previous File for editing.

Now, who needs a mouse!? 😉