Efeitos de movimentação de imagens com CSS3

Nessa apresentação Flávia Siqueira fala à equipe Bluesoft como realizar simples animações em imagens com CSS3 sem sobrecarregar as solicitações ao servidor.

Você poderá assistir no vídeo do vimeo, e acompanhar os slides no slideshare.

Sombras e efeitos no HTML 5 e CSS3

Nesta apresentação Flávia fala à equipe Bluesoft sobre o novo logo do HTML 5  e apresenta a criação de um menu com efeitos de sombreamento e uma galeria de imagens com efeitos no houver só com CSS e HTML.

Comenta também sobre o novo logo do HTML 5 e sua identidade!

Assista o vídeo no vimeo, acompanhe os slides no slideshare.

HTML 5 e CSS 3: as técnicas que você logo estará usando

Flávia Siqueira fez uma apresentação para a equipe Bluesoft, falando sobre a história, evolução e um pouco sobre o que há de novo no HTML 5 e no CSS3.

O HTML 5 apresenta uma série de novos elementos que tornarão as páginas web mais semânticas. Isto facilitará muito para os motores de busca e leitores de tela navegarem nas páginas, além de melhorar a experiência em navegação web para os usuários.

A união do CSS 3 com o HTML 5  é muito poderosa, ambos cresceram e evoluíram juntos e não há mais como separá-los. Como nada nesse mundo é perfeito, ainda faltam os navegadores se moldarem para acompanhar essa evolução.

Essa é a primeira de uma série de apresentações em que a Flávia falará sobre o assunto.

Veja o vídeo e os slides.

jQuery – Escreva menos. Faça Mais.

Nos últimos meses tem se falado muito em frameworks Ajax e JavaScript. A nova onda de iteratividade que chegou com a web 2.0 trouxe a necessidade de aplicações mais dinâmicas, e o JQuery é uma excelente ferramenta para apoiar no desenvolvimento de aplicações que atendam a essa nova demanda.

O jQuery é uma biblioteca JavaScript de código aberto que simplifica a interação entre o HTML e o JavaScript, possui uma excelente comunidade, centenas de posts diários em fóruns de discussão, uma grande diversidade de plugins e extensões, funciona nos principais browser da atualidade e o mais incrível é que possui apenas 20Kb.

Possui uma sintaxe extremamente simples com a finalidade de encontrar elementos em uma página HTML e permitir que se faça algo com eles. Observe o código HTML abaixo:

<div id=”principal”>
<div id = “menu”>
<ul>
<li>Quem Somos</p>
<li>Fale Conosco</p>
</ul>
</div>
</div>

Para selecionar um ou mais objetos utiliza-se a função $(), por exemplo para selecionar todos os elementos DIV basta que se utilize a seguinte sintaxe: $(‘div’).

Depois de selecionar um ou mais objetos, pode se executar operações com eles, por exemplo, para se alterar a cor de fundo dos elementos DIV, utiliza-se: $(‘div’) .css(‘background’,’blue’)

Para selecionar um elemento pelo ID utiliza-se o caractere # seguido do ID, por exemplo: ${‘ #menu’}, selecionaria o DIV com ID igual a menu.

Para selecionar todos os elementos LI dentro do DIV menu, utiliza-se: $(‘div.contents li’).

Seria impossível em um simples post como este, apresentar todos as funcionalidade de uma ferramenta tão poderosa como o JQuery, mas, espero ter despertado seu interesse em obter mais informações a respeito. O site oficial do jQuery apresenta uma excelente documentação, além de tutoriais e exemplos práticos.

Aprenda HTML Brincando

No Site htmlplayground.com você aprende html e css através de exemplos, existe uma barra na lateral esquerda com todas as possíveis tags html, clicando em uma delas são apresentados exemplos de utilização, e lhe é permitido alterar e adicionar atributos as tags e observar os resultados.