Ich habe gestern abend im Bloghintergrund etwas aufgeräumt und dabei bemerkt, dass sich das Global Translator Plugin sehr auf die Performance und den Speicherplatz des Servers auswirken kann – negativ gemeint.

Beschäftigen wir uns also kurz mit der Optimierung von Global Translator.

Global Translator (GT) ermöglicht die Übersetzung aller Artikel in so ziemlich jede Sprache der Welt.
Das Plugin greift dafür auf eine der folgenden Übersetzungs-Engines zurück: Google Translation Services, Promt Online Translator, Altavista Babel Fish oder FreeTranslator. Google ist dabei standardmäßig aktiviert und auch mein Favourit.

Die verfügbaren Sprachen kann man im Einstellungsmenü ebenfalls auswählen.

Tipp 1: Wählt so wenig Sprachen wie möglich! Jeder Artikel den ich schreibt und veröffentlicht, wird automatisch in alle aktivierten Sprachen übersetzt und abgespeichert. Habt ihr also 18 Sprachen aktiviert und veröffentlich 1 Artikel so füllt sich der GT Cache mit 18 neuen Dateien. Also, prüft eure Blogstatistiken aus welchen Ländern wieviele Besucher kommen und aktiviert vielleicht die Top 5 oder Top 10 Besucherländer.
Tipp 2: Aktiviert die Option „Use a single and optimized image map“ mit der Anzahl eurer aktivierten Sprachen. Damit hat der Server bei jedem Seitenaufruf nicht 9 einzelne Flaggen zu laden (9 Requests) sondern nur 1 Bild.

Weiter in den Einstellungen:

Lasst euch mal die Cache Statistics anzeigen, wenn ihr Global Translator schon länger nutzt. Folgendes könnte passieren:

Tipp 3: Es bietet sich hier sichtlich an, hin und wieder aufzuräumen. Vor allem, wenn man die Spracheinstellungen ändert, also Sprachen entfernt. Die bereits gecachten Seiten würden dort in dem Speicher weiterhin verrotten, obwohl sie niemand aufrufen kann.

Und noch so ein Hammer: die debug.log

Auch diese kann nach geraumer Zeit seeehr groß werden, bei mir fasst sie nach wenigen Monaten schon 1GB FTP Speicherplatz! Daher
Tipp 4: Deaktiviert die Option „Enable Debug“ und löscht diese Datei. Außer ihr habt Gründe, regelmäßig in die debug.log zu schauen weil es Probleme mit dem Global Translator gibt. Aber das sollte nicht der Fall sein.

So denn, aufgeräumt, ein Traum 🙂

Mein letzter Post erklärte die spezielle Behandlung von Internet Explorer 6 (und jünger) in meinem Blog. Es wird statt dem eigentlich Inhalt ein bisschen Text und Links zu vernünftigen Browsern angezeigt.
Ich wollte dieses „Feature“ jetzt mit nur 1 Zeile realisieren. Den CSS und HTML Code in der tatsächlich index stehen zu haben ist unschön.
Daher präsentiere ich:

IE-Buster

a small jQuery Anti-IE Plugin

Frei nach dem Motto:
„If there’s something strange
in the internet.
Who ya gonna call?“

IE-Buster!!!
😉



Das Plugin ist nur 2,3KB groß und damit ein Leichtgewicht im Anti IE Geschäft. Es epfiehlt sich also wenn man keinen besonders hübschen und funktionsreichen Abgang beim IE sucht, sondern etwas kleines, schnelles und unkompliziertes.
Einzige Voraussetzung: jQuery muss eingebunden sein!

Code
$(document).ready(function() {
  $("head").append('<!--[if lte IE 6]><style type="text/css">#ie6-warning { display: block; width: 100%; height: 100%; background-color: white; position: absolute; z-index: 1111; top: 0px; left: 0px; color: black; padding: 10%; font-size: 17px; } #ie6-warning td { border: 1px solid #eee; padding: 4px; color: white; } #ie6-warning a { color: blue; }</style><![endif]--><!--[if gt IE 6]><style type="text/css">#ie6-warning { display: none!important; }</style><![endif]-->');
  $("body").append('<div id="ie6-warning">Ihr Browser ist zu alt um diese Internetseite korrekt darzustellen.<br/>Bitte aktualisieren Sie Ihren Browser oder installieren Sie einen anderen modernen Browser.<br/><br/>Your browser is too old to display this website correctly.<br/>Please update your browser or install another modern browser.<br/><br/><br/><table cellpadding="10"><tr><td></td><td>Google Chrome</td><td>Mozilla Firefox</td><td>Opera</td><td>Apple Safari</td><td>Microsoft Internet Explorer</td></tr><tr><td>Download (DE):</td><td><a href="http://www.google.de/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/de/firefox/">Link</a></td><td><a href="http://de.opera.com/">Link</a></td><td><a href="http://www.apple.com/de/safari/">Link</a></td><td><a href="http://www.microsoft.com/germany/windows/internet-explorer/">Link</a></td></tr><tr><td>Download (EN):</td><td><a href="http://www.google.com/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/en/firefox/">Link</a></td><td><a href="http://www.opera.com/">Link</a></td><td><a href="http://www.apple.com/safari/">Link</a></td><td><a href="http://www.microsoft.com/windows/internet-explorer/">Link</a></td></tr><tr><td>Suchen/Search for:</td><td><a href="http://www.google.com/search?q=chrome">Link</a></td><td><a href="http://www.google.com/search?q=firefox">Link</a></td><td><a href="http://www.google.com/search?q=opera">Link</a></td><td><a href="http://www.google.com/search?q=safari">Link</a></td><td><a href="http://www.google.com/search?q=internet+explorer">Link</a></td></tr></table><br/><br/><span>by <a href="http://it-stack.de">Hannes Schurig</a></span></div>');
});
Download

Download des Plugins v1.2

ie-buster-1.2 [.js] (Rechtsklick -> Speichern unter)
Nicht vergessen, regelmäßig nach Updates schauen.

oder

Einbinden der neuesten Version von meinem Server

<!-- <script type="text/javascript" src="jquery-min.js"></script> // (noch) Voraussetzung: jQuery! -->
<script type="text/javascript" src="http://public.hannes-schurig.de/IE-Buster/ie-buster-latest.js"></script>
Changelog


v1.2 – Anzeigefehler behoben
v1.1 – Anzeigefehler behoben

Gestern habe ich den IETester vorgestellt. Viele Versionen des Internet Explorer in einem Programm. Mir ist mal wieder aufgefallen, dass mein Blog im Internet Explorer 6 (und älter) nicht ansatzweise richtig dargestellt wird. Ich habe mich also (mal wieder) entschlossen, den IE 6 (und älter) aus meinem Blog zu entfernen.
Nachdem ich mehr oder weniger erfolgreich 2, 3 WordPress Plugins und 2, 3 andere Codeschnipsel ausprobiert hatte, was alles nicht so wirklich optimal lief, hab ich mich entschlossen meine eigene Anti-IE6 Warnung zu basteln.

Code
<!--[if lte IE 6]>
<style type="text/css">
.BGC { display: none!important; } 
#ie6-warning td { border: 1px solid #eee; padding: 4px; } 
#ie6-warning { display: block; 600px; height: 100%; color: white; margin: 10%; font-size: 17px; } 
</style>
<![endif]-->

<body>
<div id="ie6-warning">
  Ihr Browser ist zu alt um diese Internetseite korrekt darzustellen.<br/>
  Bitte aktualisieren Sie Ihren Browser oder installieren Sie einen anderen modernen Browser.<br/><br/>
  Your browser is too old to display this website correctly.<br/>
  Please update your browser or install another modern browser.<br/><br/><br/>
  <table cellpadding="10">
    <tr><td></td><td>Google Chrome</td><td>Mozilla Firefox</td><td>Opera</td><td>Apple Safari</td><td>Microsoft Internet Explorer</td></tr>
    <tr><td>Download (DE):</td><td><a href="http://www.google.de/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/de/firefox/">Link</a></td><td><a href="http://de.opera.com/">Link</a></td><td><a href="http://www.apple.com/de/safari/">Link</a></td><td><a href="http://www.microsoft.com/germany/windows/internet-explorer/">Link</a></td></tr>
    <tr><td>Download (EN):</td><td><a href="http://www.google.com/chrome/">Link</a></td><td><a href="http://www.mozilla-europe.org/en/firefox/">Link</a></td><td><a href="http://www.opera.com/">Link</a></td><td><a href="http://www.apple.com/safari/">Link</a></td><td><a href="http://www.microsoft.com/windows/internet-explorer/">Link</a></td></tr>
    <tr><td>Suchen/Search for:</td><td><a href="http://www.google.com/search?q=chrome">Link</a></td><td><a href="http://www.google.com/search?q=firefox">Link</a></td><td><a href="http://www.google.com/search?q=opera">Link</a></td><td><a href="http://www.google.com/search?q=safari">Link</a></td><td><a href="http://www.google.com/search?q=internet+explorer">Link</a></td></tr>
  </table>
  <br/><br/><span>Liebe Grüße, best regards, Hannes Schurig</span>
</div>

Kurz, einfach, schmerzlos, schnell.
Es gibt eine IE < = 6 Weiche, die dann CSS Eigenschaften aktiviert. Diese blenden den Blog (.BGC ist der Blogcontainer) aus und blenden die IE 6 Warnung ein. Das wiederum ist einfach nur etwas Text und eine Tabelle. In der Tabelle biete ich die Downloadseiten der bekanntesten Browser auf deutsch und englisch an, zusätzlich dazu zu jedem Browser noch die Google Suchergebnisse. Leicht angepasst kann man diesen Codeschnipsel in jedem Webprojekt einbauen!

Projekte & Mehr HTML | CSS | jQuery | PHP | Administration
ReleaseName
18.06.2010

Trouleshooting von Gruppenrichtlinien

Release: 18.06.2010
Update: 26.10.2011
In einem sehr ausführlichen Artikel habe ich mich mit dem Troubleshooting von Active Directory Gruppenrichtlinien beschäftigt. Dabei bin ich besonders auf Schwierigkeiten bei der Verteilung von Softwarepaketen eingegangen. Der Artikel wird hin und wieder aktualisiert und enthält viel fundiertes Wissen aus mehreren Jahren Administrationserfahrung.

Trouleshooting von Gruppenrichtlinien
10.12.2010

Kostenlose Fernwartungslösung im Windows Netzwerk

Release: 10.12.2010
Update: 17.12.2010
In diesem ausführlichen Artikel beschreibe ich das Konzept und die Umsetzung eines Fernwartungssystems mit Hilfe von TightVNC in einem Windows Netzwerk. Dieses System ist in einem Unternehmen mit 130 PCs und 160 Mitarbeitern seit einem Jahr erfolgreich im Einsatz und hat den Zeitaufwand von Supportanfragen immens reduziert. Vor allem bei mehr als 1 Gebäude (Außenstelle, Sitz in einer anderen Stadt, ausgelagerte Büros, Homeoffice) ist der Gewinn dieses kostenlosen System unvorstellbar groß.

Kostenlose Fernwartungslösung im Windows Netzwerk
25.02.2011

vertikales ausklappbares Menü mit Hierarchiehilfslinien

Release: 25.02.2011
Update: 07.08.2011
Eine normale vertikale Seitennavigation aufklappbaren Unterpunkten und gepunkteten Linien, die die aufgeklappte Ebene und Tiefe verdeutlichen. Der Code ist so allgemein und einfach geschrieben, dass sich beliebig viele Untermenüs ohne Änderungen am CSS oder JS Code erstellen lassen.

Blogpost von HTML-Hierarchiemenü
07.03.2011

IE-Buster – Anti-IE 6 jQuery Plugin

Release: 07.03.2011
Update: 18.07.2011
IE-Buster ist ein kleines jQuery Script, dass in jede beliebige Seite eingebaut werden kann. Beim Aufruf dieser Seite mit dem Internet Explorer 6 oder jünger wird dem Besucher ein Infotext angezeigt. Dieser enthält einen Hinweis auf die veraltete Version des Browsers und Links zu anderen Browsern, jeweils zu der deutschen und zu der englischen Version. Zusätzlich sind Google Suchlinks zu den jeweiligen Browsern eingebaut.
Jeder Besucher mit IE 7 oder neuer oder einem anderen Browser bemerkt nichts von dem Plugin.

Blogpost von IEBuster
10.03.2011

Kaffee-Kalkulator

Release: 10.03.2011
Update: –
Der Kaffee-Kalkulator ist ein kleines C# Programm, dass bei der Entscheidungsfrage „Lohnt sich der Kauf eines Kaffeevollautomaten?“ helfen soll. Das Tool kann anhand einiger Grundangaben bestimmte Berechnungen durchführen und liefert dann einen Informationstext, aus dem der Benutzer schließen kann, ob sich der Kauf eines solchen Geräts lohnen würde, über welchen Zeitraum das Gerät abbezahlt wäre und wie groß das Sparpotential danach ist.

Blogpost von Kaffee-Kalkulator
Download
22.03.2011

jQuery Statusmeldungen mit nur 1 Zeile Code

Release: 22.03.2011
Update: 22.03.2011
Ich habe 1 jQuery Codezeile geschrieben, mit der eine Statusmeldung mit beliebigem CSS Design und Textinhalt eingeblendet und wieder ausgeblendet wird.
Der Code ist praktisch überall anwendbar und auch vollständig IE kompatibel.

Blogpost von jQuery Statusmeldung
17.06.2011

PHP Mehrsprachigkeitssystem mit Extras

Release: 17.06.2011
Update: 17.06.2011
Dieses System ist das Grundgerüst für eine mehrsprachige Internetseite basierend auf PHP und Cookies. Die Spracherkennung wählt beim ersten Besuch der Zielseite eine passende Sprache, die Sprachüberprüfung setzt notfalls – wenn die Sprache nicht verfügbar ist – eine Ausweichsprache fest. Der Benutzer kann manuell die Sprache wählen. Ein Cookie mit der gewählten Sprache wird gespeichert, die Lebensdauer ausgegeben, das Cookie lässt sich löschen.

Post mit Beschreibung, Code, Demo, Download und Changelog
21.06.2011

PHP Mehrsprachigkeitssystem (productive & minified)

Release: 21.06.2011
Update: 03.07.2011
PHP Mehrsprachigkeitssystem mit Spracherkennung, Sprachüberprüfung, Ausweichsprache und Cookiespeicherung in nur 20 Zeilen. Mehr Informationen siehe Projekt vom 17.06. (long version).

Post von PHP Mehrsprachigkeitssystem
23.06.2011

Batch Script Mailer (PHP)

Release: 23.06.2011
Update: –
Ein angepasster PHP Webmailer ermöglicht es aus einem Batch Script mit 1 Codezeile vollautomatisch eine E-Mail zu verschicken.

Blogpost von Batch Script Mailer
25.07.2011

html7bar – Web Windows Taskbar

Release: 25.07.2011
Update: 10.08.2011
Die html7bar ermöglicht eine attraktive Platzierung von Weblinks und anderen Informationen in einer Windows 7 nachempfundenen Footer-Leiste.
Der Orb lässt sich anklicken und ein Fenster mit weiteren Links und einem Profilfoto öffnet sich.
Die html7bar lässt sich auch ausblenden. Diese Aktion wird gespeichert und beim nächsten Besuch berücksichtigt.
Zusätzliche Fenster werden bald Einstellungen, Informationen und die Möglichkeit, die html7bar komplett zu deaktivieren, bereitstellen.

Blogpost von html7bar
25.07.2011

Veröffentlichung im Online-Magazin Hakin9

Release: 16.08.2011
Update: 16.08.2011
In dem Online-Magazin Hakin9, das vorrangig komplexere Sicherheits- und Administrationsthemen behandelt, habe ich einen Artikel veröffentlicht. Der Titel lautet „Manuelle und automatisierte Administration einer Active Directory Domäne und Grundlagen der Gruppenrichtlinien“ und beinhaltet viel Wissen aus meinen letzten 3 Arbeitsjahren.

Blogpost zur Artikelveröffentlichung
20.10.2011

Präsentation: Deployment von IBM SPSS 20 via GPO

Release: 20.10.2011
Update: 20.10.2011
Das Deployment von komplexer Software in größeren Unternehmen ist ein kritischer Prozess mit immenser Vorbereitung. Sehr viele Schritte müssen vorher durchdacht, angepasst, implementiert und getestet werden, bevor die eigentliche Anwendung am Produktivsystem erfolgt. In dieser zusammenfassenden Präsentation zeige ich beispielhaft an IBM SPSS 20 die Schritte einer Softwareverteilung. Die Verteilung fand in einer Infrastruktur mit 130 Computern statt, es gab keinerlei Probleme.

Präsentation: Deployment von IBM SPSS 20 via GPO
13.11.2011

(kleines) webbasiertes Inventarisierungssystem

Release: 13.11.2011
Update: 13.11.2011
Dieses Projekt stellt ein einfaches Inventarisierungssystem mit Weboberfläche dar. Die Weboberfläche ermöglicht das Betrachten, Filtern, Durchsuchen und Hinzufügen von Datensätzen. Ein Loginsystem schützt die Oberfläche vor unberechtigtem Zugriff. Ein dahinterstehendes Rechtesystem bietet verschiedene Rechtegruppen, wodurch spezielle eingeschränkte Zugriffe realisierbar sind. Ein Admin hat Vollzugriff, ein User kann keine neuen Datensätze hinzufügen.
Die Entwicklungszeit für dieses Projekt war sehr kurz. Es wurde innerhalb von nur ca. 30 Arbeitsstunden (2 Personen á 15 Stunden), in Kooperation mit und für Mario Neumann, komplett fertiggestellt. Der Code ist also nicht besonders genial aber Ziel war eine größtmögliche Funktionsvielfalt in realtiv kurzer Zeit.
Bei Fragen: mail me.

webbasiertes Inventarisierungssystem
10.02.2012

einfaches Feedback/Rating Formular

Release: 10.02.2012
Update: 10.02.2012
Dieses kleine Formular ermöglicht es den Besuchern einer Webseite ihre Meinung in Form von Pro/Kontra Text und einer 5-Sterne-Bewertung abzugeben. Das Bewertungsformular ist standardmäßig am linken Browserrand zugeklappt und somit weder aufdringlich noch störend. Es kann dann ausgeklappt, ausgefüllt und abgeschickt werden. Momentan erfolgt nur eine Alert Ausgabe der Formularinhalte, an dieser Stelle muss selbstständig die Weitergabe an verarbeitende Strukturen realisiert werden. Optional klappt sich das Formular nach dem Abschicken wieder ein.

einfaches Feedback/Rating Formular
23.03.2013

Location Map – Google Maps Webapplication

Release: 23.03.2013
Update: 08.04.2013
Ziel soll es sein coole Locations und besuchenswerte Orte gut sichtbar und einfach auf einer großen Karten “anpinnen” zu können. Mit Google Maps API stelle ich die einfach zu bedienende Karte bereit, auf der mit einem Formular neue Orte hinzugefügt werden können. Den Orten können Icons, Namen und eine (gerne auch komplexe HTML) Beschreibung gegeben werden. Die erstellten Orte lassen sich nachträglich bearbeiten oder löschen.

Location Map – Interactive Google Maps Webapplication
by Hannes Schurig

Jahrelang hat Google das selbe Kopfband gehabt, die klassisch minimalistische Menüleiste:

Endlich macht Google hier einen Schritt nach vorn und passt diese Menüleiste an. Ich finde das wird auch allerhöchste Zeit. Immerhin sieht man diese Leiste fast überall bei Google, man präsentiert sich ein Stück moderner jetzt.

Noch muss man google.com besuchen, um das neue Design bewundern zu können. Wer auf die klassische Variante steht kann immernoch auf das alte Design zurückwechseln.

Aufklappbare, verschachtelte Menüs mit gepunkteter Hierarchiehilfe
…das ist jetzt Thema 😀
Die Sache ist ziemlich simpel. Ich brauchte letztens ein aufklappbares Menü mit ebenfalls aufklappbaren Unterpunkten, möglichst unkomplizierter Aufbau, möglichst wenig Code. Irgendwann wird das Menü mit vielen aufgeklappten Untermenüs doch sehr übersichtlich, also habe ich „Hierarchielinien“ hinzugefügt. Keiner Ahnung ob es dafür auch einen normalen Namen gibt.

Verpackt in HTML/CSS und einfach animiert mit einem jQuery Zweizeiler, fertig.

Code

HTML:

<ul id="nav">
	<li class="expand">Über das IQB
		<ul>
			<li>Gründung</li>
			<li>Ziele</li>
			<li>Partner/Links</li>
		</ul>
	</li>
	<li>Personal</li>
	<li class="expand">Bildungsstandards
		<ul>
			<li>Aufgabenbeispiele</li>
			<li>EMSE</li>
			<li class="expand">Downloadserver
				<ul>
					<li>Audiofiles</li>
					<li>Videofiles</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>VERA/Lernstandsvergleich</li>
	<li class="expand">Arbeitsbereiche
		<ul>
			<li>Testentwicklung</li>
			<li>Kompetenzerwerb</li>
			<li class="expand">Implementation
				<ul>
					<li>Was wird</li>
					<li>denn eigentlich</li>
					<li class="expand">so alles
						<ul>
							<li>test</li>
							<li>test2</li>
						</ul>
					</li>
					<li>implementiert??</li>
				</ul>
			</li>
			<li>Bildungsmonitoring</li>
			<li>Datenzentrum (FDZ)</li>
		</ul>
	</li>
</ul>

CSS:

body, html{
	height: 100%;
	width: 100%;
	font-family: "Trebuchet MS";
	margin: 0; padding: 0;
}
a {
	text-decoration:none;
	color: black;
}
ul, li {
	list-style: none;
}
#nav li {
	padding: 2px 2px 2px 15px;
	cursor: default;
}
#nav ul {
	display: none;
	background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
}
#nav li.expand {
	background: url(img/arrow-down.gif) no-repeat scroll 0px 12px transparent;
}
.expanded {
	background: url(img/arrow-up.gif) no-repeat scroll 0px 12px transparent !important;
}

Das tatsächliche Design des Menüs muss jeder selbst basteln.

jQuery:

$(document).ready(function() {
   $(".expand").click(function(e) {
      $(this).toggleClass("expanded");
      $(this).children("ul:first").slideToggle("300");
      e.stopPropagation();
   });	
}); //$(document).ready
Demo:

Link

Download:

folding-nav.zip

Mein letzter Artikel beschreibt die Installation von SyntaxHighlighter in einem beliebigen Webprojekt. In WordPress macht diese Methode viel Stress, ist umständlich und funktioniert nicht richtig.

Bei WordPress ist es daher einfacher, das dafür entwickelte Plugin zu nutzen: SyntaxHighlighter Evolved.

Usage:
wordpress-syntaxhighlighter-evolved-code-usage

Eckige Klammern also; alle Details zu Sprachen, Parameter und Nutzung findet ihr hier. Nicht wunder, dass dort nirgends „Evolved“ steht; SyntaxHighlighter Evolved nutzt nämlich die Programmierung von SyntaxHighlighter. Also gelten alle Dokumentationen, die auf der Seite stehen.