Por uma web trivial
CSS - Design Responsivo
Integrantes
Gérley Adriano
Igor Duarte
Vladek
Engenharia de Computação
Me. Gustavo Nascimento
Sumário
CSS CSS 3
Design
Responsivo
O que é mais fácil otimizar ?
De que forma ela fica mais bonita ?
E agora ?
O que é CSS ?
Em outras palavras….. CSS é a
maquiagem do HTML… é o que torna
HTML bonito e agradável.
HTML = conteúdo
CSS = estilo
Características
❖ Interpretação de classes e propriedades
diretamente pelo navegador;
❖ Aplicação de estilos somente a um ...
Porque usar CSS
❖ Evita duplicação;
❖ Torna-se a manutenção muito mais fácil;
❖ Permite utilizar o conteúdo com diferentes...
web como plataforma
Antes a web servia para visitarmos
sitezinhos.
Hoje: we have the power
Estrutura
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Documento de amostra</TITLE>
<LINK rel="s...
Estrutura (style1.css)
p {color: #ff0033}
strong {color: red}
Organização dos conteúdos de uma
página
Organização dos arquivos
Browsers support
Long version:
Internet Explorer: 9.0+
Firefox: 3.5+
Chrome: 4.0+
Safari: 3.1+ (a bit buggy until 4.0, how...
Alguns formatos
● 320 pixel – Smartphones no formato retrato
● 480 pixel – Smartphones no formato paisagem
● 768 pixel – T...
Os tempos mudaram...
CSS 3
O que há de novo ?
❖ Animações
❖ Sombras (em elementos e textos)
❖ Gradientes
❖ Media queries
❖ 3D
❖ Interação direta com ...
CSS 3 continua sendo o velho
CSS, só que agora ele é tipo
RedBull: te dá asas.
Só tem um problema…….
O CSS 3 não funciona em muitas
versões do internet explorer
O que isto interfere
❖ Exclusão de usuários que possuem
dificuldades em se adaptar a modernidade;
❖ Exclusão de usuários f...
É o fim da picada….
Pegadinha do malandro
CSS Reset
❖ Arquivo que permite a padronização pura dos
elementos;
❖ Uso simples;
❖ Fácil encontrar;
Design Responsivo
Características
❖ Adaptação a qualquer dispositivo;
❖ Fácil vizualização de conteúdo;
❖ Páginas cada vez mais limpas;
❖ Pú...
Exemplo
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
Aderir ou não a esta nova tecnologia ?
Com o uso do design responsivo torna-
se desnecessário o uso de ...
❖ Versões específicas para celulares;
❖ Linguagens pró...
Nunca pense em
usar flash.
Estatísticas gerais
Estatísticas do mundo mobile
❖ A venda de dispositivos móveis cresceu 179%
no Brasil;
❖ Em 2010 a venda de celulares ultra...
Estatísticas do mundo financeiro
❖ O Paypal movimenta US$ 10 milhões por dia
em pagamentos mobile;
❖ As vendas mundiais at...
O mercado para este profissional
Exigência do mercado
❖ HTML 5
❖ CSS 3
❖ Javascript
❖ Jquery
❖ Ajax
❖ Manuseio de algum software de edição de
imagens
❖ Aná...
Quanto ganha
Média Salarial: R$ 2.690,17
Mínimo: 1.800,00
Máximo: 4.700,00
Perguntas ?
Agradecemos pela atenção
CSS: Design responsivo- por uma web trivial
CSS: Design responsivo- por uma web trivial
CSS: Design responsivo- por uma web trivial
CSS: Design responsivo- por uma web trivial
CSS: Design responsivo- por uma web trivial
Próximos SlideShares
Carregando em…5
×

CSS: Design responsivo- por uma web trivial

353 visualizações

Publicada em

Breve apresentação sobre o CSS juntamente com uma abordagem do CSS3 e exclusivamente com foco em design responsivo. Apesar de ser uma apresentação de origem acadêmica, tal abordagem possui uma didática voltada também para o público interessado na evolução do mundo mobile.

Publicada em: Software
  • Seja o primeiro a comentar

CSS: Design responsivo- por uma web trivial

  1. 1. Por uma web trivial CSS - Design Responsivo
  2. 2. Integrantes Gérley Adriano Igor Duarte Vladek Engenharia de Computação Me. Gustavo Nascimento
  3. 3. Sumário CSS CSS 3 Design Responsivo
  4. 4. O que é mais fácil otimizar ?
  5. 5. De que forma ela fica mais bonita ?
  6. 6. E agora ?
  7. 7. O que é CSS ?
  8. 8. Em outras palavras….. CSS é a maquiagem do HTML… é o que torna HTML bonito e agradável.
  9. 9. HTML = conteúdo CSS = estilo
  10. 10. Características ❖ Interpretação de classes e propriedades diretamente pelo navegador; ❖ Aplicação de estilos somente a um conjunto de elementos, facilitando a flexibilidade de alteração do layout; ❖ Fácil modificação em páginas web; ❖ Exigência de uma padronização no código- fonte; ❖ Rápida adequação as novas tendências do mundo front-end;
  11. 11. Porque usar CSS ❖ Evita duplicação; ❖ Torna-se a manutenção muito mais fácil; ❖ Permite utilizar o conteúdo com diferentes estilos para os mais variados propósitos;
  12. 12. web como plataforma Antes a web servia para visitarmos sitezinhos. Hoje: we have the power
  13. 13. Estrutura <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Documento de amostra</TITLE> <LINK rel="stylesheet" type="text/css" href="style1.css"> </HEAD> <BODY> <P> <STRONG>C</STRONG> <STRONG>S</STRONG> <STRONG>S</STRONG> </P> </BODY> </HTML>
  14. 14. Estrutura (style1.css) p {color: #ff0033} strong {color: red}
  15. 15. Organização dos conteúdos de uma página
  16. 16. Organização dos arquivos
  17. 17. Browsers support Long version: Internet Explorer: 9.0+ Firefox: 3.5+ Chrome: 4.0+ Safari: 3.1+ (a bit buggy until 4.0, however) Opera: 9.5+ iOS: 3.2+ Android: 2.1+ Windows Phone: 7.5+ (Mango) Blackberry: 4.7.1+
  18. 18. Alguns formatos ● 320 pixel – Smartphones no formato retrato ● 480 pixel – Smartphones no formato paisagem ● 768 pixel – Tablets no formato retrato ● 960 pixel – Tablets no formato paisagem e alguns monitores mais antigos ● 1200 pixel – Desktops com monitores widescreen
  19. 19. Os tempos mudaram...
  20. 20. CSS 3
  21. 21. O que há de novo ? ❖ Animações ❖ Sombras (em elementos e textos) ❖ Gradientes ❖ Media queries ❖ 3D ❖ Interação direta com Jquery
  22. 22. CSS 3 continua sendo o velho CSS, só que agora ele é tipo RedBull: te dá asas.
  23. 23. Só tem um problema…….
  24. 24. O CSS 3 não funciona em muitas versões do internet explorer
  25. 25. O que isto interfere ❖ Exclusão de usuários que possuem dificuldades em se adaptar a modernidade; ❖ Exclusão de usuários fieis aos produtos ofertados pela microsoft; ❖ Exclusão de sistemas legados interligados a web;
  26. 26. É o fim da picada….
  27. 27. Pegadinha do malandro
  28. 28. CSS Reset ❖ Arquivo que permite a padronização pura dos elementos; ❖ Uso simples; ❖ Fácil encontrar;
  29. 29. Design Responsivo
  30. 30. Características ❖ Adaptação a qualquer dispositivo; ❖ Fácil vizualização de conteúdo; ❖ Páginas cada vez mais limpas; ❖ Público cada vez mais crescente; ❖ Uso de um design cada vez mais dinâmico;
  31. 31. Exemplo #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } }
  32. 32. Aderir ou não a esta nova tecnologia ?
  33. 33. Com o uso do design responsivo torna- se desnecessário o uso de ... ❖ Versões específicas para celulares; ❖ Linguagens próprias para mobiles; ❖ Subdomínios ou diretórios específicos para atender ao “público móvel”;
  34. 34. Nunca pense em usar flash.
  35. 35. Estatísticas gerais
  36. 36. Estatísticas do mundo mobile ❖ A venda de dispositivos móveis cresceu 179% no Brasil; ❖ Em 2010 a venda de celulares ultrapassou as vendas combinadas de desktops e notebooks em 2012; ❖ Os dispositivos mobile possuem uma taxa de crescimento 4 vezes maior que a taxa de natalidade da população mundial;
  37. 37. Estatísticas do mundo financeiro ❖ O Paypal movimenta US$ 10 milhões por dia em pagamentos mobile; ❖ As vendas mundiais através de dispositivos móveis no eBay chegaram perto de US$ 2 bilhões em 2010;
  38. 38. O mercado para este profissional
  39. 39. Exigência do mercado ❖ HTML 5 ❖ CSS 3 ❖ Javascript ❖ Jquery ❖ Ajax ❖ Manuseio de algum software de edição de imagens ❖ Análise de usabilidade ❖ Wordpress, Drupal ou Joomla
  40. 40. Quanto ganha Média Salarial: R$ 2.690,17 Mínimo: 1.800,00 Máximo: 4.700,00
  41. 41. Perguntas ?
  42. 42. Agradecemos pela atenção

×