Tag Archives: CSS

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ę…


MozCamp Europe 2012 w Warszawie zakończony

Tegoroczny europejski MozCamp – jak niektórzy wiedzą – lub domyślili się na podstawie obrazka, który umieściłem ostatnio na blogu – odbył się w Warszawie. Do Polski przybyło prawie 300 osób z różnych krajów Europy, Afryki, Ameryki Północnej oraz kilka osób z krajów azjatyckich. Mógłbym o tym pisać i pisać, ale postaram się wszystko bardzo mocno streścić. Będzie trochę chaotycznie, bo mam mało czasu, a dużo do przekazania.

MozCamp 2012 - logo

MozCamp 2012

Piątek, 7 września 2012

Wszystko zaczęło się od piątkowej imprezy w Champions Sports Bar & Restaurant, gdzie było dużo czasu być coś zjeść i pogadać z innymi mozillowcami.

Sobota, 8 września 2012

W sobotę przenieśliśmy się z hotelu do Fabryki Trzciny, gdzie odbywała się prezentacje. Po krótkim powitaniu na scenę wyszli najpierw Tristan Nitot, a później Mitchell Baker, by wprowadzić na do tematu przewodniego tego MozCampu – Mobilize Mozilla.

Jay Sullivan zarysował wizję hasła the Web is the platform i potem zobaczyliśmy trzy dema – BananaBread – pierwsza gra typu FPS, w którą by pograć wystarczy wejść na stronę internetową (do tej pory takie rzeczy wymagały trochę więcej zabiegów), Firefox OS, nowy system operacyjny dla urządzeń mobilnych oraz WebRTC, standard, dzięki któremu można prowadzić rozmowy audio i wideo bezpośrednio w przeglądarce internetowej, bez użycia dodatkowych wtyczek (z tym ostatnim demo trochę nie wyszło, ale myślę, że o samym WebRTC w przyszłym roku będzie głośno).

Zrzut ekranu z gry Banana Bread

Banana Bread

 

David Slater zrobił prawdziwe show, mówiąc o rynku przeglądarek internetowych, o aktualnych strategiach marketingowych i o różnicach między konkurencją, a Mark Surman przypominał o misji Mozilli.

Wykres kołowy: T-Shirts: 99%, Other: 1%, obok wykresu mężczyzna odsłaniający koszulę, pod którą jest czerwona koszulka z logo Firefoksa

Firefox Desktop Marketing Plan

 

Potem nastąpiła prezentacja ponad 30 społeczności lokalizacyjnych Mozilli, w tym oczywiście polskiej 🙂

Po lunchu każdy miał do wyboru jedną z sześciu sal, w każdej działo się coś innego. Ja wybrałem się B2G Localization Workshop Stasia Małolepszego, który miał strasznego pecha – psuło mu się absolutnie wszystko, co miał pokazać. Mimo wszystkich tych trudności technicznych poradził sobie bardzo dobrze z wytłumaczeniem jak to z jest z lokalizacją nowego systemu operacyjnego od Mozilli.

Tego dnia udało mi się jeszcze zobaczyć prezentację Barbary Hueppe  – 15 Years of Mozilla Campaign Ideas oraz Williama Quivigera i Pierrosa Papadeasa (Mozilla Reps: update and next steps).

Wieczorem zjedliśmy kolację w restauracji Browarmia Królewska. Niektórzy wrócili do hotelu zachrypnięci (było karaoke) 😉

Niedziela, 9 września 2012

W niedzielę pierwszy był Leadership Panel – sesję, w ramach której 9 przedstawicieli złożonych z pracowników Mozilli i wolontariuszy odpowiadało na pytania. Warto zauważyć, że mieliśmy tam swoją reprezentantkę – Joasię Mazgaj.

Joanna Mazgaj

Joanna Mazgaj

 

Potem wpadłem na krótko na Brainstorming: User Experience (UX) FeedbackMary Trombley i William Selman mówili trochę na temat UX, a potem podzielili ludzi na grupy, z których każda miała jakiś problem do rozwiązania.

Trochę przypadkiem trafiłem na prezentację Michała Budzyńskiego B2G Game Development – na temat gier działających natywnie w przeglądarkach internetowych (od gier CSS-owych, aż po gry w WebGL-u). Przy okazji: była to chyba najlepsza prezentacja na tym MozCampie.

Mounir Lamouri mówił o WebAPI (WebAPI Status), Axel Hecht i Jeff Beatty porozmawiali z lokalizatorami na temat szybkiego cyklu wydawniczego Firefoksa (Firefox L10n under Rapid Release), a William Reynolds opowiadał (How marketing Firefox OS is different (and how you can help!)) jakie wyzwania wiążą się z marketingiem Firefox OS i jak bardzo różni się to od tego, co Mozilla robiła do tej pory.

Ostatnią prezentacją, na jaką trafiłem było What is the open web + why is it important: parallels, parables, and nightmare scenarios, w której w dość zabawny sposób John Jensen mówił o otwartej sieci i poważnych zagrożeniach, jakie na nią czyhają.

Wieczorkiem w kilka osób z Aviary.pl, razem z Merike Sell z Estonii udaliśmy się na kolację do włoskiej restauracji Chianti i dzień dobiegł końca.

Poniedziałek, 10 września 2012

W poniedziałek większość wróciła do domu. Ja jednak wybrałem się na dalszą wycieczkę, o czym wkrótce 😉

Więcej zrobionych przeze mnie zdjęć z MozCampu pojawi się za jakiś czas na Flickrze – jeśli nie uda mi się zrobić tego dzisiaj – to zdjęć można spodziewać się za kilka tygodni.

Aktualizacja: zdjęcia są już w serwisie Flickr.

CSS-owe text-overflow wreszcie w Firefoksie

Nie będę się rozpisywał. Chyba najbardziej oczekiwana przez web deweloperów własność (cecha) z CSS3 działa już w Gecko, silniku Firefoksa. Chodzi o text-overflow, własności której najbardziej pożądaną wartością jest ellipsis, czyli możliwość ucięcia wyrazu i zastąpienia go wielokropkiem, wtedy, gdy nie mieści się w pudełku.

Na razie w wersji Nightly (testowej, uaktualnianej codziennie), co oznacza, że do mas trafi to najprawdopodobniej w grudniu wraz z Firefoksem 7 (choć wersja optymistyczna to wrzesień – Firefox 6, gdyby kod został włączony do Aurory).

text-overflow w teście W3C poprawnie wyświetlone w Firefoksie (Nightly)

text-overflow w teście W3C wyświetlone w Firefoksie (Nightly)

 

Jako ciekawostkę dodam, że implementacja w Gecko jest lepsza niż w WebKicie (Chrome, Safari), w którym nie działa poprawnie w niektórych testach. Tak, wiem, w WebKicie jest to od dawna…