[Z.....e]

Hej mireczki spod tagu. Udało mi się znaleźć dorywczą pracę, gdzie robię projekty stron w HTML, CSS3 i w CMS (Concrete). Strony maja być responsywne i używam do tego boostrapa (taki wymóg). Dostałem zlecenie w postaci plików .PSD. Mój problem polega na tym, że kompletnie nie wiem od czego zacząć. Dlatego chciałbym aby ktoś mi nakreślił etapy tworzenia strony, swojego rodzaju algorytm jak powinienem postępować.

Widzę, że plik .psd posiada warstwy, na razie doszedłem do tego, że mogę generować zasoby obrazkowe. Wydawało mi się, ze grafik dostarczy gotowe, ale myliłem się. Dlatego by było mi milo gdyby ktoś kto miał doświadczenie z tego rodzaju projektowaniem stron nakreślił mniej więcej kolejność za co powinienem się zabrać. O ile sam HTML i CSS3 nie sprawia problemu, to jednakże chciałbym uniknąć "stajni Augiasza" aby nie wykonywać zbędnej roboty, którą teoretycznie concrete by zautomatyzował. Za wszelkie porady będę wdzięczny.
#webdev

[k.....a]

@Zeroize: Jest jakieś Adobowe narzędzie do cięcia layoutu z PSD

[k.....a]

@Zeroize: Dreamweaver ;) bodajże - ja nigdy nie używałam bo mało frontendowa jestem, ale koledzy używali.

[k.....a]

@Zeroize: Bootstrapa rozumiem znasz i kumasz o co chodzi?

[Z.....e]

@katinka: Do tego służy generowanie zasobow obrazkowych, ale podejrzewam, że odpowiednie wycięte elementy dadzą odpowiedni szablon. Chodzi mi o ogólne podejście jak zabrać się za taki projekt od a do z. Od etapu psd do postawienia strony w cms.
Co do bootstrapa to wyczaiłem na razie, że jest to zbiór plików css, js i jakichś tam jeszcze, które pozwalają na utworzenie responsywnych stron czyli takich, które sprawią, że wszelkie manipulacje szerokością

[SaperR]

@Zeroize: Zgłosiłeś się do pracy, o której nie masz pojęcia?

[Z.....e]

@SaperR: Mam pojęcie bo te technologie które podali ogarniam, ale nie ogarniam tylko momentu przejścia z .psd do tworzenia strony. Dostalem plik .psd z którym muszę coś zrobić i chcę się dowiedzieć jak to wygląda praktycznie wyłuskiwanie odpowiednich elementów na stronę.
Jest różnica pomiędzy robieniem strony od podstaw w notepadzie i stosowaniem systemu cms, a bardziej "zautomatyzowaną" gdzie przenoszę warstwy z .psd do plików graficznych i wymaga to po praktycznego obycia.

[SaperR]

@Zeroize: No to masz plik PSD, widzisz jak ma wyglądać strona - możesz sprawdzać czcionki (rozmiar, kolor, itd.), wymiary poszczególnych elementów, ich kolory, kształty... Cięcie stron już odeszło w niepamięć - teraz jak najwięcej robi się CSS-em, a tylko to co konieczne to obrazkiem. Jak chcesz wydobyć jakiś obrazek to po prostu zaznaczasz warstwę z nim, zaznaczasz, kopiujesz i robisz co tam chcesz z nim.
Adobe ma teraz w Creative Cloud

[k.....a]

@Zeroize:
Odpalasz program, w którym kodujesz, zakładasz nowy projekt ;)
Instalujesz sobie tego czystego gotowca.
W gotowcu szukasz katalogu z templatami, plik css, otwierasz sobie je i edytujesz.
W gotowcach zazwyczaj będziesz miał w szablonach jakoś predefiniowane bloki typu header logo menu - w większości jest to kwestia do załatwienia tylko przez CSS.
W trakcie przerabiania CSS wycinasz sobie potrzebne ci elementy z PSD, zapisujesz jako grafikę webową (jpeg, png, gif)

[Z.....e]

@katinka: Łap plusika, dużo mi to pomogło i lepiej już to ogarniam.
Czyli jak dobrze rozumiem, nowy projekt to po prostu katalog. W tym katalogu instaluję cms concrete. Wrzucam do tego katalogu bootstrapa, a reszta wedle uznania tak jak psd pokazuje aby najbardziej wiernie odpowiadało wersji graficznej. Dobrze rozkminiam?

[k.....a]

@Zeroize: Tak

[k.....a]

@Zeroize: Nie znam tego CMS ale może już mieć nawet wbudowanego bootstrapa.

[Z.....e]

@katinka: Jesteś wielka. Ogólnie instalowałem cms i ma podobne pliki co bootstrap, bo porównywałem katalogi wstępnie. Ogólnie powiem Ci, że jak na pierwsze wrażenie, to dosłownie klika się w nim strony ( ͡° ͜ʖ ͡°)

[k.....a]

@Zeroize: Spoko, z doświadczenia wiem że najtrudniej jest zacząć - ogarnąć się co jak i gdzie, a potem już samo pisanie kodu to tylko relaks ;)

[Z.....e]

@katinka: Tak mnie zastanwia tylko jeden aspekt, bo były tam niestandardowe kolory tła pokroju panterek itp. takie elementy musze traktować jako obrazki? Np. kontakt do firmy który jest na tle chromowanej felgi z czarnymi wgłębieniami, co sprawia że w css raczej tego nie opiszę. Bo jeśli mam standardowe tło powiedzmy szare, to już muszę w css wstawić? Czy ogólnie przyjąć, że jak jest projekt graficzny na szerokość 800x1200 to sztywno trzymać

[k.....a]

bo były tam niestandardowe kolory tła pokroju panterek itp. takie elementy musze traktować jako obrazki?

Tak, jak panterka - to grafika. Prawdopodobnie jakieś powtarzalne tło, to musisz wyciąć sam fragment, który się powtarza.

Np. kontakt do firmy który jest na tle chromowanej felgi z czarnymi wgłębieniami, co sprawia że w css raczej tego nie opiszę.

Same tło, tak, napis już w html

Bo jeśli mam standardowe tło powiedzmy szare, to już muszę

[Z.....e]

@katinka: Noc jest długa, będę walczyć. Więcej mi uświadomiłaś niż znalazłem na google. Normalnie bym przytulił za takie informacje. Dozgonnie jestem wdzięczny =)