CSS: Design responsivo- por uma web trivial

  • View
    62

  • Download
    4

Embed Size (px)

Text of CSS: Design responsivo- por uma web trivial

Por uma web trivialCSS - Design ResponsivoIntegrantesGrley AdrianoIgor DuarteVladek

Engenharia de ComputaoMe. Gustavo NascimentoSumrio

CSSCSS 3Design ResponsivoO que mais fcil otimizar ?

Neste slide feito uma comparao em termos de manuteno de arquitetura de design entre um castelo medieval (localizado na cidade de Milo na Itlia) e a catedral de Oscar NiemeyerDe que forma ela fica mais bonita ?

Representao da Atriz Sharon Stone com e sem maquiagemE agora ?

Momento risosO que CSS ?O css (cascading style sheet - Folha de estilho em cascata), uma linguagem de estilo interpretada diretamente pelo browser(navegador) tendo como funo redenrizar estruturas html. Em outras palavras.. CSS a maquiagem do HTML o que torna HTML bonito e agradvel.HTML = contedoCSS = estiloCaractersticasInterpretao de classes e propriedades diretamente pelo navegador;Aplicao de estilos somente a um conjunto de elementos, facilitando a flexibilidade de alterao do layout;Fcil modificao em pginas web;Exigncia de uma padronizao no cdigo-fonte;Rpida adequao as novas tendncias do mundo front-end;

Porque usar CSSEvita duplicao;Torna-se a manuteno muito mais fcil;Permite utilizar o contedo com diferentes estilos para os mais variados propsitos;As caractersticas juntamente com o motivo de usar css parecem ser bastante semelhantes, no entanto a abordagem de ambas ao longo da apresentao deve apresentar um carter distinto.web como plataforma

Antes a web servia para visitarmos sitezinhos.Hoje: we have the powerEstrutura

Documento de amostra C S S

Estrutura (style1.css)p {color: #ff0033}strong {color: red}A cor atribuida a tag p a cor magenta.Organizao dos contedos de uma pgina

Organizao dos arquivos

Browsers supportLong 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 formatos320 pixel Smartphones no formato retrato480 pixel Smartphones no formato paisagem768 pixel Tablets no formato retrato960 pixel Tablets no formato paisagem e alguns monitores mais antigos1200 pixel Desktops com monitores widescreen

Os tempos mudaram...

Traduo 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 ?CSS 3

Traduo:Web performance => Perfrmance de pginas webFaster Development => Rpido desenvolvimentoLess scripting => Menos cdigoBetter user experience => Melhor experincia do usurioO que h de novo ?AnimaesSombras (em elementos e textos)Gradientes Media queries3DInterao 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 no funciona em muitas verses do internet explorerO que isto interfereExcluso de usurios que possuem dificuldades em se adaptar a modernidade;Excluso de usurios fieis aos produtos ofertados pela microsoft;Excluso de sistemas legados interligados a web; o fim da picada.Pegadinha do malandroCSS ResetArquivo que permite a padronizao pura dos elementos;Uso simples;Fcil encontrar;

1 ) O CSS Reset nada mais do que um arquivo capaz de limpar os estilos padres de todos os elementos HTML que j possuem uma formatao padro2 ) Para usa-lo basta inserir um arquivo no seu site como um css normalDesign Responsivo

CaractersticasAdaptao a qualquer dispositivo;Fcil vizualizao de contedo;Pginas cada vez mais limpas;Pblico cada vez mais crescente;Uso de um design cada vez mais dinmico;

Exemplo#pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } }

Aderir ou no a esta nova tecnologia ?Com o uso do design responsivo torna-se desnecessrio o uso de ...Verses especficas para celulares;Linguagens prprias para mobiles;Subdomnios ou diretrios especficos para atender ao pblico mvel;

Nunca pense em usar flash. Estatsticas geraisEstatsticas do mundo mobileA venda de dispositivos mveis 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 populao mundial;Estatsticas do mundo financeiroO Paypal movimenta US$ 10 milhes por dia em pagamentos mobile;As vendas mundiais atravs de dispositivos mveis no eBay chegaram perto de US$ 2 bilhes em 2010;O mercado para este profissionalExigncia do mercadoHTML 5CSS 3JavascriptJqueryAjaxManuseio de algum software de edio de imagensAnlise de usabilidadeWordpress, Drupal ou JoomlaQuanto ganhaMdia Salarial: R$ 2.690,17Mnimo: 1.800,00Mximo: 4.700,00

Perguntas ?Agradecemos pela ateno