Urządzeń mobilnych wciąż przybywa i przybywa, co wiąże się z coraz częstszym wyświetlaniem stron Web przez smartfony i tablety. Projektując nową aplikację webową w HTML5 warto zatem od razu pomyśleć o jej wyświetlaniu na urządzeniach przenośnych. ASP.NET MVC 4 i jQuery Mobile oferują w tym zakresie wiele udogodnień. Myślę, że prezentacja Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile może tutaj dobrym wprowadzeniem. Poniżej trochę notatek zrobionych na jej podstawie.
Adaptacja stron web dla urządzeń mobilnych
nic
standardowe ASP.NET MVC3, definiujemy viewport
ASP.NET MVC4
Nowe szablony, m.in Mobile dedykowany dla urządzeń mobilnych. Standardowy Internet Application też wspiera urządzenia mobilne.
CSS3 media queries
Adaptywny rendering
+
- zoptymalizowany dla danego urządzenia
- mniejsze powielenie nakładów
-
- uwydatnia różnice między desktopem i urządzeniami mobilnymi
- negatywny wpływ na przepustowość
Tryby wyświetlania + jQuery mobile
ASP.NET MVC 4 - różne widoki dla różnych urządzeń
Widoki *.mobile.cshtml dla urządzeń mobilnych
Obsługa różnych rodzajów urządzeń np. iphone
Widoki dedykowane dla iphone - pliki *.iphone.cshtml
Nuget
- jQuery Mobile
- jQuery.Mobile.Mvc
Widok listy
Przełączanie między widokami (między mobilnym a pełnym, dedykowanym dla desktop)
Filtrowanie list
Generowanie widoków mobilnych dla wskazanych widoków ogólnych
Nuget: MvcHack.ViewModelizer
Stylowane przyciski z ikonami
Adaptacja po stronie serwera
+
- maksymalna elastyczność
- efektywna przepustowość
-
- możliwa powtarzalność
- wykrywanie urządzenia nie jest trywialne
Manifest cache dla aplikacji
Web.config
Knockout standardowo dodawany do ASP.NET MVC 4
BTW Knockout jest dzieckiem product managera ASP.NET Steve Sandersona. Jakoś to do mnie wcześniej nie dotarło mimo jego choćby prezentacji na MIX11 … Czyli jakby ktoś z ASP.NET wspomógł nockout i udowodnił, że za pomocą JavaScript można robić analogiczne rzeczy jak w C# i XAML –
Trochę luźnych informacji o HTML5, CSS3, Java Script i jQuery, niezwiązanych z zasadniczą tematyką postu:
jQuery Plugins: globalizacja, data link, itd.
CSS3 w Ajax Control Toolkit
JScript Editor Extensions dla VS 2010
JsDefer - client script loader
Posty
Brak komentarzy:
Prześlij komentarz