web design responsivo com css3 [mvp showcast 2013 - dev - desenvolvimento web]

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

Post on 30-Nov-2014

1.145 views

Category:

Technology

2 download

Embed Size (px)

DESCRIPTION

Palestra: Web Design Responsivo com CSS3 Palestrante: Rogrio Moraes de Carvalho (MVP Visual C#) Realizao: 11/11/2013 17h Trilha: Desenvolvimento Web Sesso: Desenvolvimento Evento: MVP ShowCast 2013 Site: http://mvpshowcast.azurewebsites.net

TRANSCRIPT

  • 1. SESSO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB MVP ShowCast 2013 Web Design Responsivo com CSS3 Rogrio Moraes de Carvalho Visual C# Diretor de Tecnologia VITA Informtica @rogeriomc rogeriomc.wordpress.com 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 2. SESSO: DESENVOLVIMENTO Web Design Responsivo O que Web Design Responsivo? Estratgia recente de web design no desenvolvimento de sites Permite responder e se adaptar a mltiplos dispositivos e resolues Metas Otimizar a experincia de visualizao em mltiplos dispositivos Facilitar a navegao e leitura Minimizar redimensionamentos, deslocamentos e rolamentos 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: DESENVOLVIMENTO WEB
  • 3. SESSO: DESENVOLVIMENTO Histria do Web Design Responsivo Site A List Apart Explora o design, o desenvolvimento e a semntica do contedo web Com foco especial em padres web e melhores prticas 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. SESSO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB Tcnicas de Web Design Responsivo Trs tcnicas principais Grades flexveis Grades adaptveis ao espao disponvel Imagens e vdeos flexveis Imagens e vdeos adaptveis ao espao disponvel Media queries Diferentes regras de estilo com base em caractersticas dos dispositivos 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 5. SESSO: DESENVOLVIMENTO Visual Studio 2013 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: DESENVOLVIMENTO WEB
  • 6. SESSO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB Internet Explorer 11 Developer Tools 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
  • 7. SESSO: DESENVOLVIMENTO Demo de Web Design Responsivo 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft. TRILHA: DESENVOLVIMENTO WEB
  • 8. SESSO: 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. SESSO: 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. SESSO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB Especificaes de alguns padres Web HTML5 Specification (W3C Candidate Recommendation 6 August 2013) http://www.w3.org/TR/html5/ Descrio de todas as especificaes 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. SESSO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB Perguntas & Respostas Rogrio Moraes de Carvalho Visual C# Diretor de Tecnologia VITA Informtica @rogeriomc rogeriomc.wordpress.com 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.