Ferramenta avançada para cortar HTML

[Rangel Reale 0]

Olá pessoal!

 

Meu nome é Rangel Reale, e sou programador web PHP. Faço diversos sites, e sempre tive um problema: fazer o corte HTML do layout em PSD que os designers fazem. Cortar HTML no Photoshop é terrivel, e o resultado normalmente é péssimo para quem tem que integrar em sites dinâmicos.

 

Pensando nisso, desenvolvi um programa especificamente pra esse fim: pegar o layout PSD (ou qualquer outro formato de imagem), e transformar em HTML table ou AP tableless.

 

Mas não somente isso, além disso a ferramenta permite mais de um nível de table/DIVs, criação de máscara-base para corte de páginas semelhantes (mas com customizações por página), corte de botões e outras imagens fora do layout principal, criação fácil de transparência, e ferramenta de ajuste pixel a pixel das bordas do corte, com preview instantâneo.

 

A ferramenta se propõe a gerar o código mais limpo, identado e compatível possivel, principalmente focado para a integração por desenvolvedores.

 

O programa se chama "HTMLButcher", para quem quiser mais informações, o site oficial é:

http://www.htmlbutcher.com

 

O software é 100% nacional, porém por enquanto só tem versão em inglês (mas se houver demanda uma versão em português pode ser criada). Também estamos totalmente abertos a críticas e sugestões.

 

PS.: tentei achar regras nesse fórum sobre anúncios de software, e não achei nada, se estiver na seção errada, ou não for permitido, por favor me comuniquem.

 

[_Vinny_ 0]

Se é "100% nacional" porque o mesmo está em inglês e o site a mesma coisa?

 

Até parecer ser uma boa ferramenta, eu ja tive que desistir de layout por causa de uns cortes.

[Rangel Reale 0]

É que por sermos uma empresa pequena, pra lançarmos um ferramenta em shareware teriamos que escolher fazer em um idioma inicialmente, já que alem da ferramenta tem o manual e o site, por isso optamos por ingles inicialmente, mas a ferramenta de programação que usamos suporta interfaces em mais idiomas.

 

Logo que tivermos mais recursos, faremos em outros idiomas.

 

Porém, o conceito do sistema usa palavras bem simples do ingles, alem de vários termos técnicos de HTML, acho que a maioria das pessoas não terá problema com o inglês usado.

[Aprendiz CSS 3]

Até pode ser legal....

 

mas ter que pagar é complicado, se a pessoa é desenvolvedora free-lance, fica muito complicado para ela ter de pagar!

 

poderia lançar um versão Free e suporte em Portugues, ou um arquivo que os proprios usuarios pudessem traduzir para o seu idioma!

 

abraço

[Rangel Reale 0]

Bom, um dos motivos principais do desenvolvimento desse programa, foi que, pelo menos aqui na região que trabalho, o pessoal costuma cobrar - e bem caro - para cortar HTML.

 

Nem todos os designers cortam pra HTML, muitos so fazem o PSD, e terceirizam o corte HTML. E o valor cobrado so para o corte, dependendo do tamanho do site, ja vi variar de 200 a 1000 reais, só o corte!

 

Então, em uma ferramenta de 60 reais, um único corte já pagaria o custo dela. E tenho certeza que cortar usando essa ferramenta, isso é muito mais rápido. Eu sei, porque depois dela, eu mesmo passei a cortar meu HTML, e economizo uma grana (e dor de cabeça com HTML mal cortado) em todos os sites que eu faço.

 

Quanto a tradução, eu comecei a trabalhar nisso, estou fazendo uma versão em portugues. Mas depois ainda tem o site e o manual, ental deve levar um pouco de tempo. E com certeza vou disponibilizar para os proprios usuários traduzirem também.

[Paulo de Tarso F. M. 24]

Mas é estranho o termo "corte do HTML"... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif O que se corta na verdade não é o HTML, mas sim as imagens que comporão o layout do site!

 

É só um detalhe, apenas. Quando for divulgar seu software, repense nessa questão, pois HTML não se corta, como falei...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Rangel Reale 0]

É então, é duro achar tradução certa pra termos técnicos assim, em ingles é "html slicing", slicing seria fatiar ou cortar, os designers que eu converso costumam falar em "cortar HTML", por isso usei esse nome. Não é assim que isso é conhecido no meio do webdesign? Seria melhor "cortar PARA HTML"?

[Paulo de Tarso F. M. 24]

Bom, o que ocorre na verdade é um fatiamento de imagens, e não de HTML. Softwares como o Fireworks, Photoshop, eles criam o código HTML automaticamente para você das imagens fatiadas, embora o código gerado não seja um código semântico (costumam montar a imagem com tabelas, e isso não é nada semântico).

 

Por isso que acho estranho o termo "cortar HTML". Se seu software tem como objetivo fatiar o layout em PSD para depois montar a página, então acredito que o termo correto seria o "fatiamento do layout para criação do HTML", algo mais ou menos assim, nesse sentido, manja?

 

E lidar com termos técnicos estrangeiros realmente é complicado quando temos que trazer para nossa língua. Mas, no seu caso em específico, acredito que fique mais adeqüado dizer assim mesmo, fatiamento do layout...

[Guilherme Rambo 4]

Não li o tópico inteiro, mas meu "método de slicing" é o seguinte:

- Ferramenta crop (tanto faz se é no Photoshop, Fireworks ou Illustrator), esconde as layers de texto que serão colocados no HTML, e corta os pedaços do site, sempre observando o que será background, o que será replacement, etc.

- Depois é só se divertir montando o CSS \o/

 

Esqueça a ferramenta, o desenvolvedor é você, isso é que importa ;)

 

[]'s

[Rangel Reale 0]

Bom, o que ocorre na verdade é um fatiamento de imagens, e não de HTML. Softwares como o Fireworks, Photoshop, eles criam o código HTML automaticamente para você das imagens fatiadas, embora o código gerado não seja um código semântico (costumam montar a imagem com tabelas, e isso não é nada semântico).

 

Por isso que acho estranho o termo "cortar HTML". Se seu software tem como objetivo fatiar o layout em PSD para depois montar a página, então acredito que o termo correto seria o "fatiamento do layout para criação do HTML", algo mais ou menos assim, nesse sentido, manja?

 

E lidar com termos técnicos estrangeiros realmente é complicado quando temos que trazer para nossa língua. Mas, no seu caso em específico, acredito que fique mais adeqüado dizer assim mesmo, fatiamento do layout...

É realmente, procurando no google por "fatiar HTML" e "cortar HTML", fatiar tem bem mais buscas relevantes.

 

Já estou traduzindo a ferramenta para o portugues, vou usar o termo "fatiar" daqui em diante.

 

Obrigado!

[DarkDragonLord 0]

Gostei da sua Logo ahah

Vaca toda sliced :P

 

 

Seu site só não é muito chamativo mas gostei da proposta do programa.

 

Vou baixar um dia desses para ver oq ele faz ;)

[Rangel Reale 0]

Gostei da sua Logo ahah

Vaca toda sliced :P

É viagem de designer hehe

 

Seu site só não é muito chamativo mas gostei da proposta do programa.

 

Vou baixar um dia desses para ver oq ele faz ;)

Pois é, o topo e o menu esquerdo o designer fez, o miolo sem graça foi o programador (eu), isso que dá! :rolleyes:

[DarkDragonLord 0]

heheh :P

 

 

Se tu quiser, podemos negociar um layout pra você + sistema multi-lingua (tipo o meu site). E lay a lá site americano mesmo :D

Gostei da proposta entao acho que o programa irá pra frente (mas ainda nao peguei pra testar e ver o layout interno, pq vou instalar em casa).

Por isso que interessei em ajudar xD

 

 

Qualquer coisa, me manda MP que negociamos :)

 

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[Rangel Reale 0]

Atendendo a pedidos, a partir da versão 1.1.0.14, o HTMLButcher agora suporta tradução em múltiplos idiomas, e como não poderia deixar de ser, a primeira versão suporta além de Ingles, Português do Brasil, e outras serão adicionadas no futuro.

 

http://www.htmlbutcher.com/

 

ChangeLog

[Guilherme Rambo 4]

E aí? Quando sai a versão pra Mac pra mim testar? =]

 

[]'s

[Rangel Reale 0]

E aí? Quando sai a versão pra Mac pra mim testar? =]

 

[]'s

A versão MAC "praticamente" funciona, mas tem uns detalhezinhos bobos que preciso acertar, como quando faço o mouse-over sobre uma area ele ilumina outra area diferente, o cursor do mouse nao muda pra modo de seleção quando desenhando a linha, e eu preciso descobrir como fazer um daqueles instaladores bonitinhos de MAC com pkgconfig!

[Guilherme Rambo 4]

A versão MAC "praticamente" funciona, mas tem uns detalhezinhos bobos que preciso acertar, como quando faço o mouse-over sobre uma area ele ilumina outra area diferente, o cursor do mouse nao muda pra modo de seleção quando desenhando a linha, e eu preciso descobrir como fazer um daqueles instaladores bonitinhos de MAC com pkgconfig!

Por que não distribuí como DMG mesmo? Usuário de Mac não gosta de "next, next, install, finish..." :P

 

[]'s

[Rangel Reale 0]

A versão MAC "praticamente" funciona, mas tem uns detalhezinhos bobos que preciso acertar, como quando faço o mouse-over sobre uma area ele ilumina outra area diferente, o cursor do mouse nao muda pra modo de seleção quando desenhando a linha, e eu preciso descobrir como fazer um daqueles instaladores bonitinhos de MAC com pkgconfig!

Por que não distribuí como DMG mesmo? Usuário de Mac não gosta de "next, next, install, finish..." :P

 

[]'s

 

É preciso aprender mais sobre Mac, tentei fazer uns instalador DMG, mas quando instalei em uma maquina que não tinha o Xcode instalado não funcionou, vou ter que aprender a mexer em Mac primeiro antes de tentar lançar um software pra ele... http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

[Roosevelt Franklin 2]

Meu amigo programador, qual a intenção desse seu programa de "cortar" HTML?

Fazer adolescentes que desenham no paint se entitularem Webdesigners?

Como vai ficar nossa profissão e nossas qualificações se os nossos clientes acharem que fazer um site semãntico e em padrões W3C é simples assim desenhando...

Webstandards não se corta! Se desenvolve...

Programa bom para aquele garotinho que usa o modo design do Dreamweaver e cobra 100 conto por um site...

 

Para nós profissionais eu entendo como um ataque!!!

 

Viva o bloco de notas...

[Rangel Reale 0]

Olá,

 

primeiro obrigado por sua opinião, eu como desenvolvedor web entendo perfeitamente o que você quer dizer.

 

Porém, na prática, eu vejo uma coisa diferente. Clientes querem um design diferenciado. Designers não querem ser limitados nos layouts que podem oferecer. Os prazos são apertados ao máximo, seja porque o site é as vezes a última coisa a ser feita, seja porque em informática sempre é assim.

 

Pra quem faz 5, 6 sites simultâneos, é dificil pegar um layout cheio de frufru e fatiar na mão com tableless "real" (não AP). E como disse antes, muitos designers não são webdesigners, todos os designers que trabalham comigo, fazem site ou no Corel ou no Photoshop. Eu sou uma negação pra design, meu negócio é programação, e eu acho que eles fazem um design muito bom, mas que seriam bem dificies de fazer 100% semântico.

 

Outro o problema é que, é extremamente difícil (se não inviável) fazer uma ferramenta que gere HTML semântico, porque isso depende muito de implementação de browsers e de entender como os browser renderizam as paginas. Usando o modo AP tableless da minha ferramenta, eu acho que facilita bastante o processo para fazer os acertos manualmente para tableless "real". Mas eu estou sempre estudando sobre o assunto, e se descobrir alguma possibilidade pretendo fazer geração desse tipo de tableless também.

 

Espero que tenha entendido meu ponto, eu sei que essa ferramenta não é pra todo mundo, é mais uma ajuda, existem sites e requerimentos de todo tipo. Eu faço sites há algum tempo, e minha produtividade aumentou absurdamente usando essa ferramenta.