CSS: Design responsivo- por uma web trivial
-
Upload
gerley-adriano -
Category
Software
-
view
87 -
download
4
Transcript of CSS: Design responsivo- por uma web trivial
![Page 1: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/1.jpg)
Por uma web trivial
CSS - Design Responsivo
![Page 2: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/2.jpg)
Integrantes
Gérley AdrianoIgor DuarteVladek
Engenharia de ComputaçãoMe. Gustavo Nascimento
![Page 3: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/3.jpg)
Sumário
CSS CSS 3Design
Responsivo
![Page 4: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/4.jpg)
O que é mais fácil otimizar ?
![Page 5: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/5.jpg)
De que forma ela fica mais bonita ?
![Page 6: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/6.jpg)
E agora ?
![Page 7: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/7.jpg)
O que é CSS ?
![Page 8: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/8.jpg)
Em outras palavras….. CSS é a
maquiagem do HTML… é o que torna
HTML bonito e agradável.
![Page 9: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/9.jpg)
HTML = conteúdo
CSS = estilo
![Page 10: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/10.jpg)
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;
![Page 11: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/11.jpg)
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;
![Page 12: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/12.jpg)
web como plataforma
Antes a web servia para visitarmos
sitezinhos.
Hoje: we have the power
![Page 13: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/13.jpg)
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>
![Page 14: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/14.jpg)
Estrutura (style1.css)
p {color: #ff0033}strong {color: red}
![Page 15: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/15.jpg)
Organização dos conteúdos de uma
página
![Page 16: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/16.jpg)
Organização dos arquivos
![Page 17: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/17.jpg)
![Page 18: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/18.jpg)
![Page 19: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/19.jpg)
![Page 20: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/20.jpg)
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+
![Page 21: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/21.jpg)
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
![Page 22: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/22.jpg)
Os tempos mudaram...
![Page 23: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/23.jpg)
CSS 3
![Page 24: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/24.jpg)
![Page 25: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/25.jpg)
O que há de novo ?
❖ Animações
❖ Sombras (em elementos e textos)
❖ Gradientes
❖ Media queries
❖ 3D
❖ Interação direta com Jquery
![Page 26: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/26.jpg)
CSS 3 continua sendo o velho
CSS, só que agora ele é tipo
RedBull: te dá asas.
![Page 27: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/27.jpg)
Só tem um problema…….
![Page 28: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/28.jpg)
O CSS 3 não funciona em muitas
versões do internet explorer
![Page 29: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/29.jpg)
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;
![Page 30: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/30.jpg)
É o fim da picada….
![Page 31: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/31.jpg)
Pegadinha do malandro
![Page 32: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/32.jpg)
CSS Reset
❖ Arquivo que permite a padronização pura dos
elementos;
❖ Uso simples;
❖ Fácil encontrar;
![Page 33: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/33.jpg)
Design Responsivo
![Page 34: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/34.jpg)
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;
![Page 35: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/35.jpg)
Exemplo
#pagewrap {width: 94%;
}#content {
width: 65%;}#sidebar {
width: 30%;}
}
![Page 36: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/36.jpg)
Aderir ou não a esta nova tecnologia ?
![Page 37: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/37.jpg)
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”;
![Page 38: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/38.jpg)
![Page 39: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/39.jpg)
Nunca pense em
usar flash.
![Page 40: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/40.jpg)
Estatísticas gerais
![Page 41: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/41.jpg)
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;
![Page 42: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/42.jpg)
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;
![Page 43: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/43.jpg)
O mercado para este profissional
![Page 44: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/44.jpg)
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
![Page 45: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/45.jpg)
Quanto ganha
Média Salarial: R$ 2.690,17
Mínimo: 1.800,00
Máximo: 4.700,00
![Page 46: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/46.jpg)
Perguntas ?
![Page 47: CSS: Design responsivo- por uma web trivial](https://reader030.fdocuments.net/reader030/viewer/2022020116/55a65dd31a28ab27798b4811/html5/thumbnails/47.jpg)
Agradecemos pela atenção