Dziś, drodzy zgromadzeni, profesor Pimpin pokaże wam, jak ważne jest rozdzielenie wyglądu i treści.
Profesor Pimpin przy pracy.
Jako, że od pewnego czasu mój pracodawca zleca cięcie części projektów webmasterom zewnętrznym (outsourcing jest jazzy), oszczędza nam to dużo czasu, który możemy poświęcić na programowanie silników PHP… albo na ponowne cięcie wyżej wspomnianych projektów.
Problem z outsourcingiem polega na tym, że wszyscy zarzekają się, że są istnymi geniuszami, a ich praca warta jest każdych pieniędzy. Dziesiątki, ba - nawet setki, lat w braży, tysiące projektów na karku, pełen profesjonalizm. Rzeczywiście, ostatnio dostałem do ręki projekt wykonany z pozoru bez zarzutu. Szybki rzut okiem do kodu źródłowego ujawnił tylko kilka usterek, ale szablony zostały przygotowane zgodnie z XHTML 1.1 i bez użycia tabel.
Później jednak zainteresował mnie jeden z formularzy, gdzie przycisk wysyłający dane niebezpiecznie nachodził na dolną krawędź fieldsetu. Nic to, pomyślałem, i zająłem się swoją pracą, czyli powoływaniem owego cuda do życia. Mniej-więcej w połowie podłączania szablonów do swojego systemu CMS zapragnąłem zmodyfikować podpis wspomnianego formularza, gdyż do granic eksploatowane przez nas lorem ipsum zdawało się niewiele mówić przeciętnemu odwiedzającemu serwis. Podmieniłem przeto tekst na nieco inny i w tym miejscu szczęki moje rozwarły się by tak pozostać na czas dłuższy. Tekst, owszem, wydłużył się, jednak ostatnie pola formularza znalazły się już daleko za nim, nie wspominając o przycisku, który już wcześniej leżał na dolnej krawędzi. Obecnie przebywał prawdopodobnie około 200 pikseli niżej, niestety nie mogłem tego zweryfikować, gdyż wylewająca się treść formularza była skrupulatnie przykrywana przez inny boks na stronie.
Webmaster tnąc szablony sugerował się projektem i konkretnymi tekstami zastępczymi, jakie zostały tam umieszczone. Cały boks formularza był tak naprawdę namalowany na jego tle, więc wydłużenie jego zawartości spowodowało wylanie się treści poza widoczne pod spodem ramki. Myślenie o designie w kontekście konkretnej treści jest jednym z największych błędów popełnianych przez niespecjalnie doświadczonych webmasterów. Robienie stron na własne potrzeby nie wymaga specjalnej elastyczności - gorzej, kiedy klient postanowi zastąpić proponowane treści własnymi. W końcu to jego serwis i po to właśnie kupił od nas system zarządzania treścią.
Drugi problem dotyczący wspomnianego serwisu to skrypty JS i ich przywiązanie do szablonu. Odpowiedzialne są one za podświetlanie przycisków i podpowiedzi w formularzach. Wszystko działało bez zarzutu do czasu, kiedy zostaliśmy zmuszeni dodać na jednej z podstron kolejny formularz i kiedy to okazało się, że jest to dość trudne. Skrypty, co prawda, znajdowały się w zewnętrzym pliku, ale uparcie wyszukiwały w nim konkretne przyciski i konkretne pola formularzy. Wymusiłoby to na nas dopisywanie obsługi każdego formularza, każdego jego pola i wszystkich nowych przycisków do pliku ze skryptami. W końcu zdecydowałem się zrezygnować z zaproponowanego przez autora rozwiązania (co było samo w sobie dość problematyczne ze względu na bliskie powiązanie ich z funkcjonalnością serwisu) i skorzystać ze sprawdzonych wielokrotnie skryptów własnego autorstwa, o których pisałem w lipcu.
Podsumowując - czas oszczędzony na traktowaniu layoutu dosłownie (z dokładnością do piksela) to czas, który trzeba - prędzej czy później - z nawiązką włożyć w ponowne przeprojektowanie szablonu, kiedy treść przestanie spełniać jego oczekiwania (choć powinno być odwrotnie, to szablon powinien być dla treści, a nie treść dla szablonu).
Na koniec drobna dygresja - bardzo kiepskim pomysłem jest tworzenie graficznych przycisków formularzy poprzez wymuszenie pustego napisu na przycisku i zastąpienie jego tła obrazkiem. Kiedy - podczas testów wspomnianych szablonów - na próbę zablokowałem arkusze CSS, moim oczom ukazały się niewiele mówiące szare kwadraciki. Nie muszę chyba pisać, że nie budziły skojarzeń ze słowami typu przelicz
czy wyślij
. Czasem pomysłowość w stosowaniu CSS mnie przeraża, zwłaszcza że istnieje <input type="image" />…
Patrys wytłumacz mi 1 bardzo ważną kwestię. Jak to się stało że nasza rura zamieniła się w magic stick ?!?
Mógłbyś spytać "jakim prawem", wtedy odpowiedziałbym "by the LAW" ;)
No chyba twoim !!!
Łał, Patrys, ty to masz przygody :S
A w mojej firmie SynPrezesa zmontował stronę.
Oparta jest na ramkach, ale to to jeszcze pal licho.
Ramka nawigacyjna zrobiona przyzwoicie, ma tylko jednego małego flashka wyświetlającego datę i czas. Powiedzmy - do przyjęcia.
Ale ramka z treścią… po kolei:
- nazwa firmy
- >Miejsce na baner< specjalnie pokolorowane
- (*) tenże baner
- (*) mały flash z przejeżdżającym napisem informacyjnym (z lewej do prawej!)
- napis (img) informacyjny nt. przedsięwzięcia, w polu o innym kolorze i z borderem.
- (*) trzy obrazki z cyframi oraz…
- (*) trzy napisy (też img) jako odnośniki oraz…
- zmienione tło dla tych napisów
- zdjęcie firmy w czasie pracy, logo przedsięwzięcia, napis "Zapraszamy" i fotka typu marketoidalnego - uśmiechnięta panienka
- rameczka:
- - dwoma obrazkami
- - copyright
- - dane kontaktowe firmy
- - (*) dwie flashki, które są jedynie linkami do plików do ściągnięcia.
- do tego wszystkiego tego kilka linii, pionowych i poziomych łączących ww elementy.
Już jest nieźle, co? Te flashki głównie. Ale teraz pora na legendę (uwaga, złapcie się klawiatury):
Wszystko, czego nie poprzedziłem gwiazdką (*) to obrazek tła!
…ale to przecież SynPrezesa, on się zna…
Express:
Zastanawia mnie, jak ta strona wygląda przy zmianie wielkości okna ;]
Wbrew pozorom się nie rozjeżdża całkowicie, bo wszystko poza tłem jest w tabelach(*) ze sztywnymi wymiarami
Przyjrzałem się jeszcze raz: to tło, to jest tło tabeli! Foksowy zoom robi fajne rzeczy. <table> się poszerza, a tło nie więc zaczyna się zawijać…
O napisach (patrz niżej) nie wspomnę…
(*) Tabela w tabeli to na porządku dziennym jest…
Do tego <font> co chwila…
On to robił w Dreamweaverze, ale chyba potem dodatkowo popsuł ręcznie. Poza tym program sam nie myśli, tym musi się zająć człowiek…
A, pomyliłem się: dane kontaktowe są normalnie, tekstowo, ale oczywiście w tło wycelowane tabelką :)
——–
Adres podam dopiero, jak zmienię robotę, bo teraz się wstydzę :)
Nihil novi sub sole. Rady radami, a i tak w prawie każdym projekcie widzę właśnie to niewłaściwe podejście do szablonów. Bo człowiek już taki jest (leniwy), że tak jest łatwiej bo potem zawsze można powiedzieć, że przecież szablon wygląda jak layout i zgarnąć kasę.
A co do dizajnu SynaPrezesa to bym się hamował ze skrajnie webocentrycznym podejściem. Bardzo kląłem na gości, którzy zamiast ładnie ciąć obrazki wsadzali na stronę jeden wielki z klikalną mapą. Kląłem dopóki nie uświadomiłem sobie, że czasem nakład kodu trzymającego pocięte obrazki do kupy jest większy niż jeden prosty obrazek z tą mapą.
Tak, tylko po pierwsze tu prawie nie ma klikania, a po drugie "byle kto" (czyt.: ja) nie jest w stanie wprowadzić drobnych poprawek (a SynPrezesa jest na urlopie). Wszystko siedzi w jpgu, źródła ma tylko jedna osoba (zgadnij kto :) , o ile w ogóle je ma, a dekompresja, edycja i kompresja itd. wpływa na jakość. A poza tym <div id="costam"> + costam {background-color: blue; left: …itd} będzie nieco mniejsze od wielkiego obrazka wypełnionego na niebiesko…
Kod kodem, a wiem, że niektóre osoby, które używają tej strony wciąż mają modemy.
Oczywiście zupełnie pomijam to, o czym Patrys nieraz pisał: dostępność; a więc przeglądarki tekstowe, braille i inne.
to zdjęcie to reklama podprogowa, nie chodzi o Patrysa ani jego lage ale o logo orlenu w tle. przyznaj sie ile dostałeś? :D
To zdjecie wyglada jak tragiczne polaczenie dresiarza i skejta. Szczerze mowiac, to wstydzilbym sie stac obok Ciebie na ulicy.
Bellois:
Straszniemi przykro, jak tylko dostaniesz sądowy nakaz stania przy mnie na ulicy, pobiegnę do domu wbić się w gajer :D
Lata doświadczenia podpowiadają mi nieśmiało, że za 10 lat nie będziesz się już chciał fotografować z profilu bez koszulki…
(nie obraziłeś się, prawda?)
Regualarnie wykonuję ćwiczenia na beerceps - np. podnoszenie ciężarów do ust i ciosy karate w szyję ;]
Nieomieszkam pocwiczyć dzisiaj wieczorem w Twojej intencji ;)