Ptaszor i jego blog! Lol…

Jakieś kilka dni temu, będąc zalogowanym na narodowym portalu nk, przez przypadek odkryłem, że w galerii we własnym profilu po kliknięciu w ostatniego aktywnego znajomego, po pojawieniu się okienka wiadomości stronka w delikatny spoób się rozlatuje (pojawia się po prawej stronie scroll).

Długo się nie zastanawiając, sprawdziłem Firebugiem cóż takiego w kodzie psuje NK. Szybka diagnoza i po chwili odkryłem co za zło siedziało w arkuszu stylu Naszej-klasy.

Postanowiłem pomóc ! Zrzuty porobiłem, problem opisałem, poprawkę dodałem, ze wszystkimi zaleceniami dot. zgłaszania błędów się zapoznałem, system oraz wersje przeglądarki wpisałem (Fx 3.0.5) i wysłałem…

Otrzymałem komunikat, że zespół NK mi odpowie wciągu 48 h. Niech se odpowiadają… I szczerze to w sumie już zapomniałem o tym mailu, aż tu wczoraj tuż przed północą, po 10 dniach od wysłania mojego listu z poprawkami dostaje odpowiedź od “techników” NK. Heh… poniżej go wkleiłem… Miłej lektury

Witam,

Dziękuję za kontakt.
Uprzejmie informuję, iż należy wyczyścić cache przeglądarki (opcja ta znajduje
się w narzędziach – usuwanie plików). Po tej czynności należy uruchomić
ponownie przeglądarkę. Następnie proszę wylogować się, będąc na stronie
głównej swojego profilu, oraz po paru minutach zalogować ponownie. Jeżeli
problem będzie się powtarzał, uprzejmie proszę o instalację najnowszej
przeglądarki innej firmy. Darmowe przeglądarki internetowe dostępne są w
każdej wyszukiwarce. Pragnę nadmienić, iż portal nasza-klasa.pl nie
współpracuje, z przeglądarkami internetowymi Opera.

Proszę również, o poprawne wylogowywanie się z portalu po zakończeniu
korzystania z niego przez każdego użytkownika komputera.
Pozdrawiam.

Lekko zdezorientowany odpisałem:

Nasza Klasa pisze:
> Witam,
>
Witam,
> Dziękuję za kontakt.
>
Ah, te 48 godzin (jakie sami sobie wyznaczacie na odpowiedź i pocieszacie natrętnych użytkowników, mających problemy z obsługą przeglądarki, że instrukcja jej obsługi niebawem nadejdzie), lekko się przeciągnęło do 10 dni…
> Uprzejmie informuję, iż należy wyczyścić cache przeglądarki (opcja ta znajduje
> się w narzędziach – usuwanie plików).
Hmm.. Zbladłem. Na prawdę. To może inaczej…

Uprzejmie Państwa informuję, że nie jest na miejscu Państwa odpowiedź. Zgłosiłem Państwu problem z Waszym portalem, dołączyłem zrzuty, wskazałem poprawkę jaką należy wprowadzić oraz szczegółowo opisałem krok po kroku jak powtórzyć występujący błąd. A to odpowiedź dotycząca czego?

Rozumiem, że albo moje zgłoszenie techniczne trafiło w ręce osoby, która nie ma pojęcia o czym pisałem i ma gotowe formułki w stylu tej jaką mi Państwo wysłali, albo gadam sobie z jakimś bocikiem, którym masowo odpowiadacie na zgłoszenia użytkowników. Dobre

> Po tej czynności należy uruchomić
> ponownie przeglądarkę. Następnie proszę wylogować się, będąc na stronie
> głównej swojego profilu, oraz po paru minutach zalogować ponownie. Jeżeli
> problem będzie się powtarzał, uprzejmie proszę o instalację najnowszej
> przeglądarki innej firmy.
To było dobre! Wam się nie chce poprawić jednego wpisu w css-ie i wolicie takie bajki odpisywać, w pewien sposób się kompromitując, gdyż jak wyżej wspomniałem opisałem błąd załączając poprawkę, która go eliminuje.

> Darmowe przeglądarki internetowe dostępne są w
> każdej wyszukiwarce.
Nio, nio to zapewne nowość?! Heh, łopatologia stosowana. Dzięki, bo nie wiedziałem. ROTFL
> Pragnę nadmienić, iż portal nasza-klasa.pl nie
> współpracuje, z przeglądarkami internetowymi Opera.
>
Żal.pl tutaj nie pomoże, w 95% jestem pewien, że odpisał mi automat. Przypomnę tylko, że błąd zgłaszałem używając Fx 3.0.5 -> Firefoksa 3.0.5 takiej darmowej przeglądarki z każdej wyszukiwarki .
Aha, żeby nie było – *wyraźnie to napisałem* wg Waszych zaleceń.
> Proszę również, o poprawne wylogowywanie się z portalu po zakończeniu
> korzystania z niego przez każdego użytkownika komputera.
>
No tak, rada trafna. Nawet nie liczę na jakąkolwiek logiczną odpowiedź. :]
> Pozdrawiam.
>
–
Pozdrawiam (bardzo rozbawiony),
Tomasz Sokół,

Treść odpowiedzi pomocy technicznej NK pozostawię bez komentarza, bo świadczy ona tylko o tym, że tekst pisany kole w oczy

Po napisaniu odpowiedzi, byłem w 100% przekonany, że nikt nawet nie spojrzy na mój list a tu w ciągu trzech minut odpowiedź:

Witam,

Dziękuję za kontakt.
Uprzejmie proszę zatem, o przesłanie w załączniku listu zrzutów z ekranu, na
których widoczny będzie problem opisany przez Państwa w pierwszym liście.
Pozdrawiam.

ROTFL, co pierwszy liścik się zgubił (ten wysłany przez formularz pomocy technicznej)? Czyli co odpisano mi na list, choć nie wiadomo było na co się odpisuje? Też tak można – jednym słowem burd.. tam lekki macie

Po kilku minutach wysłałem poprawkę ponownie, zobaczymy ile będzie trzeba czekać na efekt… W takich sytuacjach aż szkoda, że Osiolki.net zakończyły swą działalność :].

W skrócie:
Internet jest stale rozwijany, każdego dnia widzimy tworzone nowe i coraz lepsze strony WWW, wykorzystujące możliwości HTML-a do granic możliwości. Język HTML 4 istnieje już niespełna dekadę i programiści poszukujący co raz to nowszych rozwiązań rozwoju Sieci, są blokowani przez ograniczenia języka oraz przeglądarek.

Aby dać twórcom stron większe pole manewru i możliwości, oraz uaktywnić bardziej interaktywne i pasjonujące strony internetowe oraz aplikacje – HTML 5 wprowadza i zwiększa tym samym możliwości pisania WWW.

Pracę nad piątą wersją HTML-a rozpoczęto w 2004 r. i na dzień dzisiejszy obecnie jest realizowany wspólnie przez W3C HTML WG oraz WHATWG. Wiele bardzo ważnych firm uczestniczy projektach w W3C (włączając w to przedstawicieli czterech głównych producentów przeglądarek: Microsoft, Mozillę, Operę i Apple) oraz wiele różnych organizacji i firm o różnym profilu działania.

Zauważyć jednak należy, że specyfikacja jest wciąż opracowywana i jeszcze długa droga przed do przebycia, aby ją ukończyć. Być może omówione za chwilę możliwości w tym artykule – będą mogły zostać zmienione. Artykuł ten stanowi krótkie wprowadzenie do istniejących głównych możliwości – takimi jakimi one są w bieżącym szkicu specyfikacji.

Struktura
HTML 5 wprowadza cały zestaw nowych elementów, które robią strukturę strony o wiele prostszą. Wiele stron w HTML 4 zawierają pospolitą strukturę (m.in. nagłówki, stopki i kolumny). Na dzień dzisiejszy zawieramy je w znacznik/elementy div wraz z nadanymi identyfikatorami (id) lub klasami (class).

Diagram ilustrujący typowy dwu kolumnowy układ strony przy użyciu znaczników div wraz z atrybutami id i class. Zawiera nagłówek, stopkę, poziomy pasek menu poniżej nagłówka. Głowna zawartość zawiera artykuł i pasek boczny po prawej stronie.

Użycie elementów div jest tak duże, ponieważ w bieżącej wersji HTML 4 jest brak niezbędnej i dokładnej semantyki dla opisu tych części. W języku HTML 5 zajęto się tym poprzez wprowadzenie nowych elementów, które reprezentują różne sekcje strony.

Elementy div zostały zastąpione poprzez nowe elementy: header, nav, section, article, aside i footer.

Znaczniki strony powinny wyglądać podobnie jak w przykładzie poniżej:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Jest wiele korzyści z używania tych elementów. Kiedy używamy w połączeniu z elementami nagłówka (h1 do h6), wszystkie dostarczone w ten sposób znaczniki są zagnieżdżone na odpowiednim poziomie nagłówka, wyłączając sześć poziomów możliwych z poprzedniej wersji języka HTML. Specyfikacja zawiera szczegółowy algorytm do generowania zarysu, który uwzględnia strukturę tych elementów i nadal pozostaje kompatybilny wstecz z poprzednimi wersjami. Użyte może być poprzez autorskie narzędzia lub przeglądarki do generowania zawartości, aby pomóc użytkownikowi poruszać się po dokumencie.

Na przykład, następujący znacznik struktury wraz z zagnieżdżonymi elementami section i h1:

<section>
  <h1>Poziom 1</h1>
  <section>
    <h1>Poziom 2</h1>
    <section>
      <h1>Poziom 3</h1>
    </section>
  </section>
</section>

Zwróćcie uwagę, że dla lepszej kompatybilności z bieżącymi przeglądarkami, jest także możliwe zrobienie użytku z innych elementów nagłówka (h2 do h6) stosując odpowiednio w miejsce elementów h1.

Poprzez identyfikację celu danej sekcji na stronie, przy zastosowaniu określonych elementów podziału strony, technologia wspierająca może być pomocna użytkownikowi do łatwego przechodzenia po stronie. Na przykład, w prosty sposób można przeskoczyć nad sekcją menu lub szybko przeskoczyć z jednego artykułu do drugiego bez potrzeby wprowadzania przez autora odpowiedniego odnośnika. Autorzy również korzystają ponieważ zastępując wiele elementów div w dokumencie z jednym z kilku oddzielnych elementów, może pomóc w robieniu kodu źródłowego czystszym łatwiejszym dla autora.

Element header przedstawia nagłówek sekcji. Nagłówki mogą zawierać więcej, niż tylko sekcje przykładu dla nagłówka, to rozsądnie byłoby header obejmować pod nagłówkami.

<header>
  <h1>Podgląd HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Przykładowy blog</h1>
  <h2>Wstaw znaczniki liniowe.</h2>
</header>

Element footer reprezentuje stopkę dla sekcji, to stosującej. Stopka zwykle zawiera informacje o swojej sekcji, takie jak kto napisał stronę, odnośniki do powiązanych dokumentów, prawo autorskie, i podobne.

<footer>© 2007 Przykład Inc.</footer>

Element nav reprezentuje sekcję odnośników nawigacji/menu. Jest on odpowiedni dla każdej nawigacji strony lub zawartości tabeli.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Element aside, który jest zawartością styczną do zawartości strony i jest zazwyczaj wykorzystywany do oznaczenia pasków bocznych.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2007/09/">September 2007</a></li>
    <li><a href="/2007/08/">August 2007</a></li>
    <li><a href="/2007/07/">July 2007</a></li>
  </ul>
</aside>

Element section przedstawia ogólny fragment dokumentu albo aplikacji, taki jak rozdział, na przykład:

<section>
  <h1>Chapter 1: The Period</h1>
  <p>It was the best of times, it was the worst of times,
     it was the age of wisdom, it was the age of foolishness,
     it was the epoch of belief, it was the epoch of incredulity,
     it was the season of Light, it was the season of Darkness,
     ...</p>
</section>

Element article przedstawia niezależny fragment dokumentu, strony albo miejsca. Jest to odpowiednie dla zawartości takich jak wiadomości albo artykuły na blogu, postu na forum albo indywidualnych komentarzy.

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        by <a href="http://example.com/">Jack O'Niell</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  </header>
  <p>Kolejny wspaniały artykuł!</p>
</article>

Audio i wideo
W ostatnich latach, wideo i audio w Internecie stały się coraz bardziej widoczne i witryny jak YouTube, Viddler, Revver, MySpace oraz tuzin innych – czynią je łatwymi dla każdego, kto chce opublikować swoje wideo i audio. Jednakże, od bieżącego języka HTML nie otrzymujemy koniecznego sposobu, aby z powodzeniem zagnieździć i kontrolować multimedia, funkcjonalność wielu takich witryn opiera się na technologii Flash. Pomimo, że można wbudować multimedia używając różnych wtyczek (takich jak QuickTime, Windows Media, itd.), Flash jest obecnie tylko powszechnie rozpowszechnioną stosowaną wtyczką, która dostarcza kompatybilne rozwiązanie z odpowiednim API dla programistów.

Jak świadczony przez różnych opartych o Flash odtwarzaczach medialnych, autorzy interesują się dostarczaniem własnych zaprojektowanych interfejsów użytkownika, które ogólnie pozwalają użytkownikom na odtwarzanie, przerywanie, zatrzymywanie oraz na regulację głosu. Planowane jest dostarczenie podobnej funkcjonalności w przeglądarkach poprzez dodanie natywnej obsługi dla zagnieżdżonych audio i video oraz dostarczeniu API DOM skryptom do kontroli nagrania.

Nowe elementy video i audio czynią to prostymi. Zarówno Opera i WebKit posiadają swe finalne wersję wraz z częściową obsługą elementu video.

Najprostszy sposób, aby zagnieździć video jest zastosowanie elementu video i pozwolić przeglądarce dostarczyć domyślny interfejs użytkownika. Atrybut controls jest typem logicznym, który określa gdzie chcielibyśmy lub nie chcielibyśmy włączyć lub wyłączyć domyślny UI.

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Pobierz film</a>
</video>

Opcjonalny atrybut poster służy do określenia obrazka, który będzie wyświetlony w miejsce video przed tym jak zacznie być odtwarzane. Jest więcej formatów, które obsługują własną ramkę zdjęcia, takie jak MPEG-4, który to dostarcza alternatywnego rozwiązanie, które może pracować indywidualnie z formatu video.

To jest właśnie proste osadzić audio do strony używającej element audio. Większość z atrybutów jest wspólna między elementami video, a audio, pomimo że z oczywistych względów, elementowi audio brakuje width, height i atrybutów poster.

<audio src="music.oga" controls>
    <a href="music.oga">Pobierz piosenkę</a>
</audio>

HTML 5 dostarcza element source dla określenia alternatywnego pliku audio lub video, które ma wybrać przeglądarka opierając się na jego typie lub obsłudze kodeka. Atrybut media możemy użyć do określenia wartości atrybutu, który może opierać się na jakiś ograniczeniach urządzenia oraz atrybucie type dla określenia typu. Zwróć uwagę, że kiedyś używasz elementu source, atrybut src musi zostać pominięty w ich elemencie rodzica video lub audio lub alternatywne elementy source zostaną zignorowane.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Dla twórców, którzy chcą odrobinę więcej kontroli nad interfejsem użytkownika, tak że oni mogą sprawiać, że to pasuje do ogólnego projektu strony internetowej, rozległe API dostarcza kilku metod oraz zdarzeń pozwalającym skryptów kontrolować odgrywane media. Najprostsze metody do wykorzystania są to play(), pause() i ustawiając currentTime, aby przewinąć do początku. Następujący przykład ilustruje wykorzystanie tego.

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

Dłuższy opis atrybutów znajduje się w aktualnej wersji specyfikacji.

Dokument
To co zapewne wszystkich ciekawi najbardziej to możliwości jakie da nam nowy język HTML 5, który posiada składnię kompatybilną z językiem HTML 4 i dokumentami XHTML1 opublikowanymi w Sieci. Dokumenty stosujące wspomnianą składnie muszą być podawane przeglądarce jako text/html.

HTML 5 szczegółowo definiuje reguły parsowania składni (wraz z obsługą błędów), które są bardziej kompatybilne z popularnymi implementacjami. User Agent będzie postępował według tych reguł z zasobami, które posiadają Typ MIME text/html.

Przykład dokumentu podporządkowującego się składni HTML:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Przykładowy dokument</title>
  </head>
  <body>
    <p>Przykładowy paragraf</p>
  </body>
</html>

XML jest inną składnią jaka może być stosowana dla języka HTML 5. Składnia ta jest kompatybilna z dokumentami XHTML1. Dokumenty stosujące tą składnię powinny być/wymagają podawane przeglądarce wraz z typem MIME XML oraz wymagają umieszczenia w przestrzeni nazw http://www.w3.org/1999/xhtml.
Poniżej mamy przykład dokumentu HTML 5 podporządkowującego się składni XML. Zwracamy szczególną uwagę, że dokumenty XML muszą posiadać typ MIME XML, czyli takie jak: application/xhtml+xml lub application/xml.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Przykładowy dokument</title>
  </head>
  <body>
    <p>Przykładowy paragraf</p>
  </body>
</html>

Wpis powstał w oparciu o artykuł "A Preview of HTML 5" ze strony A List Apart. We wpisie wykorzystałem dwie zawarte grafiki, które pomagają opisać nowe elementy HTML 5

Po tym jak na blogu programistów IE dowiedzieliśmy, że niebawem i Internet Explorer 8 będzie przechodził test ACID 2 bez problemów, zaczęto pracować nad kolejną wersją testu.

Rozpoczęto prace nad przygotowaniem testu ACID 3, który już wkrótce będzie siał spustoszenie .
ACID 2 opierał się na statycznym języku HTML oraz CSS, natomiast wersja trzecia opierała się będzie głownie na ECMAScript oraz DOM – dynamicznej stronie. Silnikiem testu będzie 100 skryptów, które będą zawierały ‘pod testy’.

Ciekawostką może być to, że jeśli ktoś się czuje na siłach, aby pomóc – to możemy pomóc stworzyć jeden z pozostałych do zrobienia 4 testów (96 jest już gotowych).

Pomimo tego, że test nie jest w pełni wyposażony w te 100 skryptów, to możemy już sprawdzić, jak się podczas tego testu zachowują poszczególne przeglądarki. Oczywiście do testu został dołączona strona zawierająca wzorcowy wynik końcowy – taki jaki powinny uzyskać po teście poszczególne przeglądarki (będące na dzień dzisiejszy marzeniem). Poniżej zrzut poprawnie wykonanego testu ACID 3:

A teraz proponuje zejść na ziemie i sprawdzić jak się zachowuje nasza przeglądarka w teście (niepełnym).

UWAGA: Poniższe wyniki są uzyskane podczas przeprowadzenia testu na nie ukończonym projekcie ACID 3!

Firefox 2.0.11:

Opera 9.25

Flock:

A teraz szybki test ‘gwiazdy’ z pośród gwiazd: IE 6

Wyniki te nie oddają w żaden sposób, która przeglądarka na tą chwilę sobie radzi najlepiej z testem ACID 3, dlatego po ukazaniu się pełnego testu – przeprowadzę go jeszcze raz i zobaczymy, porównamy, która była najbliżej zwycięstwa!

Aby wykonać samemu test – przejdź do niego…

Chcąc dowiedzieć się dodatkowych informacji nt. testu ACID 3 polecam lekturę postu opisującego kilka szczegółów o ACID 3.

Po raz kolejny wchodząc na polską Planetę Opery, widzę te same – stare posty , a rzadkością są nowe wpisy.

Jakby nie było, zawsze można było coś się ciekawego dowiedzieć z tej strony. Bądź co bądź to strona konkurencyjnej przeglądarki niż ta jaką preferuje, ale zbierała ona wiadomości z kilkunastu blogów dot. Opery – co dawało zbiór wielu informacji w jednym miejscu.

Czy Planeta nigdy więcej nie będzie aktualizowana? Jeśli tak, to co się wydarzyło, co o tym zadecydowało?

Bo być może ja przegapiłem jakiś wątek w Sieci dotyczący tego tematu? Może pytanie powinno być całkiem inne, a mianowicie czy o Operze już tak mało się pisze po Polsku? A Planeta nie ma co zbierać, ze stron do niej dopisanych. Wersja angielska jest aktualizowana na bieżąco i cieszy się wieloma wpisami, co poniekąd potwierdza wcześniej postawione pytanie.
Nie wiem, ale powiem szczerze, że interesuje mnie ta kwestia. Mam tylko nadzieje, że nie będzie żadnego flejma, bo ktoś używający Firefoksa napisał coś o środowisku związanym z Operą .

To nie żart

Rok temu ujrzała światło dzienne wersja 7 Internet Explorera, szału nie zrobiła – bo pomimo “lepszego” działania sama zawierała błędy. Przyzwyczajenie Microsoftu, że długo długo nic lepszego nie będzie – prysło!

W zeszły piątek, po 7 miesiącach walki z “przebrzydłymi” standardami – można zaliczyć punkt na korzyść zespołu IE!

To nie IE 7 to podobno poprawnie umiejąca wyświetlić strony html przeglądarka firmy Microsoft! To Internet Explorer 8, która przeszła poprawnie test ACID2

Acid2 to test opracowany przez organizację Web Standards Project (WaSP), który ma pomóc przeglądarkom internetowym w spełnieniu standardów internetowych wyznaczanych przez organizację W3C. Główny nacisk w tym teście został postawiony na poprawność interpretowania stylów CSS (odpowiadających za wygląd i zachowanie strony), a także: języka oznaczeń HTML, przezroczystości obrazków PNG i osadzania obrazków w kodzie strony poprzez Data URL…. więcej na Wikipedii

Można by było teraz się radować, cieszyć – prawdą jest to, że nadal w sensie technologicznym są daleko za Firefoksem, Operą, które pomimo nowej siódemki IE nadal odbierają użytkowników. No ale to temat rzeka…

Więcej na ten temat:

• Internet Explorer 8 and Acid2: A Milestone
• Info + multimedialne pliki na ten temat

Początek filmu robi wrażenie, jak bardzo był do d… Internet Explorer 7.

Długo nie trzeba było czekać na odpowiedź Pana Łukasza odnośnie mojego ostatniego wpisu nt. jego 12 lekcji. Można by powiedzieć:

Uderz pięścią w stół, a nożyce się odezwą…

Dobra, na tym zakończę zabawę w osobę posiadającą tomik z powiedzeniami . Pan Łukasz, postanowił odpowiedzieć na mój humorystyczny post na temat jego podejścia do tworzenia stron internetowych i związanych z tym przemyśleń. Powstała Lekcja 13:

Po powyższym wstępie, cytacie moich słów, czytamy:

Ponieważ nigdzie nie porównywałem żadnych przeglądarek, skłonny byłbym przypuszczać, że Pta­szor miał halucynację, gdyby nie to że zaraz potem napisał „Dodatkowo autor daje 12 lekcji”, Słowo „Dodatkowo” jest tutaj manipulacją mającą Czytelnikom wmówić, że gdzieś tam wychwalałem wy­szydzanego przez Osiołkowców Explo­rera, a ponieważ wyszydzanie Explorera jest b.modne, ma to nieprzychylnie nastawić do mnie Czytelników („huzia na tego który chwali Explorera”).

Panie Łukaszu, zauważyłem, że stara się Pan skierować tę “dyskusję” w kierunku takim, żeby zasadniczą rzecz, o którą w całym tym zamieszaniu chodzi, umieścić jak najbardziej z boku, a w sposób (jak Pan to sam określił) prostacki, zastąpić główny wątek poprzez próbę wyśmiania, obrażenia lub znieważenia mojej osoby, twierdząc, że mam halucynację itp. Rozumiem Pana zdenerwowanie, bo jak taki “szczeniak” jak ja może podważać Pańskie przemyślenia (czytaj Lekcje). Odpowiedź nasuwa się sama, gdyż za mną stoją fakty, ogólnie przyjęte standardy, lata pracy najlepszych programistów, i mógłbym tak wymieniać i wymieniać. Jeśli w moje słowa Pan nie wierzy, to chyba się Pan nie ośmieli i dalej będzie twierdził swoje w obliczu szeregu artykułów, publikacji całego świata, a w szczególności rekomendacji organizacji W3C.

Twierdzenie, że serwis Osiolki.net wyszydza przeglądarkę Internet Explorer, jest tutaj nie na miejscu, bo wystarczy przeczytać kilka zdań ze strony głównej serwisu, aby dowiedzieć się, po co, na co i w jakim celu został on stworzony:

Chcemy, aby Internet był dostępny dla wszystkich, niezależnie od tego, jakiego systemu bądź przeglądarki używają. Dlatego promujemy standardy W3C i piętnujemy osiołkowate strony stworzone wyłącznie dla “jedynie słusznej” przeglądarki. Oficjalne kryteria znajdują się na stronie reguły.

Strony w naszym spisie działają nieprawidłowo nie z winy przeglądarek, lecz z winy webmasterów, którzy popełnili błędy i jak osły uparcie ich nie poprawiają.

Znaczenie “jedynie słusznej” nie oznacza, że wyszydzamy IE, bo mamy taki kaprys, więc:

… wy­szydzanego przez Osiołkowców Explo­rera, a ponieważ wyszydzanie Explorera jest b.modne, ma to nieprzychylnie nastawić do mnie Czytelników („huzia na tego który chwali Explorera”).

Powyższe zdanie nie ma kompletnego sensu, bo wystarczy przeczytać jeden lub dwa artykuły na temat korzystania i działania Internet Explorera (nawet z przed trzech lat), aby zrozumieć, że dla własnego bezpieczeństwa należałoby podjąć jakieś kroki ku temu, aby nie narażać siebie i innych na nieprzyjemności.

A przecież jedyne co popełniłem poza Lekcjami to następujące stwierdzenie (2005, email do Osioł­kowców): „Argumentujecie głupotami i filozofia Waszej dzia­łalności jest zasadniczo błędna” (nb pod­trzymuję to w pełni – właśnie Lekcje miały to uwypuklić).

Tu przyznam Panu rację, ale w odniesieniu do Pana przypadku. Działalność serwisu oraz jego skuteczność (prawie 80% stron zgłoszonych do nas zostaje poprawiona) jest jak najbardziej pożądana. A wykręty typu Pana lekcji lub stwierdzenia, że to twórcy przeglądarek powinni się podporządkować i pozwolić na samowolkę w tworzeniu WWW zrobiłyby wiele krzywdy, nie tylko Panu, ale wszystkim dookoła. Także twierdzenie, że:

A jednak nie przeczytał albo nie pomyślał ! (niepotrzebne skreślić). Przecież jest oczywiste (patrz Lekcja 11), że ta poprawka zabrałaby lekko licząc kilka dni – skóra nie warta wyprawki (dla mnie). No i że nie jest to kwestia mojej wiedzy, lecz woli (mojej).

Jakaś poprawka nie jest warta wdrążenia, bo webmasterowi, tfu… wróć -> twórcy tej strony nie jest potrzebna, to tylko znaczy, że nie ma szacunku on do swoich użytkowników. Świadomie ich naraża, bo tak chce, choć jak zostało napisane w jednym z komentarzy do Osiołka Piker:

Autor używa Microsoft Word do generowania stron
Poleciliśmy HTML Tidy, który by to (i inne rzeczy) poprawił automatycznie.

Chwilę wcześniej, w Lekcji 13, jest stwierdzenie:

Teraz Ptaszor przepisuje wszystkie moje Lekcje (b.słusznie, bo ułatwi to Czytelnikom percepcję Jego komentarzy), jednak nie komentuje poszczególnych lekcji, zadowalając się następującym kilkuzda­niowym komentarzem sumarycznym:…

A co tu komentować?! Wszystko jest jasne jak słońce i tu nadal się dziwię, że uważa Pan zasadę działania Internetu i wszystkie rzeczy z nim związane jak partyjkę brydża, gdzie może Pan się wyłamać i mieć własne zdanie. Nie, to nie ta dziedzina! W Internecie trzeba przestrzegać pewnych reguł czy schematów (ogólnie zwanymi standardami) i nie jest w stanie zmienić tego jedna osoba.

Upsss… zapomniałem, że on pisze w MS Word – przecież ten edytor wymiata.

Na koniec powiem tylko: Buahahahahahhahaha…

To ostatnie zdania „komentarza”. Nie wiem co tu znaczy „wymiata” (chyba jakiś slang szczeniacki).

Nie wiem też co znaczy Buahahahahahhahaha… Ostatni ryk barana?…

Hmm… myślę, że bardzo dobrze Pan wie, co oznacza “wymiata” – tylko chciał Pan pokazać, że mój post jest to jakiś gówniarski bełkot poprzez dodanie słowa “szczeniacki”. A to, czy tak jest, było widać po komentarzach umieszczonych pod poprzednim postem. Czy te wszystkie osoby nazwałby Pan także szczeniakami, bo uważają, że mam rację?

Powracając do używanego przez Pana edytora – to polecam darmowy edytor NVU, który nie dość, że pozwoli Panu na prawie identyczną budowę strony, to jeszcze stworzy do niej poprawny kod, nie tylko pod Explorera.

I kto tu się skompromitował? A sądziłem że moje Lekcje będą zrozumiałe dla wszystkich !

No właśnie, kto? Bo ja nie próbuje na siłę Panu wbić swoich poglądów na temat, w którym Pan jest konikiem. To Pan próbuje walczyć z tymi, co wiedzą sporo w dziedzinie, o której Pan nie ma bladego pojęcia.

Dobrze przynajmniej, że Ptaszor przyznał samokrytycznie, iż mózg ludzki jest ograniczony.

Chciałbym zauważyć, że moja krytyka dotyczyła Pana Lekcji, nie moich!

Dalsza część Pana lekcji to dosłownie szukanie dziury w całym! Lol… Ucięcie lekcji to nie żaden spisek; doszukiwanie się konspiracji w komentarzach także nie ma sensu. A szukanie zastępczego tematu to raczej nie powód, aby tylko coś odpisać! Żadnych konkretnych, mających sens argumentów! Czy nie lepiej przyznać się do błędu i dla siebie samego odpalić ten nieszczęsny HTML Tidy i cieszyć się większą popularnością własnej strony?

Z mojej strony to tyle w tym dość dziwnym i zarazem śmiesznym temacie…

BTW: O przydatności Osiołków w Sieci pisałem już nieraz, ale warto przypomnieć, czego ten serwis już dokonał!

Dziś przeglądając jeden z komentarzy do opublikowanych Osiołków natrafiłem na odnośnik do jednej ze stron, która krytykuje działanie serwisu Osiolki.net oraz pokazuje wyższość Explorera na Firefoksem i Operą. Dodatkowo autor daje 12 lekcji i pokazuje jak ludzki mózg może być ograniczony . Zapraszam na stronę http://www.pikier.com/lekcje.htm, która zawiera mądrości szalonego webmastera, autora osiołków (http://osiolki.net/osiolek/pikier, http://osiolki.net/osiolek/czytaj), który zamiast przeczytania choćby najgłupszego kursu HTML-a, postanowił wysnuć swoje własne przemyślenia na ten temat tworzenia stron WWW. Jedziemy!

Wszystkie wysnute przemyślenia naszego bohatera zostały zebrane i pisane przez długi okres czasu. Na zdrowy rozum są przemyślane i bohater ten powinien być w pełni świadomy tego co pisze i wiedzieć jak bardzo się tym textem ośmieszył.

Chciałem wyjaśnić, że wolałem porobić zrzuty oryginalnej treści, bo zaawansowany wygląd tej witryny mnie przerósł, a chciałbym, jej przekaz pokazać w bardzo obiektywny sposób. Lol!

Ostatnią lekcję uciąłem. Ale za to postanowiłem zajrzeć w jej źródło. Zostałem oczarowany stopniem skomplikowania kodu, dla tak zaawansowanej szaty graficznej. Oto i zrzut:

Mógłbym się odnieść do wszystkich bardzo złożonych uwag tego Pana, ale nie ma sensu. Po prostu komedia jak ludzie mogą być ograniczeni i niedoinformowani. Paradoksem jest też to, że pomimo poprawek wyłożonych na tacy – Pan ten ma takie zaufanie do własnej wiedzy, że woli się skompromitować, niż poświęcić kilka chwil na wprowadzenie poprawki. Upsss… zapomniałem, że on pisze w MS Word – przecież ten edytor wymiata. Na koniec powiem tylko: Buahahahahahhahaha…

Panie Łukaszu proszę następnym razem chwilę zastanowić się, zanim Pan da kolejną lekcję!

Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 – czyli czym jest canvas?

Ok, na początek zobaczmy jak wygląda ten nowy i tajemniczy element <canvas>:

<canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

Element Canvas posiada tylko dwa atrybuty; są nimi height i width. W powyższym przykładzie użyliśmy ich, ale w rozmiarach jakie sami chcieliśmy nadać naszej grafice. Są one opcjonalne i mogą być również określane jako własności DOM lub zasady CSS. Kiedy atrybuty wysokości i szerokości nie są określone, to wtedy obiekt <canvas> będzie posiadał wielkości domyślne czyli; 300 pikseli długości i 150 pikseli wysokości.

Elementu <canvas> możemy nadać takie same style jak normalne; obrazy (margines, obramowanie, tło, itd.). Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.

Narysujmy, więc coś…

Wykonajmy nasz pierwszy rysunek za pomocą elementu canvas. Tworzymy pierwszą stronę, która będzie zawierała nasz powyższy kod elementu canvas, lecz samo wstawianie kodu nic nam nie wyświetli, a co dopiero cokolwiek ma narysować.
Chcąc rozpocząć rysowanie musimy zastosować metodę DOM getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. Metoda getContext może przyjąć tylko jeden parametr, który to jest trybem rysowania. Aktualnie jest dostępny tylko jeden tryb i jest to tryb 2d. W przyszłości będziemy mogli zobaczyć tryb 3d, lecz teraz pozostajemy przy trybie 2d.
Korzystając z kolejnej metody DOM – getElementById, zdefiniujemy pierwszą linię skryptu pozwalającego nam na rozpoczęcie rysowania za pomocą elementu Canvas. Metoda ta pozwoli nam na uzyskanie dostępu do drugiej metody getContext, dzięki której mamy dostęp do trybu rysowania:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Starsze wersje przeglądarek?!

Firefox w wersji 1.0 i starsze jego wydania oraz np. Internet Explorer w wersji 6 nie potrafią rozpoznać elementu Canvas. Co teraz?
Potrzebujemy metody chroniącej przeglądarki, które nie wspierają canvas, przed uruchomieniem naszego skryptu. Można tego łatwo dokonać wykonując test metody getContext. Kawałek górnego kodu wyglądał będzie tak:

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // kod rysowania
}

Do kodu należy dodać jeszcze wyrażenie if, aby przeglądarka nie potrafiąca wczytać Canvas, nie próbowała tego zrobić.

Łączenie kodu

Połączę teraz wszystko, tworząc nam szablon podstawowego dokumentu do innych przykładów:

<html>
  <head>
    <title>Szablon elementu Canvas</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('pierwszy_przyklad');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="draw();">

    <canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

  </body>
</html>

SZABLON – pobierz!

Wracając do kodu i spoglądając na skrypt zobaczymy, że została wywołana funkcja draw, która zostanie raz wywołana, kiedy zakończy się ładowanie strony (poprzez umieszczenie atrybuty onload w znaczniku body).

Ok, pierwsze koty za płoty . Utworzyliśmy szablon, który posłuż nam niedługo jako podkład pod bardziej zaawansowane przykłady. Niebawem kolejne części opisu Canvas, a między czasie odsyłam do korzystania z zasobów Mozilla Developer Center.

Treść wraz przykładami została opracowana na podstawie Przewodnika po canvas, będącego częścią MDC PL.

Tak, kolejna rocznicowa liczba wybiła na liczniku poprawionych Osiołków w serwisie Osiolki.net. Fakt, trochę czasu upłynęło, zanim się udało poprawić kolejne 50 osiołków od ostatniego wpisu, ale ważne, że do przodu . Szczególnie należy się cieszyć, że jest jak jest, gdyż w zespole Osiołków – powiedzmy – panują ciche dni . Co nie znaczy, że w serwisie nic się nie dzieje. Działamy, działamy…

W sumie “te” poprawione Osiołki już dawno były poprawione, tylko widniały na czarnej liście Osiołków. Z braku czasu zespół po publikacji nie wraca do zgłoszenia, chyba że Wy – użytkownicy odwiedzający serwis Osiolki.net – zgłosicie nam, że już strona została poprawiona. Wtedy sprawdzamy poprawioną stronę i od tego, czy została poprawiona, czy nie, zależy los osiołka na czarnej liście. W nagrodę za poprawę (pomimo publikacji) Osiołek taki jest przenoszony na widoczną listę stron poprawionych. Dodatkowo od tego momentu nie jest ta strona indeksowana w Google jako Osiołek.

Lepiej: Przy okazji chciałbym podziękować adasiowi za przeprowadzenie akcji wspomagającej serwis Osiolki.net. Dzięki jego pracy włożonej w sprawdzenie kilkudziesięciu umieszczonych na liście Osłów – przekroczyliśmy kolejny magiczny próg. Oby więcej osób niezwiązanych z zespołem chciało tak z nami współpracować. Dzięki wykonanej pracy adasia wiele stron zostało przeniesionych do kategorii stron poprawionych, nabijając nam licznik odniesionych sukcesów.

To niewyobrażalne, że już 800 stron zostało poprawionych przy udziale zespołu Osiolki.net. Niestety, czasem przypomina to walkę z wiatrakami, bo ciągle jeszcze są osoby tworzące potworki, buble i niedziałające strony. Jest to efekt braku dobrego przygotowania webmastera, a co za tym idzie – brak dobrych materiałów jasno omawiających proces nauki tworzenia stron.
Można jednak powiedzieć, że problem nie jest już zauważany przez wąskie grono specjalistów, lecz zaczęto głośno mówić o promocji standardów sieciowych. Miejmy nadzieję, że z czasem będę mógł napisać, że mamy Sieć wolną od potworków.

<canvas> jest nowym elementem języka HTML, który może być zastosowany do rysowania grafiki przy użyciu skryptów (zazwyczaj JavaScript). Przykładem canvas może być jego użycie do rysowania wykresów, tworzenia kompozycji fotografii lub do prostych (i nie tylko prostych) animacji. Poniższe obrazki pokazane są jako przykłady implementacji <canvas>, które zobaczymy, później w kilku kolejnych postach na moim blogu.

Po raz pierwszy <canvas> został przedstawiony przez firmę Apple dla Mac OS X Dashboard i później zaimplementowany w przeglądarce Safari. Przeglądarki oparte o gałąź Gecko 1.8, a jest jedną z nich m.in. Firefox 1.5, obsługują ten nowy element. Bez problemu radzi sobie Opera z obsługą canvas, natomiast próba otworzenia jakiejś animacji w Internet Explorerze w wersji numer 6, kończy się komunikatem o braku wsparcia dla tego elementu. W siódemce IE jeszcze nie sprawdziłem, ale sprawdzę jak tylko go zaktualizuje… Bo aktualizacja badzIEwia trwa około pół godziny, a na dodatek wymaga ponownego uruchomienia systemu. Jak zwykle M$ musiał coś utrudnić…

Element <canvas> jest częścią specyfikacji WhatWG Web applications 1.0 znanej także jako HTML 5.

Wymagania?!

Oprócz tego o czym wspomniałem powyżej (obsługiwane przeglądarki), canvas wymaga od nas znajomości języka HTML i JavaScript.

Na MDC już dobre pół roku temu pojawił się dość obszernie i fachowo napisany przewodnik po canvas. Choć pracę nad spolszczeniem tego przewodnika trwają, wiele treści z niego będę chciał opisać po swojemu i wykonać przedstawione w nim przykłady.

No, właśnie przykłady, Internauta1024A już wykonał kilkanaście bardzo fajnych przykładów ukazujących możliwości canvas, przesłał je do mnie, i obiecuję i jemu i Wam, że pojawią się wszystkie!

Tym krótkim wstępem, zapraszam do czytania kolejnych postów nt. canvas jak i nadal oczywiście XUL-a.