by ·10 Kommentare

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!

by ·Ein Kommentar

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.

by ·Keine Kommentare

Webentwickler kennen das Leiden, Internet Explorer. Ein Graus, die Webseite auf diesen Browser abzustimmen. Zumal man meistens nur 1 Version davon installiert hat.
Mit IETester installiert man gleich 5 IE Versionen mit ihren jeweiligen Verhalten, Bugs und HTML Inkompatibilitäten.

Letzten Donnerstag kam Version 0.4.8 des Programms raus. Hier bekommt ihr den Download. Das Programm ist schnell installiert. Voll funktionsfähig in Windows 7 und 64bit, muss man dazu sagen.

Die Handhabung ist noch einfacher. Die Oberfläche verzichtet auf viel Schnickschnack und Features. Man kann einzelne Browserversionen starten und direkt die Internetseiten vergleichen.
Mehrere IE Ansichten nebeneinander? Kein Problem. Es lassen sich beliebig viele Tabs von verschiedenen IE Versionen öffnen und nebeneinander platzieren.

IETester liefert auch noch ein paar nützliche Tools mit. Dazu gehört neben der DebugBar (muss extra heruntergeladen werden) auch die Quellcodeanzeige, Schriftgrößenwahl und noch besser: aktivieren & deaktivieren von Cache, Medien (Videos, Bilder, Sound) und aktiven Inhalten (ActiveX, JS, Java).

Ein Top Tool wenn man vorher noch mit Multiple IEs oder anderen suboptimalen Lösungen gearbeitet hat!

by ·16 Kommentare

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

by ·Keine Kommentare

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.

by ·3 Kommentare

Wir sind mittlerweile richtig verwöhnt. Millionen Pixel bilden unser Monitorbild, Millionen Farben machen es ansehnlich.
Wie wärs wohl, wenn Windows 7 wie damals nur 256 Farben zur Verfügung hätte. Hat sich das jemand mal angeguckt?

Hier 😀

Ich muss sagen, Office 2007 versucht noch einigermaßen brauchbar auszusehen. Aber ein Traum ist das wohl eher nicht. Vor allem selektierte Buttons sind gemein, Türkis-Netzhaut-Peitsche deluxe.
Es sei also nochmal gesagt: ich liebe den heutigen Stand der Technik 😀

by ·37 Kommentare

Wandel ist im Gange, nicht nur in Kairo.
Mein Blog wird schon bald anders heißen und das wird – hoffentlich – mit optischen Änderungen einhergehen.
Aber alles zu seiner Zeit, ich habe es nicht eilig.

Ich würde gerne eure Meinung zum Namen und dem Logo hören.


IT-stack soll also der neue Name sein.
Dafür hab ich mir die Domains it-stack.de, itstack.de und stack-it.de schalten lassen.

Edit: Hab mich letztens mal hingesetzt und Icons versucht zu entwerfen. Jemand ne Meinung dazu?

Ja, nein, vielleicht, geht so, langweilig, geil? Je nachdem wie das End-Logo aussieht passe ich das ggf noch an.

Gleichzeitig möchte ich auch wieder ein Gewinnspiel starten. 2 Gewinne gibt es diesmal.
Beim letzten Gewinnspiel ist mir durchaus nicht entgangen, wie beliebt die Tastatur war.
Ich habe mir das zu Herzen genommen und mal etwas Spezielles aus dem Schrank gekramt:

eine flexible Gummitastatur! …
Ihr wisst schon. So ein cooles Ding wie aus Stirb Langsam 4: Video
Okay die Szene zeigt jetzt nich so viel aber ich habe ja was vorbereitet:

Diese Tastatur eignet sich vor allem für speziellere Einsatzgebiete. Sie ist zusammenrollbar und damit vor allem für den mobilen Einsatz konzipiert. Zusammengerollt nimmt sie nicht mehr Platz weg als ein kleines Taschenbuch oder ein CD-Case. Weiterhin ist sie absolut wasserdicht und somit auch ohne Probleme abwaschbar. Kaffee umgekippt? Na und?! Reinigung zwischen und unter den Tasten? Geschichte!
3 Sondertasten „Sleep“, „Wake Up“ und „Power“ funktionieren ohne jegliche Vorkonfiguration.
Ein weiterer Effekt dieser Tastatur ist natürlich die davon ausgestrahlte Coolness 😀

Man muss allerdings dazu sagen, dass diese Tastatur nicht gedacht ist, viel zu schreiben. Das Tippen ist etwas umständlicher als mit normalen Tastaturen. Also weniger der dauerhafte Ersatz für den Desktop PC. Aber das darf natürlich jeder selbst entscheiden.

Ich habe auch noch etwas für die weiblichen Leser. (Wobei, wenn ich es recht bedenke auch etwas für einige Männer :D)
Shakira – „Live & Off The Record“ auf DVD. 150 Minuten heißen Stoff für die Ohren; 15 Titel und einige Special Features. Wer nicht viel von der Musik hält kriegt wenigstens was zu sehen.

Die Teilnahmebedingungen sind diesmal anders.

  1. Schreibt ein Kommentar mit eurer Meinung zu dem Namen und dem Logo; 1-Satz-Kommentare sind nicht gern gesehen.

    2. UND

  2. Entweder: verlinkt ihr diesen Beitrag bei Facebook oder Twitter und packt den Link mit dazu. Oder: ihr schreibt einen Blogartikel über meinen Blog/Artikel; Link ebenfalls in den Kommentar. Für einen Blogartikel gibt es die doppelte Gewinnchance!

Das Gewinnspiel endet am 13. März, der Sonntag in 3 Wochen also.