Archiv für Schlagwort: browser

Internet Explorer zum Webseitentest unter Mac OS und Linux installieren

Webseiten wollen bekanntlich umfangreich getestet werden. Bekanntlich unterscheiden sich alle Browser ein kleines oder größeres bisschen und machen dem HTML- und CSS-Schreibenden die Arbeit nicht gerade leichter, indem sie den Code von Software zu Software und Version zu Version ein klein wenig unterschiedlich interpretieren. Wenn man wie ich unter Mac OS arbeitet, kommt dann noch das Problem dazu, dass man gar nicht so einfach an einen Internet Explorer herankommt. Denn den gibt es bekanntlich nur noch unter Windows-Systemen und wird noch dazu gerne in den unterschiedlichsten Versionen gerne genutzt.

Ich bin zum Glück nicht alleine mit diesem Problem. Microsoft selbst gibt sich in der letzten Zeit verstärkt Mühe, seinen nicht ganz so guten Ruf unter Webentwicklern wieder ein wenig aufzupolieren. Und so hat man dann unter anderem auch unter dem Titel „Cross-browser testing simplified“ die Seite modern.ie mal aufgehübscht und einiges dazugepackt. Neben einem kostenlosen Testzugang für den Browsertest-Service BrowserStack stehen hier auch wieder die virtuellen Maschinen mit den Internet Explorern 6-10 zur Verfügung.

Microsoft hat ausgebaut: Standen die VMs bisher offiziell nur für VMware zur Verfügung, kann man jetzt zwischen Downloads für das kostenlose VirtualBox unter Windows, Mac OS und Linux, VMware unter Mac OS und Windows und noch einige andere Windows-Lösungen auswählen. Das ist ziemlich komfortabel.

Zur Verfügung stehen aktuell:

  • Internet Explorer 6 unter Windows XP
  • Internet Explorer 7 unter Windows Vista
  • Internet Explorer 8 unter Windows 7
  • Internet Explorer 9 unter Windows 7
  • Internet Explorer 10 unter Windows 8

Also eigentlich alles was man braucht. Die Downloads sind gezippt zwischen 700MB und 5,2GB groß, entpackt und starklar werden die VMs erfahrungsgemäß etwa 60 Gigabyte auf der Platte belegen. Ein kleiner Tipp am Rande: Das Entpacken unter Mac OS wollte bei einigen Dateien nicht so wie ich, im Terminal ging es mit unzip aber ohne Probleme.

Wenn man dann noch ein bisschen Zeit hat, sollte man sich auch noch die anderen Unterseiten dort mal anschauen. Microsoft gibt sich wirklich Mühe!

Die besten Browsererweiterungen für die Webentwicklung

Die besten Browsererweiterungen für die Webentwicklung

Das seit kurzem wieder aktive dr.web-Magazin stellt einige Browsererweiterungen für den ambitionierten Webentwickler vor. Einige davon kenne ich noch gar nicht und muss ich mir auch mal genauer anschauen. Etwas traurig stimmt mich, dass es nach wie vor scheinbar keine gescheite Lösung für den Internet Explorer gibt. Da könnte ich sowas ja am ehesten gebrauchen. Andere Browser machen meistens ziemlich genau das, was ich von ihnen will.

Das HTML5-Grundgerüst für ein Blog

Im Rahmen der Neuausrichtung meiner Seite beschäftigte ich mich auch eingehend mit HTML5 und den damit neu gegebenen Möglichkeiten. Vorweg: HTML5 ist nach wie vor kein festgelegter Standard, sondern weiterhin in Entwicklung. Dennoch unterstützen moderne Browser auch heute schon viele Möglichkeiten, die HTML5 bietet. Einen interessanten Artikel über die Inhalte von HTML5 mit einer durchdachten Grafik hat Peter Kröner mit Was ist HTML5 und was nicht? Und was hätte der Kaiser dazu gesagt? veröffentlicht. Dieser bietet eine erste Übersicht mit der man sich dann leicht in die einzelnen Themen abtauchen kann.

Ich will mich nun erst einmal mit den neuen semantischen Möglichkeiten von HTML5 auseinandersetzen. „Semantisch“ will heißen, dass man versucht durch den Einsatz diverser HTML-Elemente den Inhalt einer Webseite zu strukturieren. Natürlich könnte man auch alle Inhalte rigoros div-Elemente packen. Das Ergebnis würde im Browser vermutlich gleich aussehen. Durch die Verwendung von semantisch korrekten Elementen, die für den jeweiligen Inhalt-Typ vorgesehen sind, macht man den Code aber auch lesbar. Und zwar nicht nur für einen selbst oder andere Menschen, sondern auch für Screenreader und Suchmaschinen. Insgesamt also eine gute Sache.

Bisher bot (X)HTML hier nur eine beschränkte Anzahl von Elementen an. Überschriften, Listen und Textabsätze wurden im wesentlichen abgedeckt. HTML5 geht nun einen Schritt weiter und bietet die Möglichkeit eine Seite komplett semantisch zu strukturieren. Es gibt nun Elemente für den Kopf einer Seite (header), die Navigation (nav), den Inhalt (section, article) und seinen logischen Aufbau und den Fuss (footer) einer Seite. Ohne diese nun all zu lange eingehen zu wollen, verweise ich auf den Artikel Structural Tags in HTML5 bei Ordered List. Der Artikel dort beschreibt jedes Element kurz und zeigt auch einen beispielhaften Quellcode.

Im neu zu bauenden Layout meiner Seite möchte ich am oberen Ende der Seite eine Navigationsleiste mit den neuen Kategorien haben. Danach der eigentliche Inhalt und dann schließlich eine Sidebar, die eigentlich mehr eine „Bottombar“ ist. Dementsprechend ergibt sich folgende Struktur im Code:

[html]
<!– der tag und ich = header.php –>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>der tag und ich</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<h1><a href="#">der tag und ich</a></h1>
</header>
<nav id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<!– der tag und ich = index.php –>
<section>
<article>
<header>
<h2><a href="#">Die Überschrift eines Artikels</a></h2>
</header>
<section>
<p>Der Inhalt eines Artikels</p>
</section>
</article>
</section>
<!– der tag und ich = sidebar.php –>
<aside>
<p>Hier kommt die Sidebar hin</p>
</aside>
<!– der tag und ich = footer.php –>
<footer>
<p>Der Footer der Seite mit einigen wichtigen Links.</p>
</footer>
</body>
</html>
[/html]

In diese Grundstruktur kommt nun der erste WordPress-Code, damit die Inhalte ausgegeben werden können. Anschließend werden die gewünschten zusätzlichen Informationen eingebaut, wie etwa die Kommentaranzahl pro Beitrag oder das Veröffentlichungsdatum. Und natürlich das ganze drumherum, wie etwa Meta-Tags und externe Dateien die eingebunden werden wollen.

Ein kleiner Tipp am Rande: Nicht alle Browser unterstützen die neuen HTML-Elemente bereits, gerendert werden sie aber schon irgendwie. Damit das alles aber auch so tut wie es soll, setzt der kluge Webentwickler in einem Rundumschlag alle neuen Elemente im CSS der Seite manuell auf display: block;.

[css]
/* Nun bringen wir den HTML5-Tags erst mal ordentliches Benehmen bei */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
[/css]
So sind die Elemente nämlich spezifiziert, werden aber unter anderem im Internet Explorer mangels Kenntnis als inline gerendert.

Onlinebanking bei der Dresdner Bank

Liebe Online-Menschen der Dresdner Bank,

ich bin noch nicht lange Kunde bei euch und eigentlich auch zufrieden mit dem, was ihr mir bietet. Kostenlose Kontoführung ist eine prima Sache, ich käme auch niemals auf die Idee irgendetwas nicht online zu machen.

Ein wenig ärgerlich werde ich dann aber, wenn ich Meldungen wie die folgende bekomme:

Onlinebanking bei der Dresdner Bank

Die spricht nämlich nicht gerade für die Professionalität eures Webauftritts, zumal in meinem Browser (Safari unter Mac OS X) alles prima läuft und ausschaut. Bisher hat keine Funktion eures Onlinebankings versagt.

Richtig ärgerlich werde ich dann aber, nachdem ich diese Meldung per Klick von meinem Bildschirm entfernt habe. Hat euch, liebe Online-Menschen der Dresdner Bank, noch niemand gesteckt dass das automatische Ändern der Fenstergröße des Browsers garnicht geht? Dummerweise wird das Fenster auch noch viel zu klein, als das man die Seite noch bedienen könnte. „Setzen, sechs!“ würde ich sagen. Bis morgen schreibt jeder von euch 100 Mal:

Ich darf meine Kunden nicht mit blöden Meldungen und Fensterveränderungen nerven.

Viele Grüße,
ein eigentlich zufriedener Kunde