Tworzenie stron internetowych FAQ

[lord_saskybody]

Hej,

#1

Dawno się "nie bawiłem" w kodowanie/składanie stron www no i mam takie pytanie odnosnie układu formy czy mozna to też nazwać wybórem kodowania.

 

Zazwyczaj robiłem tak że ciołem grafe tak jak widać na ilustracji i tworzyłem

odpowiedni, z cellspacing=0 & cellpadding=0.

 

Nie wiem czy można jeszcze tak stosować , coś mi się obiło ze daje sie teraz

w

ustawiając dla kazdego odpowiednie paratmetry.

HTML znam b.dobrze , a zaś CSS Ciut gorzej ale to juz kwestia przeczytania

jakies kursu. wiec niewidze w tym problemu.

Chce żeby ktoś z was mnie uświadomił o akutalnych standardach kodowania.

Wiem ze Xhtml jest w modzie ale niechce mi sie uczyć go, HTML + CSS + PHP+FLA da fajny rezultat.

 

 

#2

Jak widać na jpgu , krawędzie są za okrąglone(i tło bedzie nieregularne)

, no i taka kwestia ,czy każda przeglądarka uzna to za "zaokrąglone krawedzie" czyli obszar wypełniony do pewnego momentu czy wypełni go białym kolorem.

Pisze o formacie *.png. Czy tak faktycznie jest? Format *.gif robi ostre krawędzie więc kiszka ? :/

 

Co radzicie ?:rolleyes:

 

 

ps. prosze nie piszcze "www.google.pl" :cool:

[ttaaddeekk]

zapytalem znajomego z http://edicra.pl/

 

　　

　　

div{border:1px dashed red;}

body{border:1px dashed blue; padding:50px;}

　

lp

　

rt

top banner

main body

　

lb

　

rb

 

#2 .png odpada bo kanal-alpha nie dziala w starszych przegladarkach takich jak IE6. Zrób więc gify. Ostrych krawędzi pozbędziesz się tworząc je na tle takim jak tło strony

 

 

 

ps: "www.google.pl" :D:D:D

Edytowane 22 Maj 2008 przez ttaaddeekk

[3Jane]

Hello,

 

1) masz racje, nie ucz sie XHTML. Jest modny, ale w sposob kulawy: prawie nikt nie umie go poprawnie stosowac - nie wystarczy napisac strony w odpowiednim kodowaniu, trzeba ja jeszcze wyslac z poprawnym MIME TYPE (co konfigurujesz w PHP lub .htaccess). Wiekszosc stron z etykietka "valid XHTML" interpretowana jest przez przegladarki jako pelen bledow HTML.

 

Wiecej na przyklad tutaj:

http://pornel.net/xhtml

 

2) Masz racje, teraz juz nie robi sie rzeczy na tabelkach. Ale moim zdaniem lepiej zrobic strone na tabelce w sposob kompetentny, niz bez tabelki w sposob niekompetentny. A z tym nowoczesnym CSSem nie jest tak latwo - wymaga roznych trikow.

 

Jesli chcesz dowiedziec sie, jak robic rzeczy, polecam m.in.

- magazyn internetowy "A list apart", gdzie czesto publikuja przydatne triki

http://www.alistapart.com/

- "CSS Zen garden" gdzie profesjonalisci wyciskaja z CSS ostatnie poty i pokazuja na ile sposobow mozna "ostylowac" ten sam html.

http://www.csszengarden.com/

 

Jeden prosty a dobry trik polega na tym zeby wziac div, ustawic mu odpowiednia szerokosc i (opcjonalnie) marginesy/padding, po czym nadac mu float. Kilka takich floatujacych divow wklada sie w kolejny div, ktoremu z kolei nadajesz:

overflow: auto; width: 100%;

 

Width ustawiasz tylko jesli ten otaczajacy div sam nie mial szerokosci. Jest on niezbedny do tego, zeby w IE wlaczyl sie atrybut .hasLayout (wiecej => google).

 

clear:both nie zawsze niestety dziala tak jakbysmy chcieli.

 

Z zaokraglonymi rogami mozesz miec troche problemow. Jesli bedziesz mial ustalona szerokosc, to radze ci uciac gore, uciac dol i zalatwic je na zasadzie

 

background-image: url(...sciezka do obrazka);

background-position: top left;

background-repeat: no-repeat;

 

3) Olej flasza, poucz sie javascriptu, chyba ze juz dobrze umiesz flasza. Jest w czym wybierac: Prototype+Scriptaculous (podpiete do Ruby on Rails czy CakePHP), Mootools, jQuery czy dojo (wlasnie ogloszono ze beda je integrowac z Zend Framework).

 

4) Co ty mu Tadek wciskasz ze kanal alpha nie dziala w IE6. :)

 

W starym IE png tez dzialal, tylko trzeba bylo robic wygibasy uzywajac trika z filtrem. Dlatego teraz ludzie poszli po rozum do glowy i robia biblioteki w JS, ktore zalatwiaja to automatycznie, np:

 

http://jquery.andreaseberhard.de/pngFix/

 

"This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6." (wymaga biblioteki jQuery).

 

Warto wiedziec ze istnieja programy, ktore optymalizuja pliki png - a zreszta co ja sie bede produkowac, kolejny swietny artykul Pornela podlinkuje (zwracam uwage na punkt "Photoshop nie nadaje się do zapisywania PNG!")

 

http://pornel.net/pnghowto

 

pp,

_3Jane

[illy]

http://www.romancortes.com/blog/homer-css/ mozna samym css'em zrobic zaokraglenia :D

[ttaaddeekk]

3Jane- ten text co wyslales to ponoc bzdura

http://forum.php.pl/index.php?showtopic=73486&start=0&p=379747entry379747

[Krzysiek]

Hmm ja polecam prosty skrypt w javie: http://www.html.it/articoli/niftycube/index.html

Przy większych projektach nie ma się co gimnastykować z css'em i pozycjonowaniem kolejnych elementów zaokrąglenia.

 

Co do div vs table to temat rzeka i pewnie calkiem niezla prace magisterska moznaby bylo o tym napisac. Rob tak, aby ci bylo wygodnie. Pamietaj jednak o ograniczeniach jakie wiążą sie z obiema metodami. Ja moge tylko polecic ci div'y. Ich sila pojawia sie dopiero potem, gdy strone trzeba modyfikowac lub traktowac pod katem SEO.

 

Pozdrawiam

[3Jane]

Hello,

 

illy:

gość rządzi, ale chyba nie każdy ma takie zdolności artystyczne ;)

 

ttaaddeekk:

No i co ja mogę powiedzieć... Naprawdę, ręce i nogi opadają. Załączyłeś wątek, w którym 2 gości mówi "to bzdura" i nawet nie wyjaśnia dlaczego. To ma być poważny argument? A tu, o, proszę, w innym miejscu na tym samym forum go polecają i nazywają klasyką, to kto ma rację?

http://forum.php.pl/xhtml_Walidacja_ktora_uzyc_t72523.html

 

Pornela przysłałam, bo jest po polsku i jest krótki, a zatem bardziej zrozumiały. Jeśli masz ochotę na pełne wypracowanie, łącznie z wieloma szczegółami technicznymi, to zajrzyj tutaj:

 

http://hixie.ch/advocacy/xhtml

 

Ja ci powiem tylko tyle: zarabiam tym na życie. Webmasterką zajmuję się mniej lub bardziej poważnie od późnych lat 90tych. I na podstawie tego doświadczenia mogę ci powiedzieć, że artykuły na stronie Pornela są godne polecenia (zresztą cytowałam go już wcześniej, kiedy była dyskusja o spamie na forum max3d).

 

Większą różnicę niż wybór HTML/XHTML zrobi wybór między wersją Strict a Transitional:

http://pornel.net/transitional

 

ale oczywiście dokument pisany w Strict też można zepsuć. Żadne narzędzie nie zwalnia twórcy z myślenia i poczucia estetyki.

 

pp,

_3Jane

 

(Aha, jeszcze jedna drobna uwaga: czytaj nicki i myśl. Jane = Janina = kobieta, ok?)

Edytowane 22 Maj 2008 przez 3Jane

[ttaaddeekk]

wow, nikt nie spodziewa sie hiszpanskiej inkwizycji :D take it easy Jane

fajnie ze zarabiasz na tym od lat 90tych, ale ja nigdy nawet 1 linijki kodu nie napisalem, wklejam tylko co wyniklo z rozmowy ze znajomym z dopiskiem "ponoc" wiec nie bierz tego do siebie, nie wszyscy na forum graficznym sa programistami, co nie znaczy ze nie mozna o tym pogadac. Wiec z braku jakielkowiek czynnosci ktora moglbym sie zajac aktualnie, prosze o oficjalne przeprosiny gdyz poczulem sie personalnie urazony !! :D:D:DD:

 

co do nicka to przepraszam, sporo osob na forum ma 2znaczne nicki

 

 

###edit###

jeszcze dopiszze (co wyniklo z rozmowy z 2gim znajomym ;) ) ze to nie sa jacys tam goscie bo "mike to taki baginski tylko ze w php" ;)

 

 

ps: prosba do adminow, nie kasujcie prosze spamu bo straaaasznie mi sie nudzi

Edytowane 22 Maj 2008 przez ttaaddeekk

[3Jane]

Hello,

 

Muahaha! Naszymi metodami są... eee jak to było? ;)

 

http://xkcd.com/386/

 

pp,

_3Jane

[illy]

ps: prosba do adminow, nie kasujcie prosze spamu bo straaaasznie mi sie nudzi

dolaczam sie do prosby

[Gość User190]

IMHO wprowadzenie budowy stron na CSSie było głupim lansiarskim wymysłem. Prawda jest taka, że nie da się zbudować strony opartej o obecne standardy, która będzie działała poprawnie na wszystkich przegądarkach, a przy tym się validowała. "Nie da się" to swoista przenośnia - wszystko można zrobić jak się posiedzi - nawet Katedrę w Paintcie po klatce narysujesz, tylko po co? Kod przyjemniejszy przeglądarkom - ok, ale za jaką cenę? Przez ten głupi standard budowanie stron urosło do rangi programowania, a to już jest żałosne. Gdzie tu idea internetu dla wszystkich? Przecież o to chodziło, żeby internet ułatwił komunikację i wymianę informacji...

[mirach]

Przez ten głupi standard budowanie stron urosło do rangi programowania, a to już jest żałosne.

 

Powiedz to ludzia od IE, ktory te standarty interpretuje bardzo po swojemu.

Nie wiem tez jak to widzisz, ale w duuuzych servisach oddzielenie tresci servisu od wygladu (co miedzy innymi oferuje CSS) jest bardzo pomocne w komunikowaniu sie i wymianie informacji.

To tak w ramach wieczornego wspolmarudzenia :)

[Gość User190]

IE interpretuje to bardziej po swojemu, ale wg mnie chyba bardziej logicznie niż jest w standardzie. Niestety ta obrona Częstochowy nie wychodzi nam na dobre.

Jeśli idzie o duże serwisy to oczywiście zgadzam się z Tobą. W ogóle zgadzam się z tym, że oddzielenie treści od wyglądu to bardzo dobra opcja, ale jeśli już coś robić to tak, żeby działało wszędzie jednakowo. IE nie jest jedynym problemem. Opera i FF też się rozjeżdżają - niestety nawet 1px przesunięcia nie powinny mieć miejsca, a takie są powszechne, mimo, że stronę budujesz zgodnie ze standardem. Trzeba szukać sposobów, obejść, kluczyć.. na obecną chwilę przypomina mi to równie kiepski AS2. Dopóki nie wszedł AS3 wszyscy się cieszyli, że mają takie rewelacyjne narzędzie jak AS2 i że można w nim napisać równie rewelacyjne "aplikacje". W końcu Adobe wypuścił Flasha z AS3 w którym wszystko działa tak, jak powinno i dopiero teraz nastała era światłości dla Flasha. Wg mnie bronienie czegoś, co jest złe nie powinno mieć miejsca. Języki programowania są dla użytkowników, a nie użytkownicy dla języków. Jeśli coś jest złe/niedopracowane to nie powinno się tego używać, a nie forsować na siłę. CSSowy boom wg mnie to porażka - najpierw trzeba było dopracować standard, a później go lansować. Teraz jesteśmy, za przeproszeniem w dupie - ludzie poprzesiadali się z tabelek, nie wiadomo kiedy przeglądarki przestaną je interpretować więc powrót jest ideowo wątpiwy, a żeby zbudować stronę na blokach, która wyświetla się wszędzie jednakowo, trzeba zrobić doktorat z htmla. I co - ładniej będzie jak Janek Kowalski zbuduje sobie stronę na 1 divie, bo więcej nie umie? Niedoświadczony użytkownik może jeszcze mniej niż z tabelkami, a doświadczony "programista" html musi się męczyć, żeby wszystkie przeglądarki wyświetlały jego strony tak samo. Tylko wyszukiwarki mają łatwiejszą robotę i ich właścicielom pieniążki szybciej wskakują do portfela. Zgadzam się - duże portale również na tym skorzystały. Tylko dlaczego internet przestał być dla ludzi?

[SSn4k3]

a doświadczony "programista" html musi się męczyć,

to dupa jest a nie doświadczony. Każda przeglądarka ma swoje widzimisie, wystarczy je poznać i droga prosta. Nawet bez css hackow da sie wszystko ładnie zrobić.

[Gość User190]

Tak? To pokaż mi to :) Ja sobie wymyślę layout,a Ty bez css haków go złożysz, ok? :)

[SSn4k3]

A zapłacisz mi za to?:-)

[Gość User190]

Oczywiście, że nie :) To ty chcesz przeforsować swoją opinię - ja swojej jestem pewien :)

[SSn4k3]

Można by coś skodzić:) Jeśli masz jakiś layoucik to wrzuć go tutaj - powalczymy z nim:)

[mirach]

odnosnie wczorajszej wypowiedzi Matiego:

 

Tez sie zgodze ze CSS kuleje, tez sie zgodze ze rownie dobrze mozna walnac strone na tabelkach i bedzie dzialac, i jesli nie masz pod reka paru hakow na css i duzego doswiadczenia to zrobisz ja 10 razy szybciej niz w pelni poprawnego css'a. Problem w tym ze narazie nie ma za duzo innych opcji.

Co do marudzenia na IE. To jeszcze jakis czas temu (przed IE7) wiekszosc problemow z CSSem mial walsnie IE (teraz nie wiem, przestalem babrac sie w stronach pare lat temu) i trzeba bylo sobie wlosy z glowy wyrywac zeby to co dzialalo na IE dzialalo gdzie indziej, i na odwrot.

A co do internetu dla ludzi. Taka moda, bardzo czesto przerost formy nad trescia. Nikt przeciez nie broni zrobic stron skladajacych sie z bialego tekstu, szarego tla i gdzies po srodku wrzuconego obrazka. Szybko zrobisz, czytelne i spelnia podstawowe wymaganie - przekaz tresci.

A ze tak zamarudze (glowa mnie boli i nie mam co robic :) ) to ja bardziej sie wlasnie na flasha irytuje, mi naprawde nie jest potrzebne zeby strona blyskala, grala i skakala na ekranie, kiedy chce sie czegos dowiedziec o nowym programie / przeczytac artykul.

 

No, koniec bezcelowego gadania, teraz z checia sie przypatrze bezhakowemu wykonaniu SSn4k3'a (mowie to bez ironi, naprawde z wielka checia obaczyl bym wykonanie strony bez hakow ktora jest zgodna ze standartami i dziala na wiekszosci przegladarek tak samo)

 

pozdrawiam i ide po kawe

mirach

[Gość User190]

SSn4k3 > będzie ciężko teraz coś wymyślić, bo czasu mam mało, ale tak jak Mirach z chęcią przyjrzałbym się takiej bezhackowej stronie.

 

Tak na szybko, co przychodzi mi do głowy:

 ____
|    |
| [] |
|____|

 

stronka, która ma w tle gradient od góry do dołu, a na środku obrazek. Obrazek niezależnie od rozdziałki powinien wyświetlać się na środku (zarówno w poziomie jak i pionie). Szybkie, krótkie proste, jako zobrazowanie możesz looknąć tutaj: http://www.mateusztokarz.pl/ :) Kiedyś postanowiłem na szybko wrzucić coś pod moją domenę i okazało sie, że bez hacków pod nowymi IE nie będzie śmigało poprawnie. A że wkurza mnie ta sytuacja hacków nie użyłem i pod IE się sypie :) Jeśli potrafisz to zrobić, nie używając tricków to szacun :) Ja nie potrafiłem, przyznaję się bez bicia :) Może gdybym przeczytał jakąś książkę o CSSie potrafiłbym, ale tak, jak pisałem - net powinien być dla ludzi, a nie ludzie dla netu :)

[SSn4k3]

Obiecuję, że dzisaj przysiąde:) Tak btw. To co wy na to żeby w webart stworzyć jakiś topic o problemach kodowania html/css/js ? (a może jakiś contest?) Koniec offtopa.

[Gość User190]

Jestem za. Mało koduję ostatnimi czasy, ale przyznaję, że przydałoby się coś takiego, gdy już będzie trzeba coś poskładać.

[3Jane]

Też mi się podoba forum o kodowaniu.

 

M@Ti:

Co do tego, że standard CSS jest niedorobiony, zgadzam się (standard HTML też). Że przeglądarki nie obsługują tego standardu - też nie jest fajnie. Co do tego że IE nie jest taki zły... e... sorry, nie. Przez bardzo długi czas brakowało mu tak prostych rzeczy jak input[type=text], :before, :after i tak dalej.

 

Nie sądzę, żeby CSS był głównym winowajcą obecnej sytuacji.

 

Na pewno wiesz, że całe to zamieszanie wynikło z "wojny przeglądarek", gdzie każda wprowadzała własne rozszerzenia - tagi takie jak center, marquee (bodajże), iframe, layer i tak dalej. Wtedy też człowiek się musiał męczyć, żeby strona chodziła pod różnymi przeglądarkami, a wiele stron miało napisy "Netscape only" i "Explorer only". To też nie było specjalnie przyjazne dla użytkowników.

 

Po jakimś czasie, kiedy już kurz po bitwie opadł, wyklarował się z tego jakiś tam standard. I tak samo będzie z CSSem. Standard na papierku swoje, a ludzie powszechnie używane rzeczy i tak będą implementować.

 

Zresztą nikt tobie (ani żadnemu użytkownikowi-amatorowi) nie broni robić strony na tabelkach (i nie wprowadzaj paniki, bardzo wątpię, żeby kiedykolwiek zniknęły ze standardu, bo są zbyt przydatne). Po prostu co bardziej obeznani klienci mogą nie chcieć za to zapłacić, bo będą woleli żeby ich strona była bardziej przyjazna dla wyszukiwarek i dostępna dla wszystkich.

 

No bo, oczywiście, jeśli troszczymy się o WSZYSTKICH użytkowników, to nie wolno zapominać o niepełnosprawnych. Strona z odpowiednio ułożoną hierarchią (h1, h2, nawigacja w odpowiednim miejscu itp.) jest bardziej przyjazna dla urządzeń czytających dla niewidomych, łatwiej jej też wymienić wygląd na inny, taki z dużymi literami i/lub kontrastowymi kolorami, jeśli stronę czyta osoba niedowidząca, daltonista itp.

 

Strony administracji publicznej mają obowiązek być dostępne (często nie są, to inna sprawa). Ale i firm prywatnych to dotyka: w USA toczy się teraz taki proces:

http://prawo.vagla.pl/node/7886

 

A na koniec podlinkuję do "CSS frameworku", który dowodzi, że ludzie zawsze obejdą zasady, a także znajdą sposób aby zrobić layout na tabelkach nawet jeśli im zabierzesz tag table:

 

http://code.google.com/p/blueprintcss/

 

(W skrócie: pozwala między innymi podzielić stronę na "kratkę", jak na kartce zeszytowej, a następnie za pomocą nazw klas w divach ustalasz szerokość diva mierzoną w "kratkach". Czyli znowu kodujesz wygląd w HTMLu, nawet jeśli używasz CSS... :)

 

pp,

_3Jane

[3Jane]

Kiedyś postanowiłem na szybko wrzucić coś pod moją domenę i okazało sie, że bez hacków pod nowymi IE nie będzie śmigało poprawnie. A że wkurza mnie ta sytuacja hacków nie użyłem i pod IE się sypie :) Jeśli potrafisz to zrobić, nie używając tricków to szacun :)

 

Zmień "if lte IE 6" na "if lte IE 7" (jeśli wersja IE mniejsza-lub-równa 7) i od razu zacznie działać w nowym też.

 

display:table-cell działa w IE od IE8, więc więcej już nie będziesz musiał zmieniać:

http://www.quirksmode.org/css/display.html

 

pp

_3Jane

Edytowane 24 Maj 2008 przez 3Jane

[Gość User190]

A jednak jest hack - nie popatrzyłem sobie do kodu. Myślałem, że go wywalała. No nic - nei zmienia to faktu, że strona bez hacków nie śmignie. Wieczorkiem przeczytam wszystko co napisałaś droga Janino ;)

[Kalais]

hmm, bylem kiedys zwolennikiem tabelek, bo szybko bardzo szlo mi ciecie layoutow i zawsze wszystko wszedzie (czyt. kazdej przegladarce) wygladalo tak samo

 

pozniej pojawil sie ten caly css i ze "tabelki sa be" i na poczatku mnie to nie obchodzilo, ale po jakims czasie wniknolem troche w temat, i musze przyznac ze pisanie stron opartych na css, bez tabelek ma swoj sens, i teoretycznie bije tabelki na glowe. Szczegolnie jesli chodzi o wprowadzanie zmian, elastycznosc, modyfikacje, jak i uporzadkowanie tresci.

 

w tej chwili umiem pisac strony na oba sposoby, przyznaje ze na divach czasem trzeba sie troche pomeczyc bardziej, ale po napisaniu paru stronek wiem, ze juz nie wroce do tabelek

 

glownym problemem tak naprawde sa przegladarki i to jak interpretuja kod, a nie standardy css, xhtml itd, te sa zdefiniowane poprawnie, a to przegladarki zle interpretuja kod, bo w kazdej wyswietla sie co innego po uzyciu tego samego kodu... ale tez ze wszystkim mozna sobie poradzic, tylko traci sie na to bezcenny czas :/

 

@mirach

A co do internetu dla ludzi. Taka moda, bardzo czesto przerost formy nad trescia. Nikt przeciez nie broni zrobic stron skladajacych sie z bialego tekstu, szarego tla i gdzies po srodku wrzuconego obrazka. Szybko zrobisz, czytelne i spelnia podstawowe wymaganie - przekaz tresci.

 

hehe, cos w tym jest :) pewnie wiekszosc ludzi na tym forum jest przyzwyczajona do super designerskich stron itd. (zreszta tak jak ja) a coraz czesciej trafiaja mi sie klienci, ktorzy pokazuja mi strony jak z lat 90, gdzie jest obrazek, menu i tresc i mowia ze chca cos takiego, jak im pokazuje jakies "inne mozliwosci" pokazujac rozne lansiarskie, trendy strony (ktore sa calkiem fajne, ale czesto niestety to jest wlasnie ten przerost formy nad trescia), to mowia ze na pewno nie chca czegos takiego heh

 

 

A tu jeszcze taka spoko prezentacja o tabelkach, css, divach itp.

http://osiolki.net/tabelki/index.html

[SSn4k3]

Zachęcam do lekturki http://www.perfectionorvanity.com - blog nie jest już rozwijany ale w archiwum mozna znaleźć prawdziwe perełki:)