CSS: Design responsivo- por uma web trivial
•Als PPTX, PDF herunterladen•
1 gefällt mir•428 views
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.
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
CSS: Design responsivo- por uma web trivial
- 1. Por uma web trivial CSS - Design Responsivo
- 2. Integrantes Gérley Adriano Igor Duarte Vladek Engenharia de Computação Me. Gustavo Nascimento
- 4. O que é mais fácil otimizar ?
- 5. De que forma ela fica mais bonita ?
- 6. E agora ?
- 7. O que é CSS ?
- 8. Em outras palavras….. CSS é a maquiagem do HTML… é o que torna HTML bonito e agradável.
- 9. HTML = conteúdo CSS = estilo
- 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. 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. web como plataforma Antes a web servia para visitarmos sitezinhos. Hoje: we have the power
- 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. Estrutura (style1.css) p {color: #ff0033} strong {color: red}
- 15. Organização dos conteúdos de uma página
- 20. 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+
- 21. 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
- 23. CSS 3
- 25. O que há de novo ? ❖ Animações ❖ Sombras (em elementos e textos) ❖ Gradientes ❖ Media queries ❖ 3D ❖ Interação direta com Jquery
- 26. CSS 3 continua sendo o velho CSS, só que agora ele é tipo RedBull: te dá asas.
- 27. Só tem um problema…….
- 28. O CSS 3 não funciona em muitas versões do internet explorer
- 29. 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;
- 30. É o fim da picada….
- 32. CSS Reset ❖ Arquivo que permite a padronização pura dos elementos; ❖ Uso simples; ❖ Fácil encontrar;
- 34. 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;
- 35. Exemplo #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } }
- 36. Aderir ou não a esta nova tecnologia ?
- 37. 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”;
- 39. Nunca pense em usar flash.
- 41. 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;
- 42. 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;
- 43. O mercado para este profissional
- 44. 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
- 45. Quanto ganha Média Salarial: R$ 2.690,17 Mínimo: 1.800,00 Máximo: 4.700,00
- 46. Perguntas ?
Hinweis der Redaktion
- 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