Standardy, przeglądarki, obrane banany i kot o imieniu Jan.

Łukasz Gawroński - Lipiec 27th, 2010 - Wstawione w php, mysql, js, html, css, webdevelopment | Komentarze zamknięte

…Czyli Historia lubi zataczać koła.

Kiedyś dawno temu, gdy po ziemi chodziło dinozaury Internetu toczyła się legendarna już wojna przeglądarek. To co mamy teraz to Pan Pikuś w powrównaniu do tego co było. Po lewej stronie ringu, zasłużony w bojach, znienawidzony i bezsprzecznie mający za swymi plecami najpotężniejszego z najpotężniejszych Internet Explorer. Po drugiej stronie, Netscape. Phi. Wojna wydawała by się z aktualnego punktu widzenia z góry ustawiona – bo jak mógłby MS przegrać. A jednak było ciężko dla firmy Gatesa – do tego stopnia z IE podszywał się pod Mozille – bo tak nazywała się teoretycznie przeglądarka od Netscape’a – Netscape Navigator.

Relikwiami tego okresu – dla wielu niezrozumiałymi – jest sposób w jaki działa IE6 oraz IE7. Niestety, tylko dzięki oryginalności, oraz wprowadzeniu swoich tylko funkcji, które wyglądały superekstraśnie Microsoftowi udało się wygrać. I zapanowały mroczne dni w Internecie. Tyrania Marque, Tabel, oraz AcitveXów o filtrach nie wspominając.
Lecz oto pojawiły się małe promyki nadziei.

Mozilla Firefox oraz Opera – te dwie przeglądarki zmieniły świat na tyci lepszy.

Ale hola – zatrzymajmy się tu aby skorygować parę faktów. Po pierwsze Opera powstała przed Firefoxem i IE. Po drugie Mozilla/Netscape Navigator powstał długo przed IE i była fundamentem dla Firefoxa. Dobra, korygacja z głowy, przejdźmy do sedna.

Gdy popularne stały się nowe, alternatywne przeglądarki, zaczął się nowy front w Internecie – standaryzacja. I o dziwo, przeglądarka która wspierała najwięcej standardów czyli IE okazało się, że nie wspiera żadnych standardów. No prawie.
Szok.

Ot, i szybko zaczęła się wojna przeglądarkowo-standardowa. Zyskujący Firefox (oraz kilka innych) bardzo restrykcyjnie podchodziły do renderowania kodu HTML i CSS, co znowu twór Panów z Redmond nie potrafił. Generowało to masę problemów, gdy ten sam kod wyświetlał się całkiem inaczej pod każdą przeglądarką – a najgorzej pod Eksploratorem Internetowym.

Zaczęto bojkotować, palić ludzi na stosie i dokonywać zamachów na koty pracowników Microsoftu – a IE6 w najlepsze sobie był i nie zamierzał się zmieniać. Przypominało to trochę sytuacje sprzed kilku lat (90`s) gdy Netscape przegrał wojnę bo nie zmieniał przeglądarki swej praktycznie od momentu wydania a IE co chwile wydawał nową… zaraz, czy wam się to z czymś nie kojarzy? No ale nieważne.

Wracając do sedna. Sytuacja na dziś? Firefox ma spory udział w rynku, tak sam jak Opera, Safari i Chrome. A także grono innych przeglądarek. Pojawiło się też IE7, IE8 a niedługo i IE9 i co? Czy żyjemy w lepszych czasach, czy nareszcie doszło do sytuacji gdy wszystko wyświetla się wszędzie dobrze?

G*** prawda.

Niestety Stety pojawił się CSS3 – coś na co szczerze mówiąc czekałem długo.

Coś co jednak wkurza mnie bardziej niż sierść mego kota na czarnych ubraniach.

Przedrostki.

Nie każdy pewnie je kojarzy, więc przedstawię w skrócie problem. Większość przeglądarek internetowych nowej ery, a właściwie to silników renderujących, wprowadziło swoje własne przedrostki przed nieoficjalnymi implementacjami właściwości CSS3. Wyglądają one mniej więcej tak:

-moz-border-radius
-webkit-box-shadow
-o-transform

Generalnie nie byłbym taki zły gdyby nie fakt, że wróciliśmy do sytuacji sprzed kilku lat, gdy dana strona wyświetla się poprawnie jedynie na jednej słusznej przeglądarce i nie dlatego, że jest źle napisana, lub dlatego, że moja przeglądarka nie obsługuje danego znacznika. Tylko dlatego, że ktoś uznał, że jedyną słuszną przeglądarką jest Mozilla Firefox i przed wszystkie właściwości specyficzne dla CSS3 wstawił –moz- lejąc kompletnie na pozostałe. I nie wkurz się tu.

Najgorsze jest jednak to, że wśród poważnych webdeveloperów trend ten nabiera w siłę. Wraz z pojawianiem się w nowszych wersjach FF’a i Chroma coraz to nowszych implementacji kolejnych właściwości kaskadowych arkuszy stylów coraz bardziej rozmijamy się ze standaryzacją.

Ale wytłumaczmy sobie parę rzeczy.

Nie mam nic przeciwko przedrostkom, wbrew pozorom to dobra rzecz. Możemy dzięki nim zniwelować parę niedogodności i wyświetlić nowszym przeglądarkom ładniejszą stronę (starszym zostawiając kanciaste divy ;) ). Daje nam to też możliwość naprawienia specyficznych dla innych przeglądarek błędów.
Co jest więc problemem. Niestety jak zawsze ludzie.

Buszując po necie oglądam, czytam, testuje nowe technologie i liczne pomysły. To jak niektórzy wykorzystują CSS3 oraz HTML5 jest naprawdę niesamowite… dopóki robią to poprawnie. Często zdarza się – jak już wspomniałem – iż twórcy tak pomysłowych stronek i tutoriali zapominają, iż inne przeglądarki korzystają póki co z innego przedrostka i mimo iż w praktyce działa (np. border-radius) to użytkownik Opery go nie zobaczy, bo idiota „twórca” wpisał tylko –moz-border-radius. I jak tu takiego domorosłego samozwańczego web developera nie zamordować, no jak, się pytam?

Pozostaje czekać aż wszystkie przeglądarki oficjalnie zaimplementują nowego, „trzeciego styla” ale i wtedy trzeba będzie poczekać aż niektórzy się opamiętaj i pousuwają przedrostki ze swoich plików.

A póki co morał na koniec jest prosty: Jeśli stosujesz przedrostki, to na litość boską stosuj wszystkie! Będziesz miał trochę więcej pisania, ale usłyszysz na pewno mniej obelg skierowanych w swoim kierunku. ;D Czego każdego życzę.

Łukasz Gawroński - Lipiec 27th, 2010 - Wstawione w php, mysql, js, html, css, webdevelopment | Komentarze zamknięte

Przyjaciół trzymaj blisko, a tabele htmlowe jeszcze bliżej…

Łukasz Gawroński - Czerwiec 23rd, 2010 - Wstawione w php, mysql, js, html, css, webdevelopment | Komentarze zamknięte

Ten zły, ten dobry i ten obojętny… Tag <table> to bez wątpienia największy twórca kontrowersji w Internecie. Bywało z nim różnie, ale chłopak wciąż się trzyma dzielnie i mam nadzieje, nie prędko umrze… ale powoli się na to zanosi. A drugiego takiego jak on, to nie znajdziemy.

I’m <table>, <tr><td> <table>.

Parafrazując słynnego Agenta Jej królewskiej Mości.

<table> to bez wątpienia agent do zadań specjalnych, choć w przeciwieństwie do alkoholi Bonda miesza, ale nie wstrząsa młodymi twórcami stron. Tag ten pojawił się dawno, dawno temu gdy strony HTML jeszcze miały formę podłużną wertykalną. Służył on do jednego i był w tym bardzo dobry – tworzył tabele. Szok! Ale nie kłamie. Oryginalnym zamysłem twórców tego niezbyt intuicyjnego w użyciu tagu było prezentowanie treści tabelarycznej. Co to jest treść tabelaryczna chyba mówić nie musze.

Z początku wydaje się, iż sposób w jaki działa <table> jest niezwykle skomplikowany. Do momentu w którym go zrozumiemy… a wtedy, wydaje się banalny. Moglibyśmy wręcz pomyśleć, że innego sposobu nie ma, aby w zawiłym Internecie, w sposób formalny zapisać tabele, którą chcemy pokazać innym.

Znacznik <table> do tej pory pozostaje lekko enigmatycznym stworzeniem, które gdy już wydaje się, że je pojęliśmy, zaskakuje nas czymś nowym. Zwłaszcza młodych adeptów ciemnej strony html’a.

Ja nie potrafię? Ja nie potrafię!? Daj strzelbę!

Pewnego dnia, ktoś, aby mu kastracja miłą była, wpadł na pomysł aby strona internetowa była ładna, i nie było by w tym nic zdrożnego, gdyby nie to, że nie miał żadnych środków, aby tę wspomnianą ładność uzyskać.

Ale co to… przecież można by użyć tabel do stworzenia schematu wyglądu, powstawiać w komórki elementy i jak to mawiają polscy francuzi – wuala!

Przychodzi MacGyver do sklepu i mówi do ekspedientki
Poproszę skrzynkę z narzędziami.
- Nie mamy.
- To poproszę <table><tr><td>.

Żarty, żartami, ale przez ostatnie kilka lat Internet cierpiał. Wszyscy domorośli i nie tylko, tfórcy stron WWW korzystali z tabeli jako złotego rogu na wszelkie bolączki.

Przycisk ma być po prawej stronie. Tabela!

Obrazek na lewo od tekstu. Tabela!

Podpis pod obrazkiem. Tabela!

Lista numerowana. Tabela, Tabela i jeszcze raz wielka, ogromna, wolno renderująca się i niezrozumiała dla normalnych ludzi Tabela! Oł je!

Nikt nic nie miał przeciwko temu, bo nie było niczego innego. Tabela poganiała tabele… do czasu.

Lepiej mieć wróbla w garści niż tabele na dachu.

Pojawił się on. Był przystojny, nienagannie ubrany, dobrze wychowany. CSS.

Mimo iż istniał od zarania dziejów internetowych (no dobra, od 96r) był przez długi okres czasu nielubiany. Sam pamiętam te czasy. (Wow, stary jestem ;p) Każdy wtedy myślał, że ten „kaskadowy coś tam coś tam” to jakiś straszny stwór, którego nie warto się uczyć, bo po co on, wszystko można uzyskać dzięki tabelom.

Przyszła jednak moda na to aby odsunąć – i słusznie – tabele od generowania wyglądu i użyć zaprojektowanego tylko po to języka. Nastała era divów, paragrafów, floatów i positionów absolutów. Teraz, jeśli tworzysz strony WWW w oparciu o tabele to albo przybyłeś wehikułem czasu z przeszłości, albo bierzesz nie te leki co trzeba. Nawet wszystkie książki Helionu promują ten styl, a są wydawane przecież z kilkuletnim opóźnieniem ;)

Divy są trendy…

- Zimno mi. Tak zimno. Nie czuje <td>’ków. O mój Boże, nie czuje <td>’ków! Ja umrę, prawda? Spójrz mi prosto w oczy i powiedz, umrę, prawda?

Niestety tabelo. Umrzesz.

Z ludźmi jest czasem tak, że jak im dasz kamień do zabicia jelenia, oni zabiją swojego przyjaciela. Jak im dasz energie z atoma, to oni zbudują bombę. Podobnie jest aktualnie teraz z divami i CSSem. Doszliśmy bowiem do sytuacji w której, nikt o zdrowych zmysłach nie używa tabel do tworzenia schematu strony – ale ku memu zdziwieniu, jest to również sytuacja w której nikt już prawie nie używa tabel. Nawet do generowania na stronie tabel.

A owszem, w końcu dzięki kaskadowym arkuszom stylów możemy sprawić aby każdy paragraf był traktowany jako komórka tabeli, a div je otaczający jak samą tabelę. Co w gruncie rzeczy złe nie jest, bo z tekstowej reprezentacji możemy jedną podmianą pliku przejść na reprezentacje ułożoną w wygląd tabelaryczny. Ale na litość boską jak macie tabele z danymi to używajcie do tego <table> bo po to on służy.

No właśnie, na litość boską…

Używajcie tabel – zgodnie z ich przeznaczeniem. Bo tabela nie jest zła, ona miała tylko trudne dzieciństwo i tak naprawdę jest fajnym znacznikiem, który jeśli dobrze go poznacie, to nigdy was nie zdradzi i nie zawiedzie, bo co jak co, ale <table> każda przeglądarka renderuje dobrze.

Podsumowanie.

Po co był ten przydługi wpis? Całość mogłem zawrzeć w dwóch zdaniach, ale nie miał bym wtedy możliwości przelania swoich frustracji odnośnie sposobu użycia divów do niecnych rzeczy, które tabela robi od ręki. A jeśli doczytałeś aż tutaj, to albo się nudziłeś, albo Ci się podobało… jak by nie było, zapraszam ponownie.

Łukasz Gawroński - Czerwiec 23rd, 2010 - Wstawione w php, mysql, js, html, css, webdevelopment | Komentarze zamknięte

Za każdym razem jak uruchamiasz IE6, Bóg zabija kociaka!

Łukasz Gawroński - Czerwiec 21st, 2010 - Wstawione w webdevelopment | Komentarze zamknięte

Czy wspierać stare przeglądarki?

Polacy to mądry naród. Niektórzy mówią, że bardziej kombinatorski niż mądry, ale to już kwestia gustu a de gustibus non est disputandum. Wracając do sedna. Większość młodych, zainteresowanych komputerem potomków Mickiewicza swego czasu mniej lub bardziej próbowała nauczyć się HTML’a. Niektórzy pewnie nawet napisali jedną lub dwie strony. A jeszcze mniejsze grono, pewnie gdzie koło 10%, napisało tych stron więcej. Cześć z nich zamiast babrać się od początku do końca w tajemniczych i magicznych tagach próbuje sił z gotowymi rozwiązaniami. Prym popularności wiedzie oczywiście WordPress i phpBB, a co ambitniejsi korzystają z Joomli.

Teraz pytanie do wszystkich osób w temacie – Co żeście zrobili z użyszkodnikami IE6?

- Odcięliście ich od strony? Powiedzieliście: wała! I wyświetliliście wielkie czerwone „Stop IE”?
- Wyświetliliście niemożliwą do ominięcia informacje aby użytkownik ściągnął FireFoxa lub inną słuszną przeglądarkę dokumentów hipertekstowych, a resztę strony jak leci?
- Może po prostu olaliście to i: „Niech się sami martwią czy moja strona się u nich dobrze wyświetla. Jest w końcu napisana według standardów. Pryh!”
- Ewentualnie stworzyliście osobny wygląd specjalnie dla Internet Explorera.
- Prawie bym zapomniał, są też tacy którzy piszą tak, że wygląda strona tak samo wszędzie wykorzystując ten sam kod. Hardcory, mówiąc językiem Joemonsterowym.

Chciałbym tutaj doprowadzić do dyskusji, w komentarzach, a być może nawet w kolejnych blogach. Jak powinno się postępować z przeważającą częścią ludzi korzystających z Internetu za pomocą starych przeglądarek?

Na samym początku podam kilka ciekawostek z którymi miałem styczność.

1. Pewna nawet znana lokalna firma wydała duuużo pieniędzy na nową stronę. Jako, że właściciel firmy był w miarę opykany i młody, zażyczył sobie ciekawe rozwiązania i rozszerzenia dla starej strony. Wszystko było cudownie. Szefowi się podobało. Ludziom w firmie też. Wszystko było cacy do momentu… statystyki po miesiącu okazały się straszne. Twórca nowej strony uspokoił wszystkich mówiąc, że po prostu zmiana designu wywołała chwilowe fluktuacje w ilości odwiedzin i odrzuceń. Uwierzyli. Wierzyli w pierwszym miesiącu. Wierzyli w drugim miesiącu i nawet trzecim. W czwartym już nie uwierzyli. Strona jednak wyglądała bardzo dobrze i wszystko działało.

Większość osób pewnie się już domyśla o co chodzi. No ale nie uprzedzając faktu… Znajomy, znajomego, który jest znajomym sekretarki w tej firmie, czy też jakoś tak – w każdym bądź razie siódma woda po kisielu – zapytał się mnie czy mógłbym zobaczyć tę stronę. Z nudów zerknąłem.

Ładna, a owszem. Joomla, dla mnie to minus, ale w końcu jest to światowy standard. Kod? Zagnieżdżone tabele (czasem nawet 7 poziomów). Da się znieść. Z czystej ciekawości po zobaczeniu kodu odpaliłem IE… i znalazłem winowajcę. W Explorer mniejszym niż 8 strona się rozjeżdżała do tego stopnia, że nic się nie dało z niej wyczytać.

Potem się dowiedziałem, że właściciel jest wielkim zwolennikiem darmowego oprogramowania więc od FF poczynając na OO.org kończąc, po prostu nie wpadł na pomysł , że coś takiego może druzgocąco niszczyć reputacje jego firmy. Ciekawostką osobną jest to, że ‘tfórca’ potem zainkasowała za poprawienie strony pod IE, ale tego już nie skomentuje.

2. Przy drugim przykładzie, miałem większy udział. Pracowałem w zespole tworzącym dosyć spory serwis. Podział był dosyć luźny, jednak w pewnym momencie zorientowałem się, że naszą czarną owcą okaże się Szósty Eksplorer, o którym każdy zapominał. Sporo przezroczystości i dziwnych ułożeń. Z różnych powodów byliśmy już po deadline, a IE6 krzaczyło się na wszystkie możliwe strony. O dziwo, bo niby staraliśmy się omijać różne niedopracowania tej przeglądarki i pisać tak aby na każdej wyglądało identycznie. Teraz musieliśmy podjąć ciekawą decyzję co z tym fantem zrobić. Ostatecznie spóźniliśmy się jeszcze bardziej ale wygląd na Microsoftowskim produkcie nie odbiegał od innych. Ku naszej radości kilka miesięcy później, oglądając statystyki, wyszło że postąpiliśmy słusznie. Strona (tak jak zresztą przypuszczaliśmy, po rozmowach z szefostwem) była głownie otwierana w IE6*. Jedyne co zrobiliśmy to umieściliśmy na dole strony (pod stopką) informację dla tych zbłąkanych duszyczek, coby sobie przeglądarkę zmienili.
*Aktualnie z tego co widzę, to się to zmienia na tej stronie dosyć mocno.

Podsumowując

Osobiście na chwilę obecną wyznaje zasadę: dokument hipertekstowy wszędzie ma wyglądać tak samo, chyba, że jest to niemożliwe. Wtedy ewentualnie ma wyglądać tyci gorzej, ale i tak działać. Zasada: Graceful degradation.

A wy? Jaką zasadę wyznajecie i jak uważacie, jaką powinno się wyznawać?

Łukasz Gawroński - Czerwiec 21st, 2010 - Wstawione w webdevelopment | Komentarze zamknięte

„It’s Alive!”

Łukasz Gawroński - Czerwiec 14th, 2010 - Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Zaiste, udało się, było sporo kłopotów, ale w 97,3% udało się zrobić to co zamierzałem w nowym portfolio. Hurra!
Podsumowując.

  • Jest śliczna nowa grafika na bok, do której mam prawa ;D – kiedyś pewnie zastąpi tą ładną panią moją brzydką facjatą, ale to będzie w przyszłości.
  • Poprawiłem wygląd kilku działów, które poprawionego wyglądu nie miały. Zostało jeszcze parenaście rodzynek, ale muszę je najpierw znaleźć.
  • Blag dostał graficzkę – tymczasową co prawda, ale to już jakiś postęp.

Podsumowując – Pfoolio już działa i mogę wreszcie coś tu pisać. Hurra ;D

Łukasz Gawroński - Czerwiec 14th, 2010 - Tags: , Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Kolejne poprawki

Łukasz Gawroński - Czerwiec 11th, 2010 - Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Wprowadziłem kilka drobnych poprawek i wciąż szukam dobrego zdjęcia głównego – mam kilka pomysłów, ale czekam też na sesje zdjęciową z której możliwe, że coś wyjdzie ;D Zobaczy się.

Swoja drogą MG rośnie w siłę i powoli wychodzi z Bety, ale bardzo powoli.

Łukasz Gawroński - Czerwiec 11th, 2010 - Tags: , Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Grafiiika i postępy

Łukasz Gawroński - Czerwiec 1st, 2010 - Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Wciąż jestem na nieustającym polowaniu na grafikę boczną dla tegoż portfolio.
Wprowadzam tez inne liczne poprawki – z dnia na dzień coraz lepiej to idzie – biorąc pod uwagę, że praktycznie nie mam czasu aby to robić.

Wciąż pracuje nad następującymi rzeczami: manga-gallery.info / pfron.net / aspoke.com / i tajny top secret project z końmi.

Łukasz Gawroński - Czerwiec 1st, 2010 - Tags: , , Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Postępy trwają…

Łukasz Gawroński - Maj 28th, 2010 - Wstawione w Info o maxdemage.pl | Komentarze zamknięte

… w związku z tym, iż mam sporo na głowie ostatnim czasy (włącznie z szukaniem nowego mieszkania) prace nad poprawioną wersją mojego portfolio przeciągają się.
Jest to informacja czysto techniczna i zniknie gdy wszystko będzie działać.
ps. Obrazek jest tymczasowy ;D się go zmieni.

Łukasz Gawroński - Maj 28th, 2010 - Tags: , , Wstawione w Info o maxdemage.pl | Komentarze zamknięte

Wybaczcie…

Łukasz Gawroński - Maj 26th, 2010 - Wstawione w Info o maxdemage.pl | Komentarze zamknięte

… ale trwa właśnie gruntowna modyfikacja strony.

Niedługo pojawia się tutaj wszystkie informacje.

Łukasz Gawroński - Maj 26th, 2010 - Tags: , Wstawione w Info o maxdemage.pl | Komentarze zamknięte

2010© - wszelkie prawa należą do Łukasz Gawroński, Wrocław

FunFact - Czy wiesz, że... 4chan ma li tylko 55tysiecy zarejestrowanych userów