Ten post nie jest śmiertelnie poważny ani merytoryczny. Jednak nosi znamiona użyteczności i bycia ciekawostką zarazem. Otóż istnieje taki dodatek do Firefoxa o nazwie Tilt, który za pomocą WebGL rysuje strukturę dowolnej strony WWW.
Każdy div/element DOM rysowany jest w tym dodatku jako osobny klocek w 3D. Taki widok możemy dowolnie obracać, przybliżać itd. Dzięki temu możemy bardzo szybko, bo wizualnie, przekonać się, czy struktura strony jest przejrzysta i prosta, czy przekombinowana i ciężka. A to może mieć bezpośredni wpływ na wydajność jej interpretacji przez przeglądarkę. I to jest użyteczny element tego wpisu. Spójrzmy na przykłady, tytułem wprowadzenia.
Prosty i logiczny html rysowany jest jako płaska struktura.
<html>
<div>
<div>Hello world!</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
</div>
</html>
Natomiast jeśli kod skomplikujemy, tworząc mnóstwo zagnieżdżonych elementów, na wizualizacji zaczną pojawiać się dziwne struktury, np. wysokie bloki.
<html>
<div>
<div>
<div>
<div>
<div>
<div>Hello world!</div>
</div>
</div>
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (...)
</div>
</html>
Oczywiście nikt nie napisze wprost tylu pustych zagnieżdżonych divów, ale myślę, że wiecie o co chodzi. Frameworki, różne komponenty, nasz kod pięknie napisany ale nie zawsze przemyślany - wszystko razem wzięte produkować może takie kwiatki. Zatem Tilt jest narzędziem użytecznym, bo może nam pomóc szybko zidentyfikować "dziwne" fragmenty stron, nad którymi pracujemy.
Wiedziony ciekawością zacząłem przeglądać "internety" oglądając w ten sposób najróżniejsze strony, które przyszły mi do głowy. I tu zaczyna się ciekawostka, bo te wizualizacje potrafią być po prostu całkiem... ciekawe. Poniżej galeria kilku wybranych przeze mnie przykładów, wraz z krótkim opisem.
Blog.kokosa.net
Mój blog ma bardzo typową, płaską strukturę. Czyli BlogEngine.NET jakoś sobie radzi. Jedynie ta śmieszna wysepka Twitterowego widgeta wyraźnie się wyróżnia.
Meetup
Meetup jest przykładem ładnie uporządkowanej strony, wszystko wygląda logicznie i nie ma żadnego dziwactwa.
Twitter
Podobnie Twitter. Ma więcej drobnych elementów, ale ogólnie ma to ręce i nogi.
Facebook
Na tym tle Facebook jest jedną z największych kobył, jaką udało mi się znaleźć. Całe mnóstwo zagnieżdżonych elementów, niezły bałagan. Gratulacje!
Youtube
Youtube zaś to typowy przykład strony z przewijanymi paskami, które są wielokrotnie szersze od ekranu. Fajnie to wygląda.
Onet.pl
Tak samo jak Onet. Siup prawie w nieskończoność leci główny baner.
Weather.com
Jak na stronę z wieloma obrazkami i informacjami, Weather.com nieźle sobie radzi. Ale wyróżnia się kilka dziwnych wysepek, coś tam by się pewnie dało zoptymalizować.
Sourceforge.net
Kilka "wieżowców" na SourceForge.net pochodzi z banerów reklamowych AdChoices. A mogło być tak pięknie.
Warszawa.jakdojade.pl
JakDojade.pl też ma całkiem złożoną strukturę - szczególnie lewego menu.
Mail.webio.pl
Na koniec mój ulubiony przykład - schody do nieba z webowej poczty na hostingu webio.pl. Tutaj mamy przykład maila z długą historią, każdy poprzedni to kolejny stopień naszych schodów.
Można się tak bawić długo, zachęcam Was gorąco do poszukiwań prawdziwych dziwactw. Jeśli coś namierzycie, komentujcie! A swoją drogą, jak Wasza strona wygląda w 3D?