15. S
Na dobry początek:
deklaracja
● HTML czy XHTML?
Strict czy transitional
16. S
Na dobry początek:
deklaracja
● HTML czy XHTML?
Strict czy transitional
● Tryby przeglądarek
Quirks i pochodne
17. S
Na dobry początek:
deklaracja
● HTML czy XHTML?
Strict czy transitional
● Tryby przeglądarek
Quirks i pochodne
● Konsekwencje
Nagłówki, kodowanie, encje
18. S Kolejność w kodzie
● Jak być powinno:
– Tytuł strony
– Skrót tego, co jest na stronie (op.)
– Podstawowa treść
– Drugorzędna treść
– Nawigacja i inne
19. S Kolejność w kodzie
● Jak jest najczęściej:
– Nawigacja (linki, linki, linki....)
– Tytuł strony
– Drugorzędna treść w miejscu na treść
główną
– Treść główna
– Drugorzędna treść w postaci paska
bocznego
– Pozostałe informacje niezwiązane ze stroną
39. P Tekst
● Definiowanie rozmiarów
● Definiowanie krojów tekstu
40. P Tekst
● Definiowanie rozmiarów
● Definiowanie krojów tekstu
● Kontrast i zapewnienie czytelności
41. P Grafika
● Nie każdy obrazek nadaje się jako bg
42. P Grafika
● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka
43. P Grafika
● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka
● Nie lekceważ alt= i title=
44. P Grafika
● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka
● Nie lekceważ alt= i title=
● Prawidłowe rollovery
45. P Grafika cd.
● Unikaj punktorów jako list-style-image
46. P Grafika cd.
● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych
47. P Grafika cd.
● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych
● Zapisywanie do weba, formaty
48. P Grafika cd.
● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych
● Zapisywanie do weba, formaty
● Jeden obrazek 3kb lepszy od 3x 1kb
49. P Skalowalność
● Jednostki względne i bezwzględne
50. P Skalowalność
● Jednostki względne i bezwzględne
● Definiowanie wysokosci kontenerów do
tekstu jest złe
51. P Skalowalność
● Jednostki względne i bezwzględne
● Definiowanie wysokosci kontenerów do
tekstu jest złe
● Wielkość fizyczna okna a zachowanie
układu
52. P Image-replacement
1. <h3><span>tekst</span></h3>
53. P Image-replacement
1. <h3><span>tekst</span></h3>
2. <h3>tekst</h3>
54. P Image-replacement
1. <h3><span>tekst</span></h3>
2. <h3>tekst</h3>
3. <h3><span></span>tekst</h3>
63. Z Nieinwazyjny kod
Bardzo źle:
<a href="javascript:funkcja()">link</a>
<a href="javascript:void(0)"
onclick="funkcja()">link</a>
64. Z Nieinwazyjny kod
Źle:
<a href="#"
onclick="javascript:funkcja()">link</a>
65. Z Nieinwazyjny kod
Nadal kiepsko:
<a href="strona.html"
onclick="funkcja();
return false">link</a>
66. Z Nieinwazyjny kod
Sposób dobry:
<a href="strona.html" class="klasa">cool!</a>
js:
var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='klasa')
linki[i].onlick = klasa;
}
67. Z Ingerencja CSS <> JS
● Popularne rozwiązania
● Rekomendowany sposób
polepszenia jakości kodu
73. Projektowanie
zgodne z usability
● Struktura serwisu
● Sortowanie kart
● Persony
● Projektowanie makiet
74. Najważniejsze
pojęcia
● Nazewnictwo
● Konwencje
– Logo linkiem w lewym górnym rogu
– Linki – niebieski kolor, podkreślone
– Pojęcie koszyka w handlu internetowym
● Odpowiednie komunikaty
● Efektywne linki
75. Najważniejsze
pojęcia cd.
● Struktura serwisu
● Architektura informacji
● Punkty startowe
● Ścieżka okruszków, czyli “jesteś
tutaj”
76. Testy użyteczności
● Optymalny zasięg
● Użytkownik nigdy się nie myli
● Ocena heurystyczna
● Każdy test przynosi korzyści
● Harmonogram testów i
przekazywanie wniosków