Zasady pomniejsze

Jeszcze wczoraj dostałem do pocięcia pewien layout. Prosta stronka, żadne wyzwanie, a przy okazji wyraźnie pokazująca, czego nie powinniśmy robić projektując strony.

Niestety samego layoutu pokazać wam nie pokażę, bo nie za bardzo mogę :) Pisać na szczęście nikt nie może mi zabronić, więc zapraszam do dalszej lektury, w której opiszę kilka punktów, które często spotykam podczas cięcia layoutów, które dostaję od różnych grafików.

Responsive menu

W dzisiejszych czasach, gdy internet przeglądany jest na różnorakich urządzeniach tworzenie sztywnych nawigacji jest błędem. Jak wiemy, dobra nawigacja po naszej stronie to klucz do jej sukcesu, a przynajmniej jeden z głównych elementów wpływających na niego.

Stworzenie płynnego, dopasowującego się do wielkości ekranu menu wcale trudnym zadaniem nie jest, o czym przekonacie się już za chwilę.

Nowe doświadczenie

Chciało by się powiedzieć, że historia kołem się toczy. I było by to bardzo trafne spostrzeżenie jeżeli chodzi o internet. W początkowych dziejach internetu największe głowy z tego świadka krzyczeli i zalecali tworzyć strony tak, by można było je oglądać na rożnych urządzeniach.

Wśród nich wymieniali lotniskowe terminale, najprostsze telefony komórkowe, przeglądarki Lynx i inne zacofane czytniki. W tamtych czasach tak naprawdę mało kto używając wspomnianych urządzeń wchodził do internetu. Spowodowało to, że twórcy internetu zamiast na dostępności skupiali się na pixelowym dopieszczaniu layotów.

Tworzymy dodatek do iStocka

Wreszcie po długim czasie oczekiwania IstockPhoto przywróciło powiększanie zdjęć. Sama funkcjonalność przydaje się nie tylko do podglądania szczegółów zdjęć, ale także do pobierania do naszych wstępnych layoutów stocków w większej niż minimalna rozdzielczości, dzięki czemu możemy naszemu klientowi pokazać grafiki we wstępnych layoutach o wiele lepszej jakości.

Niestety okienko do poglądu grafiki na stocku jest całkiem małe, przez co pokazanie całego stocka w powiększeniu jest żmudną zabawą (printScreen->kopiuj->wklej) x nRazy (albo zwyczajnie olewamy sprawę i zostawiamy paskudne stocki)

Łatwo to można jednak naprawić., o czym przekonamy się już za moment.

Przerabianie Datepickera

Bardzo często podczas tworzenia formularzy spotykamy się z koniecznością dołączenia pól do wyboru daty. Jest sporo pluginów do wyświetlania kalendarzy, ale większość z nich jest ciężka w użyciu.

Te związane z jQuery UI wymagają użycia tej biblioteki, co często prowadzi do tego, że wykorzystujemy ją tylko do wyświetlenia kalendarzyka (czyli taki ala przerost formy nad treścią). Dodatkowo zmiana wyglądu takich kalendarzy nie należy do najprzyjemniejszych rzeczy. Właściwie jest niepokojąco ciężka :)

Jakiś czas temu znalazłem plugin zwący się simple jQuery date-picker plugin. W chwili pisania tego tekstu strona tego pluginu jest nieaktywna, ale to nic nie szkodzi.

Plugin ten w odróżnieniu od innych działa na każdej przeglądarce i jest maksymalnie prosty. Odpalenie jego to tylko jedna linijka kodu, a podstawowe stylowanie to raptem kilkanaście linijek kodu (ostylowanie prostej tabeli).

Walidacja formularzy HTML5 za pomocą JS

W ostatnim poście stworzyliśmy podstawę walidacji, którą udostępnia nam HTML5.

W chwili obecnej walidacja taka ma jednak trochę niedoróbek i nie działa tak jak byśmy chcieli. Po pierwsze nie mamy kontroli nad tym, czy walidacja ta ma być widoczna od razu po wejściu na stronę. Po drugie nie mamy kontroli nad zachowaniem tej walidacji (chociażby na wygląd podpowiedzi). Po trzecie nie działa ona dla wszystkich pól formularzy (nie działa z checkboxami). Wreszcie po czwarte nie działa ona na IE8 nie mówiąc o starszych przeglądarkach.