---
title: Conferência W3C Web.br 2013 – Dia 1
authors: Dani Guerrato
paid: true
type: post
date: 2013-11-20
excerpt: Todos os caminhos levam a web! Saiba tudo sobre a conferência, confira o conteúdo das palestras e espie minhas anotações.
url: /conferencia-w3c-webbr-2013-primeiro-dia/
dsq_thread_id: 1983878259
categories:
  - Workshops e Eventos
  - w3c
tags:
  - palestras
  - w3c
  - webbr
---
Na segunda-feira 19 de novembro tive o prazer de acompanhar de perto a [Conferência Web W3C Brasil][1]. O evento, realizado no centro de convenções Rebouças em São Paulo contou com a presença de grandes especialistas web do Brasil e do mundo. Foram dois dias repletos de palestras, debates, cafézinhos, networking, premiações, bons conselhos e muito conhecimento. Se você esteva lá também, parabéns! Aposto que aprendeu alguma coisa nova. Se não foi, não tem problema! Confira (quase) tudo o que rolou no primeiro dia de evento neste artigo.

A conferência foi dividida em diversos auditórios &#8211; header, section, canvas e input &#8211; cada um com um conteúdo diferente. Era tanta coisa interessante rolando ao mesmo tempo que ficava difícil escolher uma das trilhas. Vou falar um pouco sobre as keynotes que eu assisti, mas não deixem de conferir mais informações sobre as outras palestras. Garanto que teve muita coisa bacana.

## A evolução dos sistemas de informática e Web no Brasil

A primeira keynote do dia foi da Fernanda Weiden (Facebook). A Fernanda apresentou uma breve história da internet em um clima super descontraído, contando experiências pessoais e traçando um paralelo com a evolução da web e seu impacto na vida das pessoas. Se você viveu a internet nos anos 90 é impossível não se identificar com as situações como o primeiro número de ICQ (esqueço o telefone de muita gente mas lembro do meu UIN até hoje) ou entrar de madrugada usando conexão discada para navegar &#8220;com um pulso só&#8221;. Mas mais do que isto, foi interessante viajar na linha do tempo e ver de perto como a internet cresceu e democratizou o acesso ao conhecimento. Fernanda ainda comentou sobre os principais obstáculos a serem superados como acessibilidade, cuidados com a privacidade, infraestrutura e disponibilidade, impacto em outros setores, regulamentação, barateamento de equipamentos, inovação local e padronização de linguagens de desenvolvimento.

#### Snippets

  * Como seremos todos iguais se a tecnologia não inclui pessoas com necessidades especiais?
  * Se uma aplicação está muito complicada é porque está tudo errado.
  * A possibilidade de buscar a conteúdos a qualquer momento permite transformar informação em conhecimento.

## <img class="alignnone size-large wp-image-39548" alt="evolucao-sistemas" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2013/11/evolucao-sistemas-589x310.jpg" width="589" height="310" srcset="uploads/2013/11/evolucao-sistemas-589x310.jpg 589w, uploads/2013/11/evolucao-sistemas-319x168.jpg 319w, uploads/2013/11/evolucao-sistemas-588x310.jpg 588w, uploads/2013/11/evolucao-sistemas.jpg 660w" sizes="(max-width: 589px) 100vw, 589px" />

## Processo de Desenvolvimento Front-End &#8211; Do caos ao Sublime.

Jaydson Gomes (Front-end Engineer do Terra) abriu os trabalhos com um aviso: &#8220;Esta palestra não é técnica. E não é sobre o Sublime Text.&#8221;. E não era mesmo! Em um dos bate-papos mais divertidos do evento, Jaydson exemplificou como a preguiça, a [cultura maldita][2] e o complexo de vira-lata podem atrapalhar o processo de desenvolvimento, principalmente em grandes projetos onde existem dogmas a serem quebrados. Através de paralelos históricos, culturais, experiências pessoais e referências pop, Jaydson falou sobre a evolução, a importância da quebra de paradigmas e de tomar iniciativas. Recebemos ainda dicas de como documentar projetos e utilizar o versionamento para transformar o caos (do código) em algo sublime.

#### Snippets

  * Quando existe mais de um padrão, não existe padrão nenhum.
  * Documentação é fundamental para o legado tecnológico.
  * É necessário centralizar toda a informação para facilitar o acesso a ela.

## [<img class="alignnone size-large wp-image-39547" alt="do-caos-ao-sublime" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2013/11/do-caos-ao-sublime-589x310.jpg" width="589" height="310" srcset="uploads/2013/11/do-caos-ao-sublime-589x310.jpg 589w, uploads/2013/11/do-caos-ao-sublime-319x168.jpg 319w, uploads/2013/11/do-caos-ao-sublime-588x310.jpg 588w, uploads/2013/11/do-caos-ao-sublime.jpg 660w" sizes="(max-width: 589px) 100vw, 589px" />][3]

## Jogos com HTML5

A próxima palestra foi com a Talita Pagani, designer de interfaces e [autora aqui do Tableless][4]. A Talita deu uma introdução bem interessante e completa ao mundo do desenvolvimento de jogos desde a anatomia de um game até as principais tecnologias e etapas de criação de projetos em uma linguagem fácil de acompanhar até para quem, como eu, não entende absolutamente nada da área. Na verdade tudo foi muito mais familiar do que eu imaginava já que o toolkit básico para projetar este tipo de games todo desenvolvedor front-end já tem: HTML5, CSS, JavaScript e SVG. Foram discutidas as principais vantagens de desenvolvimento de jogos para a plataforma: ubiquidade, portabilidade, facilidade de distribuição e manutenção, independência de outras linguagens e tecnologias proprietárias. Confira os slides da palestra com o conteúdo completo incluindo muitos links e referências bacanas para você se inspirar.

[slideshare id=21563663&doc=html5-games-usc-130520231317-phpapp02]

#### Snippets

  * <span style="font-size: 1em">Se a aplicação não está funcionando no navegador é porque a aplicação está errada.</span>
  * <span style="font-size: 1em">Você sabia que o Internet Explorer 9 e 10 possui uma boa aceleração de hardware? Não ao bullying de browsers!</span>
  * <span style="font-size: 1em">Você precisa ir mais fundo: um canvas dentro de um canvas.</span>

## Responsivo na prática

Afinal, por que fazer design responsivo? Por que a galera bacana está fazendo? Por que teu chefe mandou? Por que está na moda? Bruno Azevedo (front-end e fundador da Marimbondo), durante a palestra Responsivo na Prática, respondeu a estas perguntas de maneira simples e objetiva: &#8220;para entregar a melhor experiência possível ao teu usuário, independente do dispositivo.&#8221; A apresentação, que teve como publico alvo profissionais iniciantes, contou com os conceitos teóricos e técnicos mais importantes da área: web única, media queries, medidas relativas, grids fixos e fluídos, fallbacks, etc. Foi uma palestra recheada de conteúdo de qualidade: boas práticas, dicas objetivas e ferramentas úteis para você começar a desenvolver sites responsivos hoje!

### Snippets

  * A web é um canvas em branco.
  * Conteúdo é o que gira a web.
  * O design responsivo é como um bonde, se você correr dá para pegar ainda, mas daqui a 2, 3 anos pode ser tarde demais para a experimentação.

## [<img class="alignnone size-large wp-image-39549" alt="responsivo-na-pratica" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2013/11/responsivo-na-pratica-589x310.jpg" width="589" height="310" srcset="uploads/2013/11/responsivo-na-pratica-589x310.jpg 589w, uploads/2013/11/responsivo-na-pratica-319x168.jpg 319w, uploads/2013/11/responsivo-na-pratica-588x310.jpg 588w, uploads/2013/11/responsivo-na-pratica.jpg 660w" sizes="(max-width: 589px) 100vw, 589px" />][3]

## WAI-ARIA

Você provavelmente já conhece os apresentadores desta palestra já que os dois são autores deste site: [Diego Eis][5] (também conhecido como o fundador do Tableless) e [Deivid Marques][6]. Mas se você não conhece este tema super recomendo que comece a pesquisar. WAI-ARIA é uma especificação que possui como objetivo marcar interações e assim transmitir significado e informações apropriadas a pessoas com deficiência. A palestra se dividiu em duas etapas: uma teórica explicando as principais funcionalidades e a sintaxe do WAI-ARIA e uma demo ao vivo realizada pelo Deivid utilizando um leitor de voz. Não vou me alongar muito neste tema já que existe um [artigo do próprio Diego][7] com os detalhes desta palestra, mas vou contar um spoiler: é uma aula inspiradora sobre acessibilidade.

#### Snippets

  * <span style="font-size: 1em">Não podemos fazer conteúdo para apenas um tipo de público. É responsabilidade do desenvolvedor criar uma internet acessível para todos.</span>
  * <span style="font-size: 1em">Tente usar leitores de voz por uma hora por dia que você passará a se preocupar mais com acessibilidade.</span>

[slideshare id=28367511&doc=wai-aria-131118071824-phpapp01]

## CSS Layout: o ontem, o hoje e o depois.

Já pensou como será o CSS de amanhã? E de depois de amanhã? E daqui há 10 anos? Ok, não tão longe&#8230; Mas, dentro das novas documentações de CSS3, podemos ficar bem empolgados com o futuro. Almir Filho (Globo.com e Loop Infinito) apresentou nesta palestra um panorama sobre as principais técnicas de desenvolvimentos de layouts desde o HTML 1.0. Foi um grande resumo compreendendo as técnicas rudimentares do passado, até as dificuldades principais do padrão atual (box-model) e o futuro lindo e glorioso do CSS com [Grid Layouts][8], Flexbox, regions e exclusions. E de bônus levamos para casa alguns argumentos bacanas para convencer os amiguinhos que ainda utilizam tabelas para dados não-tabulares pararem de fazer esta besteira (render não incremental, problemas de acessibilidade, mistura de conteúdo e apresentação, etc).

#### Snippets

  * 2013. O Google já fez até um medidor de KI e ainda não superamos as tabelas.
  * CSS Shapes: o fim da tirania do retângulo.

Veja os [slides desta palestra no Speaker Deck][9].

[<img class="alignnone size-large wp-image-39546" alt="css-layouts" src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2013/11/css-layouts-589x310.jpg" width="589" height="310" srcset="uploads/2013/11/css-layouts-589x310.jpg 589w, uploads/2013/11/css-layouts-319x168.jpg 319w, uploads/2013/11/css-layouts-588x310.jpg 588w, uploads/2013/11/css-layouts.jpg 660w" sizes="(max-width: 589px) 100vw, 589px" />][3]

### Por enquanto é só&#8230;

E este foi apenas o primeiro dia de conferência! Aguarde o próximo artigo para acompanhar o final da minha saga na W3C Conf. Para saber mais sobre o evento acesse o [site oficial][10]  e acompanhe a hashtag #webbr2013 nas redes sociais. Até breve!

 [1]: https://conferenciaweb.w3c.br/ "Conferência Web W3C Brasil"
 [2]: https://jaydson.org/cultura-maldita-no-desenvolvimento-de-software/ "Cultura maldita no desenvolvimento de software"
 [3]: https://www.flickr.com/photos/nicbr/
 [4]: https://tableless.com.br/author/talita-cpb/
 [5]: https://tableless.com.br/author/diego-eis/ "Tableless - Autor - Diego Eis"
 [6]: https://tableless.com.br/author/deividmarques/ "Tableless - Autor - Deivid Marques"
 [7]: https://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/#.Uowhg2TXQv4 "Wai-aria estendendo o significado das interacoes"
 [8]: https://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/ "CSS Grid - Isso muda tudo de novo"
 [9]: https://speakerdeck.com/loopinfinito/css-layout-o-ontem-o-hoje-e-o-depois "CSS Layout: O ontem, o hoje e o depois"
 [10]: https://conferenciaweb.w3c.br/ "Conferência W3C Web Brasil"