Idea

Pomysł w prosty sposób wykorzystuje nowe selektory CSS3. Dołączenie do strony stylów, które pozwalają na łatwe wykrycie pustych elementów, znaczników z brakującymi lub niewłaściwymi atrybutami jest teraz banalne.

Poprzez kilka reguł CSS dowiesz się, które obrazki mają pusty atrybut alt lub nie mają go wcale. Analogicznie z tabelami i pustymi komórkami albo podsumowaniami zawartości z atrybutów summary.

Sposób na znalezienie w kodzie przestarzałych znaczników typu font, center lub innych rzeczy, które często umykają naszej uwadze. Najlepsze z tego wszystkiego jest to, że w podobny sposób stworzysz style ukierunkowane na twoje kryteria.

Podobnie jak dowolnie tworzysz arkusze stylów resetujące domyślne style przeglądarek, tak teraz stwórz zestaw pomocny przy twojej pracy. Style diagnostic.css przedstawione przez Erica znajdziesz w przykładach na jego stronie internetowej.

Całość sztuczki polega na odpowiednim przygotowaniu tła dla oczekiwanego efektu. Element zawierający formatowany tekst pozycjonujemy relacyjnie, a wewnątrz niego umieszczamy dodatkowy znacznik span. Wszystko po to, aby dodatkowy element pozycjonowany absolutnie przechowywał tło.

Download · Live Demo

Połączenie tych dwóch technik umożliwia uzyskanie nałożenia tła na tekście i połączenie go z kolorem bazowym tła. Uzyskanie wspomnianego efektu wymaga dodatkowych elementów w strukturze dokumentu. Jest to konieczne, ponieważ tekst zawsze wyświetlany na tle danego elementu.

Innym sposobem osiągnięcia przezroczystego tekstu w kolorze tła jest ustawienie odpowiednich właściwości dla elementu: background: url(kuba.jpg); i color: transparent;. Niestety samo to nie wystarczy, ponieważ zmiana sposobu generowania tekstu i tła wymaga jeszcze ustawienia jednej właściwości. A dokładnie reguły background-clip: text; ze specyfikacji CSS3.

Projektowanie serwisów WWW. Standardy sieciowe – wydanie III zostało ponownie przeredagowane, tym razem już nie przez Zeldmana, a Ethana Marcotta. Współautor książki jest redaktorem znanej projektantom strony A List Apart. Współpracował również z New York Magazine i W3C. Również przy pracy nad omawianą książką wykazał się prawdziwym profesjonalizmem, jeśli chodzi o kwestie standardów sieciowych.

Kilkanaście rozdziałów dotyczących zasad tworzenia strukturalnego i semantycznego kodu, a także realizacji nowoczesnych układów, stworzonych w oparciu o arkusze stylów kaskadowych. Dodatkowo prezentacja języków hipertekstowych oraz metody pisania nieinwazyjnego kodu JavaScript. Kolejne rozdziały prezentują sposoby tworzenia i manipulacji elementami DOM, sekrety użyteczności interfejsów użytkownika oraz dostępności stron internetowych.

Dzięki tej książce nauczysz się prawidłowego stosowania standardów sieciowych. Tworzenie nowoczesnych i funkcjonalnych witryn staje się jeszcze łatwiejsze po przeczytaniu porad doświadczonych specjalistów. Optymalizacja kodu, zwiększenie zasięgu i niskie koszty utrzymania stron to kluczowe cele jakie pragnie osiągnąć klient. Nowe, aktualniejsze wydanie tej książki pozwoli na usprawnienie procesu projektowania i wdrożenia witryny internetowej w zależności o stawianych wymagań.

Autorzy przedstawili kilka projektów, w których pokazali przydatne sztuczki i gotowe rozwiązania. Podczas pracy projektanta istotne są konsekwentne poszukiwania inspiracji i umiejętność elastycznego realizowania projektów. Dodatkowo dowiesz się sporo na temat przyszłości standardów sieciowych, w tym HTML5 oraz CSS3. Osoby o małym doświadczeniu poznają zasady tworzenia właściwej struktury, prezentacji i zachowania stron internetowych. Dzięki tej książce poradzisz sobie z najczęstszymi problemami, jakie spotykają projektantów stron internetowych.

OSTATECZNA OCENA: 5/5

• Autorzy: Zeffrey Zeldman, Ethan Marcotte
• Tytuł oryginału: Designing with Web Standards (3rd Edition)
• Tłumaczenie: Piotr Rajca
• ISBN: 978-83-246-2658-8
• Format: 158×235, 448 stron
• Data wydania: 12/2010 (Helion)

Aktualna tematyka bloga Rogera to nadal technologie internetowe, jednak częste wpisy są głównie krótki notkami. Mimo tego wkład autora w rozwój internetu pozostaje nieoceniony. Mało, które strony przez lata utrzymują wysoki poziom prezentowanych treści.

Tworzenie aplikacji internetowych to skomplikowany, czasochłonny i nie zawsze opłacalny proces.

Dlaczego wielu programistów pisze własne aplikacje, frameworki, biblioteki i inne rozwiązania?

Po prostu wychodzą z przekonania, że sami zrobią to lepiej. Czasami zdarza się, że dzięki temu podejściu rodzą się prawdziwe perełki. Często wielkie molochy tracą klientów, użytkownicy znajdują produkty skrojone na miarę ich potrzeb i każdy może być zadowolony.

Pozostałe przypadki to zmarnowany potencjał, czas i zasoby, bo projekt umiera, zanim rozpoczął żywot. Dopóki nie rozpoczniesz tworzenia nowej jakości nie będziesz, miał pewności co do swojej wartości.

Właściwy wpis

Często zastanawia mnie kształt moich wypowiedzi formułowanych w stanie, jak najbardziej trzeźwym. Jestem przecież człowiek technicznych, któremu nie obce powinno być prasowanie, ale już bogaty język podczas wszelkich wypowiedzi, co najmniej zadziwia.

Człowiek uczy się przez lata, choć nie zawsze ma na to czas i chęci. Najlepszym przykładem moich osiągnięć jest SquareZone. Prosty, ale funkcjonalny serwis, który przystępnie oferuje informacje użytkownikom. Tym razem przyszedł czas na nowy przykład.

MyBlog – nazwa kodowa powinna być bardziej tajemnicza, ale projekt jest w zbyt wczesnym stadium, mimo wielomiesięcznej pracy przy jego tworzeniu. Otóż wspomniana aplikacja oferuje lub będzie oferowała w przyszłości funkcjonalności znane z popularnych systemów blogowych.

Architektura systemu po części czerpała ze znanego WordPressa, jednak największym atutem omawianej aplikacji jest wydajność i zgodność ze standardami. Wszystkie testy i szczegóły zostaną przedstawione wkrótce. Niedługo postaram się przedstawić kolejne funkcjonalności oraz założenia rozwojowe.

Obecnie nie mam pewności czy kod źródłowy zostanie udostępniony publicznie, jednak wszelkie opinie na temat działania lub architektury są mile widziane.

Wersja demonstracyjna myBlogdostępna jest w sieci.

CSS i Ajax. Strony WWW zgodne ze standardami sieciowymi W3C to lekka propozycja dla osób związanych z tworzeniem i projektowaniem stron internetowych. Fanatyczni koderzy, który dzień bez kilku linii kodu uważają za stracony nie znajdą w tej książce samych przykładów. Nietypową koncepcję rozważań na temat standardów sieciowych czyta się bardzo sprawnie, jednak wielostronicowe rozwodzenie się nad pojedynczą myślą po pewnym czasie zdecydowanie męczy.

Autorzy dokładnie opisują swoją pracę przy kolejnych projektach. Rozprawiają o napotkanych problemach, własnych pomysłach, sugestiach przełożonych, aż nieszczęśliwe przypadki losowe. Kolejne rozdziały pokazują jak wykorzystuje się standardy sieciowe, w szczególności arkusze stylów kaskadowych i języki hipertekstowe.

Tytuł książki sugeruje połączenie CSS oraz AJAX. Jednak niewiele informacji znajdziemy w książce na temat asynchronicznych żądań. Więcej poczytamy o systemach zarządzania treścią, programowaniu aplikacji sieciowych, czy sposobach zwiększenia wydajności witryn internetowych. Jednak w dalszym ciągu będą to ogólniki sugerujące jedynie kierunek naszych dalszych poszukiwań.

OSTATECZNA OCENA: 3/5

• Autorzy: Schmitt Christopher , Blessing Kimberly , Cherny Rob , Evans Meryl K. , Lawver Kevin , Trammell Mark

David Schultz, Craig Cook

• Tytuł oryginału: Adapting to Web Standards: CSS and Ajax for Big Sites (Voices That Matter)
• Tłumaczenie: Robert Górczyński
• ISBN: 978-83-246-1755-5
• Format: 168×237, 304 strony
• Data wydania: 11/2008 (Helion)

Smashing Magazine to inspiracje i porady głównie dla grafików i projektantów. Jednak od czasu to czasu pojawiają się artykuły dla programistów. Ciekawe techniki dotyczące CSS, nowoczesne podejście do JavaScript, w tym dedykowane wtyczki dla jQuery. Czasami tworzone są teksty dotyczące WordPressa, albo artykuły o programowaniu w PHP. Niestety teksty dotyczące programowania należy traktować ostrożnie.

Autorzy Smashing Magazine aktualizują swój magazyn praktycznie codziennie, zachowując przy tym od początku równy, wysoki poziom treści. Wyznacznikiem wartości tego magazynu niech będą setki tysięcy użytkowników RSS albo wydana przez autorów książka Smashing Book.

“HTML, XHTML i CSS. Nowoczesne tworzenie stron WWW” to kompletny podręcznik dotyczący tworzenia stron internetowych oraz specyfikacja najpopularniejszych technologii internetowych. Autorzy skupili się na wyjaśnieniu różnic w strukturze dokumentów HTML i XHTML, a także szczegółowo omówili ich specyfikacje. Książka dokładnie pokazuje sposób definiowania metadanych i wstawiania poszczególnych elementów na stronie. Przykłady zawarte w kolejnych rozdziałach prezentują budowanie i używanie tabel, formularzy, obrazów oraz pozostałych najpopularniejszych znaczników.

Autorzy szczególny nacisk położyli na zrozumienie standardów sieciowych, których zrozumienie jest podstawą do prawidłowego tworzenia strona internetowych. Idea rozdzielenia części prezentacyjnej i treści pokazuje zalety nowoczesnego podejścia, a dodatkowe rozdziały dopełniają całości książki. Poza przykładami dotyczącymi HTML/XHTML, autorzy omawiają JavaScript oraz CSS. Osoby początkujące łatwo zrozumieją wspomniane technologie na przykładowym kodzie. Pozostali mają do dyspozycji aktualne specyfikacje omawianych technologii.

Książka jest bardzo dobrym wprowadzeniem dla osób, które nie zajmowały się nigdy tworzeniem stron internetowych lub robiły to dawno temu. Porzucenie przestarzałych technik jest konieczne. Standardy sieciowe wyznaczają właściwy kurs rozwoju internetu, dlatego wszyscy powinni nim podążać.

OSTATECZNA OCENA: 4.5/5

• Autorzy: David Schultz, Craig Cook
• Tytuł oryginału: Beginning HTML with CSS and XHTML: Modern Guide and Reference
• Tłumaczenie: Rafał Jońca
• ISBN: 978-83-246-1498-1
• Format: 158×235, 384 strony
• Data wydania: 05/2008 (Helion)

Przykłady stylizacji tabel zostały w 2006 roku zebrane przez niezawodny Smashing Magazine. Czas w sieci upływa bardzo szybko, wiele z tych przykładów, jeśli nie wszystkie to przykłady przestarzałe. Jednak ten sam Smashing Magazine w nowszym artykule prezentuje naprawdę atrakcyjne przykłady. Niestety wygląd to nie wszystko.

Problem

Wielokrotnie zdarza się, że za ciekawym wyglądem tabeli kryje się nadmierna liczba klas, które dotyczą poszczególnych elementów. Podstawowa struktura tabeli składa się z trzech znaczników <table>, <tr> oraz <td>, które tworzą odpowiedni element tabeli, wiersze i poszczególne komórki.

Taka struktura nie pozwala na zbyt wiele, ponieważ odniesienie się do elementów poprzez selektory kontekstu jest wręcz niemożliwa. Jedyne dostępne rozwiązanie to wykorzystanie atrybutów <class> i selektorów klas.

Kolorowanie wierszy i kolumn wymaga użycia atrybutu <class> dla każdej komórki. Kolorowanie samych wierszy uzyskamy poprzez atrybuty<class> dla poszczególnych znaczników <tr>. Poniższe style określają kolor tła dla nieparzystego i parzystego wiersza oraz nieparzystej i parzystej kolumny.

.odd-row {
	background: #eee;
}
.even-row {
	background: #ccc;
}
.odd-column {
	background: #fcc;
}
.even-column {
	background: #f44;
}

Zamierzony efekt zostanie osiągnięty, ale kod naszej tabeli stanie się mniej czytelny, zarówno dla wyszukiwarek, jak i dla ludzie. Istnieje dobra alternatywa dla powyższego rozwiązania.

Rozwiązanie pośrednie

Konieczne zmiany dotyczą kodu tabeli. Struktura tabeli udostępnia elementy grupujące wiersze oraz kolumny. Znaczniki <thead>, <tbody> oraz <tfoot> grupują odpowiednio wiersze nagłówka, danych i stopki.

Analogiczne przeznaczenie ma znacznik <colgroup>, który obejmuje poszczególne kolumny tabeli, zdefiniowane przez znaczniki <col>.

Ważne jest zrozumienie kolejności wyświetlania warstw, które tworzą strukturę tabeli. Szczegółowy artykuł na ten temat napisał Roger Johansson.

Zmodyfikowana struktura pozwala na użycie analogicznych stylów w arkuszu, jednak zamiast selektorów klasy korzystamy z selektorów kontekstu.

Nowoczesne podejście

Selektory potomka oferowane przez CSS3 umożliwiają jeszcze dokładniejsze odwołanie się do elementów w strukturze dokumentu. Niestety Internet Explorer nie obsługuje selektora potomka, co jest sporym mankamentem tego rozwiązania.

col:nth-child(odd) {
	background: #faa;
}
col:nth-child(even) {
	background: #f44;
}
tbody tr:nth-child(odd) {
	background: transparent url(img/grey-10-transparent.png) 0 0 repeat;
}
tbody tr:nth-child(even) {
	background: transparent url(img/grey-50-transparent.png) 0 0 repeat;
}

Właściwe dobranie kolorów tła oraz obrazów pozwala na uzyskanie właściwego kolorowania wierszy i kolumn. Wygląd tabeli jest dokładnie taki, jak oczekiwaliśmy. Dodatkowa zaleta tego podejścia to struktura tabeli wolna od zbędnych atrybutów <class>.

Podsumowanie

Przedstawione przykłady różnią się sposobem w jaki uzyskano efekt końcowy. Czytelniejsza struktura i lżejszy kod to wielka zaleta. Podobnych rozwiązań istnieje wiele, jednak nie stosuje się ich powszechnie z powodu braku wsparcia po stronie Internet Explorera.

“CSS według Erica Meyera. Kolejna odsłona” to kontynuacja pierwszej książki Erica Meyera na temat wykorzystania technologii CSS. Autor opisał w niej podstawowe właściwości stylów, jak również sposób ich użycia w kodzie strony. Ważne jest, aby konstruować semantyczną strukturę dokumentu, ponieważ nawet z wyłączoną obsługą CSS nasza strona będzie wyglądać przyzwoicie. Jeżeli zaś użyjemy stylów to mamy pełen dostęp do warstwy prezentacyjnej.

Przykłady przedstawione w książce to dalszym ciągu użyteczne i często spotykane elementy. Mimo dokładnie opisanych czynności i sposobu postępowania, swobodnie możemy zmodyfikować podany CSS, aby dostosować go do własnych potrzeb. Jeżeli chcemy uczynić nasze aplikacje internetowe lepszymi to pierwszą rzeczą jest zastosowanie arkuszy stylów. Nawet korzystanie z CSS 2.1 daje programiści wszelkie środki, aby semantycznie tworzyć strony WWW. Używanie tabel do budowania layoutu, stosowanie obrazków imitujących odstępy to przestarzałe techniki. Nowoczesne aplikacje webowe muszą korzystać z właściwych technologii, a jedną z nich jest właśnie CSS.

Książka bardzo dobrze sprawdzi się jako podręcznik nauki CSS. Osoby, które chcą zrozumieć zasady działania CSS, powinny uczyć się od najlepszych. Eric Meyer jest uznanym autorytetem w branży, ponieważ sam jest współtwórcą tej technologii. Potrafi bardzo jasno przedstawić wszystkie zawiłości związane z CSS, jak również pokazać sposób rozwiązania napotykanych problemów.

OCENA OSTATECZNA: 4/5

OSTATECZNA OCENA: 4/5

• Autor: Eric A. Meyer
• Tytuł oryginału: More Eric Meyer on CSS
• Tłumaczenie: Wojciech Moch
• ISBN: 83-7361-901-1
• Format: 205×253, 272 stron
• Data wydania: 07/2005 (Helion)