18:31 <@unknow> witam wszystkich :]
18:31 <@unknow> Na wstepie, tak jak nakazuje tradycja wykladow, powiem kim jestem...
18:31 <@unknow> Nazywam sie Jakub Mrugalski, w internecie znany jestem pod pseudonimem "Unknow", nigdzie nie studiuje, co nie znaczy ze mam 10 lat... mam ponad 20 lat i pracuje jako webmaster/programista w jednym z najwi?kszych polskich portali internetowych. W wolnych chwilach zajmuje sie tez serwisem www.uw-team.org i pewnie stad mnie znacie - To tyle :)
18:32 <@unknow> Chcialbym powiedziec ze wyklad przeznaczony jest dla poczatkujacych "wielbicieli tabelek", ktorych mam nadzieje uda mi sie przekonac do uzywania styli CSS i do budowania stron na DIV'ach.
18:32 <@unknow> Jeszcze jedna uwaga... to wyklad o CSS+HTML, wiec prosilbym wszystkich o uruchomienie przegladarek WWW (minimum 3 okna/zakladki)
18:32 <@unknow> Ok... wiec zaczynamy! :)
18:32 <@unknow> Po pierwsze czym sa style... hmm... CSS (bo w nim tworzy sie style) jest jezykiem opisu wygladu strony... cos jak HTML pomysla niektorzy ;)
18:33 <@unknow> Jednak uzywanie CSS'a ma jednak nieco inne zadanie... ma ono na celu odizolowanie kodu strony, od jej faktycznej zawartosci.
18:33 <@unknow> Czyli jakby to powiedzial fachowiec: rozdzielenie warstwy prezentacji od warstwy kodu :)
18:33 <@unknow> Zapytacie "po co?"
18:33 <@unknow> Odpowiedz jest prosta... w profesjonalnej firmie tworzacej strony, nigdy nie ma osoby, ktora pracuje nad wielkim serwisem sama...
18:33 <@unknow> Grafike robi grafik, jeden webmaster pracuje nad jedna czescia serwisu, inny nad jeszcze inna... programista pisze kod w PHP...
18:33 <@unknow> Ogolnie niezle zamieszanie... nie mozna wiec dopuscic, aby np. 5 osob pracowalo w tym samym czasie na jednym pliku :)
18:34 <@unknow> W tym celu tworzy sie np. jeden plik PHP z silnikiem strony... pracuje nad nim programista
18:34 <@unknow> Nastepnie tworzy sie plik HTML z (teraz uwaga!) tekstami na strone umieszczonymi w DIV/SPAN
18:34 <@unknow> I ostatnia osoba tworzy plik CSS z... WYGLADEM strony!
18:34 <@unknow> Co nam to daje?
18:34 <@unknow> Textwriter poprawia swoje teksty 30x na minute, a webmastera to nie przeraza, bo wyglad buduje on w CSS, to inny plik :)
18:34 <@unknow> Programiscie tez to 'lotto' bo textwriter i webmaster nie mieszaja sie do jego kodu... Czyli wszyscy sa zadowoleni :)
18:35 <@unknow> Sa tez inne plusy tej sytuacji... kilka miesiecy temu dostalem do przebudowy STATYCZN? strone pewnego sklepu z motocyklami, która miala okolo 1800 podstron w plikach HTML... (piekne prawada?)
18:35 <@unknow> Trzeba bylo zmienic w nim kolorystyke belek menu na stronie, tak aby pasowaly kolorystycznie do nowo promowanego modelu motocykla Husqvarny...
18:35 <@unknow> Spedzilem nad tym projektem dwa dni... napisalem skrypt, ktory wyszukiwal pliki HTML, otwieral je, wybieral odpowiednie linijki przy zyciu RegExp'a i podmienial ich kolorystyke... po prostu rzeznia :D
18:36 <@unknow> A wystarczylo tak niewiele... gdyby autor strony oparl ja o style, otworzylbym JEDEN plik np. STYLE.CSS, zmienil ustawienia _jednego_ elementu i byloby po wszystkim... pracowalbym 1 minute, a nie dwa dni, a kasy dostalbym tyle samo - jak widac, OPLACA sie uzywac stylow (doslownie :P)
18:36 <@unknow> Ok... koniec teorii, przejdzmy do praktyki... :]
18:36 <@unknow> Styl, czyli opis wygladu, moze byc podpiety do praktycznie kazdego elementu (tagu) HTML'a... np. a, b, i, o, strong, div, span... po prostu kazdy :P
18:36 <@unknow> Nalezy pamietac, ze czesc tagow nalezy do grupy BLOKOWYCH, a czesc do tzw. INLINE
18:37 <@unknow> Mowiac bardzo prostym i niezwykle obrazowym jezykiem, moznaby powiedziec, ze blokiem jest to, co ma ksztalt prostokata (duze uproszczenie)
18:37 <@unknow> Jak wiemy, prostokat moze miec wysokosc, szerokosc i kilka innych zwiazanych z nim atrybutow... elementy inline tego nie maja.
18:37 <@unknow> Dwa najpopularniejsze tagi uzywane przy budowie stron to SPAN i DIV, przy czym DIV jako element blokowy, uzywany jest raczej do rozmieszczania elementow na stronie, natomiast SPAN przewaznie uzywany jest do nadawania atrybutow dla np. fragmentow tekstow itp...
18:37 <@unknow> mamy wiec diva, mamy tez spana... do tego dokladamy CSS :)
18:38 <@unknow> Ale skad CSS ma wiedziec, o ktorym DIV/SPAN mowimy? komputery jak na razie nie czytaja w myslach webmastera, a wiec musimy im lekko pomoc :)
18:38 <@unknow> Kazdy DIV/SPAN powinien miec swoja nazwe (ID) lub przynajmniej klase (CLASS) do ktorej nalezy.
18:38 <@unknow> Chcialbym zaznaczyc, ze uzywanie zamiennie ID/CLASS jest _bledem_
18:38 <@unknow> Atrybut ID uzywany jest do elementow unikalnych, natomiast CLASS do powtarzalnych...
18:39 <@unknow> Czyli jesli np. mamy jeden naglowek, mozemy napisac:
18:39 <@unknow> <div id="naglowek">Tutaj mamy naglowek :)</div>
18:39 <@unknow> Jesli natomiast mamy na stronie np. 3 w pelni IDENTYCZNE bloczki tekstu, to bezsensowne jest uzycie czegos na wzor:
18:39 <@unknow> <div id="blok1">Tekst nr. 1</div>
18:39 <@unknow> <div id="blok2">Tekst nr. 2</div>
18:39 <@unknow> <div id="blok3">Tekst nr. 3</div>
18:40 <@unknow> Tak zbudowany kod sprawi, ze w stylach (plik.css) bedziemy musieli zdefiniowac az 3 nowe obiekty... a przeciez zalezy nam na optymalizacji :)
18:40 <@unknow> lepiej jest wiec napisac:
18:40 <@unknow> <div class="blok">Tekst nr. 1</div>
18:40 <@unknow> <div class="blok">Tekst nr. 2</div>
18:40 <@unknow> <div class="blok">Tekst nr. 3</div>
18:40 <@unknow> proste prawda? :)
18:40 <@unknow> sa jakies pytania?
18:40 <@defc0n> tak
18:40 < netx0r> tak
18:40 < oshogbo> tak
18:40 <@defc0n> tzn nie. tak proste
18:41 <@defc0n> :)
18:41 < cpchild> tak
18:41 < grzesiu_12> znakomity wyklad
18:41 < netx0r> pierwsyz pzryklad z div id gdyby sie zastosowalo
18:41 < netx0r> to to bledem nie bedzie?
18:41 < kanal_lamelog> #lamelog
18:41 < Reqamst> nie trzeba uzywac zawsze id/class
18:41 < oshogbo> a jak damy <div id="blok1"> a pozniej znow <div id="blok1">
18:41 < cauchy> syf ...
18:41 < marines> oshogbo: nie da rady
18:41 <@unknow> oshogbo: tam bloczki maja swoje numerki
18:41 < Reqamst> mozna tez odniesc sie do wszystkich np. divow albo spanow ;p
18:41 < cauchy> o sry, wyklad trwa, bbl ;]
18:41 <@unknow> Reqamst: wiem i bedzie tez taki przyklad :P
18:41 <@unknow> ok.
18:42 <@unknow> Dobrze... teraz przejdzmy do konkretnego przykladu...
18:42 <@unknow> Np. nasz kolega zrobil piekny i wspanialy layout na swoj homepage...
18:42 <@unknow> Oto on:
18:42 <@unknow> http://www.uw-team.org/unki-wyklad/przyk1a.htm
18:43 <@unknow> otworzcie sobie linka :)
18:43 <@unknow> dla tych, ktorzy wlasnie weszli podaje ponownie:
18:43 <@unknow> http://www.uw-team.org/unki-wyklad/przyk1a.htm
18:43 <@unknow> Nie ma to jak niezwykle gustownie dobrana kolorystyka :)
18:43 <@unknow> Ok... teraz wszyscy powinni miec ta strone otwara na pierwszej zakladce przegladarki
18:43 <@unknow> Podgladamy zrodlo i widzimy co?
18:43 <@unknow> Aaaaa.... to tabelki! a mialo byc na divach, unknow nas oszukal :PP
18:44 <@unknow> Hehe... to tylko przyklad :)
18:44 <@unknow> W zrodle widzimy dosc estetycznie wykonana tabele, z przestarzalymi znacznikami typu height, do tego tagi font...
18:44 <@unknow> Jak widac w kodzie strony, czesc wlasciwa (bez zbednych naglowkow) ma okolo 14 linijek.
18:44 <@unknow> A co powiedzielibyscie na to, gdyby napisac to w 4 linijkach? :P
18:44 <@unknow> No to sprobujemy :P
18:45 <@unknow> Jak juz wspomnialem, kazdy tekst powinien byc zamkniety w jakiegos DIV'a lub SPAN'a :)
18:45 <@unknow> uzyjemy DIV'ow, bo to elementy blokowe, a o takie nam chodzi przy budowie strony...
18:45 <@unknow> oto kod:
18:45 <@unknow> <div>To jest naglowek! Prawda, ze ladny? :D</div>
18:45 <@unknow> <div>Tu chcialbym dac menu :)</div>
18:45 <@unknow> <div>A tutaj tresc strony</div>
18:45 <@unknow> <div>Stopke tez wypada miec :)</div>
18:45 <@unknow> Warstwy sa gotowe, ale CSS nie ma zielonego pojecia, jak moznaby je zidentyfikowac...
18:45 <@unknow> Nazwijmy je jakos! :)
18:46 <@unknow> <div id="naglowek">To jest naglowek! Prawda, ze ladny? :D</div>
18:46 <@unknow> <div id="lewa">Tu chcialbym dac menu :)</div>
18:46 <@unknow> <div id="prawa">A tutaj tresc strony</div>
18:46 <@unknow> <div id="stopka">Stopke tez wypada miec :)</div>
18:46 <@unknow> Kazda warstwa jest unikalna, wiec kazda dostala swoj ID. Brak tam natomiast klas, nie beda nam potrzebne :)
18:46 <@unknow> Ok. tworzymy sobie wiec plikczek CSS w ktorym bedziemy umieszczac poszczegolne definicje warstw.
18:46 <@unknow> Zastanowmy sie, jaki ma byc naglowek? :)
18:47 <@unknow> Z kodu HTML widac, ze jest on bialy, pisany czcionka Tahoma, jest ponadto umieszczony na czerwonym tle o wymiarach 500 x 100 i do tego jest wycentrowany w pionie i poziomie :)
18:47 <@unknow> Dla ludzi znajacych temat jest to dosc proste... ;]
18:47 <@unknow> Ale to wyklad dla poczatkujacych, wiec omowie wszystko po kolei...
18:47 <@unknow> zacznijmy od definicji naglowka...
18:47 <@unknow> #naglowek {
18:47 <@unknow> }
18:47 <@unknow> Tadam! :P
18:48 <@unknow> Krzyzyk przed nazwa obiektu oznacza ze jest to element przypisany do ID, kropka natomiast oznaczalaby, ze jest to klasa.
18:48 <@unknow> Definicje mamy, ale jest ona pusta... na poczatek ustawmy jej wiec wymiary oraz kolor, aby przynajmniej odrobine przypominala ostateczny wyglad :)
18:48 <@unknow> oto kod:
18:48 <@unknow> #naglowek {
18:48 <@unknow> width: 500px;
18:48 <@unknow> height: 100px;
18:48 <@unknow> background: #f00;
18:48 <@unknow> }
18:48 <@unknow> O-jeju-jeju-jeju! a dlaczego on napisal 3 znaki na kolor czcionki, a nie 6? Wezmy go pobijmy! :D
18:48 <@unknow> :P
18:49 <@unknow> Heh... mowie od razu, ze to taki skrot... jest to zgodne z CSS 2.0
18:49 <@unknow> #f00 = #ff0000
18:49 <@unknow> Dwie takie same literki stojace przy sobie, kompresuja sie sie do jednej, czyli np. kolor czarny to nie #000000 ale #000
18:49 <@unknow> Mniejsze zrodlo szybciej sie laduje, a wiec warto znac ta wlasciwosc :)
18:49 <@unknow> To co zrobilismy do tej pory, wyglada tak (otwieramy to na drugiej zakladce, aby caly czas widziec orginal):
18:50 <@unknow> http://www.uw-team.org/unki-wyklad/krok1.htm
18:50 <@unknow> Dokument zaciaga styl:
18:50 <@unknow> http://www.uw-team.org/unki-wyklad/styl1.css
18:50 <@unknow> zerknijcie na kod stylu, jest taki, jak podalem na kanale ;)
18:50 <@unknow> ;]
18:50 <@unknow> Ok... kwadracik jest juz w odpowiednich wymiarach, a nawet jest czerwony! wow :)
18:50 <@unknow> Ale... czcionka jest czarna, brzydka, mala i ogolnie nieladna :/
18:51 <@unknow> nadajmy jej wiec kolor (eng. color), wyrownanie tekstu (eng. text-align), wybierzmy odpowiednia rodzine czcionek (eng. font-family) oraz nadajmy czcionce odpowiednia wage (font-weight) poprzez jej pogrubienie :)
18:51 <@unknow> #naglowek {
18:51 <@unknow> width: 500px;
18:51 <@unknow> height: 100px;
18:51 <@unknow> background: #f00;
18:51 <@unknow> color: #fff;
18:51 <@unknow> font-family: Tahoma;
18:51 <@unknow> font-weight: bold;
18:51 <@unknow> text-align: center;
18:51 <@unknow> }
18:51 <@unknow> Proste prawda? :)
18:51 <@unknow> Zastosujmy tez pewna sztuczke do centrowania pionowego tekstow...
18:51 <@unknow> czyli:
18:52 <@unknow> line-height: 100px
18:52 <@unknow> Zapisujemy arkusz CSS i podgladamy wynik...
18:52 <@unknow> oto on:
18:52 <@unknow> http://www.uw-team.org/unki-wyklad/krok2.htm
18:52 <@unknow> no i CSS w pliku:
18:52 <@unknow> http://www.uw-team.org/unki-wyklad/styl2.css
18:52 <@unknow> naglowek skonczony :P
18:52 <@unknow> sa pytania?
18:52 < cpchild> :)
18:52 < oshogbo> nie
18:52 < netx0r> ladnie
18:52 <@defc0n> nie :)
18:52 < java> nie
18:52 < java> :)
18:53 <@unknow> ok. lecimy dalej :)
18:53 <@unknow> to teraz zajmiemy sie dwoma bloczkami ;]
18:53 <@unknow> nie bedzie tu raczej nic innowacyjnego... definicja jak wczesniej :)
18:53 <@unknow> #lewa {
18:53 <@unknow> float: left;
18:53 <@unknow> background: #080;
18:53 <@unknow> height: 300px;
18:53 <@unknow> width: 250px;
18:53 <@unknow> }
18:53 <@unknow>
18:53 <@unknow> #prawa {
18:54 <@unknow> background: #00f;
18:54 <@unknow> height: 300px;
18:54 <@unknow> width: 250px;
18:54 <@unknow> text-align: right;
18:54 <@unknow> }
18:54 <@unknow> sie rozwalilo :)
18:54 <@unknow> przekleje ponownie ;)
18:54 <@unknow> #lewa {
18:54 <@unknow> float: left;
18:54 <@unknow> background: #080;
18:54 <@unknow> height: 300px;
18:54 <@unknow> width: 250px;
18:54 <@unknow> }
18:54 <@unknow> #prawa {
18:54 <@unknow> background: #00f;
18:54 <@unknow> height: 300px;
18:54 <@unknow> width: 250px;
18:54 <@unknow> text-align: right;
18:54 <@unknow> }
18:54 <@unknow> tak ma wygladac kod :]
18:54 <@unknow> doklejamy to do porzedniego arkusza
18:55 <@unknow> zero filozofii, wszystkie znaczniki juz znamy :)
18:55 <@unknow> Zapisujemy styl i przegladamy wynik:
18:55 <@unknow> http://www.uw-team.org/unki-wyklad/krok3.htm
18:55 <@unknow> no i styl:
18:55 <@unknow> http://www.uw-team.org/unki-wyklad/styl3.css
18:55 <@unknow> widze sa pytania :)
18:55 < mowie_serio_cos_ci_niewy> cos ci niewyszlo
18:55 < mowie_serio_cos_ci_niewy> ;P
18:55 < marines> prawy nie zjeżdża na lewy
18:55 <@unknow> tak ma byc, to bylo w planie :P
18:55 < mowie_serio_cos_ci_niewy> :P
18:55 < marines> :P
18:55 < cpchild> lol
18:55 < karkolomny> u mnie tresc jest pod menu
18:56 <@unknow> Calosc sie rozleciala, a przeciez wszystko zrobilismy jak nalezy...
18:56 <@unknow> To czesty blad poczatkujacych :)
18:56 <@unknow> mowie od razu, ze to bylo w planie ;)
18:56 <@unknow> Elementy blokowe maja to do siebie, ze po nich, przegladarka dodaje cos na wzor entera (<br>)
18:56 <@unknow> A wiec kazda nastepna warstwa laduje pod poprzednia... a nie tego chcemy :P
18:57 <@unknow> Czego wiec tu brakuje? tzw. FLOAT... float to mniej wiecej to samo, co ALIGN znany np. z tagow IMG :)
18:57 <@unknow> A wiec do lewej warstwy dopisujemy jeszcze jeden magiczny znacznik:
18:57 <@unknow> float: left;
18:57 <@unknow> :]
18:57 <@unknow> Noo... teraz to juz wyglada po ludzku :)
18:57 <@unknow> dwa pliczki jako dowod:
18:57 <@unknow> http://www.uw-team.org/unki-wyklad/krok4.htm
18:57 <@unknow> http://www.uw-team.org/unki-wyklad/styl4.css
18:57 <@unknow> jak widac przyklad byl w planie ;PP
18:58 <@unknow> ok... w zasadzie zostala stopka, ktora zrobimy praktycznie tak jak naglowek ;]
18:58 <@unknow> #stopka {
18:58 <@unknow> background: #ff0;
18:58 <@unknow> height: 100px;
18:58 <@unknow> width: 500px;
18:58 <@unknow> text-align: center;
18:58 <@unknow> line-height: 100px;
18:58 <@unknow> }
18:58 <@unknow> znow sie rozlecialo, ale widac kod :)
18:58 <@unknow> Zero nowosci, same znane znaczniki, wiec nie bede tego omawial :)
18:58 <@unknow> Efekty sa oczywiscie tutaj:
18:58 <@unknow> http://www.uw-team.org/unki-wyklad/krok5.htm
18:59 <@unknow> oraz kod CSS:
18:59 <@unknow> http://www.uw-team.org/unki-wyklad/styl5.css
18:59 <@unknow> W ten oto sposob otrzymalismy zaplanowany layout... ;]
18:59 <@unknow> Teraz wiekszosc osob przeskakuje miedzy dwoma zakladkami i odkrywczo zauwaza, ze wersja oparta na tabelach, ma takie fajne odstepy miedzy komorkami, a nasza wersja tego nie ma...
19:00 <@unknow> i tutaj wlasnie musimy zastosowac to, o czym wspominala jedna osoba z poczatku wykladu :)
19:00 <@unknow> czyli... odwolanie do wszystkich elementow typu DIV na raz :)
19:00 <@unknow> musimy po prostu ustawic ramke koloru bialego o grubosci 1px ;]
19:00 <@unknow> Poczatkujacy webmaster napisalby teraz:
19:00 <@unknow> border: 1px solid #fff;
19:01 <@unknow> i dokleil ten kod do naglowka, stopki i dwoch dodatkowych warstw... lacznie 4 linijki.. :/
19:01 <@unknow> (4 linijki, bo 4 warstwy...)
19:01 <@unknow> Ale my lubimy optymalizacje! po co dawac cztery, jak mozna jedna? :P
19:01 <@unknow> Hmmm... co laczy wszystkie warstwy? prawdopodobnie to, ze sa one utworzone tagiem <DIV>
19:02 <@unknow> Dopiszmy wiec ta wlasciwosc do taga! :P
19:02 <@unknow> div {border: 1px solid #fff;}
19:02 <@unknow> Ta wlasciwosc zostnie odziedziczona przez wszystkie DIV'y :)
19:02 <@unknow> efekt jak latwo sie domyslic, jest tutaj:
19:02 <@unknow> http://www.uw-team.org/unki-wyklad/krok6.htm
19:02 <@unknow> no i arkusz:
19:02 <@unknow> http://www.uw-team.org/unki-wyklad/styl6.css
19:02 <@unknow> No i mamy wlasciwie idealna kopie pierwowzoru :)
19:02 < marines> a nie lepiej dać divom marginesu jednopikselowego, a potem border-colapse?
19:02 <@unknow> sa pytania?
19:02 < Reqamst> tak
19:03 < Eun> http://img210.imageshack.us/img210/5543/hmmmm1ok.jpg
19:03 < Eun> tak to u mnie wyglada..
19:03 < Reqamst> a raczej zastrzezenie
19:03 < discovery> http://66.246.252.17/~nfseplik/q/wyklad.jpg i u mnie ;]
19:03 < karkolomny> u mnie nie ma tresci
19:03 < Reqamst> border nie uzywa sie do robienia ostepow
19:03 < Reqamst> powinno sie uzyc margin ;p
19:03 < marines> u mnie jest ok
19:03 < netx0r> eun: u mnie tez i tak ma byc:D
19:03 < marines> Reqamst: no wła¶nie
19:03 < oshogbo> umnie tez niema niebieskiej
19:03 < karkolomny> :DDD
19:03 < oshogbo> :P
19:03 <@unknow> Reqamst: margin bedzie pozniej :P
19:03 < karkolomny> tak ma byc
19:03 < Eun> hm netx0r to w takim razie troche odbiega od pierwowzoru
19:03 < karkolomny> :D
19:03 < marines> u mnie na Operze 9 idzie pięknie
19:03 < grzesiu_12> :P
19:04 < grzesiu_12> znakomityw wyklad !
19:04 < netx0r> u mnie na ff 1.5.0.4
19:04 < karkolomny> u mnie na mozilli zwyklej i na firefoxie nie ma
19:04 < oshogbo> a umnie nieba niebieskiej komlumny
19:04 < grzesiu_12> u mnie tez na operze ieknie
19:04 < Tanlin> opera 9.01 otwiera dobrze
19:04 < netx0r> grzesiu: nom;]
19:04 < cpchild> w ff sie pieprzy
19:04 < Reqamst> grzesiu_12 to bot?
19:04 <@unknow> ja testowalem kod na firefox + opera i jest Ok :]
19:05 <@unknow> czy tylko na tym etapie zniknela warstwa?
19:05 < Eun> na 4
19:05 < cpchild> tak na 4
19:05 <@unknow> zaraz zerkne
19:05 < Tanlin> u mnie tez na ffoxsie sie wywala
19:05 < Tanlin> ale na operze jest ok
19:06 <@unknow> jeszcze momencik :)
19:07 <@unknow> ok. to cos ze standardami firefoxa widocznie :)
19:08 <@unknow> kilka osob sprawdzilo i reszta jest ok
19:08 <@unknow> wlasnie to dla was poprawiam :)
19:10 <@unknow> ok. to moze za dlugo potrwac
19:10 <@unknow> jestesmy przy kroku nr. 6
19:10 <@unknow> oto link:
19:10 <@unknow> http://www.uw-team.org/unki-wyklad/krok6.htm
19:10 <@unknow> kto ma mozliwosc, niech otworzy przyklad pod opera/ie itp...
19:10 <@unknow> nawet ie to dobrze wyswietla :P
19:11 <@unknow> Ok... szablon jest, wszystko dziala i jest _PRAWIE_ (ehh... firefox) pieknie... ale zalozmy, ze wlasnei copywriter przygotowal nam teksty, czyli zmodyfikowal pliczek HTML :)
19:11 <@unknow> http://www.uw-team.org/unki-wyklad/krok7.htm
19:11 <@unknow> wklejony zywcem tekst :)
19:12 <@unknow> jedna uwaga!
19:13 <@unknow> po wykladzie w tzw. 'packu' beda zrodla zoptymalizowane takze pod firefoxa :)
19:13 <@unknow> wiec firefoxiarze nie maja sie co zalamywac i o nich pomysle :]
19:13 <@unknow> ok... czarny tekst na niebieskim tle... zero kontrastu... poza tym grafik sie czepia, ze marginesow nie ma :/
19:14 <@unknow> Sprawe marginesow moznaby tak na prawde rozwiazac przez tzw. PADDING (cos jak margines wewentrzny marstwy) podpiety do obiektu #prawa
19:14 <@unknow> *warstwy
19:14 <@unknow> Ale my tak nie zrobimy! :D
19:14 <@unknow> Dlaczego? ;>
19:14 <@unknow> poniewaz padding nie do konca poprawnie interpretowany jest przez...
19:14 <@unknow> tak! wlasnie! FIREFOXA :P
19:15 <@unknow> firefox to dziwna bestia, trudno to oswoic, ale da sie ;P
19:15 <@unknow> na firefoxie jesli mamy warstwe 100px i ustawimy padding na 10px od gory i dolu, to otrzymamy warstwe 120px, a tego bysmy nie chcieli :)
19:15 <@unknow> Dlatego tez edytujemy teraz zrodelko HTML i zamkniemy tekst w oddzielnym tagu...
19:15 <@unknow> mamy teraz:
19:15 <@unknow> <div id="prawa"><div id="tekst">...tutaj tekst...</div></div>
19:15 <@unknow> :]
19:15 <@unknow> Zdefiniujmy teraz tylko odpowiedni znacznik w CSS:
19:16 <@unknow> #tekst {
19:16 <@unknow> margin: 10px;
19:16 <@unknow> color: #fff;
19:16 <@unknow> }
19:16 <@unknow> Aleee... jedna uwaga! Przed chwila przeciez nadalismy obramowanie kazdemu DIV'owi :P
19:16 <@unknow> Nasz nowy tekst tez bedzie mial ramke, a to baaaardzo nieladnie wyglada...
19:16 <@unknow> Dopiszmy mu wiec jedna wlasciwosc:
19:16 <@unknow> border: none;
19:17 <@unknow> to po prostu wylaczy obramowanie danego elementu :)
19:17 <@unknow> a teraz cieszmy oczy naszym dzielem:
19:17 <@unknow> http://www.uw-team.org/unki-wyklad/krok8.htm
19:17 <@unknow> i oczywiscie arkusz:
19:17 <@unknow> http://www.uw-team.org/unki-wyklad/styl8.css
19:17 <@unknow> wszystko wyglada tak jak byc powinno ;)
19:17 <@unknow> przynajmniej u mnie :PP
19:17 <@unknow> sa pytania?
19:18 < marines> no sk±d?? to IE Ľle padding interpretuje! wła¶nie tak jak robi FF powinno być
19:18 < oshogbo> heh a umnie na IE
19:18 < oshogbo> niebieska troche wystaje ;p
19:18 < cpchild> ;p
19:18 < beomboy> unknow,duzo sie spoznilem?
19:18 < beomboy> ;D
19:18 <@unknow> beomboy: jakies 50 minutek :)
19:18 <@unknow> lecimy dalej...
19:18 <@unknow> strona prawie gotowa.... brakuje w zasadzie tylko jakiegos menu ;)
19:19 <@unknow> webmaster czarodziej wlasnie je nam wkleil:
19:19 <@unknow> http://www.uw-team.org/unki-wyklad/krok9.htm
19:19 <@unknow> :]
19:19 <@unknow> Nie za ladne... po pierwsze wszystko jest w jednej linijce, po drugie kolory nie sa takie jakie nam sie podobaja... ogolnie brzydko :)
19:20 <@unknow> Moznaby rozdzielic te znaczniki <a> przy uzyciu <br>, ale to wyklad o CSS, a nie HTML :P
19:20 <@unknow> ok... ok... co chcemy osiagnac?
19:21 <@unknow> linki maja byc lekko oddalone od lewej krawedzi warstwy... powinny byc niepodkreslone, pisane kolorem bialym, a po najechaniu na nie maja sie podkreslac i zmienaic swoj kolor... prosty efekt...
19:21 <@unknow> no i oczywiscie kazdy link ma byc w nowej linijce! :)
19:21 <@unknow> na poczatek definiujemy zachowanie CSS'a odnosnie tagow <a>:
19:21 <@unknow> a {
19:21 <@unknow> color: #fff;
19:21 <@unknow> text-decoration: none;
19:21 <@unknow> margin-left: 20px;
19:21 <@unknow> display: block
19:21 <@unknow> }
19:22 <@unknow> pojawil sie tu jeden nowy znacznik!
19:22 <@unknow> mianowicie "display: block"
19:22 <@unknow> jak wiadomo (lub nie :P) tag <a> jest typu INLINE
19:22 <@unknow> a tagi blokowe maja wlasciwosc o ktorej juz wspominalem...
19:23 <@unknow> kazdy tag wystepujacy po nich, pisany jest w nowej linijce
19:23 <@unknow> tak wiec uzywam tego w celu obejscia niejako problemu <br> :)
19:23 <@unknow> teraz trzeba tylko zerknac na efekty:
19:23 <@unknow> http://www.uw-team.org/unki-wyklad/krok10.htm
19:23 <@unknow> oraz na nowo utworzony arkusz:
19:23 <@unknow> http://www.uw-team.org/unki-wyklad/styl10.css
19:24 <@unknow> Nooo... prezentuje sie dosc przyzwoicie :)
19:25 <@unknow> Ale efektu rollover nie ma na linkach (zmiana wygladu po najechaniu myszka)
19:25 <@unknow> musimy wiec uzyc kolejnego nowego znacznika
19:25 <@unknow> w zasadzie nie znacznika, a tzw. zdarzenia :]
19:25 <@unknow> nazwya sie to cudo "hover"
19:26 <@unknow> Zdarzenie 'hover' wykonuje sie w momencie, gdy myszka jest nad danym obiektem :)
19:26 <@unknow> ok. teraz wypada dac kod ;)
19:26 <@unknow> a:hover {
19:26 <@unknow> color: #f00;
19:26 <@unknow> text-decoration: underline;
19:26 <@unknow> }
19:26 <@unknow> efekty sa tam gdzie zawsze ;P
19:26 <@unknow> http://www.uw-team.org/unki-wyklad/krok11.htm
19:26 <@unknow> oraz:
19:27 <@unknow> http://www.uw-team.org/unki-wyklad/styl11.css
19:27 <@unknow> najedzcie myszka na linki aby cokolwiek bylo widac ;P
19:27 <@unknow> Yeahh! piekne, cudowne i ogolnie cool --- o to chodzilo ;P
19:27 <@unknow> sa pytania?
19:27 < beomboy> Nie.
19:27 < marines> należy zauważyć że pseudo :hover dla innych elementów niż linki nie działa w innych przegl±darkach niż mozilla/firefox
19:27 < nieodpowiedziales> czemu niebieska ramka wystaje :P
19:27 < cpchild> nein
19:27 < beomboy> Kiedy koniec?
19:27 < Reqamst> tak
19:28 <@unknow> ok. prawda jest to co powiedzial marines :)
19:28 <@unknow> hover w zasadzie zadziala bez problemu na wszystkich elementach pod przegladarkami takimi jak opera i firefox
19:28 <@unknow> natomiast IE w pelni go zignoruje
19:28 <@unknow> ;]
19:29 <@unknow> ok... kolejna sprawa
19:29 <@unknow> sprawa przypisywania wlasciwosci konkretnym taga wewnatrz innego tagu...
19:29 <@unknow> czyli zalozmy, ze mamy zdefiniowany wyglad wszystkich akapitow <p>
19:29 <@unknow> p {color: #f00;}
19:30 <@unknow> mamy tez warstwe (np. "przyklad") na ktorej jest znacznik P :)
19:30 <@unknow> chcemy sprawic, aby tekst na calej stronie byl czerwony (#f00) ale tylko na tej jednej warstwie stal sie np. niebieski :)
19:30 <@unknow> musimy zdefiniowac ten styl nastepujaco:
19:31 <@unknow> #przyklad p { color: #00f; }
19:31 <@unknow> to przypisze nowa wlasciwosc do tagow <p> wewnatrz elementu i ID = "przyklad"
19:31 <@unknow> ok... kolejny problem
19:32 <@unknow> na priv dostalem wlasnie zapytanie, "co robi line-height"
19:32 <@unknow> uzylem line-height aby wycentrowac napisa w stopce i naglowku...
19:32 <@unknow> jak nazwa wskazuje, sluzy to do ustalenia wysokosci linii
19:32 <@unknow> zwykle podaje sie to w procentach
19:32 <@unknow> to cos jak interlinia w Wordzie, czy tez innym edytorze tekstu ;)
19:33 <@unknow> np. piszac podanie do szkoly ustawiamy interlinie na 1,5 ;)
19:33 <@unknow> w przypadku CSS byloby to: 150%
19:33 <@unknow> ;]
19:33 <@unknow> ja uzylem jednej z wlasciwosci line-height
19:33 <@unknow> mianowicie...
19:33 <@unknow> jesli czcionka tekstu jest mniejsza od wysokosci linii, to tekst pisany jest dokladnie po srodku bloku :]
19:33 <@unknow> czyli...
19:33 <@unknow> ustawilem wielkosc linii na 100px
19:34 <@unknow> tyle tez mial naglowek
19:34 <@unknow> ale czcionka byla duzo mniejsza ;]
19:34 <@unknow> jest wiec ona wycentorwana w pionie wzgledem naglowka
19:34 <@unknow> ten sam efekt zostal uzyty w stopce ;]
19:34 <@unknow> hmmmm
19:34 <@unknow> kolejna sprawa...
19:34 <@unknow> uzylem znacznika marginesu...
19:35 <@unknow> napsialem w obiekcie #tekst cos takiego:
19:35 <@unknow> margin: 10px;
19:35 <@unknow> oznacza to, ze margines prawy, lewy, gora, dol sa ustawione na 10px
19:35 <@unknow> znacznik margin przyjmuje 1, 2 lub 4 parametry
19:35 <@unknow> jesli jeden parametr, to wszystkie strony ustawione sa na ta wartosc
19:36 <@unknow> jesli podane sa dwa parametry, to oznaczaja one kolejno: gora/dol lewa/prawa
19:36 <@unknow> czyli:
19:36 <@unknow> margin: 10px 20px;
19:36 <@unknow> oznacza:
19:36 <@unknow> 10px marginesu gornego i dolnego + 20px po bokach
19:36 <@unknow> mozna jeszcze wywolac margin z czterema parametrami
19:36 <@unknow> wazna jest oczywiscie ich kolejnosc
19:36 <@unknow> skladnia wyglada tak:
19:36 <@unknow> margin: gora prawa dol lewa;
19:37 <@unknow> czyli zgodnie ze wskazowkami zegara patrzac od gory :]
19:37 <@unknow> margin: 1px 2px 3px 4px;
19:37 <@unknow> takie cos ustawi:
19:37 <@unknow> 1px marginesu gornego, 2px prawego, 3px dolnego i 4px lewego :)
19:37 <@unknow> IDENTYCZNA skladnie ma PADDING :]
19:37 <@unknow> roznica miedzy padding i margin jest zasadnicza ;]
19:38 <@unknow> margin to odstep zewnetrzny, padding wewnetrzny
19:38 <@unknow> kolejna sprawa... jednostki ;)
19:38 <@unknow> specyfikacja podaje, ze w przypadku podawania cyfr, jednostke mozna pominac _TYLKO_ w przypadku zera :]
19:38 <@unknow> czyli wolno napsiac:
19:38 <@unknow> margin: 0;
19:39 <@unknow> to zaszczedzi cale 2 bajty ;P
19:39 <@unknow> nie wolno natomiast napisac np.:
19:39 <@unknow> margin: 123;
19:39 <@unknow> taki zapis przejdzie przez IE oraz Opere, ale Firefox wyrzuci w swoich logach ze ignoruje ta wartosc ;]
19:39 <@unknow> poza tym validacja sie bedzie rzucac ;)
19:40 <@unknow> jeszcze jeden ciekawy znacznik...
19:40 <@unknow> czesto bywa tak, ze chcemy przypisac WSZYSTKIM obeiktom jakas wlasciwosc
19:40 <@unknow> najczesciej jest to np. margines ;]
19:40 <@unknow> do tego sluzy gwiazdka
19:40 <@unknow> * { margin: 0; }
19:41 <@unknow> to poprawna skladnia, interpretowana przez wszystkie znane mi przegladarki :]
19:41 <@unknow> jeszcze sprawa tla elementu
19:41 <@unknow> w przykladasz uzywalem skladni:
19:41 <@unknow> background: kolor
19:42 <@unknow> background przyjmuje oczywiscie tez wartosc w postaci pliku graficznego
19:42 <@unknow> przyklad:
19:42 <@unknow> background: url(/obrazki/tlo.jpg);
19:42 <@unknow> tlo ma wiele opcji konfiguracyjnych :)
19:42 <@unknow> moze byc np. powtarzane we wszystkich kierunkach (domyslnei), powtarzane po X, po Y lub nie powielane
19:43 <@unknow> mamy np. gradient o wysokosci 1000px i szerokosci 1px
19:43 <@unknow> chcemy wypelnic nim strone...
19:43 <@unknow> oto kod:
19:43 <@unknow> background: url(gradient.jpg) repeat-x;
19:43 <@unknow> kolejnym czestym problemem, jest jeszcze tlo niepowielane...
19:43 <@unknow> mamy np. grafike 100 x 100
19:44 <@unknow> chcemy, aby byla ona na srodku strony, oblana np. czarnym kolorem :)
19:44 <@unknow> oto kod:
19:44 <@unknow> background: #000 url(tlo.jpg) center no-repeat;
19:44 <@unknow> jak widac znacznik koloru mozna mieszac z odwolaniem do pliku :]
19:44 <@unknow> tez powinno na wszystkim dzialac ;P
19:45 <@unknow> nastepna rzecz....
19:45 <@unknow> kolejnosc warstw :)
19:45 <@unknow> czesto chcemy osiagnac taki efekt, ze jedna warstwa nachodzi na druga
19:46 <@unknow> zwykle nie ma z tym problemu, bo stosujemy pozycjonowanie absolutne albo relatywne :)
19:46 <@unknow> ale kolejnosc warstw ustalana jest na podstawie ich definicji w kodzie
19:46 <@unknow> to znaczy:
19:46 <@unknow> warstwa wywolana pozniej jest wyzej na stercie warstw
19:46 <@unknow> ale da sie to zmienic :)
19:47 <@unknow> z pomoca przychodzi tzw. z-index ;)
19:47 <@unknow> z-index to niestety jak mawiaja niektorzy 'wymysl mozilli'
19:47 <@unknow> a wiec jak latwo sie domyslic, na IE nie dziala :/
19:47 <@unknow> uzywa sie go w bardzo prosty sposob:
19:48 <@unknow> #warstwa {
19:48 <@unknow> z-index: 100;
19:48 <@unknow> }
19:48 <@unknow> z-index to tak jakby wysokosc warstwy na osi Z
19:48 <@unknow> im wieksza wartosc z-index tym wyzej lezy warstwa
19:48 <@unknow> jesli mamy dwie wartosci z-index, np.: 2 i 5
19:48 <@unknow> to warstwa 5 przykrywa warstwe 2 :]
19:48 <@unknow> mysle ze zrozumiale ;P
19:49 <@unknow> w przypadku IE naturalnie zostaje jedynie kolejnosc wystepowania w zrodle
19:49 <@unknow> sa podobno jakies obejscia tego, ale one z kolei nie dzialaja na Firefox (jak ja lubie ta przegladarke ;P)
19:50 < cpchild> w tym wypadku 'background: url(gradient.jpg) repeat-x;' tlo zostanie powielone tylko w poziomie, przy uzyciu 'repeat' tlo bedzie zarowno w pionie jak i poziomie
19:50 <@unknow> sa pytania?
19:50 < diabel> czesc
19:50 < phoenix__> tak
19:50 < phoenix__> tylko rece umyje sec
19:50 < diabel> sory za spoznienie :/
19:50 < oshogbo> powiedzmy
19:50 < oshogbo> ze wszystko zrozumiale :P
19:50 <@unknow> :)
19:50 < grzesiu_12> tak
19:50 < phoenix__> wiec tak
19:50 < grzesiu_12> ;)
19:50 < aurox> duzo do ko'nca?
19:50 < phoenix__> z-index
19:51 < phoenix__> to jest glebiej ?
19:51 < phoenix__> np jak damy
19:51 < phoenix__> z-index: 20px;
19:51 < marines> phoenix__: nie
19:51 < mmN> lol chyba bede musial czytac logi .. :>
19:51 < phoenix__> to bedze 20px w glab czy na zewnatrz?
19:51 <@unknow> phoenix__: z-index to liczba nie pixele
19:51 < marines> to jest tylko kolejno¶ć :D
19:51 < Marlin|aw> http://tinyurl.com/ntkmr
19:51 <@unknow> phoenix__: nie bedzie glebiej, bedzie pod lub nad :]
19:51 < grzesiu_12> ść
19:51 < phoenix__> no ale jak to jest stosowane?
19:51 < beomboy> unknow, a co robi <br clear="both" /> ?
19:52 < marines> phoenix__: no dajesz dla elementów kolejno¶ć
19:52 <@unknow> phoenix__: chcesz przykryc jedna warstwa druga, to ustawiasz im kolejnosc
19:52 < marines> beomboy: oczyszcza po bokach
19:52 <@unknow> Marlin|aw: prosze nie spamowac // to sie wytnie
19:52 < phoenix__> unknow: czyli np w jednej daje (te na wierzchu) 1
19:52 < Reqamst> powiedziales, ze niepoprawnie fx interpretuje padding poniewaz zwieszky np. wysokosc diva
19:52 < Reqamst> a tak wlasnie ma byc
19:52 < phoenix__> a w drugiej 2? ta pod spodem?
19:52 < phoenix__> tak?
19:52 <@unknow> phoenix__: wlasnie na odwrot ;)
19:53 < grzesiu_12> away
19:53 <@unknow> phoenix__: wieksza wartosc to wyzsza pozycja
19:53 <@phoenix__> aa
19:53 < grzesiu_12> niom ;]
19:53 <@phoenix__> rozumiem ;)
19:53 <@phoenix__> a jak bedize stosowane
19:53 <@unknow> Reqamst: moze tak ma byc wg. specyfikacji, ale my tego nie chcemy ;P
19:53 <@phoenix__> tylko na jednej warstwie
19:53 < marines> jak na jednej?
19:53 <@unknow> phoenix__: domyslnie warstwa ma przypisany z-index rowny jej numerowi
19:53 <@phoenix__> no tylko jedna warstwa ma z-index
19:53 < Reqamst> a to jak zrobisz np. zeby text byl oddalony od krawedzi diva?
19:53 <@unknow> phoenix__: pierwsza ma 1, druga 2....
19:54 <@phoenix__> mhm
19:54 <@phoenix__> aha rozumiem
19:54 < Reqamst> zwiekszenie wielkosci i wyposrodkowanie jest bledne
19:54 < marines> Reqamst: padding?
19:54 <@phoenix__> czyli 2 bedzie widac a tamta bedzie podspodem
19:54 < Reqamst> marines: wlasnie
19:54 <@unknow> Reqamst: zgadza sie, wtedy uzyje paddinga z poprawka na Firefoxa
19:54 <@unknow> poprawka w stylu:
19:54 <@phoenix__> dobra chyba all
19:54 <@unknow> html>element {....}
19:55 <@unknow> ta skladnia widzina jest tylko przez FX
19:55 <@phoenix__> html.element { ...} chyba?
19:55 <@unknow> phoenix__: nie zupelnie
19:55 <@phoenix__> . czy >
19:55 <@phoenix__> ?
19:55 <@unknow> przyklad z zycia nad ktorym pracowalem:
19:55 <@unknow> http://mr2006.interia.pl/gra.css
19:55 <@unknow> jest tam:
19:55 <@unknow> html>body .g6 {width: 127px; height: 15px; float: right; text-align: center}
19:56 <@unknow> skladnia "html>body" to cos typowego dla FX
19:56 < grzesiu_12> a co to te g6 ?
19:56 <@unknow> inne przegladarki to ignoruja
19:56 < grzesiu_12> klasa ?
19:56 <@unknow> grzesiu_12: to nazwa klasy
19:56 <@unknow> tak
19:56 < cpchild> ta
19:56 < grzesiu_12> ok
19:56 < marines> ten ostry nawias to dziedzicznenie?
19:56 <@phoenix__> no ja tam nie widze >
19:56 < marines> *dziedziczenie
19:56 <@phoenix__> a mam
19:56 <@phoenix__> ;]
19:56 <@unknow> marines: tak, ale TYLKO pod FX
19:57 <@phoenix__> FF chyba
19:57 <@phoenix__> ;P
19:57 < marines> FX = FF?
19:57 <@unknow> marines: ta linijka znaczy "nadpisz definicje klasy .g6 dla firefoxa"
19:57 <@phoenix__> tak
19:57 <@unknow> jak widzisz, nadpisuje tam wielkosc ;]
19:57 <@unknow> bo wlasnie ona zmienila sie przez paddinga ;]
19:57 <@phoenix__> czyli po prostu jakby nowe .g6?
19:57 < Reqamst> marines: fx to poprawny skrot firefoksa
19:57 <@unknow> phoenix__: tak
19:57 < marines> :D
19:58 <@phoenix__> unknow: zle
19:58 < olka> ja mam tylko pytanie: czy ten tekst (lacina?) mial byc caly w stopce?
19:58 <@phoenix__> nie nowe, tylko nadpisane wartosci poprzedniego
19:58 < olka> bo u mnie to tragicznie wyglada
19:58 < cpchild> bo ff przegladasz
19:58 <@phoenix__> olka: nie
19:58 <@unknow> phoenix__: w zasadzie tak
19:58 < cpchild> w ie i operze jest dobrze
19:58 < Reqamst> ie nie jest zgodne ze w3c
19:58 < Reqamst> a opera czesc pozmieniala sobie ;p
19:59 < oshogbo> czy to juz koniec wykladu ?
19:59 < cpchild> jzu moge siku :P
19:59 < cpchild> ?
19:59 <@unknow> Reqamst: opera najnowsza zalicza Acid2 ;)
19:59 <@phoenix__> go
19:59 <@phoenix__> dalej
19:59 <@unknow> ok...
19:59 <@unknow> w zasadzie tyle chcialem na dzis powiedziec, a opcje +m ustawilem aby to ladnie zakonczyc ;P
20:00 <@unknow> odpowiedzialem na wszystkie zadane pytania, wiecej pytan nie ma ;]
20:00 <@unknow> jesli bedzie taka potrzeba, zorganizujemy kolejny wyklad dla nieco bardziej zaawansowanych
20:00 <@phoenix__> wtrace sie
20:00 <@phoenix__> moze jeszcze jakkies inne popularne bledy?
20:00 <@phoenix__> ;>
20:00 <@unknow> chcialbym tez zaprosic wszystkich na wyklad organizowany przez b3x'a (podobna tematyka)
20:01 <@unknow> phoenix__: o popularnych bledach bedzie wlasnie wykald buteruxa... cale 2h ;P
20:01 <@unknow> ja mialem was tylko wprowadzic w tematyke :)
20:01 <@phoenix__> btw jeszcze 30min ;PPPP
20:01 <@phoenix__> pisz dalej ja nie przeszkadzam
20:01 <@unknow> ok ;)
20:01 <@unknow> to jeszcze jedna sprawa...
20:01 <@unknow> wyklad ten nie ma na celu naklonic was do rezygnowania z tabelek :)
20:01 <@unknow> tabelki sa fajne, ladne itp. :P
20:02 <@unknow> ale jedna wazna uwaga....
20:02 <@unknow> tabelki sa do danych TABELARYCZNYCH
20:02 <@unknow> co to znaczy?
20:02 <@unknow> jesli szef kaze wam zrobic spis pracownikow (np. 1000 sztuk) wraz z ich zarobkami
20:02 <@unknow> to nie zamykajcie kazdego nazwiska, imienia i placy w osobnym divie
20:02 <@unknow> i nie pozycjonujcie tego...
20:03 <@unknow> do tego typu danych sluzy tabela! :)
20:03 <@unknow> to tak, jakby uzyc srubokreta do wbijanai gwozdzia ;)
20:03 <@unknow> gwozdzia wbijesz.... ale tak sie nie robi ;P
20:03 <@unknow> radze po prostu nie stosowac tabel do pozycjonwoanai zawartosci
20:03 <@unknow> to bardzi zasmieca kod
20:04 <@unknow> czasami jednak trzeba neistety napsiac layout tak 50% / 50%
20:04 <@unknow> cos takiego stosowane jest np. na uw-team.org
20:04 <@unknow> spowodowane jest to duza iloscia odwiedzic ludzi, ktorzy maja np. linksa, stare wersje IE itp... :P
20:05 <@unknow> pod linksem strona zrobiona w 100% na CSS po prostu jest smieciem ktorego nei da sie czytac... :(
20:05 <@unknow> kolejna rzecz...
20:05 <@unknow> strona wzorcowa ktora przerabialismy przez wyklad byla o polowe mniejsza od strony koncowej + css
20:06 <@unknow> a mowilem przeciez, ze to oszczednosc miejsca, czasu itp ;P
20:06 <@unknow> ;)
20:06 <@unknow> i nie klamalem ;)
20:06 <@unknow> wyobrazmy sobei sytuacje, gdy mamy np. serwis posiadajacy 10 statycznych stron
20:06 <@unknow> wszystkie sa IDENTYCZNE pod wzgledem grafiki itp..
20:06 <@unknow> roznia sie tylko tekstem :)
20:07 <@unknow> czy lepiej pisac definicje wygladu na kazdej, czy lepiej zdefiniowac wyglad w jednym miejscu i pozniej go zaincludowac? ;>
20:07 <@unknow> mysle ze to drugie ;]
20:07 <@unknow> styl zwykle sciagany jest jeden raz i siedzi w cache
20:07 <@unknow> wiec nie przejmujmy sie, ze sciagamy 1kb opisu strony
20:07 <@unknow> sciagnie sie raz i bedzie dostepny dla 10 podstron :)
20:08 <@unknow> poza tym przyklad ktory podalem w przypadku strony Husqvarny tez jest dosc przemawiajacy ;P
20:08 <@unknow> zmienaimy jeden plik i 1800 podstron zostaje zmodyfikowanych :)
20:08 <@unknow> ok...
20:08 <@unknow> a teraz oddaje glos koledze, ktory chcialby cos dopowiedziec ;P
20:08 <@unknow> przeeeed paaaanssstweeem b3x ;P
20:08 <@unknow> ;]
20:09 -!- Irssi: #wyklady: Total of 86 nicks [5 ops, 2 halfops, 0 voices, 79 normal]
20:09 <@b3x`> witam, ja tak na marginesie, bo troszke sie spoznilem
20:09 <@b3x`> co do jednej rzeczy napisanej przez unknowa
20:09 <@b3x`> <@unknow> pod linksem strona zrobiona w 100% na CSS po prostu jest smieciem ktorego nei da sie czytac... :(
20:09 <@b3x`> rozwijajac te mysl
20:09 <@b3x`> jest pewne zagadnienie zwane semantyka
20:10 <@b3x`> chodzi o to, ze np. gdy calosc strony bedzie na "divach" bez dodatkowych elementow
20:10 <@b3x`> to rzeczywiscie, strona ogladana pod linksem bedzie wygladac jak zbity blok tekstu
20:10 <@b3x`> natomiast jesli zostanie zbudowana w semantyczny sposob uzywajac elementow do tego przeznaczonych
20:11 <@b3x`> uklad strony ogladajac ja w jakikolwiek sposob bez CSS znaczaco sie zmieni
20:11 <@b3x`> przy okazji podobna mysl
20:11 <@b3x`> jak wiecie, podajac na stronie zewnetrzne zrodlo css
20:11 <@b3x`> (moge sie powtarzac, nie czytalem poczatku)
20:11 <@b3x`> podajemy rowniez media="cos"
20:12 <@b3x`> bledem jest to, ze niektorzy wpisuja nieswiadomie tylko media="screen"
20:12 <@b3x`> oznacza to, ze np. przy wydruku caly wyglad zostanie zaburzony
20:12 <@b3x`> i wlasnie wtedy rowniez tak duze znaczenie ma semantyka
20:12 <@b3x`> ale o tym wiecej na wykladzie we wtorek, ktorego bede mial przyjemnosc prowadzic
20:12 <@b3x`> ;-)
20:13 <@b3x`> to tyle ode mnie na ten temat.
20:13 <@phoenix__> Pyt: Czy jest możliwo¶c je¶li tak to jak(bez PHP) zrobienia jako¶ wersji na przegladarke?
20:13 <@b3x`> jest mozliwosc oparta na tzw. komentarzach warunkowych
20:14 <@b3x`> mozna dac osobny styl dla IE
20:14 <@unknow> ale firefox (nasza ukochana przegladarka) raczej tego nie akceptuje? ;>
20:14 <@b3x`> sekunda, podaje linka
20:14 <@b3x`> nie, komentarze warunkowe obsluguje kazda popularniejsza przegladarka
20:15 <@b3x`> 
20:15 <@b3x`> w taki sposob mozna zamiescic fragment kodu ktory jest przeznaczony tylko na IE
20:15 <@b3x`> dobry zrodlem informacji na ten temat jest:
20:15 <@b3x`> http://leksykot.top.hell.pl/notatki/www/ie-hacks.shtml
20:16 <@b3x`> pytania?
20:16 <@phoenix__> dobrze, to teraz co lepiej stosowac, tabelki czy divy?
20:16 <@unknow> phoenix__: zalezy do czego ;>
20:16 <@b3x`> nie mozna jednoznacznie odpowiedziec na to pytanie
20:16 <@phoenix__> przyjmujac ze 50% odwiedzalnosci to przegladarki textowe
20:16 <@b3x`> generalnie chodzi o to, ze samo pisanie "divy" jest nie do konca poprawne
20:16 <@unknow> tabele stosujemy do danych tabelarycznych.... divy do np. pozycjonowania, nie na odwrot ;P
20:17 <@b3x`> zgadza sie
20:17 <@b3x`> oczywiscie istnieja purysci, ktorzy do danych tabelarycznych rowniez zastosuja "divy"
20:17 <@b3x`> mozliwe jest to przez wlasciwosci typu display: table-cell;
20:17 <@b3x`> itp.
20:17 <@b3x`> ale pytanie... w jakim celu
20:17 <@b3x`> ;)
20:17 <@unknow> to juz takie lekkie przegiecie ;P
20:17 <@unknow> sa pytania?
20:17 < twoJ> ej
20:18 < twoJ> tak
20:18 < twoJ> sa
20:18 < cpchild> *klaszcze* good job (: *pobiegl zrobic siku*
20:18 < twoJ> kto prowadzi ten wyklad?
20:18 <@b3x`> do danych tabelarycznych tak, ale czasem to sie przydaje
20:18 < twoJ> unknow: czy b3x`
20:18 <@phoenix__> twoJ: unknow
20:18 < twoJ> bo widze ze wykladowca nie wie o czym mowi
20:18 < twoJ> i musi korzystac z pomocy kogos
20:18 <@b3x`> twoJ: unknow, ja tylko na marginesie
20:18 < twoJ> i jeszcze jedno
20:18 <@phoenix__> twoJ: b3x na koniec chcial cos dopowiedziec
20:18 < twoJ> dlaczego Firefox jest tutaj szykanowany?
20:18 < twoJ> dlaczego brak obiektywizm
20:18 <@b3x`> twoJ: to zart? to nie tak.
20:18 <@unknow> twoJ: zgodnie z obietnica, na koneic wykladu mial pojawic sie b3x, ktory mial wspomniec o najpopularniejszych bledach. To zapowiuedz do jego wykladu
20:18 < twoJ> rozumiem
20:19 <@phoenix__> twoJ: o tym ze b3x bedzie wiadomo od poczatku
20:19 < twoJ> czyli wyklad mozna zaliczyc do nie udanych
20:19 <@b3x`> nie wazne. jakies pytania?
20:19 < twoJ> tyle odemnie
20:19 <@phoenix__> twoJ: po wykladzie
20:19 <@phoenix__> ;>
20:19 < twoJ> spadaj zdrajco :p
20:19 <@phoenix__> bo nie wiem o czym mowisz
20:19 < olka> ja mam pytanie jak powinna wg zalozen wygladac stopka :D ?
20:19 <@unknow> ok. oglaszam koniec wykladu