Ako najlepšie konvertovať PSD -> HTML + CSS

4. 10. 2012 16:01:20

Čaute, mám dizajn stránky v PSD formáte. Zaujímalo by ma, aký postup (aký software) je najlepšie využiť pri kódovaní grafiky do funkčnej podoby stránky. Zatiaľ som to robil všetko prostredníctvom Notepadu++. Vždy som sa ale stretol s tým, že IE dizajn nezobrazoval korektne a bolo potrebné to dolaďovať. Je lepšie využiť nejaký z programov (napr. Dreamweaver)? Je schopný Dreamweaver ošetriť css je IE? Vopred vďaka za vaše odpovede a rady.

4. 10. 2012 16:01:20

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815520

Jiří Kubala

(24 hodnocení)

4. 10. 2012 16:03:18

Nejlepší je vykašlat se na programy a napsat si to sám.

4. 10. 2012 16:03:18

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815519

Jakub Hamala

(23 hodnocení)

4. 10. 2012 16:04:10

Dělám to ručně v PSPpadu, stránky se zobrazují korektně ve všech běžných prohlížečích.

4. 10. 2012 16:04:10

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815518

RoyalManG

(1 hodnocení)

4. 10. 2012 16:08:24

Jasné, doteraz som to tak aj robil a stále robím. Pýtam sa preto, aby som si túto činnosť uľahčil, ak je to možné. Ide mi hlavne o kompatibilitu stránok s IE. Kde dolaďovanie dizajnu pre tento internetový "prehliadač", ktorý ako jediný je "neschopný" čítať kód stránky. Ostatné moderné prehliadače si s ním hravo poradia, ale on nie a tak musím ďalší čas venovať len zobrazovaniu stránky IE.

Ak je to najlepšie robiť ručne ako to robím teraz. Môže mi niekto poradiť čomu hlavne mám venovať pozornosť pri CSS aby ho správne zobrazoval aj IE?

4. 10. 2012 16:08:24

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815517

Miloslav Lešetický

(10 hodnocení)

4. 10. 2012 16:14:06

RoyalManG

Nejlepší cestou, jak si kodérskou činnost ulehčit, je naučit se pořádně CSS. Vypadá to jako hloupá rada, ale věř mi, není.

4. 10. 2012 16:14:06

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815516

RoyalManG

(1 hodnocení)

4. 10. 2012 16:36:04

Plaváček, Vašu radu plne beriem a súhlasím s ňou. Viete mi poradiť dobrú stránku, na ktorej je to pekne všetko popísané? Poprípade nejaký tutoriál?

4. 10. 2012 16:36:04

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815515

Miloslav Lešetický

(10 hodnocení)

4. 10. 2012 16:52:27

RoyalManG

Ono je to těžké. Nějaký ucelený tutoriál, pokud vím, neexistuje. Doporučil bych ti dvě knihy, sice staršího data vydání, ale většina postupů tam uvedených funguje dodnes (http://knihy.cpress.cz/css-kaskadove-styly.html a druhá, na níž jsem se podílel http://knihy.cpress.cz/css.html). Bohužel nevím, zda je lze ještě zakoupit. Pak je pro kodéra samozřejmě povinné tohle http://www.w3.org/Style/CSS/. A velmi užitečný webík mapující kompatibilitu http://www.quirksmode.org/compatibility.html. A závěrem to nejdůležitější: http://www.zdrojak.cz/clanky/jaky-jazyk-je-pro-weboveho-kodera-nejdulezitejsi/.

Sám jsem prošel stejnou cestou a lepší fakt není. Nemůže a nikdy nebude existovat software, který za tebe vše udělá automaticky.

4. 10. 2012 16:52:27

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815514

RoyalManG

(1 hodnocení)

4. 10. 2012 16:56:56

Ja sa nerád aj tak spolieham na nejaké programy, preto som doteraz robil všetko ručne, sám v obyčajnom Notepade. Toto bol len nápad, či existuje alebo nie program na uľahčenie či urýchlenie tejto práce. Prácou v Notepade má človek ale všetko pod kontrolou a vie, že sa tam nedostanú žiadne nepotrebné bludy pridané programami. Určite som nehľadal program, ktorý by to za mňa všetko sám spravil. ;) Vďaka za rady, idem sa hneď pustiť do tých linkov. :)

4. 10. 2012 16:56:56

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815513

Miloslav Lešetický

(10 hodnocení)

4. 10. 2012 16:58:55

RoyalManG

Používám DreamWeaver už od verze 3, ale zásadně v režimu kódu. Je to jeden z nejlepších programů nejen pro kodéra, jen je bohužel dost drahý.

4. 10. 2012 16:58:55

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815512

ghostik

(21 hodnocení)

4. 10. 2012 17:23:17

ono je celkem jedno, v cem se to nakoduje a ostyluje (od poznamkoveho bloku pres pspad po dreamweaver)

je to jen a jen o tom, jak kdo umi html a css

zadny program neporesi za tebe to, ze bys par tlacitkama rozrezal design a vyplivnul ti validni a funkcni kod pro vsechny prohlizece

takze chyba je jen u kodera, ktery si nepohlidal rozdily, ktere dane prohlizece maji

IE sice je prace navic, ale i ten se da premluvit a pomoci kvalitniho html a css se to da napsat bez extra stylu nebo max s par radky extra stylu

ja osobne to delam tak, ze pisi co nejjednodussi kod a co nejjednodussi styl => toto v beznych prohliecich jede ok

pak na to kouknu na IE8-IE6 (je-li treba) a doladim drobnosti

4. 10. 2012 17:23:17

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815511

Jan Matoušek

(12 hodnocení)

4. 10. 2012 18:39:18

no s poznámkovim blokem to už přeháníš:-) Ne, že by to nešlo, ale přehlednost nulová a žádné autocomplete. Tyhle 2 věci značně ulehčí práci.

Takže já bych doporučil nějaký kvalitní editor. Mě například vyhovuje NetBeans, protože ho využívám i k programování, ale je celá řada jednodušších.

Jinak To chce prostě pilovat a pilovat. Asi nejlepší je prohlídnout si nějaké nakódované designy a učit se z nich a hledat si tu svou cestu. Ono to časem přijde samo. Např. já už nepřemýšlím nad IE, už prostě vím, co si můžu dovolit a co ne.

4. 10. 2012 18:39:18

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815510

Nodon

(1 hodnocení)

4. 10. 2012 18:46:36

Já když něco kóduji většina věcí se mi zobrazuje korektně ve všech prohlížečích a v IE je jen občas potřeba doladit nějak drobnost. Chce to vědět jak danou věc udělat.

4. 10. 2012 18:46:36

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815509

Martin

(62 hodnocení)

4. 10. 2012 18:53:14

Já třeba používám na všechno (PHP, CSS, JS, XML) PHP Designer. Zkoušel jsem jich spoustu a tenhle mi plně sednul. Základ je aby to znalo syntaxi a dokázalo to doplňovat, kontrolovat atd.

4. 10. 2012 18:53:14

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815508

Jirka

(74 hodnocení)

4. 10. 2012 19:39:48

Taky používám jen PSPad,

na jeden monitor css ( ten mám na výšku, ptž css bývá hodně ) na druhy html ( + JS ) na třetí předlohu PSD a na druhém pc výslednou stránku (PSPad -> ftp). Oproti dřívější práci na 1 monitoru to je opravdu poznat.

Také je lepší mít k dispozici víc systémů na testování : mám win xp, ubuntu a notes s win7 ( jen kvůli IE9 ). Ještě chybí mac :D

Samozřejmě vše ručně. I tady platí staré pořekadlo - co si člověk neudělá sám...

4. 10. 2012 19:39:48

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815507

Jakub Weber

(4 hodnocení)

8. 10. 2012 08:20:30

CSS Piffle či CSS Hat. Sice jsem to nikdy nezkoušel, ale prej to je dobré..

8. 10. 2012 08:20:30

https://webtrh.cz/diskuse/ako-najlepsie-konvertovat-psd-html-css#reply815506