Unb   2012.1 - dweb - c - técnicas
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Unb 2012.1 - dweb - c - técnicas

  • 477 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
477
On Slideshare
477
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb C Técnicas “Tu, porém, tens seguido a minha doutrina, modo de viver, intenção, fé, longanimidade, amor, paciência.” 2 Timóteo 3:101 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 3. DWEB - Design para Web / Carlos José Objetivo da Aulan Apresentar as técnicas para criação de layout’s na linguagem de formatação CSS.3 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 4. DWEB - Design para Web / Carlos José Agendan CSS Resetn CSS Hacks4 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 5. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Reset: î Todos os navegadores (browsers) vem com um CSS interno que traz a forma de exibição dos elementos HTML. î O CSS interno define valores para fonts, sizes, margins, paddings, etc. î O CSS interno gera anomalias que atrapalham o desenvolvimento/design, n  atécnica CSS Reset elimina a formatação do CSS padrão e possibilita um desenvolvimento com mais controle onde o desenvolvedor/design cria as suas próprias formatações sem anomalias.5 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 6. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Reset: /* CSS Reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fields et,p,blockquote,th,td{ margin:0; padding:0; } address,th{ font-style:normal; font-weight:normal; } table{ border-collapse:collapse; border-spacing:0; } caption,th{ text-align:left; } img,fieldset{ border:none; } ol,ul{ list-style:none; }6 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 7. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Reset by Eric Meyer: /* http://meyerweb.com/eric/tools/css/reset/ /* HTML5 display-role reset for older browsers */ v2.0 | 20110126 article, aside, details, figcaption, figure, License: none (public domain) footer, header, hgroup, menu, nav, section { */ display: block; } html, body, div, span, applet, object, iframe, body { h1, h2, h3, h4, h5, h6, p, blockquote, pre, line-height: 1; a, abbr, acronym, address, big, cite, code, } del, dfn, em, img, ins, kbd, q, s, samp, ol, ul { small, strike, strong, sub, sup, tt, var, list-style: none; b, u, i, center, } dl, dt, dd, ol, ul, li, blockquote, q { fieldset, form, label, legend, quotes: none; table, caption, tbody, tfoot, thead, tr, th, td, } article, aside, canvas, details, embed, blockquote:before, blockquote:after, figure, figcaption, footer, header, hgroup, q:before, q:after { menu, nav, output, ruby, section, summary, content: ; time, mark, audio, video { content: none; margin: 0; } padding: 0; table { border: 0; border-collapse: collapse; font-size: 100%; border-spacing: 0; font: inherit; } vertical-align: baseline; }7 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 8. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î O que são os CSS Hacks? n  CSS Hacks não são mais do que “gambiarras” no código do css que abusam de erros de renderização dos navegadores. n  Atualmente a falta de suporte oferecidos pelos navegadores é um dos maiores problemas no desenvolvimento de web sites para quem seguem os Padrões Web.8 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 9. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î  Para que serve? n  Quando você está criando um layout, e compara o resultado em vários navegadores, percebe que ficou certo, mas exclusivamente em um, ficou totalmente diferente. n  Se você mudar o tamanho da div, para fazer funcionar, mas se você o fizer, vai dar defeito nos outros dois navegadores que estavam certos. n  Então, O que fazer? î  Os CSS Hacks são uma forma de contornar este problema. De fato, o navegador que menos suporta os Padrões Web é o Internet Explorer 6.0 / 7.0 e 8.0 î  Os demais navegadores, tanto em suas versões para Windows quanto para outros Sistemas Operacionais possuem suporte.9 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 10. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Importante n  Sempre que for desenvolver um site de acordo com os Padrões Web, procure sempre utilizar um navegador que possua um suporte superior, como o Opera, Firefox, Chrome ou Safari. n  No fim do desenvolvimento do site, preocupe-se com a exibição no Internet Explorer. î  É neste momento que começamos a criar o CSS Hack10 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 11. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Inserindo CSS Hacks no documento HTML n  Os CSS Hacks, em primeiro lugar, devem estar separado do CSS principal, para evitar a confusão e facilitar a localização e manutenção de determinada regra. n  Aconselha-se criar um arquivo CSS a parte para comportar o CSS Hacks. Exemplo: <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/hacks.css" /> </head>11 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 12. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Comentários condicionais n  São uma ótima maneira de passar as instruções apenas para o Internet Explorer, assim ele possa ler as regras criadas especificamente para ele. n  As versões do MSIE que suportam comentários condicionais são as 5.0 até o 9.0. <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/ hacks.css" /> <![endif]-->12 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 13. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Comentários condicionais n  Também é possível passar instruções para que o conteúdo só seja lido por uma versão maior que x ou igual ou menor que x. n  As instruções são as seguintes: î  gt (greater than): maior que; î  gte (greater than or equal): maior ou igual a; î  lt (lesser than): menor que; î  lte (lesser than or equal): menor ou igual a;13 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 14. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Comentários condicionais n  Abaixopodemos ver como fica a forma de linkar o CSS para os demais navegadores e para o Internet Explorer. <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if lte IE 8]> <link rel="stylesheet" type="text/css- href="css/hacks.css" /> <![endif]--> </head>14 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 15. DWEB - Design para Web / Carlos José CSS: Técnicasn  CSS Hacks: î Exemplos de CSS Hacks n  Emgeral, os hacks devem ser escritos depois da propriedade ou regra que quer que se altere, para impedir que o valor "correto" substitua o valor da propriedade ou regra "hackeada". Exemplo: #all { width: 300px; /* propriedade declarada que é válida para todos os navegadores*/ _width: 200px; /* propriedade hackeada que só é válida para o Internet Explorer*/ } _width ß não esta errado é para escrever assim mesmo. Toda propriedade que começar escrita com underline só será interpretada pelo Internet Explorer, e ignorada pelos demais navegadores.15 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 16. DWEB - Design para Web / Carlos José Perguntas ?16 Apêndice C - Técnicas Tuesday, 10 de April de 12
  • 17. DWEB - Design para Web / Carlos José Considerações FinaisFonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;http://www.htmldog.com/; http://www.w3schools.com17 Apêndice C - Técnicas Tuesday, 10 de April de 12