Antologia
Webdevelopera

   Wojciech Zając
 www.xhtmlized.com
Webdeveloper
   kim jest?
Krótkie wprowadzenie
n/t WWW i przeglądarek
Przygotowania
   do pracy
Narzędzia
●   Edycja kodu
Narzędzia
●   Walidowanie, debugowanie na
    bieżąco
Narzędzia
●   Przydatne wsparcie online
Najpopularniejsze przeglądarki
         i ich silniki
●   Trident
●   Gecko
●   Presto
●   WebCore (KHTML)
Narzędzia
●   Testowanie...
    – www.browsercam.com
    – www.browsershots.org
Tworzymy poprawny
     dokument


Struktura                Prezentacja



            Zachowanie
Struktura



● HTML
● XHTML

● XML
Prezentacja



●   CSS
Zachowanie



● ECMAScipt
● DOM
Struktura
S
       Na dobry początek:
           deklaracja

●   HTML czy XHTML?
           Strict czy transitional
S
        Na dobry początek:
            deklaracja

●   HTML czy XHTML?
              Strict czy transitional
●   Tryby p...
S
        Na dobry początek:
            deklaracja

●   HTML czy XHTML?
              Strict czy transitional
●   Tryby p...
S         Kolejność w kodzie
●   Jak być powinno:
    – Tytuł strony
    – Skrót tego, co jest na   stronie (op.)
    – Po...
S         Kolejność w kodzie
●   Jak jest najczęściej:
    – Nawigacja (linki, linki, linki....)
    – Tytuł strony
    – ...
S    Kolejność w kodzie

●   Po co?
S   Kolejność w kodzie

● Po co?
● Jak?
S
              Semantyki
              ciąg dalszy

● Tagitis
● Divitis

● Classitis
S             Tagitis

●   Przerost formy nad treścią
S          Divitis

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

●   <div class='posttitle'>News</div>
    <div class='posttext'>
    Tutaj dalsza czesc wpisu.
...
S        Classitis

● Nazwy semantyczne zamiast
  prezentacyjnych
● Myślnik zamiast camelCase
S   Zapomniane znaczniki

●   Dane kontaktowe
                 <address>
S   Zapomniane znaczniki

● Dane kontaktowe
               <address>
● Cytaty

               <q>
               <cite>
  ...
S   Zapomniane znaczniki

●   <abbr> vs <acronym>
S   Zapomniane znaczniki

● <abbr> vs <acronym>
● <dfn>, <var>, <samp>, <kbd>
S        Formularze

●   Formatowanie
S         Formularze

● Formatowanie
● Alt, title i value dla input

  type=image
S         Formularze

● Formatowanie
● Alt, title i value dla input

  type=image
● Zaprzeczenie WYSWIG

   – <label>, <fi...
S          Tabele

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

  nieprawidłowe
Prezentacja
P           Pixel-precision

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

● .psd i co dalej...
● Zależności pomiędzy grafiką i kodem
P               Tekst

●   Definiowanie rozmiarów
P              Tekst

● Definiowanie rozmiarów
● Definiowanie krojów tekstu
P               Tekst

● Definiowanie rozmiarów
● Definiowanie krojów tekstu

● Kontrast i zapewnienie czytelności
P               Grafika

●   Nie każdy obrazek nadaje się jako bg
P             Grafika

● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka
P             Grafika

● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka

● Nie lekceważ alt= i title=
P             Grafika

● Nie każdy obrazek nadaje się jako bg
● Zdefiniuj wymiary obrazka

● Nie lekceważ alt= i title=

●...
P            Grafika cd.

●   Unikaj punktorów jako list-style-image
P          Grafika cd.

● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych
P          Grafika cd.

● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych

● Zapisywanie do w...
P          Grafika cd.

● Unikaj punktorów jako list-style-image
● Dostosowanie do klientów pocztowych

● Zapisywanie do w...
P          Skalowalność

●   Jednostki względne i bezwzględne
P       Skalowalność

● Jednostki względne i bezwzględne
● Definiowanie wysokosci kontenerów do

  tekstu jest złe
P       Skalowalność

● Jednostki względne i bezwzględne
● Definiowanie wysokosci kontenerów do

  tekstu jest złe
● Wielk...
P      Image-replacement

1. <h3><span>tekst</span></h3>
P       Image-replacement

1. <h3><span>tekst</span></h3>

2. <h3>tekst</h3>
P       Image-replacement

1. <h3><span>tekst</span></h3>

2. <h3>tekst</h3>

3. <h3><span></span>tekst</h3>
P       Praktyczne porady

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

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

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

●   Problemy z floatami
    –   Klasyczny sposób:
        <div class=”clear”></div>, <br cle...
P      Praktyczne porady cd.

●   Problemy z floatami
    –   Klasyczny sposób:
        <div class=”clear”></div>, <br cle...
P           Układ strony

●   Fixed czy fluid?
P               Układ strony

● Fixed czy fluid?
● Prognozy n/t rozdzielczości

    –   1024x768: 60%
    –   800x600: 17%
Zachowanie
Z        Nieinwazyjny kod


              Bardzo źle:
<a href="javascript:funkcja()">link</a>

<a href="javascript:void(0)...
Z        Nieinwazyjny kod


                  Źle:
<a href="#"
  onclick="javascript:funkcja()">link</a>
Z        Nieinwazyjny kod


            Nadal kiepsko:
<a href="strona.html"
  onclick="funkcja();
  return false">link</a>
Z              Nieinwazyjny kod


                      Sposób dobry:
<a href="strona.html" class="klasa">cool!</a>


    ...
Z   Ingerencja CSS <> JS

● Popularne rozwiązania
● Rekomendowany sposób

  polepszenia jakości kodu
Jak unikać
  nadmiarowego kodu?

<div id=”friendlist”>
  <a href=”#” class=”menuitem”   onclick=”
  javascript:popUp(jacek...
Jak unikać
  nadmiarowego kodu?

<div id=”friendlist”>
  <a href=”jacek.jpg”>Jacek</a>
  <a href=”kasia.jpg”>Kasia</a>
</d...
Jak unikać
     nadmiarowego kodu?
CSS: #friendlist a {font-size: 90%;}

JS:
   var links =
     document.getElementById('...
SEO, SEM
Użyteczność,
funkcjonalność
Projektowanie
        zgodne z usability

●   Struktura serwisu
●   Sortowanie kart
●   Persony
●   Projektowanie makiet
Najważniejsze
                 pojęcia

● Nazewnictwo
● Konwencje
    –   Logo linkiem w lewym górnym rogu
    –   Linki –...
Najważniejsze
        pojęcia cd.

● Struktura serwisu
● Architektura informacji

● Punkty startowe

● Ścieżka okruszków, ...
Testy użyteczności

● Optymalny zasięg
● Użytkownik nigdy się nie myli

● Ocena heurystyczna

● Każdy test przynosi korzyś...
Pytania?
Dziękuję za uwagę.
Upcoming SlideShare
Loading in …5
×

Antologia Webdevelopera (9.12.2006)

861
-1

Published on

Prezentacja na Wydziale Fizyki Politechniki Warszawskiej
9.12.2006 r.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
861
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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ę.

×