Archiv für 'HTML5'

Dez201001

Stefan Huissel

0

jQuery Mobile – Der Seitenaufbau

Bevor man damit beginnt seine ersten mobile Websites zu bauen, gibt es einige grundlegende Punkte die Struktur betreffend zu wissen.
Zunächst einmal arbeiten wir unter dem HTML5 Doctype. Was in mobilen Endgeräten glücklicherweise kein Problem ist, da diese HTML5 in sogut wie allen Fällen verstehen.

Der HTML Head mit den für jQuery Mobile notwendigen JS-Skripten, sieht nun wie folgt aus:

?View Code HTML
1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html>
	<head>
	<title>Meine mobile Website</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
	<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>

Für das Framework benötigen wir im HTML Teil nun ein spezielles Attribut mit der Bezeichnung “data-role”, das den allgemein Aufbau der Seite definiert.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div data-role="page">
<body>
 
<div data-role="page">
 
	<div data-role="header">
		<h1>Meine mobile Website</h1>
	</div>
 
	<div data-role="content">
		<p>Hier der normale Seiteninhalt..</p>
	</div>
 
	<div data-role="footer">
		<p>Allgemeine Seiteninfo</p>
	</div>
</div>
 
</body>
</html>
</div>

Der notwendigen Attributausprägungen sind hierbei page, header, content und footer. Jedes einzelne dieser Divs ist frei mit normalen HTML Tags befüllbar.

Damit haben wir nun schon unsere erste statische Seite. Obwohl wir ein Javascript Framework benutzen, brauche wir bisher dafür noch kein Javascript. Alle notwendigen Schritte laufen im Hintergrund ab.

Im nächsten Teil widmen wir uns dann der Verlinkung mittels Ajax und dem Wechsel zwischen verschiedenen Seiten..

Jul201020

Oliver Storm

0

jMediaelement – jQuery HTML5 Audio-Video Kit

Nach langer Zeit hab ich heute mal wieder ne Kleinigkeit für euch.
Meiner Meinung nach der momentan wohl beste HTML-5 Mediaplayer.
jMediaelement spielt sowohl Audio, als auch Video-Dateien ab und hat für alle Browser die kein HTML-5 unterstützen nen Fallback auf Flash und VLC.

Der Player ist über CSS komplett stylebar und unterstützt alle großen Dateiformate wie z.B.: ogg (theora/vorbis), mp4/mov (h.264), WebM (VP8/vorbis), flv, Youtube videos und mehr.

Die implementierung des Players ist kinderleicht und gut dokumentiert.