O que podemos fazer então, criar aquela tag <span> via JavaScript, ou então utilizar uma solução com a utilização de jQuery e o resultado final obtido será o mesmo. Primeiro, vamos a marcação HTML, observe que remove a tag span do código utilizada no exemplo anterior e adicionei uma classe a imagem só para identificação no JavaScript:

<div class="box">
    <img class="centralized" src="img1.jpg" alt="" title="" />
</div>

Agora vamos ao JavaScript, também muito simples e o código está comentado facilitando a compreensão:

$(window).load(function(){
	//Pega a altura do seu pai e armazena em uma variável
	var parent_height = $('.centralized').parent().height();

	//Pega a altura da imagem e armazena em uma variável
	var image_height = $('.centralized').height();

	//Calcula a altura do pai menos a altura da imagem e divide por 2
	//É onde obtemos a distancia que a imagem deve ficar do topo e a armazenamos em uma variável
	var top_margin = (parent_height - image_height)/2;

	//Aqui é onde aplicamos a margem do topo a imagem
	$('.centralized').css( 'margin-top' , top_margin);
});

Observem agora o exemplo.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Slideshow com jQuery
• Contar e limitar caracteres em textarea
• IE6 Double Margin / Duplicate Characters bug fix usando jQuery
• jQuery Delay Plugin
• Adicionar ícones a links externos

Construíndo sites com CSS e (x)HTML

Esse foi o primeiro livro totalmente nacional, lançado pelo Maujor sobre CSS, para quem quer aprender CSS esse deve ser ser livro de cabeceira. Este livro aborda a técnica de construção de sites baseada nas Web Standards do W3C, cujo princípio básico é separar a marcação (X)HTML da apresentação visual. De forma didática, são apresentadas as razões da criação das Web Standards e suas vantagens, a sintaxe (X)HTML e CSS, as propriedades CSS e a criação de layouts fixos e elásticos multicolunares. Os assuntos tratados são ilustrados com códigos, exemplos e figuras que mostram a renderização no navegador. No site de apoio, o leitor encontrará os códigos para download e informações complementares sobre o livro.

Criando sites com HTML

Construir sites em conformidade com os Padrões Web do W3C, mais do que uma opção de desenvolvimento, é uma exigência do mercado. Resgatar a finalidade original da linguagem de marcação HTML, tal como idealizada pelo seu inventor, Tim Berners-Lee é a palavra-chave que norteia o moderno conceito de escrever HTML. Este livro descreve de forma detalhada cada um dos elementos do HTML, dando ênfase a sua finalidade. Um capítulo é dedicado exclusivamente às folhas de estilo em cascata (CSS), que forma uma dupla inseparável com HTML.

Esse foi o 2º livro escrito por Maujor.

Criando Páginas Web com CSS

Com lições passo a passo ricamente ilustradas, o livro reúne técnicas de CSS úteis e modernas para você começar a criar (ou aprimorar) imediatamente seu site Web, tornando seu layout profissional compatível com qualquer tipo de navegador. Este livro o ajudará a tornar um especialista em CSS num piscar de olhos, oferecendo as mais avançadas dicas, truques e técnicas que desmistificarão o universo de bugs e segredos sobre os quais você talvez já tenha ouvido falar.

Use a Cabeça HTML com CSS e XHTML

Use a Cabeça! HTML com CSS e XHTML 2a Edição permite que você evite a vergonha de pensar que as cores compatíveis com a Web ainda contam, e a tolice de perder uma tag em suas páginas. O melhor de tudo é que você aprenderá HTML, XHTML e CSS de uma maneira que não o fará dormir. Se você já leu algum livro da série Use a Cabeça!, sabe o que esperar: um formato visualmente rico, projetado para se adaptar à forma como seu cérebro funciona. Usando as últimas descobertas da neurobiologia, ciência cognitiva e teoria do aprendizado, este livro colocará o HTML e as CSS em seu cérebro para sempre. Aprenda os verdadeiros segredos da criação de páginas Web e porque tudo o que seu chefe disse a você sobre as tabelas HTML provavelmente estava errado (e o que fazer para dar tudo certo). E, o mais importante, concorde com seu colega de trabalho e impressione os amigos quando ele mencionar casualmente como o HTML dele agora está perfeito e a CSS é uma folha de estilos externa.

Profissional Padrões de Projeto com CSS e HTML

Usar padrões de projetos para estilizar (X)HTML e CSS poupará seu tempo e esforço. Profissional Padrões de Projetos com CSS e HTML contém mais de 350 padrões de projetos prontos para uso que podem ser combinados para criar um número ilimitado de soluções para projetos. Você pode se beneficiar instantaneamente de seu poder reutilizável e de sua eficiência simplesmente colocando-os em seu código e ajustando alguns valores!

Cada padrão funciona em todos os principais navegadores da web, incluindo o Internet Explorer 7, o Internet Explorer 6. Este livro será inteiramente útil e prático – ele elimina a necessidade de hacks, truques, testes sem fim, e ajustes constantes nos navegadores para fazer algo funcionar.

Ele é mais do que simplesmente um livro de receitas. Cobre sistematicamente cada característica utilizável de CSS e combina essas características com HTML para criar padrões reutilizáveis. Cada padrão possui um nome intuitivo para facilitar ao procurar, para lembrar e para fazer referência a ele. A acessibilidade e as melhores práticas foram cuidadosamente projetadas em cada padrão de projeto, em cada exemplo e em cada código fonte.

JavaScript – O Guia Definitivo

Esse livro fornece uma descrição completa do núcleo da linguagem JavaScript, do padrão DOM e legado implementados nos navegadores Web. O livro inclui exemplos sofisticados que mostram como tratar tarefas comuns, como a validação de dados em formulários, o trabalho com cookies e a criação de animações portáveis usando DHTML. O livro também contém seções de referência detalhadas que abrangem o núcleo da API JavaScript, a API “legada” do lado cliente e a API padrão DOM do W3C, documentando cada objeto, método, propriedade, construtor, constante, e função de JavaScript, assim como o tratamento de eventos nessas APIs. Esta é uma leitura particularmente útil para os desenvolvedores que trabalham com navegadores Web compatíveis com os últimos padrões, como o Internet Explorer 6, o Netscape 6 e o Mozilla. Desenvolvedores HTML podem aprender a usar JavaScript para construir páginas Web dinâmicas. Programadores experientes podem encontrar rapidamente as informações necessárias para começar a escrever programas sofisticados em JavaScript. Este livro é uma referência indispensável para todos os programadores de JavaScript, independentemente do nível de experiência.

jQuery: A Bíblia do Programador JavaScript

jQuery é uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em websites. Desenvolvedores especialistas em JavaScript, ao conhecerem as maravilhas de que a biblioteca é capaz, com certeza vão se perguntar: ?Por que não pensei nisso antes??. Iniciantes, com noções rudimentares de JavaScript, experimentarão uma curva de aprendizado inimaginável para aqueles experientes com a linguagem.

jQuery propicia a criação de scripts de uma forma tão simples e intuitiva que consegue com meia dúzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi a diretriz que norteou John Resig na criação da biblioteca. Este livro, na primeira parte, apresenta a biblioteca e um estudo da sintaxe e emprego dos seletores e comandos jQuery, desenvolvendo scripts de exemplo para cada um deles, que podem ser examinados ao vivo em arquivos disponíveis para download no site do livro. Na segunda parte, são desenvolvidos vários scripts de emprego real, todos comentados e disponíveis para download.

AJAX: Guia Prático para Windows

O livro mostra a trajetória de uma aplicação web por meio dessa nova tecnologia. Ele apresenta os conceitos básicos, estrutura de programação JavaScript, comandos, principais funções e formas de interação com o browser.

XML, API DOM e manipulação de páginas web são assuntos tratados em detalhes, assim como o CSS (Cascading Stylesheet) ou folhas de estilo, pois permite a interação direta com o usuário, alterando elementos da página de forma dinâmica. Possui vários exemplos de utilização do AJAX, desde os mais simples até os mais complexos, que utilizam JavaScript orientado a objetos e técnicas modernas de programação.

Não Me faça Pensar – Usabilidade na Web

Uma Abordagem de Bom Senso à Usabilidade na Web. Cinco anos e mais de 100 mil exemplares após ter sido publicado pela primeira vez, é difícil imaginar alguém trabalhando em projeto Web que não tenha lido o “clássico instantâneo” de Steve Krug sobre usabilidade na Web, contudo, as pessoas ainda o estão descobrindo todos os dias. Nesta segunda edição, Steve acrescenta três novos capítulos no mesmo estilo do original: divertido e interessante, mas, ainda assim, cheio de informações e conselhos práticos, tanto para novatos quanto para veteranos. Não fique surpreso se ele mudar completamente a forma pela qual você pensa em projeto para Web.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Referência HTML/XHTML, CSS e JavaScript no Firefox
• CSS Conditional comments
• Diferença entre elementos inline e de bloco em HTML
• CSS Logos
• Overview: CSS3 Media Queries

A maioria dos desenvolvedores web, na verdade, não sabem, ou têm apenas uma vaga idéia do que significa o termo, portanto, vou tentar explicar da forma mais simples possível o que é DHTML. Quando a versão 4 dos browsers Netscape e Internet Explorer foi lançada ocorreu uma pequena revolução na Internet. Enquanto o suporte a CSS nesses browsers era precário estava nascendo uma nova união de tecnologias que iria revolucionar a forma de desenvolver páginas web. Foi então que no final dos anos 90 e início do ano 2000 nascia o DHTML (Dynamic HTML).

DHTML é a união das tecnologias HTML, Javascript e CSS aliado ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. Quando você efetua mudanças de estilo em elementos HTML e a mudança é registrada imediatamente sem o recarregamento da página, você está vendo um exemplo de DHTML. Você também pode fazer o usuário integarir com a página escondendo e mostrando elementos, mover elementos na página, mudar cores.

Antes do surgimento do DHTML só podiamos utilizar páginas em HTML estático. Quando você carregava uma página, ela não podia ser alterada até você passar para a próxima página. Com o DHTML você poderia dar mais interatividade a página, lhe dando a possibilidade até de criar novos elementos na página para serem manipulados depois.

Atualmente existem 3 grandes empresas trabalhando por trás do DHTML: o W3C, a Netscape e a Microsoft, mas no passado, ele passou por um mal bocado. Na época do surgimento do DHTML, a Netscape e a Microsoft eram grandes rivais e não tinham nenhum interesse em trabalharem juntas em uma especificação do DHTML, e por isso era comum você ter um script que funcionava tão bem em um browser e nem sequer funcionava no outro. Quem naquela época não acessou um site e deu de cara com uma splash page com links apontando para páginas desenvolvidas para Netscape e Internet Explorer?

Mas nessa briga quem saiu ganhando foi a Netscape, pois por possuir um browser com melhor suporte ao DHTML, uma melhor documentação ele foi adotado como browser padrão para o DHTML. Rapidamente no entanto, a grande dificuldade de programação nesta nova geração de scripts, juntamente com o suporte precário dos navegadores, definiu a uma cruzada de pessoas que o DHTML estava morto. Com o tempo o W3C tomou frente no desenvolvimento e foram criadas as especificações e hoje você já pode utilizar o DHTML confortavelmente.

Aplicando dinamismo a página

Você pode estar meio confuso até aqui, mas efetuar manipulações dos elementos na página não é difícil. Vamos a simples exemplo para que possa entender melhor o que é DHTML. Observem a marcação HTML:

<div id="principal"></div>

Suponhamos que ele possua os seguintes estilos:

div#principal (color:#000000; border-left:1px solid red;)

O usuário ao acessar a página, esses estilos são computados pelo browser, e caso você queira efetuar alguma alteração nos estilos do elemento utilizando DHTML esses novos estilos serão adicionados ao seu HTML através da tag style diretamente no código HTML. Um exemplo de código para efetuar a alteração da cor seria o seguinte:

document.getElementById('principal').style.color = '#ff0000';

Para efetuar a alteração do elemento HTML, temos que acessar o elemento através do Document Object Model. Diversos browsers suportam diferentes modelos do DOM e nesse exemplo foi utilizada o DOM nível 1. Em seguida é acessada a sua propriedade style e o novo estilo é aplicado. A execução desse código no browser resultaria no seguinte em seu código HTML:

<div id="principal" style="color:#ff0000"></div>

Essa é um efeito bem simples que você pode conseguir através de DHTML. Mas não pare por aqui, na Internet hoje existem vários sites com tutoriais sobre DHTML com exemplos prontos que podem auxiliá-lo no desenvolvimento:

• QuirksMode – Site que contém tutoriais de como você pode escrever scripts que funcionem corretamente em todos os browsers.
• HTML & DHTML Reference no MSDN
• Exemplos de DHTML
• DHTML Demos

Livro recomendado

O livro JavaScript & DHTML Guia Prático oferece soluções práticas para problemas específicos da criação de scripts com que os desenvolvedores Web comumente se deparam. Cada receita se concentra em um trecho de código que você pode inserir diretamente em seu aplicativo.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na vertical com JavaScript
• Slideshow com jQuery
• Recomendações de livros
• Contar e limitar caracteres em textarea
• Os benefícios de utilizar JavaScript não Obstrutivo

Utilizar JavaScript não obstrutivo proporciona uma maior interoperabilidade, acessibilidade, facilidade de manutenção e ganho de tempo no desenvolvimento de seus códigos.

Foi pensando nisso que Phil Hawksworth desenvolveu uma página muito simples para mostrar que ao utilizar técnicas de Progressive enhancement você está garantindo assim total acesso a qualquer dispositivo.

Abaixo vocês podem ver um exemplo de como o site funciona corretamente em qualquer dispositivo. Essa é uma screenshot que tirei no Openwave Simulator:

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na vertical com JavaScript
• Slideshow com jQuery
• Recomendações de livros
• O que é DHTML?
• Contar e limitar caracteres em textarea

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.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Recomendações de livros
• Diferença entre elementos inline e de bloco em HTML
• A história do HTML
• CSS Conditional comments
• CSS Logos

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.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na vertical com JavaScript
• Slideshow com jQuery
• Recomendações de livros
• O que é DHTML?
• Contar e limitar caracteres em textarea

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.

Bajax

Para quem procura uma solução simples e bastante leve em termos de tamanho (6kb) Bajax pode ser a solução ideal. Puramente para começar a usar Ajax para fazer updates do conteúdo sem o refresh das paginas de uma maneira fácil e simples.

Yahoo User Interface

A resposta da Yahoo no mundo dos frameworks. Uma das grandes vantagens de usar o YUI framework é a possibilidade de não ser preciso fazer o download do framework e poder apenas criar um link na nossa aplicação diretamente aos servidores do Yahoo.

Adobe Spry

Mais indicada para designers. Devido a integração com o Dreamweaver, Spry possibilita o desenvolvimento de aplicações de uma forma bastante fácil.

Dojo

O Dojo pode ser baixado a partir do site oficial em diversas edições. Cada edição contém determinadas partes da biblioteca do Dojo num arquivo Javascript, e permite que você carregue outras partes da biblioteca dinamicamente usando o método de importação do Dojo. A edição mais popular do Dojo é a edição de AJAX, com tamanho em torno de 132 Kb (compactado), e inclui suporte para operações assíncronas (para chamadas de AJAX), efeitos visuais, manipulações de eventos e as bibliotecas base do Dojo.

moo.fx

Pacote bem leve para desenvolvimento em Javascript.

Script.aculo.us

Criar efeitos visuais em Javascript era algo bem complexo. Entretanto, as coisas mudaram. O script.aculo.us é uma biblioteca que permite a criação de efeitos de forma super-simples, sem requerer conhecimentos “Ninja” em Javascript.

Rialto

O RIALTO (Rich Internet AppLication Toolkit) é uma biblioteca de componentes visuais escritos em Javascript. Entre os componentes disponíveis podemos encontrar divisores, grids, abas, pop-ups e árvores.

Rico

O Rico é um framework de código aberto em Javascript, utilizado para criação de aplicações Web baseadas no paradigma Ajax. Ele fornece uma interface para o desenvolvedor registrar os elementos que manipularão os requests (requisições) e responses (respostas) do protocolo HTTP. Ele também possui funcionalidades para implementação de drag and drop, efeitos visuais e comportamentos extras para elementos HTML.

jProton

Framework brasileiro que reúne as idéias utilizadas em outros Framewroks como o jQuery, Ext, Prototype, Mootools, e nos artigos e códigos de Peter Paul Koch, Dean Edwards e Douglas Crockford, e nas boas práticas de programação apresentadas na quinta edição do livro “JavaScript – The Definitive Guide – 5th Edition” de David Flanagan.

Sproutcore

O SproutCore é um framework em JavaScript desenvolvido pela Apple para criar aplicativos web que trabalhem como aplicativos instalados no desktop.

Qooxdoo

Qooxdoo é uma biblioteca de interface visual escrita em JavaScript que provê um grande conjunto de controles permitindo a criação de clientes ricos no browser, tendo compatibilidade com vários browsers em várias plataformas, geralmente em aplicações AJAX. Ele tira proveito dos recursos de orientação a objeto de JavaScript, tendo uma hierarquia poderosa de classes.

Ext JS

Ext JS é um framework crossbrowser para criar aplicações ricas para a Internet de alta performance.

Midori

Midori é um Framework JavaScript muito leve e crossbrowser, possui a capacidade de utilizar seletores CSS, correspondentes aos elementos do Dom para criar animações e efeitos.

Fleegix.js

Fleegix.js tem um excelente suporte aos “acontecimentos do sistema” que ajuda você manipular os eventos do DOM (como mouseover’s, onClick, etc…). Inclui uma função JavaScript para serialização de objetos em formato JSON (fleegix.jason.serialize).

Archetype JavaScript Framework

Archetype é um Framework muito robusto muito parecido com o Prototype. Archetype possui uma dependência do sistema para iniciar os componentes necessários para as páginas web. Ele também tem ênfase em tornar seu código legível e não obstrutivo.

Clean AJAX

Clean AJAX é uma solução crossbrowser para Ajax, que utiliza mensagens para controlar os requests. É uma solução muito simples de utilizar, possui suporte a XSLT, criptografia, acesso a Web services, histórico e cache.

ASP.NET AJAX

O framework Microsoft ASP.NET AJAX incorpora a tecnologia Ajax de desenvolvimento para web sendo uma evolução da tecnologia ATLAS onde você tem a facilidade de arrastar e soltar alguns controles ASP.NET AJAX no seu formulário web, como qualquer controle ASP.NET, para ter os recursos da tecnologia AJAX sem precisar conhecer nada de JavaScript, DHTML.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Centralizar imagem na vertical com JavaScript
• Slideshow com jQuery
• CSS Frameworks – Faça a escolha certa
• Recomendações de livros
• O que é DHTML?