View
89
Download
0
Category
Preview:
DESCRIPTION
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
Citation preview
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Visual Studio 2013
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Internet Explorer 11 Developer Tools
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Demo de Web Design Responsivo
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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#d-
express-for-web
♦Usando as ferramentas de desenvolvedor F12 no IE 11
♦http://msdn.microsoft.com/pt-br/library/ie/bg182326(v=vs.85).aspx
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
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/
SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
Perguntas & Respostas
Rogério Moraes de Carvalho
Visual C#
Diretor de Tecnologia – VITA Informática
@rogeriomc rogeriomc.wordpress.com
Recommended