Referência HTML/XHTML, CSS e JavaScript no Firefox

Postado por: Pedro Rogério em
  • 6 out
  • 4

O Firefox é um browser amplamente usado devido as facilidades que ele proporciona aos desenvolvedores, usuários, onde com a utilização de extensões você pode levar um nível acima o desenvolvimento web, a navegação, a experiência na Internet. Recentemente descobri mais uma extensão que pode ajudar muito nós desenvolvedores, se chama DevBoi, onde você tem a possibilidade de ler as referências sobre: HTML/XHTML, CSS, JavaScript e DOM nativos no plugin, e ainda você possui a opção de instalar mais helps como: PHP, Ptototype, Ruby on Rails e XUL.

Devboi

Para ter acesso a referência basta ter o plugin instalado e apertar as teclas “CTRL + F9″, é aberta uma espécie de Sidebar em seu browser, a partir daí é só procurar o que deseja. Dica do WebResourcesDepot.

Galeria de fotos em JavaScript

Postado por: Pedro Rogério em
  • 23 set
  • 4

Desenvolver uma simples galeria de fotos para a web a algum tempo atrás requeria ter conhecimentos em Flash, desenvolver galerias com slideshow então. Mas as épocas mudaram e surgiram os Frameworks JavaScript, e com eles o desenvolvimento para a web ficou menos árduo, desenvolver hoje em dia simples galerias de fotos em JavaScript é muito simples.

Através do site Pixelco.us fiquei conhecendo 2 formas de desenvolver Galerias de fotos em JavaScript com Slideshow, um utiliza jQuery e o outro utiliza Mootools.

CrossSlide

Plugin desenvolvido em jQuery que nos permite criar elegantes apresentações. Suas principais características são:

  • Permite vários tipos de transições e animações.
  • É simples de configurar.
  • Por meio de parâmetros você pode alterar várias configurações.

Site: CrossSlide.

Slideshow 2!

Slideshow 2

Utiliza Mootools para fazer apresentações animadas com legendas. Características:

  • Redimensionamento dinâmico das imagens.
  • Criação automática das miniaturas.
  • Animação de títulos e legendas.
  • Controle pelo teclado.
  • Utiliza código não obstrutivo.

Site: Slideshow 2!

Veja também:

22 JavaScript Frameworks

Postado por: Pedro Rogério em
  • 16 set
  • 16

Frameworks foram desenvolvidos para facilitar o desenvolvimento web, seja ele em CSS, PHP, .NET ou qualquer outra linguagem de programação. Neste artigo você vai conhecer desde os mais famosos Frameworks JavaScript como jQuery, Prototype, e outros menos conhecidos:

jQuery

jQuery

A jQuery é uma ferramenta muito versátil, que vai te ajudar a se concentrar mais no que realmente importa: a lógica para implementar a solução.

Prototype

Prototype

Prototype é uma das bibliotecas/framework mais conhecidas e mais usadas para quem quer usar Ajax. Um dos problemas com o prototype é a corrente documentação, onde muitos usuários acham complicado e difícil de entender.

Google Webtoolkit

Google Webtoolkit

Google Web Toolkit é uma aplicação em JAVA que simplifica a criação de aplicações que queiram usar Ajax. Basicamente permite a qualquer programador criar Ajax usando JAVA deixando assim o GWT traduzir o código para Javascript e HTML.

Mochikit

Mochikit

Mochikit é um framework bastante estável e garante 100% suporte em termos de documentação para ajudar qualquer programador a usar esse framework.

MooTools

MooTools

MooTools é um framework para programadores já com alguma experiência em Javascript. Ultimamente a utilização desse framework está crescendo muito e com uma documentação bastante simples de usar, Mootools pode ser outro dos grandes frameworks.

Continuar lendo »

Adicionar ícones a links externos

Postado por: Pedro Rogério em
  • 21 ago
  • 1

Mostrar ao usuário de forma criativa que determinado link de seu site faz referência a outro, é uma boa regra de usabilidade, você pode fazer isso com CSS, de uma forma bem simples, mas infelizmente não irá funcionar no Internet Explorer, ou você pode fazer isso através de JavaScript. Caso você não seja ninja nessa arte, pode fazer isso facilmente com jQuery.

O que basicamente é feito pelo JavaScript é testar se o location.hostname, o link do hostname, é o mesmo representado no this.hostname. Basicamente ele efetua o seguinte teste: this.hostname && location.hostname !== this.hostname.

A função filter()

Nesse exemplo vamos utilizar a função filter() para testar todos os nossos links, vejam uma descrição do script abaixo:

$(document).ready(function() {
  		$('a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
  		}).after(' <img src="external.png" alt="external link" />');
	});

A função irá verificar os links, e se achar algum link externo ao meu site, adiciona-rá uma imagem indicando isso. Exemplo do script em ação.

Esse tutorial é uma adptação do original de: Learning jQuery.

Páginas:«123