Kategorie
IT przeglÄ…darki internetowe strony internetowe webmasterka

Czekałem na to 16 lat, czyli historia o tym, jak szybko działa Microsoft

Czekałem 16 lat na to, aż Microsoft wyda przeglądarkę internetową, która potrafi w pełni wyświetlić strony systemu statystyk internetowych „Orwell Stat”.

Będzie trochę dla pasjonatów standardów sieciowych, przeglądarek internetowych, programistów serwisów internetowych, ludzi pamiętających czasy „sprzed Firefoksa” i tych, którzy chcieliby się dowiedzieć jak to wtedy było.

Cofnijmy siÄ™ trochÄ™ w czasie.

Październik 2003

Forum MozillaPL.org

Przypadkiem odkrywam forum MozillaPL.org i sekcję dotyczącą standardów sieciowych. Choć to nie pierwsze moje zetknięcie ze standardami sieciowymi, to pierwszy raz dociera do mnie, jak jest to ważne i zaczynam rozumieć całą koncepcję za tym stojącą. Będzie to później miało duże znaczenie.

Wybór tematu pracy dyplomowej

BÄ™dÄ…c na ostatnim roku studiów, wybieram temat pracy dyplomowej – bÄ™dzie nim system zbierajÄ…cy ruch na witrynach internetowych. I to wÅ‚aÅ›ciwie kolejny przypadek. IstniejÄ…ce wtedy na rynku systemy bardzo sÅ‚abo radzÄ… sobie z rozpoznawaniem przeglÄ…darek internetowych. Najlepszy jest system firmy Gemius, który wykrywa ich aż… 6. Mam wÅ‚asnÄ… stronÄ™ internetowÄ… i sam chciaÅ‚bym rozpoznawać wszystko, co siÄ™ tylko da. Stworzenie tego typu systemu sugeruje mój promotor (co za zbieg okolicznoÅ›ci!), choć niekonieczne ma takie same cele. Tak powstaje System statystyk internetowych „Orwell Stat”. NazwÄ™, jak można siÄ™ domyÅ›leć, biorÄ™ od nazwiska twórcy książki Rok 1984 George’a Orwella. System, który zbiera dane o użytkownikach wchodzÄ…cych na strony nasuwa mi takie skojarzenia.

Rynek przeglÄ…darek internetowych

To, jak wygląda rynek przeglądarek internetowych najlepiej wyjaśni prosty wykres.

Wykres kołowy: Internet Explorer: 96%, inni: 4%

NajnowszÄ… i najbardziej popularnÄ… wersjÄ™ Internet Explorera jest wersja 6 – 60% rynku – i wersja 5 – 34% (Gemius, dane od 30.09 do 6.10.2013). SÄ… to czasy, gdy Microsoft, po latach szybkiego rozwoju i wpakowaniu w ten projekt mnóstwa pieniÄ™dzy, uznaÅ‚, że wygraÅ‚ i rozwój tej przeglÄ…darki zostaÅ‚ gwaÅ‚townie spowolniony. WÅ›ród twórców stron internetowych, którzy znajÄ… (ówczesnÄ…) specyfikacjÄ™ HTML (4.01), czy CSS, jest to produkt powszechnie znienawidzony z powodu niepodążania za standardami, a w niektórych sytuacjach dość nieprzewidywalnego zachowania.

Kwiecień 2004

KlarujÄ… siÄ™ wymagania techniczne

Gdy najważniejsza część systemu (czyli silnik zbierający i rozpoznający oprogramowanie) już działa, zabieram się za przygotowanie strony internetowej. Stawiam sobie następujące cele, jakie strona ma spełniać:

  • ma używać najnowszych standardów – XHTML 1.1, CSS 2.1 i SVG 1.1
  • ma być wygodna w obsÅ‚udze przez osoby z niepeÅ‚nosprawnoÅ›ciami
  • do wyrenderowania strony nie bÄ™dzie używany JavaScript
  • przyjmowanie ciasteczek ma być opcjonalne
  • treść ma być dostÄ™pna dla każdej przeglÄ…darki internetowej obsÅ‚ugujÄ…cej protokół HTTP 1.1 (czyli każdej poza tymi pierwszymi: Mosaic, Netscape Navigator 1, Internet Explorer 1 i 2)

Ten ostatni warunek mógłby brzmieć:

  • treść ma być dostÄ™pna dla każdej przeglÄ…darki internetowej obsÅ‚ugujÄ…cej protokół HTTP 1.0 (czyli każdej)

tylko musiaÅ‚bym wtedy – specjalnie dla tej strony – wykupić adres IP u mojej firmy hostingowej, czego nie chcÄ™ robić.

W tamtych czasach wiÄ™kszość webmasterów powiedziaÅ‚aby, że stworzenie czegoÅ› takiego jest niemożliwe. Obawiam siÄ™, że i dzisiaj spora grupa może tak twierdzić. InnÄ… sprawÄ… jest, że przy tak postawionych wymaganiach strona nie mogÅ‚a wszÄ™dzie wyglÄ…dać identycznie. A powody byÅ‚y zupeÅ‚nie prozaiczne. Weźmy np. Netscape Navigator 2. W chwili jego wydania nie istniaÅ‚ żaden ze standardów, który postanowiÅ‚em użyć… Brzmi jak ciekawe wyzwanie, prawda?

Wrzesień 2004

Projekt zostaje ukończony.

  • Strona może być przeglÄ…dana w dowolnej przeglÄ…darce (obsÅ‚ugujÄ…cej HTTP 1.1).
  • Do wyÅ›wietlenia treÅ›ci nie jest potrzebna obsÅ‚uga JavaScript (strona w ogóle go nie używa).
  • Nie jest konieczna obsÅ‚uga interfejsu graficznego (dziaÅ‚a bardzo dobrze w przeglÄ…darkach tekstowych).
  • Nie wymaga przyjmowania ciasteczek.
  • Jest dostÄ™pna dla osób z niepeÅ‚nosprawnoÅ›ciami (speÅ‚nia najwyższe kryteria dostÄ™pnoÅ›ci WAI-AAA).
  • PrzeglÄ…darka nie musi obsÅ‚ugiwać żadnych wtyczek (np. Flash czy Java).
  • Serwer odpytuje przeglÄ…darkÄ™, co ona potrafi. Gdy potrafi ona w peÅ‚ni obsÅ‚ugiwać aplikacje XHTML 1.1 – dostaje peÅ‚nÄ… wersjÄ™ z wszystkimi wodotryskami. JeÅ›li nie – dostaje XHTML w trybie kompatybilnoÅ›ci, bez graficznych udogodnieÅ„.

Jest tylko malutki problemik… W dniu ukoÅ„czenia projektu nie istnieje na rynku przeglÄ…darka, która potrafi w peÅ‚ni wyÅ›wietlić system Orwell Stat. Serwis jest tak napisany, że nikt (bez analizy kodu) nie domyÅ›li siÄ™, że czegoÅ› brakuje, bo dostÄ™p do treÅ›ci jest w peÅ‚ni zapewniony.

Głównym problemem jest animowany wykres w SVG. Istnieją dwie przeglądarki na rynku, które obsługują SVG. To specjalna eksperymentalna wersja Mozilli (poprzednik dzisiejszego SeaMonkey) i eksperymentalna przeglądarka (a właściwie narzędzie do edycji stron) od W3C: Amaya. Pierwsza z nich nie obsługuje animacji, a druga kompletnie nie radzi sobie ze stylami CSS.

Ja sam, żeby sprawdzić, czy to co napisałem ma szansę zadziałać w przyszłości używam wtyczki Adobe SVG Viewer i zmieniam SVG 1.1 na 1.0.

Marzec 2005

Ukazuje siÄ™ testowa wersji Opery, która obsÅ‚uguje SVG, wraz z animacjÄ…. Niestety obsÅ‚uga jest bardzo ograniczona (jest to SVG Tiny – specjalna uproszczona wersja SVG powstaÅ‚a z myÅ›lÄ… o urzÄ…dzeniach mobilnych). Å»eby Opera w ogóle byÅ‚a w stanie wyÅ›wietlić wykres – muszÄ™ przenieść część informacji o wykresie z pliku CSS do SVG. DziÄ™ki temu po pół roku czekania jest w koÅ„cu na rynku przeglÄ…darka, która potrafi wszystko wyÅ›wietlić, tak, jak to sobie zaplanowaÅ‚em. Super, teraz wystarczy poczekać, aż testowa wersja Opery zamieni siÄ™ w finalnÄ… i pozostali doÅ‚Ä…czÄ… do Norwegów. Ile to może potrwać? Rok? Chyba nie wiÄ™cej niż dwa lata.

Kwiecień 2005

Ukazuje się Opera 8. Pierwsza finalna wersja Opery i pierwsza przeglądarka internetowa w ogóle, która natywnie potrafi w pełni wyświetlić Orwell Stat.

Luty 2009

Apple wypuszcza Safari 4.

Maj 2009

Google publikuje Chrome 2.

Marzec 2011

Mozilla wydaje Firefox 4.

Styczeń 2020

15 stycznia 2020, po niespeÅ‚na 16 latach od ukazania siÄ™ systemu Orwell Stat, Microsoft wydaje Edge 79. Szes-na-Å›cie lat! Na dodatek Edge potrafi to wyÅ›wietlić tylko dlatego, że Microsoft zmienia silnik na ten używany przez Chrome’a czy OperÄ™.

A Internet Explorer? Niekwestionowany król przeglÄ…darek w chwili powstawania systemu statystyk? Cóż… umarÅ‚ zanim taka funkcja siÄ™ w nim pojawiÅ‚a.

Epilog

Na koniec o tym dlaczego standardy są ważne. Orwell Stat wyświetla się nieprzerwanie od 16 lat w praktycznie każdej przeglądarce. Jedyną wymuszoną zmianą było dopasowanie się do możliwości Opery w 2005 roku. Bez tego musiałbym czekać na pierwsze efekty kilka lat dłużej.

Gdyby ktoÅ› pytaÅ‚: o ile front-end wyglÄ…da w porzÄ…dku, to strona serwerowa to raczej wstydliwy temat. Za każdym razem, gdy patrzÄ™ na kod, to nasuwa mi siÄ™ myÅ›l, że nie miaÅ‚em pojÄ™cia, o tym co robiÄ™…


Kategorie
IT ogólne strony internetowe webmasterka

Ciasteczkowa zaraza się szerzy, Stooq jest ciężko chory

Wszyscy słyszeli już o dyrektywie Unii Europejskiej odnośnie cookies. Ciężko nie zauważyć tych durnych komunikatów o ciasteczkach, które rozprzestrzeniły się po sieci. Nie będę pisał o chorym prawie, bardziej przeraża mnie jego implementacja. Niektórzy pokazują informację raz, która po odświeżeniu strony znika, inni wyświetlają ją za każdym razem, aż ktoś nie zaakceptuje warunków, jeszcze inni zasłaniają treść.

MiaÅ‚em tego dość – odkurzyÅ‚em nieużywany Adblock Plus i dodaÅ‚em reguÅ‚y wycinajÄ…ce to cholerstwo. DziÄ™ki temu strony internetowe znów zaczęły wyglÄ…dać, jak za starych dobrych czasów. Do czasu.

Wszedłem dziś na Stooq.pl po dłuższej przerwie i moim oczom ukazało się coś takiego:

Tekst na całą stronę: Serwis Stooq używa plików cookies (identyfikator i konfiguracja użytkownika, sesje, statystyka, obsługa emisji reklam).  W celu korzystania z serwisu wymagana jest zgoda na zapis plików cookies na Twoim komputerze lub innym urządzeniu.  Wyrażam zgodę na zapis plików cookies  (wymaga włączenia obsługi plików cookies w przeglądarce)  dowiedz się więcej o plikach cookies  (Dyrektywa Unii Europejskiej 2009/136/WE)

Nie da siÄ™ tego obejść – każdorazowa próba wejÅ›cia na stronÄ™ koÅ„czy siÄ™ przekierowaniem na powyższÄ… stronÄ™.

Drogie Stooq.pl, zgodę wyraziłem tutaj (no może z wyjątkiem reklam z zewnętrznych serwisów):

Firefox - Preferencje, panel Prywatność, opcja Akceptuj ciasteczka zaznaczona, opcja Akceptuj ciasteczka z witryn inne niż odwiedzane - niezaznaczona

Czas poszukać innego serwisu, podobnego do Stooq.pl. Ze smaczniejszymi ciastkami.

Kategorie
IT jakość strony internetowe webmasterka

Alior Sync: nowoczesny bank z fatalnym systemem transakcyjnym

Jak pewnie niektórzy sÅ‚yszeli – wczoraj wystartowaÅ‚ nowy bank: Alior Sync. Bank ma bardzo ciekawÄ… ofertÄ™, ale o tym można przeczytać w mass mediach i na stronach banku. Ja chciaÅ‚em skupić siÄ™ na systemie transakcyjnym, bo jest o czym pisać. Pisać źle.

System transakcyjny Alior Sync po zalogowaniu siÄ™
System transakcyjny Alior Sync po zalogowaniu siÄ™

 

W Syncu można bardzo szybko założyć konto, jeśli już ktoś ma konto w jakimś banku. W moim wypadku od wypełnienia wniosku do pierwszego logowania minęło zaledwie 31 minut. I to by było na tyle dobrych wiadomości.

Jeśli ktoś chciałby dowiedzieć się czegoś o systemie transakcyjnym z dwóch zdań to proszę bardzo:

System transakcyjny Alior Sync jest brzydki, zaprojektowany przez kogoÅ› pozbawionego gustu, nieprzemyÅ›lany, niedopracowany i nieprzetestowany – roi siÄ™ od bÅ‚Ä™dów (zarówno programistycznych, jak i jÄ™zykowych). KtoÅ› miaÅ‚ bardzo dobre pomysÅ‚y (jest tutaj dużo ciekawych rozwiÄ…zaÅ„), ale zostaÅ‚y fatalnie wprowadzone w życie.

W pierwszej chwili pomyÅ›laÅ‚em, że zrobiÄ™ kilkanaÅ›cie zrzutów ekranu, opiszÄ™ jak to wyglÄ…da i tyle. Tyle, że mógÅ‚bym pisać, pisać i pisać. OgraniczÄ™ siÄ™ do obrazków z krótkimi opisami – podobno jeden obraz mówi tyle, co tysiÄ…c słów.

Komunikat Błąd aplikacji! widziałem wielokrotnie, czasem był to efekt wygaśnięcia sesji, czasem kliknięcia czegoś, czego nie przewidziano w banku:

Strona logowania, komunikaty: Błąd aplikacji!, To pole jest wymagane, Zapomniałeś hasła? (każde w innym kolorze)
Błąd aplikacji. I oryginalne pomysły: każdy komunikat w innym choć podobnym kolorze, 3 różne fonty.

 

System chce, żebym podał pole.

Komunikat: Proszę podać to pole
„ProszÄ™ podać to pole” – kto wymyÅ›la te komunikaty?

 

Bawiąc się klawiaturą ekranową przez przypadek zobaczyłem coś takiego:

W pole wpisane jest 12pw; Użycie średnika daje nam komunikat: Niepoprawny Alias. Musi zawierać przynajmniej 2 różne znaki.
Komunikat zupeÅ‚nie nie pasuje do sytuacji. Przy okazji: w caÅ‚ym systemie panuje uwielbienie dla dużych liter – „Alias” pisany dużą literÄ… nie jest wyjÄ…tkiem.

 

Podpowiedź: system nie lubi Å›rednika, który… jest obecny na klawiaturze ekranowej.

Interfejs systemu jest po polsku, ale mimo to po wpisaniu identyfikatora pojawia siÄ™ Please wait… (żeby byÅ‚o ciekawiej – po wpisaniu hasÅ‚a jest „ProszÄ™ czekać…”):

Komunikat: Please wait...
Please wait…

 

Carrier Title(?!):

Dziwny tytuł: Carrier Title nad logotypami operatorów komórkowych
O co chodzi z tym tytuÅ‚em? Wbrew pozorom – klikniÄ™cie loga operatora nic tu nie zmienia – wtedy pop-up siÄ™ zamyka.

 

Czasami jeden komunikat nakÅ‚ada siÄ™ na drugi – wbrew pozorom tekst No data found. pojawiÅ‚ siÄ™ pierwszy:

Komunikat No data found przykrywa komunikat o wygaśnięciu sesji
Wbrew pozorom komunikat o wygaśnięciu sesji pojawił się jako drugi

 

last THIS_MONTH days – nie wiem co tam powinno siÄ™ pojawić, bo dla dowolnego wybieranego okresu czasu pojawiaÅ‚y siÄ™ podobne cuda. A to szare tÅ‚o, które jest za maÅ‚e – miaÅ‚o udawać dymek?

last THIS_MONTH days wyświetla się w polu okres, obok podpowiedź, której tło jest za małe (tekst zajmuje więcej miejsca)
last THIS_MONTH days. Że co?

 

Angielski z polskim miesza się wszędzie:

Wyświetlone obok siebie: Displaying 1 - 2 of 2, Strona 1 z 1
Display mi 1st stronÄ™

 

Gdy już jest po polsku, to pojawiają się rzeczy typu 0 NOWE, czy wspomniane już nadużywanie dużych liter (tutaj w nazwie miesiąca). I znów te kolory i fonty:

Odnośnik: 0 NOWE, tekst: w Czerwcu
0 NOWE to taki osobliwy sposób przekazania, że nie masz nowych wiadomoÅ›ci…

 

Jeden z dobrych pomysłów (kalendarz, widać też odnośnik do widoku chmury), gorzej z wykonaniem:

Widok kalendarza, w każdym dniu jest podana liczba i suma transakcji
Niemal każdy element na tej stronie ma inny font lub wielkość fontu.

 

Tutaj będzie rysował się wykres, ale można też zauważyć poucinane lub źle wyrównane elementy:

Widok salda, ucięta nazwa miesiąca, niektóre elementy na stronie są źle wyrównane
I znowu nadużywanie dużych liter – Rok Obecny

 

Niemal we wszystkich przypadkach, gdy nie ma danych do wyświetlenia wyświetlane są nagłówki pól. Prawie w każdym wypadku wygląda to fatalnie. Tutaj mamy pełną listę nagłówków, mimo iż nie ma żadnego zlecenia stałego: Typ przelewu, Nazwa odbiorcy, numer rachunku, Kwota, Następna data przelewu, Płatność po następnej dacie przelewu.

Nagłówki do zleceń stałych: Typ przelewu, Nazwa odbiorcy, numer rachunku, Kwota, Następna data przelewu, Płatność po następnej dacie przelewu.
Mamy peÅ‚nÄ… listÄ™ nagłówków, zamiast ważniejszej informacji, że żadne zlecenie staÅ‚e nie zostaÅ‚o ustawione…

 

Szablon nie zostaÅ‚ znaleziony… ale ja niczego nie szukaÅ‚em… I tradycyjnie – anglojÄ™zyczne wstawki:

Wyszukiwarka szablonów, do której nic nie wpisałem i komunikat: Szablon nie został znaleziony
Szablon nie zostaÅ‚ znaleziony (choć wcale go nie szukaÅ‚em…)

 

A ten pop-up powstał chyba w ramach ćwiczeń: kto więcej rzeczy zrobi źle:

Pop-up, w którym na dużym obszarze jest check-box i dwa przyciski, a to wszystko rozmieszczone bez żadnego ładu
Co by tu jeszcze popsuć?

 

Partner? Jaki partner?

Tajemnicze pole Partner, nie jest jasne, co tam należy wpisać
Co tam wpisać?

 

W systemie jest kalkulator walutowy (dobry pomysÅ‚), ale to też jest niedopracowane. MXN ma opis Resource not found, a komunikat wprowadza w bÅ‚Ä…d (w rzeczywistoÅ›ci należy podać tylko jednÄ… kwotÄ™, a nie co najmniej jednÄ…). Zastanawiam siÄ™ czym jest owo źródÅ‚o (jeÅ›li to nie waluta i kwota). No i piszemy chyba co najmniej, nie conajmniej (ale to mnie nie dziwi, po tym jak na stronie banku zobaczyÅ‚em sÅ‚owo indentyfikator…):

Tekst Resource not found obok kodu MXN i mylący komunikat: Musisz podać źródło i rodzaj waluty oraz conajmniej jedną kwotę
Å»eby byÅ‚o ciekawiej: ten komunikat znika po sekundzie…

 

Zauważyłem też, że raz używają słowa ładowanie, a raz wczytywanie, ale już nie robiłem zrzutów ekranu. Chyba wystarczy tego. Błędów jest mnóstwo, ja pokazałem wybrane.

Mógłbym też napisać co nieco o kodzie źródłowym strony (nowy system, a kod wygląda, jakby był robiony 7-9 lat temu), ale już nie będę się dłużej znęcał.

JeÅ›li komuÅ› takie rzeczy – jakie wymieniÅ‚em – nie przeszkadzajÄ… – to powinien być zadowolony (system dużo oferuje). Ja natomiast zastanawiam siÄ™ – jeÅ›li w Alior Sync jest takie podejÅ›cie do jakoÅ›ci (to jakaÅ› wersja alfa, a nie produkcyjny system), to czy za jakiÅ› czas nie przeczytam o tym banku na Niebezpieczniku

Zrzuty ekranu robiłem w Firefoksie 13. Bank oprócz Firefoksa rekomenduje również Internet Explorera, Chrome, Operę i Safari (tą ostatnią również w wersji na Windows).