Prezentacja na Wydziale Fizyki Politechniki Warszawskiej 9.12.2006 r.

1. Antologia
Webdevelopera
Wojciech Zając
www.xhtmlized.com

2. Webdeveloper
kim jest?

3. Krótkie wprowadzenie
n/t WWW i przeglądarek

4. Przygotowania
do pracy

5. Narzędzia
● Edycja kodu

6. Narzędzia
● Walidowanie, debugowanie na
bieżąco

7. Narzędzia
● Przydatne wsparcie online

8. Najpopularniejsze przeglądarki
i ich silniki
● Trident
● Gecko
● Presto
● WebCore (KHTML)

9. Narzędzia
● Testowanie...
– www.browsercam.com
– www.browsershots.org

10. Tworzymy poprawny
dokument
Struktura Prezentacja
Zachowanie

11. Struktura
● HTML
● XHTML
● XML

12. Prezentacja
● CSS

13. Zachowanie
● ECMAScipt
● DOM

14. Struktura

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ą

20. S Kolejność w kodzie
● Po co?

21. S Kolejność w kodzie
● Po co?
● Jak?

22. S
Semantyki
ciąg dalszy
● Tagitis
● Divitis
● Classitis

23. S Tagitis
● Przerost formy nad treścią

24. S Divitis
● Bed and Breakfast code
● Brak znajomosci znaczników

25. S Divitis cd.
● <div class='posttitle'>News</div>
<div class='posttext'>
Tutaj dalsza czesc wpisu.
</div>
● <h2>News</h2>
<p>Tutaj dalsza czesc wpisu</p>

26. S Classitis
● Nazwy semantyczne zamiast
prezentacyjnych
● Myślnik zamiast camelCase

27. S Zapomniane znaczniki
● Dane kontaktowe
<address>

28. S Zapomniane znaczniki
● Dane kontaktowe
<address>
● Cytaty
<q>
<cite>
<blockquote>

29. S Zapomniane znaczniki
● <abbr> vs <acronym>

30. S Zapomniane znaczniki
● <abbr> vs <acronym>
● <dfn>, <var>, <samp>, <kbd>

31. S Formularze
● Formatowanie

32. S Formularze
● Formatowanie
● Alt, title i value dla input
type=image

33. S Formularze
● Formatowanie
● Alt, title i value dla input
type=image
● Zaprzeczenie WYSWIG
– <label>, <fieldset>

34. S Tabele
● Tabele NIE SĄ złe
● Jedynie ich użycie może być
nieprawidłowe

35. Prezentacja

36. P Pixel-precision
● .psd i co dalej...

37. P Pixel-precision
● .psd i co dalej...
● Zależności pomiędzy grafiką i kodem

38. P Tekst
● Definiowanie rozmiarów

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>

55. P Praktyczne porady
● Resetowanie preferencji przeglądarek
* {margin: 0; padding: 0;}

56. P Praktyczne porady
● Resetowanie preferencji przeglądarek
* {margin: 0; padding: 0;}
● Czytelność kodu

57. P Praktyczne porady
● Resetowanie preferencji przeglądarek
* {margin: 0; padding: 0;}
● Czytelność kodu
● Hacki i komentarze warunkowe
<!--[if IE]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->

58. P Praktyczne porady cd.
● Problemy z floatami
– Klasyczny sposób:
<div class=”clear”></div>, <br clear=”all” />
.clear {clear: both;}
– Clear fix
– Nadanie float dla rodzica

59. P Praktyczne porady cd.
● Problemy z floatami
– Klasyczny sposób:
<div class=”clear”></div>, <br clear=”all” />
.clear {clear: both;}
– Clear fix
– Nadanie float dla rodzica
● Optymalizacja
– Dziedziczenie
– Łączenie selektorów i atrybutów

60. P Układ strony
● Fixed czy fluid?

61. P Układ strony
● Fixed czy fluid?
● Prognozy n/t rozdzielczości
– 1024x768: 60%
– 800x600: 17%

62. Zachowanie

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

68. Jak unikać
nadmiarowego kodu?
<div id=”friendlist”>
<a href=”#” class=”menuitem” onclick=”
javascript:popUp(jacek.jpg); return
false”>Jacek</a>
<a href=”#” class=”menuitem” onclick=”
javascript:popUp(kasia.jpg); return
false”>Kasia</a>
</div>

69. Jak unikać
nadmiarowego kodu?
<div id=”friendlist”>
<a href=”jacek.jpg”>Jacek</a>
<a href=”kasia.jpg”>Kasia</a>
</div>

70. Jak unikać
nadmiarowego kodu?
CSS: #friendlist a {font-size: 90%;}
JS:
var links =
document.getElementById('friendlist').getElemen
tsByTagName('a');
for (var=0; i < links.lenght; i++)
links[i].onclick = function() {
popUp(this)
}

71. SEO, SEM

72. Użyteczność,
funkcjonalność

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

77. Pytania?

78. Dziękuję za uwagę.