JCMais 75 Denunciar post Postado Março 8, 2012 Tá ótimo o Design João Prado, parabéns. :clap: Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 8, 2012 Tá ótimo o Design João Prado, parabéns. :clap: Sem flood pessoal, temos um botãozinho com um sinal de + lá no post do João Prado, se gostaram, apertem esse botão e dê pontos de reputação. ;) Bom, agora que temos o design, vamos começar a trabalhar na GUI. Como devem ter visto, o João foi cuidadoso o suficiente para facilitar nosso trabalho ao máximo, ou seja, temos as especificações de todos os elementos da GUI. Vamos trabalhar assim: Cada elemento será desenvolvido separadamente, por exemplo, botão "Adicionar Pergunta", teremos marcação, estilo e comportamento. Faremos o mesmo para cada um deles. Devemos ser capazes de colocar apenas 1, todos ou alguns elementos na GUI, sem que um elemento afete o outro elemento. Quem vai brincar de front-end? Compartilhar este post Link para o post Compartilhar em outros sites
JCMais 75 Denunciar post Postado Março 8, 2012 Desculpem o flood, não me contive. :blush: Devemos ser capazes de colocar apenas 1, todos ou alguns elementos na GUI, sem que um elemento afete o outro elemento. Quem vai brincar de front-end? Bom, eu já estou dentro, e pelo que andei lendo por aí, acho que o William Bruno vai querer participar, principalmente por conta desse trecho que você disse acima. :rolleyes: Tenho algumas sugestões. Usar HTML5 para estruturação, além da semântica, creio que algumas das APIs podem vim à ser útil, como a de Geolocalização. CSS3, só em olhar o design do João Padro, dá para se perceber que pode ser usado um número minimo de imagens usando CSS3, e sem suporte para o >=IE7 (ou ao menos o 6). Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 8, 2012 Tenho algumas sugestões. Usar HTML5 para estruturação, além da semântica, creio que algumas das APIs podem vim à ser útil, como a de Geolocalização. CSS3, só em olhar o design do João Padro, dá para se perceber que pode ser usado um número minimo de imagens usando CSS3, e sem suporte para o >=IE7 (ou ao menos o 6). Ahhhh, esqueci disso. Vamos utilizar HTML5 e CSS3, o projeto é nosso, nossos requisitos, sem frescura com suporte legado. Vamos olhar o futuro, não o passado. Compartilhar este post Link para o post Compartilhar em outros sites
João Prado 64 Denunciar post Postado Março 8, 2012 Exato JCMais, eu fiz também pensando nisso. Eu não sou um expert em HTML e CSS como o William e outros, mas posso dar uma força se precisar. Também quero acompanhar o desenrolar dessa parte, pois é uma grande oportunidade de aprendizado para mim. Compartilhar este post Link para o post Compartilhar em outros sites
NetBoy16 72 Denunciar post Postado Março 8, 2012 Eu peguei o trem andando e to bem por fora, depois leio todos os posts, mas se puderem matar minha curiosidade, oque exatamente vcs estao fazendo ? :unsure: Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 8, 2012 depois leio todos os posts, Se depois de ler os posts, ainda tiver dúvidas sobre o que estamos fazendo, ai volte a perguntar. ;) Compartilhar este post Link para o post Compartilhar em outros sites
NetBoy16 72 Denunciar post Postado Março 8, 2012 mas você n pode dar uma prévia :cry: me deram -2 rep soh por causa disso :pinch: kkk Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 8, 2012 me deram -2 rep soh por causa disso E se continuar trollando o tópico, vai acabar tendo sua conta suspensa. Pessoal, acabei de fazer um push para o branch dev da marcação e estilo de um botão conforme o design do João Prado. :seta: https://github.com/iMastersDev/iMasters-Form/tree/dev Ficou assim: button.html <!DOCTYPE html> <html lang="pt_BR"> <head> <meta charset="UTF-8"> <title>Botão</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="stylesheet" type="text/css" href="css/button/button.css" /> </head> <body> <a class="button" href="#" title="Botão">Botão</a> <a class="button down" href="#" title="Botão">Botão</a> </body> </html> main.css body { font-family: Helvetica; font-size: 12pt; } button.css .button { padding: 6px 12px; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); color: #666666; box-shadow: 1px 1px 3px rgba(0,0,0,0.4); border-radius: 4px; } .button:hover { color:#333333; } .button.down { box-shadow: 1px 1px 3px rgba(0,0,0,0.4) inset; background-color: #FDFDFD; } A largada foi dada, pessoal! Compartilhar este post Link para o post Compartilhar em outros sites
JCMais 75 Denunciar post Postado Março 8, 2012 Quanto ao frontend, iremos usar alguma biblioteca? Ou será td do zero? Se for feito o uso de alguma, acho que apenas o HTML5 Boilerplate (já vem com o Normalize.css, Modernizr e o jQuery) já está ótimo. Edit: Aproveitando que estou em casa, vou continuar os botões que o JB iniciou, irei elaborar os restantes presentes no design passado pelo João Prado. É interessante elaborar uma convensão à ser seguida. Referente ao CSS, eu pensei no seguinte, vejam se vocês estão de acordo. Usar dash-cased quando for nomear classes e IDs. Fazer a estrutura do CSS de forma à seguir a estrutura que os elementos seguiriam na página, ou seja, nada de colocar as declarações do footer no começo do arquivo, do header no meio e do conteúdo principal no fim. Aninhar as regras de elementos comuns e/ou elementos que são aninhados no HTML. O JB já iniciou mais ou menos assim, porém aninhou as regras do mesmo elemento nas declarações dos botões. Ordem alfabetica na declaração de propriedades. Ex: #main-header { } #main-header nav { } #main-header li { display: inline-block; float: left; z-index: 2; } #main-header li.is-active { } Sugestões? Críticas? E João Prado, eu tenho uma pequena sugestão. Você deixou o botão com efeito negativo (excluir pergunta por exemplo) da mesma cor que o botão com efeito positivo (responder no caso), não seria interessante deixar os botões com efeito negativo com uma cor diferente? Compartilhar este post Link para o post Compartilhar em outros sites
NetBoy16 72 Denunciar post Postado Março 8, 2012 E se continuar trollando o tópico, vai acabar tendo sua conta suspensa. Calma nao precisa ser arrogante comigo, desculpa, só queria saber oque se passa, mas li o restante dos topicos e estou informado, agora vou parar de "floodar" por aqui pois vi que o topico está aberto apenas a questoes técnicas. Como dizem:quem ajuda nao atrapalha, flw. Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 8, 2012 Adicionei o botão para nova pergunta/alternativa. button.new.css .new:before { content: "+ "; font-weight: bold; } .button.new { background-color: #4E9A06; color: #FFFFFF; } .button.new.down { background-color: #3B7A2A; } button.new.html <!DOCTYPE html> <html lang="pt_BR"> <head> <meta charset="UTF-8"> <title>Botão</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel="stylesheet" type="text/css" href="css/button/button.css" /> <link rel="stylesheet" type="text/css" href="css/button/button.new.css" /> </head> <body> <a class="button new" href="#" title="Botão">Botão</a> <a class="button new down" href="#" title="Botão">Botão</a> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
Henrique Barcelos 290 Denunciar post Postado Março 8, 2012 No backend, vamos utilizar o PHP 5.3? Gostaria de finalmente poder construir um sistema utilizando namespaces e outros recursos, pq ainda é complicado achar hospedagens com preço acessível para PHP 5.3. Compartilhar este post Link para o post Compartilhar em outros sites
Luis Paullo 47 Denunciar post Postado Março 8, 2012 poxa eu fiz o fork meu nome ate apareceu la.. =X Clonei o link.. Configurei no Netbeans 7.1, aparece as pastinha e os arquivo.. alguem usa o git do Netbeans ai ? submit um treco pra testa mais num saiu nada no meu fork (ou sei la onde aparece) =X 10 x 0 pro github kkkkk!!! uma hr faço esse lance de commit funfa aqui.. pelo menos da pra mim aconpanha os codigo que ta sendo feito no netbeans =X Compartilhar este post Link para o post Compartilhar em outros sites
JCMais 75 Denunciar post Postado Março 8, 2012 você enviou um commit certo? Commit não envia para o GitHub, ele envia para o teu repositório local, para enviar para o GitHub você precisa efetuar um Push. Bom, aí foi o primeiro Pull Request :seta: https://github.com/iMastersDev/iMasters-Form/pull/1 Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 9, 2012 você enviou um commit certo? Commit não envia para o GitHub, ele envia para o teu repositório local, para enviar para o GitHub você precisa efetuar um Push. :clap: Bom, aí foi o primeiro Pull Request :seta: https://github.com/iMastersDev/iMasters-Form/pull/1 Fiz alguns comentários nos seus commits, veja lá. Compartilhar este post Link para o post Compartilhar em outros sites
JCMais 75 Denunciar post Postado Março 9, 2012 JB achei uns incovenientes com esse padrão que você adotou. Você definiu um CSS para um botão new, que já está na cor Verde. Isso deixa mto restritivo, o botão verde não é usado apenas para adicionar algo, também poderá vim à ser usado para confirmar, criar, ou fazer outro tipo de ação. Da forma que você fez acabaria por ter que repetir as declarações, apenas para adicionar um botão de confirmação por exemplo. Acho que é mais interessante ter uma estrutura onde temos botões de confirmação (não importa o que está confirmando), botões de negação ou com ação negativa (excluir, cancelar, resetar), botões neutros ( Botões com ações não tão significativas, como um botão para aparecer um dropdown ) e o estilo padrão para botões, no nosso caso, o branco. Se eu mais tarde quero que um botão de confirmação seja utilizado para adicionar uma pergunta, adicionado assim o "+" ao ínicio dele. Bastaria criar uma classe: .action-create { content: '+'; padding-right: 3px; } E usar: <a class="button confirm action-create" href="#" title="Adicionar Pergunta">Pergunta</a> Compartilhar este post Link para o post Compartilhar em outros sites
João Batista Neto 448 Denunciar post Postado Março 9, 2012 Entendi o ponto de vista sobre o verde, mas não entendi sobre o .new, pelo que vi, você trocou de .new para .action-create. Qual o sentido disso? Além disso, content requer um pseudo-elemento como :after, :before, etc. Compartilhar este post Link para o post Compartilhar em outros sites
Henrique Barcelos 290 Denunciar post Postado Março 9, 2012 Eu ainda não consegui enviar nada para o meu fork =/... Estarei ausente no fim de semana, mas na segunda estamos de volta =] Compartilhar este post Link para o post Compartilhar em outros sites
JCMais 75 Denunciar post Postado Março 9, 2012 não entendi sobre o .new, pelo que vi, você trocou de .new para .action-create. Qual o sentido disso? Declarando o botão de confirmação de forma separada, o new que você criou se tornaria apenas isto: .new:before { content: "+ "; font-weight: bold; } Foi isso que quis dizer. E o action-create que troquei, é a convenção que utilizo. Fica mais claro do que apenas new. Além disso, content requer um pseudo-elemento como :after, :before, etc. Isso foi puro esquecimento mesmo. :wacko: Compartilhar este post Link para o post Compartilhar em outros sites
