Názory k článku DesignBorg umožní převést soubor PSD přímo na prototyp webu

Zkoušel jsem to vaše slavné demo a když je tam text, ve kterém je použit mix různých stylů, velikostí a barev (což je u webdesignu normální), tak si na tom to vaše zjišťovadlo vyláme zuby.

PDF s informacemi o vrstvách je snad vtip, ne?

Mimochodem - dnes si nemusíte kupovat Adobe programy, stačí si zaplatit pár korun měsíčně za předplatné a máte celý balík. A tam jsou kromě Photoshopu další věci, které se vývojáři hodí - Dreamweaver, Flash, Fireworks... Nemluvě o chystaných peckách pro HTML5.

Osobně si nedovedu představit, jak bych bez Adobe programů fungoval. Kdybych měl nakoupit alternativní produkty třetích stran (jako je třeba ten váš), tak by to byl opruz a nakonec by to stálo víc, než celá Adobe Master Collection.

Skvělý nápad. Znám spoustu kodérů co nadávají na stávající řešení a chtěli by přesně něco takového. Každopádně předpokládám, že pro vývoj takové aplikace musíte být zruční kodéři a nejenom to. Proč máte tedy vaše oficiální stránky složené z obrázků? :) To na mě působí trochu nedůvěryhodně.

Dobrý den,
jsem rád, že se Vám nápad líbí. Právě z toho důvodu to děláme. Samotný web má znázorňovat jak má konečný prototyp vypadat.Web se bude časem měnit podle nových features, které se budou postupně vyvíjet.

No mě to právě mate, protože v článku mluvíte o tom, že usnadníte práci vývojářům, kteří chtějí vědět velikosti písma a možná i font a nakonec je text obrázkem. Jak toto pomůže?

Ano máte pravdu, kodér potřebuje více než jen prohlížet PSD. V brzké době dodáme nástoje na stahnutí celého PSD jako soubor PNG obrázků, informace o textových vrstvách zvlášt v PDF dokumentu a v současné době implementujeme tyto nástroje http://slicer.designborg.com/, které umožňují úpravu obrázků. Pokud bude poptávka i po jiných nástrojích, zvážíme jejich implementaci.

Vytvoření prototypu z designu je jen jedna feature. Vytvoření prototypu webu z PSD je hlavně zaměřeno na pomoc kodérovi v komunikaci s jeho zákazníkem.
Díky tomu, že jsme schopní zpracovat kompletně PSD a vytáhnout z nich veškeré informace o vrstvách jako typ fontu, velikost, barva efekty, masky atd. Bude to jako feature zvlášť, kdy po kliknutí na tlačítko se Vám stáhne PDF s informacemi o vrstvách.

Dobrý den,
výstupem má být prototyp webu, ne hotový web, který už kodér jen nasadí na stránku. Tento prototyp slouží jako ukázka toho, jak bude web po nakódování fungovat a vypadat.
Atributy, jako třeba ALT tam chybí, protože u prototypu není potřeba.

Pokud má jít pouze o to, že se z PSD souboru vytvoří náhled, není nic jednoduššího, než soubor uložit v jpg, png, pdf. Kodér se bez Photoshopu beztak neobejde, ani nemůže. Vždyť snad každý, kdo s webem dělá, tak kolikrát potřebuje jen něco oříznout, tu přidat stín, nebo šablonu přebarvit. Je to až moc odborná a komplexní práce, aby ji zvládla aplikace. Tím spíš webová aplikace. Takže chválím snahu o něco nového, ale nic to bohužel nepřinese. Btw, výsledek mého testování Vaší aplikace: Error-Rasterization failed. S pozdravem kodér/programátor :)

I prototyp může být dobře nakódovaný ;-) Jinak je možnost někde se podívat na zmiňované PDF s popisem vrstev?

Ano i to je způsob, ale myslíte si že každý zákazník má přesnou představu, jak ten design ve výsledku bude pracovat?

"Vždyť snad každý, kdo s webem dělá, tak kolikrát potřebuje jen něco oříznout, tu přidat stín, nebo šablonu přebarvit."
To je samozřejmé. Na této adrese http://slicer.designborg.com/ najdete testovací verzi nástrojů na úpravu obrázků v PSD, které v současné době implementujeme. Je tam například nástroj Crop, která vám ořízne dané PNG až na kost, automatické rozřezání a další.

no uz jsem jasal ze konecne nekdo vyresil problem prevodu psd predlohy do kvalitniho html + css....
no tak zas nic :(
zklamane odchazejici grafik/koder v jednom

Vzledem ke svým zkušenostem vím, že pokud daný koncept neodprezentujete zákazníkovi přímo ve firmě, nejsou schopni většinou "nic".

Ale je to především otázka profesionality nabízených služeb. Pracuji pro PROFI firmu v Praze a pro nás by Vaše služba přínos jistě neměla.

Pro studenta, který pracuje z domova možná, protože nemá možnost předvést projekt ve firmě. Navíc dnešní prezentace obsahují spousty jQuery prvků, které jen s těží naimplementujete. A právě to tvoří funkčnost a použitelnost webu, a tu vy neodprezentujete pomocí náhledu.

Takže máte mé uznání v tom, co děláte, ale dle mého názoru nemáte moc šancí na zbohatnutí.

Teoreticky ani nemůže vzniknout takový systém, protože každý design je originál a má jiné požadavky na použitelnost.

A to vůbec neřeším, že dnes jsou všechny webové stránky stavěny na redakční systémy. Ano, bude to fungovat ve chvíli, kdy půjde o vždy stejné šablony se stejnými funkcionalitami. A velmi rád se přesvědčím o opaku, zatím se tak ale nestalo :)

Mě také!!! :)

Dobrý den,
za tuto chybu se omlouváme. Narazili jsme dneska na problém při zpracování PSD a ten vyhazoval tyto chyby. Chyba už byla opravena a vše by mělo jet jak má.
Pokud jsme uvedli váš email, tak už vám určitě došlo potvrzení o zpracování i s odkazem. Jestliže jste email neuvedli, tak mi napište na zbynek.nedoma@de­signborg.com vyřešíme to.

mno, je tam OD 18 eur
trochu jsem si zaklikal a vypadla na mě nabídka
€ 34,43 za měsíc

K tomu predplatnemu... libilo by se mi, kdybych zaplatil za jeden mesic a po uplynuti te doby mi to prestalo fungovat stejne jako demo. Za dva mesice bych si treba zase mesic zaplatil. O teto moznosti jsem se ale zatim nedocetl a moznost zruseni predplatneho jen telefonicky nekam do US me moc nelaka.

Vo výstupe, prototype, sa text zobrazuje obrázkom a to hlavne z toho dôvodu, aby sme neporušili vernosť zobrazenia návrhu. Nie sme schopní (nikto nie je) pokryť všetky dostupné fonty, hlavne v prípade, keď grafik použije non web safe fonty, prípadne fonty, ktoré si vyžadujú špeciálnu licenciu na použitie na webe. Informácie o fonte, veľkosti písma, riadka a pod. sa zobazujú pri príprave protoypu. Nahrajte PSD, kliknite na textovú vrstvu a tieto informácie tam uvidíte.

Co takhle zkusit GraphicLetter, nová služba, kde stačí nahrát psd/jpg, přidat odkazy a nechat si vygenerovat html email, který stačí poslat přes oblíbený nástroj na rozesílku. Není potřeba žádné kódování. Celá služba je zdarma v beta verzi na www.graphicletter.com

Pokiaľ ste tvorca obsahu v Adobe programoch, ako napríklad designer, tak mi je jasné, že radšej kúpite celú Master collection. Ale čo ľudia, ktorí nepotrebujú vytvárať obsah, potrebujú len informácie z PSD, ako napríklad vývojári? Navyše licencia na tieto nástroje nie je moc priaznivá, preto firmy musia kúpiť licenciu pre každého jedného vývojára zvlášť (dokonca aj keď na jednom počítači je viac účtov, musíte kúpiť licenciu pre každý účet, nie len mať jednu pre jeden počítač).
Pridaná hodnota u DesignBorga nie je len zobrazovanie informácií z PSD, ale napr. aj rasterizácia všetkých vrstiev. Ako dlho by vám to trvalo v samotnom Photoshope alebo Dreamviewery? Navyše, pokiaľ nekódite web pomocou Dreamvieweru, ale ručne tak, ako to robí väčšina kodérov, tak si Dreamviewer ani nekúpite a robíte to len vo Photoshope a tam to trvá rádovo hodiny.
Obaja vieme, že slicing tool vo Photoshope je na nič. Keď chceme napr. tlačítko rozdeliť na 3 časti (ľavá strana, stred, pravá strana) a tlačítko nie je obdĺžnik, tak musíte pomocou slicing nástroja vyznačiť ľavú stranu, stred a pravú stranu, skryť všeko, čo je za ním, skryť text, stlačiť Alt+Ctrl+Shift+S a kliknúť na uložiť, potom všetky vrstvy zase zviditeľniť a opakovať pre ďaľších 100 vrstiev. Postup sa dá modifikovať duplikovaním vrstvy do nového PSD súboru a orezaním súboru o neviditeľný okraj, ale zase to opakovať na 100 ďaľších vrstvách. Poznáte jednoduchší spôsob?

Postupom času budeme výstup prototypu zlepšovať, pokiaľ máte nejaké návrhy, radi ich uvítame a zaimplementujeme. Momentálne sú na pláne nové funkčnosti, aby sme získali spätnú väzbu o tom, čo našich potenciálnych zákazníkov najviac zaujma.
PDF s popisom vrstiev zatiaľ nechystáme, do budúcna to bude skôr HTML stránka s ukážkou, ako jednotlivé časti webu nakódovať (ukážka HTML + CSS a zároveň výsledok).
To, čo kolega spomínal pod PDF je myslené ako design manual (formát ešte nie je úplne jasný, možno to bude docx, html alebo png), kde bude vizualizovaná informácia o rozložení prvkov na stránke. Pokiaľ chete vedieť v akej podobe to chystáme, kontaktujte nás (cez naše stránky) a pošle vám ukážku toho, ako by design manuál mohol vypadať a vašim názorom môžete ovplyvniť jeho budúcu podobu (môžeme tam pridať, čo sa vám hodí).

Áno, toto je tiež možnosť, ešte by to, ale chcelo mierne doladiť, nepr. nejak takto:

<html><body><map name="odkazy"><area href="prvni.htm" shape="rect" coords="80, 80, 130, 130"><area href="druha.htm" shape="rect" coords="20, 20, 50, 50"></map><img src="design.jpg" usemap="#odka­zy"/></body></html>

K tomu ešte pripočitajte prácu na export každej stránky designu ako jpg, nameranie, kde sa aký odkaz nachádza a rozkopírovanie opakujúcich sa odkazov do všetkých stránok a máte jednoduchý prototyp. Na tomto princípe je postavený invisionapp.com a podobné služby a ľudia sú ochotní za to platiť, aj keď je tak jednoduché.

Viete byť presnejší, čo myslíte tými ďaľšími operáciami, ktoré kodér musí urobiť? Keď teda vynecháme rasterizáciu vrstiev, zisťovanie polohy a veľkosti prvkov, informácie o textových vrstvách, príp. slicing?

Ano, to s tými fontami a CSS to je skvelý postreh a povedalo nám to už viac ľudí. Bude to zmenené v ďaľšej verzií, aby to vývojár mohol len skopíraovat a vložiť.
Myslím, že aktuálne väčšie percento designerov stále pripravuje grafiku pre web vo Photoshope, aj keď na to nie je primárne určený, o tomto sa dá ešte dlho diskutovať, či to tak je alebo nie je.
Ano, vaše vstupné náklady budú €282, ale prijatím nového designéra alebo vývojára musíte kúpiť novú licenciu, tak prečo za licencie pre vývojára proste neušetriť? Obdobne, si môžete povedať, že keď začnem podnikať, musím si postaviť kancelárie, namiesto toho, že si ich za nižšiu cenu len prenajmete. Tiež si môžete prenajať horné tri poschodia v Danube house v Prahe namiesto miesta v Node5. Otázka je, či to na začiatok vážne potrebujete a či to pre vás má rovnaký prínos?

Nesnažíme sa o online verzi Photoshopu! Pokiaľ potrebujete obsah vo Photoshope vytvárať, tak si ho určite kúpte lepší nástroj na trhu asi nenájdete. My len zobrazujeme informácie z PSD a k tomu pridávame nástroje, ktoré sú pre designéra alebo vývojára zaujímavé, nástroje, ktoré nemá ani Photoshop alebo Dreamwaver.
Čo sa týka vašich pochybností o výkone aplikácie, môžem vás ubezpečiť, že sme na to mysleli. Aplikácia je škálovateľná a úzke hrdlá sú riadené frontou, aby sa súbežným výpočtom vlákna navzájom nespomalovali. Za behu vieme zvyšovať/znižovať výkon o čom svedčí fakt, že momentálne sú spustené dve inštancie (ďaľšie 2 sú v zálohe, ktoré vieme do 30 sekund zapojiť do infraštruktúry) a do hodiny vieme pripraviť úplne novú inštanciu do zálohy, prípadne zapojiť ju priamo do infraštruktúry.

Až tak skeptický nie sme. Web development sa niekedy až moc preceňuje. Samozrejme, základom je design a ten je unikátny, ale nakódovanie designu do HTML je len proces a z 80% sa jedná len o opakované používanie určitých techník a postupov. Keď sa v rýchlosti zamyslím, tak proces prevodu PSD do HTML by sa dal zapísať algoritmom nejak takto:

1. Implementuj základný layout
2. Prvky designu rozdeľ na komponenty podľa toho, do ktorej časti layoutu patria
3. Ak už nie sú žiadne komponenty, choď na bod 4.
3.1 Ake je koponenta primitivny prvok, pokračuj bodom 3.4
3.1 Implementuj layout komponenty
3.2 Prvky designu, ktoré patria do aktuálnej komponenty rozdeľ na nové. menšie komponenty podľa toho, do ktorej časti layoutu patria a pridaj ich ku komponentám
3.3. Skoč na bod 3.5
3.4. Implementuj komponentu do HTML
3.5. Odober aktuálnu komponentu
3.6. Skoč na bod 3
4. Koniec

Áno, potom je potreba výsledok ešte doplniť o JavaScript, ale tam už prácu moc nezjednodušíme, keď už existuje jQuery.

Víte jak snadno převést PSD na prototyp? Nechat si to poslat v jpg a udělat tohle:

<html><body><img src="design.jpg" /></body></html>

Jinak samozřejmě i kodér potřebuje Photoshop, protože tam musí udělat řadu dalších operací, než si to jen "prohlížet"...

Pořád nějak nechápu k čemu to je. Má mě to, jako kodéroj, usnadnit práci? To pochybuji na to tam je moc šumu, ty informace o vrstvě nejsou předformátované css, špatně se vyhodnocují textové vrstvy... Joo je to 1:1 náhled PSD, jenže to samé mi muže grafik vyexportovat v png a má to asi stejnou hodnotu. Další zásadní věc dneska se pořádné weby (né sranda weby pro které je toto možná určené) dělají ve FireWorks! Photoshop není primárně určen na tvorbu webu, od toho je právě Fw. Má mnohem úspornější formát (10x i větší úspora místa) a je levnější (€282). Pokud se rozhodnu pro podnikání tak musím přece počítat se vstupními náklady.

Upřímně - pokud má být výstupem web tvořený obrázky, s inline styly v kódu, elementy obsahujícími nepotřebné/zas­taralé atributy(type="tex­t/javascript" atd.), chybějícími atributy(alty u obrázků), přebytečnými atributy(value u file inputu) a zastaralými deklaracemi(<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">), tak to opravdu moc velkou důvěru nebudí...

Dnes je mozne poridit Photoshop za pronajem za par stovek mesicne primo na strankach adobe, ouch... :)))

Konkretne za 18 eur: http://www.adobe.com/cz/products/creativesuite/cssubscription.html

Já je tedy vůbec neznám a na jejich web jsem zatím ani nekoukal.. ale nepřijde vám, že jste trochu AZ NEPRIJEMNE PRISNY??

vemte si, kolik lidi pracuje pro Adobe na vyvoji PhotoShopu a vami zminenych kolekci - jsou to DESITKY, spise STOVKY lidi. pak je jasné, že si můžete vyčlenit skupinu pro efekty, typewriting nebo např. křivky. Ale oni jsou JENOM TRI!!

vidíte - či jste schopen chápat ten rozdíl??!! navíc, víte vůbec, jak vznikl adobe? nebylo to sto lidi naženutých investor do haly "a ted makejte, když vás platím!"... zkuste alespoň trochu ocenit to, že mají originální myšlenku, elán a očividně nejenom snahu ale i schopnosti tuto první fázi dotáhout do konce.

pokud se jim to podařÍ, tak odhaduji, že do dvou let o jejich úspěchu bude tak široce známo, že i zmíněný Adobe přehodnotí svou politiku.

BTW: zkušený webdesigner si dneska hraje vystači s Adobe PhotoShop 5.5 - protože "kdo na to má - a má pro to cit" - nepotřebuje features verze CS... ale to jen málokdo uzná, neboť naopak svůj "cit pro věc" svádějí na možnosti PhotoShopu.

Navíc podle Vašich reakcí, co tady čtu, tak se vlastně nesnažíte o nic jiného, než vytvořit online verzi Photoshopu. Nedokážu si představit, s jakou pružností jste schopni na serveru zpracovávat několik desítek PSD souborů v rozsahu, který uvádíte.

I lokální stanice má často s photoshopem s několika desítkami vrstev problém. Takže... Ano, raději si koupím licenci na Photoshop :)