TwojePC.pl © 2001 - 2025
|
|
A R C H I W A L N A W I A D O M O Ś Ć |
|
|
|
Pytanko o dobry poradnik dla twórców WWW , Alonzo Vega 25/07/06 10:16 Witam. Czy jest gdzieś w polskiej sieci dobry aktualny poradnik zawierający informacje jak tworzyc stronki WWW aby byłą zgodna z dzisiejszymi standardami, aby stronka działała poprawnie na większośći popularnych przeglądarek , i ogólnie zachowywała standardy poprawnego tworzenia kodu? Wiecie, by nie zalatywło "wichą" /lol/ . Ah ai jeszcze jedno czy jeśłi niezbyt skomplikowana stronka informacyjan średniej firmy , zostanie częsciowo wygenerowana czyms pokroju Pajączka , to jest to jakaś ujma dla firmy/webmastera?- Kilka porad , pachura 25/07/06 11:42
1. Strona MUSI wyglądać tak jak miała (tj. nie rozjeżdżać się) na MS Internet Explorerze 6 i Firefoxie 1.0/1.5, w rozdzielczości 1024x768 i wyższych.
2. W rozdzielczości 800x600 strona również powinna wyglądać tak jak miała, ale może być większa niż ekran (może się pojawiać poziomy scrollbar).
3. Nie przesadzaj z Flashami, wodotryskami, animacjami. Strona powinna był czytelna, przejrzysta, lekka. Nie powinna też zajmować kroci - panuj nad kompresją.
Obadaj statystki na http://www.ranking.pl . Nie warto np. poświęcać czasu na dostosowywanie kodu strony do przeglądarki czy rozdzielczości której używa tylko parę procent Polaków...
To tyle podstaw. A żadną "ujmą" dla webmastera się nie przejmuj ;) Aczkolwiek, jeśli musisz:
- strony powinny być poprawnym XHTML-em 1.0;
- do formatowania używaj CSS-a zamiast <TABLE>;
- strona kodowa - ISO-8859-2 lub UTF-8, nie WIN-1250;
- usuń wszystkie komentarze <!-- -->, zbędne tagi <META>, białe spacje;
- Pajączek to żadna ujma, mój znajomy z tej branży używa go i bardzo chwali. Z resztą, można z kodu stron usunąć informacje o Pajączku.- Dzięki , Alonzo Vega 25/07/06 13:30
, rady napewno się przydadzą. Zgodziłęm się zrobić stronkę najlepszemu klientowi , człowiekowi kóremu się nie odmaiwa /lol/ . Znam się na grafice max/photoshop, więc od tej strony , jakoś to będzie ale właśnie jeśli chodzi o programowanie stron www, to muszę sobie sporo przypomnieć co mnie uczyli w 3 szkołach o tym , zwłaszcza JavaScript , bez którego chyba trudno się obejść.- ale pamiętaj , dFour 25/07/06 18:58
pominąć "/lol/" na tej stronce również też ...
- co do CSS zamiast <table> , Maners 25/07/06 15:15
to IMO oplaca sie to tylko przy prostych layoutach jak np blogi. Tabelki sa zdecydowanie prostsze w uzyciu, zgodne z xhtml 1.1. i nie powoduja tyle problemow z wywsietlaniem (uzywanie hackow CSS w celu uzysaknie tego samego efektu jest gorsze niz rozmieszcznie zawarosci za pomoca prostej tabelki)- czyli , Alonzo Vega 25/07/06 16:09
jeśli chodzi i niezbyt skomplikowaną stronkę informacyjną dla firmy to można obejść się bez CSSa w ogóle?- tzn , Maners 25/07/06 16:38
jesli chcesz zrobic strone ktora bedzie posiadal klasyczny layout tj.naglowek + 3 kolumny (tak jak np twojepc :)) to duzo szybciej zrobisz to w tablelce. W CSS tez sie da ale jest duzo trudniejsze i nie warte zachodu (przynajmniej dopuki wszystkie wiodace przegladrki nie potrafia w pelni obsluzyc CSS3). Niektorzy mowia, ze powinno sie wszystko co sia da robic w CSS, aby rozgraniczyc wyglad od struktury, ale przeciez layout kolumnowy to wlasnie struktura i tabelki sie doskonale sprawdzja w przeciwienstive do <div> z CSS. CSS powinno sie zas uzywac zamiast atrybutow tj definiowanie szerokosci, obramowania, kolory tla itp, ale zawartosc lepiej jest rozmieszczac za pomoca dostepnych elemetnow html i przypisac odpowienia klase ktora juz opisujesz w CSS- kurcze , Alonzo Vega 25/07/06 18:06
ale tworzenie stronek dzisja się skomplikowało , niedługo zasób potrzebnej wiedzy do tworzenia profesjonalnych www przerośnie wiedze potrzebą do tworzenia dobrych programów w C++/C# :) Jak widzę te encyklopedie do PHP to zastanawiam się czy już się tak nie stało :)- heh , Maners 25/07/06 18:19
tworzenie aplikacji internetowych czesto wymaga wiekszych umiejetnosci niz desktopowych (moze nie liczac gier i jakis programow do przetwarzania dzwieku/grafiki). Oczywiscie mowa tu o zaawansonwych aplikacjach, ktore funkcjonalnoscia maja dorownywac samodzielnym programom. A za taka komplikacje przy tworzeniu stron mozna w duzej mierze podziekowac Microsoftowi i jego IE, ktory to ma "wlasna" interpetacje standarow i czesto trzbea napisac cala mase kodu specjanie dla IE (Firefox tez nie lsni pod tym wzgledem ale jest zdecydowanie bardziej obliczalny).
- o matko , myszon 25/07/06 20:54
mogę dać ci zyliony przykładów, w których tabelki działają jak kupa a CSS-em robi się bajki, np:
- elastyczny design
- strony dostępne dla tel. komórkowych
- wielokolumnowy layout
- różny layout zależny od rozdzielczości ekranu (tu nie chodzi o elastyczny tylko)
A co do zgodności z xhtml to nie wiesz o czym mówisz. Możesz używać nagłówków do tworzenia list ale nie po to wymyślili te znaczniki. Stronkę taką jak TPC zrobię w CSSie w 5minut. Będzie zajmowała o wiele miejsca (HTML), kod będzie czytelniejszy bo o wiele łatwiej opisać wygląd w CSS niż w HTML. Szczególnie w przypadku TPC to by było widać. Oprócz nagłówka jest tu tylko 1 powtarzający się element graficzny: pudełko z żółtawym tytułem i ramkami. Tworzenie z CSSem jest o tyle trudniejsze, że trzeba się najperw nauczyć go wykorzystywać. I to wykorzystywać porządnie a nie tylko do zmieniania kolorów i teł.- hmm , Maners 25/07/06 21:11
jak wroce do domu to ci dam przykladowy layout na tablekach. Jesli dasz rade wykonac to samo w CSS to jestes "miszcz" :-)- oke , myszon 25/07/06 21:32
czekam.- a ja sledze te przepychanke , Grocal 25/07/06 22:12
bo moze sie czegos naucze... ;)
myszon ma racje ze css "ma moc" ale trzeba ja umiec wykorzystac. Jak dostalismy ostatnio layout do oprogramowania zrobiony na cssie i divach to wiecej z tym bylo problemow niz pozytku, bo "dizajner" mial w dupie fakt, ze tresc moze byc dluzsza niz zakladana przez niego wysokosc diva, ktorego z reszta osadzal w strukturze dyrektywa "absolute" ;) Nic tylko wziac takiego i wykastrowac za takie oddzielanie tresci od formy...Na pewno, na razie, w ogóle...
Naprawdę, naprzeciwko, stąd...
Ortografia nie gryzie! - tez uzywam CSS gdzie sie da , Maners 25/07/06 22:22
tylko ze bez wpychania go "na sile" jesli da sie zrobic to znacznie prosciej. Wiele layoutow czysto CSS, o ile pamietam, uzywa pozycjonwanie absolutnego itp. Poza tym jak sie zwiekszy font w przegldarce lub zawartosc dynamiczna z np php jest szersza niz przeiwdzine wlayoucie to ma ona tendencje do "wyplywania" z wlasnego DIVa i przyslania reszte strony. W tabeklach taki efekt nie ma miejsca (jest w CSS display: table-cell lub cos takiego ale nie jest poprawnie obslugiwany prze zadna przegladarke)
- oki , Maners 25/07/06 22:13
mniej wiecej cos takiego:
http://maners.no-ip.com/test.html- hehe , myszon 25/07/06 23:41
widzę że kolega obeznany z trudnymi miejscami cssa :)
faux-columns http://alistapart.com/articles/fauxcolumns/
O to chodziło? A display: table i pochodne są całkiem dobrze obsługiwane przez O, moz, FF i safari.
A position absolute nie ma się co wstydzić jeśli zrobi się to dobrze.- no tak , Maners 25/07/06 23:49
tylko ze to jest juz hack tzn z tym backgroundem udajacym koumne, a z tym sa praoblem o ktorych przeknalem sie na wlasnej skorze, bo np gdy zmieniasz szerokosc diva to musisz do niego dorobic odpowiedniej szerokosci grafike. Po prostu efektywniejsze jest uzycie prostej tabelii do rozlozenia postawoego layoutu. Jak siatka jest gotowa to pozniej mozna sie bawic CSSem i sie nic nie rozjedzie- a jesli , myszon 26/07/06 00:00
masz tabele i zmieniasz szerokosc to nie musisz robic nowej grafiki? Zawsze mozna uzyc position: absolute dla nawigacji i overflow: hidden dla body.
A uzycie tabel do layoutu to nie hack?
Przez tabele wiazesz elementy strony w strukture, ktora bardzo zmienic przy redesignie strony. Dlatego rozne cmsy potrzebuja skomplikowanej obslugi skorek zamiast korzystac z roznych arkuszy stylow.- grafika , Maners 26/07/06 00:13
akurat ja unikam uzywania jakiejkolwiek grafiki, po peirwsze: bo jestem beztalenciem artystycznym :) po drugie moim celem zawsze jest zbudowanie strony ktora wyglada nieaml identycznie we wszystkich rozdzielczosciach i zawsze wykorzystuje viewport w 100% Do tego grafika jako kluczowy element strony sie nie nadaje bo ma zawsze stala szerokosc i jedyna opcja to robienie wzorow graficznych (patterns) ktore mozna wykorzystac jako tlo. Jedynie gdzie uzywam statycnych obrazkow to logo i to co jest w naglowku. Pawda zas jest ze layout czysto CSSowy jest wygodniejszy jesli chodzi o pozniejsze dostosowywanie (np zmienic rozmieszczenie menu zaleznie od zaloowanego uzytkownika), tylko ze im wiecej wpakujesz w srodek zawartosci poweidzmy obrazki, table z danymi itp to tym czescie CSS zawodzi. Sam sie staram uzywac CSSgdzieto tylko mozliwe, ale jesli nie zapenwnia mi to "utrzymania" planowanego layoutu to trzeba szukac prostszych rozwiazan.- no to sorry ale zatrzymales sie w latach '90 , myszon 26/07/06 00:28
"strony ktora wyglada nieaml identycznie we wszystkich rozdzielczosciach" - zrob strone ktora bedzie wygladala tak samo na komorce z ekranem 100x160px i lcd ws z rozdialką 1920x1024 Tylko jaki jest sens tego?
CSS wcale nie zawodzi jeśli wpakujesz więcej stuffu. Jeśli umiesz go wykorzystać to wszystko jest pod kontrolą. A jeśli masz burdel tabelkowy to nie dziwię się że Ci się rozjeżdża czasami.- nic mi sie nie rozjezdza , Maners 26/07/06 00:35
a strony o stalej szerokosci to sa dla leniwych lub grafikow ktory zrobi w Photoshopie "na sztywno" grafike do 800x600 i pozniej wyglada jak cienki pasek w 1600x1200, a ze w tej rozdzielczosci fonty zwykle bywaja male to czesto ludzie je sobie zwiekszaja i "sztywny" layout poszedl sie.. [cenzura :)]. Stron pod komorki nigdy nie robilem wiec sie nie wypowiadam na ten temat.- a widzisz , myszon 26/07/06 11:03
mówisz że nigdy nie robiłeś stron pod komórki.
"HTML is a collection of platform-independent styles (indicated by markup tags) that define the various components of a World Wide Web document."
Chodzi dokładnie o fragment "platform-independent". Robiąc layout w tabelce ogramiczasz się do pokazywania stron na ekranie w pewnych rozdziałkach. Nie używając tabel nie masz tego ograniczenia. Ten sam dokument może iść dla komórki, drukarki, czytnika braille'a lub jeszcze innego medium. I to jest niesamowita wada layoutu na tabelkach. Ile nowych telefonów ma przeglądarki internetowe? Pewnie około 100%. Robiąc layout na tabelkach praktycznie uniemożliwiasz sobie przeprojektowanie strony.
Co do stron o stałej szerokości to polecam ci książkę "bulletproof web design". A strony takie nie powstają przez leniwych grafików tylko ze względów estetyczno praktycznych. Oczywiście zgodzę się, że stworzenie w pełni płynnego layoutu jest trudne, ale takiego też nie zrobisz na tabelkach. Są powody dla których lepiej mieć tekst o stałej szerokości niż od burty do burty. Jednym z nich jest czytelność. Przy liniach dłuższych od eee chyba ok. 36 znaków prędkość czytania i zrozumienie tekstu wzrazta dramatycznie. Nie męczą się oczy. Poza tym w twoim layoucie (i na stronie w sigu) brakuje white space (nie wiem jak to w ojczystym języku się zwie). Powinieneś kontrolować szerokość tekstu poprzez max-width.- miało być , myszon 26/07/06 13:25
że przy liniach dłuższych od 36 znaków wszystko spada. i tak samo dla krótszych. - layout , Maners 26/07/06 15:13
akurat ta strona w sigu byla zrobiona na szybko jako przysluga dla kumpli i nie zostala skonczona (i raczej nie bedzie, bo juz nie graja:)). Co do layout-u o stalej szerokosci vs plywajacy, to ja osobiscie preferuje ten drugi, a to dlatego, ze nie po to kupilem 21'' monitor aby ogladac strony o szerokosci 800px. Poza tym tak jak juz wspominalem, pracujac w wysokich rozdzileczosciach czesto konieczne jest zwiekszenie rozmiaru tekstu o 1 lub 2 stopnie aby strona byla czytelna (szegolnie czesto ma to miejsce wlasnie przy stronach zaprojektowyanych dla 800x600). W layoutach czysto CSSowych czesto skutkuje to "wylaniem" sie tekstu poza wlasnego diva i przysloniecie zawartosci sasiedniego bloku uniemozliwiajac odczytanie tresci. Osobiscie jestem zwolennikiem czysto CSSowych layoutow (wiele razy probowalem takie robic), ale na dzien dzisiejszy obsluga CSS w przegldarkach jest dosc slaba (zwlaszcza w IE), a obejscia typu pozycjonawanie relatywne/absolutne nie sa prawidlowym rozwiazaniem problemu (tak samo jak tabelki). Pozycjonowanie absolutnego unkiam jak ognia, a to z tego wzgeldu, ze czesto sa z nim problemy jesli zaaplikujesz do tego JS - robilem kiedys CMSa opartaego o AJAX i Drag and Drop gdzie interface sklada sie z bocznych paneli miedzy ktorymi mozna przeciagac tresc i wlasnie pozycjonowanie absolutne + overflow powoduje, ze w Firefoksie zdarzenia nie przechodza w dol hierarchii DOM (wylaczenie overflow lub absolute rozwiazuje problem, ale wtedy jest "kaszana" na ekranie).
- heheh , Alonzo Vega 25/07/06 19:32
znalazłem coś ciekawego o tabelkach :) http://osiolki.net/tabelki/
- tak sobie , WooKy 25/07/06 22:54
czytam te wasze 'porady' i az mnie sciska:D
Specjalnie nie chce mi sie rozpisywac ale zdanie:
- do formatowania używaj CSS-a zamiast <TABLE> i jego pochodne w dalszych postach po prostu mnie zabily - co maja kaskadowe style do poprawnej semantycznie struktury dokumentu html?? Polecam lekture tego czym jest (x)html a czym sa style bo takie mieszanie terminow wprowadzic moze tylko ludzi w blad :) tak samo jak teksty o budowaniu strony cssem:D Jeszcze chwile i ktos napisze ze trzeba programowac strony w cssie:D
Co do tabelek a warstw - moze faktycznie da sie strone latwiej zbudowac na tabelach bo gotowy kod wypluje pierwszy z brzegu program typu wysiwyg ale znajdz sie pozniej w tym kodzie pelnym tr'ow td'kow itd. - wszelkie korekty, poprawki czy osadzanie skryptow w takim nie logicznym z punktu widzenia czlowieka kodzie po prostu jest katorga - co innego z dobrze zbudowana strona na warstwach i ubrana w poprawny css - pomijam juz fakt ze ilosc uzytych tagow zmniejsza sie o polowe i rosnie czytelnosc struktury dokumentu ale identyfikatory mowia wszystko na temat tego co aktualnie edtyujesz - docenia to na pewno ludzie ktorym przyjdzie z takim htmlem w przyszlosci pracowac :)
Maners twoj przykladowy szablon to dla kogos kto sie bawil xhtmlem i cssem dluzej niz jeden dzien to banal :) Szkoda ze juz tak pozno bo w ramach promocji standardow sieciowych chetnie bym to zrobil :Dbitnoi.se - skoro taki banal , Maners 25/07/06 23:53
to czekam na przyklad, tylko bez "udawanych" kolumn. Moze byc jutro :->- to ty zrob , myszon 26/07/06 00:08
http://particletree.com/examples/dynamiclayouts/
bez cssa. uzyj tyle js i tabel ile ci potrzeba. Z mojej strony dodam, ze ten efekt mozna uzyskac bez JS (tylko css).- ladny przyklad , Maners 26/07/06 00:26
elastycznosci CSS, tylko ze mi nie chodzi o udowadnieni wyzszosci tbel nad CSS i odwrotnie, ale o rozwiazanie mozliwie najprostsze. Czasem lepiej jest CSS a czasem tabela. Przyklad ktoru podales oczywsnie nie da sie wykonac na tablekach - JS odpada, bo to nie jest rozwiazanie i razej nie do tego jest przeznaczony, juz lepiej to zrobic w php itp- kurde , WooKy 26/07/06 00:44
co ma do tego elastycznosc css'a? :D Jak mozesz stawiac na przeciwko siebie cssa i tabelki ?? CSS NIE SLUZY DO BUDOWY STRUKTURY DOKUMENTU - tabele vs warstwy/layer'y a nie tabele vs css :D
Aha no i jeszcze jedno - mylisz sie co do techniki tego dynamicznego stylowania - jest ono zrobione wlasnie na JS - nie da sie przecierz odpalic akcji w przegladarce cssem :D:D:D Po prostu przyklad ten obrazuje zachowanie dynamicznej zmiany stylu (klasy css) nalozonego na kontenery/strukture (tu akuraty divy) - dzieje sie to bez przalodwania strony dzieki dynamicznej akcji JS (po stronie przegladarki a nie serwera).
Strasznie ale to strasznie mieszasz rozne pojecia i technologie..bitnoi.se - ehh , Maners 26/07/06 00:54
to ma do tego ze zmieniasz styl i sie zmeinia layout (divy same w sobie nie definija jak rozlozona jest tresc. Dopiero po zaaplikowaniu odpowienidego CSS divy ukladjaa sie odpowiednio).
Co do JS, to wiadomo ze PRZELACZNIE stylow jest wykonane w JS, jednak sam rozklad elementow juz jest zmieniony przez CSS. Mi chodzilo o to ze przebudowanie tabelki za pomoca JS aby osiagnac ten sam efekt jest nie praktyczne.
> Strasznie ale to strasznie mieszasz rozne pojecia i technologie..
Ja nie mieszam, tylko ty czytasz miedzy wierszami :-) - nie mylę się , myszon 26/07/06 11:50
Ten konkretny efekt był zrobiony z użyciem JS. Ale, jak napisałem, można to zrobić bez: http://www.ee.pw.edu.pl/~beczkows/test/mq.htm
- a no właśnie... , pachura 25/07/06 23:58
...o to chodziło, żeby nie budować layoutu WSZYSTKIEGO za pomocą tabel, bo - tak jak napisałeś - znaleźć czy przesunąć coś później w gąszczu <td> i <tr> może być bardzo trudno. Natomiast <table> do opisania danych tabelarycznych jak najbardziej powinien być wykorzystywany.
- przeniosę duskusję tu bo tam się kończy miejsce , myszon 26/07/06 16:37
serio lubisz czytać tekst wypełniający całą szerokość ekranu na 21" monitorze? I jak się czyta? Zrób sobie test. Weż 2 teksty o podobnej długości: jeden o szerokości 100% a drugi powiedzmy 40em i zmierz sobie czas czytania. Już nawet nie mówię o stopniu zrozumienia tekstu. Dlatego nie robi się stron w tabelkach. Bo albo wyglądają dobrze w 800x600 albo w 2000x1000. A poprzez css można zdefiniować różny layout dla różnych rozdziałek i można bez problemu wykorzystać te twoje 21" i jednocześnie tą samą stronę można ładnie drukować lub oglądać na komie.
Jeśli umiesz używać CSSa to żadne wylewanie treści poza element nie ma miejsca lub jest robione w sposób kontrolowany. Skoro Ci się tak robiło, to znaczy że popełniłeś gdzieś błąd np. nie uwzględniłeś dziedziczenia.
Co do position: absolute i DOM to nie jestem znawcą i się nie bęe mądrzył, ale wygląda mi to bardziej na błąd implementacji w przeglądarce. A pozycjonowanie absolutne/relatywne to nie są żadne obejścia tylko normalne metody pozycjonowania. Prawidłowo użyte są naprawdę potężnymi narzędziami (szczególnie poz absolutne względem elementu reletywnie umieszczonego). |
|
|
|
|
All rights reserved ® Copyright and Design 2001-2025, TwojePC.PL |
|
|
|
|