mysrc.de » HTML5 http://www.mysrc.de - jQuery, MooTools, HTML5, AJAX Tue, 14 Jun 2011 08:24:25 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery Mobile – Der Seitenaufbauhttp://www.mysrc.de/html5/jquery-mobile-der-eitenaufbau/ http://www.mysrc.de/html5/jquery-mobile-der-eitenaufbau/#comments Wed, 01 Dec 2010 20:03:17 +0000 Stefan Huissel http://www.mysrc.de/?p=1165 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..

Ähnliche Artikel

]]> http://www.mysrc.de/html5/jquery-mobile-der-eitenaufbau/feed/ 0 jMediaelement – jQuery HTML5 Audio-Video Kithttp://www.mysrc.de/jquery/jmediaelement-jquery-html5-audio-video-kit/ http://www.mysrc.de/jquery/jmediaelement-jquery-html5-audio-video-kit/#comments Tue, 20 Jul 2010 07:48:49 +0000 Oliver Storm http://www.mysrc.de/?p=1084

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.

Ähnliche Artikel

]]> http://www.mysrc.de/jquery/jmediaelement-jquery-html5-audio-video-kit/feed/ 0