SlideShare a Scribd company logo
1 of 59
Download to read offline
Pacote Web
Desenvolvendo com Padrões Web
               Módulo 1 - HTML




                 Guilherme Cavalcanti
     contato@guilhermecavalcanti.com

                     @guiocavalcanti
Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil.
Para ver uma cópia desta licença, visite
http://creativecommons.org/licenses/by/2.5/br/
Roteiro
• Noções gerais
• O que são Padrões Web
• Importância dos Padrões Web
    – 3 camadas do desenvolvimento
•   Ferramentas
•   HTML e XHTML
•   Validação
•   Hello World
•   Estrutura Básica
    –   DOCTYPE
    –   HTML
    –   HEAD
    –   BODY
Noções Gerais
O que são Padrões Web?
• Web
  – Troca de livre de informações
  – Acessível por qualquer pessoa no planeta
• Guerra dos Browsers
  – Netscape Vs. Microsoft
  – Falta de padrões
  – Usuário saí perdendo
• Gambiarras
  – Tentativa de reduzir incompatibilidade entre browsers
O que são Padrões Web?
• W3C
  – World Wide Web Consortium, 1994
  – Tentativa de criar padrões para Web
     • HTML, CSS, XML, XSLT
  – Resolver problemas de incopatibilidade
  – Uma página deve ser exibida de maneira
    semelhante independente de qual dispositivo
    esteja visualizando.
Analogia
    •   Tomadas e Conectores
    •   CDs de Drivers
    •   USB
    •   Etc, etc, etc
3 camadas

Comportamento      JavaScript




 Formatação
                      CSS



  Informação         HTML
Importância dos Padrões:
             Produtividade
• Desenvolvimento tradicional
  – Fases seqüenciais
  – Fases interdependentes
• Resultados
  – Ninguém pode mudar de ideia
  – Necessidade de programador e designer
Desevolvimento Web Client-side - HTML
Importância dos Padrões:
             Produtividade
• Desenvolvimento com Padrões
  – Fases paralelas
  – Fases independentes
• Resultado
  – Mudanças rápidas
  – Velocidade
  – Cliente feliz
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
Ferramentas
•   Escrever o código
•   Perigo do autocompletar
•   Imitar o usuário
•   Testar, testar, testar
Ferramentas
• Linux
   – Gedit + montes de plugins
• Windows
   – NotePad++
     http://sourceforge.net/projects/notepadpluspe/
   – EditPlus
     http://www.editplus.com/download.html
• MacOS
   – TextMate
• Firefox
   – FireBug
   – Web Development Toolbar
   – Validação W3C
HTML/XHTML
• Linguagem de Marcação
• Compostas por tags (marcadores)
• Dá significado ao conteúdo e o agrupa em
  blocos
Tags
• Responsáveis por delimitar um “pedaço” de
  conteúdo




                           http://pastie.org/836704
Hello World




      http://pastie.org/836736
Validação
Validação




            http://pastie.org/836717
DOCTYPE
• Diz ao browser que tipo de HTML está sendo
  enviado
html
• HTML                      • Atributos
  – <html></html>             – xmlns
  – Delimita um documento       http://www.w3.org/199
    HTML                        9/xhtml
  – Todas as tags HTML        – xml:lang
    estão dentro dela            pt-br
                              – lang
                                 pt-br
head
• HEAD
  – <head></head>
  – Define informações sobre o documento
    • Título
    • Palavras-chave (metadados)
    • JavaScript/CSS
head > title
• title
   – <title>Título da Página</title>
   – Só pode ser definido uma vez no documento
   – Título que aparece na janela
   – Nome que fica guardado quando a página é
     adicionada aos favoritos
   – Aparece nos resultados de busca do Google
head > meta
• meta
  – <meta />
  – Informações sobre os dados
  – Não é exibida para o usuário
  – Usada por mecanismos de busca
  – Não precisa ser fechada
head > meta
• Atributos
Attribute     Value          Description
content       text           Specifies the content of the meta
                             information
name          author         Provides a name for the information
              description    in the content attribute
              keywords
              generator
              revised
              others
body
• body
  – <body></body>
  – É o corpo do documento
  – Contem o que vai ser mostrado ao usuário (textos,
    imagens, links)
  – Parte mais importante de um documento HTML
h1, h2, h3, h4...
• Tags de títulos de texto
  – <h1>Seção 1 do documento</h1>
  – H de heading
  – Organização do texto em seções
  – Semelhante a um livro
  – Muito importante para mecanismos de busca
     • Deve condizer com o conteúdo que a segue
p
• Define um parágrafo de texto
  – <p>Parágrafo</p>
  – Para nós é mais uma ferramenta para formatar o
    texto.




                                    http://pastie.org/836928
img
• Inclui uma imagem no documento
      – <img src=“url” alt=“texto alternativo” />

Attribute      Value       Description
alt            text        Specifies an alternate text for an image
src            URL         Specifies the URL of an image
longdesc       URL         Specifies the URL to a document that contains a
                           long description of an image
a
• Link, hyperlink ou ancora para outro
  documento
        – Atribui não linearidade a Web (hypertexto)



                                                         http://pastie.org/836943

Attribute       Value       Description
accesskey       character   Specifies a keyboard shortcut to access an
                            element
title           text        Specifies extra information about an element
 href            URL        Specifies the destination of a link
table
• Define uma tabela
  – <table></table>
  – Precisa conter pelo menos um tr, th ou td
Table > tr
• Define uma linha da tabela
  – <table></table>
  – Sozinha não faz grandes coisas
Table > thead e tfoot
• Define uma tabela
  – <table></table>
  – Sozinha não faz grandes coisas
td
• <td></td>                   • Atributos
  – Representa células numa     – colspan: mescla células
    tabela                        numa mesma linha
  – Se nenhum “span” for        – rowspan: mescla células
    utilizado, deve haver a       numa mesma coluna
    mesma quantidade em
    cada linha
td
• Células mescladas numa mesma linha




• Células mescladas numa mesma coluna           http://pastie.org/838290




                                http://pastie.org/838291
ul, ol
• <ul></ul>
  – Lista não ordenada (u de unorded)
  – Pode possuir vários <li></li>
• <ol></ol>
  – Lista ordenada (o de orded)
  – Também possui vários <li></li>
ul, ol




         http://pastie.org/838294




         http://pastie.org/838296
Listas Aninhadas




            http://pastie.org/838297
form
• <form action=“” method=“”></form>
  – Permitem o envio de dados entre cliente e
    servidor
  – O servidor precisa ter um controlador aguardando
    a submissão dos dados
     • PHP, ASP.NET, Python, Java, Ruby...
  – Aplicações
     • Formulários de contato, login/senha, cadastro de
       usuário, busca, etc
Comentários sobre GET e POST
• GET
  – Deve ser usado quando a submissão não irá
    acarretar numa mudança de estado no servidor
  – Dados visíveis pela URL
• POST
  – Acarreta mudança de estado (consulta no banco
    de dados, envio de e-mail)
  – Os dados são enviados de maneira transparente
form
• Atributos
  – action
     • URL para o controlador responsável por receber os
       dados
  – method
     • Método de submissão
     • Pode ser GET ou POST
form
• Sintaxe básica



                          http://pastie.org/838308
form > inputs
• Representam as entradas que serão enviadas
  ao servidor
 Attribute   Value      Description
 type        button     Specifies the type of an input element
             checkbox
             file
             hidden
             image
             password
             radio
             reset
             submit
             text
 value       value      Specifies the value of an input element
form > inputs
• Exemplo de login/senha (inseguro)




                                      http://pastie.org/838316

• Exemplo de login/senha (mais seguro)



                                      http://pastie.org/838318
form > select
• form de busca com categorias




                             http://pastie.org/838325
form > label
• Adiciona labels (etiquetas) aos campos
   – Atributo for especifica qual é o input alvo de um label
   – Deve ser sempre usado em conjunto com um input ou
     select




                                               http://pastie.org/838329
form > checkbox e radio




                http://pastie.org/838344
form > input
Attribute   Value         Description
checked     checked       Specifies that an input element should be preselected
                          when the page loads (for type="checkbox" or
                          type="radio")
disabled    disabled      Specifies that an input element should be disabled when
                          the page loads
name        name          Specifies a name for an input element
readonly    readonly      Specifies that an input field should be read-only (for
                          type="text" or type="password")
src         URL           Specifies the URL to an image to display as a submit
                          button
form > fieldset, legend
• Organizar campos em grupos
  – Usabilidade




                               http://pastie.org/838354
em
• <em>Texto</em>
• Texto enfatizado
• Geralmente usado para aplicar negrito
address
• <address>Rua Sempre Viva</address>
• Tag para definir endereços
• O Google Maps utiliza
hr
• <hr/>
• Usado como separador de conteúdo
Gerador de metatags




 http://www.iwebtool.com/metatags_generator
div, span
• Quase modificam a apresentação
• Servem para agrupar outros elementos
  – Geralmente relacionados entre si
• São de grande ajuda na hora de aplicar os
  estilos
div
• <div> é usado para agrupar um ou mais
  elementos nível de bloco
• Pode conter elementos de bloco
span
• O elemento <span> é um elemento neutro e
  que não adiciona qualquer tipo de semântica
  ao documento.
• Não pode conter elementos de bloco (p, table,
  div...)
Gerador de metatags




                                     http://pastie.org/838366

• Ferramenta mais completa
   – http://www.addme.com/meta.htm
Comentários

More Related Content

What's hot

Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSSMauro Pereira
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSSDesevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSSGuilherme
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1Flavia Siqueira
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Uni Buscapé Company
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5lucampos_si
 
HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3 lucampos_si
 
Wicket - Brincando com Objetos
Wicket - Brincando com ObjetosWicket - Brincando com Objetos
Wicket - Brincando com ObjetosBruno Borges
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSSKako Botasso
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoTiago Antônio da Silva
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4lucampos_si
 

What's hot (18)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Programação Web - CSS
Programação Web - CSSProgramação Web - CSS
Programação Web - CSS
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSSDesevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSS
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
 
Aula de DTD Definição do Tipo de Documento
Aula de DTD Definição do Tipo de DocumentoAula de DTD Definição do Tipo de Documento
Aula de DTD Definição do Tipo de Documento
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3
 
Wicket - Brincando com Objetos
Wicket - Brincando com ObjetosWicket - Brincando com Objetos
Wicket - Brincando com Objetos
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e VídeoCurso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
Curso HTML 5 - Aula com Formulários, Imagens, Áudio e Vídeo
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4
 
HTML
HTML HTML
HTML
 

Viewers also liked

Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 
Introdução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPIntrodução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPManoel Afonso
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - TeoriaCentro Paula Souza
 
Apresentação da Linguagem de Programação PHP
Apresentação da Linguagem de Programação PHPApresentação da Linguagem de Programação PHP
Apresentação da Linguagem de Programação PHPLorranna Machado
 
Atendimento Telefonico
Atendimento TelefonicoAtendimento Telefonico
Atendimento TelefonicoKavaisver
 

Viewers also liked (7)

JavaScript - A Linguagem
JavaScript - A LinguagemJavaScript - A Linguagem
JavaScript - A Linguagem
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
Introdução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSPIntrodução ao Desenvolvimento de aplicações WEB com JSP
Introdução ao Desenvolvimento de aplicações WEB com JSP
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - Teoria
 
Apresentação da Linguagem de Programação PHP
Apresentação da Linguagem de Programação PHPApresentação da Linguagem de Programação PHP
Apresentação da Linguagem de Programação PHP
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Atendimento Telefonico
Atendimento TelefonicoAtendimento Telefonico
Atendimento Telefonico
 

Similar to Desevolvimento Web Client-side - HTML

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
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewIsrael Messias
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Helder da Rocha
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoLuisFalco8
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2Israel Messias
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
Workshop - Desenvolvimento web com Drupal 7
Workshop - Desenvolvimento web com Drupal 7Workshop - Desenvolvimento web com Drupal 7
Workshop - Desenvolvimento web com Drupal 7Sérgio Lima
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1Israel Messias
 

Similar to Desevolvimento Web Client-side - HTML (20)

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
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
 
Php Básico - Parte 2
Php Básico - Parte 2Php Básico - Parte 2
Php Básico - Parte 2
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Html
HtmlHtml
Html
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
A Web é uma API
A Web é uma APIA Web é uma API
A Web é uma API
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Workshop - Desenvolvimento web com Drupal 7
Workshop - Desenvolvimento web com Drupal 7Workshop - Desenvolvimento web com Drupal 7
Workshop - Desenvolvimento web com Drupal 7
 
Aula de XHTML
Aula de XHTMLAula de XHTML
Aula de XHTML
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 

More from Guilherme

Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu CódigoWhere Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu CódigoGuilherme
 
Descobrindo APIs REST
Descobrindo APIs RESTDescobrindo APIs REST
Descobrindo APIs RESTGuilherme
 
Redu walled garden
Redu walled gardenRedu walled garden
Redu walled gardenGuilherme
 
Desafio de crescer
Desafio de crescerDesafio de crescer
Desafio de crescerGuilherme
 
Consumindo APIs REST com Ruby
Consumindo APIs REST com RubyConsumindo APIs REST com Ruby
Consumindo APIs REST com RubyGuilherme
 
Aplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com RailsAplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com RailsGuilherme
 
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma ReduAplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma ReduGuilherme
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasGuilherme
 
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos ReduIntrodução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos ReduGuilherme
 
FLOSS and Startups
FLOSS and StartupsFLOSS and Startups
FLOSS and StartupsGuilherme
 
Ruby 101 && Coding Dojo
Ruby 101 && Coding DojoRuby 101 && Coding Dojo
Ruby 101 && Coding DojoGuilherme
 
Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsDojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsGuilherme
 
CSS first steps
CSS first stepsCSS first steps
CSS first stepsGuilherme
 
How does the Web work?
How does the Web work?How does the Web work?
How does the Web work?Guilherme
 
0 introducao padroes_web
0 introducao padroes_web0 introducao padroes_web
0 introducao padroes_webGuilherme
 
Plano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu RespostasPlano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu RespostasGuilherme
 
Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX Guilherme
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryGuilherme
 
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript3 padroes-web-intro-javascript
3 padroes-web-intro-javascriptGuilherme
 

More from Guilherme (20)

Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu CódigoWhere Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
 
Descobrindo APIs REST
Descobrindo APIs RESTDescobrindo APIs REST
Descobrindo APIs REST
 
Redu walled garden
Redu walled gardenRedu walled garden
Redu walled garden
 
Desafio de crescer
Desafio de crescerDesafio de crescer
Desafio de crescer
 
Consumindo APIs REST com Ruby
Consumindo APIs REST com RubyConsumindo APIs REST com Ruby
Consumindo APIs REST com Ruby
 
Aplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com RailsAplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com Rails
 
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma ReduAplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma Redu
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos ReduIntrodução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos Redu
 
FLOSS and Startups
FLOSS and StartupsFLOSS and Startups
FLOSS and Startups
 
Ruby 101 && Coding Dojo
Ruby 101 && Coding DojoRuby 101 && Coding Dojo
Ruby 101 && Coding Dojo
 
Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome StylesheetsDojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome Stylesheets
 
Sass
SassSass
Sass
 
CSS first steps
CSS first stepsCSS first steps
CSS first steps
 
How does the Web work?
How does the Web work?How does the Web work?
How does the Web work?
 
0 introducao padroes_web
0 introducao padroes_web0 introducao padroes_web
0 introducao padroes_web
 
Plano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu RespostasPlano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu Respostas
 
Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
 
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript3 padroes-web-intro-javascript
3 padroes-web-intro-javascript
 

Desevolvimento Web Client-side - HTML

  • 1. Pacote Web Desenvolvendo com Padrões Web Módulo 1 - HTML Guilherme Cavalcanti contato@guilhermecavalcanti.com @guiocavalcanti
  • 2. Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/
  • 3. Roteiro • Noções gerais • O que são Padrões Web • Importância dos Padrões Web – 3 camadas do desenvolvimento • Ferramentas • HTML e XHTML • Validação • Hello World • Estrutura Básica – DOCTYPE – HTML – HEAD – BODY
  • 5. O que são Padrões Web? • Web – Troca de livre de informações – Acessível por qualquer pessoa no planeta • Guerra dos Browsers – Netscape Vs. Microsoft – Falta de padrões – Usuário saí perdendo • Gambiarras – Tentativa de reduzir incompatibilidade entre browsers
  • 6. O que são Padrões Web? • W3C – World Wide Web Consortium, 1994 – Tentativa de criar padrões para Web • HTML, CSS, XML, XSLT – Resolver problemas de incopatibilidade – Uma página deve ser exibida de maneira semelhante independente de qual dispositivo esteja visualizando.
  • 7. Analogia • Tomadas e Conectores • CDs de Drivers • USB • Etc, etc, etc
  • 8. 3 camadas Comportamento JavaScript Formatação CSS Informação HTML
  • 9. Importância dos Padrões: Produtividade • Desenvolvimento tradicional – Fases seqüenciais – Fases interdependentes • Resultados – Ninguém pode mudar de ideia – Necessidade de programador e designer
  • 11. Importância dos Padrões: Produtividade • Desenvolvimento com Padrões – Fases paralelas – Fases independentes • Resultado – Mudanças rápidas – Velocidade – Cliente feliz
  • 14. Ferramentas • Escrever o código • Perigo do autocompletar • Imitar o usuário • Testar, testar, testar
  • 15. Ferramentas • Linux – Gedit + montes de plugins • Windows – NotePad++ http://sourceforge.net/projects/notepadpluspe/ – EditPlus http://www.editplus.com/download.html • MacOS – TextMate • Firefox – FireBug – Web Development Toolbar – Validação W3C
  • 16. HTML/XHTML • Linguagem de Marcação • Compostas por tags (marcadores) • Dá significado ao conteúdo e o agrupa em blocos
  • 17. Tags • Responsáveis por delimitar um “pedaço” de conteúdo http://pastie.org/836704
  • 18. Hello World http://pastie.org/836736
  • 20. Validação http://pastie.org/836717
  • 21. DOCTYPE • Diz ao browser que tipo de HTML está sendo enviado
  • 22. html • HTML • Atributos – <html></html> – xmlns – Delimita um documento http://www.w3.org/199 HTML 9/xhtml – Todas as tags HTML – xml:lang estão dentro dela pt-br – lang pt-br
  • 23. head • HEAD – <head></head> – Define informações sobre o documento • Título • Palavras-chave (metadados) • JavaScript/CSS
  • 24. head > title • title – <title>Título da Página</title> – Só pode ser definido uma vez no documento – Título que aparece na janela – Nome que fica guardado quando a página é adicionada aos favoritos – Aparece nos resultados de busca do Google
  • 25. head > meta • meta – <meta /> – Informações sobre os dados – Não é exibida para o usuário – Usada por mecanismos de busca – Não precisa ser fechada
  • 26. head > meta • Atributos Attribute Value Description content text Specifies the content of the meta information name author Provides a name for the information description in the content attribute keywords generator revised others
  • 27. body • body – <body></body> – É o corpo do documento – Contem o que vai ser mostrado ao usuário (textos, imagens, links) – Parte mais importante de um documento HTML
  • 28. h1, h2, h3, h4... • Tags de títulos de texto – <h1>Seção 1 do documento</h1> – H de heading – Organização do texto em seções – Semelhante a um livro – Muito importante para mecanismos de busca • Deve condizer com o conteúdo que a segue
  • 29. p • Define um parágrafo de texto – <p>Parágrafo</p> – Para nós é mais uma ferramenta para formatar o texto. http://pastie.org/836928
  • 30. img • Inclui uma imagem no documento – <img src=“url” alt=“texto alternativo” /> Attribute Value Description alt text Specifies an alternate text for an image src URL Specifies the URL of an image longdesc URL Specifies the URL to a document that contains a long description of an image
  • 31. a • Link, hyperlink ou ancora para outro documento – Atribui não linearidade a Web (hypertexto) http://pastie.org/836943 Attribute Value Description accesskey character Specifies a keyboard shortcut to access an element title text Specifies extra information about an element href URL Specifies the destination of a link
  • 32. table • Define uma tabela – <table></table> – Precisa conter pelo menos um tr, th ou td
  • 33. Table > tr • Define uma linha da tabela – <table></table> – Sozinha não faz grandes coisas
  • 34. Table > thead e tfoot • Define uma tabela – <table></table> – Sozinha não faz grandes coisas
  • 35. td • <td></td> • Atributos – Representa células numa – colspan: mescla células tabela numa mesma linha – Se nenhum “span” for – rowspan: mescla células utilizado, deve haver a numa mesma coluna mesma quantidade em cada linha
  • 36. td • Células mescladas numa mesma linha • Células mescladas numa mesma coluna http://pastie.org/838290 http://pastie.org/838291
  • 37. ul, ol • <ul></ul> – Lista não ordenada (u de unorded) – Pode possuir vários <li></li> • <ol></ol> – Lista ordenada (o de orded) – Também possui vários <li></li>
  • 38. ul, ol http://pastie.org/838294 http://pastie.org/838296
  • 39. Listas Aninhadas http://pastie.org/838297
  • 40. form • <form action=“” method=“”></form> – Permitem o envio de dados entre cliente e servidor – O servidor precisa ter um controlador aguardando a submissão dos dados • PHP, ASP.NET, Python, Java, Ruby... – Aplicações • Formulários de contato, login/senha, cadastro de usuário, busca, etc
  • 41. Comentários sobre GET e POST • GET – Deve ser usado quando a submissão não irá acarretar numa mudança de estado no servidor – Dados visíveis pela URL • POST – Acarreta mudança de estado (consulta no banco de dados, envio de e-mail) – Os dados são enviados de maneira transparente
  • 42. form • Atributos – action • URL para o controlador responsável por receber os dados – method • Método de submissão • Pode ser GET ou POST
  • 43. form • Sintaxe básica http://pastie.org/838308
  • 44. form > inputs • Representam as entradas que serão enviadas ao servidor Attribute Value Description type button Specifies the type of an input element checkbox file hidden image password radio reset submit text value value Specifies the value of an input element
  • 45. form > inputs • Exemplo de login/senha (inseguro) http://pastie.org/838316 • Exemplo de login/senha (mais seguro) http://pastie.org/838318
  • 46. form > select • form de busca com categorias http://pastie.org/838325
  • 47. form > label • Adiciona labels (etiquetas) aos campos – Atributo for especifica qual é o input alvo de um label – Deve ser sempre usado em conjunto com um input ou select http://pastie.org/838329
  • 48. form > checkbox e radio http://pastie.org/838344
  • 49. form > input Attribute Value Description checked checked Specifies that an input element should be preselected when the page loads (for type="checkbox" or type="radio") disabled disabled Specifies that an input element should be disabled when the page loads name name Specifies a name for an input element readonly readonly Specifies that an input field should be read-only (for type="text" or type="password") src URL Specifies the URL to an image to display as a submit button
  • 50. form > fieldset, legend • Organizar campos em grupos – Usabilidade http://pastie.org/838354
  • 51. em • <em>Texto</em> • Texto enfatizado • Geralmente usado para aplicar negrito
  • 52. address • <address>Rua Sempre Viva</address> • Tag para definir endereços • O Google Maps utiliza
  • 53. hr • <hr/> • Usado como separador de conteúdo
  • 54. Gerador de metatags http://www.iwebtool.com/metatags_generator
  • 55. div, span • Quase modificam a apresentação • Servem para agrupar outros elementos – Geralmente relacionados entre si • São de grande ajuda na hora de aplicar os estilos
  • 56. div • <div> é usado para agrupar um ou mais elementos nível de bloco • Pode conter elementos de bloco
  • 57. span • O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. • Não pode conter elementos de bloco (p, table, div...)
  • 58. Gerador de metatags http://pastie.org/838366 • Ferramenta mais completa – http://www.addme.com/meta.htm