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 Stateham: Lenovo 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.
Rogério Moraes de Carvalho 
Foi muito bacana Rogério. Parabéns! De Verdade. Eu já conheço a tecnologia mas foi uma puta explicação… Se eu fosse iniciante sairia experiente. rsrs.
Olá, Ivomar! Ótimo que tenha gostado da palestra. A ideia foi exatamente mostrar alguns dos recursos do HTML5 e do CSS3 na prática.
Olá Rogério, também gostaria de te parabenizar pela demonstração dessas tecnologias. Foi o “empurrãozinho” que estava faltando para eu começar a estudá-las. Sobre a palestra ficou faltando você demonstrar (devido à falta de tempo) a formatação que você iria utilizar para o palestrante no span da tabela. Será que você poderia fazer um breve comentário ou disponibilizar o código dessa formatação?
Olá, Tiago! Realmente, o tempo era bem limitado para fazer toda a codificação do zero. No final, eu não fiz a formatação dos palestrantes na tabela da programação. Segue uma proposta de formatação que você pode incluir no arquivo estilos.css:
table .palestrante {
display: block;
text-transform: uppercase;
font-size: 80%;
color: #39f;
}
Explicando o código:
– O seletor “table .palestrante” filtra os elementos da classe “palestrante” que sejam descendentes de um elemento table.
– “display: block” tranforma o elemento “span” num elemento de bloco, ao invés de inline. Deste modo, o nome do palestrante é enviado para a linha seguinte.
– “text-transform: uppercase” transforma todas as letras do nome do palestrante para letras maiúsculas.
– “font-size: 80%” diminui o tamanho do texto para 80% do valor padrão (16px) para não ficar muito grande, uma vez que as letras estão maiúsculas.
– “color: #39f” modifica a cor do nome do palestrante para destacar do nome da palestra.
Esta é apenas uma sugestão de formatação, que me parece agradável. Mas, há uma infinidade de possibilidades. Sinta-se à vontade para tentar outras formatações.
boa noite rogerio
sou estudante de programação web aqui no rio grande do sul senai rs
e nosso professor mostrou seu vídeo na campus party 2014
e achamos muito bom seu código apresentado ao vivo
seria possível nos enviar aquele código de html 5 e css 3
para estudarmos em aula?
abrigado
abs