Das Stuttgarter Ärzteorchester wollte ein Redesign ihres Layouts.
Wir entschieden uns für Contao als Content Management System (CMS) und ich machte einen Designentwurf und suchte ein Theme, das dazu passte. Ich änderte das Theme, die Bilder und Plugins.
Heute ist das eine moderne Internetseite, sie können einen Newsletter verschicken, ihre Konzerte vor- und nachbereiten und vieles mehr.

 Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• responsive Webdesign: mehrere CSS-Stylesheets um den ganzen Browserraum abzudecken
• PHP / CMS: Anpassung der Software Contao als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)

Und schon haben Duo Camillo eine neue CD – dementsprechend habe ich das Layout angepasst.

Die Website des Kabarettisten-Duo ist von mir komplett neu gemacht worden.

Ein Wunsch an mich war, dass immer die aktuelle CD zu sehen ist, und das Layout schnell angepaßt werden kann.

Neben dem responsive Layout sind die Inhalte auch barrierefrei und semantisch korrekt ausgezeichnet.

Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform, responsive und barrierearm
• responsive Webdesign: mehrere CSS-Stylesheets um den ganzen Browserraum abzudecken
• Suchmaschinenoptimierung
• PHP: Die Rubrik PRODUKTE wurde per PHP umgesetzt.

Auch das Evanglelische Jugendwerk Bezirk Ludwigsburg hat nun von mir ein responsive Layout bekommen.

Flory Kern, ein langjähriger Kunde von mir, bietet jetzt auch Bike-Adventures an.

Dafür hat er bei mir eine neue Website angefragt. Sie sollte so weit wie möglich aussehen, wie die Flory-Kern-Website, aber dennoch ausgerichtet aufs Mountain-Biken.
Und er hat sich eine responsive Website gewünscht.

Top-Bike-Trails besuchen

Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform, responsive und barrierearm
• responsive Webdesign: mehrere CSS-Stylesheets um den ganzen Browserraum abzudecken
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• Suchmaschinenoptimierung
• JavaScript/DOM-Scripting: Umsetzung der Slideshow im Kopfbereich der Webseite und Einbindung der Fotogalerie
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)

Eine Physiotherapie-Praxis in Möglingen kam auf mich zu mit dem Wunsch, endich im Netz vertreten zu sein. Sie wollten sich vorstellen, vorstellen, was sie machen und eine Kontaktmöglichkeit angeben.

Ich habe nach den Wünschen von Frau Raible ein Design entwickelt und dieses dann responsive mit HTML5 und CSS3 umgesetzt.

physiopraxis-rs.de besuchen

Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform, responsive und barrierearm mit HTML5 und CSS3
• responsive Webdesign: mehrere CSS-Stylesheets um den ganzen Browserraum abzudecken
• Suchmaschinenoptimierung

Die Website von Bianca Schultheiß, einer Massagetherapeutin in Bommersheim.

Ich habe die Website designed und dann responsive und mit HTML5 und CSS3 umgesetzt.
Natürlich ist sie auch standardkonform und barrierefrei.

massage-bommersheim.de besuchen

Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform, responsive und barrierearm mit HTML5 und CSS3
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen

Die Netzspielwiese wurde überarbeitet.

Neben dem neuen Layout ist die Netzspielwiese jetzt auch responsive und mit HTML5 und CSS3 geschrieben.
Natürlich ist sie auch standardkonform und barrierefrei.

Das WordPress-Template wurde von mir komplett neu programmiert.

Meine Aufgaben

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform, responsive und barrierearm mit HTML5 und CSS3
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• PHP/CMS: Template erstellt auf Grundlage von WordPress

Heutzutage weiß man nie genau, mit welchem Endgerät eine Internetseite angeschaut wird.
Deshalb ist es umso wichtiger, dass auf einem Handy genauso gut aussieht und benutzbar ist, wie auf einem Riesenmonitor.

Genau diesem Ziel widmet sich das responsive Webdesign.
Im Grunde wird das Design an alle Größen angepasst, und jeweils so verändert, dass es gut aussieht.

Man kann das ganze auf der Netzspielwiese testen, wo Sie gerade sind und auf Top-Bike-Trails.com, einer Internetseite, die ich auch responsive gestaltet habe.

Angebot

Sie haben noch Fragen? Sie möchten auch eine responsive Webseite?

Dann nehmen Sie Kontakt mit mir auf!

Wir hatten gestern folgendes Problem:

Wir haben den neu gekauften USB-Stick in den Computer gesteckt – und: gar nichts!
Er wurde nicht mit einem Laufwerksbuchstabe erkannt, obwohl ihn der PC entdeckt hatte.

Das kann wie folgt gefixt werden:

• Rechter Mausklick auf “Mein Computer” dann linker Mausklick auf “Verwalten”
• Das ist die Computerverwaltung
• Dann auf “Datenträgerverwaltung” unter “Datenspeicher” klicken
• Hier muss der USB-Stick verzeichnet sein und ihn ein Laufwerkbuchstabe zugeordnet sein. Wenn nicht, geht wie folgt vor
• Rechter Mausklick auf den verzeichneten Stick ohne Laufwerksbuchstaben
• Linker Mausklick auf “Laufwerkbuchstaben und -pfade ändern”
• Linker Mausklick auf “ändern” und dann den Laufwerksbuchstaben aussuchen, der einem gefällt.
• Dann OK klicken und das wird Dein Problem vielleicht gelöst haben.
• Wenn das nicht das Problem ist, dann kommt eine Fehlermeldung.

• Dann schließe die Computerverwaltung
• Klicke auf den Startbutton und schreibe da Geräte-Manager herein und aktiviere ihn.
• Nun auf ANSICHT klicken und auf “Ausgeblendete Geräte anzeigen”
• Dort bekommt man ein “Unknown Device” zu sehen.
• Jetzt macht man einen Rechtsklick auf das Unknown Device und DEINSTALLIERT es.
• Und dann gehst Du auf Deinen Computer, Rechtsklick und “nach geänderter Hardware suchen“
• Dann installiert es den USB-Stick neu und dann wird er hoffentlich gesehen.

Das war gestern unser Problem und wir haben alles ausprobiert und sind nach 6 Stunden schließlich auf dieses Video gestoßen und es hat funktioniert!!!!!!

Danke devendra4d!!!

Ski-Berge-Abenteuer

Unter diesem Motto organisieren Flory Kern und sein Team Reisen rund um den Erdball.
Am liebsten in tiefsten unberührten Schnee.

Heliskiing, Freeriding und Skitouring – die Webseite bietet Informationen rund um die faszinierenden Reiseangebote sowie Flory Kern und sein Team.
Und natürlich gibt es viele Fotos und auch einige Videos, auf denen man den Zauber der vergangenen Reisen erleben kann.

Flory und Dagmar haben sich ein neues Layout gewünscht, das den ganzen Monitor ausfüllt.
Außerdem haben sie einen Facebook-Account und wollten diesen mit der Website verknüpfen.

Also, habe ich für sie das Layout angepasst und die Verknüpfung des Facebook-Accounts realisiert.

Flory Kern besuchen

Meine Aufgaben

neben dem Erstellen der Seite:

• Design: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Layout: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• PHP/CMS: Einbinden von Facebook-Plugins
• kontinuierliche Pflege der Website

passnorm – eine Firma für den Einbau von Wärmedämmverbundsystemen

Wieder einmal habe ich als Content Management System  WordPress eingesetzt und angepasst.
Die Website wurde standardkonform (mit validem XHMTL 1.0 + tabellenfreiem CSS-Layout) und weitgehend barrierefrei programmiert.

Ein Wunsch von passnorm war, dass die Referenzen auf einer Deutschlandkarte angezeigt werden. Und diese Referenzobjekte sollten auch von ihnen eingepflegt werden können.
So habe ich mittels php ein eigenes Content Management System programmiert, womit sie die Referenzen mit beliebig vielen Fotos einstellen, bearbeiten und löschen können.

Meine Aufgaben

• Umsetzung in HTML: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• PHP: Progammierung eines eigenen Content Management Systems zum einstellen, bearbeiten und löschen der Referenzen.
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)
• Inhalte: Alle Inhalte eingepflegt

Ich habe ewig gesucht, warum das Autorisierungsscript, das auf vielen Hostern funktioniert, nun, als ich es auf einem anderen Server hosten wollte, auf einmal nicht mehr funktionierte.

Das Wichtigste vorweg: es lag daran, dass PHP als CGI lief.

PHP als Apache 2.0 Handler

Erst einmal das Script, wie es läuft, wenn es als Apache 2.0 Handler gehostet wird, zu erkennen in der phpinfo(); an dieser Variable:

Server API Apache 2.0 Handler

Da reicht es wenn man in die Auentifizierungsseite das eingibt:

<?php

//Benutzername und Passwort für die Authentifizierung
$benutzername = 'name';
$passwort = 'passwort';

if (
(!isset($_SERVER['PHP_AUTH_USER'])) ||
(!isset($_SERVER['PHP_AUTH_PW']))   ||
($_SERVER['PHP_AUTH_USER'] != $benutzername) ||
($_SERVER['PHP_AUTH_PW'] != $passwort)
){

// Zugangsdaten falsch, Authenfizizierungs-Header senden
header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="die seite"');

exit('Tut uns leid, aber auf diese Seite koennen ' .
'Sie nur mit den richtigen Zugangsdaten zugreifen.');
}

?>

Und so läuft es mit PHP als CGI

Zu erkennen an:

Server API CGI/FastCGI 

Zuerst einmal muss in die .htaccess – Datei rein:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
</IfModule>

und dann in das Autorisierungsscript:

<?php

//Benutzername und Passwort fuer die Autentifizierung
$benutzername = 'name';
$passwort = 'passwort';

list($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']) = explode(':' , base64_decode(substr($_SERVER['HTTP_AUTHORIZATION'], 6)));

if (
(!isset($_SERVER['PHP_AUTH_USER'])) ||
(!isset($_SERVER['PHP_AUTH_PW']))   ||
($_SERVER['PHP_AUTH_USER'] != $benutzername) ||
($_SERVER['PHP_AUTH_PW'] != $passwort)
){

// Zugangsdaten falsch, Authenfizizierungs-Header senden
header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="die seite"');

exit('Tut uns leid, aber auf diese Seite koennen ' .
'Sie nur mit den richtigen Zugangsdaten zugreifen.');
}

?>

Dieses jQuery-Script scrollt hoch zum Seitenanfang.

Dafür habe ich, wie “früher”, am Anfang einen Anker im Quellcode gesetzt:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Der Rest ist das eigentliche jQuery-Script …

<script type="text/javascript">

$(document).ready(function() {
    $('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
    });
});

</script>

Durch das <a name=”top”> funktioniert es mit und ohne JavaScript-Unterstützung.

Und alle Links zu anderen Websiten funktionieren auch noch.

via electrictoolbox

mit jQuery hoch- und runterscrollen

Eine andere Möglichkeit, die alle #-Links zum scrollen bringt, aber Links, wie seite.htm#anfang trotzdem im neuen Browserfenster öffnet sieht so aus:

$(document).ready(function() {

    $('a[href^=#]').bind("click", function(event) {
	    event.preventDefault();
	    var ziel = $(this).attr("href");
	    if ($.browser.opera) {
	        var target = 'html';
	    }else{
		var target = 'html,body';
	    }
	    $(target).animate({
		scrollTop: $(ziel).offset().top
	    }, 2000 , function (){location.hash = ziel;});
    });
    return false;

});

Im HTML ist ganz genau gleich wie oben:

<a id="top" name="top"></a>

und dort, wo ich zum Seitenanfang scrollen lassen möchte, den Link zum Seitenanfang gesetzt:

<a href="#top">zum Seitenanfang </a>

Das $('a[href*=#]'), wie bei drweb gefunden, habe ich zu $('a[href^=#]') geändert.

Das deshalb, weil $('a[href*=#]') alle Links aussucht, die eine Raute (#) darin haben. Das ist deshalb ungünstig, weil man, wenn man auf andere Seiten verweist mit einer Raute darin (seite.htm#anfang), der Link einfach nicht mehr funktioniert.

Das konnte ich mit $('a[href^=#]') verhindern. Jetzt sucht er nicht mehr alle Links, die eine Raute haben, sondern nur die, die mit der Raute anfangen.

Rich snippets erweitern die Google-Suchergebnisse um nützliche Infomationen. Ein kleines Foto links neben den Suchergebnissen oder ein Rating zum Beispiel:

Bei Google findet man die Anleitung, welche Rich snippets (Mikrodaten, Mikroformate und RDFa) bei Google eingesetzt werden können.

Es gibt folgende Themengebiete, wo die Rich Snippts Sinn machen (gleich mit den entsprechenden Befehlen dabei):

• Beurteilungen
• Personen
• Produkte
• Unternehmen und Organisationen
• Rezepte
• Ereignisse
• Musik

Ich habe mich für mjammi.de erst mal für Microformate entschieden.

Und mit einem von Google bereitgestelltem Tool kann man dann schon mal testen, wie das aussieht.

Für yahoo, bing (Microsoft) und google gibt es auch ein Datenformat, das für alle gilt und auf Microdaten basiert. Nachzulesen und zu -bauen auf schema.org.

Es gibt eine neue Version des PAC / PDF Accessibility Checkers.

Er testet gratis PDFs schnell auf ihre Behindertenfreundlichkeit, in dem er folgende Punkte überprüft:

1. Dokument als getaggt markiert
2. Dokumenttitel vorhanden
3. Dokumentsprache definiert
4. Zulässige Sicherheitseinstellung
5. Tab folgt Dokumentstruktur
6. Dokument konsistent gegliedert
7. Lesezeichen vorhanden
8. Zugängliche Zeichencodierungen
9. Inhalt vollständig getaggt
10. Logische Lesereihenfolge
11. Alternativtexte vorhanden
12. Korrekte Syntax von Tags/Rollen
13. Ausreichend Kontrast bei Text
14. Leerzeichen vorhanden

Super!

Übrigens kann ich www.access-for-all.ch nur empfehlen!
Es ist eine Stiftung zur behindertengerechten Technologienutzung und dort setzen sich Behinderte und Nicht-Behinderte zusammen und überlegen, was das Netz noch barrierefreier machen soll.

So haben sie zum Beispiel die Schweizer Accessibility-Studie 2011 rausgebracht, die aufzeigt, wie barrierefrei Webseiten in der Schweiz sind:

“Die Stiftung “Zugang für alle” hat 100 Websites von Bund, Kantonen, den zehn grössten Städten, bundesnahen Betrieben, Medien, Stellenbörsen, Hochschulen, öffentlichen Verkehrsbetrieben, Internet-TV-Angeboten und Online-Shops auf ihre Barrierefreiheit für Menschen mit Behinderungen.”

Sie liegt als Download ebenso auf www.access-for-all.ch wie die neue Version des PAC.

Was hab\’ ich schon den Screenshot am Mac gesucht, deshalb jetzt hier ein paar Möglichkeiten zusammengefasst, einen Screenshot zu erstellen:

Cmd + Shift + 3

ganzer Bildschirm wird als Screenshot auf dem Desktop gespeichert

Cmd + Ctrl + Shift + 3

ganzer Bildschirm wird in der Zwischenablage gespeichert

Cmd + Shift + 4

Es erscheint ein Auswahlkreuz und speichert den ausgewählten Bereich als Screenshot auf dem Desktop.

Cmd + Ctrl + Shift + 4

speichert den ausgewählten Bereich in der Zwischenablage.

Cmd + Shift + 4, dann Leertaste

speichert ein ausgewähltes Fenster oder Element als Screenshot auf dem Desktop.

Cmd + Ctrl + Shift + 4, dann Leertaste

speichert das ausgewählte Fenster oder Element in der Zwischenablage.

Bildergalerien

Text anzeigen und verstecken

Menüs

Tooltips

Inhalts-Slider

Formularüberprüfer

Der jFormer ist ein Projekt von zwei Studenten. Er hilft, Formulare mit jQuery zu überprüfen.

Noch mehr Formularüberprüfungs-Plugins

hat Webdesignshock zusammengetragen.

Weitere Infos

jQueryui.com bietet eine Menge fix und fertiger Plugins an, mit denen man Webseiten sehr benutzerfreundlich und gutaussehend gestalten kann.
Unter jQueryui.com/demos sind die jQuery-Plugins auch mit Quellcode und Benutzungshinweisen dargestellt.

jQuerymobile.com ist ein Tool, das alle Mobilen Webinterfaces gleichzeitig bedient.
Unter jQuerymobile.com/demos kann man die jQuery-Syntax gleich im Mobile Phone anschauen.

Ich hatte heute schon wieder ein Problem mit WordPress und UTF-8.

Als ich ein Template für WordPress fertig hatte, waren auf einmal Abstände zwischen

<?php get_header(); ?>
<?php get_sidebar(); ?> und
<?php get_footer(); ?>

Wo kamen die denn her?

Die Antwort war mal wieder UTF-8!

Hat man einen UTF-8-Code mit Unicode-Signatur (BOM) einschließen abgespeichert, wird dem ganzen ein unsichtbarer Tag vorangestellt, der dann das Leerzeichen erzeugt.

Das heißt, ich musste alles nochmal ohne Unicode-Signatur (BOM) einschließen speichern, das hochladen und siehe da, es war wieder alles an seinem Platz!

Mjammi.de – das ist unser Kochblog. Alle Gerichte haben wir gekocht und nur die, die super schmecken, finden ihren Weg ins Blog.

Dabei ist der Blog vollkommen multilingual konfiguriert.
Ganz wichtig war mir auch eine optimale Suchmaschinentauglichkeit. Die Website wurde standardkonform (mit validem XHMTL 1.0 + tabellenfreiem CSS-Layout) und weitgehend barrierefrei programmiert.

Als Content Management System wurde  WordPress eingesetzt und angepasst.

Mjammi.de besuchen

Meine Aufgaben

• Layout: Screendesign, Bildbearbeitung und Web-Optimierung mit Adobe Photoshop
• Umsetzung: tabellenlos, standardkonform und barrierearm mit XHTML und CSS
• Druckversion: zusätzliche CSS-Datei mit Definition spezieller Druckformatierungen
• Kochen, fotografieren und schreiben der Beiträge
• PHP / CMS: Anpassung der Blogsoftware WordPress als CMS (Erstellung und Anpassung der Templates, Auswahl und Einbindung von Plugins)
• multilingual: Erstellung eines Templates, das mit WordPress die Verwendung mehrerer Sprachen zulässt.