Archiv der Kategorie: HTML/CSS

HTML/CSS, Javascript

HTML/CSS: Ein kompaktes JQuery-Tutorial

Schreibe einen Kommentar

Intention

Persönliche Intention

Meine Intention ist es ein kompaktes JQuery-Tutorial zu veröffentlichen, welches (nach diesem Abschnitt) ein Überblick über die wichtigsten JQuery-Funktionen gibt.

Warum JQuery?

JQuery ist eine Javascript-Klassenbibliothek, welche zahlreiche Funktionen für die Selektion im HTML-Baum (DOM) und dessen Manipulation (HTML-Manipulation wie z.B. das Austauschen von TABLE-Tags oder dem dynamischen Hinzufügen von TR-Tags…) enthält.

Es bietet Funktionen für…

  • Elementselektion im Document Object Model über die Sizzle Selector Engine, die weitgehend den XPATH/CSS-3-Selektoren entspricht
  • Document Object Model-Manipulation (HTML-Dokumente dynamisch ändern)
  • Erweitertes Event-System
  • Hilfsfunktionen
  • Effekte und Animationen (einblenden, ausblenden, aufklappen, zuklappen…)
  • Ajax-Funktionalitäten (POST/GET, JSON…)
  • Zahlreiche frei verfügbare Plug-ins

Wer nutzt JQuery?

Vorwiegend Web-Entwickler, die auf einer etwas niedrigeren Ebene ein Javascript-Framework benötigen. JQuery ist kein High-Level-Framework mit WYSIWYG-Editor.

Moderne AJAX/DHTML-Webanwendungen nutzen immer häufiger High-Level-Frameworks wie GWT, ASP.NET, JSF usw…
Diese Frameworks bieten UI-Komponenten (z.B. Kalender, Tabellen mit DB-Anbindung, Bäume…) an, die herkömmlichen HTML-Seiten durch simples „Draufziehen“ (in einem WYSIWYG-Editor) oder Instanzierung neuer Teile (z.B. in einem UI-Composite-Pattern) die Fähigkeit verleiht sich durch Nutzerinteraktion (z.B. Mausklicks, Tastatureingaben…) zu verändern, ohne die Seite komplett neu zu laden (AJAX/DHTML).
Hierbei findet im Hintergrund eine DOM-Manipulation statt (häufig per AJAX – hier werden z.B. asynchron Abschnitte aus der Datenbank nachgeladen). Der Browser zuckt dabei nicht/Die Seite verschwindet bei einem Klick nicht kurz. Wenn man solche Komponenten selber entwickelt, ist JQuery eine ausgezeichnete Erweiterung zu herkömmlichen Javascript-Funktionen.
Microsoft hat in seiner IDE Visual Studio JQuery integriert und verwendet es bei der Entwicklung von Drag-And-Drop-UI-Komponenten. Aus diesem Grund ist ein Zugriff in Visual Studio auf die Funktionen möglich.

Tutorial

Zu Beginn…

Man benötigt 2 Dinge um mit JQuery zu beginnen

  • Das Einbinden der Bibliothek (herunterladen oder wie hier googlecontent nutzen)
  • Die READY-Funktion welche ein Ereignis ist, das sofort auftritt wenn das HTML-Dokument (oder das DOM) zur Manipulation bereit ist

…JQuery ermöglichen…

Hierfür fügen wir zwischen die HEAD-Tags des HTML-Dokuments die folgenden Skripte hinzu:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">// <![CDATA[
   
// ]]></script><script type="text/javascript">// <![CDATA[
                                         
	// Hier kommt die READY-Methode (s.u.) hin    
    
// ]]></script>Hello World

… und die Ready-Methode implementieren

Hierfür gibt es 3 Möglichkeiten

1. Vollständig:

jQuery(document).ready(function() {
   // Code hier einfügen
})

2. Mit $ als Alias für die jQuery-Klasse

$(document).ready(function() {
   // Code hier einfügen
})

3. Kurzform:

$(function() {
   // Code hier einfügen
})

Die READY-Methode ist das erste Event, was auftreten kann. Das Ereignis tritt ein, wenn auf das DOM zugegriffen werden kann. Ein ALERT-Fenster in dieser Methode aufzurufen macht nicht viel Sinn, da es nicht notwendig ist auf das geladene DOM zugreifen zu müssen. Dies könnte auch früher passieren.

Einschub: Was ist DOM?

Beim DOM handelt es sich um ein Modell, welches den Zugriff auf Elemente, Teilbäume oder Teil-XML-Strukturen erlaubt. Grundsätzlich sieht das DOM eine HTML-Dokumentes mit einer Tabelle folgendermaßen aus:

Verwendung des Selektions-Teils für den DOM

Bei den Beispielen werde ich nur noch die Kurzform der READY-Methode nutzen.

$(function() {
   // Wähle alle <a>-Tags aus und definiere ein CLICK-Ereignis
   $("a").click(function(event){
       // wird bei jedem klick auf einen Link aufgerufen
       alert('Hello JQuery!');

       // verhindert das Aufrufen des in Link-Zieles
       event.preventDefault();
   });
});
</a>

Wer den obigen Code bereits versteht, hat auch das Selektions-Konzept von JQuery verstanden.

Der erste Aufruf ist immer eine Selektion auf das DOM/HTML-Dokument. Mit $(„a“) (alternativ auch jQuery(„a“) ) wurden alle -Tags im gesamten HTML-Dokument ausgewählt. Das Anhängen von .click hängt dann an die Selektion (also alle Links, bzw. -Tags) ein onClick-Ereignis, welches ein ALERT-Fenster öffnet. Die Methode preventDefault() des Event-Objektes verhindert das Standardverhalten des Links, nämlich den Aufruf der Seite. Somit könnte man für alle Links die Zielseite ändern oder abfangen. Der Funktionskörper function() deklariert eine anonyme, namenlose Methode die ausgeführt wird, wenn das onClick-Ereignis des Links (also des -Tags) aufgerufen wird.

Man kann grundsätzlich alle – oder XML-Tags eines „Baumes“ (nämlich dem DOM) selektieren.

Doch was gibt es für Möglichkeiten der Selektion?

Oberflächlich gesehen gibt es 2 Möglichkeiten…

  1. Kombination aus CSS und XPATH -> $(„div > ul a“)
  2. Nutzung verschiedener Methoden des JQuery-Objektes (z.B. $(„a“).each mit $(this) Referenz

Selektion …

… auf eine TAG-ID
$(„#eineDivID“).addClass(„red“);

Die Raute # sagt der Selektion, das sie ein Attribut id=“..“ suchen soll. Die Selektion beinhaltet dann das Element (z.B. ein DIV). Hier wird diesem DIV die CSS-Klasse .red zugewiesen.

Beispiel:

Div-Inhalt
… auf alle Kind-Elemente   aller Tabellen eines Dokumentes
$(„table > tr > td“).addClass(„blue“);Die Selektion wählt alle td-Tags aller Tabellen aus und fügt diesen die CSS-Klasse .blue hinzu. Für Kind-Elemente (Unter-Tags) wird das Ist-Größer-Als-Zeichen > verwendet.

… auf das letzte
-Element aller Tabelle eines Dokumentes
$(„table > tr > td:last“).hover(function(){$(this).addClass(„green“);},function(){$(this).removeClass(„green“);})

Unter Verwendung vom HOVER-Event, welches 2 Parameter onMouseOver/onMouseOut als „functions“ übergeben bekommt, wird ein Mouse-Over-Event auf alle letzten Zeilen aller Tabellen gelegt. Fährt man mit der Maus drüber nimmt dieses die Farben/Styles an, die in der CSS-Klasse .green definiert wurden. Ist die Maus wieder außerhalb der Zeile wird die Klasse entfernt.

… auf alle 

-Tags, die ein Class-Attribut haben

$(„p[@class]“).hide()

Selektiert alle p-Tags im Dokument, die ein Attribut für eine CSS-Klasse vorgegeben haben class=“…“ und versteckt diese.

… auf den ersten 

-Tag einer Seite

$(„p:eq(0)“)…..
… auf alle sichtbaren DIVs der Seite
$(„div:visible“)…
… auf alle -Tags die unter einem -Tag sind
$(„ul > li“)…. alternativ auch $(„ul/li“)
… auf alle 

-Tags mit einer CSS-Klasse „foo“, die einen Link haben

$(„p.foo[a]“)…
… auf alle -Tags mit einem Link mit dem Text „Register“
$(„li[a:contains(‚Register‘)]“)…
… auf alle -Tags mit dem Name „bar“
$(„input[@name=bar]“)…..
… auf alle angehakten/gecheckten Radio-Buttons
$(„input[@type=radio][@checked]“)….

CSS Selektoren

Selektionen nach Stylesheet folgen der Syntax

E:STYLE

wobei E ein HTML-Element/HTML-Tag bezeichnet.

… auf ein 

-Element als einziges Kind-Element seines Eltern-Tags

$(„p:only-child“) …
… auf ein 

-Tag als letztes Kind-Element seines Eltern-Elements

$(„p:last-child“) …

Mit regulären Vergleichsoperatoren…

… z.B. bei der Suche nach Attributen

… auf alle -Tags, in deren href-Attribut der String /content/gallery vorkommt
$(„a[href*=’/content/gallery‘]“)…
… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ beginnt

$(„p[@foo^=bar]“)
… auf alle 

-Tags dessen Attribut „foo“ mit „bar“ endet

$(„p[@foo$=bar]“)

… will be continued (Fortsetzung folgt…)

HTML/CSS

HTML5: Mit Canvas malen

2 Kommentare

Aufgabenstellung

In einem HTML 5 Canvas soll über JavaScript-Events die Mausposition ausgelesen, und an dieser gemalt werden.

Ansatz

Verwendung der Events onmousedown, onmouseup, onmousemove des Canvas-Elements. Nutzung der clientX- und clientY-Eigenschaft

Prämissen / Vorraussetzungen

Es wird ein aktueller Browser verwendet, der das HTML 5 Canvas-Element unterstützt.

Lösung

<html>
<head>
<script>
	function draw() {
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "black";
		ctx.beginPath();
		var x;
		var y;
		canvas.onmousedown = function(e) {
			x = e.clientX;
			y = e.clientY;
			ctx.moveTo(x, y);
		}
		canvas.onmouseup = function(e) {
			x = null;
			y = null;
		}
		canvas.onmousemove = function(e) {
			if (x == null || y == null) {
				return;
			}
			x = e.clientX;
			y = e.clientY;
			x -= canvas.offsetLeft;
			y -= canvas.offsetTop;
			ctx.lineTo(x, y);
			ctx.stroke();
			ctx.moveTo(x, y);
		}
	};
</script>
</head>
<body onload="draw();">
	<canvas id="canvas" width="300" height="300"
		style="border: 1px solid black;"></canvas>
</body>
</html>
HTML/CSS

HTML 5 – Unterstützung des IE 9 Stand: 25. Februar 2011

Schreibe einen Kommentar

Hier ein kurzer Post….

IE9 hängt dem HTML 5 Standard weit hinterher

Der Microsoft Internet Explorer 9 schneidet bei HTML5Test.com in seiner aktuellsten Beta-Version immer noch schlechter ab, als ein Firefox, welcher bereits 1 Jahr alt ist. Chrome hat auch kräftig zugelegt. Ich habe die IE9 Beta gerade (25. Februar 2011) frisch runtergeladen und erhalte folgendes niederschmetterndes Ergebnis:

Zum Vergleich ein Screenshot des Android Browsers auf dem Samsung Galaxy i9000 :

image

Wichtige Innovationen sollen nicht unterstützt werden

Da Microsoft eine ActiveX-Variante von Direct3D anbietet, besteht keine Intention für eine Implementierung der WebGL-API, die das darstellen von 3D-Objekten im Browser unterstützt. Sollte sich das auf weitere Releases auswirken ist WebGL eine Totgeburt, oder der Internet Explorer wird aussterben.

Es ist keine IndexedDB zur Speicherung von Offline-Inhalten geplant, Webworkers/Websockets sind nicht vorhanden.

HTML/CSS

Responsive Design / Layoutgestaltung für jede Bildschirmauflösung

Schreibe einen Kommentar

Aufgabenstellung

Ein HTML-Layout soll sich automatisch an die Gegebenheiten des Endgerätes anpassen, egal ob mobiles Endgerät oder eine Großleinwand

Ansatz

Responsive Design funktioniert durch die Verwendung des @media-Tags von CSS. Das Layout richtet sich an der Bildschirmauflösung und der Orientierung des Endgerätes

Lösung

Aufbau der CSS-Datei:

@media (min-width: 950px) 
{
  /* Hohe Auflösung */
}

@media (min-width: 450px) and (max-width: 900px)
{
  /* Mittlere Auflösung */
}

@media (max-width: 450px) 
{
  /* Kleine Auflösung */ 
}

Quelle: www.mariofink.de

HTML/CSS

Wie aktuell ist noch HTML 5?

Schreibe einen Kommentar

HTML 5 ist nicht gleich HTML 5

HTML 5 entstand nicht durch das W3C-Konsortium, sondern war ursprünglich eine Spezifikation von WHATWG, einer Arbeitsgruppe von großen Browserherstellern. Nach einiger Zeit wurde das W3C darauf aufmerksam, wollte sich allerdings nicht der WHATWG anschließen und entwickelte an einer Kopie der Spezifikation weiter. Seitdem gibt es 2 unterschiedliche Versionen oder Auffassungen, die ein gemeinheitliches Verständnis von HTML 5 verhindern. Nach dem Verständnis von WHATWG, soll vom jetzigen Standpunkt eine rollierende, iterative Entwicklung stattfinden, so dass es kein HTML 6 geben wird… das W3C hingegen beruft sich auf Spezifikationsstände, die in einer Versionsnummer kenntlich gemacht werden sollen (wie bisher).

Wenn wir als Web-Entwickler von HTML 5 sprechen, müssen wir immer klar machen, auf welche Spezifikation wir uns beziehen und vor allem: ZU WELCHEM ZEITPUNKT. Momentan gibt es kein einheitliches Verständnis von HTML 5 und die meisten Internetnutzer fragen sich, über welche sinnlosen Dinge wir uns den Kopf zerbrechen, denn ihr Webbrowser „kann doch schon HTML 5″….

Browserunterstützung – Stand: 6. Januar 2011

Auf der Seite http://html5test.com/ lässt sich die Browserkompatibilität mit HTML 5-Seiten testen. Welcher Spezifikation das genügt, müsste man im Detail untersuchen.

  • Internet Explorer 7 ist das Schlusslicht: 21 von 300 Punkten
  • Internet Explorer 9 PPT hat bereits 79 von 300 Punkten
  • der aktuelle Firefox 3.6.13 erhält 139 von 300 Punkten
  • die Beta Version vom 4er Firefox erhält bereits 235 von 300
  • Opera 10.62 bekommt 203 von 300 Punkten
  • Apple Safari 5.0.1 erhält 178 von 300 Punkten
  • Gewinner ist Google Chrome / Chromium 7 mit 262 von 300 möglichen Punkten.

Bei dem beachtlichen Marktanteil vom Internet Explorer (immerhin über 50 Prozent) spielt es keine Rolle welcher Browser der bessere HTML 5 Interpreter ist … Internetseiten sollen barrierefrei und browserunabhängig für jeden Nutzer lesbar bleiben…

Wer unbedingt jetzt schon HTML5 nutzen will…

… kann das HTML 5 Boilerplate einsetzen. Hierbei handelt es sich um einige Bibliotheken, die nach der Einbindung bei älteren Browsern eine Ersetzung von HTML5-Tags in Browser-verständliche Elemente vornimmt. Die funktioniert in einigen Browsern wie dem Firefox aber nur bedingt…

Mein Fazit…

… ist, wenn sich die Herrschaften mal geeinigt haben, was HTML 5 ist, wird das mit Sicherheit eine tolle Sache. Bis dahin sollte man darauf verzichten. Die gerühmten Elemente wie WebGL, die das Erstellen von 3D-Objekten im Browser ermöglichen, sind eigentlich kein Bestandteil der Spezifikation, werden aber mit HTML 5 in Verbindung gebracht.