TechLife devBlog

Mikro struktury HTML

Internet 2nd Jul 2011

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źć.

Komentarze z jogger.pl

zx 02.07.2011 / 19:30

Serio widzisz zastosowanie czegoś takiego? Przecież każda strona ma wyglądać inaczej, to gdzie tego używać?

W swoich projektach właśnie tak powinno się budować fragmenty stron, ale tak ogólnie to gdzie z tego korzystać?

iss 02.07.2011 / 19:32

"Zen" a nie "Zend".

trójkąt 02.07.2011 / 19:37

Przećwiczyłem już coś takiego na kilku projektach i sprawdza się bardzo dobrze. Zamiast budować za każdym jakieś bardziej podatne na stylowanie struktury zacząłem używać tych samych, które obmyśliłem wcześniej i teraz moja praca ogranicza się tylko do stylowania. W dodatku nawet stylowanie jest łatwiejsze bo dobrze wiem jak każdy element się nazywa i nie muszę co chwilę zaglądać do kodu.

Poza tym powstaje wiele aplikacji, które mają po prostu wyglądać ładnie i działać. Więc w takich przypadkach użycie gotowych struktur i podpięcie do nich estetycznego stylu to połowa pracy mniej.

monsun 02.07.2011 / 20:04

Widzę że nie tylko ja na to wpadłem. Szukałem podobnych rozwiązań i nie znalazłem nic sensownego. Jak tylko znajdę chwilę, co prawdopodobnie nie nastąpi szybko, opublikuję kilka swoich.

SebaS86 02.07.2011 / 20:08

Mało koduje na potrzeby strony internetowych, jednak jeśli chodzi o narzędzia to na pewno warto zajrzeć do części frameworków. Zend czy Codeigniter mają pomocników do tworzenia formularzy (być może także do innych elementów) i własny schemat nazewnictwa klas - więc da się to również ładnie i bez potrzeby grzebania w kodzie ostylować.

m 02.07.2011 / 20:27

A może odrazu XML+XSLT? ;-)

sirkruk 02.07.2011 / 20:31

Koncepcja ciekawa, gdyby istniał gotowy system szablonów automatycznie generujący te dodatkowe znaczniki, to myślę, że takie rozwiązanie mogłoby się przyjąć.

trójkąt 03.07.2011 / 00:06

@sirkruk: do takiego generowania wystarczą w zasadzie snippety w edytorze.

BTM 03.07.2011 / 10:58

Nie bardzo chce mi się wierzyć, że nikt przede mną jeszcze na to nie wpadł

Znaczy, odkryłeś to, co robi praktycznie każdy porządny CMS?
Przynajmniej każdy mój, czy firmowy, na którym pracowałem - każdy moduł (aktualności, formularz kontaktowy, mapa strony etc.) ma (w uproszczeniu) 3 elementy - kod PHP, szablon TPL i style CSS. Templatka jest uniwersalna, a przy dostosowywaniu modułu do strony modyfikujemy tylko CSS. W extremalnych przypadkach można zmienić też TPL, ale w większości nie trzeba.

Remigiusz 'lRem' Modrzejewski 03.07.2011 / 11:50

Jako człowiek, który html dotyka raz na pół roku, spytam: a na cholerę aż tyle divów dookoła? Tudzież po co te spany wewnątrz li?

Przy okazji: mój Firefox nie daje rady z czcionką przy edytowaniu komentarzy...

trójkąt 03.07.2011 / 14:27

@BTW: to chyba nie dziwne, że skoro istnieje CMS to ma on stałe struktury, które można stylować w zależności od projektu, patrz WordPress. Problem pojawia się przy budowaniu ciągle to nowych aplikacji internetowych, gdzie struktury zmieniają się nieustannie a my nie mamy już do dyspozycji klocków Lego do ich szybkiego budowania. Poza tym nie chodzi mi o wielkie struktury typu moduł kontaktu ale o mikrosturuktury, które powtarzały by się w tych wszystkich wymienionych przez Ciebie modułach wiele razy. Dopiero wtedy zyskujemy coś, co możemy wykorzystać ponownie w kolejnych projektach.

@IRem: im więcej mamy do dyspozycji kontenerów tym więcej możemy uzyskać wariacji przy stylowaniu. Zawsze lepiej mieć kontener, z którego nie skorzystamy niż gdyby miało go braknąć na np. dodatkowe tło. Oczywiście nie ma też co przesadzać z ich ilością.

PS. o jaką czcionkę chodzi? Nie stosowałem żadnych dziwnych czcionek.

Remigiusz 'lRem' Modrzejewski 03.07.2011 / 14:30

font-family Optima,"Myriad Web",Arial,Helvetica,sans-serif

Ta Optima (czy tam Myraid, nie chce mi się sprawdzać które mam u siebie ;) ) nie ma wszystkich pliterek, ążęć są zastępowane przez czcionkę o innej wadze, co kiepsko wygląda.

piker 19.07.2011 / 13:12

HTML to dość prymitywny format. O ile można się zgodzić na header i informacje jak czytać stronę to już kombinacje przy formatowaniu div tabelki span font Tego jest naprawdę dużo. Do tego niekonsekwencje M$ w IE zmiany w wersjach CSS i mamy taką papkę że nikt nad tym nie panuje.
A sprawa jest prosta - wyciągnąć informację, pokazać ją a następnie zmodyfikować wygląd.

Dziwi mnie dlaczego dotąd nie powstał moduł C++ do apache'a jest przecież cała masa bibliotek do tworzenia interface'sów w tym języku.
Powie ktoś bo to jest język kompilowany a nie interpretowany, ale Pythonowi i Ruby jakoś się udało.



Komentarze