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

on

  • 460 views

 

Statistics

Views

Total Views
460
Views on SlideShare
460
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Unb 2012.1 - dweb - c - técnicas Presentation 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