Fala Pessoal,
aqui vai um post bem curto, é apenas para divulgar um site que considero muito bom para aprender e visualizar novas ferramentas. É do Lee Brimelow, um evangelista da Adobe que criou este site há alguns anos e sempre está publicando novidades em vídeo, com tutoriais e arquivos para você baixar.
GoToAndLearn
Acesse! Espero que tenha algo que te ajude como me ajudou todos esses anos.
Até a próxima,
abs
sexta-feira, 9 de agosto de 2013
Ajax Loader Generators
Opa!
Você que está procurando um gerador de loaders aqui vai um link com alguns bem legais.
Gerador de loaders, é um simples gerador de .gif animado com ícones que mostram conteúdo carregando. É bastante utilizado quando quer demonstrar ao usuário que está carregando algum conteúdo, então você mostra esse .gif para demonstrar isso.
Acesse abaixo para conhecer os geradores, basta acessar, configurar cores e formatos, e fazer o download do arquivo.
Ajax Loaders Links
Fica a dica!
Até a próxima,
abs
Você que está procurando um gerador de loaders aqui vai um link com alguns bem legais.
Gerador de loaders, é um simples gerador de .gif animado com ícones que mostram conteúdo carregando. É bastante utilizado quando quer demonstrar ao usuário que está carregando algum conteúdo, então você mostra esse .gif para demonstrar isso.
Acesse abaixo para conhecer os geradores, basta acessar, configurar cores e formatos, e fazer o download do arquivo.
Ajax Loaders Links
Fica a dica!
Até a próxima,
abs
sexta-feira, 2 de agosto de 2013
O que é Bootstrap? Twitter Bootstrap, Bootstrap 3
Fala Pessoal,
Para quem está querendo dar uma agilizada em seus projetos e ter uma estrutura pré-montada de html,css, js aqui vai o
BOOTSTRAP 3 !! Recém saído do forno (se você já usa a versão anterior algumas modificações ocorreram assim como algumas sintaxes, também estou me adaptando, sugiro utilizar em um novo projeto para se familiarizar e depois se for realmente necessário ajustar/atualizar os projetos anteriores).
O Bootstrap foi criado por Mark Otto e Jacob Thornton no Twitter como uma ferramenta inicialmente interna. E após mostrarem no evento do Twitter para outros desenvolvedores a ferramenta começou a ficar famosa. Em Agosto de 2011 o Twitter lançou a versão open-source para o mundo. Em fevereiro de 2012 já era o projeto de desenvolvimento mais popular no GitHub!
Conheci essa ferramenta através de um amigo Rafael Pires, e achei sensacional, tanto para os desenvolvedores que se arriscam no design como para os programadores que não se dão bem com design, pois o bootstrap já vem com o design (tema) bem legal e pode ser ajustado facilmente. E digo mais, para quem ainda quer agilizar ainda mais e começar, ou algo assim, existem sites de templates feitos em bootstrap. Então, quem está começando pode adquirir algum template para ver como funciona, ou até mesmo empreender com isso, não sei, as idéias estão aí. Segue dois site que recebi recentemente BoostrapMaster e WrapBootstrap
Se está procurando eficiência em seus projetos e um padrão em comum entre eles sugiro usar o Bootstrap, mantendo um padrão fica muito mais rápido qualquer alteração de códigos, posicionamento de Divs entre outros.
Outro detalhe legal que o Rafael comentou é de sempre utilizar o bootstrap.css e o seu, por exemplo style.css e nesse style você coloca as classes que editou sempre com as iniciais do seu projeto:
Ex: Projeto Nike
.nk-div-header{ }
.nk-div-footer{ }
E consegue extender as classes do bootstrap
<div class="col-6 nk-div-header"></div> (por exemplo)
É isso, espero que curtam essa ferramenta e aproveito para enviar um grande abraço e agradecimento pela iniciativa dos 2 criadores, fizeram a diferença. Obrigado!
Até a próxima!
Para quem está querendo dar uma agilizada em seus projetos e ter uma estrutura pré-montada de html,css, js aqui vai o
BOOTSTRAP 3 !! Recém saído do forno (se você já usa a versão anterior algumas modificações ocorreram assim como algumas sintaxes, também estou me adaptando, sugiro utilizar em um novo projeto para se familiarizar e depois se for realmente necessário ajustar/atualizar os projetos anteriores).
O Bootstrap foi criado por Mark Otto e Jacob Thornton no Twitter como uma ferramenta inicialmente interna. E após mostrarem no evento do Twitter para outros desenvolvedores a ferramenta começou a ficar famosa. Em Agosto de 2011 o Twitter lançou a versão open-source para o mundo. Em fevereiro de 2012 já era o projeto de desenvolvimento mais popular no GitHub!
Conheci essa ferramenta através de um amigo Rafael Pires, e achei sensacional, tanto para os desenvolvedores que se arriscam no design como para os programadores que não se dão bem com design, pois o bootstrap já vem com o design (tema) bem legal e pode ser ajustado facilmente. E digo mais, para quem ainda quer agilizar ainda mais e começar, ou algo assim, existem sites de templates feitos em bootstrap. Então, quem está começando pode adquirir algum template para ver como funciona, ou até mesmo empreender com isso, não sei, as idéias estão aí. Segue dois site que recebi recentemente BoostrapMaster e WrapBootstrap
Se está procurando eficiência em seus projetos e um padrão em comum entre eles sugiro usar o Bootstrap, mantendo um padrão fica muito mais rápido qualquer alteração de códigos, posicionamento de Divs entre outros.
Outro detalhe legal que o Rafael comentou é de sempre utilizar o bootstrap.css e o seu, por exemplo style.css e nesse style você coloca as classes que editou sempre com as iniciais do seu projeto:
Ex: Projeto Nike
.nk-div-header{ }
.nk-div-footer{ }
E consegue extender as classes do bootstrap
<div class="col-6 nk-div-header"></div> (por exemplo)
É isso, espero que curtam essa ferramenta e aproveito para enviar um grande abraço e agradecimento pela iniciativa dos 2 criadores, fizeram a diferença. Obrigado!
Até a próxima!
quinta-feira, 1 de agosto de 2013
Patterns, Backgrounds, Texturas para utilizar em seus projetos!
Opa!
Para quem sempre precisa de texturas interessantes para backgrounds de projetos, segue um site que possui uma quantidade de variedades legais. Você pode tanto fazer o download de uma específica como também baixar o arquivo para Photoshop .pat no qual você instala na pasta no próprio photoshop e utiliza com o bucket (balde de cores) e fica insano demais!
Dá uma olhada, e o mais legal é que continuam subindo texturas novas.
http://subtlepatterns.com/
Download direto do arquivo .pat para Photoshop
Instalação:
Feche o Photoshop, entre na pasta onde está instalado o programa, procure pela pasta Presets, dentro dela a pasta Patterns e cole o arquivo SubtlePatterns.pat. Reinicie o programa, clique no balde de cores (bucket) embaixo do menu aparece um select box para escolher patterns ou foreground (não sei como fica em português, deve ser texturas) e pronto, abrirá um select box com todas as texturas prontas para serem usadas.
É isso!
Valeu!
Para quem sempre precisa de texturas interessantes para backgrounds de projetos, segue um site que possui uma quantidade de variedades legais. Você pode tanto fazer o download de uma específica como também baixar o arquivo para Photoshop .pat no qual você instala na pasta no próprio photoshop e utiliza com o bucket (balde de cores) e fica insano demais!
Dá uma olhada, e o mais legal é que continuam subindo texturas novas.
http://subtlepatterns.com/
Download direto do arquivo .pat para Photoshop
Instalação:
Feche o Photoshop, entre na pasta onde está instalado o programa, procure pela pasta Presets, dentro dela a pasta Patterns e cole o arquivo SubtlePatterns.pat. Reinicie o programa, clique no balde de cores (bucket) embaixo do menu aparece um select box para escolher patterns ou foreground (não sei como fica em português, deve ser texturas) e pronto, abrirá um select box com todas as texturas prontas para serem usadas.
É isso!
Valeu!
PrettyPhoto - Galeria de Fotos Lightbox jQuery
Fala Pessoal,
Para quem está procurando uma galeria lightbox de imagens/vídeos segue uma bem legal, comecei a reparar e muitos sites utilizam ela, é bem tranquilo de implementar e funciona muito bem. Vem botões sociais incluídos + legendas, função de autoplay e thumbs para todas as imagens.
Link completo abaixo:
PrettyPhoto Lightbox
Até a próxima!
;)
Para quem está procurando uma galeria lightbox de imagens/vídeos segue uma bem legal, comecei a reparar e muitos sites utilizam ela, é bem tranquilo de implementar e funciona muito bem. Vem botões sociais incluídos + legendas, função de autoplay e thumbs para todas as imagens.
Link completo abaixo:
PrettyPhoto Lightbox
Até a próxima!
;)
quarta-feira, 31 de julho de 2013
CatchmyFrame and Bootstrap - Conflito
Fala Pessoal,
Encontrei um slider para antes e depois bem interessante que funciona bem.
Catch my Frame link
O problema que encontrei foi ao juntar com o Bootstrap (vou explicar melhor o bootstrap nos próximos posts). Acontece que ao testar a imagem de cima fica menor e por cima da outra e o slider acompanha apenas a de cima. Dei uma pesquisada, após alguns testes, achei que fosse conflito de bibliotecas jquery, porém não foi, quando removi o arquivo bootstrap.css funcionou 100%. Quando coloquei novamente o arquivo o bug voltou. Resolvi então procurar id e classes em comum, porém não tinha nenhuma com o mesmo nome no arquivo jquery.beforeafter-1.4.min.js. Sobrou então a tag IMG do bootstrap, e foi isso. Segue abaixo o que fiz para funcionar:
(no arquivo bootstrap.css linha 101 aprox comente as 3 linhas abaixo).
img {
/*width: auto\9;
height: auto;
max-width: 100%;*/
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Acabei de fazer isso, por enquanto não prejudicou em nada as imagens que estou utilizando, caso encontre algum erro em outros usos de imagens com bootstrap comenta abaixo para eu deixar atualizado aqui, ok?
OPA! Realmente existe um problema, ao comentar ali em cima as imagens passam a não se ajustar responsivamente nos SPANs do Row-fluid. Ainda não achei uma solução que combine ambas, se encontrar atualizo aqui. A sugestão é que pode mandar um Gambiware e cortar essa tag do css bootstrap e quando for utilizar em outras páginas você cola em um arquivo css separado e utiliza ela. O problema é quando quiser utilizar ambas na mesma página como estou tentando fazer....Bom vamos lá, tem que ter solução, rs. Se encontrar algo, posta que conversamos. Obrigado.
Uma solução interessante que encontrei é, manter comentado no bootstrap.css e quanto for utilizar criar uma classe para essa div span, ex:
.images img{
width: auto\9;
height: auto;
max-width: 100%;
}
Parece funcionar bem.
Valeu!
Espero que ajude!
Encontrei um slider para antes e depois bem interessante que funciona bem.
Catch my Frame link
O problema que encontrei foi ao juntar com o Bootstrap (vou explicar melhor o bootstrap nos próximos posts). Acontece que ao testar a imagem de cima fica menor e por cima da outra e o slider acompanha apenas a de cima. Dei uma pesquisada, após alguns testes, achei que fosse conflito de bibliotecas jquery, porém não foi, quando removi o arquivo bootstrap.css funcionou 100%. Quando coloquei novamente o arquivo o bug voltou. Resolvi então procurar id e classes em comum, porém não tinha nenhuma com o mesmo nome no arquivo jquery.beforeafter-1.4.min.js. Sobrou então a tag IMG do bootstrap, e foi isso. Segue abaixo o que fiz para funcionar:
(no arquivo bootstrap.css linha 101 aprox comente as 3 linhas abaixo).
img {
/*width: auto\9;
height: auto;
max-width: 100%;*/
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Acabei de fazer isso, por enquanto não prejudicou em nada as imagens que estou utilizando, caso encontre algum erro em outros usos de imagens com bootstrap comenta abaixo para eu deixar atualizado aqui, ok?
OPA! Realmente existe um problema, ao comentar ali em cima as imagens passam a não se ajustar responsivamente nos SPANs do Row-fluid. Ainda não achei uma solução que combine ambas, se encontrar atualizo aqui. A sugestão é que pode mandar um Gambiware e cortar essa tag do css bootstrap e quando for utilizar em outras páginas você cola em um arquivo css separado e utiliza ela. O problema é quando quiser utilizar ambas na mesma página como estou tentando fazer....Bom vamos lá, tem que ter solução, rs. Se encontrar algo, posta que conversamos. Obrigado.
Uma solução interessante que encontrei é, manter comentado no bootstrap.css e quanto for utilizar criar uma classe para essa div span, ex:
.images img{
width: auto\9;
height: auto;
max-width: 100%;
}
Parece funcionar bem.
Valeu!
Espero que ajude!
Customizar File Input - EnhanceJS
Fala Galera,
encontrei um link bem interessante, é de um livro que ensina a utilizar o EnhanceJS um framework Jquery que traz muitos exemplos, e o legal é que disponibilizaram alguns exemplos do livro para download free. O que achei bem legal é o File Input, procurei muito alguma coisa para tentar deixar mais apresentável o File Input e encontrei.
Segue abaixo o link direto para todos os exemplos do livro e os que estão disponíveis para download.
http://filamentgroup.com/dwpe/#codeexamples
Espero que curta. Esse já utilizei e funcionou 100%, então eu juntei e adaptei com a Classe de Upload do PHP que postei ontem e já começou a ficar interessante.
Até a próxima! Valeu pela visita!
encontrei um link bem interessante, é de um livro que ensina a utilizar o EnhanceJS um framework Jquery que traz muitos exemplos, e o legal é que disponibilizaram alguns exemplos do livro para download free. O que achei bem legal é o File Input, procurei muito alguma coisa para tentar deixar mais apresentável o File Input e encontrei.
Segue abaixo o link direto para todos os exemplos do livro e os que estão disponíveis para download.
http://filamentgroup.com/dwpe/#codeexamples
Espero que curta. Esse já utilizei e funcionou 100%, então eu juntei e adaptei com a Classe de Upload do PHP que postei ontem e já começou a ficar interessante.
Até a próxima! Valeu pela visita!
Assinar:
Postagens (Atom)