AntologiaWebdevelopera

Wojciech Zaj cąwww.xhtmlized.com

Webdeveloperkim jest?

Krótkie wprowadzenien/t WWW i przegl dareką

Przygotowaniado pracy

Narz dziaę

● Edycja kodu

Narz dziaę

● Walidowanie, debugowanie na bieżąco

Narz dziaę

● Przydatne wsparcie online

● Trident● Gecko● Presto● WebCore (KHTML)

Najpopularniejsze przegl darkiąi ich silniki

Narz dziaę

● Testowanie...– www.browsercam.com– www.browsershots.org

Tworzymy poprawny dokument

Struktura

Zachowanie

Prezentacja

Struktura

● HTML● XHTML● XML

Prezentacja

● CSS

Zachowanie

● ECMAScipt● DOM

Struktura

S

● HTML czy XHTML?Strict czy transitional

Na dobry pocz tek:ądeklaracja

S

● HTML czy XHTML?Strict czy transitional

● Tryby przegl darekąQuirks i pochodne

Na dobry pocz tek:ądeklaracja

S

● HTML czy XHTML?Strict czy transitional

● Tryby przegl darekąQuirks i pochodne

● KonsekwencjeNag ówki, kodowanie, encjeł

Na dobry pocz tek:ądeklaracja

S

●Jak być powinno:–Tytu stronył–Skrót tego, co jest na stronie (op.)–Podstawowa treść–Drugorz dna treę ść–Nawigacja i inne

Kolejno w kodzieść

S

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

Kolejno w kodzieść

S

● Po co?

Kolejno w kodzieść

S

● Po co?● Jak?

Kolejno w kodzieść

S

● Tagitis● Divitis● Classitis

Semantykici g dalszyą

S

● Przerost formy nad tre ciś ą

Tagitis

S

● Bed and Breakfast code● Brak znajomosci znaczników

Divitis

S

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

● <h2>News</h2><p>Tutaj dalsza czesc wpisu</p>

Divitis cd.

S

● Nazwy semantyczne zamiast prezentacyjnych

● My lnik zamiast camelCaseś

Classitis

S

● Dane kontaktowe<address>

Zapomniane znaczniki

S

● Dane kontaktowe<address>

● Cytaty<q><cite><blockquote>

Zapomniane znaczniki

S

● <abbr> vs <acronym>

Zapomniane znaczniki

S

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

Zapomniane znaczniki

S

● Formatowanie

Formularze

S

● Formatowanie● Alt, title i value dla input

type=image

Formularze

S

● Formatowanie● Alt, title i value dla input

type=image● Zaprzeczenie WYSWIG

–<label>, <fieldset>

Formularze

S

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

nieprawid oweł

Tabele

Prezentacja

● .psd i co dalej...

Pixel-precisionP

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

Pixel-precisionP

● Definiowanie rozmiarów

TekstP

● Definiowanie rozmiarów● Definiowanie krojów tekstu

TekstP

● Definiowanie rozmiarów● Definiowanie krojów tekstu● Kontrast i zapewnienie czytelno ciś

TekstP

● Nie ka dy obrazek nadaje si jako bgż ę

GrafikaP

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

GrafikaP

● Nie ka dy obrazek nadaje si jako bgż ę● Zdefiniuj wymiary obrazka● Nie lekcewa alt= i title=ż

GrafikaP

● Nie ka dy obrazek nadaje si jako bgż ę● Zdefiniuj wymiary obrazka● Nie lekcewa alt= i title=ż● Prawid owe rolloverył

GrafikaP

● Unikaj punktorów jako list-style-image

Grafika cd.P

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

Grafika cd.P

● Unikaj punktorów jako list-style-image● Dostosowanie do klientów pocztowych● Zapisywanie do weba, formaty

Grafika cd.P

● Unikaj punktorów jako list-style-image● Dostosowanie do klientów pocztowych● Zapisywanie do weba, formaty● Jeden obrazek 3kb lepszy od 3x 1kb

Grafika cd.P

● Jednostki wzgl dne i bezwzgl dneę ę

SkalowalnośćP

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

tekstu jest z eł

SkalowalnośćP

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

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

uk aduł

SkalowalnośćP

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

Image-replacementP

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

2. <h3>tekst</h3>

Image-replacementP

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

2. <h3>tekst</h3>

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

Image-replacementP

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

Praktyczne poradyP

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

● Czytelno koduść

Praktyczne poradyP

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

● Czytelno koduść● Hacki i komentarze warunkowe

<!--[if IE]><link rel="stylesheet" href="ie.css" /><![endif]-->

Praktyczne poradyP

● Problemy z floatami– Klasyczny sposób:<div class=”clear”></div>, <br clear=”all” />.clear {clear: both;}

– Clear fix– Nadanie float dla rodzica

Praktyczne porady cd.P

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

Praktyczne porady cd.P

● Fixed czy fluid?

Uk ad stronyłP

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

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

Uk ad stronyłP

Zachowanie

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

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

Nieinwazyjny kodZ

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

Nieinwazyjny kodZ

Nadal kiepsko:

<a href="strona.html" onclick="funkcja();return false">link</a>

Nieinwazyjny kodZ

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

Nieinwazyjny kodZ

● Popularne rozwi zaniaą● Rekomendowany sposób

polepszenia jako ci koduś

Ingerencja CSS <> JSZ

<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').getElementsByTagName('a');

for (var=0; i < links.lenght; i++)links[i].onclick = function() {popUp(this)}

Jak unikaćnadmiarowego kodu?

SEO, SEM

U yteczno , ż śćfunkcjonalność

● Struktura serwisu● Sortowanie kart● Persony● Projektowanie makiet

Projektowaniezgodne z usability

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

● Struktura serwisu● Architektura informacji● Punkty startowe● cie ka okruszków, czyli “jeste Ś ż ś

tutaj”

Najwa niejszeżpoj cia cd.ę

● Optymalny zasi gę● U ytkownik nigdy si nie myliż ę● Ocena heurystyczna● Ka dy test przynosi korzy ciż ś● Harmonogram testów i

przekazywanie wniosków

Testy u yteczno ciż ś

Pytania?

Dzi kuj za uwag .ę ę ę