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

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.

Tak, to prawda! Ostatnio będąc we Wrocławiu postanowiłem zapisać się na Kurs WWW. Jako, że webmaster ze mnie dobry (chyba) to postanowiłem zapisać się na owy kurs z dwóch powodów:

• Pierwszym powodem jest to, że po tygodniu będę miał dyplom Ministerstwa Edukacji o ukończeniu takiego kursu, co zapewne się przyda do portfolio,
• Drugim powodem jest to, że chcę sprawdzić czego właściwie można się na takim kursie nauczyć?!

Działając przez ponad dwa lata w Osiolki.net wiem, że poziom pisanych stron w Polsce nie jest doskonały. Chcąc sprawdzić skąd się to bierze wpadłem na ww. pomysł ;). Także dziś rano (tzn. w niedziele) pojechałem zapisać się na kurs który potrwa, bagatela 30 godzin! Jak by nie patrzeć w 30 h to raczej nikt nie będzie umiał pisać stron. Ale z drugiej strony, może się mylę. Kurs odbędzie się w Prominet Collage i oferuje następujący program:

CEL KURSU:
- błyskawiczne i profesjonalne zdobycie wiedzy z zakresu tworzenia stron WWW,
- poznanie wybranych zastosowań i narzędzi informatycznych z danego zagadnienia.
Kurs prowadzony jest w formie warsztatów podczas których każdy z uczestników wykona własną działającą stronę WWW.

CZAS TRWANIA:
30 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. Przegląd programów wspomagających tworzenie stron - 4 godz.
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.

Zostałem poinformowany, że kurs zacznie się około 15 listopada, z miłą chęcią zdam relację z jego przebiegu. Przynajmniej na własnej skórze dowiem się jak się uczy przyszłych webmasterów w szkołach oraz na jakich metodach się to robi. Aż mnie ciekawi, czy od razu zostanie podjęta walka z divami, czy dla uproszczenia pozostanie wytłumaczone jak robić strony w tabelkach :/, albo nie daj Boże na ramkach (grr… zgroza).