witia.jogger.pl

W pewnym ogłoszeniu o pracę na stanowisku "Webmaster Pro" (cokolwiek by to miało znaczyć) znalazł się następujący fragment (wyróżnienie moje):

Opis stanowiska:
Twoim zadaniem będzie przygotowywanie templates na potrzeby stron www, cięcie strony do tabeli HTML, współpraca z programistą.

Należałoby dodać jeszcze tylko obróbkę skrawaniem arkuszy stylów. Wydawać by się mogło, że w dzisiejszych czasach raczej nikt się nie szczyci tworzeniem laytów stron, opartych na tabelach - nawet jeśli pokątnie to robi . A tu proszę - oficjalnie poszukują specjalisty w tej dziedzinie.

2 komentarze

Na stronie Dziennika Internautów jest artykuł (sponsorowany?) pt. Usability - internetowe być, albo nie być dla firm, która opisuje ofertę firmy Perfect One (www.perfectone.pl), specjalizującej się wyłącznie w badaniu użyteczności i funkcjonalności stron internetowych. Co prawda firma nie zapowiada, że specjalizuje się też w dostępności stron, ale w dziale "Dostępność strony" znajdujemy deklarację: Kod umieszczony na wszystkich stronach jest weryfikowany pod kątem zgodności ze standardami wytyczonymi przez organizację W3C dla języka XHTML 1.0 Transitional.

Faktycznie, walidator błędów nie zgłasza, przynajmniej na kilku podstronach, które sprawdzałem. Ale za to divitis i classitis prezentuje się okazale, np. na stronie głównej znacznik <p> nie pojawia się ani razu. Za to <div> mamy 27 razy, i podobną liczbę wystąpień atrybutów id oraz class.

Miałbym osobiście silne poczucie obciachu oferując doradztwo i analizę stron, podczas, gdy moja własna nie byłaby perfekcyjna pod względem kodu źródłowego. Ale to może ja jestem dziwny (truskawki posypuję cukrem).

2 komentarze

World Wide Web Consortium świętuje dziesięciolecie Kaskadowych Arkuszy Stylów. Powstała nawet w związku z tym rocznicowa strona.

1 komentarz

Na swojej stronie dodałem nowy dział Narzędzia, a w nim na początek Kalkulator Box Model. Kalkulator oblicza różne kombinacje własności CSS width, height, padding, border oraz margin. Przydatne do obliczania wartości koniecznych dla Internet Explorer 5.x (Windows).

Formularz przyjmuje tylko liczby naturalne. Na razie wersja beta - proszę o uwagi.

Dodaj komentarz

Ten artykuł stanowi pewnego rodzaju kontynuację tekstu o własności vertical-align.

Własność vertical-align kaskadowych arkuszy stylów (CSS) opisaliśmy w artykule Kłopotliwe vertical-align. Ten artykuł opisuje własność text-align, a także sposób wyrównania w poziomie względem rodzica elementów blokowych. Warto zaznaczyć, że te dwie własności nie stanowią pary, tak jak np. width oraz height. Zachowują się inaczej. Własność vertical-align ustawia element liniowy względem linii, w której jest zawarty, zaś text-align wyrównuje liniową zawartość bloku względem jego prawej i lewej krawędzi, a jest przypisywana elementom blokowym i komórkom tabel.

Zobacz cały tekst Wyrównywanie w poziomie i text-align.

Dodaj komentarz

Jednym z zagadnień CSS, przy którym zawodzi intuicja, jest własność vertical-align. Własność text-align wyrównuje w poziomie zawartość elementu względem środka, lewej lub prawej krawędzi, albo justuje. Można by więc oczekiwać, że vertical-align będzie zachowywała się podobnie w pionie. I dzieje się tak w przypadku komórek tabeli. Ale w pozostałych przypadkach spotka nas zaskoczenie - przy użyciu tej zawartości nie uda się ustawić zawartości w połowie wysokości...

Cały artykuł "Kłopotliwe vertical-align" można przeczytać na mojej stronie. Tutaj proszę o ewentualne komentarze.

2 komentarze

Poniżej lista galerii zbierających strony stworzone (zasadniczo) przy użyciu CSS i XHTML.

Ostatnia aktualizacja listy: 2009-01-28

1. Andy Budd - Well Designed CSS Sites. Blog - tylko linki do stron z krótkimi opisami.
2. Best Web Gallery. Formularz zgłoszeniowy. RSS. Dużo stron z Flashem. Kategorie. Linki do artykułów. Komentarze. Kilkaset stron, od lipca 2006.
3. CSS Allstar. RSS. Formularz zgłoszeniowy. Komentowanie. Ocenianie. Kilkadziesiąt stron.
4. CSS Beauty. Rozbudowana galeria. Aktualności. Tagi. Kilka kategorii stron. Komentowanie. Formularz zgłoszeniowy. Forum. Wyszukiwarka. Kilkadziesiąt stron miesięcznie (od maja 2004). Planowany konkurs z nagrodami na projektowanie layoutu.
5. CSS Blast. Strona po rosyjsku. Kategorie stron. Komentarze.
6. CSS Bloom. Skupia się na blogach i portfoliach. Dość duże, podłużne zrzuty. Formularz zgłoszeniowy. Tagi (wg koloru strony). Kategorie. Aktualności. Głosowanie. Komentarze. Listy najczęściej komentowanych, najlepiej ocenianych. RSS. Wyszukiwarka. 100-200 stron miesięcznie (od czerwca 2006).
7. CSS Collection. Pionowe zrzuty stron. RSS. Formularz zgłoszeniowy. Kategorie (niewiele), sortowanie alfabetyczne. Wyszukiwarka. Ok. 2000 stron.
8. CSS Container. Formularz zgłoszeniowy. Ocenianie. Komentowanie.
9. CSS Demo. Po francusku. Dość duże zrzuty fragmentów stron. RSS. Tylko kilka stron miesięcznie.
10. CSS Drive. Rozbudowana witryna. Aktualności. Forum dyskusyjne. Formularz zgłoszeniowy. Rozbudowana wyszukiwarka. Kategorie. Głosowanie. Komentowanie. Poradniki i narzędzia. RSS
11. CSS Elite. Rozbudowana strona. Linki do artykułów i poradników. Kategorie (dość nieliczne). Zgłaszanie stron poprzez maila. Komentarze. Newsletter. RSS. Wyszukiwarka. Kilkadziesiąt stron miesięcznie (od marca 2006)
12. CSS Galaxy. Po francusku. Wyświetlanie dużego zrzutu przy użyciu skryptu Lightbox. Tagi.
13. CSS Galleries. Agregator, zbierający strony z kilkunastu innych galerii. Strony znajdujące się w 2-3 lub 4 i więcej galeriach są wyróżniane. Własny kanał RSS.
14. CSS Heaven. Głosowanie. Formularz zgłoszeniowy. Listy stron najwyżej i najczęściej ocenianych oraz najczęściej odwiedzanych. Linki do najnowszych wpisów na blogach tematycznych.
15. CSS Import. Sortowanie wg kilku kryteriów. Formularz zgłoszeniowy. Głosowanie. Komentarze. RSS. Od kilkudziesięciu do ponad 100 stron miesięcznie (od czerwca 2005).
16. CSS Love. Formularz zgłoszeniowy. Można obejrzeć wszystkie miniaturki jako tagową chmurę - im większy zrzut, tym strona wyżej oceniona. Ok. 100 stron.
17. CSS Mania. Kliknięcie w nazwę strony wyświetla w miejscu miniaturki krótki opis i link do pełnego profilu. Wiele kategorii. Rozbudowany formularz zgłoszeniowy. Głosowanie. Wyszukiwarka. Konkurs na najlepsze strony (z nagrodami). RSS. Ok. 4000 stron (200-300 miesięcznie), od marca 2004.
18. CSS Princess. Galeria nastawiona na strony tworzone z udziałem kobiet. Tagi. Kategorie. Lightbox użyty do wyświetlania większych zrzutów. Komentowanie. Ocenianie. Formularz zgłoszeniowy.
19. CSS Reboot Spring 2006. Brak ustandaryzowanych zrzutów (zapewne pochodzą wprost od zgłaszających). Większość stron ma zrzut przed i po zmianie. Głosowanie. Tagi. Krótkie opisy Komentarze. RSS. Sortowanie wg kilku kryteriów. Wyszukiwarka. Dodawanie stron przez zarejestrowanych użytkowników.
20. CSS Remix. Głosowanie. Komentarze. Dodatkowo strony oznaczane jako: przeprojektowana (redesigning), wybrana przez edytora (Editor's choice). Formularz zgłoszeniowy. Wyszukiwarka. RSS. Kilkadziesiąt - sto kilkadziesiąt stron miesięcznie (od marca 2006).
21. CSS smooth operator. Kilka kategorii. Formularz zgłoszeniowy. RSS. Komentowanie. Wyszukiwarka. RSS. Kilka - kilkadziesiąt stron miesięcznie.
22. CSS Vault - Głosowanie. Komentarze. Formularz zgłoszeniowy. Wyszukiwarka. RSS. Linki do artykułów. Do kilkudziesięciu stron miesięcznie (od listopada 2003).
23. CSS Thesis. Przeglądanie wg liczby wejść. Formularz zgłoszeniowy. RSS. Ok. 250 stron.
24. CSS Tux. Formularz zgłoszeniowy, komentowanie, ocenianie, tracbacki. Linki do zasobów. Na miniaturce część strony. Od września 2006
25. CWDer. Kilkaset stron. Licznik wejść na poszczególne strony.
26. Cubicads. Tylko zrzuty kilkudziesięciu stron. Formularz zgłoszeniowy.
27. Darkeye - Web Design Showcase. Formularz zgłoszeniowy. Ocenianie. Komentowanie. Opisy stron. Słowa kluczowe. Wyszukiwarka. Rozbudowane wyszukiwanie wg kolorystyki - do każdej strony przypisane jest do 6 barw, które można wybierać w wyszukiwarce. RSS. Użytkownik może utworzyć własną galerię, gdzie będzie dodawał zgłaszane strony.
28. Design Shack. Aktualności. Kliknięcie w miniaturkę wyświetla bez przeładowania strony szczegółowe informacje. Przeglądanie wg kategorii, kolorów. Zgłaszanie stron mailem. Ocena strony nadawana przez autorów (chyba- bo nie znalazłem żadnego formularza do głosowania). RSS.
29. Design Snack. Formularz zgłoszeniowy. Komentarze. Kategorie. RSS.
30. Gallerize. Agregator, zbierający wpisy z kilku galerii. Tylko linki tekstowe.
31. Fine Websites. Po 2 duże zrzuty każdej strony. Formularz zgłoszeniowy. Wyszukiwarka. Kategorie. Komentarze. Głosowanie (w tym na stronę miesiąca). RSS. Kilka-kilkanaście stron miesięcznie. (od czerwca 2006).
32. Horizontal Way. Galeria stron przewijanych w poziomie (kilkadziesiąt pozycji). Formularz zgłoszeniowy. RSS
33. Inspiration King. Krótkie opisy stron. Komentarze. Kategorie (nieliczne). Formularz zgłoszeniowy. Aktualności. RSS. Kilka stron miesięcznie (od kwietnia 2006).
34. Light On Dark. Gromadzi strony z jasnym tekstem na ciemnym tle. Aktualności. Linki do zasobów. Formularz zgłoszeniowy. Tagi. Komentarze. RSS.
35. Liquid Designs. Zbiera strony, których layout dopasowuje się do wymiarów okna przeglądarki. Aktualności. Linki. Komentarze. RSS. Formularz zgłoszeniowy. Wyszukiwarka. Kilka-kilkadziesiąt stron miesięcznie (od listopada 2005).
36. Lovely Blogs. Strona zbiera blogi. Głosowanie. Komentarze. Tagi. Formularz zgłoszeniowy. Krótkie opisy. Linki. Aktualności. RSS. Lista najwyżej ocenianych.
37. Most Inspired. Strony, aktualności i tutoriale agregowane z innych witryn.
38. Piepmatzel. Tylko kwadratowe miniaturki z możliwością sortowania. 128 stron.
39. Screenspire. Zawiera też strony oparte na tabelach. Formularz zgłoszeniowy. RSS
40. Showcase GR. Strony z Grecji, ale witryna po angielsku. RSS. Linki. Komentarze. Kilka-kilkadziesiąt stron miesięcznie (od stycznia 2006).
41. Stylegala. Rozbudowane kilkuakapitowe opisy stron. Linki do artykułów i tutoriali. Aktualności. Głosowanie na strony. Forum dyskusyjne. Podstawowy podział - na miesiące. Miniaturka fragmentem strony. Rzadkie aktualizacje (zwykle od jednej do kilku stron miesięcznie).
42. Screenalicious. Ponad 3000 stron. Komentowanie. Ocenianie. Formularz zgłoszeniowy. RSS
43. Screenfluent. Ponad 5000 stron. Formularz zgłoszeniowy. RSS
44. The Daily Slurp. Kanciate i niewygładzone. Po najechaniu na mały zrzut pojawia się przy kursorze większa wersja, ale często nie mieści się w oknie przeglądarki, a do tego wystarczy poruszać myszką, żeby zrzut skakał nad i pod kursorem. Dużo nowych stron, nawet kilkadziesiąt dziennie. Kanały RSS. Formularz zgłoszeniowy. Dostępny też skrypt pozwalający zgłaszać oglądaną właśnie w przeglądarce stronę.
45. Unmatched Style - Tagi. Aktualności. Opisy. Głosowanie (decyduje czy strona znajdzie się w głównej galerii). Komentarze. RSS. Wyszukiwarka. Formularz zgłoszeniowy.
46. uCSS.pl Showcase Galeria Inspiracji CSS xHTML - Polska strona w dwóch wersjach językowych, podział na kategorie, wyszukiwarka, formularz zgłoszeniowy.
47. W3C Sites. Rozbudowany formularz zgłoszeniowy. Wyszukiwarka. RSS. Przy miniaturkach pojawiają się informacje, z jakich technologii strona korzysta i czy się waliduje. Ponad 3,5 tysiąca stron. Konta użytkowników. Podział na kraje.
48. Web Creme. Dość duże, podłużne zrzuty. Kilka stron dziennie. Kategorie kolorystyczne. RSS. Zgłaszanie stron mailem.
49. Webdesign Archive. Kilkadziesiąt-kilkaset stron miesięcznie. Komentowanie. Ocenianie. tagi. Formularz zgłoszeniowy. Linki do stron z kilku innych galerii. RSS.
50. webdesignbook. Najlepsze strony mają się znaleźć w planowanej książce. Formularz zgłoszeniowy. Forum. Aktualności. RSS.
51. WithStyle. Po francusku. Tagi. Komentarze. Forum. RSS.
52. Web Standards Awards. 100 nagrodzonych stron od lutego 2004 do stycznia 2006. Nowe strony nie są już dodawane.

Podsumowanie

W spisie nie ma witryny CSS Zen Garden oraz podobnych, ponieważ lista skupia się na galeriach zbierających inne strony istniejące w sieci.

Moje osobiste oczekiwania wobec galerii stron są właściwie tylko trzy:

1. Miniaturki całych stron - wystarcza jeden rzut oka, by zorientować się jak mniej więcej wygląda strona. Nie przepadam więc za galeriami, gdzie jest tylko fragment strony (logo, nagłówek itp.). Wygląda ładnie, ale trzeba wejść na stronę, żeby stwierdzić, czy w ogóle mnie to interesuje.
2. Kategorie i tagi - im więcej oraz im bardziej zróżnicowane, tym lepiej. Taką rolę spełniają też galerie wyspecjalizowane (np. zbierające strony w ciemnej stylistyce albo blogi).
3. RSS - najlepiej z miniaturką strony.

Pozostałe funkcje, jak głosowanie, komentarze, opisy stron itp., interesują mnie w mniejszym stopniu.

Galerii stron CSS jest coraz więcej. Duża część z nich niczym się nie wyróżnia i zawiera strony, które można spotkać również w innych galeriach. W praktyce najczęściej odwiedzam dwa rodzaje galerii.

Pierwszy typ to witryny zawierające dużą liczbę stron, dodatkowo z przypisanymi kategoriami i tagami, oraz miniaturkami pokazującymi całą stronę, a nie tylko wycinek. Lubię też, gdy przy zrzutach jest niewiele dodatkowych informacji - można szybko przejrzeć dużą liczbę miniaturek, a wejść tylko w te, które zainteresują. Kilka stron spełniących przynajmniej częśc tych kryteriów:

• CSS Drive
• CSS Elite
• CSS Mania
• The Daily Slurp
• Darkeye - Web Design Showcase
• W3C Sites

Druga grupa to witryny wyspecjalizowane w zbieraniu stron wg jakiegoś kryterium, np.:

• Horizontal Way - strony przewijane w poziomie.
• Light On Dark - jasny tekst na ciemnym tle.
• Liquid Designs - strony, których layout dopasowuje się do okna przeglądarki

Idealny dla mnie kanał RSS zawiera:

• miniaturkę strony
• link do prezentowanej strony
• link do ewentualnego opisu w galerii

11 komentarzy

Strony zawierające pokaźną liczbę linków do zasobów CSS/XHTML:

• CSS Help Pile Directory
• Soxiam - CSS Tools
• design.Principles
• Web Design References: Cascading Style Sheets
• CSS, Accessibility and Standards Links
• Remote Synthesis: 50+ Useful CSS Resources
• CSS Creator: Useful CSS Links
• Veerle's blog - Interesting Links
• SimpleBits | Web Standards Link Bonanza
• Web Developer's Handbook
• CSSElite CSS Gallery » Resources
• CSS Vault » The Web's CSS Site
• Web Standards Group - Resources
• Resources | Stylegala
• mezzoblue  §  css Zen Garden — Resource Guide

1 komentarz

Divitis to znana choroba objawiająca się nadużywaniem w kodzie (X)HTML znacznika div zamiast znaczników strukturalnych typu h1, h2, p. Classitis zaś to schorzenie polegające na nadmiernym stosowniu w kodzie artybutu class tam, gdzie można sprawę załatwić kaskadowością i dziedziczeniem CSS. Zaglądając w źródło pewnej strony pomyślałem z początku, że jest to klasyczne połączenie tych dwóch przypadłości. Po chwili jednak spostrzegłem, że jest to przypadek szczególny:

<div id="tytul">...</div>
<div id="tytul2">...</div>
<p id="wciecie">...</p>
<p id="wciecie">...</p>
<p id="wciecie">...</p>
<p id="wciecie">...</p>
<p id="wciecie">...</p>
<p id="wciecie">...</p>

<div id="tytul">...</div>
<div id="tytul2">...</div>
<p id="wciecie">...</p>
...

5 komentarzy