baner

Ewolucja urządzeń spowodowała że w kieszeni mamy małe komputery, procesor z 4 rdzeniami, 1 lub 2 giga ramu, a z drugiej strony małe ekrany do 5 cali może ciut więcej ale większość mniej. O ile na łączach stacjonarnych mamy nie ograniczony transfer to na telefonach jednak jest on w limicie. Dlatego na dziś strony mobilne projektuje dodatkowo z uwzględnieniem jeszcze jednego parametru mianowicie z możliwością ukrycia treści na urządzeniach mobilnych. Projektując stronę w technologii responsywnej nie tworzymy oddzielnej podstrony z literką m z przodu, a jeden i ten sam szablon będzie obsługiwał każdy rodzaj wyświetlacza.

01 hide content on mobile page 1

 


Na takich stronach internetowych niektóre elementy się skaluje i dostosowują się one do wielkości monitora, jednak nie wszystko tak się uda zrobić.
Przykładem nie będzie slider na którym jest tekst. Na małych urządzeniach slider się zeskaluje jednak tekst pozostanie tej samej wielkości i niestety ale się nie zmieści. Rozwiązaniem jest wtedy możliwość ukrycia tekstu na urządzeniach mobilnych lub generalnie ukrycia całych obszarów. Możemy zrobić też odwrotnie treści dla stron mobilnych ukryć na dużych ekranach lub jeszcze inaczej pokazać tylko treści dla tabletów na tabletach a ukryć je na telefonach i na komputerach.

 

Szablon Joomla 3 dla urządzeń mobilnych klasy wprowadzenie

Rozwiązanie problemu opisze na bazie framorka VERTEX, podobne rozwiązania ma większość dobrych szablonów, zaznaczam podobne a nie identyczne, czasami nawet trudniejsze.
W tym Frameworku mamy możliwość ukrycia treści za pomocą dwu funkcji przez panel administracyjny szablonu, proszę zobaczyć na obrazek powyżej, zaznaczamy pola obszarów które chcemy ukryć na tablecie lub na telefonie (jest to moje tłumaczenie szablonu, oryginalnie jest po angielsku). Jak widać możemy decydować, że na tablecie nie będzie wyświetlany obszar header 1. A ten sam obszar może być wyświetlany na komórce. Jednak to nie jest precyzyjne rozwiązanie, za jego pomocą nie możemy decydować o tym czy ma być wyświetlany na telefonie konkretny moduł czy nawet konkretna treść, zdjęcie. Stąd wprowadzono dodatkowe rozwiązanie bardzie precyzyjne: klasy.
To są najprostsze klasy

hide_all

hide_wide_screen

hide_standard_screen

hide_large_tablet

hide_small_tablet

hide_mobile

show_wide_screen

show_standard_screen

show_large_tablet

show_small_tablet

show_mobile

są też klasy dokładniejsze


np. hide_900 i tak co 50 px


Czym on się róznią się obie klasy mianowicie dokładnością pierwsza jest ogólna i łatwiejsza w użyciu ponieważ nadajemy danemu modułowi, obrazkowi czy partii tekstu klase hide_mobile i już dana treść objęta ta klasa zostanie ukryta na urządzeniach mobilnych. Natomiast używając klasy hide_900 ukryjemy treść tylko dla rozdzielczości pomiędzy 900 a 850 px.

Myślę że to jest zrozumiałe, dodajemy klasę odpowiednią klasę. Oczywiście jak widać kombinacji dla klas ogólnych jest całkiem sporo proszę zauważyć że mamy rozróżnienie na ekrany standardowe i dla komputerów i panoramiczne. Na dziś może nie jest to bardzo istotny podział, jednak w dobie spadających cen ekranów full hd bardzo istotne staje się dopasowanie treści również dla takich monitorów i uwaga telewizorów, ponieważ coraz więcej odbiorników ma możliwość przeglądania Internetu.

Klasy dla stron responsywnych na innych szabloach dla Joomla 3

Jak pisałem podobne rozwiązania mają inne Frameworki tak to wygląda dla Gantry

visible-phone

visible-tablet

visible-desktop

visible-large

hidden-phone

hidden-tablet

hidden-desktop

hidden-large

Natomiast w przypadku Frameworka JA T3 wygląda to tak

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

W następnej części opiszę praktyczne zastosowanie klas na bazie frameworka VERTEX, czyli pokaże jak ukryć moduł, tekst, obrazek na telefonie, analogicznie jak pokazać różne treści na różnych urządzeniach. Podobnie będa Państwo postepować w przypadku pozostałych frameworków dla Joomla.

Ważna UWAGA: generalnie wiele szablonów jest oparta o Bootstrap i tutaj możemy stosowac klasy.

v3.2.0

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

Widzimy podobieństwo do JA T3 tak - tam jest dwa rodzaje szablonów dla Bootstrap 2 i dla Bootstrap 3 ale to już za skomplikowane na ten wywód.

Jak pisałem w następnym odcinku powiem o szablonie dla Joomla 3 opartym o vertex


Ebook Joomla 3

ebook 2 okladka

Tutaj jest drugie wydanie ebooka o Joomla 3, dopisane jest kilka rozdziałów, jest ponad 270 stron