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.

6 comentários sobre “Campus Party Channel – Vídeo da palestra HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos

  1. 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.

  2. 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?

    1. 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.

  3. 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

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s