Śledź mój Fanpage!

Zbudować Frontend Strony w 4 Godziny Za Pomocą Divshot?

18 lipca, 2013 11:37, brak komentarzy

Programowanie warstwy wizualnej strony (frontend) to czasem połowa czasu produkcji serwisu internetowego. A może wykorzystać istniejące komponenty oraz  narzędzia i skrócić ten czas nawet o 90%?

Strony internetowe, jeśli chodzi o interfejs graficzny, są coraz bardziej do siebie podobne i zawsze można wyliczyć co się na nich znajduje… teksty, zdjęcia, formularze, przyciski. Jednocześnie te elementy coraz bardziej podobnie działają na różnych witrynach, w ramach zachowania konwencji użyteczności (UI patterns).

Homogeniczny frontend

Skoro wszystko się homogenizuje to może „koder wyglądu” nie jest już artystą, a rzemieślnikiem, który musi wiedzieć jakich komponentów użyć? Do tego istnieją narzędzia, które pozwalają przyspieszyć proces cięcia wyglądu do HTML i CSS.

Po pierwsze warto wykorzystać tzw. framework CSS, czyli bibliotekę gotowych komponentów (wspomniane gotowe przyciski, formularze, itd.). Przykładowe to Twitter Boostrap i Purecss.io.  Zamiast zlecać koderowi frontend dłubanie wyglądu pola formularza, który dodatkowo ma sprawdzać format wpisywanych danych, może lepiej wziąć gotowca?

Do tego powstało kilka narzędzi (edytorów kodu), działających w przeglądarce, które jeszcze bardziej przyspieszają i wspierają powyższe biblioteki CSS. Najbardziej wartym wspomnienia jest Divshot, którego namiętnie ostatnio używam. Właśnie wyszła wersja 1.0.

Divshot pozwala działać często bez kodowania, ale dobrze pilnuje czystości kodu (nie tak jak zamierzchły Dreamweaver). Kiedy przygotowuję w nim szablon strony, to taki szablon tworzę tworzę na jednym widoku i umieszczam na nim wszystkie elementy, które będą na wszystkich podstronach. To pozwala na bieżąco widzieć, czy np. zmiana w CSS czegoś nie popsuła, zamiast skakać po kilku szablonach.

divshot

Projekt Codemy.pl wykonany w Divshot

W Divshot robiłem m.in. Codemy.pl. Co prawda to sam landing, ale jego robienie zajęło mi niecałe 4 godziny z przerwą na obiad. Połowa prac polegała na szybkim skomponowaniu siatki (grid) i dodaniu elementów, a druga na dodaniu styli, które zajęły mi niecałe 50 linii kodu. Potem export kodu szablonu do ZIP i wysyłka do programistów. Już nie będą ślęczeć nad szczegółami wyglądowymi i sami zaczynają stosować gotowce.

Z doświadczenia wiem, że wszelcy koderzy frontend taki wygląd (po dostarczeniu im prototypu lub projektu graficznego) kodowali taki szablon nawet 2 dni. Najczęściej robili to „od zera”, jednak są i tacy, którzy już przyszli po rozum do głowy.