Embed Size (px)
Citation preview
Por uma web trivial
CSS - Design Responsivo
Integrantes
Gérley AdrianoIgor DuarteVladek
Engenharia de ComputaçãoMe. Gustavo Nascimento
Sumário
CSS CSS 3Design
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 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;
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;
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="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P>
<STRONG>C</STRONG>
<STRONG>S</STRONG>
<STRONG>S</STRONG>
</P>
</BODY>
</HTML>
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, however)
Opera: 9.5+
iOS: 3.2+
Android: 2.1+
Windows Phone: 7.5+ (Mango)
Blackberry: 4.7.1+
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
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 Jquery
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 fieis aos produtos
ofertados pela microsoft;
❖ Exclusão de sistemas legados interligados a
web;
É 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úblico cada vez mais crescente;
❖ Uso de um design cada vez mais dinâmico;
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óprias para mobiles;
❖ Subdomínios ou diretórios específicos para
atender ao “público móvel”;
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 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;
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;
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álise de usabilidade
❖Wordpress, Drupal ou Joomla
Quanto ganha
Média Salarial: R$ 2.690,17
Mínimo: 1.800,00
Máximo: 4.700,00
Perguntas ?
Agradecemos pela atenção
