Tag "Technik"
CSS3 – Neuheiten
Neuigkeiten gibt es aus dem Bereich der Stylesheets. Seit mittlerweile fast 10 Jahre entwickelt das W3C die neuen Spezifikationen für CSS3 in enger Zusammenarbeit mit den Browserherstellern. Mittlerweile gilt ca. 1/4 der Spezifikation als “Stabil”.
Viele der neuen Selektoren werden bereits von den verschiedenen Browsern umgesetzt und richtig interpretiert. Auch können die neuen Selektoren gefahrlos in Webdesigns umgesetzt werden, da unbekannte CSS-Anweisungen und Selektoren von den Browsern einfach ignoriert werden.
CSS3 baut vor allem die Pseudoklassen deutlich aus. Eine wichtige Pseudoklasse wird dabei :nth-of-type().
So kann man zum Beispiel Tabellen ganz einfach mit tr:nth-of-type(2n){style-anweisung} jeder zweiten Tabellenzeile eine andere Farbe zuweisen.
Das vermutlich spektakulärste Feature von CSS3 ist die Unterstützung von Webfonts – also herunterladbare Schriftarten. Das ermöglicht Werbeagenturen neue Schriftarten einzusetzen. Überlange Texte, die über das Webdesign Layout hinaus gehen würden, können zusätzlich mit der neuen CSS-Eigenschaft break-word formatiert werden.
Weitere interessante CSS-Eigenschaften sind vor allem Transparenzen und runde Ecken.
Aktuell werden transparenzen und runde Ecken hauptsächlich über komplizierte Verschachtelungen oder Grafiken realisiert.
Runde Ecken werden ab CSS3 einfach mit dem Attribut border-radius zugewiesen, während Transparenz mit dem Attribut opacity gesteuert wird.
Neu ist auch die CSS-Eigenschaft background-size.
Mit ihr ist es möglich für Hintergrundbilder Größen anzugeben. Angenommen werden von background-size Pixel und Prozentwerte.
Abschließend kann man sagen, dass noch viele neue Selektoren und Eigenschaften bis zur offiziellen Freigabe von CSS3 in die Spezifikation einfließen werden. Vieles davon ist durchaus praktisch und wird im Webdesign sehr schnell umgesetzt werden.
HTML 5 – Vorschau
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.
medani mobile solutions
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.
jQuery Akkordeon
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 )
- Mersich: „Der Inspiration und Professionalität von medani webdesign ist es zu verdanken, dass unser Internetdebüt ein voller Erfolg war.“ Mag. Richard M...
