CammaBlog » Webdesign http://www.camma.ch die Informationsschnippsel-Sammlung eines Streifzugs durch die Weiten des Webs Fri, 13 Aug 2010 11:17:29 +0000 en hourly 1 HTML Newsletter erstellen http://www.camma.ch/2010/06/11/html-newsletter-erstellen/ http://www.camma.ch/2010/06/11/html-newsletter-erstellen/#comments Fri, 11 Jun 2010 04:41:09 +0000 Lukas Blatter http://www.camma.ch/2010/06/11/html-newsletter-erstellen/ Derzeit beschäftige ich mich gerade mit HTML Newslettern. Nach dem eine Webseitetemplate erstellt wurde, soll nun auch ein Newsletter mit dem gleichen Template erstellt werden.

Problemlos, oder?

Das Problem fängt mit Outlook 2007 an. Microsoft setzt hier anstelle der Render-Engine des IE diese von Word ein. Word kennt die meisten CSS Konventionen nicht. Somit wird ein HTML-Newsletter mit akuteller CSS/HTML Technik nicht korrekt angezeigt. Um einen HTML-Newsletter zu erstellen, welcher auch in Outlook 2007 korrekt angezeigt wird, muss man zum “guten alten” Tabellenlayout greifen.

Aber auch die anderen Mailprogramme sind nicht ganz ohne Tücke.Weitere Infos zum Thema:

msdn.microsoft.com/en-us/library/aa338201.aspx
commadot.com/the-holy-mail
www.contao-community.de/showthread.php?43-Newsletter-und-Outlook-2007
www.flashforum.de/forum/html-und-css/html-newsletter-erstellen-tabellen-oder-divs-body-offet-0-a-264302.html

Ein Webservice zum debuggen von HTML-Newslettern für die einzelnen Mailprogramme:
www.emailonacid.com

Nachtrag auf den Kommentar von Jens (Danke für die Links):
Die wichtigsten Links am Schluss:
www.campaignmonitor.com/css
www.email-standards.org

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/06/11/html-newsletter-erstellen/feed/ 3 iPhone: Weitere Tipps zur Webseiten programmierung http://www.camma.ch/2010/03/11/iphone-weitere-tipps-zur-webseiten-programmierung/ http://www.camma.ch/2010/03/11/iphone-weitere-tipps-zur-webseiten-programmierung/#comments Thu, 11 Mar 2010 05:09:35 +0000 Lukas Blatter http://www.camma.ch/?p=1605 Neben dem bereits veröffentlichten Post können folgende zwei Seiten eine Hilfe bei der Programmierung von Webseiten für’s iPhone sein:

www.vorsprungdurchwebstandards.de/theory/faq-websites-fuer-das-iphone-gestalten
www.kulturbanause.de/2008/09/websites-fur-das-iphone-erstellen-und-optimieren

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/03/11/iphone-weitere-tipps-zur-webseiten-programmierung/feed/ 0 Mega Drop Down Navigation, mit und ohne JavaScript http://www.camma.ch/2010/03/10/mega-drop-down-navigation-mit-und-ohne-javascript/ http://www.camma.ch/2010/03/10/mega-drop-down-navigation-mit-und-ohne-javascript/#comments Wed, 10 Mar 2010 17:10:56 +0000 Lukas Blatter http://www.camma.ch/?p=1595 Heute beim LautundKlar Blog gesehen.

Die Mega Drop Down Navigation ermöglicht eine erweiterte Subnavigation in einer Dropdown Navigation. Die Navigation ist standardmässig mit jQuery aufgebaut. Es gibt auch eine Version ohne jQuery welche jedoch nicht mit dem IE 6 funktioniert.


Hier gibt es die Beschreibung und das Script

Hier gibt es eine Demo der MegaDropdown-Navigation ohne JavaScript

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/03/10/mega-drop-down-navigation-mit-und-ohne-javascript/feed/ 0 Webseiten für iPhone programmieren, Tipps und Tricks http://www.camma.ch/2010/03/09/webseiten-fuer-iphone-programmieren-tipps-und-tricks/ http://www.camma.ch/2010/03/09/webseiten-fuer-iphone-programmieren-tipps-und-tricks/#comments Tue, 09 Mar 2010 20:51:51 +0000 Lukas Blatter http://www.camma.ch/?p=1581 In der letzten Zeit habe ich mich ein wenig mit dem Thema Webseitenoptimierung für’s iPhone auseinander gesetzt. Hier eine kleine Zusammenstellung von Möglichkeiten wie man ein iPhone erkennt und den richtigen Content ausgeben kann.

Mit Javascript

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.domain.ch/iphone";
    }
}

mit PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://m.domain.ch/iphone');
    exit();
}

Beide Beispiele kommen von davidwalsh.name/detect-iphone

iPhone-Bildschirmgrösse als Viewport setzen

Um die Webseitengrösse auf das iPhone zu optimieren kann man die Viewportgrösse definiert werden. Dies erlaubt es den Inhalt auf die Bildschirmbreite zu optimieren.

Mit Viewport werden die Webseiten für die optimale Ansicht herunterskaliert, so dass sie den Brwoser möglichst optimal ausfüllen

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Für das iPhone ein spezielles Icon definieren

Im iPhone kann ein Bookmark einer Internetseite als “App” auf dem Homescreen eingefügt werden. Normalerweise nutzt das iPhone dazu ein Printscreen der Webseite als Icon. Über folgenden Tag kann man dafür jedoch ein eigenes Icon definieren welche für das iPhone optimiert ist.
Die Grafik muss 57x57px gross und im *.png Format gespeichert sein. Der Schein sowie die runden Ecken müssen nicht erstellt werden. Dies macht das iPhone automatisch.

<rel="apple-touch-icon" href="/template/images/iPhoneAppIcon.png"/>

Ändern der Textgrösse beim drehen des iPhones unterbinden

Wenn man das iPhone auf’s Querformat dreht, passt Safari die Schriftgrösse automatisch an. Mit folgendem CSS Befehl kann dies verhindert werden:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

CSS Style nur für’s iPhone

Mit folgender Einstellung kann ein Stylesheet speziell für das iPhone definiert werden:

@media screen and (max-device-width: 480px) {
     /* Hier kommt das CSS für's iPhone rein */
}

Autmatisches resize von Bildern für das iPhone

Auf einer Webseite sind die meisten Bilder grösser als 480 Pixel gross. Damit ist die Wahrscheinlichkeit, dass ein Bild grösser als der Bildschirm ist, sehr gross. Mit folgendem CSS Code kann man die Bilder automatisch auf 100% der Bildschirmgrösse verkleinern. Wenn die Bildschirmgrösse des Geräts maximal 480px beträgt, werden die Bilder nie breiter angezeigt.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Die Toolbar des iPhone per default verstecken

Auf dem kleinen iPhonebildschirm kann es praktisch sein, die Toolbar automatisch auszublenden damit für die Webseite mehr Platz zur Verfügung steht. Dazu kann man folgenden JavaScript Code einsetzen:

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Das Telefon oder die SMS Funktion direkt ansprechen

Auf einer normalen Webseite nutzt man den “mailto:” Link um eine E-Mailadresse zu verlinken welche mit dem Standard-Mailprogramm geöffnet wird. Im iPhone gibt es die Möglichkeit mit den beiden Prefixen “tel” und “sms” direkt die ensprechenden Applikationen auf dem iPhone ansprechen.

<a href="tel:12345678900">Hier klicken zum anrufen</a>
<a href="sms:12345678900">Sende mir ein Text</a>

Pseudo :hover classes für das iPhone

Ohne Maus auf dem iPhone kann auch schlecht eine :hover class ausgeführt werden. Mit ein wenig JavaScript kann die :hover class dennoch angesprochen werden wenn der Finger auf dem Link ruht:

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Zusätzlich muss dazu das Stylesheet um folgendes ergänzt werden:

a:hover, a.hover {
    /* der gewünschte Hover Effekt */
}

Gefunden auf catswhocode.com

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/03/09/webseiten-fuer-iphone-programmieren-tipps-und-tricks/feed/ 1 25 interessante jQuery Plugins http://www.camma.ch/2010/03/09/25-interessante-jquery-plugins/ http://www.camma.ch/2010/03/09/25-interessante-jquery-plugins/#comments Tue, 09 Mar 2010 20:11:45 +0000 Lukas Blatter http://www.camma.ch/?p=1579 Gefunden auf

http://speckyboy.com/2010/03/01/25-amazing-and-fresh-jquery-plugins/

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/03/09/25-interessante-jquery-plugins/feed/ 0 WordPress robots.txt einrichten http://www.camma.ch/2010/03/03/wordpress-robots-txt-einrichten/ http://www.camma.ch/2010/03/03/wordpress-robots-txt-einrichten/#comments Wed, 03 Mar 2010 15:56:45 +0000 Lukas Blatter http://www.camma.ch/?p=1572 Die robots.txt Datei dient dazu einer Suchmaschine zu sagen welche teile des Blogs indexiert werden sollen und welche nicht. Dadurch kann man z.B. auch vermeiden dass über Google nach exploits in Plugins gesucht werden kann, da der Plugin-Ordner über die robots.txt Datei ausgeklammert wurde.

Des weiteren kann man über die robots.txt eine Sitemap der Seite verlinken welche es den Suchmaschinen einfacher macht, die Seite zu indexieren.

Hier der Auszug aus der robots.txt. Diese muss im Hauptverzeichnis der Domain sein.

User-agent: *
Sitemap: http://www.camma.ch/sitemap.xml

# Nicht indexieren aller Dateien in folgenden Verzeichnissen
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wpcontent/themes/
Disallow: /wp-content/plugins/
Disallow: /trackback/
Disallow: /*?*
Disallow: */trackback/

User-agent: Googlebot
# Unterbinden der Indexierung aller Dateien mit diesen Endungen
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*.gz$
Disallow: /*.cgi$
Disallow: /*.wmv$
Disallow: /*.png$
Disallow: /*.gif$
Disallow: /*.jpg$
Disallow: /*.cgi$
Disallow: /*.xhtml$
Disallow: /*.php*
Disallow: */trackback*
Disallow: /*?*
Disallow: /category/
Disallow: /tag/
Disallow: /archives/
Disallow: /feed/
Disallow: /wp-*
Allow: /wp-content/uploads/

# Google Image erlauben alle Bilder zu indexieren
User-agent: Googlebot-Image
Allow: /*

# Dem AdSense Bot erlauben die Seite zu indexieren
User-agent: Mediapartners-Google*
Disallow: /*?*
Allow: /wp-content/
Allow: /tag/
Allow: /category/
Allow: /*.php$
Allow: /*.js$
Allow: /*.inc$
Allow: /*.css$
Allow: /*.gz$
Allow: /*.cgi$
Allow: /*.wmv$
Allow: /*.cgi$
Allow: /*.xhtml$
Allow: /*.php*
Allow: /*.gif$
Allow: /*.jpg$
Allow: /*.png$

# Archivierung der Seite unterbinden
User-agent: ia_archiver
Disallow: /

# duggmirror unterbinden
User-agent: duggmirror
Disallow: /

Die sitemap.xml kann durch das Plugin Google XML Sitemaps erstellt werden.

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/03/03/wordpress-robots-txt-einrichten/feed/ 0 Verträge in der Internetbranche http://www.camma.ch/2010/02/27/vertraege-in-der-internetbranche/ http://www.camma.ch/2010/02/27/vertraege-in-der-internetbranche/#comments Sat, 27 Feb 2010 20:02:55 +0000 Lukas Blatter http://www.camma.ch/?p=1570 Seit längerem gibt es im CMS Made Simple Forum einen Thread zum Thema Webseitenunterhalt.

Dabei gab es schon mal ein interessantes Muster für einen Webseitenunterhalts-Vertrag:

Beispiel eines Wartungsvertrags.

Neulich wurde ein interessanter Link zu den Härting Rechtsanwälten gepostet. Hier gibt es diverse Vertragsbeispiele für den Unterhalt einer Webseite, Webhosting, Content oder Software. Es sind für verschiedene Informatikbereiche Beispiele dabei.

Hier gehts zur Webseite der Härting Rechtsanwälte.

Hinweis: Die Verträge bauen auf deutschem Recht. Somit können bestimmte Formulierungen oder Paragrafen in der Schweiz anders sein.

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/02/27/vertraege-in-der-internetbranche/feed/ 0 CSS: Layouts mit 100% Höhe http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/ http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/#comments Tue, 12 Jan 2010 05:27:10 +0000 Lukas Blatter http://www.camma.ch/?p=1488 Wenn das Layout einer Seite 100% hoch sein muss, gibt es einiges was beachtet werden muss. Als Vorlage kann dieses Example genommen werden.

Vorbereitung des Stylesheets:

html,body {
    margin:0;
    padding:0;
    height:100%; /* braucht es für die min-height des Containers */
}

Danach muss für die gesamte Höhe ein Container erstellt werden:

div#container {
    position:relative; /* braucht es für die Footer Position*/
    margin:0 auto; /* Zentriert die Seite (nicht in IE5) */
    width:750px;
    height:auto !important; /* normale Browser */
    height:100%; /* IE6: setzt dies wie min-height um*/
    min-height:100%; /* normale Browser */
}

Der Head und der Content können nun normal platziert werden. Damit nun der Footer der Seite immer am unteren Rand klebt, muss folgendes im Stylesheet definiert werden:

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* Positioniert dies ganz unten */
}

Related Posts:

Twitter It!]]> http://www.camma.ch/2010/01/12/css-layouts-mit-100-hoehe/feed/ 0 .htaccess ReWrite Rules http://www.camma.ch/2009/09/08/htaccess-rewrite-rules/ http://www.camma.ch/2009/09/08/htaccess-rewrite-rules/#comments Tue, 08 Sep 2009 09:00:20 +0000 Lukas Blatter http://www.camma.ch/?p=1361 Vor kurzem bin ich über folgenden Blog-Eintrag gestolpert:

http://sw-guide.de/webdesign-und-entwicklung/htaccess-mod_rewrite-fuer-cms-und-blog/

Im Eintrag wird die Verwendung von ReWrite Rules mit .htaccess detailliert und mit vielen Details beschrieben. Absolut empfehlenswert für nicht so geübte .htaccess Programmierer.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/09/08/htaccess-rewrite-rules/feed/ 0 jQTouch, jQuery für’s iPhone http://www.camma.ch/2009/09/07/jqtouch-jquery-fuers-iphone/ http://www.camma.ch/2009/09/07/jqtouch-jquery-fuers-iphone/#comments Mon, 07 Sep 2009 04:53:39 +0000 Lukas Blatter http://www.camma.ch/?p=1354 auf Heise gefunden:

jQTouch, ein jQuery-Plugin dient dazu einfacher Web-Apps für iPhone, Palm Pre, Android und andere Smartphone zu entwickeln. Eine Betaversion steht ab sofort zur Verfügung und ermöglicht die Entwicklung von Applikationen mit HTML, CSS und JavaScript für WebKit-Browser.

Der Vorteil von jQTouch ist der Zugriff auf bestimmte Hardware-Funktionen des Geratäes. So kann z.B. der Bewegungssenor oder auch Multi-Touch angesprochen werden. So wird es möglich Applikationen für ein meherere verschiedene Geräte zum laufen zu bringen ohne diese beim jeweiligen App-Store anmelden zu müssen. Es lassen sich damit auch neue Themes einrichten. Somit lässt sich die Web-App einer normalen App sehr ähnlich gestalten.

Für beides stellt jQTouch passende Events zur Verfügung, an die der Entwickler wie üblich Callbacks zur Verarbeitung bindet. Ein Handler, der auf das Drehen des Geräts reagiert, könnte etwa so aussehen.

$(function(){
    $('body').bind('turn', function(event, info){
          console.log(info.orientation); // landscape or portrait
    });

Weitere Informationen:
jQtouch.com
Code auf CoogleCode

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/09/07/jqtouch-jquery-fuers-iphone/feed/ 0 Transparente PNG Grafiken im Internet Explorer http://www.camma.ch/2009/08/19/transparente-png-grafiken-im-internet-explorer/ http://www.camma.ch/2009/08/19/transparente-png-grafiken-im-internet-explorer/#comments Wed, 19 Aug 2009 04:44:24 +0000 Lukas Blatter http://www.camma.ch/?p=1328 Der Internet Explorer hat mit transparenten PNG Dateien mühe. Auf folgender Seite findet man eine Lösung für den Internet Explorer:
http://homepage.ntlworld.com/bobosola/index.htm

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/08/19/transparente-png-grafiken-im-internet-explorer/feed/ 0 Pretty URL in CMS Made Simple http://www.camma.ch/2009/08/14/pretty-url-in-cms-made-simple/ http://www.camma.ch/2009/08/14/pretty-url-in-cms-made-simple/#comments Fri, 14 Aug 2009 18:08:19 +0000 Lukas Blatter http://www.camma.ch/?p=1314 In der Standardinstallation des Open Source Content Managment Systems CMS made Simple werden URLs mit einem Query String erzeugt. Die sehen dann z.B. so aus: http://www.domainname.ch/index.php?page=Kontakt

Um suchmaschinenfreundliche URLs (Pretty URLs) zu erzeugen, nutzt CMS made simple das Apachemodul mod_rewrite. Um dies zu aktivieren muss man in der Konfigurationsdatei config.php folgende Änderungen vornehmen:

#------------
#URL Settings
#------------
$config['url_rewriting'] = 'mod_rewrite';
#Endung der virtuellen Dateien
$config['page_extension'] = '.htm';
#Wenn die Seiten in einer Baumstruktur aufgebaut werden sullen  (z.B. http://www.domainname.ch/parent/parent/childpage)
$config['use_hierarchy'] = true;
$config['query_var'] = 'page';

Im 2. Schritt passt man noch die .htaccess an:

Options +FollowSymLinks
  RewriteEngine on
  RewriteBase /
 
  # ReWrite Rule für News-Feed
  RewriteRule ^News/rss(.+)$ index.php?page=News/rss$1 [S=1]
 
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+).htm$ index.php?page=$1 [QSA]

# Beginn CMSMS Security Einstellungen.

# Directory Browsing abschalten
Options -Indexes

# Zugriff auf config.php verbieten.

<Files "config.php">
order allow,deny
deny from all
</Files>

# No sense advertising what we are running
ServerSignature Off

# Spambots nach User_agent aussperren
RewriteCond %{HTTP_USER_AGENT} ^.*Whacker.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailCollector [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*FileHound.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*TurnitinBot.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*JoBo.*$ [OR]
RewriteCond %{HTTP_USER_AGENT} ^.*adressendeutschland.*$
RewriteRule ^.* - [F]

# 1. unterbindet, das fremde Seiten geladen werden
RewriteCond %{QUERY_STRING} ^(.*)=http://(.*) [OR]

# 2. blockiert libwww (Ausgangspunkt für diverse Hackversuche)
RewriteCond %{HTTP_USER_AGENT} ^libwww [OR]

# Blockiert Skripte, die versuchen, base64 encodierten Unsinn via URL zu versenden
RewriteCond %{QUERY_STRING} base64_encode.*\(.*\) [OR]

# Blockiert Skripte, die einen a ********** Tag in der URL enthalten
RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]

# Blockiert Skripte, die versuchen, PHP GLOBALS Variablen via URL zu ver‰ndern
RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]

# Blockiert Skripte, die versuchen, eine _REQUEST Variable via URL zu ver‰ndern
RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) [OR]

# END Optional Settings

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/08/14/pretty-url-in-cms-made-simple/feed/ 0 MySQL: Falsche Kodierungen in der Datenbank korrigieren http://www.camma.ch/2009/08/13/mysql-falsche-kodierungen-in-der-datenbank-korrigieren/ http://www.camma.ch/2009/08/13/mysql-falsche-kodierungen-in-der-datenbank-korrigieren/#comments Thu, 13 Aug 2009 05:12:05 +0000 Lukas Blatter http://www.camma.ch/?p=1310 Wer mit falschen Kodierungen in der Datenbank zu kämpfen hat, könnte ev mit diesen beiden Links eine Lösung für das Problem finden:

http://forum.mysqldumper.de/die-umlautproblematik-was-wieso-was-tun-t2313.html
http://forum.mysqldumper.de/dsb-s-umlaut-korrektur-duk-t2406.html

Einen weiteren Hinweis wie man falsche Kodierungen entfernt bei Hani Ibrahim

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/08/13/mysql-falsche-kodierungen-in-der-datenbank-korrigieren/feed/ 0 PHP Shell – Linux Shell via PHP Script http://www.camma.ch/2009/08/12/php-shell-linux-shell-via-php-script/ http://www.camma.ch/2009/08/12/php-shell-linux-shell-via-php-script/#comments Wed, 12 Aug 2009 19:28:08 +0000 Lukas Blatter http://www.camma.ch/?p=1288 Heute bin ich per Zufall über PHP Shell gestolpert. Bei der PHPShell handelt es sich um ein PHP]Script von Martin Geisler welche Webhosting-Kunden ohne SSH-Zugriff eine Shell-Ähnliche Oberfläche zur Verfügung stellt.

PHP Shell kann unter phpshell.sourceforge.net als .zip oder .tar.bz2 heruntergeladen werden. Die Installation ist denkbar einfach. Es müssen die zwei Files phpshell.php und config.php auf den Webserver übertragen werden. In der Datei config.php muss ein Benutzer angelegt werden, der auf die PHP Shell Zugriff hat. Um das Passwort des Benutzers zu verschlüsseln, gibt es zusätzlich die Datei pwhash.php. Die Datei pwhash.php aufrufen, Benutzername und Passwort eingeben und danach diese in die config.php einfügen.

pwhash.php

pwhash.php

Als zusätzlichen Schutz empfiehlt es sich auf jeden Fall das Verzeichnis in dem sich phpshell befindet mit einem anderen Namen zu benennen sowie per .htaccess vor unbefugtem Zugriff zu schützen.
Genutzt werden können die meisten nicht-interaktiven Programme, welche auf dem Webserver installiert sind und sich auch mit einer normalen Shell nutzen ließen. Interaktive Programme, wie Editoren (z.B. vim) können nicht genutzt werden. Hierfür gibt es jedoch eine Erweiterung der PHPShell von Tobias Unger welche von seiner Website downgeloaded werden kann.

phpshell

Wie auf dem PrintScreen oben zu erkennen ist, lassen sich mit PHPShell auch ohne Probleme Shellscripte aufrufen. In diesem Fall ein Backupscript das jeden Tag den Webspace auf einen externen FTP Server backupt.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/08/12/php-shell-linux-shell-via-php-script/feed/ 0 jScrollPane http://www.camma.ch/2009/08/11/jscrollpane/ http://www.camma.ch/2009/08/11/jscrollpane/#comments Tue, 11 Aug 2009 16:51:28 +0000 Lukas Blatter http://www.camma.ch/?p=1283 jScrollPane ist ein Plugin für jQuery um die Scrolleiste im Browser zu gestalten.

jScrollPane

jScrollPane

jScrollPane ermöglicht das ersetzen der Standard Vertikal-Scrolleisten des Browsers in einem Blockelement mit einem overflow:auto Style. Die ScrollPane kann sehr einfach über ein simples Stylesheet gesteuert werden. jQuery läuft in allen Browsern welche jQuery unterstützen. Unterstützt ein Browser jQuery nicht, werden die normalen Scrolleisten angezeigt.

Beispiele eines Einbaus ist z.B. hier zu finden:

www.klein-abend.ch

jScrollPane lässt sich sehr einfach einsetzen. Eingebunden wird es so:

<script type="text/javascript" src="scripts/jquery-1.2.x.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />

Die Dateien dazu kann man auf der jScrollPane Seite herunterladen

Um jScrollPane für einen CSS Container zu aktivieren, muss folgender Code ins Template eingebaut werden:

 <script type="text/javascript">           
 $(function()  
 {
     $('#container').jScrollPane({showArrows:true, dragMaxHeight:50});
 });           
 </script>

#container muss mit dem Namen des entsprechenden CSS Containers eingebaut werden.

Danach kann in der jScrollPane.css Datei der Style entsprechend der Wünsche angepasst werden.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/08/11/jscrollpane/feed/ 0 Browsershots – PrintScreens einer Webseite mit verschiedenen Browsern http://www.camma.ch/2009/07/10/browsershots-printscreens-einer-webseite-mit-verschiedenen-browsern/ http://www.camma.ch/2009/07/10/browsershots-printscreens-einer-webseite-mit-verschiedenen-browsern/#comments Fri, 10 Jul 2009 18:49:06 +0000 Lukas Blatter http://www.camma.ch/?p=1145 Statt jede Menge verschiedene Browser zu installieren um eine Webseite zu testen, reichen in der Regel drei verschiedene Browser. Z.B. IE7, Firfox und Safari und Mac. Für alle restlichen Browser gibt es Angebote wie z.B. Browsershots.org:

http://browsershots.org/

Hier lassen sich mit Angabe einer URL PrintScreen von über 50 verschiedenen Browsern mit 3 verschiedenen Betriebssystemen herunterladen. Es werden Windows, Linux und Mac unterstützt.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/07/10/browsershots-printscreens-einer-webseite-mit-verschiedenen-browsern/feed/ 0 JonDesign’s Smooth Gallery http://www.camma.ch/2009/06/18/jondesigns-smooth-gallery/ http://www.camma.ch/2009/06/18/jondesigns-smooth-gallery/#comments Thu, 18 Jun 2009 18:50:57 +0000 Lukas Blatter http://www.camma.ch/?p=1090 Smooth Gallery ist eine coole JavaScript Gallery um Bilder zu präsentieren. Auf eine Fotografenseite würde eine solche Gallery gut passen.

Falls ich mal sowas ähnliches brauche, werde ich schauen, ob ich die Smooth Gallery benutzerfreundlich in ein CMS einbauen kann.

smoothgallery

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/06/18/jondesigns-smooth-gallery/feed/ 0 Lightbox Plugins http://www.camma.ch/2009/06/17/lightbox-plugins/ http://www.camma.ch/2009/06/17/lightbox-plugins/#comments Wed, 17 Jun 2009 20:15:34 +0000 Lukas Blatter http://www.camma.ch/?p=1081 Um Detailbilder auf einer Webseite anzuzeigen, benutzen viele eines der vielen Lightbox Scripts. Ich selber setzte z.B. auf diesem Blog auf FancyBox.

Wer sich ein Überblick über die verschiedenen Scripts und ihr können machen will, findet auf dieser Seite eine ganze Auflistung verschiedener Scripts:

http://planetozh.com/projects/lightbox-clones/

Die einzelnen Projekte können nach verschiedenen Kriterien sortiert werden.

Mir gefallen darunter vorallem

je nach Auslastung Beruflich und Privat werde ich in den nächsten Tagen ein oder mehrere Posts zu diesem Thema machen. Ich bin im Moment daran dies für CMS Made Simple aufzuarbeiten und suche im Moment noch nach dem geeigneten Lightbox Script dafür. Möglicherweise werde ich mehrere einsetzen. Je nach Kundenwunsch.

Was mir an den meisten Scripts missfällt, ist ihre Schwerfälligkeit. Es ist ja schon schön, wenn alles schön animiert nach einander abläuft, aber eigentlich will ich das Bild sehen und nicht wie das Script schön läuft… Die oben genannten Scripts überzeugen mich deshalb geschwindigkeitsmässig am meisten.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/06/17/lightbox-plugins/feed/ 0 Barrierenfreiheit http://www.camma.ch/2009/03/17/barrierenfreiheit/ http://www.camma.ch/2009/03/17/barrierenfreiheit/#comments Tue, 17 Mar 2009 20:02:50 +0000 Lukas Blatter http://www.camma.ch/2009/03/17/barrierenfreiheit/ Auf dem Namics-Blog gab es vor kurzem einen Beitrag über die Barrierefreiheit von Webseiten. Um Einschränkungen der Nutzer selber erfahrbar zu machen, konnten die Behinderungen von Nutzern mit einem speziellen Anzug simuliert werden.

So erschwert der Anzug etwa das Strecken der Arme und Bandagen behindern das Beugen der Ellbogen und Knie. Durch zusätzliche Gewichte und Gehörschutz wird die Testperson weiter eingeschränkt. Durch eine Brille und einen Helm mit orangem Visir wird die Sehstärke minimiert und das Gesichtsfeld verkleinert.

Durch die so demonstrierten Einschränkungen konnte sich jeder Entwickler von der Notwendigkeit einer Barrierenfreiheit von Internetseiten und weiteren Angeboten überzeugen lassen.

barrierenfreiheit

Zum Blog Eintrag von Namics.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/03/17/barrierenfreiheit/feed/ 0 YAML – Yet Another Multicolumn Layout http://www.camma.ch/2009/03/04/yaml-yet-another-multicolumn-layout/ http://www.camma.ch/2009/03/04/yaml-yet-another-multicolumn-layout/#comments Wed, 04 Mar 2009 21:00:28 +0000 Lukas Blatter http://www.camma.ch/?p=665 YAML ist ein praktisches CSS Framework zur mehrspaltige CSS Seiten. Für diverse CMS System gibt es fertige Vorlagen die direkt integriert werden können. So z.B. für Typo3, Joomla aber auch CMS Made Simple.

Im Moment bin ich daran basierend auf diesem Framework eine Webseite zu erstellen. Absolut praktisch dieses Teil.

Alle Informationen zu YAML finden sich auf www.yaml.de

Für Bücherwürmer gibt es zu YAML auch ein Buch zu kaufen in dem der Aufbau des CSS Frameworks beschrieben ist.

Related Posts:

Twitter It!]]> http://www.camma.ch/2009/03/04/yaml-yet-another-multicolumn-layout/feed/ 0