Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Antologia Webdevelopera (9.12.2006)

1,529 views

Published on

Prezentacja na Wydziale Fizyki Politechniki Warszawskiej
9.12.2006 r.

Published in: Technology
  • Be the first to comment

Antologia Webdevelopera (9.12.2006)

  1. 1. Antologia Webdevelopera Wojciech Zając www.xhtmlized.com
  2. 2. Webdeveloper kim jest?
  3. 3. Krótkie wprowadzenie n/t WWW i przeglądarek
  4. 4. Przygotowania do pracy
  5. 5. Narzędzia ● Edycja kodu
  6. 6. Narzędzia ● Walidowanie, debugowanie na bieżąco
  7. 7. Narzędzia ● Przydatne wsparcie online
  8. 8. Najpopularniejsze przeglądarki i ich silniki ● Trident ● Gecko ● Presto ● WebCore (KHTML)
  9. 9. Narzędzia ● Testowanie... – www.browsercam.com – www.browsershots.org
  10. 10. Tworzymy poprawny dokument Struktura Prezentacja Zachowanie
  11. 11. Struktura ● HTML ● XHTML ● XML
  12. 12. Prezentacja ● CSS
  13. 13. Zachowanie ● ECMAScipt ● DOM
  14. 14. Struktura
  15. 15. S Na dobry początek: deklaracja ● HTML czy XHTML? Strict czy transitional
  16. 16. S Na dobry początek: deklaracja ● HTML czy XHTML? Strict czy transitional ● Tryby przeglądarek Quirks i pochodne
  17. 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. 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. 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. 20. S Kolejność w kodzie ● Po co?
  21. 21. S Kolejność w kodzie ● Po co? ● Jak?
  22. 22. S Semantyki ciąg dalszy ● Tagitis ● Divitis ● Classitis
  23. 23. S Tagitis ● Przerost formy nad treścią
  24. 24. S Divitis ● Bed and Breakfast code ● Brak znajomosci znaczników
  25. 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. 26. S Classitis ● Nazwy semantyczne zamiast prezentacyjnych ● Myślnik zamiast camelCase
  27. 27. S Zapomniane znaczniki ● Dane kontaktowe <address>
  28. 28. S Zapomniane znaczniki ● Dane kontaktowe <address> ● Cytaty <q> <cite> <blockquote>
  29. 29. S Zapomniane znaczniki ● <abbr> vs <acronym>
  30. 30. S Zapomniane znaczniki ● <abbr> vs <acronym> ● <dfn>, <var>, <samp>, <kbd>
  31. 31. S Formularze ● Formatowanie
  32. 32. S Formularze ● Formatowanie ● Alt, title i value dla input type=image
  33. 33. S Formularze ● Formatowanie ● Alt, title i value dla input type=image ● Zaprzeczenie WYSWIG – <label>, <fieldset>
  34. 34. S Tabele ● Tabele NIE SĄ złe ● Jedynie ich użycie może być nieprawidłowe
  35. 35. Prezentacja
  36. 36. P Pixel-precision ● .psd i co dalej...
  37. 37. P Pixel-precision ● .psd i co dalej... ● Zależności pomiędzy grafiką i kodem
  38. 38. P Tekst ● Definiowanie rozmiarów
  39. 39. P Tekst ● Definiowanie rozmiarów ● Definiowanie krojów tekstu
  40. 40. P Tekst ● Definiowanie rozmiarów ● Definiowanie krojów tekstu ● Kontrast i zapewnienie czytelności
  41. 41. P Grafika ● Nie każdy obrazek nadaje się jako bg
  42. 42. P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka
  43. 43. P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka ● Nie lekceważ alt= i title=
  44. 44. P Grafika ● Nie każdy obrazek nadaje się jako bg ● Zdefiniuj wymiary obrazka ● Nie lekceważ alt= i title= ● Prawidłowe rollovery
  45. 45. P Grafika cd. ● Unikaj punktorów jako list-style-image
  46. 46. P Grafika cd. ● Unikaj punktorów jako list-style-image ● Dostosowanie do klientów pocztowych
  47. 47. P Grafika cd. ● Unikaj punktorów jako list-style-image ● Dostosowanie do klientów pocztowych ● Zapisywanie do weba, formaty
  48. 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. 49. P Skalowalność ● Jednostki względne i bezwzględne
  50. 50. P Skalowalność ● Jednostki względne i bezwzględne ● Definiowanie wysokosci kontenerów do tekstu jest złe
  51. 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. 52. P Image-replacement 1. <h3><span>tekst</span></h3>
  53. 53. P Image-replacement 1. <h3><span>tekst</span></h3> 2. <h3>tekst</h3>
  54. 54. P Image-replacement 1. <h3><span>tekst</span></h3> 2. <h3>tekst</h3> 3. <h3><span></span>tekst</h3>
  55. 55. P Praktyczne porady ● Resetowanie preferencji przeglądarek * {margin: 0; padding: 0;}
  56. 56. P Praktyczne porady ● Resetowanie preferencji przeglądarek * {margin: 0; padding: 0;} ● Czytelność kodu
  57. 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. 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. 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. 60. P Układ strony ● Fixed czy fluid?
  61. 61. P Układ strony ● Fixed czy fluid? ● Prognozy n/t rozdzielczości – 1024x768: 60% – 800x600: 17%
  62. 62. Zachowanie
  63. 63. Z Nieinwazyjny kod Bardzo źle: <a href="javascript:funkcja()">link</a> <a href="javascript:void(0)" onclick="funkcja()">link</a>
  64. 64. Z Nieinwazyjny kod Źle: <a href="#" onclick="javascript:funkcja()">link</a>
  65. 65. Z Nieinwazyjny kod Nadal kiepsko: <a href="strona.html" onclick="funkcja(); return false">link</a>
  66. 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. 67. Z Ingerencja CSS <> JS ● Popularne rozwiązania ● Rekomendowany sposób polepszenia jakości kodu
  68. 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. 69. Jak unikać nadmiarowego kodu? <div id=”friendlist”> <a href=”jacek.jpg”>Jacek</a> <a href=”kasia.jpg”>Kasia</a> </div>
  70. 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. 71. SEO, SEM
  72. 72. Użyteczność, funkcjonalność
  73. 73. Projektowanie zgodne z usability ● Struktura serwisu ● Sortowanie kart ● Persony ● Projektowanie makiet
  74. 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. 75. Najważniejsze pojęcia cd. ● Struktura serwisu ● Architektura informacji ● Punkty startowe ● Ścieżka okruszków, czyli “jesteś tutaj”
  76. 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. 77. Pytania?
  78. 78. Dziękuję za uwagę.

×