[SP-pm] [OT] Layout HTML/CSS (era "Como anda o PerlPro?")

Thu Sep 12 09:11:20 PDT 2013

Sobre o W3Schools: http://www.w3fools.com/

Sobre o Bootstrap: acho que é a melhor ferramenta hoje pra fazer prototype
rápido de front-end. Como dito: a parada funciona, é bonita e é bem fácil
de usar.

Sobre servir HTML: eu sou bem noob em Perl, andei brincando com Mojolicious
e achei MUITO fácil pra fazer pelo menos o básico como cuidar das rotas e
servir conteúdo.

Sobre fazer sites com cara de aplicação desktop: não faz isso, por favor.
Web é web. Desktop é desktop. Não mistura as coisas. Frameworks como o
ExtJS tem sua serventia em situações muito específicas (como quando vc
precisa mesmo "emular" uma app desktop) e cada vez mais raras no mundo de
hoje.

Sobre fazer design, photoshop e afins: eu nao tenho nenhum talento pra isso
e acredito que vc tbm nao tenha, entao, se puder recomendo ficar com coisas
como o Bootstrap até vc ter grana (e necessidade) pra pagar um designer bom
(que são tao caros e raros quanto programadores).

---
*
*
*Leonardo Alberto A. de J. Souza - Leobetosouza*

2013/9/12 Blabos de Blebe <blabos em gmail.com>

> Complementanto,
>
> Antigamente eu usava o http://www.w3schools.com porque achava que era
> algo da W3C.
>
> Esqueçam isso. Não usem esse site. Não tem nada a ver com a W3C.
>
> Atualmente eu tenho usado (pouco na verdade),
> https://developer.mozilla.org.
>
> E cara, na boa, se a intenção é fazer algo rápido com um visual legal, vai
> de bootstrap. No site da documentação, citado nos emails anteriores, tem
> exemplos.
>
> É simples. Fez o includes de css e javascript, é basicamente copy-paste
> dos examplos no seu projeto.
>
> Recomendo a leitura da doc toda pra vc ter uma ideia do que existe. Ela é
> pequena, meia hora vc mata isso.
>
> Eu estou usando o bootstrap num projeto que precisa ficar pronto pra
> ontem, com um cara decente.
>
> []'s
>
> []'s
>
>
>
> 2013/9/12 Daniel Vinciguerra <dan.vinciguerra em gmail.com>
>
>> pacman++  # voto para o simples também
>>
>>
>> Vai no table/forms e depois você melhora a bagaça...
>> Para fazer uma aplicação web você não "precisa de beleza" mas de o minimo
>> de coerência e senso de usabilidade.
>>
>> Javascript (assim como seu ajax e json) ajudam mas são requisitos
>> dispensáveis (ate que você precise deles haha :-P)...
>>
>> Use o BugZilla(http://www.bugzilla.org) e você entenderá sobre o que
>> estou falando... bom sistema[[IMHO]], relativamente "grande", altamente
>> competente no que se propõe a fazer e sem firulas.
>>
>> Abs
>>
>>
>> *
>> Daniel Vinciguerra*
>> Web Solutions Architect and Co-Owner at Bivee
>> http://github.com/dvinciguerra <http://github.com/dvinciguerra>
>>
>>
>> 2013/9/11 Tiago Peczenyj <tiago.peczenyj em gmail.com>
>>
>>> bixo.
>>>
>>> faz algo simples e vai incrementando :-)
>>> Em 11/09/2013 21:44, "Marcio - Google" <marciorp em gmail.com> escreveu:
>>>
>>> Valeu pessoal pelas dicas, mas tá froidz ... tive certeza de algumas
>>>> coisas que já imaginava:
>>>> 1. Simplesmente saber HTML/CSS não significa conseguir fazer algo
>>>> bonito e funcional;
>>>> 2. Existem um milhão de formas de fazer a mesma coisa e nenhum lugar
>>>> que diga qual a melhor, mais correta ou mais elegante. Cada um defende a
>>>> sua; e
>>>> 3. Esse negócio não é pra mim.
>>>>
>>>> Acho que vou colocar um "webSSH" e jogar o cara pra dentro de uma
>>>> sessão texto no servidor. Quando tiver grana ou já tiver aprendido o minimo
>>>> necessário, faço em html/css e todas essas firulas .. rsrsrs
>>>>
>>>>
>>>>
>>>> [...]'s
>>>>
>>>> Marcio
>>>>
>>>> ========================================
>>>> ########### Campanha Ajude o Marcio! ###########
>>>> http://sosmarcio.blogspot.com.br/
>>>> http://www.vakinha.com.br/VaquinhaP.aspx?e=195793
>>>> ========================================
>>>>
>>>>
>>>> Em 11 de setembro de 2013 18:05, Marcio Ferreira <
>>>> marciodesouzaferreira em gmail.com> escreveu:
>>>>
>>>>> (nao ía dizer nada, até que li W3Schools =S )
>>>>>
>>>>> @Marcio,
>>>>> Nao use o w3schools, referência de como nao aprender. #IMPLORO, SEM
>>>>> FLAMEWAR
>>>>>
>>>>> Pelo que entendi vc quer uma noção abrangente e nao especialista em
>>>>> design, vou dar meu pitaco.
>>>>>
>>>>> http://pt.wikipedia.org/wiki/Web_design
>>>>> http://arquiteturadeinformacao.com/
>>>>> http://www.uxdesign.blog.br/
>>>>> http://ux.walkme.com/
>>>>> http://alistapart.com/
>>>>>
>>>>> Como programador, recomendo o livro "Design para quem não é designer".
>>>>> Bootstrap do twitter é útil!
>>>>> Inclua no seu café da manhã o Hack News(HN) -
>>>>> https://news.ycombinator.com
>>>>> E o google é seu amigo "converter imagem para html"
>>>>>
>>>>>
>>>>>
>>>>> Em 11 de setembro de 2013 18:06, Andre Carneiro <
>>>>> andregarciacarneiro em gmail.com> escreveu:
>>>>>
>>>>> Se o seu objetivo é ser prático com layouts interessantes, recomendo
>>>>>> este site:
>>>>>>
>>>>>> http://themeforest.net/
>>>>>>
>>>>>> Agora se o seu objetivo é aprender, aí é só fuçando mesmo...
>>>>>>
>>>>>> Eu costumo usar muito o w3schools(http://www.w3schools.com/) como
>>>>>> consulta a referências rápidas de HTML e CSS. Mas design de layouts exige
>>>>>> bem mais que isso...
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> 2013/9/10 Hernan Lopes <hernanlopes em gmail.com>
>>>>>>
>>>>>>> Marcio,
>>>>>>>
>>>>>>> Esse projeto deve ser do Eduardo Almeida.. ele tem um framework pra
>>>>>>> fazer sites com essa cara de windows :p
>>>>>>>
>>>>>>>
>>>>>>> 2013/9/10 Marcio - Google <marciorp em gmail.com>
>>>>>>>
>>>>>>>> Mongers, desculpem o off-topic!
>>>>>>>>
>>>>>>>> Como vi que tem membros que dominam o assunto e o pessoal aqui é
>>>>>>>> muito colaborativo, resolvi perguntar.
>>>>>>>>
>>>>>>>> Não entendo nada de HTML, layout de sites e etc. Estou precisando
>>>>>>>> fazer algumas coisas, projetos pessoais, e vou ter que fazer a parte
>>>>>>>> visual, ou melhor dizendo, o front-end. De preferência, independente da
>>>>>>>> linguagem.
>>>>>>>>
>>>>>>>> Bom, por onde começo? rsrsrs
>>>>>>>>
>>>>>>>> Vi que o André fez o layout como uma imagem, e eu particularmente
>>>>>>>> gostei bastante.
>>>>>>>>
>>>>>>>> Como se faz essa imagem? Tem algo mais especifico e simples que o
>>>>>>>> Photoshop da vida?
>>>>>>>> Depois como converte-se ela em HTML/CSS? É na unha ou tem algo
>>>>>>>> automatizado?
>>>>>>>> E finalmente, como esse front-end interage com Perl?
>>>>>>>>
>>>>>>>> Tem um membro que postou um link de um projeto dele, que o
>>>>>>>> front-end web era muito bom. Pareci um app winforms. Infelizmente não achei
>>>>>>>> a mensagem.
>>>>>>>>
>>>>>>>> Qualquer dica é bem vinda.
>>>>>>>>
>>>>>>>>
>>>>>>>> [...]'s
>>>>>>>>
>>>>>>>> Marcio
>>>>>>>>
>>>>>>>> ========================================
>>>>>>>> ########### Campanha Ajude o Marcio! ###########
>>>>>>>> http://sosmarcio.blogspot.com.br/
>>>>>>>> http://www.vakinha.com.br/VaquinhaP.aspx?e=195793
>>>>>>>> ========================================
>>>>>>>>
>>>>>>>>
>>>>>>>> Em 18 de julho de 2013 21:13, Nilton OS <jniltinho em gmail.com>escreveu:
>>>>>>>>
>>>>>>>>> André parabéns, depois do anuncio quase todo dia acessei o github.
>>>>>>>>>
>>>>>>>>> Muito bacana.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> Em 18 de julho de 2013 21:39, André Walker <andre em andrewalker.net>escreveu:
>>>>>>>>>
>>>>>>>>> Salve, mongers,
>>>>>>>>>>
>>>>>>>>>> Estou escrevendo para dar uma visão geral do status de PerlPro.
>>>>>>>>>> Se você não
>>>>>>>>>> sabe do que estou falando, veja:
>>>>>>>>>>
>>>>>>>>>>     https://github.com/Brasil-**Perl-Mongers/perl-pro<https://github.com/Brasil-Perl-Mongers/perl-pro>
>>>>>>>>>>
>>>>>>>>>> Aproveite e clique em Star e Watch :)
>>>>>>>>>>
>>>>>>>>>> O que nós temos até agora?
>>>>>>>>>>
>>>>>>>>>> Foi criado o layout de praticamente todas as páginas, em imagem.
>>>>>>>>>> Vocês podem
>>>>>>>>>> ver na wiki do github. Criei também a estrutura da aplicação
>>>>>>>>>> Catalyst, o banco
>>>>>>>>>> de dados, e implementei o layout em HTML/CSS também. Ou seja, o
>>>>>>>>>> esqueleto da
>>>>>>>>>> aplicação está pronto. Não temos, no entanto, as páginas
>>>>>>>>>> específicas e suas
>>>>>>>>>> funcionalidades.
>>>>>>>>>>
>>>>>>>>>> Para estruturar o layout, estou usando Twitter Bootstrap. Para
>>>>>>>>>> versionar o
>>>>>>>>>> banco de dados, sqitch. Para ORM, DBIx::Class, e para o SGBD,
>>>>>>>>>> PostgreSQL. Como
>>>>>>>>>> framework MVC, como já falado acima, Catalyst, e como linguagem
>>>>>>>>>> de templates
>>>>>>>>>> Kolon (do Text::Xslate). Tudo isto já está configurado, é
>>>>>>>>>> bastante fácil de
>>>>>>>>>> se instalar o código e compreendê-lo.
>>>>>>>>>>
>>>>>>>>>> Parece pouco, semanas depois de anunciado, não?
>>>>>>>>>>
>>>>>>>>>> Estive trabalhando nisso durante períodos livres da faculdade
>>>>>>>>>> (faço um curso
>>>>>>>>>> em período integral), e acabei não dedicando tanto tempo quanto
>>>>>>>>>> gostaria. A
>>>>>>>>>> partir de hoje, entretanto, estou de férias, e acredito que nos
>>>>>>>>>> próximos 30
>>>>>>>>>> dias teremos o site no ar :)
>>>>>>>>>>
>>>>>>>>>> Gostaríamos da participação da comunidade, afinal, é um projeto
>>>>>>>>>> open source!
>>>>>>>>>> Tivemos algumas contribuições assim que o repositório foi criado,
>>>>>>>>>> antes mesmo
>>>>>>>>>> de anunciarmos o projeto! Sintam-se livres para contribuir;
>>>>>>>>>> podemos discutir
>>>>>>>>>> as features no canal do IRC, ou por e-mail e desenvolver em cima
>>>>>>>>>> disso. Dê uma
>>>>>>>>>> olhada nos issues do GitHub, sugira uma funcionalidade, critique
>>>>>>>>>> o código.
>>>>>>>>>> Toda contribuição é bem vinda! Principalmente em forma de código,
>>>>>>>>>> obviamente. :P
>>>>>>>>>>
>>>>>>>>>> Teremos uma reunião no canal do IRC do SPPM: #sao-paulo.pm em
>>>>>>>>>> irc.perl.org,
>>>>>>>>>> daqui a aproximadamente 10 dias. Vamos avisar a data e o horário
>>>>>>>>>> certinho por
>>>>>>>>>> aqui quando estiver mais próximo. Mas, se tiver qualquer dúvida
>>>>>>>>>> ou sugestão é
>>>>>>>>>> só dizer!
>>>>>>>>>>
>>>>>>>>>> =begin disclaimer
>>>>>>>>>>   Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>>>>>> SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>>>>>> L<http://mail.pm.org/mailman/**listinfo/saopaulo-pm<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>>>>>>> >
>>>>>>>>>> =end disclaimer
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>>
>>>>>>>>> ..............................................................................
>>>>>>>>> *Com Deus todas as coisas são possíveis* ::: LinuxPro<http://www.linuxpro.com.br>
>>>>>>>>>
>>>>>>>>> *"A qualidade nunca se obtém por acaso; ela é sempre o resultado
>>>>>>>>> do esforço inteligente." (John Ruskin)
>>>>>>>>> "A mente que se abre a uma nova ideia jamais volta ao seu tamanho
>>>>>>>>> original" (Albert Einstein)*
>>>>>>>>>
>>>>>>>>> =begin disclaimer
>>>>>>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>>>>>> =end disclaimer
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>> =begin disclaimer
>>>>>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>>>>> =end disclaimer
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>> =begin disclaimer
>>>>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>>>> =end disclaimer
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> André Garcia Carneiro
>>>>>> Software Engineer
>>>>>> (11)982907780
>>>>>>
>>>>>> =begin disclaimer
>>>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>>> =end disclaimer
>>>>>>
>>>>>>
>>>>>
>>>>> =begin disclaimer
>>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>>> =end disclaimer
>>>>>
>>>>>
>>>>
>>>> =begin disclaimer
>>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>>> =end disclaimer
>>>>
>>>>
>>> =begin disclaimer
>>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>>> =end disclaimer
>>>
>>>
>>
>> =begin disclaimer
>>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
>> =end disclaimer
>>
>>
>
> =begin disclaimer
>    Sao Paulo Perl Mongers: http://sao-paulo.pm.org/
>  SaoPaulo-pm mailing list: SaoPaulo-pm em pm.org
>  L<http://mail.pm.org/mailman/listinfo/saopaulo-pm>
> =end disclaimer
>
>
-------------- Pr�xima Parte ----------
Um anexo em HTML foi limpo...
URL: <http://mail.pm.org/pipermail/saopaulo-pm/attachments/20130912/20f66568/attachment-0001.html>