CSS – Organizado e simples
            Cercomp – Equipe Web
Nícolas Lazarte - nicolaslazartekaqui@gmail.com
CSS – O nascimento

   Surge o HTML para troca de informações científicas;
   O HTML difunde-se entre grupos de não cien...
CSS – Apresentação

   Cascading Style Sheets (ou simplesmente CSS) é
    uma linguagem de estilo utilizada para definir ...
CSS – Vantagens

   Realiza a separação entre o formato e o conteúdo de
    um documento.
   Controle da apresentação a ...
CSS – Desvantagens

   Grande incompatibilidade com alguns navegadores.
   Os navegadores tem estilo de exibição diferen...
CSS – Padrões

   Não existe uma maneira padrão de desenvolver uma
    folha de estilo para uma documento.
   A W3C crio...
XHTML – eXtensible Hypertext Markup Language


   O XHTML é uma reformulação da linguagem de
    marcação HTML, baseada e...
XHTML – eXtensible Hypertext Markup Language




              Página HTML fora do pradão XHTML
XHTML – eXtensible Hypertext Markup Language




              Página HTML no pradão XHTML
CSS – Organizado e simples

   Por não existir um padrão de desenvolvimento de
    folhas de estilo, o CSS de algumas pág...
CSS – Organizado e simples
             Desorganizado!
CSS – Organizado e simples
             Resultado
CSS – Organizado e simples
             Organizado!
CSS – Organizado e simples
             Resultado
CSS – Organizando

   Para poder usar o CSS de maneira organizada
    devemos antes de tudo saber quando usar o seletor
 ...
CSS – Organizando

   É recomendado também que sempre que um estilo for
    utilizado apenas por um elemento, este estilo...
CSS – Organizando
CSS – Organizando
CSS – Organizando
CSS – Tableless

   Tableless é uma forma de desenvolvimento de sites
    que não utiliza tabelas para disposição de cont...
CSS – Tableless
            Site feito com tabela.
CSS – Tableless
CSS – Tableless
           Site feito com tableless.
CSS – Tableless
CSS – Tableless vantagens

   Adotar este padrão de desenvolvimento também
    facilita a separação da camada de apresent...
CSS – Tableless, como?

   Para desenvolver um layout utilizando o modelo
    tableless, devemos primeiramente começar a ...
CSS – Tableless, como?




           Toda a página (Bloco 1)
CSS – Tableless, como?


            Bloco 2 (Header)
CSS – Tableless, como?


            Bloco 2 (Header)




             Bloco 3 (Main)
CSS – Tableless, como?


            Bloco 2 (Header)




             Bloco 3 (Main)




            Bloco 4 (Footer)
CSS – Tableless, como?

          Bloco 5 (Imagem de Topo)
              Bloco 2 (Header)




               Bloco 3 (Main...
CSS – Tableless, como?

          Bloco 5 (Imagem de Topo)
              Bloco 2 (Header)

           Bloco 6 (Menu superi...
CSS – Tableless, como?

                Bloco 5 (Imagem de Topo)
                    Bloco 2 (Header)

                 Bl...
CSS – Tableless, como?

                Bloco 5 (Imagem de Topo)
                    Bloco 2 (Header)

                 Bl...
CSS – Tableless, como?

                Bloco 5 (Imagem de Topo)
                    Bloco 2 (Header)

                 Bl...
CSS – Tableless, como?

   Desenvolver um layout pensando em blocos facilita na
    hora de desenvolver o CSS da página.
...
CSS – Tableless, como?

<div id=”tudo”>
  <div id=”topo”>
    <div id=”imagemtopo”>...</div>
    <div id=”menutopo”>...</d...
CSS – E os problemas?

   O maior problema do CSS é a incompatibilidade dos
    navegadores, mas esse pode ser resolvido ...
CSS – E os problemas?

   Outro problema são as dimensões, trabalhar com
    porcentagens pode parecer uma boa idéia por ...
CSS – Conclusão

   O CSS ao mesmo tempo que pode ser organizado
    pode ser totalmente desorganizado.
   Com o CSS é p...
Próximos SlideShares
Carregando em…5
×

Css - por Nícolas Lazarte Kaqui

1.126 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.126
No SlideShare
0
A partir de incorporações
0
Número de incorporações
90
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Css - por Nícolas Lazarte Kaqui

  1. 1. CSS – Organizado e simples Cercomp – Equipe Web Nícolas Lazarte - nicolaslazartekaqui@gmail.com
  2. 2. CSS – O nascimento  Surge o HTML para troca de informações científicas;  O HTML difunde-se entre grupos de não cientistas;  Os documentos web assumem um caráter geral;  As necessidades de "incrementar" visualmente os documentos;  O aparecimento de novas tags e atributos;  O uso de tabelas;  O "caos";  O nascimento das CSS. Mauricio Samy Silva - http://maujor.com/palestras/visaocss/visaocss.html
  3. 3. CSS – Apresentação  Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
  4. 4. CSS – Vantagens  Realiza a separação entre o formato e o conteúdo de um documento.  Controle da apresentação a partir de um único arquivo.  Redução do tempo de carga do documento.  Simplificação do trabalho de manutenção.  Amigável aos softwares de busca e indexação.  Facilitação ao cumprimento dos itens de acessibilidade.  E, muito mais...
  5. 5. CSS – Desvantagens  Grande incompatibilidade com alguns navegadores.  Os navegadores tem estilo de exibição diferenciado entre eles, alguns mais elegantes outros mais rústicos.
  6. 6. CSS – Padrões  Não existe uma maneira padrão de desenvolver uma folha de estilo para uma documento.  A W3C criou uma padrão de desenvolvimento de documentos denominado XHTML.
  7. 7. XHTML – eXtensible Hypertext Markup Language  O XHTML é uma reformulação da linguagem de marcação HTML, baseada em XML.  Combina as tags de marcação HTML com regras da XML.  Sua intenção é melhorar a acessibilidade.  Ou seja, determina que no documento HTML a estilização das tags sejá feita toda atráves de folhas de estilo, pondo em desuso os parametros de estilo de algumas tags.  O HTML5 já segue esse padrão.
  8. 8. XHTML – eXtensible Hypertext Markup Language Página HTML fora do pradão XHTML
  9. 9. XHTML – eXtensible Hypertext Markup Language Página HTML no pradão XHTML
  10. 10. CSS – Organizado e simples  Por não existir um padrão de desenvolvimento de folhas de estilo, o CSS de algumas páginas web e totalmente desorganizado e confuso.  Um CSS organizado e simples faz com que ele tenha uma manutenção mais rápida e seja facilmente modificado sem afetar outros elementos.
  11. 11. CSS – Organizado e simples Desorganizado!
  12. 12. CSS – Organizado e simples Resultado
  13. 13. CSS – Organizado e simples Organizado!
  14. 14. CSS – Organizado e simples Resultado
  15. 15. CSS – Organizando  Para poder usar o CSS de maneira organizada devemos antes de tudo saber quando usar o seletor de ID e o seletor de CLASSES.  No desenvolvimento do arquivo HTML é recomendado usar o seletor ID em elementos que não tem um tipo de uso específico como o <div> e em um elemento que pode ter muitos tipos de uso como no caso do <p> para dar assim uma identidado ao elemento.  Já o seletor de CLASSES deve ser usado para atribuir uma ou várias características a um ou mais elementos.
  16. 16. CSS – Organizando  É recomendado também que sempre que um estilo for utilizado apenas por um elemento, este estilo seja específico a ele, evitando assim um estilo genérico.
  17. 17. CSS – Organizando
  18. 18. CSS – Organizando
  19. 19. CSS – Organizando
  20. 20. CSS – Tableless  Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C. Para a disposição da página o recomendado seria usar CSS.  A W3C também não desaprova o uso de tabelas, desde que elas sejam utilizadas para tabular dados e não para formatar layout. Muitos navegadores travam ou exibem incorretamente formatações usando tabelas.
  21. 21. CSS – Tableless Site feito com tabela.
  22. 22. CSS – Tableless
  23. 23. CSS – Tableless Site feito com tableless.
  24. 24. CSS – Tableless
  25. 25. CSS – Tableless vantagens  Adotar este padrão de desenvolvimento também facilita a separação da camada de apresentação da aplicação para o arquivo de estilo (CSS).  Diminuição de Banda. Os navegadores modernos cacheam arquivos css e javascripts, se a maneira que o site será visualizado é guardado em um css (padrão tableless) então o arquivo será cacheado após o primeiro acesso e todos os acessos seguintes não carregarão este arquivo, carregarão apenas o conteúdo (texto) do site.  Manutenção.
  26. 26. CSS – Tableless, como?  Para desenvolver um layout utilizando o modelo tableless, devemos primeiramente começar a pensar em blocos.  Um layout é basicamente composto por varios blocos.  Cada bloco terá se necessário vários blocos dentro dele.  Sempre irá existir ao menos um bloco, a página toda.
  27. 27. CSS – Tableless, como? Toda a página (Bloco 1)
  28. 28. CSS – Tableless, como? Bloco 2 (Header)
  29. 29. CSS – Tableless, como? Bloco 2 (Header) Bloco 3 (Main)
  30. 30. CSS – Tableless, como? Bloco 2 (Header) Bloco 3 (Main) Bloco 4 (Footer)
  31. 31. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 3 (Main) Bloco 4 (Footer)
  32. 32. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 6 (Menu superior) Bloco 3 (Main) Bloco 4 (Footer)
  33. 33. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 6 (Menu superior) Bloco 7 (Menu Bloco 3 (Main) esquerdo) Bloco 4 (Footer)
  34. 34. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 6 (Menu superior) Bloco 7 Bloco 8 (Menu Bloco 3 (Main) (Menu esquerdo) direito) Bloco 4 (Footer)
  35. 35. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 6 (Menu superior) Bloco 7 Bloco 8 Bloco 9 (Menu Bloco 3 (Main) (Menu (Conteudo da página) esquerdo) direito) Bloco 4 (Footer)
  36. 36. CSS – Tableless, como?  Desenvolver um layout pensando em blocos facilita na hora de desenvolver o CSS da página.  Cada bloco será uma área na página, dessa maneira cada bloco pode ser representado no HTML como uma <div>.  No HTML5 já existem tags para esses blocos.  Essa organização permite que o código se torne mais facil de ser manuseado e mais fácil de ser trabalhado.
  37. 37. CSS – Tableless, como? <div id=”tudo”> <div id=”topo”> <div id=”imagemtopo”>...</div> <div id=”menutopo”>...</div> </div> <div id=”meio”> <div id=”menuesquero”>...</div> <div id=”conteudo”>...</div> <div id=”menudireito”>...</div> </div> <div id=”rodape”>...</div> </div>
  38. 38. CSS – E os problemas?  O maior problema do CSS é a incompatibilidade dos navegadores, mas esse pode ser resolvido com os testes nos navegadores.  É recomendado que quando se desenvolve um estilo, ele seja testado nos navegadores IE6, Firefox e Opera (se póssivel Google Chrome).  Para evitar futuros problemas é recomendado tambem desenvolver estilos expansiveis, ou seja sempre pensando que vai existir mais conteúdo do que já existe.
  39. 39. CSS – E os problemas?  Outro problema são as dimensões, trabalhar com porcentagens pode parecer uma boa idéia por ter assim um estilo que sempre acompanhará o tamanho da tela, MAS se o conteudo todo não for trabalhado para esse tipo de redimensionamento, a boa idéia se torna a pior de todas.  Nesses cassos é sempre recomendado ter as dimensões do layout estáticos.  Sempre pensar no pior caso (1024x768).
  40. 40. CSS – Conclusão  O CSS ao mesmo tempo que pode ser organizado pode ser totalmente desorganizado.  Com o CSS é possivel que todas as questões de aparência sejam tratados sem ter que fazer isso no documento HTML.  Uma página estilizada por um CSS organizado, faz com que seja de rápido acesso, deixando mais usavel para o usuário e mais legível para o desenvolvedor.

×