Transcript
Page 1: Web Design Responsivo com CSS3 [MVP ShowCast 2013 - DEV - Desenvolvimento Web]

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

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

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

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

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

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

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

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

SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

Visual Studio 2013

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

SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

Internet Explorer 11 Developer Tools

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

SESSÃO: DESENVOLVIMENTO TRILHA: DESENVOLVIMENTO WEB

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

Demo de Web Design Responsivo

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

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

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

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

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

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/

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

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


Top Related