C'è un modo per convertire la GUI nell'immagine in HTML?

Question

Ho queste schermate della GUI del team di progettazione che devo convertire in una pagina web e cosa no. sto pensando di trovare un sito Web che assomigli alla GUI in modo che io possa copiare e incollare l'html in modo da non dover ricominciare da zero. l'unico inconveniente di questo metodo è che non so quale sito Web assomigli davvero, quindi ciò potrebbe significare molto tempo di navigazione. hehe.

Quindi ti stai solo chiedendo se esiste uno strumento che può aiutarmi a fare la ricerca? O ancora meglio se c'è uno strumento che può convertire l'immagine in equivalente di una pagina web html, sarebbe ancora meglio.

Immagino di essere solo un altro programmatore pigro e non creativo che cerca di fare la parte della gui in modo rapido e sporco, hehe.

Grazie.

Answer 1

Vuoi dire che hai una schermata PNG, GIF o JPG ... e vuoi inserirla in un programma e sputarlo in una raccolta di HTML e CCS che se visualizzati in un browser sembrerebbero proprio così immagine?

Mi dispiace far scoppiare la tua bolla, ma sarei molto, molto, molto sorpreso se fosse così.

Fondamentalmente è semplicemente impossibile. Se vedi una casella sullo schermo, potrebbe essere un'area di testo, o un div, o un td, o una gif, o una delle quindici cose diverse. Non c'è assolutamente modo che un programma possa capire quale elemento HTML usare.

Mi dispiace, ma dovrai scrivere tu stesso HTML. Uno strumento come Dreamweaver ti aiuterà a velocizzare il processo se non conosci HTML. Ma scommetto due bit per una scoreggia che non c'è nulla al mondo che automatizzerà questo lavoro.

Non è la risposta che volevi, scusa. Ma è la risposta.

Answer 2

Sono abbastanza sicuro che puoi usare Adobe Dreamweaver per farlo, passando dal design all'HTML.

Answer 3

Hai detto che hanno usato Fireworks per progettare. È Adobe Fireworks ? In tal caso, quell'applicazione ha la possibilità di inviare il progetto in HTML per te.

Dall'elenco delle funzionalità:

Progetta una volta, distribuisci su molte piattaforme

Invia i progetti di Fireworks a HTML o all'applicazione che preferisci: Adobe Flash, Adobe AIR ™ o Adobe Flex®. Crea skin personalizzate con strumenti di progettazione eccezionali. Ora i tuoi strumenti suoneranno bene insieme. Progettare all'interno di Fireworks e quindi esportare layout basati su CSS conformi agli standard - completi di fogli di stile esterni - in Dreamweaver CS4. Creare componenti in Fireworks per l'uso nel software Adobe Flex Builder ™. Crea prototipi Adobe AIR basati su HTML direttamente da Fireworks.

Answer 4

Non sono a conoscenza di alcuno strumento in grado di convertire un'immagine di una GUI nell'HTML equivalente. Immagino che dipenderebbe molto dallo stile della GUI comunque. Inoltre, probabilmente produrrebbe dell'HTML piuttosto brutto e da incubo da mantenere.

Probabilmente non è la risposta che vuoi sentire, ma inizierei a scrivere codice.

Il team di progettazione ha eseguito la progettazione in HTML? Mockup di Photoshop? Entrambi ti darebbero una possibilità migliore per evitare il tempo di codifica manuale.

Answer 5

Da uno screenshot?

Probabilmente non vuoi farlo. Probabilmente vuoi, almeno, il file salvato come jpeg o png, o qualsiasi formato, preferibilmente senza compressione in modo da non perdere la qualità.

Quindi puoi tagliarlo. Google "tutorial per affettare Photoshop" e tonnellate appariranno.

Nel migliore dei casi, si desidera il file PSD, che è quindi possibile scorrere verso l'alto e nascondere / mostrare i livelli di cose che non si desidera, ecc.