CSS – Organizado e simples

Cercomp – Equipe WebNí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 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

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.

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...

CSS – Desvantagens

Grande incompatibilidade com alguns navegadores.

Os navegadores tem estilo de exibição diferenciado entre eles, alguns mais elegantes outros mais rústicos.

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.

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.

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á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.

CSS – Organizado e simplesDesorganizado!

CSS – Organizado e simplesResultado

CSS – Organizado e simplesOrganizado!

CSS – Organizado e simplesResultado

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.

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.

CSS – Organizando

CSS – Organizando

CSS – Organizando

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.

CSS – TablelessSite feito com tabela.

CSS – Tableless

CSS – TablelessSite feito com tableless.

CSS – Tableless

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.

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.

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 2 (Header)

Bloco 3 (Main)

Bloco 4 (Footer)

Bloco 5 (Imagem de Topo)

CSS – Tableless, como?

Bloco 2 (Header)

Bloco 3 (Main)

Bloco 4 (Footer)

Bloco 5 (Imagem de Topo)

Bloco 6 (Menu superior)

CSS – Tableless, como?

Bloco 2 (Header)

Bloco 3 (Main)

Bloco 4 (Footer)

Bloco 5 (Imagem de Topo)

Bloco 6 (Menu superior)

Bloco 7(Menu

esquerdo)

CSS – Tableless, como?

Bloco 2 (Header)

Bloco 3 (Main)

Bloco 4 (Footer)

Bloco 5 (Imagem de Topo)

Bloco 6 (Menu superior)

Bloco 7(Menu

esquerdo)

Bloco 8(Menu direito)

CSS – Tableless, como?

Bloco 2 (Header)

Bloco 3 (Main)

Bloco 4 (Footer)

Bloco 5 (Imagem de Topo)

Bloco 6 (Menu superior)

Bloco 7(Menu

esquerdo)

Bloco 8(Menu direito)

Bloco 9(Conteudo da página)

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.

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>

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.

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).

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.