SlideShare uma empresa Scribd logo
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ásicos
Fabio 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ção
Fabio 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)HTML
Fabio Moura Pereira
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fá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 Drupal
UTFPR
 
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
Gustavo 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 #wpmeetuprj
Richard 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
 
Introdução a Tecnologias Web
Introdução a Tecnologias WebIntrodução a Tecnologias Web
Introdução a Tecnologias Web
Álvaro Farias Pinheiro
 
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
Fábio Flatschart
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
Jose Berardo
 
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
Domingos Teruel
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
HTML5
HTML5HTML5
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
Fábio Flatschart
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 

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 Proiete
Comunidade 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 projeto
Vinicius Quaiato
 
Design pattern
Design patternDesign pattern
Design pattern
ricardoalesc
 
Introdução ao Git
Introdução ao Git   Introdução ao Git
Introdução ao Git
Eduardo D'Avila
 
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
Bruno Ricardo Siqueira
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Glaucio Scheibel
 
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
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Rodrigo Cândido da Silva
 
Git vs. SVN
Git vs. SVNGit vs. SVN
#1 - Git - Introdução
#1 - Git - Introdução#1 - Git - Introdução
#1 - Git - Introdução
Rodrigo Branas
 
Design Patterns com PHP
Design Patterns com PHPDesign Patterns com PHP
Design Patterns com PHP
Pablo Dall'Oglio
 
Padrões de Projeto
Padrões de ProjetoPadrões de Projeto
Padrões de Projeto
Vagner Santana
 
Webstandards
WebstandardsWebstandards
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
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
alexmacedo
 
Orientação a Objetos com PHP
Orientação a Objetos com PHPOrientação a Objetos com PHP
Orientação a Objetos com PHP
Augusto 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 edted
brunoaalves
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
Náiron Jcg
 
Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02Apresentacao 091017061004-phpapp02
Apresentacao 091017061004-phpapp02
youfoliodev
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
Ruan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
Ruan 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 web
Divulgrs
 
Web Standards
Web StandardsWeb Standards
Web Standards
George Mendonça
 
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
Luiz Antonio
 
Desenvolvimento Web
Desenvolvimento WebDesenvolvimento Web
Desenvolvimento Web
Claudio Barbosa
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos Bazilio
RicardoKratz2
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
Emerson Barros
 
Renan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven ComputaçãoRenan Dantas - Coordenador Seven Computação
Renan Dantas - Coordenador Seven Computação
We Do Logos
 
Intro desenvolvimento-web
Intro desenvolvimento-webIntro desenvolvimento-web
Intro desenvolvimento-web
Carlos Eduardo Alves
 
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
MarceloRosenbrock1
 
Web Tools Pt Br
Web Tools Pt BrWeb Tools Pt Br
Web Tools Pt Br
Paulo Mattos
 
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
Ritielle 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 Design
Gustavo Zimmermann
 
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
Campus Party Brasil
 
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
Jorge Fernandes
 
Webstandards
WebstandardsWebstandards
Webstandards
Bruno Viana
 

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
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos Bazilio
 
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
 

Último

A influência do comércio eletrônico no processo de gestão das livrarias e edi...
A influência do comércio eletrônico no processo de gestão das livrarias e edi...A influência do comércio eletrônico no processo de gestão das livrarias e edi...
A influência do comércio eletrônico no processo de gestão das livrarias e edi...
AntonioLobosco3
 
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptxSlides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
O Profeta Jeremias - A Biografia de Jeremias.pptx4
O Profeta Jeremias - A Biografia de Jeremias.pptx4O Profeta Jeremias - A Biografia de Jeremias.pptx4
O Profeta Jeremias - A Biografia de Jeremias.pptx4
DouglasMoraes54
 
Trabalho de Geografia industrialização.pdf
Trabalho de Geografia industrialização.pdfTrabalho de Geografia industrialização.pdf
Trabalho de Geografia industrialização.pdf
erico paulo rocha guedes
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
Professor Belinaso
 
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptxTreinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
MarcosPaulo777883
 
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
Eró Cunha
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
joaresmonte3
 
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdfO Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
silvamelosilva300
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
JoeteCarvalho
 
Tudo sobre a Inglaterra, curiosidades, moeda.pptx
Tudo sobre a Inglaterra, curiosidades, moeda.pptxTudo sobre a Inglaterra, curiosidades, moeda.pptx
Tudo sobre a Inglaterra, curiosidades, moeda.pptx
IACEMCASA
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
beatrizsilva525654
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
Simone399395
 
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptxSlides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
Educação trabalho HQ em sala de aula uma excelente ideia
Educação  trabalho HQ em sala de aula uma excelente  ideiaEducação  trabalho HQ em sala de aula uma excelente  ideia
Educação trabalho HQ em sala de aula uma excelente ideia
joseanesouza36
 
cidadas 5° ano - ensino fundamental 2 ..
cidadas 5° ano - ensino fundamental 2 ..cidadas 5° ano - ensino fundamental 2 ..
cidadas 5° ano - ensino fundamental 2 ..
MatheusSousa716350
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
Manuais Formação
 
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptxSlides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
LuizHenriquedeAlmeid6
 
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.pptFUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
MarceloMonteiro213738
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
LeticiaRochaCupaiol
 

Último (20)

A influência do comércio eletrônico no processo de gestão das livrarias e edi...
A influência do comércio eletrônico no processo de gestão das livrarias e edi...A influência do comércio eletrônico no processo de gestão das livrarias e edi...
A influência do comércio eletrônico no processo de gestão das livrarias e edi...
 
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptxSlides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
Slides Lição 12, CPAD, A Bendita Esperança, A Marca do Cristão, 2Tr24.pptx
 
O Profeta Jeremias - A Biografia de Jeremias.pptx4
O Profeta Jeremias - A Biografia de Jeremias.pptx4O Profeta Jeremias - A Biografia de Jeremias.pptx4
O Profeta Jeremias - A Biografia de Jeremias.pptx4
 
Trabalho de Geografia industrialização.pdf
Trabalho de Geografia industrialização.pdfTrabalho de Geografia industrialização.pdf
Trabalho de Geografia industrialização.pdf
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
 
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptxTreinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
Treinamento NR 38 - CORPO PRINCIPAL da NORMA.pptx
 
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
 
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptxAtpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
Atpcg PEI Rev Irineu GESTÃO DE SALA DE AULA.pptx
 
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdfO Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
O Mito da Caverna de Platão_ Uma Jornada em Busca da Verdade.pdf
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
 
Tudo sobre a Inglaterra, curiosidades, moeda.pptx
Tudo sobre a Inglaterra, curiosidades, moeda.pptxTudo sobre a Inglaterra, curiosidades, moeda.pptx
Tudo sobre a Inglaterra, curiosidades, moeda.pptx
 
Resumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionaisResumo de Química 10º ano Estudo exames nacionais
Resumo de Química 10º ano Estudo exames nacionais
 
Dicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de cursoDicas de normas ABNT para trabalho de conclusão de curso
Dicas de normas ABNT para trabalho de conclusão de curso
 
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptxSlides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
Slides Lição 11, Central Gospel, Os Mortos Em CRISTO, 2Tr24.pptx
 
Educação trabalho HQ em sala de aula uma excelente ideia
Educação  trabalho HQ em sala de aula uma excelente  ideiaEducação  trabalho HQ em sala de aula uma excelente  ideia
Educação trabalho HQ em sala de aula uma excelente ideia
 
cidadas 5° ano - ensino fundamental 2 ..
cidadas 5° ano - ensino fundamental 2 ..cidadas 5° ano - ensino fundamental 2 ..
cidadas 5° ano - ensino fundamental 2 ..
 
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdfUFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
UFCD_3546_Prevenção e primeiros socorros_geriatria.pdf
 
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptxSlides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
Slides Lição 12, Central Gospel, O Milênio, 1Tr24, Pr Henrique.pptx
 
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.pptFUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
FUNCAO EQUAÇÃO DO 2° GRAU SLIDES AULA 1.ppt
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
 

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