Futurystyka z przeszłości

W sieci znalazłem kilka udanych, czy wręcz proroczych spotów. Pierwszy z nich to reklamówka z 1966 jak komputery mogą zmienić życie domowe. Już wtedy przewidywano zakupy z monitora. Wideokonferencje też dzisiaj już nie są czymś wyjątkowy. To co się nie udało przewidzieć to sposób obsługi komputera. Gałki, które prawie zupełnie nie istnieją w obecnych konstrukcjach, przywodzą na myśl stare radioodbiorniki. Oraz wszechobecne klawisze i przełączniki, znacznie większej liczbie niż jeden klawisz na iPhone
Okay...this is AMAZING

Start trek

Filmy z gatunku sci-fi naturalnie zawierają elementy przewidywania przyszłości. Jak jest to nieudolne widać gdy ogląda się filmy z tego gatunku sprzed lat. Większość szczegółów jest uwarunkowana stanem rozwoju w momencie kręcenia filmu. Znajdują się czasami jednak takie perełki jak ta poniżej. W kultowym "Star Trek:The Next Generation" na pokładzie statku Enterprise-D używano urządzeń typu PADD czyli Personal Access Display Devices. Wypisz, wymaluj dzisiejszy iPad. A film powstawał ponad dwie dekady temu. Nie dość że zgadza się kształt i rozmiar, to na dodatek sama formuła dotykowego interfejsu została przewidziana.

źródło

Stanisław Lem Przenośne urządzenia do przechowywania i odtwarzania danych

Stanisław Lem jest jednym z nasławniejszych futurologów polskich. Jego przewidywania po dziś dzień oszałamiają swoją trafnością. W książce "Obłok Magellana" przewidział że całość informacji zostanie przeniesiona do "trionów" czyli kawałków kwarcu. Krzem (czyli w zasadzie to samo ) jest podstawą całej elektroniki. To że podstawą pamięci masowych stają się pamięci flush (wszechobecne pendrive i coraz popularniejsze dyski SSD) wypierając inne nośniki takie jak taśma magnetyczna i optyczna skłania nas do twierdzenia że Lem nie pomylił się ani na jotę. Ale Lem nie tylko przewidział przeniesienie informacji z papieru i celuloidu do komputerów (a w zasadzie do sieci internet z wyszukiwarką Google - biblioteka trionowa). Jednocześnie przewidział powstanie e-readerów (takich jak Kindle) W Obłoku Magellana Lem pisze, jakby miał na koncie niejedną podróż do przyszłości i dokładnie wiedział, jak wyglądają nasze dzisiejsze tablety:

Posługujemy się nim dziś, nie myśląc wcale o sprawności i potędze tej olbrzymiej, niewidzialnej sieci opasującej glob; czy w swej pracowni australijskiej, czy w obserwatorium księżycowym, czy w samolocie - ileż razy każdy z nas sięgał po kieszonkowy odbiornik i wywoławszy centralę Biblioteki Trionowej wymieniał pożądane dzieło, by w ciągu sekundy mieć je już przed sobą na ekranie telewizora.

Z kolei Powrót z gwiazd, powieść wydana w 1961 roku, zawiera taki oto opis:

Całe popołudnie spędziłem w księgarni. Nie było w niej książek. Nie drukowano ich już od pół wieku bez mała. A tak się na nie cieszyłem, po mikrofilmach, z których składała się biblioteka "Prometeusza". Nic z tego. Nie można już było szperać po półkach, ważyć w ręce tomów, czuć ich ciężaru, zapowiadającego rozmiar lektury. Księgarnia przypominała raczej elektronowe laboratorium. Książki to były kryształki z utrwaloną treścią. Czytać można je było przy pomocy optonu. Był nawet podobny do książki, ale o jednej, jedynej stronicy między okładkami. Za dotknięciem pojawiały się na niej kolejne karty tekstu. Ale optonów mało używano, jak mi powiedział robot – sprzedawca. Publiczność wolała lektany - czytały głośno, można je było nastawiać na dowolny rodzaj głosu, tempo i modulację. Tylko naukowe publikacje o bardzo małym zasięgu drukowano jeszcze na plastyku imitującym papier. Tak że wszystkie moje zakupy mieściły się w jednej kieszeni, choć było tego prawie trzysta tytułów(...).

Czyli mamy i opis księgarni Merlin i Amazon, i e-booki i tablety. źródło

grafika w css

Możliwości przeglądarek rosną niemalże z każdym dniem. Mozilla wypuszczając ze swej stajni co kwartał nową wersję przeglądarki wprowadziła niemały zamęt wśród swych użytkowników. Oczywiście Google robi podobnie, ale ten od początku miał tę mniej konserwatywną widownię, więc mniej jest narzekań.

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)
• 
  

Powyższe wydaje się trywialne, ale proszę sobie przypomnieć (albo wyobrazić) jak wygląda praca nad aplikacjami desktopowymi. Projektant interfejsu użytkownika musi używać tych samych narzędzi co projektant bazy danych, tak samo kompilować program, obaj muszą uzgadniać formę wymiany informacji, a możliwości ingerencji we framework jest ograniczona.

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).