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

344 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
344
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
20
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

    ×