Antologia Webdevelopera (9.12.2006)

Antologia
Webdevelopera

Wojciech Zając
www.xhtmlized.com

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

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

Zachowanie

● ECMAScipt
● DOM

S
Na dobry początek:
deklaracja

● HTML czy XHTML?
Strict czy transitional

S
Na dobry początek:
deklaracja

● HTML czy XHTML?
● Tryby przeglądarek
Quirks i pochodne

S
Na dobry początek:
deklaracja

● HTML czy XHTML?
● Tryby przeglądarek
Quirks i pochodne
● Konsekwencje
Nagłówki, kodowanie, encje

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

● 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ą


● Po co?


● 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.
</div>
● <h2>News</h2>
<p>Tutaj dalsza czesc wpisu</p>

S Classitis

● Nazwy semantyczne zamiast
prezentacyjnych
● Myślnik zamiast camelCase

S Zapomniane znaczniki

● Dane kontaktowe
<address>


● Dane kontaktowe
<address>
● Cytaty

<q>
<cite>
<blockquote>


● <abbr> vs <acronym>


● <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>, <fieldset>

S Tabele

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

nieprawidłowe

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 krojów tekstu

P Tekst

● Definiowanie krojów tekstu

● Kontrast i zapewnienie czytelności

P Grafika

● Nie każdy obrazek nadaje się jako bg

P Grafika

● Zdefiniuj wymiary obrazka

P Grafika


● Nie lekceważ alt= i title=

P Grafika


● Nie lekceważ alt= i title=

● Prawidłowe rollovery

P Grafika cd.

● Unikaj punktorów jako list-style-image

P Grafika cd.

● Dostosowanie do klientów pocztowych

P Grafika cd.


● Zapisywanie do weba, formaty

P Grafika cd.


● Zapisywanie do weba, formaty

● Jeden obrazek 3kb lepszy od 3x 1kb

P Skalowalność

● Jednostki względne i bezwzględne

P Skalowalność

● Definiowanie wysokosci kontenerów do

tekstu jest złe

P Skalowalność

● Definiowanie wysokosci kontenerów do

tekstu jest złe
● Wielkość fizyczna okna a zachowanie

układu

P Image-replacement

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

P Image-replacement


2. <h3>tekst</h3>

P Image-replacement


2. <h3>tekst</h3>

3. <h3><span></span>tekst</h3>

P Praktyczne porady

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

P Praktyczne porady

● Czytelność kodu

P Praktyczne porady

● Czytelność kodu
● Hacki i komentarze warunkowe

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

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

P Układ strony

● Fixed czy fluid?

P Układ strony

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

– 1024x768: 60%
– 800x600: 17%

Z Nieinwazyjny kod

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

<a href="javascript:void(0)"
onclick="funkcja()">link</a>

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>

js:
var linki = document.getElementsByTagName('a');
for(i=0; i < linki.length; i++)
{
if (linki[i].className=='klasa')
linki[i].onlick = klasa;
}

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.jpg); return
false”>Jacek</a>
<a href=”#” class=”menuitem” onclick=”
javascript:popUp(kasia.jpg); return
false”>Kasia</a>
</div>

Jak unikać
nadmiarowego kodu?

<div id=”friendlist”>
<a href=”jacek.jpg”>Jacek</a>
<a href=”kasia.jpg”>Kasia</a>
</div>

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)
}

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 – niebieski kolor, podkreślone
– Pojęcie koszyka w handlu internetowym
● Odpowiednie komunikaty
● Efektywne linki

Najważniejsze
pojęcia cd.

● Struktura serwisu
● Architektura informacji

● Punkty startowe

● Ścieżka okruszków, czyli “jesteś

tutaj”

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

Antologia Webdevelopera (9.12.2006)

More Related Content

Similar to Antologia Webdevelopera (9.12.2006)

Antologia Webdevelopera (9.12.2006)