Od 0 do kodera ? Mam nadzieję

[wahix778]

Siema, Chciałbym nauczyć się robienia strony, oczywiście podstawy htmla,cssa, znam a nawet dobrze radzę sobie z szablonami w photoshopie. Proszę o niepodsyłanie kolejnych kursów typu kurshtml.boo.pl ponieważ szukam kursu/kogoś kto mi to wytłumaczy to w sposób odrazu odwołujący się do styli zapisanych w .css, mniej więcej tak:
Teraz zajmiemy się stopką. Otwórz index.html zapisz tam div { bl alba bla .... a teraz ustawimy pod niego style. itd. Po kolei każdą część strony. Może jest jakaś dobra książka w języku Polskim tłumaczona w ten sposób ? Kolejną sprawą jest to pod jaki system najlepiej kodować ? itd. Szukam czegoś konkretnego.

[Kartofelek]

http://webdesign.tutsplus.com/tutorials/complete-websites/basics-create-a-clean-magazine-blog-theme-day2-slicing-and-markup/

[wahix778]

Niestety nie po Polsku no ale może jakoś dam radę. Jak nie zrozumiem to tu powrócę

[Raalsky]

Zacznę od końca.

Jeśli chodzi o system to polecam WordPress - bardzo duże możliwości edycyjne, wystarczają tylko dosłowne podstawy PHP, a nawet ich brak. Wiele osób kojarzy ten system jako wyłącznie system blogowy. Jednak od wersji 3 jest to pełnoprawny CMS. Sam nie dawno dla klienta robiłem stronę firmową z formularzem kontaktowym, galerią i podstronami. Jestem najbardziej zżyty z tym systemem. Nie polecam Joomli - edycja szablonu sprowadza się do rozmieszczenia miejsc na nasze dodatki i treść do czego piszemy CSS przy którym nie mamy zbyt dużej ingerencji w strukturę dokumentu. Pozostaje jeszcze Drupal - tutaj nigdy jeszcze nie kodowałem pod ten system, jednak jest to bardzo dobra platforma nawet dla większych portali ( Strona białego domu, MTV itp. ).

Teraz zalecenia w związku z nauką HTML'a. Już patrząc na "div { bla bla bla ....", który napisałeś w temacie - powiem jedno:
- Wystrzegaj się DIV i Span kiedy tylko możesz!
Naucz się HTML5 i nowych znaczników strukturalnych, które ze sobą niesie. HTML4.01 - Kiepski wybór bo jest bardzo chaotyczny. XHTML1/1.1 - Wszystko komplikuje. HTML5 - Główny nacisk na semantykę i dostępność (Odsyłam do bibliografii, które są obowiązkowe do przeczytania). Poparty bardzo dobrą specyfikacją - http://www.w3.org/TR/html5/author/spec.html - nawet podstawowa znajomość angielskiego wystarczy, aby dowiedzieć się wielu cudów. HTML5 po prostu wszystko upraszcza.

Przy CSS to jedynie mogę poradzić, abyś zawsze korzystał z "Reset CSS" - odsyłam do wujka Google. Do tego staraj się wykorzystywać jak najmniej elementów float oraz pamiętaj o wykorzystaniu właściwości "clear: both" itp. Warto także dowiedzieć się czegoś o CSS Sprites, CSS Scafford oraz o warunkowym CSS'ie - nie pamiętam jak to się nazywało, ale jest opisane na webhosting.pl.

Bibliografia
- Komputer Świat - Biblioteczka Eksperta - 2011/1 - WordPress - świetna i bardzo cienka książka, która opisuje bardzo wiele aspektów systemu jakim jest WordPress wraz z pisaniem templatek.
- Artykuły na http://www.vivee.info/
- Artykuły na http://www.webhosting.pl/
- Kurs JavaScript i jQuery - http://www.ferrante.pl/
- Obowiązkowy tytuł - Wprowadzenie do HTML5 (ang. Introducing to HTML5) - Bruce Lawson i Remy Sharp - Właśnie kończę przerabiać tą książkę i jedyne co mogę powiedzieć to: boska. Całkowicie wywróciła moją wiedzę nt. HTML. Opisuje tutaj wagę jaką trzeba przykładać do dostępności stron internetowych dla chociażby osób niewidomych przy wykorzystaniu WAI-ARIA. Ukierunkowała mnie na dobrą drogę w kierunku semantyki dzięki czemu chociażby w niedawno publikowanym przeze mnie kodzie wykorzystałem 3 klasy w HTML i jednego elementu div - reszta to nowe elementy strukturalne HTML5.
- Polecam kursy video http://www.eduweb.pl/ - Płatne
- XML - Niebieski podręcznik - wydawnictwo Helion - dowiedziałem się dużo nt. XML, CSS itp. Dowiedziałem się także więcej o DTD, które wykorzystuje HTML4.01 i XHTML dzięki czemu wiedziałem skąd tak diabelskie linijki prologu się wzięły.

Przepraszam za błędy. Spieszyłem się i nie miałem czasu sprawdzić. Później poprawię.

[Storm]

Raalsky jak będziesz poprawiał, to może byś uzasadnił te rewelacje na temat DiV i SPAN?

[Raalsky]

Rewelacje? Ja nawet nie wiem dlaczego konsorcjum stworzyło taki znacznik jak span - jest semantycznie obojętny. Sieć internet powstała w centrum naukowym CERN. Naukowcy potrzebowali łatwego dostępu do naukowych publikacji. Mieli gdzieś jak to będzie wyglądać - liczyło się dla nich wyłącznie dobre opisanie treści dokumentu. Po prostu lepiej starać się szukać innych dróg w czasie tworzenia naszej strony niż nadmiernie wykorzystywać semantycznie obojętne znaczniki wzbogacone o identyfikatory i klasy.

Po prostu nakierowuję kolegę od razu na dobry tor i pomagam pominąć błędy jakie ja od dawna popełniałem.

[Kartofelek]

"
Stoi na stacji lokomotywa,
Ciężka, ogromna i pot z niej spływa -
Tłusta oliwa.
Stoi i sapie, dyszy i dmucha,
"

Chciałbym w powyższym tekście wyróżnić użytkownikowi powiedzmy 3 słowa: "stacji", "oliwa", "sapie". Pierwsze niech będzie koloru czerwonego, drugie zielonego, a trzecie niech będzie niebieskiego na żółtym tle. Całość oczywiście jest cytatem, słowa te nie mają dla mnie wartości, nie są linkami, itp. To po prostu wybrane jakieś słowa - np tworzące super tajną teorię, że w wierszach Brzechwy są zakodowane tajne informacje.

Pytanie więc jakie znaczniki by tutaj pasowały? Strong? Nie za bardzo. EM? No nie zupełnie. Q? Lepiej, ale też nie do końca.
No dobrze. Można by wymyślić tagi typu <wiset> (words in super encoded text), ale czasami po prostu łatwiej użyć zwykłego span, który może i nie ma specjalnej roli we wszechświecie, to jednak czasami może nam ten świat uratować. Pamiętaj, że im więcej znaczników, metod itp - tym większa trudność do zakodowania i do ujednolicenia tego całego galimatiasu. Już teraz przeglądarki nie wyrabiają, a co dopiero przy milionie znaczników

[Storm]

Rewelacje? Ja nawet nie wiem dlaczego konsorcjum stworzyło taki znacznik jak span - jest semantycznie obojętny.

Skoro nie wiesz...

Sieć internet powstała w centrum naukowym CERN. Naukowcy potrzebowali łatwego dostępu do naukowych publikacji. Mieli gdzieś jak to będzie wyglądać - liczyło się dla nich wyłącznie dobre opisanie treści dokumentu. Po prostu lepiej starać się szukać innych dróg w czasie tworzenia naszej strony niż nadmiernie wykorzystywać semantycznie obojętne znaczniki wzbogacone o identyfikatory i klasy.

Po prostu nakierowuję kolegę od razu na dobry tor i pomagam pominąć błędy jakie ja od dawna popełniałem.

Wstrząsająca opowieść z której wynika, że nie masz pojęcia o czym piszesz. Po to są znaczniki, identyfikatory i klasy, żeby z nich korzystać, a nie unikać. Semantyczna obojętność.... ło matko!

[Kartofelek]

W tym temacie wszyscy mają rację ;D
Raalsky. Gdy zaczynałem pracę w danej firmie uwielbiałem stylować dokumenty za pomocą znaczników. Sam to robisz i to jest fajne - body > div itp

W praktyce nie zawsze to się nie sprawdza....

Ok - jeżeli robisz sam stronę która jest mocno statyczna - wszystko to ma swój sens i jest jak najbardziej wymagane. Ale
potem przychodzi czas podpinania edytorów wysiwyg, jakiś cmsów i innych pierdół które sobie życzy klient i wtedy operowanie na samych znacznikach jest masakrą.
Doszło do tego, że w swoich arkuszach stylów praktycznie nie używam znaczników... Czemu? Dając pocięty layout drugiemu programiście nie raz i nie dwa okazywało się, że w danym miejscu użyty był inny element html - wtedy całe stylowanie brało w łeb.
Inny koder zastosował np A a nie SPAN i dostawało się mi (a jak ;]). Powiem więcej. Frameworki takie np jak Symfony umożliwiają generowanie "gotowego kodu". Kod taki często może być inny niż nas, a czasami po prostu nie pasować do naszego wyobrażenia prawidłowości. I wtedy bezpieczniej jest zastosować klasę niż dany znacznik.

Imo najlepszym rozwiązaniem jest:
stosowanie dobrego kodu (takiego jaki zastosowałeś na swojej stronie) + nadawanie klas <- pozwala to na lepsze "opisanie kodu" i jeszcze lepszą czytelność (komentarze kończące dany blok, klasy itp). Ale to tylko moje zdanie.

...Osobiście podoba mi się używanie klas. Jakiś taki ten kod css jest ładniutki gdy zaczyna się od samych kropek (jestem jednym z tych masochistów, którzy piszą stylowanie w 1 linijce)