Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Responsivo com CSS3 [MVP ShowCast 2013 - DEV - Desenvolvimento Web]

1,607 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Design Responsivo com CSS3 [MVP ShowCast 2013 - DEV - Desenvolvimento Web]

  1. 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. 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. 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. 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. 5. SESSÃO: DESENVOLVIMENTO Visual Studio 2013 © 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: DESENVOLVIMENTO WEB
  6. 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. 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. 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. 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. 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. 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.

×