FANDOM


Istnieje wiele różnych praktyk w wikitekście, które chociaż użyteczne dla zaawansowanych użytkowników na komputerach, niestety powodują problemy przy wyświetlaniu treści na urządzeniach mobilnych. Zagnieżdżone table są jednym z głównych przykładów.

Przypomnienie: Zawsze możesz zobaczyć jak artykuł wygląda na urządzeniach mobilnych dodając ?useskin=wikiamobile na końcu adresu lub wybierając podgląd mobilny w edytorze klasycznym.

Czym są zagnieżdżone tabele?

Zagnieżdżone tabele to zwyczajnie tabele wewnątrz tabeli.

Desk Mob

Oto przykład takich tabeli na społeczności Brave Frontier. Zwróć uwagę na różnicę między wyglądem na komputerze a widokiem w mało optymalnej wersji mobilnej.

Dlaczego zagnieżdżone tabele są złe?

W miarę możliwości najlepiej unikać zagnieżdżonych tabeli. Ogólnie, tabele zawsze zajmują najmniejszą możliwą szerokość i w przypadku ograniczonej ilości miejsca w poziomie zwiększą swój rozmiar w pionie. Jeśli wewnątrz tabeli zostanie umieszczona inna tabela, wymusza to zwiększenie szerokości danych komórek żeby zmieścić tabelę przez co nadrzędna tabela jest szersza niż pozwala na to miejsce. Jest to szczególnie widoczne na urządzeniach mobilnych z powodu małej ilości miejsca na ekranie.

Powoduje to wymóg przewijania w poziomie w wersji mobilnej i większość tabeli jest niewidoczna na ekranie. Jeśli podzielisz tabelę na kilka niezależnych, informacje są wyświetlane w jednej kolumnie co pozwala na dostęp do treści tylko przewijając w pionie.

Pozwala to również każdej tabeli na większą dynamiczność. Formatowanie treści jest dyktowane przez rozmiar ekranu, przez co przeglądarka może ustawić tabele dokładnie tam gdzie najlepiej pasują przy przewijaniu treści.

Co zrobić jeśli Twoja społeczność używa zagnieżdżonych tabel

Zachęć ich do podzielenia ich na mniejsze i zbuduj infrastrukturę, która nie jest zależna od zagnieżdżonych tabel. Czasami ustawienie tabeli zaraz obok siebie pozwala na osiągnięcie tego samego efektu. Jeśli treść najlepiej prezentuje się w formie tabeli, możesz dostosować komórki tabeli w taki sposób, że wyglądają jak tabela wewnątrz tabeli, ale naprawdę jest to jedna wielka tabela.

Najlepsze praktyki

Jak zidentyfikować zagnieżdżone tabele

W trybie źródłowym, tabele zaczynają się od znacznika {| wikiskładni lub znacznika HTML – <table>. Zamykane są za pomocą odpowiednio |} lub </table>. Dlatego, jeśli zobaczysz początek tabeli i zanim trafisz na znacznik zamykający, trafisz na otwarcie nowej tabeli oznacz to, że masz do czynienia z zagnieżdżonymi tabelami. Czasami mogą mieć nawet kilka warstw.

Example code 1024

Przykładowy kod zagnieżdżonej tabeli

Jak podzielić zagnieżdżone tabele

Pierwszym krokiem jest zidentyfikowanie jak dużo tabel jest zagnieżdżonych w głównej tabeli.

Drugim krokiem jest odnalezienie najgłębszej tabeli i wyciągnięcie jej z łańcucha zagnieżdżonych tabel.

Teraz wciśnij „Podgląd” żeby zobaczyć jak tabela prezentuje się sama. Teraz, jeśli tabela nie wygląda jak trzeba, możesz przyjrzeć się parametrom tabeli (kod zaraz po znaczniku otwierającym tabelę: {|)

Po wyciągnięciu wszystkich poza główną tabelę, możesz usunąć oryginalny kod tabeli. Teraz tabele powinny być ułożone jedna pod drugą - optymalnie dla urządzeń mobilnych.

Jak zachować wygląd na komputerze gdy tabele są już oddzielne

Tabele powinny być ułożone jedna pod drugą lub obok siebie. Dzięki temu, przeglądarka mobilna będzie mogła przestawić tabele tak, aby prezentowały się najlepiej przy dostępnym miejscu na ekranie. Jeśli tabele znajdują się obok siebie, to przeglądarka przeniesie te, które się nie mieszczą na ekranie do następnego wiersza.

Największym wyzwaniem jest takie dostosowanie i ustawienie tabel, które jest najlepszym kompromisem miedzy wersją na komputery a widokiem mobilnym. To może wymagać dodania CSS w celu dostosowania wyglądu na komputerach. CSS, zarówno w arkuszu jak i w kodzie, pozwala na kontrolę wyglądu tabeli w pełnej wersji, a pozostawienie domyślnego wyglądu na urządzeniach mobilnych. Jeśli potrzebujesz pomocy w dostosowaniu tabeli, przejrzyj strony w sekcji „Zobacz też”.

Przydatne informacje dotyczące zagnieżdżonych tabel

Zwróć uwagę na to, że jeśli do wyświetlania tabeli jest używany szablon, naprawienie zagnieżdżonych tabel w szablonie również naprawi wersję mobilną na wszystkich stronach, które go używają. Oznacza to również, że wprowadzanie optymalizacji w szablonie może mieć wielki wypływ na całą wiki.

Jeśli w tabelach znajdują się obrazy, to komórki je zawierające dostosują swoje wymiary do obrazu. Warto zmniejszyć rozmiar obrazów do rozmiarów przyjaznych dla urządzeń mobilnych, lub całkowite wyciągnięcie ich z tabeli. Jeśli obraz jest bardzo duży, a znajduje się poza tabelą, mobilna przeglądarka sama dostosuje jego rozmiar, tak aby najlepiej pasował do rozdzielczości ekranu.

Badanie przypadku Brave Frontier Wiki

Społeczność Brave Frontier, była chętna być świnką doświadczalną/spiskować z nami w celu unicestwienia zagnieżdżonych tabel. Udało nam się skutecznie znaleźć balans między podzieleniem tabeli w ich najważniejszym szablonie (szablonie postaci) oraz zachowaniem wyglądu ich wersji na komputery. W efekcie mamy znacznie lepszą wersję mobilna dla dużej ilości artykułów na ich wiki. Zobaczcie sami:


Jeśli jesteś bardziej technicznym adminem i chcesz się przekonać jakie dokładnie zmiany w kodzie zostały wprowadzone, możesz zobaczyć je tutaj:

Uwaga: kod został zabezpieczony przez niechcianymi zmianami. Jeśli chcesz coś zmienić, skopiuj szablon na swoją wiki lub do brudnopisu.

Zobacz też

Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.