Psd to html

VOCÊ NÃO ESTÁ
SOZINHO NO MUNDO
Sua tarefa é facilitar a vida das pessoas.

QUEM?
Sua organização pode facilitar a vida do desenvolvedor.

PROJETO x EGO
Não pense somente em "pixels" ou "efeitos", pense nas
funcionalidades.

SEJA ORGANIZADO
Keep calm and "organize suas layers"

RENOMEIE TODAS AS
LAYERS
Crie nomes significativos, referentes ao layout.

PASTAS = DIV'S
agrupe as layers seguindo o mesmo padrão de div's no
HTML, separe as pastas por cores de acordo com as
sessões.

ÍCONES SÃO SERES
SENSÍVEIS.
ícones são separados por famílias e tamanhos, portanto
não os redimensione.

MESCLE OS
ELEMENTOS
Evite manipulação dos efeitos...

DOCUMENTE O LAYOUT

Crie um manual para informar ao desenvolvedor os
padrões do layout, tipografias, corpo dos textos, cores,
links e seus estados...

HTML, E AGORA?

Linguagem de marcação, usa-se tags para dar
significado ao conteúdo. ex: <p>conteúdo como
parágrafo</p>

ESTRUTURA DE BASE
<html>
<head>
<title>Título da Página</title>
</head>
<body>
Seu conteúdo aqui...
</body>
</html>

EXEMPLOS TAG'S
<p>Parágrafo</p>
<h1>Título de maior importância</h1>
<div>Divisão no conteúdo</div>
<img>

WEB STANDARDS
Web Standards é um conjunto de normas, diretrizes,
recomendações, notas, artigos, tutoriais e afins de
caráter técnico, produzidos pela W3C.
É destinado a orientar fabricantes, desenvolvedores e
projetistas para o uso de práticas que possibilitem a
criação de uma Web acessível a todos.

DIVISÃO EM CAMADAS
● HTML - Conteúdo
● CSS - Formatação
● JAVASCRIPT - Comportamento

JAVASCRIPT

HTML

CSS
(SCREEN) CSS
(PRINT)

CSS
(MOBILE)

CSS?

Designer de web precisa saber CSS.

SINTAXE CSS
seletor { propriedade:valor; }

seletor - elemento html - identificadores (class, id)
propriedade - o que será alterado
valor - valor de alteração

body{
background-color:#cccccc;
font-family: Arial;
}

EXEMPLOS
width: 960px;
height: 300px;
background-color:#CCC;
background-image: url(images/bg-body.png);
background: #CCC url(images/bg-body.png);
margin-left; 15px;
margin:10px 5px 5px 10px;
padding-top: 5px;
padding: 5px 10px 10px 5px;
float: left;
clear:both;

EXEMPLOS
position: absolute;
top:10px;
left:20px;
color: #CC9900;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
line-height: 1.5em;

POR HOJE É SÓ
PESSOAL
PERGUNTAS?

THANKS!
@abel_ribeiro
www.ribeirart.com

Psd to html

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Psd to html

Psd to html