Palestra: Web Design Responsivo com CSS3 Palestrante: Rogério Moraes de Carvalho (MVP Visual C#) Realização: 11/11/2013 17h Trilha: Desenvolvimento Web Sessão: Desenvolvimento Evento: MVP ShowCast 2013 Site: http://mvpshowcast.azurewebsites.net

1. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
MVP ShowCast 2013
Web Design Responsivo com CSS3
Rogério Moraes de Carvalho
Visual C#
Diretor de Tecnologia – VITA Informática
@rogeriomc
rogeriomc.wordpress.com
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

2. SESSÃO: DESENVOLVIMENTO
Web Design Responsivo
♦ O que é Web Design Responsivo?
♦ Estratégia recente de web design no
desenvolvimento de sites
♦ Permite responder e se adaptar a
múltiplos dispositivos e resoluções
♦ Metas
♦ Otimizar a experiência de visualização
em múltiplos dispositivos
♦ Facilitar a navegação e leitura
♦ Minimizar redimensionamentos,
deslocamentos e rolamentos
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

3. SESSÃO: DESENVOLVIMENTO
História do Web Design Responsivo
♦ Site A List Apart
♦ Explora o design, o desenvolvimento
e a semântica do conteúdo web
♦ Com foco especial em padrões web e
melhores práticas
♦ Ethan Marcotte (Web Designer)
♦ Introduziu o termo em maio de 2010
no artigo Responsive Web Design
do site A List Apart
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

4. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Técnicas de Web Design Responsivo
♦Três técnicas principais
♦ Grades flexíveis
♦ Grades adaptáveis ao espaço
disponível
♦ Imagens e vídeos flexíveis
♦ Imagens e vídeos adaptáveis ao
espaço disponível
♦ Media queries
♦ Diferentes regras de estilo com base
em características dos dispositivos
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

5. SESSÃO: DESENVOLVIMENTO
Visual Studio 2013
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

6. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Internet Explorer 11 Developer Tools
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

7. SESSÃO: DESENVOLVIMENTO
Demo de Web Design Responsivo
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

8. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Recursos de Web Design Responsivo
♦Site A List Apart
♦ http://alistapart.com
♦Artigo Responsive Web Design
♦ http://alistapart.com/article/responsive-web-design
♦Livro Responsive Web Design (por Ethan Marcotte)
♦ http://www.abookapart.com/products/responsive-web-design
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

9. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Ferramentas da Microsoft
♦Visual Studio 2013 no site da Microsoft
♦ http://www.microsoft.com/visualstudio/
♦ Microsoft Visual Studio Express 2013 for Web
♦ http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products#dexpress-for-web
♦Usando as ferramentas de desenvolvedor F12 no IE 11
♦ http://msdn.microsoft.com/pt-br/library/ie/bg182326(v=vs.85).aspx
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

10. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Especificações de alguns padrões Web
♦HTML5 Specification (W3C Candidate Recommendation 6 August 2013)
♦ http://www.w3.org/TR/html5/
♦Descrição de todas as especificações CSS
♦ http://www.w3.org/Style/CSS/specs.html
♦ Media Queries (W3C Recommendation 19 June 2012)
♦ http://www.w3.org/TR/css3-mediaqueries/
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

11. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Perguntas & Respostas
Rogério Moraes de Carvalho
Visual C#
Diretor de Tecnologia – VITA Informática
@rogeriomc
rogeriomc.wordpress.com
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.