[Resolvido] VISUAL FORM(Programe sem saber HTML)

[boneazul 0]

Bom pessoal meu nome é jonatan to aqui pra passar um link pra voces de um projeto pessoal que to desenvolvendo pra ajudar a comunidade como um todo..ele é basicamente um criador de form visual...ou seja voce num programa nada em html..alem de ser bem mais produtivo..ou to melhorando ele aos poucos achando bug etcetc....a ideia é ir pegando ideias para o projeto e se alguem souber de algum servidor melhor que aceite php mysql porque nao queria gastar grana com isso e acabei publicando num servidor sei la onde é q é meio lento e tem pouco espaço disponivel ou se alguem quiser hospedar pra mim em um servidor de casa sei lá passo o código fonte numa boa(apesar de o código nao estar tão organizado!!!)....bom quanto aos recursos queria fazer screencast pra mostrar mas como to sem tempo vo listar aqui mesmo o que da pra fazer..

 

1-Objetos drag/drop dentro do container visual

2-objetos selecionaveis no modelo desktop mova varios juntos ao mesmo tempo

3-escolha com crtl+ click +del pra deletar ou selecione varios e delete

4-lembrando que o alinhamento pouco importa no visual html ou seja nao precisa ficar caprichando no alinhamento a nao ser q você va usar a tela pra prototipacao o que é grnade vantagem no caso..da pra ir modelando a tela do lado do cliente colaborador usuario chame como quiser.... POR ENQUANTO so entede na relação Y ou seja objetos na vertical se você colocar objeto do lado ,ou seja, na horizontal o ele num entende AINDA to vendo isso ..

5- dois cliques em cima do objeto altera os atributos.. dois cliques fecha a janela ou no X no canto dela....para gerar código basta clicar no botao GERAR CÓDIGO FONTE e se preferir pode olhar no browser como vai ficar seu código

 

 

Pode ir visitando o site..que to melhorando aos poucos mais ja da pra usar e bem ....e lembrando se alguem tiver um servidor melhor com mais espaço etcetc GRATUITO me passa um ftp ou conta sei lá pra eu ir tocando o projeto..e melhorando a comunidade como um todo...

 

bom uso a todos.....e duvidas ou sugestoes...email

 

jonatan@prt15.gov.br abraços pessoal

boneazul@hotmail.com MSN

 

O LINK ..ja ia me esquecer

http://www.vfm.site90.net/VISUAL_REPORT/main.php

 

 

Em breve vo fazer algumas logicas pra PHP primeiro to fechando o CORE do sistema pra começar a implementar código e varias linguaguens ,e se puderem divulgar pra mim ..a ideia é espalhar o máximo possivel o link...abrços a todos.....

[Williams Duarte 431]

Muito bom simples e rápido para criação de um formulário

 

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

[Paulo de Tarso F. M. 24]

Mas bem que o código gerado podia estar dentro dos padrões, né? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

[Alaerte Gabriel 662]

Mas bem que o código gerado podia estar dentro dos padrões, né? http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Isso mesmo Paulo, além do mais, eu detesto esses programas que dão os códigos prontos, além de ser ruim até para o desenvolvedor, pois o mesmo acaba se esquecendo de boas práticas na hora do desenvolvimento, quanto para o sistema que ficará ruim além de fora dos padrões W3C.

[Pirata_ 0]

Não consegui utilizar... será problema no IE7 ?

[Marcio Leandro 0]

Aqui só funcionou no Firefox. Mas parabéns, está muito bom.

[boneazul 0]

Isso mesmo Paulo, além do mais, eu detesto esses programas que dão os códigos prontos, além de ser ruim até para o desenvolvedor, pois o mesmo acaba se esquecendo de boas práticas na hora do desenvolvimento, quanto para o sistema que ficará ruim além de fora dos padrões W3C.

 

Bom cara gosto é gosto...Se você adora passar horas e horas programando codigo repetitivo eu não prefiro algo que faça isso pra mim e eu me foque no que o colaborador,cliente,usuario deseja.Outra coisa frameworks vão ser mais comuns na sua vida portanto acho que você deve ir se acostumando a eles se não quiser ficar "Tecnicamente para tras".

 

Eu tambem odeio programas que gera código ..porque??Geram coisa que eu nao queria que eu nao preciso. (Vide dreamweaver).

 

Por isso resolvi fazer um que vá direto ao Ponto.Que declare atributos realmente que eu vá usar.

 

 

Quanto aos padrões W3C me diga onde to fugindo dele por favor para que eu possa melhorar o software?

 

Pelo que vi mesmo ta faltando algumas coisas como um cabecalho com charset.com tag META

 

Bom meu css ta separado segue a norma.

Meu javascript ta separado também.. basta separar em outro arquivo as funções...

 

Sigo camadas diferentes pra aplicação ser escalavel se puder me falar onde ela não está escalavel vo tentar melhorar....e a ideia é essa mesmo.

quero críticas sugestões....podia ser assim..podia ser assado..a idéia é englobar de tudo.

 

Não espero que isso "SOE" como uma resposta é apenas uma discussão construtiva!!E como tinha dito no post estou melhorando aos poucos..Como estou SOZINHO no projeto fica dificil fazer tudo ao mesmo tempo tenho q ir atacando por partes até ficar num gosto geral de cada um..

[boneazul 0]

Não consegui utilizar... será problema no IE7 ?

Realmente Pirata_ não testei no Internet explorer ainda peço, que por enquanto se puder utilizar o Firefox ja testei bastante nele e funciona, isso se você for realmente utilizar o software.

 

To tentando fechar uma versao pro CORE do sistema e assim que tiver completo creio q la pro fim da semana que vem vo voltar revendo bastante coisa..navegador alguns padrões melhorias..etc......

 

abraços

[Williams Duarte 431]

Outra coisa frameworks vão ser mais comuns na sua vida portanto acho que você deve ir se acostumando a eles se não quiser ficar "Tecnicamente para tras".

Verdade e tudo ta se tornando assim... Antes se trabalhava 1000 homens e hoje só uma máquina da conta e apenas um homem para guia-lá.

 

Em breve máquina cuidando de máquina!!!

 

Dúuuuuuuuuvidas!!!!!!! Olhe para o setor agropecuário.

 

E o FRAMEWORKS é o futuro não adianta achar que não, toda empresa web vai usar geradores de códigos além do pratico não perde-se tempo.

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

[hinom 5]

hehe sempre quis fazer um desses

 

já vi em delphi há uns 7 anos atrás. era bem legal.

 

se conseguir torná-lo cross-browser, documentar e manter como open source.. quem sabe crie fama internacional.

 

quando ficar bom mesmo, pode até negociar com empresas como google.. eles adoram esse tipo de coisa, ainda mais pra web.

 

manda ver.. acate as críticas de modo profissional , nãop leve pro lado pessoal. e será bem -sucedido

[boneazul 0]

hehe sempre quis fazer um desses

 

já vi em delphi há uns 7 anos atrás. era bem legal.

 

se conseguir torná-lo cross-browser, documentar e manter como open source.. quem sabe crie fama internacional.

 

quando ficar bom mesmo, pode até negociar com empresas como google.. eles adoram esse tipo de coisa, ainda mais pra web.

 

manda ver.." acate as críticas de modo profissional , nãop leve pro lado pessoal. e será bem -sucedido

opa hinom a idéia é essa mesmo manter ele open source....e na web..num quero ter q instalar nada em casa....quero entrar na net e programar ou melhor não programar ...na verdade esse projeto é bem mais promissor a idéia maior mesmo é cada usuario ter uma conta e ir gravando seus forms e montando seu projeto num to falando de fazer um simples HTML....a ideia é partir pra qualquer programação php,java até programação de outros framesworks....

tanto é q meu primeiro projeto englobando uma linguagem vai ser o php criando CRUD facilmente com poucos parametros...eu ja tenho um hoje que uso .....que gera toda a base do sistema com esquema de perfil...cadastros com inserir alterar etc...que me atende e muito bem e totalmente escalavel..no primeiro suite de teste que fiz gerei um uma base inicial do sistema em 5 min .......coisa que perderia de 10 a 15 DIAS pra fazer mesmo no crtl+c crtl+v ou seja pra que ficar programando se da pra fazer automatico (é num é pq é automatico tem q ser uma porcaria to falando de coisa enxuta que qualquer progamador que bater o olho consiga ler) é como o colega acima disse frameworks estao cada dia mais presente tao fazendo framework de framework pra ficar mais facil qualquer leigo que faz meia duzia de curos aprende a programar quando acho que cursos deveriam ensinar abstrações das coisas que é o que conta.....

 

tenho um bom conhecimento com linguagens ...tanto é q da pra ser simples e muito usual...

 

conta-se no dedo os caras espertos que nao usam frameworks....

 

hibernate,struts,API inteligentes,isso no mundo de java...fora editores de .net delphi e por ai vai...

 

"acate as críticas de modo profissional , nãop leve pro lado pessoal. e será bem -sucedido"

 

quanto as criticas como disse oque acontecer pode falar num boa alias vo deixar uma area lá pra acatar sugestões do que ta errado e do que tá certo...

num quero algo pra mim quero compartilhar conhecimento garanto que todo mundo cresce com isso tanto eu como a comunidade em geral...

e espero q nenhum post meu soe como algo ofensivo e peço desculpas a alguem se pareceu como algo pessoal.....

 

 

abraços a todos...

[Paulo de Tarso F. M. 24]

Quanto aos padrões W3C me diga onde to fugindo dele por favor para que eu possa melhorar o software?

Dê só uma pesquisada sobre Webstandards, documentos validados pelo W3C, Doctype XHTML 1.0 Strict... Ah! Além disso, há uma coisa muito importante a ser considerada: semântica! Taí outro assunto para pesquisar...

 

Conseguir criar um documento que seja válido de acordo com as diretrizes estabelecidas pelo W3C, e ainda ter um código semântico, pronto! você estará dentro dos padrões (ou quase lá http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif)...

 

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

[mxvinicius 0]

Parabéns amigo.

 

Tenho usado diariamente geradores de bancos, geradores de logomarca, geradores de barras de fundo e consigo monstar sites em menos de meia hora com isso.

 

Esse seu projeto tem a ver com a web do futuro onde professores montarão os trabalhos dos alunos direto na web e deixarão lá só avisarão via sms online o prazo para submeterem as respostas...

 

Além disso com a vinda da internet "grid" daqui uns anos será o fim do hd e teremos tudo 100% online aplicativos como dreamweaver serão um troço esquisito do passado.

 

Sucesso!

 

Em breve quando eu entender melhor o que escrevo atráz da tela branca vou jogar meu programa de alunos pro povo fazer download.

[boneazul 0]

Quanto aos padrões W3C me diga onde to fugindo dele por favor para que eu possa melhorar o software?

Dê só uma pesquisada sobre Webstandards, documentos validados pelo W3C, Doctype XHTML 1.0 Strict... Ah! Além disso, há uma coisa muito importante a ser considerada: semântica! Taí outro assunto para pesquisar...

 

Conseguir criar um documento que seja válido de acordo com as diretrizes estabelecidas pelo W3C, e ainda ter um código semântico, pronto! você estará dentro dos padrões (ou quase lá http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif)...

 

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

 

Olá colega dei uma olhada nos padrões e sobre o assunto.... acabei usando a diretiva DOCTYPE HTML 4.0 strict por essa implementação se dedicar ao que codigo html se propõe a fazer ,fiz varios testes usando o validador deles e corrigi o que estava faltando ou pelo menos os documentos gerados passaram no teste.

Subi uma versão lá tenho q dar uma trabalhada na identação só agora pq acabou ficando um pouco bagunçado..

 

Quanto a semântica poderia me explicar melhor?com um exemplo simples??

 

Acho q vo acabar mais aprendendo com esse projeto do que passando pra comunidade..rsrs

[Acesso MT 2]

Muitos crítica porque não sabe fazer, mas quer estudar sobre o assunto "semântica", melhor do que este site aqui no Brasil ta pra nascer

 

http://www.maujor.com/index.php

 

E temos que valorizar o que é nosso, o cara é daqui se fosse norte americano teria maior incentivo.

 

e investimento pesado para colocar o projeto pra frente!

 

Parabéns, bola pra frente que o google te espera!!!

 

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

[André Baptista 0]

Parabéns!!

 

Muito bacana essa sua ideia!!

 

Continue assim, pegue as críticas e faça do seu projeto continuar sempre crescendo!!

 

parabéns mesmo!

[Paulo de Tarso F. M. 24]

Resumidamente, semântica é "usar algo para o seu devido fim". Em outras palavras, semântica na web significa que você deve utlizar as tags HTML de acordo com seu devido fim, o objetivo delas deve ser cumprido de maneira coerente.

 

Quer um exemplo? Bom, vamos falar da tag <table>. A maior parte dos desenvolvedores web (algo em torno de 90%, tomara que este número hoje já tenha diminuído... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif), por exemplo, utilizam essa tag para estruturar seu layout. Eles constróem o layout no Fireworks ou Photoshop, fatiam as imagens, exportam no Dreamweaver e pronto! Dizem que constróem sites... Só que, na verdade, o código gerado pelos softwares é um código considerado "sujo", pois ele acaba utilizando as tags sem saber se ali era o mais apropriado ou não... Esses layouts acabam sendo construídos com tabelas, e isso não é nada semântico, afinal de contas, tabelas devem conter dados tabulares.

 

Normalmente, uma pergunta vem logo na seqüência: "o que são dados tabulares?" Bom, dados tabulares são aqueles que têm relação entre linhas e colunas. Por exemplo:

[table=Tabela de Preços][tr]

ProdutoPreço/Kg (R$)[/tr][tr]Maçã1,00[/tr][tr]Banana0,50[/tr][tr]Morango2,00[/tr][/table]

Observe que na tabela acima os dados das linhas e colunas têm relação entre si, pois, em cada linha, você tem o nome do produto e seu preço.

 

Bom, sobre semântica a gente iria longe se fôssemos abordar outras tags, mas não é o foco deste tópico, não é?

 

Você está desenvolvendo um projeto muito bacana, muito legal mesmo, meus comentários só são para que sua ferramenta seja desenvolvida de uma maneira "mais profissional", digamos, englobando a preocupação em obedecer às diretrizes que regem sobre o desenvolvimento para web, definidas pelo W3C.

 

Se você conseguir deenvolver essa ferramente dentro dos padrões, meu amigo, está no caminho certo!

 

Boa sorte no projeto!

 

E se precisar colocar essa ferramenta nos padrões, aproveite os espaços do fórum!

 

Obs.: Minha recomendação é que se utilize o Doctype XHTML 1.0 Strict. Ele é o "mais restrito" de todos, e garante que seu documento seja realmente um documento apropriado para a web...

 

Abraço!

[boneazul 0]

Resumidamente, semântica é "usar algo para o seu devido fim". Em outras palavras, semântica na web significa que você deve utlizar as tags HTML de acordo com seu devido fim, o objetivo delas deve ser cumprido de maneira coerente.

 

Quer um exemplo? Bom, vamos falar da tag <table>. A maior parte dos desenvolvedores web (algo em torno de 90%, tomara que este número hoje já tenha diminuído... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif), por exemplo, utilizam essa tag para estruturar seu layout. Eles constróem o layout no Fireworks ou Photoshop, fatiam as imagens, exportam no Dreamweaver e pronto! Dizem que constróem sites... Só que, na verdade, o código gerado pelos softwares é um código considerado "sujo", pois ele acaba utilizando as tags sem saber se ali era o mais apropriado ou não... Esses layouts acabam sendo construídos com tabelas, e isso não é nada semântico, afinal de contas, tabelas devem conter dados tabulares.

 

Normalmente, uma pergunta vem logo na seqüência: "o que são dados tabulares?" Bom, dados tabulares são aqueles que têm relação entre linhas e colunas. Por exemplo:

[table=Tabela de Preços][tr]

ProdutoPreço/Kg (R$)[/tr][tr]Maçã1,00[/tr][tr]Banana0,50[/tr][tr]Morango2,00[/tr][/table]

Observe que na tabela acima os dados das linhas e colunas têm relação entre si, pois, em cada linha, você tem o nome do produto e seu preço.

 

Bom, sobre semântica a gente iria longe se fôssemos abordar outras tags, mas não é o foco deste tópico, não é?

 

Você está desenvolvendo um projeto muito bacana, muito legal mesmo, meus comentários só são para que sua ferramenta seja desenvolvida de uma maneira "mais profissional", digamos, englobando a preocupação em obedecer às diretrizes que regem sobre o desenvolvimento para web, definidas pelo W3C.

 

Se você conseguir deenvolver essa ferramente dentro dos padrões, meu amigo, está no caminho certo!

 

Boa sorte no projeto!

 

E se precisar colocar essa ferramenta nos padrões, aproveite os espaços do fórum!

 

Obs.: Minha recomendação é que se utilize o Doctype XHTML 1.0 Strict. Ele é o "mais restrito" de todos, e garante que seu documento seja realmente um documento apropriado para a web...

 

Abraço!

 

concordo com você depois que você tocou no assunto vi que faltava mil tag me concentrei na escalabilidade e esqueci do basico tipo tava falntado os <html> os <head> etc etc....

 

Ta vo trocar pra esse doctype e passar no validador novamente,obrigado pela dica..

 

Outra coisa entendi mais ou menos o intuito da semântica ..então teoricamente ja taria errado a geração do html pelo que voce explicou pq utilizo a tag <table> para tabular a formatação do formulario ou seja ele fica alinhado de acordo com o padrão

 

<table>

<tr>

<td>LABEL</td>

<td>CAMPO</td>

</tr>

<tr>

<td>LABEL</td>

<td>CAMPO</td>

</tr>

</table>

 

você indicaria o uso de que ? ou seja um exemplo de construção de formulario....tem como me passar um exemplo? mas vo entrar nesse site que você indicou talvez até lá ja tenha sanado minha duvida mas se puder deixar um exemplo iria me ajudar muito ja q to acertando pra funcionar no IE que ta quase tudo correto pra funcionar nele...

[Paulo de Tarso F. M. 24]

Lá no fórum de Webstandards: CSS / XML / XHTML / HTML essa é uma questão muito discutida. Veja alguns tópicos que abordam a construção de formulários:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulário com ou sem tabelas?

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários na web: Experiência Rica

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif formulario "valido"

Dê uma analisada nestes materiais. Se quiser entender um pouco mais sobre semântica, pesquise no Google, ou até mesmo aqui no fórum. Mas se quiser aprender ainda mais, recomendo que acesse o fórum de WS, citado acima. Lá temos muita coisa, sobre tudo envolvendo o desenvolvimento de sites, desde CSS (formatação), até estrutura (layouts, formulários, etc.).

 

Bons estudos!

 

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

[boneazul 0]

Lá no fórum de Webstandards: CSS / XML / XHTML / HTML essa é uma questão muito discutida. Veja alguns tópicos que abordam a construção de formulários:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulário com ou sem tabelas?

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários na web: Experiência Rica

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif formulario "valido"

Dê uma analisada nestes materiais. Se quiser entender um pouco mais sobre semântica, pesquise no Google, ou até mesmo aqui no fórum. Mas se quiser aprender ainda mais, recomendo que acesse o fórum de WS, citado acima. Lá temos muita coisa, sobre tudo envolvendo o desenvolvimento de sites, desde CSS (formatação), até estrutura (layouts, formulários, etc.).

 

Bons estudos!

 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt-br">
<head>
<title>Formulários Semânticos com HTML e CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
	body {font: 0.8em Verdana;}
	h1 {font-size: 2em;}
	h2 {font-size: 1.5em;}
	img {border: none;}

	#sampleForm {width: 28em;}
	#sampleForm2 {width: 100%;}
	form * {font: 1em Verdana;}
	label {display: block; width: 24em; float: left; position: relative; text-align: right;}
	label input, label select, label textarea{vertical-align: middle; width: 12em; margin: 2px;}
	input[type="submit"] {clear: left; margin: 0 auto; display: block;}
	 .submit {clear: left; margin: 0 auto; display: block;}
.label
{
	display: block; 
	width: 11em; 
	float: left; 
	position: relative; 
	text-align: right;
}
.obj
{
	display: block; 
	width: 12em; 
	float: right; 
	position: relative;
	margin-right:1.7em;
}
.obj div
{
	text-align:left;
}
</style>
</head>
<body>

<form action="" method="POST" id="sampleForm">
	<fieldset><legend>Formulário Exemplo Elástico</legend>

		<label id="userName">
			Nome de Usuário:
			<input type="text" name="userName">
		</label>
		<label id="mail">
			Email:
			<input type="text" name="mail">
		</label>
		<label id="fullName">
			Nome Completo:
			<input type="text" name="fullName">

		</label>

		<div>
		<div class="label">Teste :</div>
		<div class="obj">
			<div><input type="radio"><span>A</span></div>
			<div><input type="radio"><span>B</span></div>
			<div><input type="radio"><span>C</span></div>
			<div><input type="radio"><span>A</span></div>
			<div><input type="radio"><span>B</span></div>
			<div><input type="radio"><span>C</span></div>
		</div>
		</div>
	<label id="choose">
			Escolha: 
				<select name="choose">
				<option>asdaasdasdaafsdfsdfsds</option>
				<option>123123123123</option>
			</select>
		</label>

		<label id="address">
			Endereço:
			<textarea name="address" rows="3" cols="50"></textarea>
		</label>
	<label id="fullName2">
			Nome Completo:
			<input type="checkbox" name="fullName2">

		</label>
		<input type="submit" class="submit">
	</fieldset>
</form>
</body>
</html>

entao Paulo entendi bem a ideia de semantica e do XHMTL depois de penar muito com o css..pra construir um formulario semantico o mais limpo que cheguei foi a isso acima.....

 

o maior problema foi alinhar radio button verticalmente acabei usando div se você souber outro jeito de alinhar sem utilizar div....pq tambem penso o seguinte não adianta eu mostrar um código enxuto assim se o usuario nao conseguir dar manutenção depois eu demorei 2 dias pra entender esses css alias to vendo q so fraquinho na parte de css mas estudando a gente chega lá..

 

da uma olhada nessa versão e ve se ela atende?? se atender vo implementar desse modo no site a construção de forms...achei varios modelos um pouco mais sujo....ainda vo dar uma limpada nesse para utilizar como molde.....to no aguardo aqui... e se conseguir me ajudar com o alinhamento vertical de radio ficaria bem mais bacana.. e trocar o span por label sei lá...se tiver um tempinho pra dar uma olhada........ até mais......enquanto isso vo vendo os eskemas pq num ta funfando no IE.....até mais.....

 

pq fechando esse formulario vo partir pra tabelas ... abraços....