Galeria de fotos em JavaScript

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!

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:

• Galeria de fotos com FrogJS.
• Galeria de fotos com Script.aculo.us.
• FS Galeria de Imagens.

CSS: font-family

No site Font Tester você pode encontrar uma interessante lista com famílias de fontes “web safe”, ou seja, as fontes utilizadas em projetos web que são mais comuns entre os sistemas operacionais Windows, MAC e Linux:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Veja abaixo um preview de como essas famílias de fontes seriam renderizadas pelo browser:

Utilize declarações em letras minúsculas no CSS

Codificar CSS não é uma tarefa tão fácil assim como parece, mesmo os mais experientes passam por problemas, e algumas vezes, por falta de mera atenção. Utilizar declarações com letras maiúsculas em CSS é uma delas, não, não é errado você fazer isso, mas vou explicar o por que de sempre utilizar declarações em letras minúsculas.

Se lembram de quando utilizavamos o nosso querido HTML 4? Alí não importava se você codificava o código em maiúsculas ou em minúsculas, mas no XHTML, todas as declarações devem ser escritas em minúsculas, isso é regra. Aqueles que migraram do HTML para o XHTML por favor, não esqueçam isso.

Utilizar também declarações em letras minúsculas, é necessário, pois muitas vezes, não é somente você quem vai mexer no código de um site, e com isso também pode acontecer de seu companheiro de equipe, que está iniciando no mundo do Desenvolvimento Web ficar meio perdido por causa disso. Para aqueles que não sabem, CSS é case-sensitive, portanto, isso: Foo é diferente disso: foo.

Portanto, pense 2 vezes antes de ficar utilizando declarações com letras maiúsculas.

22 JavaScript Frameworks

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

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 é 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 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 é um framework bastante estável e garante 100% suporte em termos de documentação para ajudar qualquer programador a usar esse framework.

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

Seletor universal

O seletor universal em CSS é representado pelo caractere *, os desenvolvedores que estão iniciando em CSS, e já também os mais experientes, costumam utilizar esse seletor para resetar as margens e paddings de todos os elementos da página, sua utilização seria semelhante a essa:

* {margin:0; padding:0}

Mas o que muitos não sabem é que a utilização desse seletor não se resume somente a isso, exemplo:

div#header * {font-size:2em}

A regra acima aplica um tamanho de fonte de 2em a todos os elementos que sejam filhos, netos e assim por diante que estejam dentro da div com o id header.

div#content > * {height:100px}

A regra acima aplica um tamanho de 100px a todos os elementos que seja filhos diretos da div com o id content.

Viram como podemos extender o uso do seletor uiversal (*), isso são pequenas coisas do que podemos fazer com CSS.