Ptaszor i jego blog! Lol…

Takie było moje pierwsze skojarzenie jak przeczytałem jedną z pozycji w polskim tłumaczeniu stron poświęconych CSSowi

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ść :].

Niemożliwe? A możliwe, możliwe…

Jak co roku, druga niedziela stycznia to czas Wielkiej Orkiestry Świątecznej Pomocy do której i ja postanowiłem się w tym roku przyłączyć zbiórki, wspierając sztab w Brzegu i wystawić na aukcje to co umiem robić najlepiej , czyli pisanie zwycięzcy aukcji stronę internetową.

Heh, można powiedzieć: Masz firmę, nie masz strony weź udział w aukcji…

Do 11 stycznia 2009 roku możesz wziąć udział w aukcji internetowej, dzięki której możesz stać się posiadaczem / posiadaczką profesjonalnie i nowocześnie wykonanej strony WWW przez firmę Create WWW.

Poniżej krótki opis aukcji, więcej…

* Co wchodzi w skład usługi:
- zaprojektowanie i wykonanie strony internetowej firmy lub osoby prywatnej,
- strona będzie posiadała do 5 podstron (2 lub 3 opisowe do wykorzystania w dowolnej formie + moduł newsów i podstrona kontakt z formularzem służącym do komunikacji z właścicielem owej strony, dodatkowo istnieje możliwość skorzystania z dodania 1 dowolnego modułu – np: galerii lub księgi gości…)
- panel administracyjny strony,
- wybór wyglądu z pośród kilkudziesięciu gotowych szablonów lub możliwość projektu indywidualnego wyglądu strony po dostarczeniu materiałów do jego wykonania (po wykonaniu projektu indywidualnego możliwe są do wykonania 2 (dwie) jego poprawy wg. uwag zwycięzcy licytacji)
- domena z rozszerzeniem .pl lub com.pl (1 rok)
- hosting strony (1 rok),
- gwarancja wykonania strony wg. najnowszych standardów W3C,
- gwarancje poprawnego działania we wszystkich przeglądarkach

I jak warto nie warto? Zwycięzca aukcji przekaże wylicytowaną kwotę na konto WOŚP, a tym samym wykonam mu stronkę o wartości znacznie przekraczającej kwotę na jaka jest wystawiona aukcja

Warto też dodać że jest to jedyna taka aukcja z pośród, tych które są wystawione w dziale Internet serwisu
http://aukcje.wosp.org.pl

Aby zachęcić do wzięcia udziału w aukcji zapraszam do obejrzenia realizacji do tej pory wykonanych stron firmy przez firmę Create WWW.

• Zobacz także:
• http://createwww.pl
• http://aukcje.wosp.org.pl/show_item.php?item=224589 – opisywana aukcja
• http://createwww.pl/portfolio.php – opisywana aukcja chętnych

Firefox w wersji trzeciej oferuje nam obsługę alternatywnych arkuszy stylu. Strony zawierające dodatkowe arkusze dają możliwość zmiany stylu wyświetlanej strony poprzez menu Widok – Styl strony i wybór stylu. Pozwala to na różne wersje wyświetlenia tej samej strony. Jak się je dołącza do strony?

Aby dołączyć plik css do strony musimy zastosować poniższą linijkę:

<link href="style.css" rel="stylesheet" type="text/css" media="all">

Aby dołączyć alternatywne arkusze stylu należy dodać kod:

<link href="default.css" rel="stylesheet" type="text/css" title="Default Style"> 
<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> 
<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

Po dodaniu sprawdzamy: wchodzimy do menu Widok – Styl strony i powinniśmy widzieć:

I mamy możliwość wybrania jednego z dostępnych stylów. Więc wybieramy – i jakie zmiany?

• Przykład Alternatywnego arkusza stylu z MDC
• Więcej info też w artykule (en)

Zatytułowałem ten wpis tak dlatego, gdyż chciałbym pokazać, tym co tworzą strony w technologi Flash i nie chcą zazwyczaj z niego zrezygnować – podpierając się możliwościami tworzenia animacji jako stron mających być serwisem WWW, że w bardzo łatwy sposób można zastąpić “mało dostępne”, toporne, świszczące i w koło się kręcące animacje Flash starym dobrym i przyjaznym CSSem!

Poniżej pokazuje tego najlepszy przykład, który przypomina animacje – a nią nie jest . Ale po kolei…
Robiłem ostatnio stronkę pewnej firmie, ogólnie nic szczególnego – bo owy klient miał już podobną stronkę – dotyczącą innej inwestycji i miałem wykonać podobną stronkę bieżącej inwestycji klienta.
Od zawsze mam negatywne nastawienia do wszystkiego co trzeba wykonać Flashem :/. W opisywanym projekcie niestety zanosiło się na większe zabawy Flashem. Jak to bywa w takich sytuacjach – trzeba zrobić wszystko, aby go w jak najmniejszym stopni wykorzystać.

Stronka, na jakiej klient chciał aby miała identyczną funkcjonalność – zawiera ona animowany plan inwestycji i kilka innych informacji:

A teraz wykonany przeze mnie inny plan, ale bez użycia technologii Flash – zachowując swoją funkcjonalność:

I jak? To animacja i to animacja…

Do wykonania tego planu za pomocą arkusza stylów zainspirował mnie mały przykład znaleziony na stronie

Kod, który posłużył mi do wykonania mojego zadania stronie możecie zobaczyć w pliku plan.css.

No w końcu się odbędzie kurs WWW na jaki się zapisałem jeszcze w październiku. Zapisując się poinformowano mnie, że to będzie HTML + podstawy JavaScriptu, teraz doszły jeszcze arkusze stylów.

Nie wiem jak to w ogóle może być możliwe przeprowadzenie kursu w 40 godzin o takim materiale, do tego kurs kończy się egzaminem, po którym Ministerstwo Edukacji wystawia certyfikat, że się zostało projektantem stron WWW. O ile oczywiście zaliczy się końcowy egzamin.
Jeśli do tej pory odbywały się takie kursy, to już wiadomo, skąd się biorą potworki w Sieci. Może i tym razem przedstawię materiał kursu bo zmienił się on od pierwotnie zakładanego:

 CZAS TRWANIA:
40 godzin
Kurs realizowany jest w systemie codziennym od poniedziałku do piątku w godz. od 9.00 do 13.00.

   CO UMOŻLIWIA KURS:
- uzyskanie kwalifikacji projektanta stron www, potwierdzonych zaświadczeniem o ukończeniu kursu na druku Ministerstwa Edukacji Narodowej.

   PROGRAM KURSU obejmuje m.in.:
1. Wprowadzenie - 1 godz.
- podstawy działania sieci Internet
- wprowadzenie do technologii WWW i HTML
2. Przeglądarki WWW - 1 godz.
3. HTML - 10 godz.
- struktura dokumentu
- czcionki
- bloki
- odsyłacze
- wykazy
- tabele
- style
- ramki
- formularze
4. Kaskadowe Arkusze Stylów (CSS) - 14 godz.
a) Vademecum CSS
- formatowanie tekstu
- tło
- obramowanie
- margines
- listy
- pozycjonowanie
- kursor
- pasek przewijania
b) Przykładowe projekty
5. Umieszczanie stron na serwerze WWW - 4 godz.
6. Java Script - wprowadzenie - 2 godz.
7. Wstawianie gotowych elementów Java Script do ston WWW - 2godz.
8. Tworzenie elementów multimedialnych w technologii Flash -6 godz.

W porównaniu to tego co miałem mieć na początku to usunięto punkt o poznaniu narzędzi do tworzeniu WWW, a dodano sporo, CSS + przegląd projektów w nim zrobionych. Cały czas nie mogę aż się nadziwić prędkości tego kursu, zapewne odbije się to strasznie na jakości nauczania jak i późniejszych efektów w postaci stron WWW.
Oby późniejsi projektanci nie stali się fachowcami od ramek, co najgorsze to strona samego kursu jest wykonana za pomocą ramek

Spoglądając w źródło przypomniał mi się post Pawła Wimmera nt. ramek, i oby Pawle nadal spoczywały w spokoju, bo jak na tym kursie zaczną je wskrzeszać to będzie ROTFL x 1000. Według mnie nie powinno się ich już uczyć, jedynie można by było wspomnieć, że istnieją w dokumentacji ale na tym bym pozostał. Jeszcze jestem ciekaw, czy pójdą na łatwiznę wybierając tabele do rozmieszczenia elementów na stronie czy pokuszą się o divy i zastosowanie CSS-a. Można tu teraz się tak zastanawiać bo może po to właśnie rozszerzyli kurs aby były te divy (choć to raczej byłoby marzeniem).
Co do wycofanego omówienia programów do budowy WWW to myślę, że słuszna decyzja – sądząc po źródle kursu:

Mam mnóstwo pytań bez odpowiedzi, ale to już niebawem się zmieni – o wynikach tego kursu napisze na pewno!

Chcąc pokazać jakie ma możliwości CSS, postanowiłem, że stworzę listę użytecznych fragmentów kodu CSS, jakie można znaleźć w Sieci:

- Podmienianie obrazka za pomocą CSS

- Lista linków z czarnym tłem po najechaniu na odnośnik – przykład

- Wyskakujące okienka w CSS

- Cudzysłowy w CSS-ie

- Miniatury

- Kalendarz w postaci listy

- Menu zachowujące się jakby było zrobione we Flashu

- Drukowanie strony WWW – artykuł opisujący jak za pomocą CSS, można przekształcić stronę internetową w dokument nadający się do druku (który nie zawiera zbędnych części strony, a właściwą treść).

- Powiększenie treści za pomocą CSS-a.

- Utworzenie gwiazdek do głosowania w CSSie (nowszy przykład)

- Kilka sposobów na ostylowanie odwiedzonych odnośników

- Oznaczanie odwiedzonych odnośników – przykład

- Oznaczenie odnośników odnoszących się do *.pdf

- Pasek postępu w CSS – używa wartości procentowych

- Odnośniki pozwalające użytkownikowi na decyzję czy się chce daną stronę otworzyć w oknie w jakim się teraz znajduje, czy chce się otworzyć w nowym oknie.

- Kontrolki formularza

- Tło jako drobna krateczka

- Obramowanie w pudełkach / przypomina wiersze w tabeli – przykład przedstawia jak postępować w 5 krokach, na koniec osiągając podobny efekt jak jest poniżej

- Przyciski z zaokrąglonymi rogami

- Kontrolki formularza: przyciski

- Wiersze tabeli bardziej czytelne niż pozostałe wiersze

- Bardzo proste, dostosowane pod względem dostępności odnośniki zewnętrzne.

- Przypisy – przykład

- Mapa strony za pomocą CSS-a – przykład

- Wiadomości ostrzeżeń w CSS

- Dodawanie do odnośników obrazków będących ikonami za pomocą CSSa

- Zaokrąglone rogi w CSS

- Pudełko z zaokrąglonymi rogami oraz z wcięciem

- Częściowa przeźroczystość

- Podpis obrazków

- Kolorowanie wierszy – sprawia, że w naszych tabelach staje się wszystko czytelne i ładnie wyglądające, ponieważ co drugi wiersz jest tego samego koloru.

- Efekt gradientu w tekście za pomocą CSSa- demo

- Ładne cytowanie treści

- Zmiana stylu listy wyliczeniowej

- Zaawansowane menu w CSS – przykład

Tym razem tylko 35 bajerków na stronę, następnym razem postaram się zwiększyć ich liczbę. Warto mieć w jednym miejscu zebrane przykłady, dla których można wykorzystać możliwości drzemiące w CSS-ie.

Na początek: jest to dalsza część wczorajszego opisywania różnic pomiędzy językami HTML 4 oraz HTML 5

Nieobecne elementy:
Poniższych elementów nie ma w HTML 5, ponieważ efekt ich działania dotyczy wyglądu aplikacji (prezentacji) i lepiej jest je wyświetlać za pomocą języka CSS:

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Poniższych elementów nie także ma w języku HTML 5, ponieważ ich stosowanie miało zły wpływ na usability i dostępność aplikacji dla użytkownika końcowego.

• frame
• frameset
• noframes

Poniższe elementy nie są dołączone, ponieważ były wykorzystywane bardzo rzadko, tworząc zamieszanie lub mogą zostać zastąpione przez inne podobne elementy:

• acronym – nie został dołączony ponieważ tworzy on zbyt wiele nieporozumień. Można w zamian stosować abbr dla skrótów (ang. abbreviations).
• applet – stał się przestarzały względem object.
• isindex
• dir – stał się przestarzały względem ul.

Brakujące atrybuty:
Niektóre atrybuty języka HTML 4 nigdy więcej nie będą dostępne w wersji piątej.

• atrybut accesskey w a, area, button, input, label, legend i textarea.
• atrybuty rev i charset w link i a.
• atrybuty shape i coords w a.
• atrybut longdesc w img i iframe.
• atrybut target w link.
• atrybut nohref w area.
• atrybut profile w head.
• atrybut version w html.
• atrybut name w map, img, object, form, iframe, a (w zamian można zastosować id).
• atrybut scheme w meta.
• atrybuty archive, classid, codebase, codetype, declare i standby w object.
• atrybuty valuetype i type w param.
• atrybuty charset i language w script.
• atrybut summary w table.
• atrybuty headers, axis i abbr w td i th.
• atrybut scope w td.

W dodatku, HTML 5 nie posiada atrybutów odpowiedzialnych za wygląd na stronie (prezentacji), które były w wersji 4. Zostały one przeniesione do arkusza CSS, będącego właściwym miejscem na definiowanie wyglądu strony:

• atrybut align w caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr i body.
• atrybuty alink, link, text i vlink w body.
• atrybut background w body.
• atrybut bgcolor w table, tr, td, th i body.
• atrybut border w table, img i object.
• atrybuty cellpadding i cellspacing w table.
• atrybuty char i charoff w col, colgroup, tbody, td, tfoot, th, thead i tr.
• atrybut clear w br.
• atrybut compact w dl, menu, ol i ul.
• atrybut frame w table.
• atrybut frameborder w iframe.
• atrybut height w iframe, td i th.
• atrybuty hspace i vspace w img i object.
• atrybuty marginheight i marginwidth w iframe.
• atrybut noshade w hr.
• atrybut nowrap w td i th.
• atrybut rules w table.
• atrybut scrolling w iframe.
• atrybut size w hr, input i select.
• atrybut style we wszystkich elementach z wyjątkiem font.
• atrybut type w li, ol i ul.
• atrybut valign w col, colgroup, tbody, td, tfoot, th, thead i tr.
• atrybut width w hr, table, td, th, col, colgroup, iframe i pre.

API
HTML 5 wprowadza kilka API, które pomagają w tworzeniu aplikacji internetowych. Mogą być one stosowane razem z nowymi elementami wprowadzonymi do aplikacji:

Rozszerzenia do HTMLDocument

HTML 5 poszerzył interfejs HTMLDocument z DOM Level 2 HTML. Interfejs jest teraz zaimplementowany na wszystkich obiektach implementujących interfejs Document.

• getElementsByClassName() – aby wybrać elementy poprzez ich nazwę klasy. Sposób w jaki jest zdefiniowana ta metoda pozwala jej na pracę z jakąkolwiek zawartością z atrybutami class i obiektem Document, taki jak SVG i MathML.
• innerHTML
• activeElement oraz hasFocus
• getSelection()
• designMode i execCommand(), które są często stosowane do edycji dokumentów.

Rozszerzenia do HTMLElement

Interfejs HTMLElement posiada także kilka dostępnych rozszerzeń w języku HTML 5:

• getElementsByClassName()
• innerHTML
• classList

Dzisiejszy post jest dokończeniem poprzedniego wpisu.

Czytaj także:

• Różnice pomiędzy językami HTML 4 oraz HTML 5 – cz. I

Pewien czas temu znalazłem w sieci, gdzieś na jakiejś stronie bardzo ładnie wyglądający efekt powiększania obrazka. Jest on widoczny na moim blogu od jakiegoś czasu:

Jak widać na powyższym zrzucie po kliknięciu w obrazek na blogu jesteśmy przenoszeni do pełnego wymiaru klikniętego obrazka, ale żeby to nie wyglądało tak brzydko, podczas kliknięcia uruchamiany jest plik lightbox.js i lightbox.css plus do tego trzy pliki graficzne; overlay.png, close.gif i loading.gif.

Aby zaimplementować ten ładny efekt na naszej stronie wystarczy do kodu strony dopisać w <head> następujący fragment:

<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/lightbox.js"></script>

U mnie skrypt i arkusz stylów znajduje się w katalogu lightbox.

Po dodaniu tegoż kodu, aby zadziałał nam skrypt i żebyśmy zobaczyli ten efekt to do odnośnika, który prowadzi do obrazka, który chcemy zobaczyć musimy dodać atrybut rel="lightbox". Powyżej pokazany jest obrazek będący odnośnikiem, a teraz kliknij zwykły odnośnik wywołujący ten efekt. Jego kod:

<a href='http://medeco.p9.pl/wordpress/wp-content/uploads/2007/02/podglad_obrazkow.png' title='Tytuł odnośnika' rel="lightbox">kliknij zwykły odnośnik</a>

Oprócz atrybutu rel możemy dodać atrybut title, który zostanie wyświetlony jako tytuł naszego powiększonego obrazka.

Ok, efekt ładny i przyda Wam się na pewno. Robi wrażenie. Chciałbym Was jeszcze prosić, o to że gdyby ktoś znał autora skryptu niech poda – bo ja nie pamiętam nawet z jakiej strony to “podwędziłem”

Całość załączam w spakowanym zipem folderze: lightbox.zip

Kolejna krótka porada zaczerpnięta z mozilla links, a dotyczy ona panelu bocznego w Firefoksie. Cóż to za panel?

Panel boczny to fragment okna przeglądarki, który może zawierać dowolne, przydatne informacje. Mogą to być zakładki, historia lub też dowolna wybrana przez użytkownika strona.

Standardowo w Firefoksie mamy ten panel umieszczony z lewej strony okna. A co z tymi użytkownikami, którzy nie lubią korzystać z takiego położenia panelu? Przestawmy wspomniany lewy panel boczny na prawy (panel będzie się pojawiał po przeciwnej stronie okna przeglądarki).

Podobnie jak w poprzednim poście dodajemy poniższy kawałek kodu do pliku userChrome.css

/* Wyświetla panel po przeciwnej stronie */
#browser {
-moz-box-direction: reverse;
}

Jak widać mój pasek historii już jest po prawej stronie przeglądarki.