SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
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.
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.
www.iconfinder.com
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...
Psd to html
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

Contenu connexe

Tendances

Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Upando a gestão de conteúdo do wp com o advanced custom field
Upando a gestão de conteúdo do wp com o advanced custom fieldUpando a gestão de conteúdo do wp com o advanced custom field
Upando a gestão de conteúdo do wp com o advanced custom fieldDanilo Nobre
 
CSS: Introdução no Webdesign
CSS: Introdução no WebdesignCSS: Introdução no Webdesign
CSS: Introdução no WebdesignRenato Melo
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio FrameworkHiarison Gigante
 
Documentos profissionais aula 06
Documentos profissionais   aula 06Documentos profissionais   aula 06
Documentos profissionais aula 06Fernando Vieira
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de AlbuquerqueFelipe de Albuquerque
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSSTalita Pagani
 
Smacss e-css-faz-bem
Smacss e-css-faz-bemSmacss e-css-faz-bem
Smacss e-css-faz-bemJust Digital
 
Case studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store AppsCase studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store AppsComunidade NetPonto
 

Tendances (14)

Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
 
Dream 05
Dream 05Dream 05
Dream 05
 
Aula 5
Aula 5Aula 5
Aula 5
 
CSS
CSSCSS
CSS
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Upando a gestão de conteúdo do wp com o advanced custom field
Upando a gestão de conteúdo do wp com o advanced custom fieldUpando a gestão de conteúdo do wp com o advanced custom field
Upando a gestão de conteúdo do wp com o advanced custom field
 
CSS Básico
CSS BásicoCSS Básico
CSS Básico
 
CSS: Introdução no Webdesign
CSS: Introdução no WebdesignCSS: Introdução no Webdesign
CSS: Introdução no Webdesign
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Documentos profissionais aula 06
Documentos profissionais   aula 06Documentos profissionais   aula 06
Documentos profissionais aula 06
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
Smacss e-css-faz-bem
Smacss e-css-faz-bemSmacss e-css-faz-bem
Smacss e-css-faz-bem
 
Case studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store AppsCase studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store Apps
 

En vedette

Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommtHerausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommtHellbusch
 
What is a Capability URL (and why do I care?)
What is a Capability URL (and why do I care?)What is a Capability URL (and why do I care?)
What is a Capability URL (and why do I care?)Daniel Appelquist
 
What's new in web standards?
What's new in web standards?What's new in web standards?
What's new in web standards?Daniel Appelquist
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istRenate Hermanns
 

En vedette (6)

Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommtHerausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
 
Front-End (HTML)
Front-End (HTML)Front-End (HTML)
Front-End (HTML)
 
What is a Capability URL (and why do I care?)
What is a Capability URL (and why do I care?)What is a Capability URL (and why do I care?)
What is a Capability URL (and why do I care?)
 
What's new in web standards?
What's new in web standards?What's new in web standards?
What's new in web standards?
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 

Similaire à Psd to html

Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTEDBunee.io - Hiring with Intelligence
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2paulofa
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessBruno Said
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end@cristianoweb
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webCarlos Eduardo Kadu
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
Uma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrapUma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrapMatheus Soares
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-endertdc-globalcode
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Erick L. F.
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 

Similaire à Psd to html (20)

Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Uma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrapUma breve introdução a css e bootstrap
Uma breve introdução a css e bootstrap
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
I love pixels
I love pixelsI love pixels
I love pixels
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
Html aula 12 - CSS, Espaçamento de linhas, Bordas, Padding, Margem, Plano de ...
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 

Psd to html