Dzisiaj użytkownicy urządzeń mobilnych stanowią tak duży odsetek użytkowników internetu, że ciężko jest ignorować świat małych wyświetlaczy. Badania pokazują, że na zachodzie wiele osób stojących przed wyborem internetu podłączonego do komputera i internetu dostępnego np. za pośrednictwem smartphone’a wybiera to drugie. Mobilność, przeglądarki urządzeń mobilnych i ich specyfika związana ze sposobem obsługi staje się chlebem powszednim dla front-end deweloperów.
Jak odnaleźć się w tym nadal nowym świecie? Przede wszystkim trzeba być na bieżąco. Projektowanie stron dedykowanych urządzeniom mobilnym to przede wszystkim kwestia informacji i zrozumienie specyfiki tego z czym mamy do czynienia.
Dlatego w tym artykule chciałem Wam przybliżyć jQuery Mobile, czyli framework stworzony po to by tworzyć strony internetowe dla urządzeń mobilnych. Na stronie jQuery Mobile autorzy zamieścili taki opis wspomnianego framework’a:
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Celem jQuery Mobile jest stworzenie interfejsu użytkownika działającego pod najrozmaitszymi platformami i opartego na zasadzie upgradu tak aby również użytkownicy starszych przeglądarek mogli cieszyć się chociaż podstawowymi funkcjonalnościami.
Fundamentem framework’a jest jQuery i jQuery UI. Natomiast całość składa się z bogatego zestawu widgetów dobranych po to aby stworzyć stronę maksymalnie wykorzystującą możliwości urządzeń mobilnych pod względem doświadczeń użytkownika.
Główną zaletą jQuery Mobile jest fakt, iż dostarcza nam gotowe rozwiązania wspierające animacje i efekty nawigacji typowe dla aplikacji mobilnych. W ten sposób otrzymujemy stronę internetową, która w swej funkcjonalności nie różni sie od aplikacji, dostarczając użytkownikowi takiej samej jakości wrażeń.
Tworzenie stron staje się też wyjątkowo szybkie. Żeby uzyskać niezbędny fundament wystarczy skorzystać z przykładu znajdującego się w dokumentacji:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div><!-- /page --> </body> </html> |
Nie jest to pewnie najbardziej rozbudowana strona jaką widzieliście, ale ten prosty przykład pokazuje jak łatwo możemy zacząć proces deweloperski.
Dzięki wykorzystania atrybutów 'data-” jesteśmy w stanie w ciągu sekund tworzyć listy, buttony, slidery i wiele innych. Oczywiście jeśli ktoś chce może również edytować style tych elementów czy nawet pominąć uproszczony mechanizm funkcjonowania jQuery Mobile i wywoływać pluginy w sposób klasyczny.
Polecam przetestować!
