CSS: Design responsivo- por uma web trivial

323 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
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
323
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
19
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Neste slide é feito uma comparação em termos de manutenção de arquitetura de design entre um castelo medieval (localizado na cidade de Milão na Itália) e a catedral de Oscar Niemeyer
  • Representação da Atriz Sharon Stone com e sem maquiagem
  • Momento risos
  • O css (cascading style sheet - Folha de estilho em cascata), é uma linguagem de estilo interpretada diretamente pelo browser(navegador) tendo como função redenrizar estruturas html.
  • As características juntamente com o motivo de usar css parecem ser bastante semelhantes, no entanto a abordagem de ambas ao longo da apresentação deve apresentar um caráter distinto.
  • A cor atribuida a tag “p” é a cor magenta.
  • Tradução do primeiro quadrinho: “Você se importa se eu amarrar seu celular em minha testa, assim eu possa fingir que você está olhando para mim enquanto eu falo ?
  • Tradução:
    Web performance => Perfórmance de páginas web
    Faster Development => Rápido desenvolvimento
    Less scripting => Menos código
    Better user experience => Melhor experiência do usuário
  • 1 ) O CSS Reset nada mais é do que um arquivo capaz de limpar os estilos padrões de todos os elementos HTML que já possuem uma formatação padrão
    2 ) Para usa-lo basta inserir um arquivo no seu site como um css normal
  • 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

    ×