[jQuery][HTML5] Jak zrobić mobilną wersję strony internetowej pod iPhone’a i Androida?

W dzisiejszych czasach telefony i tablety wyposażone w systemy iOS i Android podbijają świat. Dlatego fundacja jQuery stworzyła bibliotekę jQuery specjalnie pod urządzenia mobilne - jQuery Mobile. Jest to biblioteka, która obecnie znajduje się w wersji alfa, lecz nie zmienia to faktu, że jest bardzo efektowna i narzuca nowe konwencje budowania stron WWW dla urządzeń mobilnych. A więc jak zbudować mobilną wersję strony WWW?

Mobilne strony WWW, które opierają o bibliotekę jQuery Mobile współpracują z HTML5, dlatego też będę z niego korzystał w jakimś stopniu.
Na początek musimy zdefiniować szkielet nagłówka HEAD strony:

< !DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8" />
<title>Demo strony mobilnej</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
</html>

Jak widać na powyższym kodzie, do pliku HTML dodajemy odpowiednie biblioteki jQuery oraz domyślny arkusz stylów dla jQuery Mobile.
Kolejnym krokiem jest zdefiniowanie szkieletu strony w sekcji BODY:

<body> 
 
<div data-role="page" id="strona1">
 
	<header data-role="header" class="ui-bar-a ui-header">
		<h1 role="heading" class="ui-title">Strona 1</h1>
		<nav>
			<ul>
				<li><a href="#strona1" data-role="button" data-icon="home">Strona 1</a></li>
				<li><a href="#strona2" data-role="button" data-icon="star">Strona 2</a></li>
			</ul>
		</nav>
	</header>
 
	<div data-role="content">
		<p>To jest przykładowa strona zbudowana z wykorzystaniem biblioteki jQuery Mobile.<br />
		Powinna się dobrze prezentować w telefonach iPhone, z systemem Android czy BlackBerry.</p>	
	</div>
 
	<footer data-role="footer">
		<h4>Stopka</h4>
	</footer>
</div>
</body>

Powyższy kod przedstawia widok pierwszej strony na której standardowo zostały zamieszczone: nagłówek (header), treść główna oraz stopka(footer). Na pewno zauważyłeś/aś kilka nowych rzeczy w stosunku do powszechnie znanego "zwykłego" HTML. Są to:

data-role - dzięki tej instrukcji, możemy tworzyć własne atrybuty semantyczne (o tym wkrótce w kolejnym artykule)
data-icon - nowy sposób na wstawianie ikonek do linków
role - odpowiada za przydzielenie roli w rozumieniu semantycznym (role - semantyka)

Poniższy kod prezentuje strukturę kolejnej strony, na której wyświetlane są obrazki w przyciskach. Na potrzeby artykułu stworzyłem specyficzną galerię.

<div data-role="page" id="strona2">
 
	<header data-role="header" class="ui-bar-a ui-header">
		<h1 role="heading" class="ui-title">Strona 2</h1>
		<nav>
			<ul>
				<li><a href="#strona1" data-role="button" data-icon="home">Strona 1</a></li>
				<li><a href="#strona2" data-role="button" data-icon="star">Strona 2</a></li>
			</ul>
		</nav>
	</header>
 
	<div data-role="content">	
		<ul class="ui-listview" data-role="listview" role="listbox">
			<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
				<div class="ui-btn-inner">
					<div class="ui-btn-text">
						<img class="ul-li-thumb" src="1.jpg"/>
						<h3 class="ul-li-heading">Logo 1</h3>
						<p class="ul-li-desc">Logo brązowe</p>
					</div>
					<span class="ui-icon ui-icon-arrow-r"></span>
				</div>
			</li>
			<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
				<div class="ui-btn-inner">
					<div class="ui-btn-text">
						<img class="ul-li-thumb" src="2.jpg"/>
						<h3 class="ul-li-heading">Logo 2</h3>
						<p class="ul-li-desc">Logo czerwone</p>
					</div>
					<span class="ui-icon ui-icon-arrow-r"></span>
				</div>
			</li>
		</ul>		
	</div>
 
	<footer data-role="footer">
		<h4>Stopka</h4>
	</footer>
</div>

Jak widać przedstawione zostały inne zastosowania atrybutu role.
Należy zauważyć, że bardzo ważne jest to, aby stosować odpowiednie nazewnictwo klas. Ponieważ, to właśnie one definiują efektowny wygląd strony mobilnej.
W powyższym przykładzie zastosowałem linkowanie wewnętrzne, ale nic nie stoi na przeszkodzie, aby stosować linkowanie zewnętrzne. Należy pamiętać, że wewnątrz tej biblioteki działa AJAX i nie jesteśmy zmuszeni do tworzenia własnych wywołań AJAXowych.
Ponadto, biblioteka jQuery Mobile zapewnia kilka schematów kolorystycznych (od a do f) w celu stworzenia atrakcyjnego, dopasowanego do strony wyglądu.

Podsumowując, biblioteka jQuery Mobile mimo że znajduje się jeszcze w wersji alfa pozwala osiągnąć niesamowite efekty i pozwala tworzyć strony dopasowane pod najnowsze smartfony. Dzięki niej, możemy już zacząć korzystać z dobrodziejstw nowego języka budowania stron WWW - HTML5, oraz technologii AJAX.
Najciekawsze jest to, że nie musimy z pomocą tej biblioteki budować stron wyłącznie pod smartfony. Możemy stworzyć interfejs dla zwykłych stron WWW.
Należy pamiętać, że pełnię "mocy" ta biblioteka ukaże w przeglądarkach: Google Chrome (Android) i Safari (iOS). W Operze i Firefoksie będzie też działać, ale nie będzie można zauważyć animacji. Natomiast w IE7/8/9 w ogóle nie zadziała.
Demo z tego artykułu można zobaczyć pod tym linkiem: strona mobilna z wykorzystaniem jQuery Mobile