Campus Party, Campus Party Channel, CSS3, Evento, HTML5, Vídeo, W3C

Campus Party Channel – Vídeo da palestra HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

Vídeo da minha palestra na Campus Party Recife 2013

Segue o vídeo da minha apresentação na Campus Party Recife 2013, que foi realizada no dia 18 de julho de 2013.

Dicas para assistir ao vídeo da palestra

Nos 3 minutos iniciais da palestra, eu estou resolvendo um problema do Lenovo ThinkPad W530 para duplicar a imagem da tela do notebook num projetor. O problema é que o notebook estende a imagem no Windows 8, mesmo quando pedimos para duplicar com uso de Windows+P e “Duplicate“. O problema já acontecia na geração anterior, Lenovo ThinkPad W520, com o Windows 7. Duas soluções possíveis para o problema são apresentadas no seguinte post do evangelista técnico da Microsoft Bret StatehamLenovo W520 and an External Projector with NVIDIA Quadro 2000M and NVIDIA Optimus. Eu usei a segunda solução, então tive que reiniciar a máquina para alterar uma configuração na BIOS antes de prosseguir com a apresentação.

Você pode acompanhar a codificação, passo a passo, no vídeo. Eu sugiro que você baixe os arquivos da demonstração em: DemoAbas.

Eu usei o conteúdo do arquivo index.txt para gerar o arquivo HTML5 index.html. Depois, eu criei a folha de estilo CSS3 estilos.css para formatar o conteúdo do arquivo HTML5. Você pode assistir ao vídeo e fazer a codificação simultaneamente, colocando pausa sempre que julgar necessário. O ideal é ter pelo menos dois monitores, um rodando o vídeo e outro para codificação. Ou, ainda, se você tiver um tablet, passe o vídeo no tablet e codifique no seu notebook ou desktop.

Campus Party, CSS3, Evento, HTML5, W3C

Campus Party Recife 2013: HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

Campus Party Recife 2013

O evento Campus Party Recife 2013

Pelo segundo ano consecutivo Recife recebeu uma edição especial do maior acontecimento de inovação, entretenimento digital, ciência e cultura digital do mundo: a Campus Party. Muitos palestrantes subiram nos palcos dos cenários PitágorasGalileuMichelangelo e Stadium para um compartilhamento de informações com os campuseiros. Grandes nomes estiveram presentes na segunda edição desse grande acontecimento tecnológico.

A Campus Party Recife 2013 foi realizada de 17 a 21 de julho de 2013 no Chevrolet Hall e no Centro de Convenções de Pernambuco (Recife,PE).

Cenário Pitágoras

Cenário Pitágoras

Cenário Pitágoras teve diversas palestras sobre desenvolvimento de software, softwares livres, segurança e redes.

Minha palestra: HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos (Cenário Pitágoras)

Eu apresentei a minha palestra sobre desenvolvimento Web com HTML5 e CSS3 voltado para múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos no dia 18 de julho de 2013, das 21h30 às 22h30. A palestra foi apresentada no Cenário Pitágoras e foi transmitida ao vivo pela Internet, sendo que a gravação será disponibilizada posteriormente.

Na palestra, eu apresentei alguns novos elementos do HTML5 que permitem desenvolver páginas Web mais semânticas, como: headerfootorarticlesectionnav e aside. Depois, eu apresentei alguns recursos de módulos das especificações que constituem a CSS3, como os novos seletores, arredondamento de bordas com a propriedade border-radius, gradientes de cores lineares com a função linear-gradient e radial com a função radial-gradient, sombras em textos com a propriedade text-shadow e em caixas com a propriedade box-shadow, efeitos de transição em algumas propriedades com a propriedade transition, dentre outros recursos.

Seguem os slides da apresentação:

Código da demonstração

A demonstração teve como objetivo mostrar a criação de uma interface de abas com efeitos de arredondamento, gradiente de cores e sombras, dentre outros recursos. A demonstração foi feita, a partir do zero, transformando-se um um arquivo texto em uma página Web HTML5 com elementos semânticos e a formatação com recursos de CSS3.

Eu mantive o arquivo texto inicial para servir de base para quem quiser tentar montar o código HTML5 e fazer a formatação com CSS3 de modo similar ao que foi feito na palestra.

Código da demonstração: DemoAbas.