From 057e6bbb09205b8acb4dd4acfcfc616dc66772c2 Mon Sep 17 00:00:00 2001 From: Diego Eis Date: Wed, 11 Dec 2013 14:02:54 -0200 Subject: [PATCH] =?UTF-8?q?Escrevendo=20um=20texto=20b=C3=A1sico=20sobre?= =?UTF-8?q?=20desenvolvimento=20por=20camadas.=20Issue=20#12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/obasico/desenvolvimentocamadas.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/manual/obasico/desenvolvimentocamadas.html b/manual/obasico/desenvolvimentocamadas.html index 822be48..52fd60f 100644 --- a/manual/obasico/desenvolvimentocamadas.html +++ b/manual/obasico/desenvolvimentocamadas.html @@ -7,5 +7,22 @@

Desenvolvimento por camadas

Separando a informação, formatação e comportamento

-

Esta página está em construção. Volte em breve ou ajude a completá-la!

+ +

Basicamente existem três separações no desenvolvimento web: Informação, que fica com o código HTML, onde você vai dar significado à informação. Formatação, que fica com mo CSS, que é como você vai deixar bonito toda a informação marcada com HTML. E por fim a camada de Comportamento, que é como você vai controlar elementos do HTML com Javascript e seus frameworks.

+ +

O HTML vai servir para marcar sua informação dando significado a ela. Se você marca uma frame com a tag <H1>, você está dizendo para leitores de telas para cegos e os browsers que aquela frase se trata de um título importante. Você deu significado à este pedaço de texto.

+ +

Logo depois você precisará deixar esse título com uma cor diferente, com um background bonito e uma font legal. Aí você entra com o CSS para fazer esse trabalho. Essa formatação é importante por que você precisa deixar o site do jeito que o Designer quer. Lembre-se que aqui você só modifica o visual do elemento e não o significado dele.

+ +

Essa separação garante que ao modificar o código CSS você não estrague o trabalho já feito no HTML. Os códigos estão totalmente separados e você consegue manter a organização sob controle, mantendo cada código em seu devido lugar.

+

Por isso, evite inserir código CSS direto no HTML, como o exemplo abaixo:

+ +
+<h1 style="background-color: orange;">Título com fundo laranja</h1>
+
+ +

Isso faz com que você suje seu código HTML e não deixe seu código CSS centralizado em um lugar. Suponha que você tenha outros títulos com o fundo laranja e queira mudar todos para outra cor, você terá que encontrar cada um deles dentro do seu projeto e mudar manualmente cada um. Com o desenvolvimento em camadas você não tem problemas assim.

+ +

Este é o conhecimento básico sobre camadas client-side que você pode ter.

+