Zen garden
Ale wracając do zagadnień technicznych czyli do HTML5 a dokładnie CSS. Opis strony zawarty w stylach znakomicie umożliwia separację procesu budowania zawartości merytorycznej strony od jej wyglądu. Pierwszy raz CSS oczarował mnie gdy zobaczyłem książkę o projekcie css zengarden. Mówiąc w skrócie projekt polegał na stworzeniu pięknej strony do zadanego pliku html jedynie przy pomocy definiowaniu stylu w pliku CSS. To co zobaczyłem było niesamowite. Ten sam html a zupełnie różny wygląd. Chciałoby się powiedzieć że w oparciu o szkielet można zbudować różne budynki. Ale to za mało. Html nie jest szkieletem, nie stanowi sztywnego gorsetu, który jedynie można przyozdobić. Html jest zapisem treści, która winna być wyświetlona, jak: o tym decyduje css. Przykłady dowodzą tego. Można zobaczyć różne układy strony jedno, dwu i trzy szpaltowe, pionowe, poziome, różnią się nawet kolejnością występowania poszczególnych elementów. I to wszystko jedynie poprzez zapis w css.
współpraca grafik - programista
Dlaczego separacja zadań jest ważna. Ze względu na ograniczenia percepcji (i nie tylko) człowieka. Już w czasach starożytnych powstała maksyma Divide et impera mająca zastosowanie nie tylko w polityce ale również przy realizacji większych projektów. Jeżeli podzielimy duży projekt na odrębne zadania to każde z nich będzie można łatwiej zrealizować (np niezależnie opracować). Ale jest jedno ale. Zadania winny być odrębne, tzn w możliwie minimalny sposób oddziaływać na siebie, ograniczona powinna być interakcja oraz wszelkiego rodzaju zależności. To tłumaczy dlaczego nie każdy podział jest dobry.Co to ma wspólnego z css. Już przedstawiam. Analizując relację pomiędzy HTML i CSS zobaczyłam naturalną granicę pomiędzy częścią programistyczną a graficzną. I to na wielu płaszczyznach.
- Po pierwsze o zapis techniczny: podział wynika z naturalnego podziału na pliki, więc można przypisać każdy plik odrębnie do danej osoby.
- Po drugie jest formalnie zdefiniowany zakres operacji w każdym z obszarów, jest to niemalże elementarz, który jest znany każdemu, więc na tym polu nieporozumienia są znikome
- Po trzecie, ze względu na rozwój narzędzi programistycznych nie tylko możliwe, ale zupełnie proste i naturalna jest całkowicie odrębna i niezależna praca osób z różnych obszarów (tzn html i css, bo javascript jest znacznie bardziej uzależniony)
Deklaratywność
CSS jest językiem opisu formy. Ma postać deklaratywną, tzn opisujemy co chcemy uzyskać a nie w jaki sposób (co jest cechą języków imperatywnych). Deklaratywność naturalnie znajduje się w opisie wyglądu. Piszemy że dany element ma być czerwony, albo że ramka ma mieć zaokrąglone rogi, albo cień. I nie interesuje nas jak to zostanie zrobione, jak wyznaczone będą piksele, które będą tworzyć ramkę.
.pobof{ border: 3px solid rgba(255, 255, 255, 0.2); background-clip: padding-box; border-radius: 12px 12px 12px 12px; box-shadow: 0 0 4px #4CCCCC; background-color: #9EEEFE; }
Powyższy przykład wraz z zapisem w css oryginał tu. Elementem na który należy zwrócić uwagę jest "podwójna" ramka. Oczywiście można to samo uzyskać podstawiając bitmapę utworzoną w programie graficznym, a następnie załadować ją na stronę. Jeżeli uznamy za konieczne zmianę promienia zaokrąglenia ramki to sekwencję powtórzymy. Jeżeli zmienimy rozmiar to albo przygotujemy nową bitmapę albo odpowiednio ją przygotujemy co związane będzie ze znacznym skomplikowaniem kodu. A teraz będziemy chcieli taki sam element ale w nieco innym kolorze i znowu wracamy do programu graficznego i powtarzamy sekwencję publikacji. Natomiast wszystko co potrzebne to kilka linii w css, które możemy skopiować w dowolne miejsce i zmodyfikować (zarówno ręcznie Firebugiem podczas dopasowywania albo skryptem jeżeli będzie taka potrzeba).Animacja w css
Do tej pory wydawało się że CSS jest opisem statycznym, a wszelkiego rodzaju zmiany realizuje się przy pomocy javascript. No nie wszelkiego rodzaju. Już na początku funkcjonowania stron WWW furorę zrobił format plików graficznych GIF, w którym można było stworzyć proste animacje, które następnie stanowiły ozdobniki strony. Bez zaprzęgania programisty można było wprowadzić dynamikę na stronę. Css również został rozszerzony w tym kierunku.pobof p<
-moz-animation-duration: 6s;
-moz-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
>
@-moz-keyframes slidein <
from <margin-left:-550px;> to <margin-left:10%;width:100%;>
>
@-webkit-keyframes slidein <
from <margin-left:-550px;>
to <margin-left:10%;width:100%;>
>
Elementy animacji są dopiero na etapie opracowania ale można już je stosować z przedrostkami firmowymi. Powyższy przykład to kolejne linie z powyższego przykładu. Celem było uzyskanie efektu przewijania w lewo i prawo pojedynczej długiej linii tekstu, tak aby zwracał dyskretnie na siebie uwagę. Wystarcza 6 linii kodu aby to osiągnąć. Oczywiście taki sam efekt można uzyskać pisząc odpowiedni skrypt, albo jeszcze prościej wykorzystując takowy z używanego frameworku. Tylko to kosztuje:
- forma deklaratywna jest prostsza w używaniu, zazwyczaj bardziej zwięzła
- forma deklaratywna jest bardziej odporna na błędy
- przeglądarka realizuje zadanie wyznaczone deklaracjami najlepiej jak potrafi, w kolejnych wersjach może to być wykonywane lepiej, szybciej
- skrypty ze względu na swą dynamikę mają ograniczone możliwości optymalizacji przez motor przetwarzający, deklaracje obejmują w swym pojęciu całość zagadnienia, co może posłużyć za wykonanie bardzo efektywnych optymalizacji (np. dynamiczna zmiana liczby kroków animacji w zależności od wydajności procesora, rozdzielczości ekranu i rozmiaru elementu
Oczywiście deklaratywność nie jest lekiem na wszystko, ma swoje ograniczenia, a w zasadzie jest możliwa do zastosowania w wąskim zakresie. I dobrze, tak należy to rozumieć: co się da zapisać w css to niech to w nim zostanie zapisane. Reszta w java script (html albo bitmapy).
Brak komentarzy:
Prześlij komentarz