SlideShare uma empresa Scribd logo
1 de 45
Baixar para ler offline
DESVENDANDO PADRÕES PARA
   DESENVOLVIMENTO WEB, BASE PARA
                                  O SUCESSO
                              Prof. Esp. Ubiratan Zakaib do Nascimento
                                                                      onucleo@onucleo.com
                                                               http://www.onucleo.com
                                                                           Twitter: @birazn
                                                                                 @onucleo
This work is licensed under a Creative Commons Atribuição-Uso não-
comercial-Vedada a criação de obras derivadas 3.0 Unported License.
AGENDA DO TREINAMENTO

• Apresentação do facilitador

• Apresentação das ferramentas
  – NetBeans versão X

  – Navegador X

• Conhecendo WebStandards



             Técnicas e Padrões de Projeto Web
                                                 2
AGENDA DO TREINAMENTO
• Treinamento “mão na massa”
  – Implementação de Códigos XHTML
  – Validação XHTML
  – Implementação de Códigos CSS
  – Validação CSS
  – Implementando com Framework AJAX
  – Implementando Galeria de Fotos




            Técnicas e Padrões de Projeto Web
                                                3
HTML e XHTML
Conhecendo e começando
 Web Standards Projects
Como tudo começou
• A Web foi criado em 1989, por Tim Berners-Lee,
  para ser um padrão de publicação e distribuição
  de textos científicos e acadêmicos.

•   Localizador Uniforme de Recursos (URL)
•   Linguagem de Marcação de Hipertexto (HTML)
•   Protocolo de Transferência de Hipertexto (HTTP)
•   Navegador Web (Browser)

               Técnicas e Padrões de Projeto Web
                                                   5
A Bagunça
• A Web cresce comercialmente, e veem a
  necessidade de publicação de conteúdo
  diagramado, como em revistas e jornais (algo para
  o qual o HTML não possuía recursos).

• Há então a adaptação da linguagem de forma
  equivocada, com uma preocupação unicamente
  visual, esquecendo da qualidade do código.


             Técnicas e Padrões de Projeto Web
                                                 6
A Guerra dos Browsers
• Aproximadamente entre 1995 e 1999 houve a
  chamada “Guerra dos Browsers”, onde a Netscape (e
  seu Browsers de mesmo nome) e a Microsoft (com o
  seu Internet Explorer) disputavam o mercado de
  navegadores.
• Além de não darem suporte aos padrões do recém
  criado World Wide Web Consortium (W3C), ainda
  criavam seus próprios padrões, aumentando a
  bagunça.

             Técnicas e Padrões de Projeto Web
                                                 7
Editores WYSIWYG
• "O que você vê é o que você tem", ou em inglês "What You See Is
  What You Get" (WYSIWYG) são programas que lhe permitem ter a
  visualização final de um documento, enquanto o mesmo ainda é
  editado.

• Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver
  surgiram por volta de 1996, e são conhecidos por gerar um código
  sujo e muito maior que o necessário.




                 Técnicas e Padrões de Projeto Web
                                                       8
Com tudo isso...
• Cada arquivos de um site acaba sendo um
  incompreensível emaranhado de Tags com tabelas,
  formatações, scripts...

• Tudo muito maior que o necessário.

• Dessa forma, para que seja feita alguma alteração no
  site, é necessário alterar todos os arquivos... um a
  um!

              Técnicas e Padrões de Projeto Web
                                                  9
Técnicas e Padrões de Projeto Web
                                    10
Os Padrões Web
• Padrões Web ou Web Standards são um conjunto de
  normas, diretrizes, recomendações, notas, artigos,
  tutoriais e afins de caráter técnico, produzidos pelo W3C e
  destinados a orientar fabricantes, desenvolvedores e
  projetistas para o uso de práticas que possibilitem a
  criação     de     uma      Web      acessível   a    todos,
  independentemente dos dispositivos usados ou de suas
  necessidades especiais.

            XHTML – HTML – CSS – DOM – XML –...


                Técnicas e Padrões de Projeto Web
                                                    11
O que é W3C?
• W3C (World Wide Web Consortium) é um
  consórcio de empresas de tecnologia. Fundado
  por Tim Berners-Lee em 1994 para levar a Web ao
  seu potencial máximo.
• Desenvolve Recomendações abertas, até agora
  mais de 80 padrões...

                            www.w3.org

             Técnicas e Padrões de Projeto Web
                                                 12
Web Standards Project
• O Web Standards Project (WaSP) é um grupo formado em
  1998 com o objetivo de promover os Padrões Web,
  assegurando desse modo um acesso simples e com menos
  custos para todos.
• Vem encorajando e persuadindo os fabricantes de Browsers
  a fornecerem suporte aos padrões, como o XHTML, CSS,
  ECMAScript (a versão standard do JavaScript) e o DOM.

                     www.webstandards.org



               Técnicas e Padrões de Projeto Web
                                                   13
Mudança de Conceito...
• Web dividida em três camadas:
  – Conteúdo (XHTML)
  – Apresentação (CSS)
  – Comportamento (Javascript)


 Devem ser desenvolvidas de forma independente,
 porém uma complementa a outra.



             Técnicas e Padrões de Projeto Web
                                                 14
Mudança de Conceito...




Técnicas e Padrões de Projeto Web
                                    15
Vantagens da adoção dos Padrões
• Carregamento mais rápido
• Menores custos com hospedagem
• Melhor Consistência Visual
• Redesign mais barato e eficiente
• Melhores resultados nos Mecanismos de Buscas
• Maior acessibilidade e interoperabilidade

             Técnicas e Padrões de Projeto Web
                                                 16
Tableless x Web Standards
• Tableless é um termo que ficou muito popular no Brasil, e
  que acaba por confundir muita gente.
• Tableless significa (resumidamente) um site desenvolvido
  sem o antiquado uso das tabelas para organizar o layout,
  e sim usando CSS.
• Criar um site Tableless não significa que esteja seguindo
  os Padrões Web, que vão muito além de um código
  válido, e tem preocupações maiores como a Semântica e
  a Acessibilidade.

                Técnicas e Padrões de Projeto Web
                                                    17
HTML
• HTML é a abreviação para HyperText Markup Language, que
  pode ser traduzido como Linguagem de Marcação para
  Hipertexto.
• Compõe a estrutura de uma página Web através de
  etiquetas (tags) e atributos.
        Inicia                                            Finaliza
      comando           <tag> Texto </tag>               comando


                                    Conteúdo formatado

  <tag atributo=“valor” atributo2=“valor”> TEXTO </tag>

                 Técnicas e Padrões de Projeto Web
                                                         18
HTML
• O HTML sofreu várias mudanças em suas diferentes versões, com
  o objetivo de estender a linguagem para que pudesse
  acompanhar a evolução da Web e das tecnologias nela inseridas.
• Versões do HTML:
   –   HTML 2.0 (Novembro de 1995)
   –   HTML 3.2 (Janeiro de 1997)
   –   HTML 4.0 (Dezembro de 1997)
   –   HTML 4.01 (Dezembro de 1999)
   –   ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)
   –   HTML 5 (Janeiro de 2008 em Implementação quase finalizada)



                    Técnicas e Padrões de Projeto Web
                                                           19
XML: eXtensible Markup Language
• Criada para suprir a falta de flexibilidade do HTML.
• Separação do conteúdo da formatação.
• Simplicidade e Legibilidade, para humanos e
  computadores.
• Criação de arquivos para validação de estrutura.
• Interligação de bancos de dados distintos.
• Concentração na estrutura da informação.
              Técnicas e Padrões de Projeto Web
                                                  20
XHTML
• O (X)HTML, ou eXtensible Hypertext Markup
  Language, é uma reformulação da linguagem de
  marcação HTML baseada em XML.
• Pode ser interpretado por qualquer dispositivo,
  independentemente da plataforma utilizada, pois
  as marcações possuem sentido semântico para as
  máquinas.



             Técnicas e Padrões de Projeto Web
                                                 21
Um Código Semântico
• Semântica refere-se ao estudo do significado.
• Quando utilizamos cada marcação para o que ela
  realmente foi criada, estamos construindo um
  “Código Semântico”.
• Parar de pensar em “isso vem aqui, isso vai ali...” e
  pensar na “Estrutura da Informação”
• Criar uma “Marcação com Significado”.


              Técnicas e Padrões de Projeto Web
                                                  22
Marcação Semântica
• Usar <table></table> apenas para dados tabulares

• Usar <h1></h1> até <h6></h6> para títulos

• Usar <ol></ol> para Listas Ordenadas e <ul></ul> para
  Listas Não Ordenadas, seguidos do elemento <li></li>

• Usar <em></em> para Enfase, e <strong></strong>
  para Enfase Forte


              Técnicas e Padrões de Projeto Web
                                                  23
Versões do XHTML
• XHTML é uma linguagem que começou como uma
  reformulação do HTML 4.01
• usando XML 1.0:
  – XHTML 1.0 (Janeiro de 2000)
  – XHTML 1.1: (Maio de 2001)
  – XHTML 2.0: Ainda é um projeto de trabalho do W3C.
  – XHTML 5.0: é uma atualização para o XHTML 1.x, está
    sendo definido juntamente com o HTML5 no mesmo
    projeto.

              Técnicas e Padrões de Projeto Web
                                                  24
DTD: Document Type Definition
• Um padrão que define as partes de um
  documento, e descrevem como eles podem ou
  não ser usados, o que pode ser colocado em seus
  interiores, e se são ou não elementos obrigatórios
  do documento.

• Descreve com precisão a sintaxe e a gramática da
  linguagem de marcação XHTML.


             Técnicas e Padrões de Projeto Web
                                                 25
XHTML 1.0 - DOCTYPE:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

                 Técnicas e Padrões de Projeto Web
                                                        26
XHTML – Elementos obrigatórios:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML Base</title>
 </head>
 <body>
  <p>Conteúdo</p>
 </body>
</html>

               Técnicas e Padrões de Projeto Web
                                                   27
Diferenças entre XHTML e HTML

• Documentos devem ser bem formados

• Todas as tags escritas com letras minúsculas

• Tags devem estar convenientemente aninhadas

• Uso de tags de fechamento é obrigatório

• Elementos vazios devem ser fechados

             Técnicas e Padrões de Projeto Web
                                                 28
Diferenças entre XHTML e HTML
• Documentos devem ser bem formados
  • A estrutura básica do documento deve ser conforme
    mostrado a seguir:
 <html>
     <head> ... </head>
     <body>
     ...
     </body>
 </html>

              Técnicas e Padrões de Projeto Web
                                                  29
Diferenças entre XHTML e HTML
• Todas as tags devem ser escritas com letras
  minúsculas

Errado:
  <DIV><P>Aqui um texto!</P></DIV>

Correto:
  <div><p>Aqui um texto!</p></div>

              Técnicas e Padrões de Projeto Web
                                                  30
Diferenças entre XHTML e HTML
• Tags devem estar convenientemente aninhadas

Errado:
  <div><p>Aqui um <em>texto!</p></em></div>

Correto:
  <div> <p> Aqui um <em> texto! </em> </p> </div>


             Técnicas e Padrões de Projeto Web
                                                 31
Diferenças entre XHTML e HTML
• Uso de tags de fechamento é obrigatório

Errado:
  <p>Um parágrafo.

Correto:
  <p>Um parágrafo.</p>


             Técnicas e Padrões de Projeto Web
                                                 32
Diferenças entre XHTML e HTML
• Elementos vazios devem ser fechados
Errado:
<br>
 <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem”>


Correto:
<br />
<img src=“imagem.gif” alt=“uma imagem” title=“uma imagem” />


               Técnicas e Padrões de Projeto Web
                                                   33
CSS
Cascading Style Sheets
CSS: Cascading Style Sheets
• Cascading Style Sheets (ou simplesmente CSS) é uma linguagem
  de estilo utilizada para definir a apresentação de documentos
  escritos em uma linguagem de marcação, como HTML ou XML.

• Seu principal benefício é prover a separação entre o formato e o
  conteúdo de um documento.

• Pode-se definir apresentações especificas para diferentes
  dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas
  criando folhas de estilo alternativas.



                 Técnicas e Padrões de Projeto Web
                                                     35
CSS: Cascading Style Sheets
• CSS 1.0 … CSS level 1
• Em setembro de 1994 surgiu a primeira proposta
• Em dezembro de 1996 lançada como Recomendação oficial do W3C
• CSS 2.0 … CSS level 2
   – Publicada em maio de 1998
   – Ultima revisão: 12 de maio de 2008
• CSS 2.1 … CSS level 2 revision 1
• Candidata a Recomendação oficial do W3C em 23 de abril de 2009
• CSS 3.0 … CSS level 3
   – Proposta em 2001


                 Técnicas e Padrões de Projeto Web
                                                     36
Associar CSSs a documentos HTML
• Inline
   – Através do atributo style diretamente dentro de uma marcação
       <p style=“regras”>
• Interno
   – Através da tag style entre as marcações <head></head> do
     documento HTML
       <style type="text/css"> Regras </style>
• Externo
   – Criar um link (ligação) para uma página que contém os estilos.
   <link href="estilo.css" rel="stylesheet" type="text/css" />

                  Técnicas e Padrões de Projeto Web
                                                        37
CSS: Cascading Style Sheets


             Propriedade                Valor



 h1 {color : green }
Seletor                        Declaração


    Técnicas e Padrões de Projeto Web
                                                38
CSS: Seletor classe
• Uma classe define a variação de um estilo.
• É referenciado através de uma ocorrência específica de um
  elemento utilizando o atributo class.
• Serve para definir vários estilos diferentes para o mesmo
  elemento.
• Definido pelo .(ponto)

• Exemplo:
   – no CSS: h4.diferente {color:red;}
   – no XHTML: <h4 class=“diferente”>Titulo</h4>



                   Técnicas e Padrões de Projeto Web
                                                       39
CSS: Seletor id
• Semelhante ao Seletor classe.
• A diferença é que utiliza o atributo id, que serve para identificar
  exclusivamente um determinado elemento no documento.
• Definido pelo #

• Exemplo:
   – no CSS: #topo {width:900px;}
   – no XHTML: <div id=“topo”>…</div>




                   Técnicas e Padrões de Projeto Web
                                                         40
CSS: Comentários
• Assim como em qualquer linguagem de
  programação, em CSS é possível adicionar
  comentários para melhor documentar o código.

• Exemplo:
/* Comentário */




             Técnicas e Padrões de Projeto Web
                                                 41
Validadores
• Validador de HTML, XHTML, XML e
  – http://validator.w3.org


• Validador de Folhas de Estilo CSS
  – http://jigsaw.w3.org/css-validator




               Técnicas e Padrões de Projeto Web
                                                   42
FIXE BEM...
      “XHTML PARA ESTRUTURAR
                 E
CSS PARA APRESENTAR (FORMATAÇÃO).”

        Técnicas e Padrões de Projeto Web   43
Referências
• Silva, Maurício Samy – Construindo sites com CSS
  e (X)HTML. -- São Paulo: Novatec, 2008.

  www.w3.org
  www.w3schools.com
  www.maujor.com
  www.tableless.com.br
  www.cssnolanche.com.br


             Técnicas e Padrões de Projeto Web
                                                 44
Dúvidas?




Técnicas e Padrões de Projeto Web
                                    45

Mais conteúdo relacionado

Mais procurados

Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosFabio Moura Pereira
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoFabio Moura Pereira
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
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
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
Introdução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para DrupalIntrodução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para DrupalUTFPR
 
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 DesignGustavo Zimmermann
 
Wordpress além de suas fronteiras #wpmeetuprj
Wordpress além de suas fronteiras #wpmeetuprjWordpress além de suas fronteiras #wpmeetuprj
Wordpress além de suas fronteiras #wpmeetuprjRichard Barros
 
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úClécio Bachini
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDomingos Teruel
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 

Mais procurados (20)

Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Introdução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para DrupalIntrodução ao Desenvolvimento de Temas para Drupal
Introdução ao Desenvolvimento de Temas para Drupal
 
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
 
Wordpress além de suas fronteiras #wpmeetuprj
Wordpress além de suas fronteiras #wpmeetuprjWordpress além de suas fronteiras #wpmeetuprj
Wordpress além de suas fronteiras #wpmeetuprj
 
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ú
 
Introdução a Tecnologias Web
Introdução a Tecnologias WebIntrodução a Tecnologias Web
Introdução a Tecnologias Web
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
HTML5
HTML5HTML5
HTML5
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 

Destaque

Controlo de Versões Distribuído com Git - C. Augusto Proiete
Controlo de Versões Distribuído com Git - C. Augusto ProieteControlo de Versões Distribuído com Git - C. Augusto Proiete
Controlo de Versões Distribuído com Git - C. Augusto ProieteComunidade NetPonto
 
Design Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoDesign Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoVinicius Quaiato
 
Fluxo de desenvolvimento de software utilizando Git
Fluxo de desenvolvimento de software utilizando GitFluxo de desenvolvimento de software utilizando Git
Fluxo de desenvolvimento de software utilizando GitBruno Ricardo Siqueira
 
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...Fernando Geraldo Mantoan
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - IntroduçãoRodrigo Branas
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 
Exemplos de Design Patterns em Java
Exemplos de Design Patterns em JavaExemplos de Design Patterns em Java
Exemplos de Design Patterns em Javaalexmacedo
 
Orientação a Objetos com PHP
Orientação a Objetos com PHPOrientação a Objetos com PHP
Orientação a Objetos com PHPAugusto Pascutti
 

Destaque (16)

Controlo de Versões Distribuído com Git - C. Augusto Proiete
Controlo de Versões Distribuído com Git - C. Augusto ProieteControlo de Versões Distribuído com Git - C. Augusto Proiete
Controlo de Versões Distribuído com Git - C. Augusto Proiete
 
Design Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoDesign Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projeto
 
Design pattern
Design patternDesign pattern
Design pattern
 
Introdução ao Git
Introdução ao Git   Introdução ao Git
Introdução ao Git
 
Fluxo de desenvolvimento de software utilizando Git
Fluxo de desenvolvimento de software utilizando GitFluxo de desenvolvimento de software utilizando Git
Fluxo de desenvolvimento de software utilizando Git
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...
Banca: Proposta de Arquitetura de Desenvolvimento Web Baseada em PHP Utilizan...
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Git vs. SVN
Git vs. SVNGit vs. SVN
Git vs. SVN
 
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
 
Design Patterns com PHP
Design Patterns com PHPDesign Patterns com PHP
Design Patterns com PHP
 
Padrões de Projeto
Padrões de ProjetoPadrões de Projeto
Padrões de Projeto
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Exemplos de Design Patterns em Java
Exemplos de Design Patterns em JavaExemplos de Design Patterns em Java
Exemplos de Design Patterns em Java
 
Orientação a Objetos com PHP
Orientação a Objetos com PHPOrientação a Objetos com PHP
Orientação a Objetos com PHP
 

Semelhante a Desvendando padrões para desenvolvimento web, base para o sucesso

Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edtedbrunoaalves
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsNáiron Jcg
 
Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02youfoliodev
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões webDivulgrs
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalEmerson Barros
 
Renan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven ComputaçãoRenan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven ComputaçãoWe Do Logos
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Ritielle de Souza
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino SuperiorAs WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino SuperiorJorge Fernandes
 
Apresentação scriptcase-netmake
Apresentação   scriptcase-netmakeApresentação   scriptcase-netmake
Apresentação scriptcase-netmakeGustavo Lobato
 

Semelhante a Desvendando padrões para desenvolvimento web, base para o sucesso (20)

Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
A importância dos padrões web
A importância dos padrões webA importância dos padrões web
A importância dos padrões web
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
 
Renan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven ComputaçãoRenan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven Computação
 
Intro desenvolvimento-web
Intro desenvolvimento-webIntro desenvolvimento-web
Intro desenvolvimento-web
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
 
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino SuperiorAs WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
 
Webstandards
WebstandardsWebstandards
Webstandards
 
Apresentação scriptcase-netmake
Apresentação   scriptcase-netmakeApresentação   scriptcase-netmake
Apresentação scriptcase-netmake
 

Último

Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxPatriciaFarias81
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...Unidad de Espiritualidad Eudista
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfItaloAtsoc
 
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)profesfrancleite
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxtaloAugusto8
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123JaineCarolaineLima
 
FORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaFORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaBenigno Andrade Vieira
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresEu Prefiro o Paraíso.
 
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfEBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfIBEE5
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxLuzia Gabriele
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -Mary Alvarenga
 
Cruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiCruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiMary Alvarenga
 
autismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderautismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderLucliaResende1
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxLuizHenriquedeAlmeid6
 
aula 1.pptx Ementa e Plano de ensino Filosofia
aula 1.pptx Ementa e  Plano de ensino Filosofiaaula 1.pptx Ementa e  Plano de ensino Filosofia
aula 1.pptx Ementa e Plano de ensino FilosofiaLucliaResende1
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .WAGNERJESUSDACUNHA
 

Último (20)

Ressonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptxRessonancia_magnetica_basica_slide_da_net.pptx
Ressonancia_magnetica_basica_slide_da_net.pptx
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
 
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
 
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)
AS REBELIÕES NA AMERICA IBERICA (Prof. Francisco Leite)
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptx
 
Abordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdfAbordagem 1. Análise textual (Severino, 2013).pdf
Abordagem 1. Análise textual (Severino, 2013).pdf
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
 
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
Abordagens 4 (Problematização) e 5 (Síntese pessoal) do texto de Severino (20...
 
FORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de históriaFORMAÇÃO POVO BRASILEIRO atividade de história
FORMAÇÃO POVO BRASILEIRO atividade de história
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de Gestores
 
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdfEBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
EBOOK LINGUAGEM GRATUITO EUDCAÇÃO INFANTIL.pdf
 
Depende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsxDepende De Nós! José Ernesto Ferraresso.ppsx
Depende De Nós! José Ernesto Ferraresso.ppsx
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -
 
Cruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegyptiCruzadinha da dengue - Mosquito Aedes aegypti
Cruzadinha da dengue - Mosquito Aedes aegypti
 
autismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entenderautismo conhecer.pptx, Conhecer para entender
autismo conhecer.pptx, Conhecer para entender
 
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdfAbordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
 
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptxSlides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
Slides Lição 1, CPAD, O Início da Caminhada, 2Tr24, Pr Henrique.pptx
 
aula 1.pptx Ementa e Plano de ensino Filosofia
aula 1.pptx Ementa e  Plano de ensino Filosofiaaula 1.pptx Ementa e  Plano de ensino Filosofia
aula 1.pptx Ementa e Plano de ensino Filosofia
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .
 

Desvendando padrões para desenvolvimento web, base para o sucesso

  • 1. DESVENDANDO PADRÕES PARA DESENVOLVIMENTO WEB, BASE PARA O SUCESSO Prof. Esp. Ubiratan Zakaib do Nascimento onucleo@onucleo.com http://www.onucleo.com Twitter: @birazn @onucleo This work is licensed under a Creative Commons Atribuição-Uso não- comercial-Vedada a criação de obras derivadas 3.0 Unported License.
  • 2. AGENDA DO TREINAMENTO • Apresentação do facilitador • Apresentação das ferramentas – NetBeans versão X – Navegador X • Conhecendo WebStandards Técnicas e Padrões de Projeto Web 2
  • 3. AGENDA DO TREINAMENTO • Treinamento “mão na massa” – Implementação de Códigos XHTML – Validação XHTML – Implementação de Códigos CSS – Validação CSS – Implementando com Framework AJAX – Implementando Galeria de Fotos Técnicas e Padrões de Projeto Web 3
  • 4. HTML e XHTML Conhecendo e começando Web Standards Projects
  • 5. Como tudo começou • A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos. • Localizador Uniforme de Recursos (URL) • Linguagem de Marcação de Hipertexto (HTML) • Protocolo de Transferência de Hipertexto (HTTP) • Navegador Web (Browser) Técnicas e Padrões de Projeto Web 5
  • 6. A Bagunça • A Web cresce comercialmente, e veem a necessidade de publicação de conteúdo diagramado, como em revistas e jornais (algo para o qual o HTML não possuía recursos). • Há então a adaptação da linguagem de forma equivocada, com uma preocupação unicamente visual, esquecendo da qualidade do código. Técnicas e Padrões de Projeto Web 6
  • 7. A Guerra dos Browsers • Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores. • Além de não darem suporte aos padrões do recém criado World Wide Web Consortium (W3C), ainda criavam seus próprios padrões, aumentando a bagunça. Técnicas e Padrões de Projeto Web 7
  • 8. Editores WYSIWYG • "O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) são programas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado. • Editores HTML WYSIWYG como Go Live, Front Page e Dreamweaver surgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário. Técnicas e Padrões de Projeto Web 8
  • 9. Com tudo isso... • Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags com tabelas, formatações, scripts... • Tudo muito maior que o necessário. • Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos... um a um! Técnicas e Padrões de Projeto Web 9
  • 10. Técnicas e Padrões de Projeto Web 10
  • 11. Os Padrões Web • Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais. XHTML – HTML – CSS – DOM – XML –... Técnicas e Padrões de Projeto Web 11
  • 12. O que é W3C? • W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo. • Desenvolve Recomendações abertas, até agora mais de 80 padrões... www.w3.org Técnicas e Padrões de Projeto Web 12
  • 13. Web Standards Project • O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos. • Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM. www.webstandards.org Técnicas e Padrões de Projeto Web 13
  • 14. Mudança de Conceito... • Web dividida em três camadas: – Conteúdo (XHTML) – Apresentação (CSS) – Comportamento (Javascript) Devem ser desenvolvidas de forma independente, porém uma complementa a outra. Técnicas e Padrões de Projeto Web 14
  • 15. Mudança de Conceito... Técnicas e Padrões de Projeto Web 15
  • 16. Vantagens da adoção dos Padrões • Carregamento mais rápido • Menores custos com hospedagem • Melhor Consistência Visual • Redesign mais barato e eficiente • Melhores resultados nos Mecanismos de Buscas • Maior acessibilidade e interoperabilidade Técnicas e Padrões de Projeto Web 16
  • 17. Tableless x Web Standards • Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente. • Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS. • Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade. Técnicas e Padrões de Projeto Web 17
  • 18. HTML • HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto. • Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos. Inicia Finaliza comando <tag> Texto </tag> comando Conteúdo formatado <tag atributo=“valor” atributo2=“valor”> TEXTO </tag> Técnicas e Padrões de Projeto Web 18
  • 19. HTML • O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas. • Versões do HTML: – HTML 2.0 (Novembro de 1995) – HTML 3.2 (Janeiro de 1997) – HTML 4.0 (Dezembro de 1997) – HTML 4.01 (Dezembro de 1999) – ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000) – HTML 5 (Janeiro de 2008 em Implementação quase finalizada) Técnicas e Padrões de Projeto Web 19
  • 20. XML: eXtensible Markup Language • Criada para suprir a falta de flexibilidade do HTML. • Separação do conteúdo da formatação. • Simplicidade e Legibilidade, para humanos e computadores. • Criação de arquivos para validação de estrutura. • Interligação de bancos de dados distintos. • Concentração na estrutura da informação. Técnicas e Padrões de Projeto Web 20
  • 21. XHTML • O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML. • Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. Técnicas e Padrões de Projeto Web 21
  • 22. Um Código Semântico • Semântica refere-se ao estudo do significado. • Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”. • Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação” • Criar uma “Marcação com Significado”. Técnicas e Padrões de Projeto Web 22
  • 23. Marcação Semântica • Usar <table></table> apenas para dados tabulares • Usar <h1></h1> até <h6></h6> para títulos • Usar <ol></ol> para Listas Ordenadas e <ul></ul> para Listas Não Ordenadas, seguidos do elemento <li></li> • Usar <em></em> para Enfase, e <strong></strong> para Enfase Forte Técnicas e Padrões de Projeto Web 23
  • 24. Versões do XHTML • XHTML é uma linguagem que começou como uma reformulação do HTML 4.01 • usando XML 1.0: – XHTML 1.0 (Janeiro de 2000) – XHTML 1.1: (Maio de 2001) – XHTML 2.0: Ainda é um projeto de trabalho do W3C. – XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto. Técnicas e Padrões de Projeto Web 24
  • 25. DTD: Document Type Definition • Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento. • Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML. Técnicas e Padrões de Projeto Web 25
  • 26. XHTML 1.0 - DOCTYPE: Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Técnicas e Padrões de Projeto Web 26
  • 27. XHTML – Elementos obrigatórios: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML Base</title> </head> <body> <p>Conteúdo</p> </body> </html> Técnicas e Padrões de Projeto Web 27
  • 28. Diferenças entre XHTML e HTML • Documentos devem ser bem formados • Todas as tags escritas com letras minúsculas • Tags devem estar convenientemente aninhadas • Uso de tags de fechamento é obrigatório • Elementos vazios devem ser fechados Técnicas e Padrões de Projeto Web 28
  • 29. Diferenças entre XHTML e HTML • Documentos devem ser bem formados • A estrutura básica do documento deve ser conforme mostrado a seguir: <html> <head> ... </head> <body> ... </body> </html> Técnicas e Padrões de Projeto Web 29
  • 30. Diferenças entre XHTML e HTML • Todas as tags devem ser escritas com letras minúsculas Errado: <DIV><P>Aqui um texto!</P></DIV> Correto: <div><p>Aqui um texto!</p></div> Técnicas e Padrões de Projeto Web 30
  • 31. Diferenças entre XHTML e HTML • Tags devem estar convenientemente aninhadas Errado: <div><p>Aqui um <em>texto!</p></em></div> Correto: <div> <p> Aqui um <em> texto! </em> </p> </div> Técnicas e Padrões de Projeto Web 31
  • 32. Diferenças entre XHTML e HTML • Uso de tags de fechamento é obrigatório Errado: <p>Um parágrafo. Correto: <p>Um parágrafo.</p> Técnicas e Padrões de Projeto Web 32
  • 33. Diferenças entre XHTML e HTML • Elementos vazios devem ser fechados Errado: <br> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem”> Correto: <br /> <img src=“imagem.gif” alt=“uma imagem” title=“uma imagem” /> Técnicas e Padrões de Projeto Web 33
  • 35. CSS: Cascading Style Sheets • Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. • Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. • Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas. Técnicas e Padrões de Projeto Web 35
  • 36. CSS: Cascading Style Sheets • CSS 1.0 … CSS level 1 • Em setembro de 1994 surgiu a primeira proposta • Em dezembro de 1996 lançada como Recomendação oficial do W3C • CSS 2.0 … CSS level 2 – Publicada em maio de 1998 – Ultima revisão: 12 de maio de 2008 • CSS 2.1 … CSS level 2 revision 1 • Candidata a Recomendação oficial do W3C em 23 de abril de 2009 • CSS 3.0 … CSS level 3 – Proposta em 2001 Técnicas e Padrões de Projeto Web 36
  • 37. Associar CSSs a documentos HTML • Inline – Através do atributo style diretamente dentro de uma marcação <p style=“regras”> • Interno – Através da tag style entre as marcações <head></head> do documento HTML <style type="text/css"> Regras </style> • Externo – Criar um link (ligação) para uma página que contém os estilos. <link href="estilo.css" rel="stylesheet" type="text/css" /> Técnicas e Padrões de Projeto Web 37
  • 38. CSS: Cascading Style Sheets Propriedade Valor h1 {color : green } Seletor Declaração Técnicas e Padrões de Projeto Web 38
  • 39. CSS: Seletor classe • Uma classe define a variação de um estilo. • É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class. • Serve para definir vários estilos diferentes para o mesmo elemento. • Definido pelo .(ponto) • Exemplo: – no CSS: h4.diferente {color:red;} – no XHTML: <h4 class=“diferente”>Titulo</h4> Técnicas e Padrões de Projeto Web 39
  • 40. CSS: Seletor id • Semelhante ao Seletor classe. • A diferença é que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento. • Definido pelo # • Exemplo: – no CSS: #topo {width:900px;} – no XHTML: <div id=“topo”>…</div> Técnicas e Padrões de Projeto Web 40
  • 41. CSS: Comentários • Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código. • Exemplo: /* Comentário */ Técnicas e Padrões de Projeto Web 41
  • 42. Validadores • Validador de HTML, XHTML, XML e – http://validator.w3.org • Validador de Folhas de Estilo CSS – http://jigsaw.w3.org/css-validator Técnicas e Padrões de Projeto Web 42
  • 43. FIXE BEM... “XHTML PARA ESTRUTURAR E CSS PARA APRESENTAR (FORMATAÇÃO).” Técnicas e Padrões de Projeto Web 43
  • 44. Referências • Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008. www.w3.org www.w3schools.com www.maujor.com www.tableless.com.br www.cssnolanche.com.br Técnicas e Padrões de Projeto Web 44
  • 45. Dúvidas? Técnicas e Padrões de Projeto Web 45