Numeracja

Numeracja jest czynnością stosunkowo często występującą w zakresie użytkowania programów z różnych dziedzin. Wszelkie ewidencje, katalogi zawierają w sobie jeden lub więcej rodzajów numeracji. W życiu codziennym też często spotykamy się z różnego rodzaju identyfikatorami numerycznymi: REGON, PESEL, NIP są to narzucone przez Państwo numery, dzięki którym ułatwione jest prowadzenie ewidencji obywatelskich. W szkole uczniowie mają pozycję w dzienniku, studenci numer indeksu, karta kredytowa ma swój unikalny numer. Mimo swej powszechności wiele numeracji jest tworzonych wadliwie. Może dlatego, że niewiele jest opracowań na ten temat i gdy pojawia się konieczność wprowadzenia nowej numeracji większość decydentów dokonuje tego bez zgromadzenia odpowiedniej wiedzy.

Spektakularne błędy numeracji

PESEL

Numer Pesel jest nadawany każdemu obywatelowi. Jest to 11 cyfrowa liczba: 10 cyfr znaczących i suma kontrolna. Niestety przy tworzeniu tego systemu nie pomyślano, że kiedyś będzie rok 2000. A ponieważ numer zawiera tylko 2 ostatnie cyfry daty urodzenia, to nastąpił problem. Dwie osoby urodzone w tym samym dniu roku, ale w odstępie 100 lat otrzymywali by taki sam numer, co było niedopuszczalne. Całe szczęście, że liczba miesięcy w roku jest mniejsza od 99, więc stosując odpowiednie kombinacje (typu 22 miesiąc) rozwiązano tą kolizję. Drugi problem również związany jest z rokiem 2000 (a dokładnie z latami 2000-2009). Jak wiadomo z matematyki początkowe zera w liczbach są nieznaczące. Ale nie u urzędnika. Ponieważ numer może się rozpoczynać od zera, niemożliwe jest przetwarzanie takich numerów operacjami matematycznym, które jak powszechnie wiadomo są znacząco efektywniejsze pod względem szybkości jak i zajmowanego miejsca. Taki niuans jak początkowe zero potrafi znacząco skomplikować sposób przetwarzania numeru. Lokalne firmy i instytucje często wpadają w taką pułapkę. Natomiast jeżeli przeanalizujemy globalne numeracje takie jak EAN czy VISA to nigdzie nie spotkamy takiego przypadku.

Numeracja faktur Poczty Polskiej

Wiele instytucji tworzy rejestry wystawianych przez siebie dokumentów i każdemu z nich nadaje unikalny numer. Numer dokumentu powinien jednoznacznie identyfikować dany dokument, tak aby wymieniając sam numer jednoznacznie powołać się na właściwy dokument. Ale to jest wszystko co od numeru należy oczekiwać: jednoznaczna identyfikacja. Zawieranie w numerze dodatkowych informacji jest możliwe, a nawet właściwe gdy stanowią element weryfikujący. Natomiast w rozszerzaniu treści zachowywanych w numerze należy zachować umiar. Taka dodatkowa informacja wydłuża numer, przez co staje się on niewygodny w użytkowaniu i powoduje generowanie niepotrzebnych błędów. Przykładem może być wspomniana numeracja faktur Poczty Polskiej, które to numery są dłuższe od obowiązującej numeracji kont bankowych. Jest to absurd, znacząco uprzykrzający życie zarówno klientom jak i pracownikom, nie mający żadnego uzasadnienia. Numeracja obejmująca milion faktur nie musi być dłuższa niż 7-8 cyfr, stosowanie więcej niż 20 to dowód niekompetencji. Jeszcze bardziej spektakularny błąd jest w programie Płatnik (ten do obsługi ZUS). Identyfikacja płatnika przez program, podczas importu danych dokonuje się poprzez jednoczesne porównanie numerów NIP, PESEL, REGON i skrót nazwy. Tym samym skrót nazwy, coś co powinno być potocznym określeniem, otrzymuje wagę identyfikatora, który musi być identyczny z dokładnością do spacji, cudzysłowu itp. Do prawidłowego działania programu Płatnik konieczne jest precyzyjne i bezbłędne przepisanie ponad 50 znaków tylko po to aby program nie pomylił bazy - uwaga: takich baz maksymalnie w komputerze jest 1000.

Numeracja ustaw i rozporządzeń

Drugim biegunem numeracji są dokumenty ustalające prawo: ustawy i rozporządzenia. Z definicji takie dokumenty nie mają numeru, zwyczajowo posługiwano się opisem. Określenia takie jak Konstytucja Kodeks Karny czy Kodeks Cywilny przez wszystkich są uważane jako jednoznaczne. Podobnie z ustawami, wydawać by się mogło że tytuł wystarczy: "Ustawa o podatku dochodowym od osób fizycznych" jednoznacznie wskazuje o jaki dokument chodzi. Bynajmniej. Powszechna praktyka pokazuje że wraz z tytułem konieczne jest przytoczenie numeru dziennika, w którym się dana ustawa pojawiła a nawet numeru pozycji (choć każdy z nich jest jednoznaczny) oraz dnia ukazania się. Każde odwołanie się do prawa (tzw. podstawa prawna) to szereg identyfikatorów danego dokumentu, piszący jakoby chcieli przestraszyć długością zapisu. Gdy obserwuję takie nagromadzenie identyfikatorów danej ustawy to przypomina mi się reklama: I władamy Dowód Osobisty do kieszonki, i im bardziej go władamy tym bardziej on tam jest. Oczywiście cytatu zazwyczaj nie ma, gdyż zbyt łatwo można by podważyć związek ze sprawą.

Automatyczna Numeracja faktur

Najczęściej spotykanym numerowanym dokumentem jest faktura. Tzn częściej występuje paragon fiskalny, ale zazwyczaj nikt nie przejmuje się jego numerem, a po drugie sposób jest narzucony odgórnie. Natomiast faktury każda firma wystawia samodzielnie i mniej lub bardziej samodzielnie wybiera sposób numeracji. Przy czym należy nadmienić że zasady numeracji faktur niewiele się różnią od numeracji innych dokumentów. Co w tym trudnego? Proszę przyjrzeć się temu przykładowi: FA 01/02/03

1. pierwsza faktura z marca 2003 roku
2. trzecia faktura z lutego 2001 roku
3. druga faktura ze stycznie 2001 roku

Każde z powyższych może być prawidłowe. Ponieważ numery będą unikalne to nie dojdzie do powstania błędu formalnego. Natomiast może dojść do pomyłki. Ktoś może błędnie zaklasyfikować dany dokument. Do tego kluczowa jest wspomaganie komputerowe. Program zazwyczaj proponuje i kontroluje numeracje dokumentów. Aby to robił poprawnie musi posługiwać się takimi samymi regułami jak użytkownik. Tworząc program staramy się maksymalnie uelastycznić jego działanie. Tak aby były możliwe do realizacji wszelkie pomysły i potrzeby użytkownika. Sposób numerowania dokumentów nie jest wyjątkiem. Na numerację składa się:

1. prefix - czyli stała początkowa część numeru
2. suffix - część stała końcowa numeru
3. miejsce roku i miesiąca
4. właściwy numer

Aby program mógł automatycznie nadawać numery musi właściwie zidentyfikować położenie poszczególnych elementów. Musi wiedzieć gdzie jest wstawiany rok, czy numer zawiera oznaczenie miesiąca. Powinien też wiedzieć kiedy następuje tzw. zerowanie numeracji: co miesiąc, co rok czy wcale. Oczywiście wszystko jest możliwe gdy wprowadzimy odpowiednie definicje do programu. Ale to wymaga znajomości konfiguracji i notacji.

Sztuczna inteligencja?

Jednym z założeń program było możliwość używania różnych rodzajów numeracji przy minimalizowaniu konieczności jakiejkolwiek numeracji. Zadanie wydaje się proste: Użytkownik wpisuje FA 001 a program następnie podpowiada FA 003, Użytkownik wpisuje FA 34001 to program FA 34002.

1. FA 003/2010 - program zakłada że końcówka to rok,czyli FA 004/2010
2. FA 003/10 - analogicznie,czyli FA 004/10
3. FA 11/3/10 - tu jest problem: czy to jest numer 3 czy miesiąc marzec, a może rok 2011 i numer 10; dla programu to jest niejednoznaczne (dla człowieka również - nie powinien takiej numeracji stosować
4. FA 11/03/2010 - program przyjmuje że 03/2010 to data i inkrementuje 11
5. FA 11/03/02010 - jeżeli numer jest umieszczony na końcu to nie może mieć ani dwu ani czterech cyft
6. FA 11/V/2010 - wprowadzenie miesiąca rzymskiego znakomicie ułatwia identyfikację

Praca współbieżna

Kolejność numeracji to nie jedyny problem. Przy normalnej pracy dokumenty są dodawane i usuwane. Mogą powstać luki w numeracji. Oczywiście dla użytkownika wygodnie jest gdy program jak najwięcej dopuszcza a jednocześnie pilnuje. Np. gdy użytkownik anuluje ostatni dokument to numeracja powinna się cofnąć, gdy nie ostatni to powinien informować o powstałej luce. Gdy wiele osób wystawia dokumentu w jednej numeracji program musi pilnować aby każdy numer przydzielić tylko raz. I pilnować, gdy użytkownik się rozmyśli i porzuci dany numer. Gdy numeracja jest zerowana przy przejściu na nowy okres program winien podpowiadać odrębnie ostatni numer w każdym z okresów.

Bezpieczeństwo aplikacji webowych

Bezpieczeństwo w Internecie

Internet ze swej natury jest środowiskiem, w którym każda czynność winna być wykonywana z uwzględnieniem aspektu bezpieczeństwa, i to zarówno z punktu widzenia danych umieszczanych na serwerach, jak i internautów. Z czego to wynika? Internet jest anonimowy i ma globalny zasięg, to znaczy potencjalnie każdy istniejący w internecie obiekt może zostać zaatakowany przez dowolną osobę, która jednocześnie może pozostać anonimowa (czyli bezkarna). Z drugiej strony użytkownicy przeglądając serwisy internetowe, rejestrując się w portalach i umieszczając informacje na swój temat narażają się na wykorzystanie tych informacji do innych celów, bądź nawet na kradzież tożsamości.

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

przenośny css

W poprzednim poście zająłem się zagadnieniem przenośności. Dotyczy to również języka css, czyli popularnie mówiąc zgodności przeglądarek. W dawnych czasach (no, może nie tak dawnych), gdy królował Internet Explorer, tworzenie stron, które wyglądają tak samo na różnych przeglądarkach, było nie lada wyzwaniem. Do dziś można spotkać wiele przykładów jak sobie radzić z niekompatybilnością. Jednym z rozwiązań jest stosowanie różnych wersji programu w zależności od użytej przeglądarki. Albo wręcz zmuszanie użytkowników do stosowania tej jednej "właściwej". Ponieważ są to jednak rozwiązania niewygodne, czy to z punktu widzenia programisty (bo utrzymywanie różnych wersji programu jest kosztowne) czy też ograniczające swobodę użytkownika, to dużą popularność zyskały tzw. haków, które wykorzystując pewne błędy przeglądarki umożliwiały wprowadzanie wariantów w kodzie css. Poniżej przykład takiego haka.

* html .fieldpick{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
  z-index:-1;
}

Standard W3C

Problemy z niekompatybilnością przeglądarek częściowo skończyły się, gdy rynek wymusił stosowanie standardów. Przynajmniej tak się wszystkim wydawało. Opublikowany standard HTML4 jest powszechnie respektowany. Co z tego, gdy kolejna, nowa wersja jest jeszcze nie ukończona, a mimo to wszyscy chcą z niej korzystać. HTML5 będzie podlegać kodyfikacji jeszcze kilka lat, ale już wszystkie liczące się przeglądarki, a za nimi wiele twórców witryn stosuje nowe elementy języka. I znowu zaczyna się piekło niekompatybilności. Całe szczęście że wprowadzane jest w sposób bardziej cywilizowany. Można to przedstawić na przykładzie nowej własności dotyczącej zaokrąglonych ramek border-radius. Początkowo przeglądarki wprowadziły własną notację dodając własny przedrostek

-moz-border-radius: / dla Mozilli
-webkit-border-radius: / dla Safari i Chrome
-khtml-border-radius: / dla KHTML

Tym samym można w łatwy sposób dodać parametry dla poszczególnych przeglądarek, bowiem obce identyfikatory są całkowicie ignorowane, nawet jeżeli notacja oczekiwanych parametrów jest różna. To niestety jest koszt wprowadzania nowości zanim się ustabilizuje standard. Obecnie większość obsługuje standardowe znaczniki border-radius, natomiast w podobny sposób wprowadzane są nowe właściwości do języka css.

iPhone

Oprócz samego rozwoju języka i jego możliwości obecnie mamy do czynienia z bardzo szeroką paletą urządzeń stosowanych do przeglądania internetu. Te urządzenia unaoczniły że jest kilka parametrów, które winny być rozróżniane przy projektowaniu strony WWW. Jednym z nich jest rozmiar ekranu. Jeżeli strona jest zaprojektowana na wielkość 1024 piksele a oglądana na monitorze o szerokości 640 pikseli to pewnie nie będzie ładnie wyglądać. Natomiast smartfony posiadają rozdzielczość 480px i mniejszą, wtedy strona może się stać zupełnie nieczytelna. A przecież czasami wystarczy tylko kilka drobnych zmian w css. Tu z pomocą przychodzi tag @media. Poniżej przykład jak zmniejszyć rozmiar font, gdy ma być wyświetlany na ekranach niskiej rozdzielczości

@media screen and (max-width: 480px) {
  #main-nav a {
   font-size: 90%;
  }
}

Style domyślne

Tworząc kod, który ma być wyświetlany na różnych przeglądarkach należy uwzględniać domyślne wartości przyjęte dla poszczególnych własności. Dobrym zestawieniem jest ta strona. Aby uniknąć problemów należy zresetować , czy też ujednolicić te wartości. Można o tym przeczytać tutaj.

Native vs web application

Chciałbym się podzielić kilkoma spostrzeżeniami na temat aplikacji webowych. W szczególności chodzi o porównanie do aplikacji natywnych, czyli takich, które są uruchamiane bezpośrednio w systemie operacyjnym komputera. Jeszcze do nie dawna taki podział praktycznie nie istniał. Wszystkie programy kompilowane były do kodu maszynowego procesora i dopiero wtedy mogły być uruchomione na komputerze. Ponieważ poszczególne komputery różniły się procesorami i systemami operacyjnymi, tworzenie programów przenośnych, tzn. takich które można było uruchomić na różnych rodzinach komputerów stanowiło nie lada wyzwanie. Ponieważ komputer bez programu do niczego nie jest przydatny, te platformy na których istniały najlepsze programy miały więcej użytkowników i jednocześnie najwięcej programistów tworzyło nowe oprogramowanie. Stąd dominacja systemu Windows i procesora Intel w poprzedniej dekadzie.

Java

Mimo że komputery osobiste miały znaczną przewagę liczebną nad innymi, na świecie istniało więcej rodzajów komputerów, przeznaczonych do innych zadań. Jedną z technologi rozwiązujących przynajmniej część z problemów związanych z tworzeniem przenośnego oprogramowania jest Java, definiująca kod pośredni do którego można przekształcić każdy program napisany w języku Java oraz maszynę wirtualną, którą można było zaimplementować dla każdego komputera. Tym samym firma Sun, twórca Javy, stworzyła środowisko, dzięki któremu w stosunkowo prosty sposób można było tworzyć programy na różne systemy komputery. Nie tylko komputery osobiste, ale również mainframe czy też tzw. wbudowane (ang. emdedded). Ponieważ takie podejście dawało dobre rezultaty, również Microsoft opracował swoją platformę .Net korzystającą z analogicznych rozwiązań.

Android

Obecnie większość smartfonów posiada system operacyjny z wbudowaną maszyną wirtualną pozwalającą na uruchamianie programów zapisanych w kodzie pośrednim. Co więcej, ze względu na ograniczenia systemu operacyjnego, związanego z bezpieczeństwem niektórych danych zgromadzonych w telefonie, praktycznie nie jest możliwe uruchamianie programów w innej postaci, tzn zakodowanych bezpośrednio w kodzie maszynowym danego procesora. Stąd też wynika przesunięcie znaczenia kodu natywnego. Obecnie również programy zapisane w pseudokodzie, lecz gotowe do uruchomienia na telefonie określone są mianem natywnych. Szczególnie to widać przy klasyfikacji programów dla Androida, dla którego podstawowym podejściem jest programowanie na maszynę wirtualną Dalvik, większość narzędzi i przykładów zawartych w SDK tego dotyczy. I to te programy programy określa się mianem natywnych, mimo że jednocześnie udostępnione jest NDK - środowisko tworzenia aplikacji bezpośrednio w kodzie maszynowym (czyli na procesory ARM a od niedawna x86).

Java Script

Zupełnie inaczej przebiegał rozwój języka Java Script. Mimo znacznego podobieństwa nazwy do Java faktyczne podobieństwo jest niewielkie. Jedynie syntaktyka języka jest podobna, natomiast środowisko i sposób działania całkowicie różne. Język ten wyrósł wraz z rozwojem HTML, czyli języka opisu strony WWW. Stał się niezbędnym uzupełnieniem do statycznego HTML, umożliwiając bardziej zaawansowaną interakcję z widzem. Rozwój całości spowodował możliwość powstawania stron internetowych, których postrzeganie niczym się nie różniło od klasycznych programów komputerowych. Powstawały gry komputerowe oparte wyłącznie o środowisko przeglądarki, kamieniem milowym stało się opublikowanie gry Quake wyłącznie w kodzie HTML5.

Przenośność

W ciągu ostatnich kilku lat nastąpił gigantyczny rozrost Internetu, a tym samym zapotrzebowanie na aplikacje pracujące w tym środowisku. Aplikacje internetowe posiadają szereg zalet czyniących je niezastąpionymi w pewnych zastosowaniach. Nie do przecenienia jest możliwość pracy z dowolnego miejsca. Dla niektórych istotne jest zerowy koszt administracji programem na stacjach klientów. Obecnie jedną z największych zalet aplikacji webowych, która decyduje o ich tak szybkim rozwoju, jest przenośność. Jest to możliwość tworzenia programów działających na wielu różnych rodzinach komputerów. Póki podstawowym narzędziem pracy i zabawy były komputery z systemem operacyjnym Windows problem przenośności oprogramowania praktycznie nie istniał. Dopiero pojawienie się IPhone firmy Apple rozpoczęło nową erę: erę popularnych urządzeń, stanowiących w pewnym sensie substytut komputera, używanych na co dzień przez miliony osób. Pojawienie się kolejnych urządzeń z systemami IOS, Android, Bada, WebOS tylko wzmocniło ten proces. Obecnie na świecie sprzedaje się więcej smartfonów i tabletów niż komputerów osobistych z systemem Windows. Jednocześnie prognozy szacują stagnację na rynku PC przy dynamicznym wzroście pozostałych. Takie rozbicie platform spowodowało duże zapotrzebowanie na narzędzia i techniki programowania, które umożliwią twórcom dostarczania rozwiązań niezależnie od platformy docelowej.


Ciąg dalszy...

Przekazywanie parametrów w kodzie HTML

Przekazywanie dodatkowych parametrów, które winny być uwzględnione w procesie tworzenia strony wydaje się trywialnym zagadnieniem. Takie dodatkowe parametry są potrzebne, gdy nie można (lub jest utrudnione) wstawienie odpowiedniej dane bezpośrednio do źródła HTML. Przykładem może strona główna z aplikacji invoicer, która do programu zadawana jest jako szablon, na której chcemy umieścić aktualny numer wersji programu. Jedno z rozwiązań polega na sparsowaniu pliku szablonu, odszukaniu słów kluczowych i na ich podstawie modyfikacji go w locie. Poniżej fragment kodu z ustawień bloggera.

body {
  font: $(body.font);
}

Zamiast opracować odpowiednią notację szablonu, umożliwiającą programowi sparsowanie szablonu i jej zaimplementowanie, znalezienie odpowiedniego miejsca i wstawienie numeru można zlecić przeglądarce.

tworzenie szablonu

Szablon strony głównej
W źródle szablonu tworzymy własny element wyświetlający nr wersji, jedynym elementem wyróżniającym jest id

<span id="md-version"><a href="http://www.invoicer.pl"><div > &nbsp;</div></a></span>

przygotowanie skryptów

Równolegle do szablonu tworzony jest funkcja w skrypcie, której celem przeniesienie parametru

function StartMain(){
..
try{
  var xUser=document.getElementById('idversion').innerHTML;
   document.getElementById('md-version').innerHTML=xUser;
} catch(ee) { };
..
}

Aby uniezależnić się od konstrukcji szablonu, który może zwyczajnie nie przewidywać miejsca na nr wersji dobrze jest wyłapać wyjątek. Wtedy nie będzie to miało wpływu na pozostałe części skryptu.

To co musi zrobić program:

Przed wysłaniem strony do szablonu doklejane są dodatkowe informacje konieczne do zbudowania poprawnej strony. Przyjęto konwencję że szablon zawiera sekcję body docelowej strony, a aplikacja jest odpowiedzialna za uzupełnienie kodu początkowego i końcowego. Ponieważ przyjęto również zasadę pomijania tagu body aplikacja może swobodnie uzupełnić kod o dodatkowe parametry.

'<body onload="StartMain();" oncontextmenu="return true;">'
....
'<div id="idversion" style="display:none;">Invoicer 248</div>';

Początkowo próbowałem przesyłać parametry w sekcji head jako elementy meta, niestety metoda ta nie jest akceptowana przez wszystkie przeglądarki. Dlatego pewniejsze jest wykorzystanie niewyświetlanych elementów div style="display:none"


Funkcja startMain jest wywoływana przez przeglądarkę po załadowaniu strony. Przyjąłem konwencję że jest ona definiowana w pliku o nazwie takiej samej jak nazwa pliku szablonu (tylko rozszerzenie zmienione na ".js").

Funkcja podpięta do onload w nagłówku body wywoływana jest jedynie przy pełnym wywołaniu strony konieczne jest również wywołanie jej przy aktualizacji asynchronicznej via XMLHttpRequest, ale to już należy wbudować w procedurę obsługi.

rezultat

Technika ta została zastosowana również do przekazywania loginu, bazy danych, wersji językowej.