Webdesign aus Witten » LONG RUN INTERNATIONAL LTD.

Da mir heute Morgen ein Termin ausgefallen ist und ich auf einmal vor einem (nahezu) leeren Kalender stand, habe ich die Zeit genutzt um eine schon länger brach liegende Internetseite zu aktualisieren. Im Januar 2007 habe ich für etwa 2 Wochen einen Praktikanten beschäftigt. Der hat keinen Kaffee gekocht oder den Rasen gemäht, sondern sich produktiv und mit vorzeigbaren Ergebnissen mit dem Thema Webdesign auseinander gesetzt.

Das Resultat war damals die Internetseite www.webdesign-im-ruhrgebiet.de. Bisher war dort ein Drupal-System im Einsatz, das natürlich sowohl vollkommen überdimensioniert als auch hoffnungslos outdated war. Heute Morgen schlugen dem System die letzten Sekunden. Jetzt habe ich die etwa 30 Text-Absätze in eine einzelne HTML-Datei überführt und diese neu hochgeladen. Konsquent ist die Seite nun sehr übersichtlich und stellt die Arbeit des Praktikanten ganz gut dar.

Ich werde diese sicherlich noch ein wenig ausarbeiten, aber für den Anfang reicht das erstmal. Schließlich soll die Seite ja nicht nur Zeit kosten, sondern auch einen im Vergleich zum Aufwand angemessenen Nutzen bringen.

Screenshot der neuen Internetseite

Several month ago i announced to extend the usage of Worpdress as the main CMS for my customers. Since the beginning, i’m experiencing with different kind of plugins. There’s no doubt that it’s absolutely necessary to extend your Wordpress installation with plugins. Most of those Top list of plugins contain at least the following items.

This are, from my point of view, absolutely must-have plugins. They provide all-day useful functionality to increase productivity, integrate your Wordpress with other (important) services and secure it right from the start. Except two of this plugins they all come at no cost. I personally don’t mind spending a few Euros on professional made and (to me) very useful software. Therefore i won’t exclude this software from the list as others have done before:

Akismet

That’s i think the most-used plugins for Wordpress since ever. Akismet is a spam blocker that checks your comments and trackbacks automatically for spam entries and blocks or removes them. It’s based on a collaborative approach and free for personal use. Any professional bloggers are asked to pay 5$ a month to get an professional API key.

http://akismet.com/

Contact Form 7

Most people that deal with Wordpress on a professional basis are wondering why Wordpress isn’t providing a contact form. The usual answer (‘to keep it simple and stupid’) caused Takayuki Miyoshi to create the awesome Contact Form 7 plugins. It’s a full-featured, out-of-the-box usable contact form that is available in 43 languages. Based on modules for form elements, it’s also very easy to adjust to your personal needs and – for future – also to HTML 5 improvements. It also integrates with Akismet for spam filtering and connects to the reCaptcha plugin that prohibits spoofing.

http://contactform7.com/

Google Analyticator

Google Analytics is frequently named as the core of the data kraken. I see it as one of Google’s most usable tools. When registering at Google Analytics, you’ll get some JavaScript code to track your visitors. This plugin allows to add the tracking code right at the header or footer of your website without changing the template files. This is a significant improvement as you just can add any templates you want, use Google Analytics with them, update them and don’t need to re-add the JavaScript code.

Additionally it adds a new element to your dashboard that shows your 30-day visitor development and some key statistics on your site performance.

http://plugins.spiralwebconsulting.com/analyticator.html

Google XML Sitemaps

This is definitely a must-have plugin. A sitemap generator is a tool that creates a full overview of your whole site structure, called a sitemap. This sitemap is made available to search engines and allows them to get to know your site without loading each single page. The Google XML Sitemaps plugins additionally informs the search engines about updates to your sites and generates this sitemap automatically once you update your site. It also allows to customize lots of options regarding your sitemap.

http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/

wpAntivirus

There have been numerous kind of hacks for Wordpress in the past. To prohibit anyone from being incognito in your code, wpAntivirus checks for common methods to conterminate CMS installations. It allows you to configure a daily check and alert for any security breaches.

http://wpantivirus.com/

wpSEO

wpSEO is maybe the most professional plugin for Wordpress. It improves Wordpress’ functionality everywhere it lacks of options for search engine optimization. Functionality contains generating of titles, meta description and keywords and the ability to prohibit duplicate content. There are plenty of ways to set your own site title, meta description and meta keywords without editing the template files as well as any robot-related options. It also contains a dashboard plugin with a short overview of your Google, Yahoo and Alexa ranks. For personal use one will have to pay 20€ as a one-time fee. To use it in any of your customer installations, you’ll have to pay at least 50€ and up to 100€. From my point of view, this plugin is worth it’s money as it solves you many problems and saves a lot of time.

http://www.wpseo.de/

That’s my personal list of most-valuable and most-necessary Wordpress plugins. I can imagine so many more interesting and notable plugins, but this ones are for everyone and every purpose. In the next days i will start adding lists of plugins by topic.

This

1. Create an Account for Google Website Optimizer
   That’s the easy stuff: Go to www.google.com/websiteoptimizer and login with your Google Account or create a new one. Once you’re done with that, proceed to step 2.
2. Click “Create another experiment” in Google Website Optimizer
3. Choose “Multivariate Experiment” to start
   Multivariate experiments allow you to change the behavior of your website in multiple ways and is, in comparison to the “A/B experiment” an advanced tool. Choose this option to get the most of A/B testing. On the next page, Google Website Optimizer shows you a list of four things that should have been done up to now. Overall, this is the creation of your website variations that should be tested. If you haven’t done this steps up to know, contact your web designer. You can do this on your own, but it will be a hard way without any technical skills.
   Once your testing page and all the alternative contents are ready for testing, click on “Create”.
4. Set the configuration for your experiment
   Give your experiment a name and set the URL to your Testing page. This is, for example, a contact page or your product page. Also don’t forget to set the conversion page URL. This will be the page that means a success to your business once it is called. “continue”
5. Choose that you want to install the JavaScript yourself in your website. “continue” will show you an overview of your configuration and the necessary JavaScript code that you’ll have to insert into your Testing Page.
6. Install “Google WEbsite Optimizer for WordPress” Plugin in Wordpress. This is actually the plugin that allows you to insert custom code for A/B testing in Wordpress pages and posts.
7. Choose your testable post / page in your Wordpress installation.
   (Maybe you have to disable the visual editor in Users > Your Profile to proceed the editing. Otherwise you can just use the switch “HTML” in Wordpress RTE.)
8. Copy the controll script in the “Google Website Optimizer” section in your Wordpress post / page.  Also add the tracking script in the same page.
9. Add the Page sections to your Wordpress post / page and add the testable content (version A) inside the tags. Once you’ve done that and updated your post, it will show the version A content right where you added the Page sections. Don’t forget to change the “Insert your section name here” in the Page sections to your personal section name.
10. Next step is to add the Conversion Script. Again, open your Wordpress installation and choose to edit the Conversion page you’ve entered in Step 4. Copy the Conversion Script into the Google Website Optimizer section.
11. Click “Validate pages” on the Google Website Optimizer homepage. This will check if you’ve done well. Once all necessary scripts are added, proceed to the next step with “Continue”.
12. Next Step will allow you to add the content in Version B (C, D,..). At first it show the Original Content. Add new variations with a click on the same-named link at the left. Choose a name for your Page section and enter the content for each version.That’s just copy&paste as you’ve created this variations with your designer and developer before.
13. Once all variations are added, proceed with “Preview” to the next step. This will give you a preview of all the variations right in your website you’ve added. Don’t forget that A/B testing requires you and your visitors to have JavaScript enabled. It’s important to use this preview. Otherwise you won’t have seen the implementation of all this variations right in your website. There is always a chance for typos, mistakes or technical problems. Just click through your variations and – once you’re done – close the window to get back to the experiment setup.
14. Click “Save and continue”. This shows you a last overview of all your configuration. One last notable thing is the amount of traffic that will be sent through this experiment. Usually, i would suggest you to keep this at 100%. If you’ve very risky changes regarding the content of your site, you can set this done to prohibit annoying your customers.
15. Click “Start Experiment”. Google will now estimate how long it will need to collect enough data for first reports. Now it’s your turn to stay cool and wait for any results. Once those are available, go through the reached conversion rates, interprete the results – and don’t forget to change the tested page’s content to the most successful one.

That’s it. After all there will be huge changes in the way A/B testing is done with Wordpress in the next weeks. Google yesterday released an API for it’s Website Optimizer that allows to connect your (personal) software via plugins with it’s service. I’ll stay in touch with the development in that point and will update my article.

• Google Website Optimizier API announcement: http://websiteoptimizer.blogspot.com/2009/10/introducing-website-optimizer.html
• Carsonified’s podcast on A/B testing in Wordpress: http://carsonified.com/blog/business/how-to-do-ab-testing-in-wordpress

From time to time it’s necessary to switch mobile phones. Either your phone is outdated and you lust for one of those new, flat, lightweight and technology-loaded all-in-one phones – or your old mobile phone just collapsed. The last alternative is quite bad for your contacts. But with the following explanation, which allows you to store your phone contacts on your SIM card, you won’t suffer from that.

I will actually show this for Nokia phones of the last three generations. They all use a more or less identical operating system. All of these operating systems have the same functionality regarding this explanation. That makes any migration between Nokia phones very easy.

To get your phone contacts from the phone to the SIM card, just do this:

1. Open “Adress Book” > “Options” > “Used Memory” and change it to “Phone and SIM Card”
2. Open “Address Book” > “Names” > “Options” > “Copy” and select “From Phone to SIM Card” and “All”
3. After this, your screen will show: “% Entries copied, % Entries not copied”
4. Select “OK” and you’ll see the names of the contacts whose details have been copied to the SIM card.

To restore your SIM card “backup” to your new mobile phone, just use step 2 and copy them from SIM card to your mobile phone. Don’t forget to change Step 1 back, otherwise your contacts will be shown duplicate, as they are both on SIM card and phone. Nokia hasn’t added a function to remove any contact duplicates up to now.

This is a quick tip on Microsoft Word: Sometimes it happens that your usual cursor vanishes. Usually a single dot on the font base line or nothing is shown. To get it back, just zoom in until the cursor is shown again. You can use the shortcut CTRL-+ or CTRL-mouse wheel to zoom in and out fastly. This problem might occur if you install components of Office 2007 while Office 2003 or earlier is installed on the same system.

My third post will be much smaller than the first and the second one. This is about a point i’ve searched for several times. It looks like there ain’t no better solution for that.

Zend Framework supports configuration ini-files. These files are usually saved in /application/configs/. The main file that is created by the quickstart is application.ini. You can add your own directives to this file and therefore have a solid, simple and easy to handle (but static) configuration.

To access this variables in your controller, just use the following lines:

$bootstrap = $this->getInvokeArg(‘bootstrap’);
$config = $bootstrap->getOptions();

echo $config['myVariable'];

This is it. Quite simple, huh? I haven’t found a way (up to now) to get this in less lines, but there has to be.

There is also a way to access those configuration variables globally via Zend_Registry. Practically one would create an _init-function in the Bootstrap and use the getOptions()-function to get the config. Then you just add Zend_Registry::set(‘key’, ‘value’) to save the variable globally. To access it afterwards, call $value = Zend_Registry::get(‘key’) in any of your controller actions.

If you use an huge configuration file that hasn’t been loaded automatically, you’ll have to rely on the Zend_Config. This is overall a configuration file parser. An easy example is the following:

1. Create an ini-file (“myconfig.ini”) in your application/config-directory. Insert any directives, e.g. myconf.var1.value = test.
2. Read the configuration file with an Zend_Config_Ini-object: $myconfig = new Zend_Config_Ini(‘application/config/myconfig.ini’). If you used sections in your configuration file (like [production] and [development] in the application.ini), add a second parameter with the targeted section.
3. Access the directives in the config file in an object-based way: echo $myconfig->myconf->var1->value; // this echoes “test”.

Config is very easy. You just have to get in touch with it for the first time. There are plenty of useful examples in the documentation (contrary to many other libraries).

In my second post on Zend Framework, i will discuss a quick (but not anyway dirty) way to switch the layout provided by Zend_Layout depending on the auth status provided by Zend_Auth. This is a very short, but quite useful tip:

We start with the Bootstrap.php file. Any protected function in this file named “_initMyName()” will be automatically called in the same order as placed in the bootstrap. We will use this advantage to provide the right layout before we go in any controller. Just add a new function:

protected function _initAuthState()
{

…

}

Let’s say we have an layout for all the users logged out (e.g. without a navigation bar and any personal / user-related data) and one for all users logged in (adapted to the fact that user-related data will be displayed). So if we implement Zend_Auth for login in one of our controllers and use it, we can differentiate between an user not logged in and one logged in. This is available via the Zend_Auth->hasIdentity()-method. To call that one, we first have to get an instance of Zend_Auth via Zend_Auth::getInstance().

Zend Framework uses the Singleton Design Pattern for Zend_Auth (and more libraries). Therefore we won’t (and can’t) initiate a new object of Zend_Auth, but will have to get an instance of it.

Zend_Auth::getInstance()->hasIdentity()

This function returns a Boolean whether a visitor is logged in or not. So if we create an if-statement on that, we just need to switch the layout based on the result of the statement. To switch the layout, we have to get the layout resource via $this->getResource(‘layout’).

$layout = $this->getResource(‘layout’)

The layout resource supports a function named setLayout(). It takes the name of the layout php file (without ending .phtml) and searches for it in the layoutPath. This layoutPath has been set in the application.ini-file:

resources.layout.layoutPath         = APPLICATION_PATH “/layouts”

So we create our layouts, e.g. “layout_external.phtml” and “layout_internal.phtml”, in the folder /application/layouts/. This contains our individual content. Don’t forget that each one has to have $this->layout()->content in it to display any content from the controllers.

Last step:

if (Zend_Auth::getInstance()->hasIdentity()):
// Logged in.
$layout->setLayout(‘layout_internal’);
else:
// Not Logged in.
$layout->setLayout(‘layout_external’);
endif;

That’s it. Placed in the _initAuthState() function, the bootstrap will automatically choose the right layout for your needs based on the user auth state.

This is my first post out of a series of articles on Zend Framework. Zend Framework is the official Framework by Zend Corporation, maker of the well-known PHP language. It supports the creation of web applications by providing basic functionality for daily use.

Especially as a starter in Zend Framework, you will need some simple tools to debug your first steps with that new, huge system. Since version 1.6, Zend Framework integrates FirePHP in it’s library. FirePHP integrates your PHP application with your Firebug (which is in fact an Firefox addon). The official web site describes FirePHP at it’s best:

FirePHP enables you to log to your Firebug Console using a simple PHP method call.
All data is sent via response headers and will not interfere with the content on your page.
FirePHP is ideally suited for AJAX development where clean JSON and XML responses are required.

From my side, the most important function of FirePHP in Zend Framework is the logging of database queries. To enable logging, just add the following lines to your application.ini:

resources.db.setDefaultTableAdapter = 1
resources.db.params.profiler.enabled  = true
resources.db.params.profiler.class  = Zend_Db_Profiler_Firebug

FirePHP will now add any SQL queries via Zend_DB to the Firebug Console. It also includes the query time and the result table. This allows debugging at a glance.

But be aware of the section you add it to: Always keep in mind that adding it to the [production] section might be a huge security risk if you forget to remove it once you set your page live. On the other hand, you don’t have to remove any of the debug calls in the code and just change profiler.enabled to false for an enviroment.

To write any custom lines to the Firebug debug console, just add the following to your controller:

$writer = new Zend_Log_Writer_Firebug();
$logger = new Zend_Log($writer);

This will create a new logger-object. with $logger->log(‘your message’, Zend_Log::INFO), you can directly write to the console. There are plenty ways to minimize double coded lines. My approach is to add the preDispatch()-function to the controller and assign the logger-object to an private variable of the controller class:

class MyController extends Zend_Controller_Action
{
private $_log_writer;
private $_log_logger;

…

public function preDispatch()
{
$writer = new Zend_Log_Writer_Firebug();
$logger = new Zend_Log($writer);

$this->_log_writer = $writer;
$this->_log_logger = $logger;

parent::preDispatch();
}

You may also be able to create both writer and logger object directly in the bootstrap and assign it to Zend_Registry. I personally prefer this method, because adding both objects to the bootstrap means that they will get loaded at any HTTP request.

To keep the console messages appropriate, you can use any of the priority constants that are provided by Zend_Log. A whole list (seven priorities) is available in the documentation.

Vor ein paar Stunden bin ich auf eine schöne Word-Funktion gestoßen, die ich so noch nicht kannte. Wer Quellen in Dokumente einarbeitet, der verwendet dazu Fußnoten. Fußnoten lassen sich in Word jedoch nicht über die bereits vorgestellt Funktion “Formatvorlagen und Formatierungen” bearbeiten.

Eine Fußnote in Word

und die selbe Fußnote im Seitenfuß..

Das Menü dafür ist versteckt: Man muss den Fußnoten-Text im Seitenfuß markieren. Mit einem Klick mit der rechten Maustaste öffnet sich das Kontextmenü. In diesem findet sich der Punkt “Formatvorlage”. Bei diesem handelt es sich um das übliche Menü für Formatvorlagen in Word.

Kontextmenü der Fußnoten

Im Menü lassen sich nun alle Einstellungen zur Formatierung ändern. Darüber hinaus kann man Fußnoten auch als Tabelle oder als Aufzählungen / Listen darstellen. Die Optionen sind relativ umfangreich. Mit einem Klick auf “Übernehmen” werden die Änderungen auf alle Fußnoten des Dokuments angewendet.

Formatvorlage der Fußnoten

Eine hilfreiche Funktion bei der Formatierung großer Textpassagen oder der Vereinheitlichung eines z.B. aus dem Internet kopierten Textes ist die Funktion “Formatvorlagenanzeige” bei Microsoft Word. In der

• Normalansicht und
• Gliederungsansicht

lässt sich links für alle Absätze die jeweilige Formatvorlage anzeigen.

Mit Hilfe der Trennlinie lässt sich die Größe dieser Spalte variieren.  Die Einstellung zur Anzeige dieser Spalte befindet sich unter Extras > Optionen > Ansicht > Breite der Formatvorlagenanzeige (cm) (Word 2003).

Parallel dazu kann natürlich auch die Leiste “Formatvorlagen und Formatierungen” eingeblendet werden. Über das Menü Format lässt sich diese aktivieren und wird standardmäßig auf der rechten Seite angezeigt.

Für den gerade aktiven Absatz (dieser, in dem der Cursor steht) werden die aktiven Formatvorlagen mit einem dunkelblauen Rand versehen. Um nun schnell die Formatierung zu ändern klicken Sie in einen Absatz oder markieren einzelne Textpassagen oder gleich mehrere Absätze und klicken unter “Wählen Sie eine Formatierung” auf die neue Formatierung.

Wenn Sie nun eine der vorhandenen Formatvorlagen für alle Teile des Dokuments ändern wollen, klicken Sie mit der rechten Maustaste auf diese drauf. Wählen Sie nun Ändern und bearbeiten Sie in dem neuen Fenster unter Format die gewünschten Formatierungen.

Darüber hinaus können Sie selbstverständlich für jede Dokumentvorlage, die Sie zum erstellen neuer Dokumente wiederverwenden, einmalig Formatvorlagen definieren. Das vereinfacht die konsequente Verwendung eines einheitlichen Corporate Design / Corporate Identity erheblich.