Der neue Webstandard HTML5 wird einige interessante Neuerungen bringen.
Das im Web oft verwendete <embed>-Tag wird jetzt endlich als HTML-Standard angesehen.

Interessant dürften vor allem auch einige neue Tags sein, die den Aufbau einer Webseite von Grund auf verändern könnten.
So gibt es bei HTML5 die Tags <footer>,<header> ,<nav> .
Weiters kann man bei HTML5 den Tag <article> verwenden. Ein Artikel kann mit <section> dann weiter unterteilt werden.

Diese semantische Strukturierung der Webseite bringt nicht nur eine bessere Übersicht und bessere Steuerbarkeit für den User, sondern auch schlankeren Code, was die Performance einer Webseite steigern kann.

Vermutlich wird Google diese neuen Tags nutzen um eine Seite noch besser indiziieren zu können.
Dadurch wird auch die Suchmaschinenoptimierung in eine vollkommen neue Richtung gehen.Neu ist auch die direkte Einbindung von Videos und Audiodateien mit dem <video> und <audio> -Tag. Diese sollen die Einbindung von Silverlight oder Flash Applikationen um wesentliches vereinfachen und ebenfalls den Code reduzieren.

Einige Spezifikationen aus HTML5 sind allerdings noch nicht endgültig fixiert.
Viele der fixen Spezifikationen werden bereits jetzt von den Browsern Internet Explorer 8, Firefox 3.6, Opera 10.5, Safari5 und Chrome5 umgesetzt.
Eine direkte Verwendung von HTML5 ist daher theoretisch möglich.
Allerdings ist die Verwendung von HTML5 gerade mit älteren Browsern (IE6, IE7) problematisch und sollte daher noch vermieden werden.

Wussten Sie, dass 11% der deutschen Bevölkerung im Besitz eines SmartPhones ist (Quelle: Otto Group)?

Das sind, beruft man sich auf die Zählung vom November 2009 (Quelle: WikiPedia) rund 9.000.000 mobile Endgeräte, diese Zahl soll sich binnen 2 Jahren verdoppeln. Laut einer aktuellen Studie von Arthur D. Little und der Exane BNP Paribas (Quelle: PTA) zufolge soll sich dieser Trend auch in Österreich bemerkbar machen. Bereits 2015 heißt es, sollen 60% aller Mobilkunden ein SmartPhone besitzen (Quelle: PTA).

Das damit verbundene Potenzial des mobilen Internets muss nicht extra erläutert werden (europaweites Umsatzpotenzial von 27 Mrd. Euro, Quelle: PTA).

Um diesem technologischen Fortschritt gerecht zu werden, sind wir stolz darauf, unser Webdesign-Produktportfolio erweitern, und unseren Kunden eine noch größere Produktpalette anbieten zu können. Per Juli 2010 können Sie optional eine SmartPhone-Optimierung bestellen; medani mobile solutions. Weitere Infos zum Thema mobiles webdesign finden sie hier….

Wir optimieren Ihre Webseite auf Desktop und mobiles Internet, speziell für die Anzeige auf SmartPhone-Screens und iPhone. Wählen Sie, welche Inhalte Sie anzeigen möchten, ob sie ein spezielles Design für SmartPhones wünschen oder SmartPhone-Dienste, die wir für Sie entwickeln.

Für das Wiener Traditionsunternehmen Halada hat medani webdesign eine neue Webseite gestaltet. Die Kundin kann Ihr Unternehmen in einem modernen Erscheinungsbild präsentieren und die Inhalte über ein CMS selbst verwalten. Ein voller Erfolg, wie Ihrem Kundenzitat zu entnehmen ist.

Details zu diesem Projekt finden Sie auf der Referenzseite.

Um mit der neuen Webseite auch langfristig Erfolg zu haben, hat die Firma Halada auch die erweiterte Suchmaschinenoptimierung beauftragt. Die Optimierung sichert eine gute Auffindbarkeit in Suchmaschinen wie beispielsweise Google, da auf Veränderungen des Rankings rasch reagiert werden kann.

medani webdesign sichert bei allen aktuellen Domain & Hosting – Produkten die Daten seiner Kunden täglich und trägt somit erheblich zu einer verbesserten Sicherheit der wertvollen Kundendaten bei. Damit können sich unsere Kunden sicher fühlen.

„Es hat alles so perfekt funktioniert! medani webdesign hat sich optimal um meine Anliegen gekümmert und alles in meinem Sinne prompt und verlässlich umgesetzt!“

„Es war einfach ganz toll, mit Euch allen zusammenzuarbeiten! Das Ergebnis kann sich echt sehen lassen! Auch in diesem Fall hat medani webdesign meine Vorschläge und Ideen derart optimal umgesetzt, wir waren alle total sprachlos, als wir die Webvorschau zum ersten Mal gesehen haben! Ich fühle mich bei medani webdesign total gut aufgehoben und es gibt mir ein sehr gutes Gefühl, so ein starkes Team hinter mir zu wissen.  Man fühlt sich angesichts der neuen Materie nie alleine gelassen.“

Mag. Manuela Halada,
Führungskraft bei Fliesen Halada

Typografische Eyecatcher

Als Webdesigner hat man das Problem immer wieder die gleichen langweiligen Schriften verwenden zu müssen, weil nur eine handvoll der unzähligen Schriften auch im Web funktionieren. Es gab schon viele Ansätze typografisches Leben in die Webseiten zu bringen, doch gab es dabei immer einen Wermutstropfen. Vielleicht ist aber das Google font directory eine zukunftsweisende Möglichkeit beim Webdesign mit tollen und extravaganten Schriften gestalten zu können.

Derzeit steht das Google font directory nur als beta Version zur Verfügung und beinhaltet nur 18 Schriftarten aber es bleibt zu hoffen, dass bald noch einige Schriften hinzukommen. Die Schriften sind aufgrund der open source Lizenz für kommerzielle und nicht kommerzielle Zwecke nutzbar. Folgende Browser unterstützen den Vorstoß für kreative Schriften im Webdesign: Google Chrome 4.249.4+, Firefox 3.5+, Safari 3.1+ und IE 6+. Derzeit nicht unterstützt sind iPhone, iPad, iPod, und Android. Dies sollte aber kein Hindernis sein Akzente im Webdesign zu setzen. Wenn ein Browser die gewählte Schriftart nicht unterstützt, wird einfach die definierte Standardschrift angezeigt.

Hier nun ein paar Beispiele:

Schriftart Reenie Beanie

Reenie Beanie

Schiftart Tangerine

Tangerine

Schiftart Lobster

Lobster

Weiterführende Links:

►Google font directory

►Google font API

Wenn Sie Interesse an der kreativen Schriftarten für Ihre Webseite haben, dann senden Sie uns Ihre Anfrage.

Anfrage

Um Ihnen einen Einblick in ein weit verbreitetes JavaScript – Framework zu geben, möchte ich Ihnen jQuery vorstellen, welches von John Resig entwickelt wurde. Unter einem Framework können Sie sich ein Gerüst vorstellen, ähnlich wie es beim Bau von Gebäuden zum Einsatz kommt. In der Programmierung dient ein solches zur Festlegung der Architektur, in der ein Programm oder eine Funktionalität erstellt wird. Den Einsatz und die Möglichkeiten, die sich beim Einsatz von jQuery für Ihren Webauftritt bieten, möchte ich Ihnen in einer dreiteiligen Demonstration näherbringen.

Im ersten Teil wird die Installation von jQuery demonstriert, sowie wertvolle Tips & Tricks für die ersten Schritte erläutert. Sie können sich anhand hiervon überzeugen, dass wir stets mit dem “Puls der Technik” schreiten, um Ihnen als Kunden  aktuellste Technologie und Know-How anbieten zu können.

In weiterer Folge erstellen wir ein aufklappbares Akkordeon, dass beispielsweise bei einer Ihrer Produktseiten zum Einsatz kommen kann. Ich möchte Ihnen zunächst das Endergebnis zeigen, damit Sie sich ein Bild machen können, welches Ziel diese Demonstration verfolgt.

Wenn Sie hier auf “jQuery”, “PHP” oder “CSS” klicken sehen Sie, dass sich der jeweilige Bereich erweitert und Ihnen zuvor “versteckten” Inhalt anzeigt.

Ich werde Ihnen nun Schritt für Schritt zeigen, wie die Erstellung eines solchen aufklappbaren Menüs aussieht.

Schritt 1 – das Grundgerüst

Um mit jQuery arbeiten zu können, benötigen Sie ein HTML (Hypertext Markup Language; Wikipedia) Grundgerüst. Dieses könnte folgendermaßen aussehen:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<head><br />
</head><br />
<body><br />
</body><br />
</html>

Speichern Sie dieses in ein Verzeichnis Ihrer Wahl ab (Bsp.: jQuery/index.html).

Schritt 2 – das Einbinden von jQuery / jQuery UI

Um auf Ihrer Webseite DOM (Document Object Model; Wikipedia) – Manipulationen durchführen zu können, muss im zweiten Schritt jQuery eingebunden werden. Hierzu werden im HEAD – Bereich Ihres HTML – Grundgerüsts aus “Schritt 1″ die notwendigen JS (JavaScript; Wikipedia) Dateien angegeben, die inkludiert werden sollen.

Dies kann auf 2 Arten geschehen:

• per Google APIs (klicken Sie bitte hier)
• per “Eigenhosting”

Die Einbindung via Google APIs bringt einige Vorteile mit sich:

• durch das sogenannte “Caching” (Zwischenspeichern, um bei einem erneuten Aufruf Inhalte schneller zur Verfügung zu stellen) sparen Sie sich Bandbreite – das Laden der Seite geht etwas schneller vonstatten.
• Sie müssen sich nicht um Updates der jQuery Library kümmern, Google übernimmt das für Sie

Sollten Sie sich dazu entscheiden, Google APIs zu verwenden, so müssen Sie einen Google API Key registrieren, damit die Einbindung auf Ihrer Webseite funktioniert. Dieser eindeutige Key wird mit der URL (Uniform Resource Locator; Wikipedia) Ihrer Webseite verknüpft, Sie können also beispielsweise den hier verwendeten nicht benutzen!

“Eigenhosting” bedeutet, dass Sie ein Kopie von jQuery auf Ihrem Server hosten und sich daher selbst um Updates kümmern müssen.

Für meine Demonstration verwende ich Variante I und erweitere den HEAD – Bereich wie folgt:

<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script><br />
</head>

Wie Sie sehen können, beziehen wir neben jQuery (i.d.a.F 1.4.2) auch jQuery UI (i.d.a.F. 1.7.2), um auf vordefinierte Widgets (ein in der IT gebräuchliches Wort für “graphisches Element” oder “graphisches Fenster”) zurückgreifen zu können. jQuery UI baut auf jQuery auf, daher ist es unbedingt notwendig, jQuery vor(!!) jQuery UI einzubinden !

Schritt 3 – das Styling

jQuery UI bietet komfortable Möglichkeiten, Styles (Informationen und Vorgaben zur Anzeige) aus einer Vielzahl von bereits vordefinierten Themen auszuwählen und einzubinden. Sie finden eine Übersicht aller Standard – jQuery UI – Styles im dazugehörigen Theme Roller.

Laden Sie sich ein Theme auf Ihren PC, extrahieren Sie die heruntergeladene (gepackte) .ZIP – Datei und navigieren Sie in den Unterordner /css. Dort befindet sich ein Unterordner mit dem Namen des von Ihnen gewählten Themes, welcher eine CSS (Cascading Style Sheet; Wikipedia) und einen Ordner /images beinhaltet. Kopieren Sie den Ordner /css in jenes Verzeichnis, in dem sich auch die HTML – Datei befindet, die Ihr HTML – Grundgerüst befindet (jQuery/).

Öffnen Sie nun wieder die HTML – Datei mit Ihrem HTML – Grundgerüst (jQuery/index.html) und erweitern den HEAD – Bereich wie folgt:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script></p>
<p><script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<link href="css/jquery-ui-1.8rc2.custom.css" rel="stylesheet" type="text/css" />
</head><br />

Hierdurch binden Sie das CSS in ihre Webseite ein.

Schritt 4 – Die DIV Struktur des Inhaltes

Im vierten Schritt möchte ich Ihnen zeigen, wie ein möglicher DIV Aufbau aussehen könnte, um mit jQuery erfolgreich darauf zugreifen zu können. Hierzu erweitern wir den BODY – Bereich des HTML – Grundgerüsts (jQuery/index.html) wie folgt:

<br />
<body></p>
<div class="jQuery_demo_container" style="width: 400px; height: auto;">
<div id="jQuery_demo">
<h3><a href="#">jQuery</a></h3>
<div>Ein JavaScript - FrameWork.</div>
<h3><a href="#">PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href="#">CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />

Das DIV “jQuery_demo_container” umschließt das DIV “jQuery_demo” und definiert Styling Informationen zur Breite (400 Pixel) und Höhe (automatisch).

Schritt 5 – Erzeugen des Akkordeons

Um nun per jQuery / jQuery UI das DOM manipulieren zu können, bedarf es nun nur noch einer kleinen Erweiterung des HEAD – Bereichs des HTML – Grundgerüsts:

<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script></p>
<p></head>

Sie beauftragen jQuery der ID “jQuery_demo” (nach dessen Initialisierung) ein Akkordeon anzufügen und damit den oben gezeigten Effekt zu erzielen.

Komplett

<br />
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script><br />
</head><br />
<body></p>
<div class="jQuery_demo_container" style="width: 400px; height: auto;">
<div id="jQuery_demo">
<h3><a href="#">jQuery</a></h3>
<div>Ein JavaScript - FrameWork.</div>
<h3><a href="#">PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href="#">CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />
</html></p>
<p>

Damit möchte ich den ersten Teil der jQuery Demonstration abschließen. Im nächsten Teil werde ich Ihnen zeigen, wie Sie Ihr erstelltes Akkordeon individualisieren können!

- Christian Singer, BSc ( Anfrage )

„Das nette Medani-Team hat mich von Anfang an unaufdringlich und professionell beraten und betreut. Dadurch kam ich in den Genuss einer viel gelobten Homepage. Danke und weiter so!“

Katharina Wölwitsch, 5-Elemente Ernährung & Beratung

Das Online-Service Google Maps hat sich in den letzten Jahren von einem einfachen Stadtplan zu einem sehr komfortablen Tool entwickelt, das auch als Anfahrtplaner genutzt werden kann. Für Unternehmen ist besonders interessant, dass Google Maps in die bestehende Webseite integriert werden kann und so dem potenziellen Kunden die Anfahrt zu dem jeweiligen Unternehmen erleichtert.

Entweder wird die Karte statisch eingebaut, um ähnlich einem gedruckten Stadtplan der Orientierung zu dienen, oder dynamisch, damit der Kunde alle Möglichkeiten von Google Maps, wie Zoomen, in der Karte navigieren und wechseln der Ansicht auf Satellitenansicht oder Ansicht des Geländes, nutzen kann. Zudem kann ein Routenplaner eingebunden werden, der es ermöglicht die Anfahrt mit dem Auto berechnen zu lassen. Google Maps ist aufgrund der einfachen Bedienung seit seinem Start 2005 zu einem weltweit beliebten und viel genutztem Online-Stadtplan geworden. Das neuerste Feature (in Österreich noch nicht verfügbar) ist Google Street View. Dabei werden ganze Straßenzüge fotografiert und online räumlich dargestellt.

medani webdesign integriert bei der Neuerstellung Ihrer Webseite Google Maps. Auf Wunsch kann auch ein Routenplaner konfiguriert werden. Auch die Eintragung Ihres Unternehmens in Google Maps ist möglich. Somit muss nicht mehr nach der Firmenanschrift gesucht werden, sondern die Firma selbst wird am Stadtplan dargestellt.

„Durch Unterstützung von medani webdesign konnte der Internetauftritt meines Unternehmens in sehr kurzer Zeit sehr professionell umgesetzt werden.“

Dr. Peter Stricker,
Ingenieurkonsulent für Maschinenbau