Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb                                             C         ...
DWEB - Design para Web / Carlos José                                         Contato                               Carlos ...
DWEB - Design para Web / Carlos José                            Objetivo da Aulan Apresentar   as técnicas    para criaçã...
DWEB - Design para Web / Carlos José                            Agendan CSS Resetn CSS Hacks4   Apêndice C - Técnicas   ...
DWEB - Design para Web / Carlos José                                  CSS: Técnicasn  CSS    Reset:    î Todos  os naveg...
DWEB - Design para Web / Carlos José                                                            CSS: Técnicasn  CSS      ...
DWEB - Design para Web / Carlos José                                                         CSS: Técnicasn  CSS         ...
DWEB - Design para Web / Carlos José                                  CSS: Técnicasn  CSS     Hacks:    î O   que são os...
DWEB - Design para Web / Carlos José                                            CSS: Técnicasn    CSS Hacks:      î  Par...
DWEB - Design para Web / Carlos José                                           CSS: Técnicasn  CSS     Hacks:     î Impo...
DWEB - Design para Web / Carlos José                                          CSS: Técnicasn  CSS      Hacks:     î Inse...
DWEB - Design para Web / Carlos José                                       CSS: Técnicasn  CSS     Hacks:     î Comentár...
DWEB - Design para Web / Carlos José                                             CSS: Técnicasn  CSS     Hacks:     î Co...
DWEB - Design para Web / Carlos José                                       CSS: Técnicasn  CSS     Hacks:     î Comentár...
DWEB - Design para Web / Carlos José                                                     CSS: Técnicasn  CSS     Hacks:  ...
DWEB - Design para Web / Carlos José                             Perguntas                             ?16   Apêndice C - ...
DWEB - Design para Web / Carlos José                                                  Considerações FinaisFonte: Silva, Ma...
Upcoming SlideShare
Loading in...5
×

Unb 2012.1 - dweb - c - técnicas

253

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unb 2012.1 - dweb - c - técnicas

  1. 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. 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. 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. 4. DWEB - Design para Web / Carlos José Agendan CSS Resetn CSS Hacks4 Apêndice C - Técnicas Tuesday, 10 de April de 12
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. DWEB - Design para Web / Carlos José Perguntas ?16 Apêndice C - Técnicas Tuesday, 10 de April de 12
  17. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×