Criando Site com layout pronto

Guilherme Rico · 17 de maio de 2011

Galera, acabei de fazer meu curso de Fireworks CS5, e montei um layout para meu site muito legal e gostaria de saber como faço para programar usando o layout que fiz?

Se tiverem alguma video-aula, tutorial, algo do tipo, me forneçam por favor!

Fico no aguardo, att

DiF · 17 de maio de 2011

bom primeiro, você entende/ tem conhecimentos em html e CSS? se sim ja é um ótimo começo.

partindo disso.. como você sabe usar o fireworks a melhor coisa primeiro é demarcar as areas no fireworks com a regua. isso te permite por exemplo saber a distancia exata segurando o shift.. ele dá a largura em pixels.

isso é essencial para a criaçao das divs ficarem com o tamanho exato.

depois que você determina isso.. é só usar a ferramenta slice corta o que for conveniente usar como imagem seja background ou nao... e o resto que for cor sólida.. você pode colorir diretamente na div.

Guilherme Rico · 17 de maio de 2011

Ola amgo dif,

entendi o que voce me passou e sobre HTML e CSS, entendo basico mas estou fazendo um curso de CSS que estou aprendendo mais sobre o assunto.

O que eu queria saber mesmo, é como eu corto as partes do site, como seperar certinho, etc... e depois qual programa é melhor usar?Dreamweaver ou outro?

Obrigado, att.

DiF · 17 de maio de 2011

pra cortar as partes do layout como eu disse no meu post mais acima.. use a ferramenta slice que tem no fireworks, então depois de corta-las nomeie cada uma delas pra nao se perder... e mude de gif( padrão) para jpeg better quality.

sobre a ferramenta recomento altamente usar o eclipse. que é uma IDE gratuita, leve que nao precisa de instalação( mas exige que pelo menos o java esteja instalado no pc)

O dreamweaver nao é indicado para iniciantes, pois ele automatiza os processos e suja muito o código. então se o programador nao domininar bem os atributos css e html... o dreamweaver é ruim por nao "incentiva a aprender" ele simplesmente faz as coisas com poucos clicks.. e a ideia é escrever o codigo.

há quem diga que o melhor mesmo é fazer pelo bloco de notas. sim dá pra fazer traquilamente.. porém eu nao gosto pois a tabulaçao dele é ruim. e e tudo uma cor só.

então eu recomendo o uso do eclipse for php(helios) você pode pegar em www.eclipse.org sessao downloads. é um dos melhores gratuitos que ja usei e continuo usando.

hallaor · 18 de maio de 2011

ja que ele fez curso de fireworks cs5, eu indicaria o dreamweaver cs5 pra criar o site...

Amigo, tem como posta a imagem do layout que você fez pro seu site, pra gente dar uma olhada.. obrigado

DiF · 18 de maio de 2011

eu continuo nao incentivando o dreamweaver.. é pesado, suja o codigo... e digo... sem tom pejorativo: na minha humilde opiniao.. dreamweaver é para malandro!! ou seja, quem tem preguiça de digitar codigos!!! rsrsrs

nada melhor do que digitar seu proprio codigo, fazer sua propria identaçao na IDE... bem limpinha..iniciar um projeto novo só com codigos necessários.. ao contrario do drewamweaver.. quando se cria uma div... enche de "lixo" que certamente você terá o trabalho de retirar porque nao vai usar tudo ..

então ai ja é melhor escrever do zero , so com o necessário. ja o fireworks cs5 ai tudo bem.. ja que é um editor de imagens e tal... assim como o photoshop... nao tem quem substitua...mas em se tratando de ide... nao há nada melhor do que o eclipse .. em questao de leveza... e criaçao tudo na unha!! .. há quem diga que bloco de notas é melhor.. ou notepad++... enfim..

Roberto.Korea · 18 de maio de 2011

Na minha humilde e singela opinião.

Dreamweaver é para pessoas que não querem programar, ou melhor dizendo para designers (Não subestimando nenhum designer, muito pelo contrário, são ótimos profissionais, mas do mesmo jeito que um programador é péssimo com designer o inverso acontece). Suja tanto o código, mas tanto, que você demora x horas para fazer o site, e 3x para retirar o lixo que ele colocou.

Se quiser saber programar... Komodo Edit, Notepad++, Eclipse, e afins. Clique em novo documento e let's play!

E vou mais além ainda, que é uma discussão de horas que eu ainda tenho com o nosso amigo dif, mas que logicamente, é uma discussão construtiva. Sem o uso de jQuery quando for fazer programação utilizando javascript.

Mas enfim... Não utilize o DreamWeaver, dica de amigo.

DiF · 18 de maio de 2011

E vou mais além ainda, que é uma discussão de horas que eu ainda tenho com o nosso amigo dif, mas que logicamente, é uma discussão construtiva. Sem o uso de jQuery quando for fazer programação utilizando javascript..

É uma discussão prazeirosa! estou aprendendo muito.

enfim roberto, que você é fã numero 1 do javascript puro, como eu faria um show e hide de uma div no sentido horizontal da direita para a esquerda em um efeito "slide" ? estou brigando comigo mesmo pois estou quebrando a cabeça tentando usar o jquery com a funçao animate() que teoricamente seria simples. detalhe, consigo perfeitamente fazer o efeito para cima e para baixo... rsrs mas quero fazer na horizontal. se você tiver alguma luz, mesmo sendo em javascript puro, agradeceria, nao precisa ser pronto, basta me dar indicaçoes de como pesquisar pois nao tenho nennhuma referencia sobre isso.

hallaor · 18 de maio de 2011

Na minha humilde e singela opinião.
Dreamweaver é para pessoas que não querem programar, ou melhor dizendo para designers (Não subestimando nenhum designer, muito pelo contrário, são ótimos profissionais, mas do mesmo jeito que um programador é péssimo com designer o inverso acontece). Suja tanto o código, mas tanto, que você demora x horas para fazer o site, e 3x para retirar o lixo que ele colocou.

Se quiser saber programar... Komodo Edit, Notepad++, Eclipse, e afins. Clique em novo documento e let's play!

E vou mais além ainda, que é uma discussão de horas que eu ainda tenho com o nosso amigo dif, mas que logicamente, é uma discussão construtiva. Sem o uso de jQuery quando for fazer programação utilizando javascript.

Mas enfim... Não utilize o DreamWeaver, dica de amigo.

Então sou preguiçoso... ¬¬

eu uso o dreamweaver sim, não acho problema em usar, e depende de como você usa... eu prefiro digitar os codigos, ae invés de ir usando as ferramentas pra isso

Como ainda to aprendendo, ele me ajuda na hora de criar uma tag na qual não tenho certeza, ae aparece do lado ^^. tem alguma outra ide com essa função? se tiver eu posso trocar de ide...

DiF · 18 de maio de 2011

sim, o eclipse faz isso... é só apertar ctrl + espaço que abre uma caixa com as funçoes que você quer. em php.. tags em html... enfim..

Roberto.Korea · 18 de maio de 2011

Komodo também tem essa função, e é exatamente igual, ctrl + <espaço>.

Pego pesado em Dif.

Acho que neste caso, você teria uma div, e uma função que mudaria o y de acordo com um timer, que é zerado sempre quando a função é chamada.

Partindo do principio que as variaveis (x,y) seriam os valores da posição na tela.

e conforme o timer ia atualizando você vai percorrendo a tela.

Mas agora vem um detalhe, teria que jogar ele pra cima de todas as outras divs, ou se não, deixá-lo em uma div, para que ele não sobreponha ou acabe com o layout do site/sistema.

Acho que como você tem uma experiência muito boa com javascript, poderia pegar a função do jQuery que a faz na vertical e tentar entendê-la como ela faz para fazer na horizontal e fazer as adaptações para a vertical.

Realmente você me pegou desta vez. Graficos visuais não são meu forte hehehe.

DiF · 18 de maio de 2011

rsrs, eu tentei diversas maneiras , ate obtive um pequeno sucesso em fazer o slide na horizontal na "ida"... agora nao estou conseguindo obter a volta rsrs... nao sei porque nao funciona eis minhas tentativas:


 <script type="text/javascript">
            $(document).ready(function() {
                $('.abrir').click(function(){
		    var $this = $(this);
		    var $slidelem = $this.prev();
		    $slidelem.stop().animate({'width':'225px'},300);
		    $this.addClass('button_c');
		});

                $('.fechar').click(function(){
		     var $this = $(this);
		     var $slidelem = $this.next();
		     $slidelem.stop().animate({'width':'70px'},200);
		     $this.removeClass('button_c');		
		});  
            });        
        </script>

funcionar ele ate funciona ... ele abre da direita para a esquerda o problema é que quando clico em fechar...ele simplesmente nao funciona.. e nao apresenta erro algum!! to ficando louco ja

Caro amigo roberto, depois de muita pesquisada(3 dias seguidos sem descanso) caiu uma luz no fim do poço... e o pior de tudo... era estão simples e eu tava loqueando... aqui vai a minha solução para movimentos na slide na horizontal no sentido right to left e retorno de left to right ambos com click.


$(document).ready(function(){
	var $abrir = $('#loginImg img');
	var $fechar = $('a#fechar');

	$($abrir).click(function(){
		$('#recuperaSenha').stop(true, true)
                   .show('slide', {direction: 'right'}, 1000);
	});

	$($fechar).click(function(){
		$('#recuperaSenha').stop(true, true)
                   .hide('slide', {direction: 'right'}, 1000);
	});
});

fica a dica ai pra quem quiser... usei: jquery-1.6.1.js (versao mais recente) e jquery-ui-1.8.13.custom.min.js( ultima versao estável compativel com o jquery-1.5.2+)

Mog.Lucas · 19 de maio de 2011

Qual seria o motivo de não utilizar jQuery mesmo?!

DiF · 19 de maio de 2011

Mog.Lucas, "fanzisse" de sofrimento de tentar fazer tudo com javascript puro.. rsrsr

sendo que o jquery facilita muito a parte de efeitos.

Roberto.Korea · 19 de maio de 2011

Bom...

Eu não o utilizo pois degrada a performance da página em si.

Logicamente, como eu disse nos posts acima, prefiro uma página sem jQuery, simples, que carrega em menos de 100ms do que uma página com várias estruturas em jQuery, tornando-o mais bonito visualmente (acredito que seja pleonasmo), e que carrega em mais de 500ms.

Para mim, que gosto de uma coisa rápida ao invés de animações, prefiro não o utilizá-lo.

Adendo: Faço sistemas, e não sites.

DiF · 19 de maio de 2011

eu também nao faço muito sites... eu sou programador.... nao designer...mas também nao gosto muito de uma pagina simples igual a todas... se o jquery ta ai.. é pra ser usado.. facilita muito.

quando uso o jquery .. eu utilizo tudo em um arquivo só justamente para diminir o tempo de carregamento. alias.. que eu acho q é quase que imperceptivel... julgando que atualmente acredito que a minoria use um modem 56k... e quem nao tem pc usa uma lan... hj uma banda larga de 300k ta bem acessível... bom isso eu que estou falando.. é minha " achisse" rsrs nao realisei profundos estudos sobre isso.. enfim..

depende do servidor... o servidor que eu testei aqui os efeitos.. um levou 200ms outro levou 271ms.. eu acho isso relativamente razoável

Roberto.Korea · 19 de maio de 2011

Sim sim...

Em caso de sites que eu acredito que devem ser chamativos, ou melhor atrair o usuário, a introdução do jQuery deve ser usada, pois existem diversos efeitos, que o deixam bonito.

Vou melhorar meu pensamento novamente. A utilização do jQuery é muito boa e deve ser utilizada na "fazeção" de sites, no entanto, ainda sou "cabeça-dura" para com sistemas.

DiF · 19 de maio de 2011

certo, agora sim, você reconheceu. mas tem varias coisas boas nao só para fazer sites... como por exemplo validaçao com tooltip. eu acho uma boa isso.. melhor do que aparecer a palavra escria do ladinho...

outra que eu achei a ideia muito boa.. um e-commerce, que você literamente arrasta os produtos para a cesta de compras. com a funçao draggable();

e a maioria das manipulaçoes que o js puro faz ... o jquery faz com poucas linhas... bom nao digo isso porque sou fã.. mas porque eu uso e acho melhor. no inicio também ]tive rixa com quem usava... depois que comecei a usar... passei a gostar

kikoalemao · 19 de maio de 2011

Usar jQuery não faz mal, eu só gosto de mostrar pras pessoas que entender um javascript puro te torna um programador muito mais conciente de recursos e funcionalidades.

Tem gente hoje que acha q a internet surge toda da função $() ... isso não pode acontecer.

Só lembrando que jQuery não faz em menos linhas. Ele só esconde as linhas de você

Pegue o jQuery não minified e peça pro Komodo, ou IntellijIDEA identar pra você ver as 30 mil linhas de código monstro.

O potencial do Jquery, ao contrário do q a maioria usa, é na manipulação do DOM, que é extremamente facilitada e universalizada com o metodo main dele, $().

Pra efeitos, existem tantos outros por ai que são tão competentes quanto...

Dojo, Scriptaculous, e tantos outros XXX,js.

Outro framework realmente poderoso, mais bem feito que o jQuery na minha opinião de programador OO, é o Prototype.

Mudando de assunto, eu quero recomendar uma ferramenta totalmente *****ásticamente monstra, que descobri ano passado e trabalho até hoje. São as IDEs da JetBrains, em especial a WebStorm (Html+Css+Javascript feitos como devem ser feitos). Existem IDEs da mesma familia pra PHP, Ruby, Java, .NET ... São pagas, mas valem a pena cada centavo pelo número e qualidade das ferramentas que disponibiliza. Não perde nada quem testa. A WebStorm por exemplo tem trial de 45 dias.

Nenhuma outra IDE conseguiu se provar melhor que as da JetBrains até hoje, e eu já testei mais de 20...

Roberto.Korea · 19 de maio de 2011

Sim, mas neste caso, eu acredito que já seja o site, sobre o e-commerce.

Digamos que não tenho rixa de quem usa o jQuery, tenho rixa de quem usa, e não sabe o que está fazendo, tanto é porque como já disse, já estive do outro lado.

Mas gosto de discussões como está porque pelo fato de termos lados opostos um mostra ao outro benefícios do seu lado.

Uma coisa que eu gosto muito de utilizar quando trabalho é o DOM. ele ajuda muito, e faz com que você não precise ficar toda hora fazendo o getElement ou utilizando o $('#') do jQuery (Acho que é assim né, faz tempo que não vejo um código do jQuery hehe).

Gosto de várias funções no jQuery, mas eu acredito que se elas fossem separadas, ou seja, avulsas uma das outras, seria muito mais interessante. Digo avulsas no sentido de, utilizar somente aquelas funções e não carregar todas.

Uma coisa que eu estou pensando em fazer é pegar o jQuery e dividi-lo em funções avulsas, porque ai sim, farei um uso dele. Porque ele ficará limpo e prático.

Mog.Lucas · 19 de maio de 2011

Adendo: Faço sistemas, e não sites.

Se você faz sistemas, porque faz ligação do jQuery com VISUAL ?

jQuery não é só visual.. muito pelo contrário, no sistema principal da empresa não usamos nenhum efeito visual dele.

PS: O tamanho do jQuery (min) é pequeno e pesa muito pouco em uma requisição. Ao mesmo tempo, a sua interpretação é dada pelo navegador e não pela banda. Muitas coisas interferem no desempenho do site, o jQuery não é uma delas.

PS: Respeito sua opnião, mas acredito que você nem imagine o quanto o jQuery é util para um sistema

Abraços!

Roberto.Korea · 19 de maio de 2011

Mog.Lucas,

Sei que o jQuery tem algumas coisas que não são só visuais, como os filtros que ele tem, os draggable como o Dif disse já.

Mas eu tenho a minha biblioteca pronta já, que eu utilizo as funções que eu já fiz, e sempre vou aprimorando.

Não sei se o jQuery tem filtros como, data, hora, numérico, inteiro, ponto flutuante, caracter, dinheiro, dinheiro com ponto flutuante, sem ponto flutuante e afins, mas fiz todos essas funções na unha, no entanto, elas são mais fáceis de mudar do que no jQuery, que utiliza funções dentro de funções o que o torna um emaranhado, ou seja, quando você precisa de alguma função do jQuery, mas não quer utilizar todo o poderio que o jQuery tem, você não tem a possibilidade (ou ela seria muito trabalhosa) de se retirar somente a função que você quer utilizar.

No caso, não vejo problemas em fazer um javascript um pouco mais aprimorado, que possa utilizar em todos os próximos sistemas.

PS: Respeito a sua opinião também, como respeito a opinião o Dif e de todos os usuários de jQuery, mas não o utilizo ainda, pelo fato dele ser necessário a requisição de todas as funções. Quando eu tiver um pouco de tempo, tentarei desmembrá-las para que possa um dia, utilizar algumas funções que ele tem.

[]s

toyo · 22 de maio de 2011

Dif nao sei se ja conseguiu mas s quer o efeito inverso do animate você pode usar o toggle:

http://api.jquery.com/toggle/

A discução tem fundamento jquery é um código enorme nunca tive e nunca vou ter tempo de desmenbrar ele a ponto de ver o que eu uso ou não, ajuda não só visual mas na facilidade embora se perca um pouco de desempenho, se for algo muito pequeno sou mais de fazer o js puro é mais rápido e fica mais leve sem contar que você sabe o que acontece por debaixo do código.

Mas é minha opinião

DiF · 22 de maio de 2011

Toyo, obrigado, consegui sim fazer o que eu queria. nao havia usado o toggle por causa que estava usando lugares diferentes para abrir e fechar. a minha dificuldade era em fazer o slide horizontal... mas felizmente acabei conseguindo de tanto pesquisar e ler a api do animate.