psd to html

26

Upload: abel-ribeiro

Post on 13-Jul-2015

424 views

Category:

Design


0 download

TRANSCRIPT

VOCÊ NÃO ESTÁ SOZINHO NO MUNDOSua 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 LAYERSCrie 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.

NÃO FAÇA ISSO!

FAÇA ISSO!

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

MESCLE OS ELEMENTOSEvite 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

HTML

JAVASCRIPT

CSS(SCREEN) CSS

(PRINT)

CSS(MOBILE)

CSS?

Designer de web precisa saber CSS.

SINTAXE CSSseletor { propriedade:valor; }

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

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

}

EXEMPLOSwidth: 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;

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

POR HOJE É SÓ PESSOALPERGUNTAS?

THANKS!@abel_ribeirowww.ribeirart.com