SlideShare uma empresa Scribd logo
1 de 29
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
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.0Campus Party Brasil
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)Felipe Fernandes
 
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 2015Anyssa Ferreira
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...Sergio Costa
 
CSS Básico para Webdesign
CSS Básico para WebdesignCSS Básico para Webdesign
CSS Básico para WebdesignRenato Melo
 
Caelum html-css-javascript-php
Caelum html-css-javascript-phpCaelum html-css-javascript-php
Caelum html-css-javascript-phpLindomar ...
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio FrameworkHiarison Gigante
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 

Mais procurados (20)

CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
03 windows
03   windows03   windows
03 windows
 
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
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
 
Front end - the right way
Front end - the right wayFront end - the right way
Front end - the right way
 
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 
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
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
 
Layout Fluido
Layout FluidoLayout Fluido
Layout Fluido
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
WordCamp Salvador 2014 - O essencial para o bom desempenho do seu projeto em ...
 
CSS Básico para Webdesign
CSS Básico para WebdesignCSS Básico para Webdesign
CSS Básico para Webdesign
 
Caelum html-css-javascript-php
Caelum html-css-javascript-phpCaelum html-css-javascript-php
Caelum html-css-javascript-php
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 

Destaque

Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorDiego Eis
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contextoDiego Eis
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuroDiego Eis
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming upDiego Eis
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftDiego Eis
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeDiego Eis
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webDiego Eis
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataDiego Eis
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 

Destaque (15)

Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 

Semelhante a Padrões Web e vantagens para design

Semelhante a Padrões Web e vantagens para design (20)

Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 
Produtividade
ProdutividadeProdutividade
Produtividade
 
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
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Estruturação Web
Estruturação WebEstruturação Web
Estruturação 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
 

Padrões Web e vantagens para design