Tag Archives: jquery

Wpcast #6 – jQuery Comment Plugin para Wordpress

Nesse episódio mostro para vocês um plugin do Wordpress que cria um preview do comentário para o seu visitante já ver instantaneamente com vai ficar o comentário dele no seu blog.

Você pode personalizar para ficar igual ao do Snook ou do Css Tricks, portanto use um pouquinho do seu conhecimento de CSS e mande ver. O plugin é o jQuery Comment Plugin, como o próprio nome já sugere foi feito utilizando jQuery, portanto você vai precisar dessa biblioteca, mas não se preocupe, pois o plugin já adiciona os arquivos necessários.

Confira agora o sexto episódio e ótimos comentários.

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Wpcast #4 – Colocando efeito de lightbox no seu site, usando plugins do Wordpress

Mais um Wpcast e nesse episódio mostro como você pode colocar no seu blog ou site efeitos de lightbox usando alguns plugins feitos para Wordpress. Você verá como as configurações necessárias para o funcionamento desse efeito são simples, tenho que confessar que eu não esperava tamanha simplicidade.

Comecei mostrando o efeito aplicando no site da Wireframe Magazine, uma revista eletrônica que mostra vários casos interessantes na criação de protótipos e que em breve estará com uma versão totalmente em pt-br especialmente para vocês.

Nesse Wpcast os plugins mostrados foram:

  1. FancyBoxEsse plugin adaptou as funcionalidades do FancyBox para Wordpress, o efeito desse script é muito elegante, pois ele mostra um Zoom na imagem de forma expansiva com uma estilização simples. Basta instalar o plugin e você já tem essa funcionalidade incorporada, você vai precisar apenas criar um link para a versão maior da imagem, então quando o visitante clicar na miniatura, o plugin detecta o link para a versão maior e adiciona o efeito.
  2. jQuery Lightbox Plugin – Após a instalação desse plugin adicionamos o atributo ‘rel=”lightbox”‘ para o efeito em apenas uma imagem ou ‘rel=”lightbox-album”‘ para agrupar um grupo de imagens, criando assim uma galeria.
  3. Lightbox 2 – Esse plugin utiliza Prototype e Scriptaculous para criar o efeito, cria um item no menu de Configurações com duas opções onde você escolhe a cor de fundo e se o efeito será gerado automaticamente, também pode ser usado para criar Galeria de Imagens.
  4. Shadowbox JS – O mais completo dos 4 plugins testados nesse episódio, ele suporta a maioria das bibliotecas de Javascript utilizadas no mercado: YUI, Prototype, jQuery, Ext, Dojo e Mootols ou você pode utilizar em puro JS. Além disso tem suporte a skins, assim fica muito mais simples criar estilos customizados, detecta automaticamente o idioma do visitante, tem menu de configuração, pode ser usado como substituição do lightbox e ainda pode ser usado como player de áudio e vídeo. Quer mais

Confira agora o quarto episódio:

Gostou? Ajude dando suas sugestões logo abaixo, assinando o Feed ou divulgando para seus amigos. :)

Aconteceu na web – Os sites e dicas mais interessantes da semana #1

Bottons for you

Essa semana foi cheia de novidades, começou com o início dos meus Videocasts sobre assuntos diversos visando aprimorar o meu e os seus conhecimentos sobre essa tal de web, em breve vou estar criando um Feed exclusivo aqui no blog, depois tivemos a gravação do Pilotocast, meu Podcast junto com Billy Blay, sobre assuntos relacionados com a Web.

Logo depois da gravação do Podcast, voltei a “blogar” e agora com certeza as coisas por aqui vão ficar cada vez mais agitadas, claro que preciso de sua ajuda para continuar com o entusiasmo e sempre trazendo ótimas dicas, por isso não deixe de assinar o Feed, comentar o que acha sobre os assuntos ou entrar em contato.

Então vamos as coisas mais bacanas que eu vi nessa semana por essa Web:

  1. Wireframing With InDesign and Illustrator [en] Um tutorial bem bacana para você criar wireframes no Illustrator, ultimamente estou tendo que fazer muito esse tipo de trabalho, não é a toa que meu twitter anda cheio de Wireframing… :)
  2. Html Validator for Firefox and Mozilla Acredito que muitos de vocês já deve utilizar a Web Developer Toolbar, mas essa extensão tem algumas praticidades, pois ela já avisa na status bar do Firefox quais são os problemas que você precisa resolver no seu html, não precisa esperar ter que se comunicar com o Validador da W3C.
  3. 25 jQuery Tutorials for Improved Navigation Menus [en] Uma enorme quantidade de material para você melhorar a navegação nos seus projetos usando jQuery, não deixe de conferir.
  4. Tipos possíveis de licença para seu material [en] Acabe com suas dúvidas sobre qual tipo de licença você deve utilizar quando disponibilizar seu material. Em breve uma apresentação sobre esse assunto
  5. Generic Work Process version 1.0 versão 1 Esse toolkit oferece um overview dos métodos e técnicas que podem ser utlizadas no processo de Design centrado no usuário. E você pensando que o trabalho é pouco
  6. GDrive [en] Mais um produto do Google que veremos em breve, basicamente armazena seus arquivos online e você terá acesso de qualquer lugar e em qualquer dispositivo, desktop, navegador ou telefone
  7. Conditional CSS [en] Mais uma demonstração dos poderes da XSLT, infelizmente eu ainda não pude testar como deveria. Se algum de vocês puderem testar ou já testaram manda um comentário falando sobre o que achou. E não deixem de ler o ótimo tutorial da Vise sobre XSLT
  8. 404 Error Pages, One More Time [en] Para os Web Designers de plantão. Por favor não deixem suas páginas de erro com aquela mensagem de erro padrão, nós todos já estamos cansado disso. Inspire-se nesse ótimo showcase.
  9. LogoInstant.com | Download Free Web 2.0 Logo Designs [en] Mais uma para os Designers de plantão. Logos totalmente gratuitos para vocês terem inspiração na hora de fazer aquela super logo para a nova super aplicação ou site que você está projetando.
  10. Billings 3 | Professional Time Billing for Anyone.
    Uma aplicação bem bacana para Mac para você criar Invoices, gerenciar seu tempo, tem interface para iPhone, se você usa Mac e quer dar um ar mais profissional ao seu trabalho dá uma olhadinha lá.
  11. 15+ Incredibly Useful Mac Apps For Freelance Web Designers [en] Algumas aplicações para Mac para aliviar a sua vida de Freelance, mas primeiro você vai ter que desembolsar algumas pratas
  12. HTML 5 – Semântica e o que é importante na web Diego Eis falando um pouco sobre Web Semântica e HTML 5
  13. Web Standards? E agora José? Um post bem interessante do Henrique Pereira contando um pouco da história e algumas dicas do que você já pode começar a fazer
  14. Blog em inglês do Elomar O Elomar começou mais um blog para aumentar suas habilidades em inglês, pois ele pretende fazer um curso bem bacana fora do país, onde e os motivos, confiram lá no blog dele. :)
  15. Trabalhando com URLs amigáveis sem o mod_rewriteVídeo tutorial lá no Pinceladas da Web, confiram e deixem seus comentários por lá, já ia esquecendo que essa é para o pessoal do PHP

Bom pessoal, chegando quase ao fim do meu post, mas antes não podia deixar de comentar sobre o erro que aconteceu no Google, sim nosso gigante Google, que por causa de um erro humano todos os sites foram identificados como possíveis ameaças. Minha opnião sobre isso é muito semelhante a do Walmar Andrade do Fator W, portanto passem lá e deem uma olhadinha.

E mais uma notícia muito boa para mim nessa semana é que eu venho testando o iPlotz desde que conheci essa incrível ferramenta de Wireframe e ontem recebi uma conta Vip. Sim, durante um ano vou estar trazendo as novidades mais bacanas dessa ferramenta para vocês. Muito grato ao pessoal do iPlotz por ter me concedido essa conta.

Então, gostaram do formato do Post? Vou trazer essas dicas semanais para vocês, sempre aos domingos, porntato me enviem sugestões por favor. =)