TechLife devBlog

Lipiec 2011

Mikro struktury HTML

Kodowanie, Techblog 2 lipca 2011 19:16

Z doświadczenia wiem, że najlepsze rozwiązania, to takie, do których doszedłem sam ewolucyjnie. Wtedy najlepiej rozumiem do czego one są i dlaczego tak a nie inaczej działają. Jest to o wiele lepsza metoda niż przyjmowanie nawyków innych osób, których sami do końca nie rozumiemy. Dlatego najczęściej nie stosuję różnych narzędzi tylko dlatego, że inni je polecają ale czekam spokojnie aż sam dojdę do punktu, w którym uznam, że dokładnie takiego narzędzia potrzebuję. Swoją drogą w ten sposób uwalniam się od stosowania przeróżnych udziwnień, które w rzeczywistości nie są przydatne / efektywne / nie do końca wiadomo w czym pomocne.

Po kilku dobrych latach kodowania stron coraz wyraźniej zaczynam dostrzegać co jest potrzebne do szybkiego i sprawnego budowania interfejsów www -- mikro struktury. HTML ma to do siebie, że jest dość "niskopoziomowy", dzięki czemu można za jego pomocą poskładać do kupy różne cuda. Kiedy jednak chcemy szybko zbudować interfejs składający się z często powtarzających się elementów (list, przełączników, kontrolek, pasków postępu, przycisków, komunikatów, okien dialogowych itp) odkrywamy nagle, że tak na prawdę brak nam widgetów czy kontrolek znanych z różnych środowisk graficznych. Za każdym razem budujemy je na nowo z "niskopoziomowych" klocków HTML-a zamiast po prostu wziąć i wykorzystać gotowe struktury. Coś jak np. interfejsy dla telefonów:

Android GUI

Jednym słowem chodzi mi o coś w rodzaju połączenia mikroformatów z Zen Garden. Jeżeli stworzymy odpowiednio elastyczną strukturę uzyskamy możliwość stylowania jej CSS-em na wiele różnych sposobów. Weźmy na przykład prostą listę:

  • Element 1
  • Element 2
  • Element 3
  • Element 4

Jeżeli zamienimy ją w uniwersalną strukturę:

  • Element 1
  • Element 2
  • Element 3
  • Element 4

Otrzymujemy obiekt, który może uzyskać praktycznie nieskończenie wiele kształtów. Na dodatek biorąc tą samą strukturę i zmieniając nazwę klasy z vertical-list na horizontal-list możemy uzyskać listę poziomą. Oczywiście każda struktura może mieć kilka wariantów wyglądu np vertical-list-v2.

Używając takich struktur w swoim kodzie, dostosowanie ich do nowego projektu mogło by się ograniczyć wyłącznie do podłączenia innego arkusza stylującego struktury. Podobnie jak jest to rozwiązane w przypadku galerii jQuery UI.

Nie bardzo chce mi się wierzyć, że nikt przede mną jeszcze na to nie wpadł, więc jeżeli znacie jakieś podobne projekty to bardzo proszę o linki bo samemu nie udało mi się nic sensownego znaleźć.