19:15 <%b3x-> witam wszystkich na dzisiejszym wykladzie poswieconym najpowszechniejszym bledom webmasterow.
19:16 <%b3x-> niestety z mojej strony bedzie to utrudnione, poniewaz z niezaleznych ode mnie powodow nie moge ich prowadzic od siebie
19:16 <%b3x-> dlatego tez nie mam jasnie ustalonego harmonogramu tresci, o jakich mam zamiar napisac.
19:17 <%b3x-> ja nazywam sie Wojciech Zajac, webmasterwstwem zajmuje sie od jakichs 6 lat
19:17 <%b3x-> na codzien pracuje jako freelancer, a ostatnia praca/sukcesem byla witryna bez-slow.pl, na ktorej tez chce oprzec kilka przykladow.
19:18 <%b3x-> jak wiecie, wsrod osob trudniacych sie tworzeniem stron www z dnia na dzien coraz popularniejszy staje sie trend tworzenia w zgodzie ze standardami sieciowymi.
19:19 <%b3x-> jest to niewatpliwie pozytywne zjawisko, ale nalezy ustrzec przed kwestiami, ktore moze niezbyt czesto pojawiaja sie w prostych kursach html/css
19:19 <%b3x-> a sa naprawde wazne.
19:19 <%b3x-> ostatnio modne rowniez stalo sie pisanie w xhtml. mowi sie, ze trzeba pisac 'na divach'
19:19 <%b3x-> trzeba jednak zastanowic sie, czy stwierdzenie takie jest poprawne.
19:20 <%b3x-> pomyslmy wiec o podstawowej strukturze takiego dokumentu.
19:20 <%b3x-> na poczatek - deklaracja.
19:20 <%b3x-> istnieje kilka wersji deklaracji tzw. DOCTYPE, wsrod poczatkujacych najpopularniejsza jest niestety XHTML 1.1
19:21 <%b3x-> przed podjeciem decyzji jaka deklaracje zamierzamy wstawic do dokumentu, nalezy zastanowic sie nad kilkoma kwestiami
19:21 <%b3x-> kilka aspektow z tym zwiazanych zostalo poruszonych w artykule na ALA - http://alistapart.com/stories/doctype/
19:22 <%b3x-> nie mam zamiaru przepisywac wielokrotnie omowionych tematow, poniewaz sadze ze taka nauka z ogolnie dostepnych zrodel jest duzo lepsza.
19:22 <%b3x-> chodzi wiec o to, ze w wiekszosci przypadkow zawieranie XHTML 1.1 nie jest najlepszym wyborem.
19:23 <%b3x-> podczas tworzenia takiej strony musimy zastanowic sie komu zamierzamy ja przedstawic, na jakich srodowiskach/platformach ma dzialac
19:23 <%b3x-> http://www.w3.org/TR/xhtml-media-types/
19:24 <%b3x-> na tej stronie znajduje sie tabela przedstawiajaca jaki naglowek musimy wyslac przegladarce w zaleznosci od wybranej deklaracji.
19:25 <%b3x-> generalnie w XHTML 1.1 dokument powinien byc wyslany jako application/xhtml+xml
19:25 <%b3x-> w XHTML 1.0 (strict/transitional) natomiast stajemy przed wyborem, poniewaz przyzwyczailismy sie do wysylania dokumentu jako text/html ("stara szkola")
19:26 <%b3x-> pomyslicie pewnie - ok, polecany jest application/xhtml+xml - dlaczego wiec go nie stosowac?
19:26 <%b3x-> glownym minusem stojacym na przeszkodzie jest to, ze niestety przegladarka Internet Explorer nie wyswietli takiej strony poprawnie.
19:27 <%b3x-> istnieje jednak rozwiazanie
19:27 <%b3x-> przyjela sie technologia, ktora pozwala na negocjacje naglowka w zaleznosci od naglowkow wysylanych przez przegladarke
19:27 <%b3x-> w skrocie chodzi o to, ze kazda przegladarka wysyla obslugiwane naglowki
19:28 <%b3x-> i na tej podstawie mozemy dobrac jej odpowiedni rodzaj.
19:28 <%b3x-> w taki tez sposob mozna operowac wyswietlaniem obrazkow PNG, ale to inny temat
19:28 <%b3x-> technologia ta zwana jest popularnie jako Content-negotiation.
19:29 <%b3x-> przetestowac ja mozecie na stronie http://bez-slow.pl/
19:29 <%b3x-> druga bardzo wazna kwestia przy wyborze deklaracji jest to, ze przegladarki pracuja w dwoch trybach.
19:29 <%b3x-> jest to tzw. Quirks mode i standards-compilance mode.
19:30 <%b3x-> przy restrykcyjnym naglowku przegladarka renderuje strone korzystajac z tego drugiego trybu
19:30 <%b3x-> jest to metoda w ktorej korzysta ona z zasad w3c, rozwijajac ja przy kazdej wersji
19:31 <%b3x-> niestety w poprzednich latach, w czasach wojny przegladarek powstalo ogrom stron korzystajacych ze zlych metod
19:31 <%b3x-> w wiekszosci strony nie posiadaja deklaracji, lub posiadaja luzna jej wersje
19:32 <%b3x-> mysle tutaj o np. HTML 4.1 transitional
19:32 <%b3x-> wtedy przegladarka wchodzi w quirks mode po to, aby wyswietlic strone zgodnie z metodami sprzed kilku lat
19:32 <%b3x-> jest to rowniez rozawiazanie popularnych problemow, jakie stoja na drodze poczatkujacym
19:33 <%b3x-> czesto zastanawiamy sie dlaczego przegladarka zachowuje sie w taki, a nie inny sposob chcac szybko sprobowac czegos bez wstawiania deklaracji
19:33 <%b3x-> okazuje sie ze rozwiazaniem moze byc dodanie tejze restrykcyjnej deklaracji.
19:34 <%b3x-> literowka, pierwszy tryb to oczywiscie standards-compiliance (nie compilance)
19:35 <%b3x-> wiecej - http://www.quirksmode.org/index.html?/css/quirksmode.html
19:35 <%b3x-> ok. pytania?
19:36 <%b3x-> komentarze, pytania, sugestie? ;)
19:36 < Ziel> Jak dla mniewszystko jasne :P
19:36 < Vitro> ja
19:36 < sauron> niet
19:36 < Vitro> to chyba nie koniec wyklady, co?
19:36 < oshogbo> jasne
19:36 <%b3x-> lol, to poczatek
19:36 <%b3x-> ok
19:36 <%meal> Mozna kontynuowac ;]
19:36 <%b3x-> a wiec przechodzimy do kolejnego punktu: SEMANTYKA
19:37 <%b3x-> jak juz wspomnialem, czesto mowi sie, ze nalezy 'zrobic to na divach'
19:37 <%b3x-> jest to przenosnia, czego nie wszyscy sa swiadomi
19:37 <%b3x-> tak naprawde kazdy poczatkujacy po przeczytaniu pierwszego lepszego kursu xhtml jest w stanie napisac prosta strone bez korzystania z tabelek
19:38 <%b3x-> nie jest to trudne i uwaza sie, ze strona taka jest poprawna
19:38 <%b3x-> w poprzednim wykladzie unknowa dot. CSS wspomnial, ze bez CSS ciezko czytac strone
19:38 <%b3x-> jest kilka metod na poprawienie tego
19:39 <%b3x-> semantyka to nauka o poprawnym stosowaniu znacznikow zgodnie z ich przeznaczeniem
19:39 <%b3x-> wezmy za przyklad taka poczatkujaca osobe uczaca sie 'pisania na divach'
19:39 <%b3x-> najczesciej kod jego pierwszej strony wyglada tak
19:39 <%b3x-> zupa tagow <div>
19:39 <%b3x-> <div class="naglowek">
19:40 <%b3x-> <div class="cytat">
19:40 <%b3x-> <div class="test">
19:40 <%b3x-> potem dziwimy sie dlaczego strona taka jest ciezko widoczna gdy css nie jest dostepny
19:40 <%b3x-> sedno tkwi w tym, ze nalezy uzywac znacznikow ktore sa do tego przeznaczone
19:41 <%b3x-> i znowu, jak poprzednio, podaje odpowiedni link: http://grabun.com/teksty/zapomniane-znaczniki/
19:41 <%b3x-> pozniej mozna sie sprawdzic na http://delta.lebkowski.info/semantyka/ ;-)
19:42 <%b3x-> jest mnostwo zalet podczas pisania kodu w zgodzie ze semantyka
19:42 <%b3x-> strona ta znajduje sie wyzej w wyszukiwarkach
19:42 <%b3x-> (lepiej jest indeksowana)
19:43 <%b3x-> strona ta rowniez duzo lepiej zachowuje sie w czytnikach tekstu, syntezatorach mowy
19:43 <%b3x-> swobodnie mozna przegladac ja pod przegladarkami tekstowymi, takimi jak links czy lynx
19:43 <%b3x-> kod, w ktorym wlasnie webmaster nie zna tego pojecia - mowimy, ze wystepuje tam zjawisko divitis
19:44 <%b3x-> istnieje rowniez powiazane z tym drugie zjawisko nazywane classitis
19:44 <%b3x-> wtedy, gdy korzystamy ogolnie ze znacznikow ktore nie sa do poszczegolnych efektow przeznaczone
19:44 <%b3x-> <span class="naglowek">
19:44 <%b3x-> <span class="czerwony gruby">
19:45 <%b3x-> kod taki naprawde nie jest lepszy od starych stron pisanych podczas wojny przegladarek
19:45 <%b3x-> przy okazji
19:45 <%b3x-> nazewnictwo rowniez jest wazne
19:46 <%b3x-> nie opisuje tutaj podstaw, poniewaz kieruje to dla osob ktore juz od jakiegos czasu tworza i sa z tym obeznane
19:46 <%b3x-> aczkolwiek wspomne o tym, ze oczywiscie prawidlowy dokument powinien skladac sie z trzech warstw
19:47 <%b3x-> struktura(DOM), prezentacja(CSS), zachowanie(DOM)
19:47 <%b3x-> nie nalezy w xhtml ingerowac w sposob wyswietlania takiej strony
19:47 <%b3x-> podczas okreslania klas czy tez identyfikatorow w tagach
19:47 <%b3x-> trzeba okreslac ich znaczenie stricte semantyczne, nie prezentacyjne
19:47 <%b3x-> class="czerwony" jest niepoprawne, natomiast class="warning" poprawne jest.
19:48 <%b3x-> nastepna powiazana kwestia (tak, widac nieprzygotowanie, chaos i mentlik w glowie)
19:48 <%b3x-> podczas wstawiania deklaracji dokumentu wstawiamy rowniez tak html
19:48 <%b3x-> *tag html
19:48 <%b3x-> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
19:49 <%b3x-> jest to wazne, opisujemy jezyk dokumentu
19:49 <%b3x-> niestety wsrod poczatkujacych czesto jest wiele zapozyczen z jezyka angielskiego
19:49 <%b3x-> wtedy do odpowiedniego tekstu nalezy zdefiniowac takowy jezyk
19:50 <%b3x-> obojetnie, czy jest to dokonywane okazyjnie, czy tez specjalnie
19:51 <%b3x-> <span lang="en">fragment po angielsku</span>
19:51 <%b3x-> ok, w takim razie to tyle jesli chodzi o ta kwestie ;->
19:51 <%b3x-> dosc czestym problemem w semantyce jest roznica miedzy <abbr> a <acronym>
19:52 <%b3x-> w jezyku polskim roznica miedzy taka abrewiacja a skrotowcem jest rozmyta i czasem ciezko taka roznice okreslic
19:52 <%b3x-> dlatego nie nalezy kierowac sie tylko tym, ze np. tylko jeden z tych elementow jest prawidlowo wyseitlany w IE.
19:53 <%b3x-> OPTYMALIZACJA.
19:53 <%b3x-> oczywiscie nalezy dazyc do lekkosci kodu
19:53 <%b3x-> zawsze nalezy upraszczac kod html na niekorzysc np. CSS
19:53 <%b3x-> powodem jest to, ze oczywiscie CSS najczesciej zostaje w cache przegladarki, a html jest ladowany kazdorazowo.
19:54 <%b3x-> waznym pojeciem tutaj jest dziedziczenie
19:54 <%b3x-> wspomniane w wykladzie unknowa.
19:54 <%b3x-> warto zastanowic sie nad tym, czy np. na poszczegolnych podstronach nadanie klasy/idntyfikatora dla nadrzednego elementu nie bedzie korzystniejsze
19:54 <%b3x-> wezmy na przyklad poczatkowa witryne bez-slow.pl
19:55 <%b3x-> ze wzgledow uzytecznosci/funkcjonalnosci umieszczony tam zostal tzw. miejscownik
19:55 <%b3x-> w ktorym widac miejsce gdzie aktualnie sie znajdujemy
19:55 <%b3x-> strona ta podzielona jest na dwie sekcje rozroznione kolorami zoltym i niebieskim.
19:56 <%b3x-> http://bez-slow.pl/wzrok/skutki-psychiczne.html
19:56 <%b3x-> <ul class="miejscownik clearfix"><li class="left">Jeste's tutaj: <a href="/">Gl'owna</a> → <a href="/wzrok/"><span>Wzrok</span></a> → <a href="/wzrok/skutki-psychiczne.html">Skutki psychiczne</a></li><li class="right"><a href="/sitemap.html">Spis tre'sci</a></li></ul>
19:56 <%b3x-> tak to zostalo rozwiazane w sekcji wzrok
19:57 <%b3x-> w sekcji sluch nie zmienilo sie strukturalnie nic oprocz podmiany adresu URL i tekstu.
19:57 <%b3x-> pytanie: w jaki sposob zachowana zostala roznica w kolorze?
19:57 <%b3x-> rozwiazanie:
19:57 <%b3x-> <body class="wzrok">
19:58 <%b3x-> wtedy mozemy okreslac:
19:58 <%b3x-> .wzrok #miejscownik .span {color: blue;}
19:58 <%b3x-> .wzrok #miejscownik .span {color: yellow;}
19:58 <%b3x-> to daje wiele korzysci i moze bardzo odchudzic kod.
19:59 <%b3x-> Wasza kolej
19:59 < robmal> b3x-: Narysuj mi konika.
19:59 < xa|work> eeem, przeciez to jest to samo, ten kolory sie nadpisza
19:59 < Vitro> ja
19:59 < BeldziO> co nam daje korzystanie z lang przy np span?
19:59 <%meal> robmal: Cssi:P
19:59 < xa|work> *te kolory
19:59 < Vitro> czy nie byloby prosciej ustalic, ze...a
19:59 < Ziel> <b3x-> class="czerwony" jest niepoprawne, natomiast class="warning" poprawne jest. - dlaczego?
19:59 < Vitro> abbr = skrot w stylu "prof."
20:00 < BeldziO> Ziel bo jak zmieniasz kolor to nie będziesz wiedział co się dzieje w css
20:00 < Vitro> acronum = akronim w stylu AK (Armia Krajowa)?
20:00 < Vitro> * acronym
20:00 <%b3x-> BeldziO: NAM nic, natomiast osob z uposledzeniami wzroku bardzo duzo, to ma ogromne znaczenie dla syntezatorow mowy
20:00 < BeldziO> ok thx
20:00 < BeldziO> zaczne uzywac ;-)
20:00 <%b3x-> chodzi o np. akcent itp.
20:01 < Vitro> [btw a jest jakies rozwiazanie na definiowanie jezyka przy rozwijaniu abbr i acronym]?
20:01 <%b3x-> xa|work: dla body ktore ma class="wzrok" stosowana jest regulka pierwsza, dla body ktore ma class="sluch" stosowana jest regulka druga (a pierwszej nie widzi)
20:02 <%b3x-> Vitro: <abbr lang="en"> - tag nie ma znaczenia
20:02 < Vitro> jak mam np. <acronym title="<span lang='en'>HyperText Markup Language</span>">HTML</acronym> przeciez nie zrobie :)
20:02 < Vitro> aha
20:02 <%b3x-> Ziel: dlatego, ze czerwony okresla sposob prezentacji elementu, a warning nie okresla prezentacji, tylko ZNACZENIE w strukturze dokumentu.
20:03 <%b3x-> nie nie nie, nie rozumiesz ;)
20:03 <%b3x-> nie chodzi o to, aby powtarzac <span....
20:03 <%b3x-> tylko lang="en" stosowac do dowolnego znacznika
20:03 < Vitro> wiem : )
20:03 < Vitro> to byl przyklad
20:03 <%b3x-> mhm
20:03 < Vitro> zauwaz, ze napisalem tam:
20:03 < Vitro> "<kod html> przeciez nie zrobie"
20:03 < Vitro> ;-)
20:03 < Vitro> b3x-: jeszcze jedno pytanie
20:03 < Vitro> zadane na poczatku
20:03 <%b3x-> prosz
20:04 < Vitro> czy nie mozna ustalic rozroznienia pomiedzy abbr i acronym
20:04 < Vitro> typu abbr = skrot typu "prof." [profesor]
20:04 < Vitro> acronym = skrot typu AK [armia krajowa]?
20:04 <%b3x-> to nie jest problem samej semantyki, a jezyka, trzeba kazdy przypadek osobno rozpatrzec
20:04 <%b3x-> musisz sam uznac co jest odpowiedniejsze ;)
20:05 < Vitro> mhm. jednakze takie umowne uogolnienie byloby chyba wygodne, prawda?
20:05 <%b3x-> http://www.benmeadowcroft.com/webdev/articles/abbr-vs-acronym.shtml
20:05 < R3xi0> Skrocilem tego linka: http://tinyurl.com/k8jz9 (URL podany przez b3x-)
20:05 <%b3x-> http://golem.ph.utexas.edu/~distler/blog/archives/000218.html
20:05 < R3xi0> Skrocilem tego linka: http://tinyurl.com/pchle (URL podany przez b3x-)
20:05 <%b3x-> polecam
20:05 <%b3x-> ;)
20:05 < Vitro> ok ;]
20:05 < Vitro> dzieki wielkie
20:06 < Vitro> z mojej strony to wszystko
20:06 <%b3x-> przy okazji: istnieje test aby sprawdzic, czy naprawde osoba obnoszaca sie ze znajomoscia standardow mowi prawde ;)
20:06 <%b3x-> jaka jest roznica miedzy tagiem a znacznikiem?
20:07 <%b3x-> (cisza) (pewnie niektorzy wiedza)
20:07 <%b3x-> tag to tylko <em>, a znacznik to calosciowe <em> </em>
20:07 <%b3x-> ;-)
20:07 <@xa> nikt nie dopowie, jesy +m :P
20:07 <@xa> *odpowie
20:07 <@xa> *jest
20:07 <%b3x-> to nie mialo byc pytanie dla publicznosci, zepsulo by ;-p
20:07 <%b3x-> ok.
20:07 <@xa> pff ;>
20:07 <%b3x-> nastepna kwestia
20:08 <%b3x-> przechodzimy teraz do kolejnego problemu
20:08 <%b3x-> rzadko omawianego w kursach...
20:08 <%b3x-> definiowanie rozmiaru tekstu.
20:09 <%b3x-> zalecane jest, aby definiowac rozmiar tekstu relatywnymi jednostkami.
20:09 <%b3x-> opisze wiec stosowane jednostki, poniewaz to czesto jest mylone
20:10 <%b3x-> jednostki wzgledne: em (okreslane na podstawie rodzica), ex (okreslane na podstawie wysokosci litery x danego kroju pisma), px - TAK, px jest wzgledne (okreslane wzgledem rozdzielczosci urzadzenia)
20:10 <%b3x-> do bezwzglednych natomiast naleza np. in, cm, mm, pt itp.
20:11 <%b3x-> glownym minusem takiego dzialania jest to
20:11 <%b3x-> ze rozne przegladarki w odmienny sposob interpretuja nadany rozmiar tekstu, gdy do body okreslamy np. 75%, .8em czy small.
20:12 <%b3x-> roznice te wystepuja nawet miedzy poszczegolnymi wersjami produktow (mysli tu o IE5/win i IE6/win)
20:12 <%b3x-> moze nie jest to bardzo powazny problem, bo zwykle tak male roznice nie odgrywaja duzego znaczenia przy projektowaniu takiej strony
20:13 <%b3x-> warto natomiast wiedziec, ze problem ten rozwiazuje sie poprzez stosowanie tzw. hackow majacych na celu wstrzykniecie odpowiedniego kodu CSS roznym przegladarkom pojedynczo.
20:13 <%b3x-> przechodze tutaj do tematu hackow.
20:14 <%b3x-> czesto musimy zastosowac takie odroznianie
20:14 <%b3x-> poniewaz interpretacja zapisow konsorcjum w3c bywa rozna
20:14 <@xa> (podaj glowny minus hackow...)
20:14 <%b3x-> czestym problemem jest bledne pojmowanie tzw. box model
20:14 <%b3x-> xa: pozniej
20:15 <%b3x-> problem box-model polega na tym, ze obliczajac parametr width specyficznego elementu
20:15 <%b3x-> musimy odjac od wynikowej szerokosci border (obramowanie) oraz padding (dopelnienie)
20:16 <%b3x-> w wiekszosci tutaj stosuje sie wspomniane hacki.
20:16 <%b3x-> sa rozne metody wysylania innych stylow
20:16 <%b3x-> tzn. np. komentarze warunkowe, ktore szczegolniej opisalem w wykladzie unknowa
20:17 <%b3x-> http://leksykot.top.hell.pl/notatki/www/ie-hacks.shtml
20:17 <%b3x-> istnieje wieele roznych hackow
20:18 <%b3x-> najpopularniejsze to np. hack z podkresleniem, z backslashem itp.
20:18 <%b3x-> w zaleznosci od celu powinnismy samodzielnie wybrac odpowiedni
20:19 <%b3x-> nie mam zamiaru nudzic i rozwodzic nad pojedynczymi, dlatego wiecej informacji polecam zaczerpnac osobiscie.
20:19 <%b3x-> oczywiscie generalnie zaleca sie rzadkie korzystanie z hackow i pisanie w sposob ktory nie wymaga ich
20:20 <%b3x-> tutaj porusze zagadnienie zerowania marginesow i dopelnien
20:20 <%b3x-> jak wiadomo, przegladarki posiadaja swoje style css do wstepnego formatowania popularniejszych elementow
20:20 <%b3x-> najczesciej jest to np. dodanie marginesow do naglowkow czy list
20:21 <%b3x-> podczas pisania kolejnego projektu nudne staje sie kazdorazowe pisanie np.:
20:21 <%b3x-> li {list-style
20:21 <%b3x-> li {list-style: none;}
20:21 <%b3x-> a {text-decoration: none;}
20:21 <%b3x-> zwykle pisze sie * {margin: 0; padding: 0;}
20:22 <%b3x-> natomiast nie czesto pisze sie o tym, ze lepiej uzywac zerowania pojedynczych elementow
20:22 <%b3x-> body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
20:22 <%b3x-> dt, dd, li, address, form, fieldset, hr, blockquote {
20:22 <%b3x-> margin: 0;
20:22 <%b3x-> padding: 0;
20:22 <%b3x-> }
20:22 <%b3x-> polecam zachowac sobie fragment tego kodu i przeklejac do odpowiednik projektow.
20:23 <%b3x-> (pisanie samodzielne takich stalych elementow jak i np. deklaracji jest zbedne ;) )
20:23 <%b3x-> tutaj problem ze zla interpretacja hyperlinkow
20:23 <%b3x-> istnieje zasada tzn. LoVe HA!
20:24 <%b3x-> (stworzona bodajze przez Zeldmana badz Meyera)
20:24 <%b3x-> prawidlowy porzadek okreslania stylow dla linkow:
20:24 <%b3x-> a:link, a:visited, a:hover, a:active
20:25 <%b3x-> jesli opiszemy to w innej kolejnosci musimy liczyc sie ze zla prezentacja przez najpopularniejsze przegladarki.
20:25 <%b3x-> poruszylem tutaj kwestie skalowania tekstu.
20:26 <%b3x-> (btw, mowienie o czcionce w odniesieniu do fontu jest bledne, nalezy mowic i pisac: kroj pisma - czcionka to zupelnie co innego jesli chodzi o typografie.)
20:26 <%b3x-> zalozmy ze dostajemy do pociecia projekt w .psd
20:26 <%b3x-> grafik ma do tego odmienne podejscie, koder jeszcze inne. kazdy zwraca uwage na co innego
20:27 <%b3x-> najczesciej mierzymy z dokladnoscia co do piksela co ile zajmuje i przenosimy to do kodu.
20:28 <%b3x-> nalezy natomiast wziac pod uwage wyglad w zaleznosci od ustawien uzytkownika, i zwrocic uwage na osoby z uposledzeniami wzroku czy niedoczynnosciami ruchu
20:28 <%b3x-> bardzo czestym i rzadko omawianym bledem jest niedopracowane menu
20:29 <%b3x-> porada: zawsze po opisaniu menu sprawdzmy, czy po zwiekszeniu rozmiaru tekstu takie menu w dalszym ciagu wyesietlac sie bedzie poprawnie
20:29 <%b3x-> jesli juz ustawimy rozmiar tekstu np. w procentach czy korzystajac z jednostki em, musimy rowniez zadbac o skalowanie elementow graficznych
20:29 <%b3x-> przy korzystaniu z zakladek nie definiujmy wysokosci
20:29 <%b3x-> a przynajmniej ustalajmy tylko min-height
20:30 <%b3x-> przy wiekszych wartosciach czcioni menu takie czy dowolny inny element powinien sie rozciagac.
20:30 <%b3x-> to tylko zasygnalizowanie problemu, jest za malo czasu aby omowic takie kwestie dokladniej.
20:30 <%b3x-> hm, to moze kolejna przerwa
20:30 <@phoenix__> prowadz dlugo
20:30 < Ziel> Jest jakis uniwersalny sposob na nie rozciagajace sie menu? :)
20:31 <@phoenix__> masz czas do 21
20:31 <@phoenix__> ;P
20:31 <@xa> 21:30
20:32 <%b3x-> Ziel: biorac pod uwage takie popularne rozwiazanie zakladek
20:32 < netx0r> s
20:32 <%b3x-> nie nalezy na sztywno okreslac obrazek w tle
20:32 <%b3x-> natomiast rozwiazac to tak, aby tlo moglo sie dowolnie rozciagac
20:32 < netx0r> sa logi z wykladu robal'a?
20:32 <%b3x-> i aby obrazki byly zalezne od polozenia tekstu
20:32 < Ziel> Jak zrobie na warstwach i scisle okresle rozmiar - tekst bedzie sie ucinal, jak na tabeli to bedzie brzydko :P
20:33 <%b3x-> http://css.maxdesign.com.au/listamatic/
20:33 <%b3x-> polecam
20:33 < Ziel> Zaraz zobacze.
20:34 <%b3x-> ok, to kontynuuje
20:34 <%b3x-> dwie ostatnie kwestie.
20:34 <%b3x-> definiujac odpowiednie tlo w dokumencie
20:34 <%b3x-> bierzmy pod uwage rowniez uzytkownikow nie pobierajacych obrazow
20:35 <%b3x-> wtedy taki user czesto nie moze widziec poprawnie tekstu
20:35 <%b3x-> jesli np. mamy: body {url(obrazek.jpg); color: #000;}
20:35 <%b3x-> i obrazek nie zostanie pobrany
20:35 <%b3x-> a tlo bedzie czarne domyslnie badz pobrane przez dziedziczenie
20:36 <%b3x-> to tekst taki jak wiadomo bedzie niemozliwy do odczytania ;)
20:36 <%b3x-> to jeden z przykladow niedopracowan
20:36 <%b3x-> sa to kwestie uzytecznosci/dostepnosci/funkcjonalnosci
20:36 <%b3x-> i jesli kogos to interesuje - warto przy tym zatrzymac sie na dluzej
20:37 <%b3x-> tworzac tez kolorystyke do witryny
20:37 <%b3x-> nie mozna przesadzac i nalezy zapewnic odpowiedni kontrast na stronie
20:37 <%b3x-> istnieja dokumenty i specyfikacje dbajace o te kwestie
20:37 <%b3x-> mam tu na mysli WAI, WCAG, ustawe 508
20:37 <%b3x-> polecam zainteresowanie sie na wlasna reke. ;)
20:38 <%b3x-> konczac omowie coraz powszechniejszy trend
20:38 <%b3x-> zwrocmy uwage na kostrukcje strony http://pelnosprawniwpracy.pl/index2.php
20:39 <%b3x-> chodzi mi tu o obiekt ktory ma na celu zwiekszenie dostepnosci
20:39 <%b3x-> zmiana rozmiaru tekstu.
20:39 <%b3x-> liczylem ze na witrynie traktujacej o niepelosprawnych element taki zostanie skonstruowany prawidlowo
20:40 <%b3x-> niestety wyglada na to, ze zostal on zamieszczony jedynie na pokaz.
20:40 <%b3x-> wada tego zastosowania jest to, ze rzeczywiscie zmiana rozmiaru tekstu dziala ale tylko raz, po przejsciu na kolejna podstrone rozmiar pozostaje domyslny.
20:40 <%b3x-> rozwiazanie - nalezy zachowywac takie ustawienie np. w cookie.
20:41 <%b3x-> w ciasteczkach.
20:41 <%b3x-> istnieje wiele skryptow ktore pozwalaja na zmiane rozmiaru na bierzaco
20:41 <%b3x-> biblioteka moo.fx (http://moofx.mad4milk.net/) nawet pozwala na animacje podczas zmiany rozmiaru ;)
20:42 <%b3x-> to nei jest wazne, nalezy zadbac o to, aby wybor taki zostal zapamietany
20:42 <%b3x-> zastanowic tutaj nalezy sie nad jak najwieksza grupa odbiorcow
20:43 <%b3x-> podczas takiego rozwiazania uzytkownik, ktory nie posiada wlaczonej obslugi javascript nie bedzie w stanie powiekszyc fontow
20:43 <%b3x-> ja na bez-slow.pl rozwiazalem to tak, ze nie jest to zalezne od js, ale korzysta z zalet takiego wyjscia
20:44 <%b3x-> majac wylaczone wsparcie dla js rowniez skrypt zadziala
20:47 <%b3x-> pozostawiam rozwiazanie tego problemu samodzielnie, mozna tutaj korzystajac z php stworzyc skrypt ktory korzystajac z HTTP_REFERER pozwoli na zmiane rozmiaru tekstu bez posrednictwa js.
20:48 <%b3x-> pytania? ;-)\
20:48 < Ziel> b3x-: Niekoniecznie w cookies - mozna parametrem php :) link do wiekszej czcionki definiuje parametr a my tylko zczytujemy czy on istnieje, i jesli tak - wtedy do kazdego linku zostaje taki parametr dodany (np ?font=big :P) Byc moze jest to mniej poreczne, ale ja wrecz nie lubie cookies, i jezeli ktos tez woli ich nie uzywac to mu sie to moze przydac :)
20:48 <@phoenix__> tak
20:48 <@phoenix__> b3x-: nie dziala na wylaczonym JS
20:49 <%b3x-> Ziel: ja to rozwiazalem tak, ze jesli nie ma obslugi/akceptacji cookies to jest rozwiazanie w ten sposob, ale nie polecam - burzy to strukture linkow jest dbamy o dobry wyglad URL na podstronach
20:49 <@phoenix__> i blad jest
20:50 <%b3x-> phoenix__: liczy sie sposob, nie podawalem przykladu, w moim wypadku myslalem tu o linku sluzacego do przeskoczenia na wysoki kontrast
20:50 <@phoenix__> aha
20:50 <%b3x-> w zmianie rozmiaru tekstu nie zostalo to zaimplementowane, a tu to tylko kwestia dodania regulki w htaccess.
20:50 < Ziel> burzy strukture linkow? huh?<? if($_GET["font"] == "big"){
20:50 < Ziel> echo('<a class="klasa" href="index.php?cat=podstrona&font=big"');
20:50 < Ziel> else{
20:50 < Ziel> echo('<a class="klasa" href="index.php?cat=podstrona"');
20:50 < Ziel> }
20:50 < Ziel> ?>
20:51 <%b3x-> Ziel: tak, burzy. korzystajac np. z mod_rewrite i ukrywajac 'prawdziwy' sposob struktury takie rozwiazanie jest niedopuszczalne
20:51 <%b3x-> ;)
20:51 < Ziel> achh :P
20:52 < kiero> [;
20:52 <%b3x-> u mnie mam jako pliki .html, podstrona.html?czcionka=big zepsuloby efekt, nieprawdaz? ;-P
20:52 < Ziel> Tak :P
20:52 <%b3x-> ok, czas, nas goni. to byloby na tyle, dziekuje za uwage ;-)