[SP-pm] Design de Aplicações Web, como é feito?

Tue May 24 18:39:25 PDT 2011

Existem algumas tentativas de fazer um sistema web totalmente
descorrelacionado do sistema por trás. O unico exemplo que me veio a
mente no momento é o Apache wicket.

Nele vc cria o html normal porém insere atributos wicket:id="xxx" e no
"backend" vc tem um codigo (java nesse caso) que lida com este html
como se fosse uma série de Objetos compostos cujo match é feito a
partir do id.

Pessoalmente acho "ruim" pois muitas vezes vc tem partes da pagina que
vc quer fazer algo de acordo com o estado (mostrar mensagem de erro,
mostrar tabela assim, assado, etc). E com o wicket fica um tanto
embolado.

Pensando bem o Google Web Toolkit tenta fazer algo parecido, mas tem
tempo que não lido com este cara.

Uma outra foram de fazer isto é criar o html bonitinho e deixar TODA a
interação via javascript - acho que é o principio do GWT - nesse caso
sua app web fica mais "leve" pois só retornaria JSON por exemplo.

De qq forma, um sistema web pode ser construido de forma iterativa e
incremental, nesse caso vc criar o html e o sistema que responde a ele
é vital para um produto bem feito. Fazer um html sem relação com o
sistema por trás pode trazer retrabalho desnecessário, sem falar que
os sistemas de templates podem ser otimizados e reutilizados e, nesses
casos, da um trabalhão lidar com o HTML "estatico". Seria bom que arte
pudesse ser feita quase toda em CSS.

Se vc utilizar o conceito de integração continua e utilizar testes que
realmente usem as paginas - como usando o Selenium por exemplo - vc
poderia começar de um esboço de HTML e enquanto desenvolve um
"designer" adiciona um estilo e os commits de um não deveriam
atrapalhar o do outro pois os testes falhariam.

Agora para gerar HTML com uma arte mais "bonita" tem umas ferramentas
interessantes. O Rose::DB::XXX faz uns cruds bem interessantes, por
exemplo.

http://ontwik.com/perl/rapid-web-application-development-in-perl/

Eu prefiro eu mesmo gerar o html como parte do processo de
desenvolvimento imaginando que eles veem de um template (pode ser
Template Toolkit, erb, Haml/Sass, etc), assim tenho dominio quase
total, fico só testando nos Browsers e reclamando do CSS, cantos
arredondados, etc.

2011/5/24 Solli Honorio <shonorio at gmail.com>:
> Dê uma olhada nos vídeos http://vimeo.com/channels/sppm
>
> 2011/5/24 Teddy Hammer <teddyhammer at hotmail.com>
>>
>> Ae André!
>> Cara, desculpe minha ignorancia e me corrija se tô errado.
>> Quando vc fala de marcadores, me lembrar aqueles esquemas usados em tipo
>> de "Mala Direta" do Word. Seria mais ou menos isso?
>> Vc quer dizer que então faço uma página HTML com todos os campos que eu
>> quero e depois faço tipo de uma indexação com estes marcadores?
>>
>> É que como só vi até hoje o pessoal desenvolver até hoje aplicativos
>> Desktop fico com esta idéia na cabeça atrapalhando!! Tipo assim, pra mim,
>> até então, eu tinha que ir contruindo as "telas" (ou páginas) tipo com um
>> Editor (por exemplo o Delphi) e ir depois pegar os dados digitados dentro
>> dos respectivos campos e jogá-los numa cláusula de INSERT de uma instrução
>> SQL pra salvar do Banco. Algo mais ou menos assim.
>>
>> Se não for muito complicado, vc poderia me mostrar um exemplo mais prático
>> de como isso funciona?...Inclusive este esquema de gerar um HTML para quem
>> requisita?
>>
>> Agora esse lance de REQUISIÇÃO do lado do servidor ainda não entendi
>> direito a bagaça.
>> O Daniel Mantovani me passou um link e num entendi direito
>>
>>
>> ________________________________
>> Date: Tue, 24 May 2011 15:54:12 -0300
>> From: andregarciacarneiro at gmail.com
>> To: saopaulo-pm at mail.pm.org
>> Subject: Re: [SP-pm] Design de Aplicações Web, como é feito?
>>
>> Oi Teddy!
>>
>> Tanto o Catalyst quanto o Mojolicious utilizam uma metodologia conhecida
>> como MVC(Model, View, Controller - http://pt.wikipedia.org/wiki/MVC ). Ler
>> isto pode iluminar um pouco as idéias mais tarde. Tentarei explicar sem me
>> preocupar muito com detalhes de MVC.
>> Respondendo mais diretamente a sua dúvida, a ligação entre o que se muda
>> no código e o que é mostrado na página ocorre através do processamento de
>> 'templates'. Templates, no contexto de aplicações web, são basicamente
>> documentos HTML com 'marcadores especiais'. Esses marcadores são
>> substituídos posteriormente por HTML, após terem sido processados pelo
>> servidor. Para simplificar:
>> <div>Nome: [%nome%]</div>
>> Nesse exemplo, os marcadores que me referi são [%nome%]. Esse marcador
>> pode ser substituído por qualquer coisa que eu quiser. Obviamente nesse
>> caso, eu quero que seja substituído pela informação 'nome'. O importante é
>> que você entenda que tudo isso acontece do lado do servidor. O servidor está
>> preparado para ler a requisição de uma página qualquer do usuário, e chamar
>> corretamente o programa responsável por entender isso, recuperar a
>> informação que esteja numa base qualquer, ler o template, substituir todos
>> esses marcadores por dados, e/ou metadados e/ou quaisquer instruções que o
>> meu processador de templates suporte; para enfim cuspir HTML para o cliente.
>> É claro que existem outros tipos desses marcadores, porque os sistemas de
>> templates variam no seu funcionamento. Esse em especial é um exemplo de um
>> marcador típico do Template Toolkit - http://template-toolkit.org/
>>
>> Depois da introdução tosca acima, eu posso dizer de forma bem simples que:
>> tanto o Catalyst quanto o Mojolicious fazem a mesma coisa, ou seja, esperam
>> a requisição chegar até eles, e fazem diversas coisas como interpretar e
>> transformar urls, separar os dados de entrada(formulários, campos e tudo que
>> estava no HTML no momento da requisição), depois processa esses dados de
>> entrada de várias formas(logins, redirecionamentos, alteração de dados e o
>> que mais você quiser), e depois envia os dados de saída para o sistema de
>> templates. Esse sistema de templates é que abre o arquivo de templates, e
>> substituí todos os marcadores por dados.
>>
>>
>> Não sei se consegui ser muito claro. Tentei ser o mais genérico possível.
>>
>> Qualquer coisa pergunte!
>>
>> Cheers!
>>
>> 2011/5/24 Teddy Hammer <teddyhammer at hotmail.com>
>>
>> Então cara, desculpe minha falta de conhecimento, mas como isto eh feito?
>> Por exemplo, supondo que vc queira fazer uma pagina onde o cara vai abrir
>> o navegador e fazer seu cadastro por esta pagina.
>> Supondo que nesta pagina tenha campos como Nome, Endereço, Cidade, etc.
>> Como vc linka estes campos com seu código? E como vc define qual a ação
>> serah executada qdo o cara clicar no botão CADASTRAR do formulário?
>>
>> Vc num ia ter que primeiro "desenhar" esta página com seus respectivos
>> campos e depois ir fazendo a lógica do sistema?
>>
>> Tem isto pra Perl?
>> Talvez pra deixar mais claro, existe tipo de editor como o Delphi ou
>> JBuilder?
>>
>> ________________________________
>> From: darkstrikerd at gmail.com
>> Date: Tue, 24 May 2011 13:34:49 -0300
>> To: saopaulo-pm at mail.pm.org
>> Subject: Re: [SP-pm] Design de Aplicações Web, como é feito?
>>
>> Olá Teddy,
>> Eu particularmente faço toda a lógica do sistema, quando ele tá
>> funcionando, eu aplico um css usando firebug, uma extensão do firefox que
>> permite visualizar as alterações do css em tempo de execução.
>> []z
>> 2011/5/24 Teddy Hammer <teddyhammer at hotmail.com>
>>
>> Ae galera!
>> Vcs comentaram sobre Mojolicious e o CatalystFramework. Dei uma olhada por
>> cima e não sei se entendi o que realmente eles fazem.
>> O código deles é embutido dentro do HTML ou eles fazem o Designer da
>> página, por exemplo, de um formulário de cadastro, como por exemplo o
>> DreamWeaver faz?
>> Se não for, como vcs fazem o desenvolvimento (tipo como faz um Web Design
>> !) das páginas? Vcs usam qual ferramenta pra isso?
>>
>> Alguém pode me explicar como isto eh feito?
>>
>> =begin disclaimer
>>   Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>  SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org
>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>> =end disclaimer
>>
>>
>>
>>
>> --
>> Nilson Morais
>>
>>
>>
>> =begin disclaimer Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>> SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org L =end disclaimer
>> =begin disclaimer
>>   Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>  SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org
>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>> =end disclaimer
>>
>>
>>
>>
>> --
>> André Garcia Carneiro
>> Analista/Desenvolvedor Perl
>> (11)82907780
>>
>> =begin disclaimer Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>> SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org L =end disclaimer
>> =begin disclaimer
>>   Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>  SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org
>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>> =end disclaimer
>>
>
>
>
> --
> "o animal satisfeito dorme". - Guimarães Rosa
>
> =begin disclaimer
>   Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>  SaoPaulo-pm mailing list: SaoPaulo-pm at pm.org
>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
> =end disclaimer
>
>

-- 
Tiago B. Peczenyj
Linux User #405772

http://pacman.blog.br