@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google {

Tamanho: px

Começar a partir da página:

Download "@media screen and (grande-variedade-dispositivos){ usuários{ sites { ; } Google {"

Antônio Castro Alvarenga
8 Há anos
Visualizações:

2 .pauta{ Introdução; Web Design Responsivo; Princípios do Design Responsivo; Trabalhos Correlatos; HTML5, CSS3, JavaScript; Media Queries; Mobile First; Imagens e Mídias Flexíveis; Mídias Flexíveis; Acessibilidade na Web; Frameworks; Conclusão; Referências;

Media Queries; Mobile First; Imagens e Mídias Flexíveis; Mídias

3 <INTRODUÇÃO screen and (grande-variedade-dispositivos){ usuários{ acessando cada vez mais a web via mobile; cada vez mais exigentes; necessitam melhor acessibilidade via mobile; sites { maioria semi-responsivos e não responsivos; Google { favorecendo sites responsivos nas buscas;

exigentes; necessitam melhor acessibilidade via mobile; sites { maioria

4 <WEB DESIGN RESPONSIVO />.mobile-first{ primeiro é pensado em atender aos dispositivos móveis; só depois atender aos screen and (min-width: 300px){ definição{ leiaute da página se adapta ao screen and (min-width: 800px){ definição{ leiaute da página reconhece as características do dispositivo; melhora a acessibilidade dos usuários;

desktops; @media screen and (min-width: 300px){ definição{ leiaute da página se adapta ao

5 <PRINCÍPIOS DO DESIGN RESPONSIVO/>.grid-fluído { medidas em unidades relativas: 100%, 1.5em;.imagens,.mídias flexíveis { medidas em unidades relativas: 100%, 1.5em; em vez de absolutas: 800px, queries { permite servir folhas de estilos css específicas de acordo com as características do dispositivo do usuário;

mídias flexíveis { medidas em unidades relativas: 100%, 1.

6 <TRABALHOS CORRELATOS /> [Lestari et al. 2014]{ avalia a experiência do usuário em cenários{ web design responsivo em dispositivos móveis; web design responsivo em desktop; design não responsivo em dispositivos móveis; resultados{ web design responsivo: qualidade da informação, legibilidade, prazer de uso, -74% rolagem; piora a exploração da arquitetura: mais cliques e rolagem;

móveis; web design responsivo em desktop; design não responsivo em dispositivos móveis;

7 $( HTML5, CSS3, JavaScript ).val(); HTML5{ melhor semântica para elementos; novos elementos que auxiliam na acessibilidade; permite acessar recursos dos dispositivos; <meta name="viewport" content= width=device-width, initial-scale=1"> CSS3{ seletor{ propriedade: valor; media queries; novos-recursos: sombras, bordas, preenchimentos, opacidade, etc; inicializam CSS: CSS Reset e Normalize CSS; JavaScript{ evolução para atender ao recursos do HTML5 e do CSS3;

recursos dos dispositivos; <meta name="viewport" content= width=device-width, initial-scale=1"> CSS3{ seletor{

8 @media screen and (min-width: 300px) definição{ /* Isso é um breakpoint */ body{ /* permite servir regras css diferentes conforme as caracteristicas do dispositivo; */ background-color: screen and (min-width: 800px) { /* Isso é um breakpoint */ body{ background-color: green;

caracteristicas do dispositivo; */ background-color: red; @media screen and

9 .mobile-first.definição{ Essa técnica prevê tratar os dispositivos móveis por primeiro; Depois tratar os desktops; /* Isso é mobile first, viewport até 300px */ body{ background-color: screen and (min-width: 300px) definição{ /* viewport maior que 300px */ body{ /*permite servir regras css diferentes conforme as caracteristicas do dispositivo;*/ background-color: red;

desktops; /* Isso é mobile first, viewport até 300px */ body{ background-color: green; @media

10 $( Imagens, Mídias > flexíveis ).html(); Imagens > flexíveis{ dispositivos-moveis{ possuem pouca memória; limite de banda de internet; imagens devem ser leves; art-direction: diferentes versões da imagem, recortar imagem; reduzir qualidade da imagem; Mídias > flexíveis{ declarar medidas em porcentagem; usar container com proporção da altura em relação à largura(16:9); padding-bottom: 56.25%; /* 16:9 = 9/16 = 0,5625 * 100 = */

imagens devem ser leves; art-direction: diferentes versões da imagem, recortar imagem; reduzir qualidade da

11 <ACESSIBILIDADE NA WEB />.acessibilidade-web{ melhorar a experiência dos vários tipos de usuários; seguir as recomendações de acessibilidade da W3C; /* Diretrizes W3C para acessibildiade */.WAI-ARIA{ WAI: Web Accessibility Initiative; ARIA: Accessible Rich Internet Applications;

usuários; seguir as recomendações de acessibilidade da W3C; /*

12 $( #frameworks ).html5() #PhoneGap{ tecnologia hibrida; constrói uma aplicação web em HTML5, CSS3 e JavaScrit; roda na maioria dos dispositivos (iphone, Android, etc); permite acessar certos recursos nativos do dispositivo; $(jquery Mobile){ escreva menos e faça mais; construída a partir do jquery; usa HTML5, CSS3 e JavaScript; pensada em design responsivo e usabilidade; sensível ao toque;

roda na maioria dos dispositivos (iphone, Android, etc); permite acessar certos recursos nativos

13 /* conclusão */ dispositivos{ oferecem cada vez mais recursos;.usuários{ querem acesso full-web via mobile; precisam de páginas leves e com design responsivo; precisam de boa acessibilidade; #designers{ precisam ajustar os aplicativos web com urgência para o modelo de design responsivo; precisam ajustar-se as novas necessidades dos usuários;

responsivo; precisam de boa acessibilidade; #designers{ precisam ajustar os

14 Referências{ Bootstrap (2015). CSS Bootstrap. Disponível em: < Acesso em: 27 jun Gallagher, N. and Neal, J. (2015). Normalize.css: Make browsers render all elements more consistently. Disponível em: < Acesso em: 27 jun JQurey Mobile (2015). jquery Mobile. Disponível em: < Acesso em: 27 jun Kimura, M. H., Kemczinski, A., Gasparini, I., et al. (2012). Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign. Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign, v. 7, n. 4, p Klein, D. and Gubic, A. (2014). Responsive website design for higher education utilizing mobile centric features. v. 2, n. 1, p Lestari, D. M., Hardianto, D. and Hidayanto, A. N. (2014). Analysis of user experience quality on responsive web design from its informative perspective. Interntional Journal of Software Engineering and its Applications. Science and Engineering Research Support Society, v. 8, n. 5, p Makino, T., Jung, C. and Phan, D. (2015). Official Google Webmaster Central Blog: Finding more mobile-friendly search results. Disponível em: < Acesso em: 27 jun Mayer, E. (2015). CSS Tools: Reset CSS. Disponível em: < Acesso em: 27 jun PhoneGap (2015). PhoneGap. Disponível em: < Acesso em: 27 jun Silva, M. S. (2014). Web Design Responsivo. Sindh, K. (2012). Smart Phones Application development using HTML5 and related technologies: A tradeoff between cost and quality. v. 9, n. 3, p Subić, N., Krunić, T. and Gemović, B. (2014). Responsive web design Are we ready for the new age? v. 2, n. 1, p W3C (2015a). CSS Fonts Module Level 3. Disponível em: < Acesso em: 27 jun W3C (2015b). Media Queries Level 4. Disponível em: < Acesso em: 27 jun W3C (2015c). srcset attribute. Disponível em: < Acesso em: 27 jun W3C (2015d). Web Accessibility Initiative (WAI). Disponível em: < Acesso em: 27 jun Wroblewski, L. (2009). Mobile First. Disponível em: < Acesso em: 27 jun

Disponível em: <https://jquerymobile.com>. Acesso em: 27 jun. 2015. Kimura, M. H., Kemczinski, A., Gasparini, I., et al. (2012).

Documentos relacionados

Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo

Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo Márcio Koch 1, Isabela Gasparini 2 1 Centro de Ciências Tecnológicas Universidade do Estado de Santa