SlideShare una empresa de Scribd logo
1 de 29
Descargar para leer sin conexión
Diego Eis
       tableless.com.br



Os Padrões Web
 e suas vantagens para o design



                       visie.com.br/cursos
                                  visie.com.br
A web era sem forma.


                   visie.com.br
O W3C estava começando.


                    visie.com.br
Os desenvolvedores
estavam começando.


                 visie.com.br
Os browsers estavam
    começando.


                  visie.com.br
Escolha o browser que
     você utiliza:




                   visie.com.br
O caos se instalou.
Havia muito trabalho.


                    visie.com.br
Código ficou muito
   complexo.


                     visie.com.br
Os sites ficaram cada vez
       mais lerdos.


                       visie.com.br
Qualquer tipo de mudança
no layout era trabalhosa e
        perigosa.

                       visie.com.br
Os designers cansaram
    de trabalhar e
tomaram uma atitude.

                    visie.com.br
WaSP
           Web Standards Project

Movimento para promover os Padrões Web


                                   visie.com.br
Agora separamos a
informação da formatação.


                      visie.com.br
Informação
 Linguagens de marcação:

HTML, XHTML, XML, etc...

                           visie.com.br
Formatação
linguagem de formatação

         CSS

                          visie.com.br
CSS é a linguagem do designer.


Designer de web precisa
      saber CSS.
                            visie.com.br
Design não é nada sem
      controle.
O CSS, dá o controle.

                   visie.com.br
Deficientes visuais e motores
      são beneficiados.


                         visie.com.br
Carregamento rápido.
Menos código significa mais
      velocidade.

                       visie.com.br
Acessível para mobiles.


                      visie.com.br
Mudança total do layout sem
     trabalho algum.


                       visie.com.br
CSS Zen Garden.
1 HTML com muitas caras.


                     visie.com.br
visie.com.br
visie.com.br
visie.com.br
visie.com.br
sem esquecer dos detalhes:
  altura de linha, font, cor,
     espaçamentos, etc.

                         visie.com.br
Lembrando:
Designer de Web precisa
      saber CSS.

                     visie.com.br
Diego Eis
tableless.com.br



Obrigado!
   ;-)

               visie.com.br/cursos
                         visie.com.br

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Aula 1 Webdesign
Aula 1 WebdesignAula 1 Webdesign
Aula 1 Webdesign
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
SASS e Compass, O CSS Ninja Workflow
SASS e Compass, O CSS Ninja WorkflowSASS e Compass, O CSS Ninja Workflow
SASS e Compass, O CSS Ninja Workflow
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação Web
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Currículo Criativo
Currículo CriativoCurrículo Criativo
Currículo Criativo
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
React + sass
React + sassReact + sass
React + sass
 
Criando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-endCriando temas em PSD pensando no Front-end e Back-end
Criando temas em PSD pensando no Front-end e Back-end
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sério
 
Ferramentas de Marketing Digital | Museu iberê Camargo em Abril/2019
Ferramentas de Marketing Digital | Museu iberê Camargo em Abril/2019Ferramentas de Marketing Digital | Museu iberê Camargo em Abril/2019
Ferramentas de Marketing Digital | Museu iberê Camargo em Abril/2019
 
[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 Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 

Similar a Padrões Web e algumas vantagens para o designer

HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01
LWDCURSOS
 

Similar a Padrões Web e algumas vantagens para o designer (20)

Produtividade
ProdutividadeProdutividade
Produtividade
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0A Semântica do HTML5: a web 3.0
A Semântica do HTML5: a web 3.0
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Web Dev Camp
Web Dev CampWeb Dev Camp
Web Dev Camp
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
 
Tcc
TccTcc
Tcc
 
T CC - David William e Marce
T CC - David William e Marce T CC - David William e Marce
T CC - David William e Marce
 
Producao para web
Producao para webProducao para web
Producao para web
 
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
 
Desenvolvedor Front-End
Desenvolvedor Front-EndDesenvolvedor Front-End
Desenvolvedor Front-End
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
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
 
Como fazer um site
Como fazer um siteComo fazer um site
Como fazer um site
 
Dream 05
Dream 05Dream 05
Dream 05
 
Dream 05
Dream 05Dream 05
Dream 05
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01
 

Padrões Web e algumas vantagens para o designer