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.

Sztuka tworzenia wydajnych i czytelnych arkuszy stylów to kwestia doświadczenia, ale i odpowiedniego podejścia. Według filozofii zorientowanej obiektowo reguły przygotowywane są pod kątem ponownego wykorzystania. Z tego względu nie powinny być ograniczane poprzez selektory kontekstu czy potomka. Jednak czy grupowanie wspólnych właściwości w klasach jest czymś nadzwyczajnym? Przecież to jedna z podstawowych zasad obowiązujących w CSS.

Wprowadzenie

Louis twierdzi, że separowanie wspólnych reguł, takich jak kolory, marginesy, czcionki i wiele innych daje zysk w sytuacji, gdy powtarzają się one w kontekście innych elementów na stronie. Zgadzam się, z tym stwierdzeniem choć określanie atrybutu class wielu elementom bywa zbyteczne. Teraz pojawia się kwestia wydajności i przejrzystości. Czy lepszy jest krótszy kod CSS (jeśli to w ogóle możliwe) czy jednak przejrzysta struktura dokumentu? Oba warianty mają swoje zalety i osobiście obstawałem przy drugim wyborze.

Niestety przy komercyjnych projektach struktura dokumentu i arkusze stylów rozrastają się równie szybko. Istotne jest rozsądne wyważenie podziału między obiema warstwami. Podejście zorientowane obiektowo przynosi korzyści przy naprawdę złożonych projektach. Nicole Sullivan jako pierwsza, która zaproponowała taki sposób tworzenia arkuszy stylów.

Globalne spojrzenie

Idąc dalej, tym tropem, uświadamiamy sobie jak wysokie wymagania wiążą się z pisaniem wydajnych stylów kaskadowych przez projektantów i koderów. Kod CSS jest zbyt wrażliwy na zmiany osób trzecich, szczególnie mało doświadczonych. Każda osoba wplata w pisane arkusze swoje wieloletnie nawyki, utarte schematy i osobisty tok rozumowania. Wówczas nasze rozbudowane style są praktycznie nieprzydatne dla innych osób.

Twórcy siatek CSS zrozumieli to wiele lat temu i stworzyli uniwersalne style dla układów wielokolumnowych. Ten kierunek jest zdecydowanie dobry, a zapoczątkował go 960 Grid System. Czy przeniesienie podobnego rozumowania na grunt pozostałych właściwości elementów stron internetowych jest możliwe?

Dobre praktyki

1. Stwórz reguły, które wykorzystasz ponownie wykorzystasz.
2. Niech twoje style będą semantyczne i jednolite.
3. Niech moduły będą przezroczyste od wewnątrz.
4. Bądź elastyczny.
5. Pokochaj siatki.
6. Ograniczaj selektory.
7. Podziel strukturę i wygląd.
8. Podziel kontenery i treść.
9. Niech elementy struktury korzystają z przygotowanych klas.
10. Używaj resetowania i czcionek ze stylów YUI.

Powyższe punkty zawarte w prezentacji Nicole są jasne, a przynajmniej w większości są jasne. Zdecydowanie zgadzam się z niektórymi, z paroma mniej, a kilku nie rozumiem. Podział reguł CSS na uniwersalne moduły skutkuje budowaniem wspólnego wyglądu elementów z mniejszych składników. Dzięki temu kolejne podstrony, właściwie nie potrzebują dodatkowych właściwości. Wspólny wygląd dla nagłówków, list i innych semantycznych elementów powinien być jednolity w obrębie całej strony, a zatem niech zostanie zdefiniowany w jednym miejscu. Rozdzielenie struktury i wyglądu stylów.

Podczas tworzenia stylów kaskadowych, częściej kieruje się rozsądkiem, niż emocjami. Z tego powodu nigdy nie używałem siatek. Mimo tego sformułowanie “Siatki określają szerokość, a zawartość wysokość elementów” jest prawdziwe. Rzeczywiście reguły typu .example {...} są bardziej użyteczne niż div.example {...}. Ale dlaczego wskazane jest korzystanie z gotowych stylów YUI? Czyżby były aż tak genialne?

Możliwe pułapki

1. Style zależne od lokalizacji.
2. Unikaj przypisywania klas do konkretnych elementów.
3. Zapomnij o identyfikatorach dla stylów wewnątrz treści.
4. Unikaj cieni i zaokrąglonych rogów dla nieregularnych teł
5. Nie buduj map z wszystkimi obrazami.
6. Unikaj wyrównania w pionie.
7. Tekst jako tekst, a nie obraz.
8. Nadmiarowość.
9. Unikaj przedwczesnej optymalizacji.

Jeśli określone style są mocno zbliżone do siebie w obrębie danej strony to są niepraktyczne również w całym arkuszu stylów. Zdecyduj się na jednej wariant i stosuj go konsekwentnie. Niech jednolite reguły określają wygląd tych samych elementów. Nadpisywanie kolejnych właściwości w zależności o przodka elementu lub innych kryteriów jest kosztowne. Wówczas elementy zachowują się przypadkowo. Połączenie identycznych wspólnych reguł w różnych wariantach pozwala na szerokie zastosowanie.

Podsumowanie

Część z wymienionych punktów pokrywa się lub wzajemnie wyklucza w porównaniu z listą dobrych praktyk. Tak czy inaczej, wszystkie zalecenia traktujmy jako sugestie podczas procesu projektowania i tworzenia stylów kaskadowych. Całościowy zarys koncepcji jest nieco ogólny, a stosowanie poszczególnych wytycznych mocno uzależnione od samodyscypliny kodera.

Wszyscy wiemy, że CSS ma pewne braki, a internet rozwija się niezmiernie szybko. Jednak pisanie wydajnych arkuszy nie stanie się łatwiejsze wraz ze wsparciem CSS3 przez przeglądarki. Doświadczenie i sprawdzone schematy wciąż są ważne, co nie zwalnia nas z poszukiwania lepszych i optymalnych rozwiązań.

Przy zwykłym menu nawigacyjnym, kolejne elementy mają określoną szerokość przez co szerokości między nimi są różne. A co jeśli łącza naszej nawigacji mają różną długość, a chcemy, aby były wyświetlane równomiernie? Istnieje pewne tego problemu.

Download · Live Demo

Pomysł nie jest wcale nowy, bo spotkałem się z nim już kilka lat temu podczas pracy w Onecie. Idea rozwiązania jest bardzo prosta, jeśli wszystkie elementy nawigacyjne potraktujemy jak elementy liniowe. Takie elementy zachowują się jak tekst, czyli podlegają wyrównaniu. Poniżej znajduję się przykładowa struktura naszego menu nawigacyjnego.

<div id="navigation">
            <a href="#">Home</a> •
            <a href="#">Projects</a> •
            <a href="#">Some Long Text</a> •
            <a href="#">Test me</a> •
            <a href="#">People</a> •
            <a href="#">About</a> •
            <a href="#">Contact</a><span></span>
        </div>

Znaczniki <a> domyślnie wyświetlane liniowo, układają się obok siebie, chyba że kolejny element nie mieści się już w podanej linii, więc przechodzi do nowej linii. Osiągniemy to poprzez dodanie do naszego menu dodatkowego elementu <span> i określeniu jego szerokości na 100%.

#navigation {
    background: #eee;
    text-align: justify;
}
#navigation a {
    display: inline-block;
    white-space: nowrap;
}
#navigation span {
    display: inline-block;
    width: 100%;
}

Oprócz szerokości dodatkowego elementu <span> konieczne jest ustawienie wyrównania dla pojemnika łącz, a także właściwości white-space: nowrap;, aby poszczególne wyrazy linków wielowyrazowe były naturalnie blisko siebie.

Problematyczny w tej sytuacji jest jak zwykle Internet Explorer. Wersje IE6 i IE7 nie wyświetlają prawidłowo elementów liniowo-blokowych dlatego rozwiązanie to nie jest idealne. Z kolei dodatkowy element <span> rozciąga w pionie pojemnik nawigacji, na co do tej pory również nie znalazłem rozwiązania.

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)

Download · Live Demo

Częściowy efekt uzyskamy poprzez określenie minimalnej szerokości elementów listy, a także szerokości w procentach. Poniżej właściwy kod dla listy nieuporządkowanej:

ul li {
    min-width: 320px;
    width: 50%;
}

Podczas zmniejszania okna przeglądarki pojemniki nie będą mniejsze niż 320 pikseli, a dodatkowo przy większych szerokościach wypełnią dokładnie dostępną przestrzeń. Niestety podany przykład ma jedną wielką wadę. Przy skrajnych rozdzielczościach określona procentowa szerokość elementu jest zbyt rozbieżna. Wspomniane 50% to zupełnie różna szerokość przy 1024, a 1920 pikselach.

W tym momencie z pomocą przychodzą media-queries nam. Może nie najświeższy element specyfikacji CSS3, ale prawidłowo obsługiwany w nowoczesnych przeglądarkach. W założeniach media-queries powstały to modyfikacji wyświetlanych treści w zależności od warunków prezentacji. A czym właściwie różni się zmiana okna przeglądarki jak nie zmianą warunków wyświetlania?

Przykładowa składnia pozwala na zastosowanie standardowych reguł CSS w określonym przypadku, akurat jeśli szerokość maksymalna okna przeglądarki na ekranie monitora będzie wynosiła 320 pikseli. Tutaj usuwamy unoszenie warstw i przywracamy domyślną szerokość elementów.

@media screen and (max-width: 320px) {
    div {
        float: none;
        width: auto;
    }
}

W podobny sposób określimy zasady dla różnych urządzeń, a także ich parametrów. Szczegóły techniczne na stronie dokumentacji W3C.

Magia interfejsu. Praktyczne metody projektowania aplikacji internetowych to solidna książka o tworzeniu interfejsów użytkownika dla stron i aplikacji internetowych. Ocenianie książki po rozmiarze czy grubości jest błędem. Niecałe trzysta stron to dokładne opisy codziennych zmagań milionów użytkowników internetu z oprogramowanie, którego używają. Proponowane rozwiązania i poprawki są solidnie argumentowe przez wielotetnie doświadczenie i dążenie do ideału.

Autor opisuje sposoby projektowania formularzy danych, ekranów logowania czy nawigacji. Kolejne rozdziały poruszają kwestie przeglądania wyników wyszukiwania, usprawnienia wyszukiwania i zarządzania informacjami. Tematy takie jak, chmura tagów, przeciągnij i upuść albo poka-yoke również nie są mu obce. Jeśli myślisz, że twoje projekty są poprawne i użyteczne, koniecznie zweryfikuj ten pogląd poprzez lekturę tej książki. Najpweniej znajdziesz cenne uwagi, które przydadzą się w przyszłości.

Książki skupia się w dużym stopniu na krytycznym podejściu do projetowania, ze względu na wiele problemów, które dotykają użytkowników oprogramowania. Jeśli tylko coś robimy w określony sposób, nie oznacza to, że inni postępują identycznie. Ilość problemów jakie rodzi źle wykonany interfejs zaskoczy niejednego doświadczonego programistę lub projektanta.

OSTATECZNA OCENA: 4/5

• Autor: Robert Hoekman jr
• Tytuł oryginału: Adapting to Web Standards: CSS and Ajax for Big Sites (Voices That Matter)
• Tłumaczenie: Paweł Szajkowski
• ISBN: 978-83-246-1943-6
• Format: 168×237, 264 strony
• Data wydania: 01/2010 (Helion)

Prostota przy projektowaniu, najczęściej przenosi się na elegancki i oryginalny wygląd. Dane przedstawione w tabelach mają strukturalny charakter, dlatego nadanie im nowoczesnej formy wcale nie wymaga skomplikowanych zabiegów.

Prezentowany przykład zawiera dane w postaci linków, ciągów znakowych i pól wielokrotnego wyboru. Jednak nic nie stoi na przeszkodzie, aby w tabeli pojawiły się dane w innym formacie, jak ikony lub inne pola formularza.

Struktura tabeli

Tabela składa się z podstawowych znaczników, które nie są modyfikowane poprzez dodatkowe atrybuty id oraz class, chyba, że to konieczne. Nagłówek tabeli zawiera elementy th, które w przypadku większych i skomplikowanych tabel grupuje się przez thead. Analogicznie postępuje się w przypadku td poprzez tbody oraz tfoot.

CSS 3 pozwala na odniesienie się do każdego z elementów tabeli poprzez selektory kontekstu. Wszystkie efekty począwszy od dopełnień komórek poprzez kolorowanie wierszy, a skończywszy obramowaniu tabeli działają w nowoczenych przeglądarkach.

Style kaskadowe

Prezentacja

table {
	background: #cde;
	font-family: sans-serif;
	font-size: 12px;
	border: 1px solid #cde;
	padding: 2px;
	border-spacing: 0 1px;
	text-align: left;
}

Dane prezentowane na ekranie zawsze lepiej czyta się, gdy wyświetlane są w postaci czcionki bezszeryfowej. Szerokie obramowanie tabeli tworzy odpowiednie dopełnienie i kolor tła.

tr:nth-child(odd) td {
	background: #fff;
}
tr:nth-child(even) td {
	background: #eee;
}

Kolorowanie wierszy w tabelach nie musi poprawić czytelności danych czy szybkości odnajdywania konkretnych wartości, ale często wygląda lepiej niż jednolite tło.

th {
	background: #cde;
	padding: 5px;
}
td {
	padding: 5px;
}

Odstęp wewnątrz komórek powinien być wystarczający, aby czytelność danych została zachowana.

td:nth-child(5) {
	text-align: center;
}
a {
	color: #47c;
}

Dodatkowo można wyrównać wybrane kolumny poprzez selektor dziecka. Kolor linków określa selektor elementu.

Podsumowanie

Bardziej skomplikowane efekty w przypadku tabel uzyskamy poprzez zastosowanie półprzezroczystych grafik jako tła poszczególnych elementów. Przedstawione wartości stylów są sugerowane, ale również elastyczne.

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)