jQuery iFrame resizing

Je nach Konstellation muss zur Darstellung eines Inhalts ein iFrame verwendet werden. Wenn der Inhalt des iFrames ändern kann, sollte sich auch das iFrame dynamisch diesen Voraussetzungen anpassen können.

Dazu habe ich folgende 2 Scripte gefunden welche auf jQuery aufsetzen:

Autoheight
Frame Sizing

Wichtiger Hinweis: Die Scripts funktionieren nur, wenn die iFrames von der gleichen Domain kommen. Dies ist eine Sicherheitseinschränkung von JavaScript.

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

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

Webseiten für iPhone programmieren, Tipps und Tricks

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



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.



Ä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.


Hier klicken zum anrufen
Sende mir ein Text

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

WordPress robots.txt einrichten

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: https://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.

CSS: Layouts mit 100% Höhe

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 */
}

CSS: Links mit Datei-Icon ergänzen

Um einem Link ein Icon hinzufügen gibt es verschiedene Möglichkeiten. JavaScript, Prefilter und CSS. Die CSS Möglichkeit möchte ich hier ein wenig näher Betrachten.

Vorab: IE6 unterstützt dies nicht.

Unter CSS2/CSS3 gibt es sogenannte Attribut-Selektoren. Attribut-Selektoren sind Teil der CSS2/CSS3 Spezifikation und extrem effektiv. Sie erlauben Dinge, die man bis jetzt nur mit Javascript machen konnte.

Die Attribut-Selektoren beziehen sich auf die Attribute von Elementen. Man kann diese Attribute (im Beispiel fett geschrieben) direkt ansprechen, auswerten und die Darstellung der dazugehörigen Elemente spezifisch definieren.
Beispiel: <a href=”“ title=”“> oder <img alt=““ src=”“ alt=”“ />

Folgende Operatoren zum Auswerten der Attribute gibt es. Als Beispiel nehmen wir hier den href Attribut einens Links. <a href=“foobar>www.camma.ch</a>

a[title]
Passt auf ein Element a mit dem Attribut title.

a[href=“foobar“]
Passt auf ein Element a mit Attribut href und dem exakten Wert foobar.

a[href~=“foobar“]
Passt auf ein Element a mit Attribut href, dessen durch Leerzeichen getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert „foobar baz blah“ zutreffen.

a[href|=“foobar“]
Passt auf ein Element a mit Attribut href, dessen durch Trennstriche (-) getrennte Liste von Werten foobar enthält.

a[href^=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar beginnt. Würde auch auf den Attribut-Wert foobarabo zutreffen.

a[href$=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar endet. Würde auch auf den Attribut-Wert abofoobar zutreffen.

a[href*=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert foobar an beliebiger Stelle in der Zeichenkette enthält.

Beispiel für Datei-Icons


/* PDF-Links */
a[href$=‘.pdf‘] {
background: url(../images/icon-pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Excel-Links */
a[href$=‘.xls‘], a[href$=‘.csv‘], a[href$=‘.xlw‘], a[href$=‘.xlt‘] {
background: url(../images/icon-excel.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* Word-Links */
a[href$=‘.doc‘], a[href$=‘.rtf‘], a[href$=‘.txt‘] {
background: url(../images/icon-word.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* Zip-Links */
a[href$=‘.zip‘], a[href$=‘.rar‘], a[href$=‘.gzip‘] {
background: url(../images/icon-zip.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}

Externe Links / mailto:


/* mailto: Links */
a[href^=“mailto:“], a[href*=“UnCryptMailto“] {
background: url(../images/icon-mailto.png) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* externe: Links */
a[href^=“http://“] {
background: url(../images/icon-extern.png) right center no-repeat;
padding-right:15px;
}

Natürlich kann man auch externe Links oder mailto: Links kennzeichnen. Da ich die JavaScript Funktion UnCryptMailto nutze, habe ich auch diesen Teil integriert.

Quellen

http://www.w3.org/TR/css3-selectors/

Für IE6 gibt es die Möglichkeit von jQuery:
Rebecca Murphy

.htaccess ReWrite Rules

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.