Your SlideShare is downloading. ×
Css - por Nícolas Lazarte Kaqui
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Css - por Nícolas Lazarte Kaqui

851
views

Published on


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

  • Be the first to like this

No Downloads
Views
Total Views
851
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
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. CSS – Organizado e simples Cercomp – Equipe Web Nícolas Lazarte - nicolaslazartekaqui@gmail.com
  • 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. 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. 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. 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. 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. 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. XHTML – eXtensible Hypertext Markup Language Página HTML fora do pradão XHTML
  • 9. XHTML – eXtensible Hypertext Markup Language Página HTML no pradão XHTML
  • 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. CSS – Organizado e simples Desorganizado!
  • 12. CSS – Organizado e simples Resultado
  • 13. CSS – Organizado e simples Organizado!
  • 14. CSS – Organizado e simples Resultado
  • 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. 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. CSS – Organizando
  • 18. CSS – Organizando
  • 19. CSS – Organizando
  • 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. CSS – Tableless Site feito com tabela.
  • 22. CSS – Tableless
  • 23. CSS – Tableless Site feito com tableless.
  • 24. CSS – Tableless
  • 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. 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. CSS – Tableless, como? Toda a página (Bloco 1)
  • 28. CSS – Tableless, como? Bloco 2 (Header)
  • 29. CSS – Tableless, como? Bloco 2 (Header) Bloco 3 (Main)
  • 30. CSS – Tableless, como? Bloco 2 (Header) Bloco 3 (Main) Bloco 4 (Footer)
  • 31. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 3 (Main) Bloco 4 (Footer)
  • 32. CSS – Tableless, como? Bloco 5 (Imagem de Topo) Bloco 2 (Header) Bloco 6 (Menu superior) Bloco 3 (Main) Bloco 4 (Footer)
  • 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. 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. 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. 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. 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. 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. 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. 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.