Scribd Logo
Upload

Welcome to Scribd!

  • Programação Web

    Uploaded by

    Fabiorogerioveras
    15 views13 pages
    unidade 2

    Original Title

    programação web

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    unidade 2

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views13 pages

    Programação Web

    Uploaded by

    Fabiorogerioveras
    unidade 2

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 13

    1

    SISTEMA DE INFORMAO
    LINGUAGEM DE PROGRAMAO WEB
    PROFESSORA LUCIANA FORTES FARIAS

    Linguagem HTML

    HTML
    HyperText Markup Language (Linguagem de Marcao de Hipertexto)
    a camada responsvel pela estrutura da pgina web
    Criado por Tim Berners-Lee
    Arquivos HTML podem ser interpretados por browsers (navegadores)
    Comandos da linguagem so tags (etiquetas)
    Os contedos dessas tags so os elementos
    Um elemento composto de 3 partes:
    Tag de abertura
    Contedo
    Tag de fechamento
    Existem elementos que so uma exceo a essa regra.

    HTML/ SEO
    Pginas html devem sempre conter um elemento <html> em conjunto com
    <head>
    <body>
    As informaes sobre a pginas esto no elemento - ?
    <head>
    O que visualizado no browser fica entre as tags - ?
    <body> e </body>
    Devemos utilizar os cabealhos com cautela, pois eles so utilizados como
    parmetros de ranqueamento da pgina por diversos buscadores como
    Google, Yahoo e Bing, por exemplo. O uso correto das tags de cabealho
    faz parte das tcnicas de SEO (Search Engine Optimization) que, como o
    prprio nome j indica, so tcnicas que ajudam a melhorar o
    ranqueamento de pginas dentro dos buscadores.
    De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao
    utilizarmos as tags de cabealhos: Utilizar apenas uma tag <h1> por pgina;
    Utilizar no mximo duas tags <h2> por pgina.
    2

    Conceitos gerais e principais elementos


    HTML e CSS so linguagens que utilizamos para criao de pginas web
    HTML cuida da estrutura
    CSS (Cascading Style Sheets Folhas de Estilo em Cascata) cuidam da
    apresentao do HTML
    HTML tambm prov formatao bsica, mas o mais apropriado faz-lo
    utilizando CSS
    Existem 2 tipos de tags:
    Tags em bloco - Tipo de tag que impacta em mais de uma linha de cdigo,
    normalmente pargrafos
    Tags em linha
    necessrio sempre aps uma tag de abertura - ?
    Uma tag de fechamento
    Quase todos os espaos e tabulaes no cdigo so ignorados pelo browser,
    mas voc pode utiliz-los para tornar seu cdigo mais inteligvel

    Outros elementos trabalhados na prtica


    Tags de ttulo: <h1>, <h2>...
    <p> e <br>
    Atributos do elemento <p>
    Elementos vazios - elementos que no precisam de tag de fechamento
    Aninhamento de tags
    Comentrios <!-- -->
    Listas:
    Ordenadas <ol> - ordened list/ <li> - list item
    No ordenadas <ul> - unordened list/ <li> - list item
    <b>, <i>, <u>, <font face= size= color=>
    Tag <q> para citao alguns browsers no reconhecem
    Tag <blockquote>
    <pre>

    Links, Caminhos
    Link absolutoUm link absoluto um link que leva exatamente para uma
    pgina. Por exemplo, voc est na pgina www.meusite.com e quer criar
    um link para www.ceuma.br
    Um link absoluto deve comear por um protocolo, seja "http://", "ftp://" ou
    outros que existem, ou ento ele ser tratado como link relativo.
    Link relativoUm link relativo leva para uma pgina usando o link da atual. Se
    voc quer ir de www.meusite.com para www.meusite.com/pg2.html, pode
    usar o seguinte elemento:<a href="pg2.html">Link para a pgina 2</a>O
    contedo do atributo "href" somado com o caminho at a pgina atual
    (excluindo o prprio nome da pgina), incluindo a barra. Ou seja,
    www.meusite.com/ + pg2.html. Voc tambm pode usar mltiplas pastas:<a
    href="plantas/arvores/carvalho.html">Link para a pgina sobre
    carvalhos</a>
    Links absolutos e relativos so vlidos tambm no uso de ncoras
    Imagens tambm podem ser includas utilizando links absolutos e links
    relativos
    3

    Links, Caminhos
    Propriedade Target
    _blank: abre nova janela/browser
    _top: na mesma janela, sobrepondo todas as definies do frame
    _parent: abre na mesma janela e no mesmo frame, sem sobrepor as
    definies dos frames da pgina

    #ancora: indica um lugar dentro de uma mesma pgina (ncora) onde o


    usurio ser redirecionado quando clicar no respectivo link
    <a name=nome_da_ancora></a>

    Imagens
    o navegador interpreta as imagens a partir da leitura da tag <img />
    inserir uma imagem que est no mesmo caminho do seu documento
    propriedade src
    <img src="imagem.jpg" />
    inserir uma imagem (arquivo ceuma.png) que est na pasta imagens relativa
    ao seu documento
    <img src=imagens/ceuma.png" />
    imagem que est na Internet, usando uma URL
    <img src=http://www.ceuma.br/portal/wp-
    content/themes/responsive/images/marca.png>
    Descrio para a imagem (texto alternativo)
    alt=texto
    Outras propriedades: align, height, width

    Doctype
    Document Type Definition (DTD)
    Exigncia dos web standards
    W3C
    Responsvel por informar ao browser como processar o documento, razo
    pela qual dever ser a primeira coisa a colocar no documento HTML
    Estrutura do Doctype:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict / / EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.DTD" >
    Nas especificaes do HTML5:
    <!DOCTYPE html>

    Definir a Codificao de Caracteres


    Mesmo que charset
    Informa ao browser como a pgina HTML dever ser interpretada
    Em Html4:
    <meta http-equiv="Content-Type" content="text/html; charset = utf-
    8">
    Em Html5:
    <meta charset = "utf-8" />
    No permitido codificar diferentes partes de um mesmo documento com
    diferentes formas de codificao
    4

    Uma codificao Unicode tal como UTF-8 prov suporte para muitos idiomas,
    inclusive para qualquer mistura de idiomas em uma pgina ou formulrios
    UTF-8 reduz a complexidade de criao de sites ou aplicaes multi-lnguas
    Definir a Codificao de Caracteres (cont.)
    Existem trs codificaes de caracteres em Unicode: UTF-8, UTF-16 e UTF-32
    Para Web recomenda-se o UTF-8
    Pesquisa: Por que no recomendado utilizar UTF-32 em codificao de
    pginas web? O que significa utilizar uma codificao SEM BOM?
    Editores devero utilizar codificao SEM BOM
    byte-order mark
    Quando um arquivo salvo com um BOM, h um caractere Unicode
    inserido no incio do arquivo que a maioria dos editores de texto no
    exibe
    Especificao da HTML 5:
    Autores so encorajados a usar UTF-8. Mecanismos verificadores devem
    alertar os autores sobre o uso de codificao do passado. Ferramentas
    de criao de contedos devem adotar codificao UTF-8 por padro,
    para criao de novos documentos.
    Charsets em documentos html podem ser sobrescritos por configuraes no
    servidor de hospedagem
    Ex.: pginas com charset correto, mas caracteres ainda com problema
    Escrevendo caracteres especiais

    Tabelas
    O uso de tabelas importante tanto para organizar as informaes de modo
    mais estruturado, a exemplo do que ocorre em uma planilha, quanto para
    formatar uma pgina.
    Alguns designers tm utilizado o conceito de tabela para modelar a pgina.
    Tags <table> e </table> indicam comeo e fim da tabela.
    Linhas:
    Tags <tr> </tr>: indicam comeo e fim de uma linha
    Propriedade rowspan: Mescla linhas; o valor define a quantidade de linhas
    que sero mescladas
    Colunas:
    Tags <td> </td>: indicam comeo e fim de uma coluna
    Propriedade colspan: Mescla colunas; o valor define a quantidade de
    colunas que sero mescladas
    Tabelas (cont.)
    Outras propriedades para trabalho com colunas:
    width: controla a largura das colunas. pode ser definido em pixels ou
    porcentagem.
    height: controla a altura das colunas. pode ser definido em pixels ou
    porcentagem.
    valign: controla o alinhamento vertical da clula: top, center e
    bottom.
    halign: controla o alinhamento horizontal da clula.left, center e
    right.
    Tag <caption align="bottom>: acrescenta uma legenda, abaixo da
    5

    tabela</caption>
    Tag <th>: usada para o cabealho da tabela, um texto destacado para explicar
    um pouco sobre a coluna em questo
    Muitas dessas propriedades sero trabalhadas melhor com CSS, que a
    camada responsvel pela apresentao.
    Formulrios
    Em HTML possvel apenas criar os controles para os formulrios
    Campos: input text, radio button, checkbox, caixas de seleo etc
    Em geral, para que eles tenham alguma funcionalidade, gerando interatividade
    com o usurio, necessrio o auxlio de um programa para manipulao
    e/ou armazenamento dos dados digitados nesses formulrios
    Tags <form> e </form>
    Propriedades mais importantes das tags de formulrio
    name: especifica o nome do controle funcionar como nomes de
    variveis
    value: valor da varivel
    Formulrios Propriedades principais do objeto form
    name
    o nome nico do formulrio.
    action
    o lugar ao qual se envia o formulrio para ser processado. O action
    define a URL a qual se envia tal formulrio.
    method
    mtodo de envio dos dados inseridos em um formulrio. O method pode
    ser:
    GET = envia os dados em uma cadeia "visvel". Conveniente para
    enviar poucos dados.
    POST = envia os dados em forma "invisvel". Conveniente para enviar
    uma grande quantidade de dados.
    target
    define a janela ou frame na que se Mostraro ou se processaro os
    resultados do formulrio.

    Formulrios Principais controles


    Elementos <input />: mostram no navegador os campos que sero
    responsveis por possibilitar a entrada de algum tipo de informao por
    parte do usurio; atributo type:
    text: Usado para inserir caracteres, nmeros e afins no formulrio
    Atributos adicionais: size (tamanho da caixa de texto), maxlength
    (quantidade mxima de caracteres permitida), accesskey (atalho de
    acesso ao campo)
    password: parecido com o 'text' mas sua entrada de dados no aparecer
    explicitamente para o usurio. Usada principalmente, como o prprio
    nome sugere, para a entrada de senhas.
    radio: radio buttons ou botes de opo. Permitem que o usurio seja
    capaz de escolher um elemento entre um nmero limitado deles.
    checkbox: caixas de seleo. Tm uma finalidade parecida com a dos
    botes, com a diferena de permitir que sejam selecionados mais de
    6

    um elemento.
    radio e checkbox suportam a propriedade checked que mantem
    selecionado o item
    Formulrios Principais controles
    Tag <select>: lista de valores
    Atributos <option>: um item da lista
    Atributo selected: mantem selecionado o item da lista
    Atributo multiple: permite a seleo de mais de um item
    Tag <textarea>
    Elemento <button>
    submit: boto para enviar os dados.
    reset: boto para apagar todas as entradas do formulrio.
    <label for="></label>: torna clicvel a descrio do campo; o valor da
    propriedade for dever ser o nome do controle a ser acessado ao clicar na
    respectiva descrio
    <label for="login>Nome de Usurio: </label><input type="text"
    name="login>
    Exercitando
    Pgina de login (sistema.html), chamada a partir de index.html
    action aponta para reserva.html
    Tabela com os dados de login (usurio, senha e boto)
    Pgina reserva.html
    Controles conforme ilustrao

    XHTML, HTML5
    Estendendo o HTML

    XHTML
    eXtensible Hypertext Markup Language (Linguagem Extensvel para Marcao
    de Hipertexto)
    Construo de pginas na internet a partir da linguagem HTML juntamente
    com a linguagem XML, transformando-se em uma linguagem padronizada
    para web
    Combina as tags de marcao HTML com regras da XML
    eXtensible Markup Language
    Separao do contedo da formatao
    Criao de arquivos para validao de estrutura (DTDs)
    Possibilidade de criao de tags sem limitao
    Concentrao na estrutura da informao, e no na sua aparncia
    Objetivos:
    exibio de pginas Web em diversos dispositivos (televiso, palm, celular
    etc)
    melhorar a acessibilidade
    melhorar o sentido semntico para as mquinas/ buscadores
    Vantagens:
    menor tempo de carregamento da pgina web
    interoperabilidade e portabilidade dos documentos web
    compatvel com todas as aplicaes HTML antigas
    7

    HTML5
    HTML5 simplifica mais o XHTML
    Maior organizao da estrutura da pgina
    Maior semntica
    Definio em XHTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Definio em HTML5:
    <!DOCTYPE html>
    Codificao de caracteres em XHTML:
    <meta http-equiv="content-type" content="text/html; charset=iso-
    8859-1" />
    Codificao de caracteres em HTML5:
    <meta charset="utf-8">
    XHTML (com CSS) x HTML5
    HTML5 - Origem dos novos elementos
    Com o surgimento do HTML5 apareceu a oportunidade de dar mais
    informao ao browser sobre a estrutura da pgina e o que significaria cada
    elemento dessa estrutura.
    2005: o Google analisou mais de um bilho de pginas para descobrir que
    nomes de classes CSS os desenvolvedores web utilizavam mais
    frequentemente.
    Ian Hickson (Hixie), editor do principal grupo responsvel pela proposta do
    HTML5, comeou a pensar sobre os novos elementos que deveriam ser
    criados e quais nomes seriam mais apropriados.
    Termos mais comuns apontados na pesquisa passaram a ser o alvo para
    a criao de tags de forma permanente (ex.: header, footer, article)

    Case sensitive
    O que o html5 traz de novo?
    Conectividade e aplicaes em tempo real
    Novas possibilidades de estilo com css3
    Acesso a dispositivos (Interoperabilidade)
    Grficos 2d, 3d e efeitos
    Recursos multimdia
    Melhor performance e integrao
    Elementos mais semnticos
    Armazenamento off-line

    Diviso em camadas
    Compatibilidade com browsers
    Browsers como Google Chrome, Firefox 3.5, Internet Explorer 9 e Safari 4 do
    suporte ao HTML5, e com isso algumas pginas j vo aderindo a nova
    verso.
    IE o browser com menos compatibilidade
    O site http://html5test.com/ faz uma lista de verificao se o browser suporta
    os recursos de HTML5
    8

    Novas tags de estrutura


    <header> e <footer> para cabealho e rodap
    <section> para sees de contedo de uma pgina
    <article> para identificar um artigo ou um post
    <nav> para elementos de navegao

    header
    Tipicamente elementos como um formulrio de pesquisa ou um Sobre Ns
    podero estar includos neste header
    <header> <img alt = "Logotipo em HTML5" src="logo.png" /> <h1><a
    href="#">HTML5</a></h1></header>
    Poder incluir ajuda navegao, ex.:
    Marca da empresa
    Nome e ttulo do site
    Subttulo do site
    Links de navegao principais
    Formulrio de pesquisa
    Dependendo do design do website o menu de navegao poder estar fora do
    header
    Aps criado poder ser utilizado em mais de uma pgina
    aconselhvel tambm que se tivermos apenas um ttulo (desde h1 at h6) e
    mais nenhum elemento, no devemos utilizar um header. O prprio ttulo
    ser suficiente.
    No estamos restritos a apenas um header por pgina
    No ter de estar no topo da pgina
    Se tivermos vrios cabealhos em uma pgina poderemos considerar coloc-
    los em um elemento header

    article
    Representa um bloco independente de contedo
    Contedo que possa existir por si s e que possa ser reutilizvel
    Considere o contedo que est contido nas RSS feeds. Trata-se de um
    contedo que contm apenas o essencial para representar um artigo, e que
    poder ser retirado da feed, continuando a fazer sentido.
    A especificao HTML5 sugere alguns exemplos do que um artigo e como
    pode ser utilizado, referindo exemplos como um tpico de frum, artigos,
    posts ou artigos submetidos pelos utilizadores.

    footer, aside, figure


    <footer>
    Para definir onde ser o rodap da pgina ou da sesso.
    <aside>
    Informaes relativas ao contedo principal, como um menu ou um campo
    de busca.
    til para citaes, agrupamento de publicidade, grupos e blocos de
    navegao e para qualquer outro contedo que separado do
    contedo principal.
    9

    <figure>
    Para a insero de imagens com legenda <figure id=1> <img
    src=imagem.jpg alt=descrio> <legend>Legenda da
    Imagem</legend> </figure>

    hgroup
    propsito adicionar mais informao ao elemento header
    utilizado para agrupar mais do que um ttulo relacionado (podendo ir de h1 a
    h6)

    nav
    elementos de navegao
    utilizado para criar hiperligaes entre as vrias pginas do website, ou outras
    partes de uma pgina
    Ex.: tabelas de contedos e ncoras
    utilizao mais comum para criar a navegao principal de um website
    boa prtica: utilizar uma lista no ordenada para a navegao principal de um
    website
    <ul id="nav"> <li><a href="#">Home</a></li> <li><a
    href="#">Acerca</a></li> <li><a href="#">Sobre
    ns</a></li> <li><a href="#">Novidades</a></li> <li><a
    href="#">Falar connosco</a></li></ul>

    recomendado utilizar o elemento nav dentro de um elemento header.


    Poderemos colocar esta navegao no header, j que perfeitamente comum
    colocar no header contedo introdutrio e de navegao.
    No regra manter o nav no header, e poder depender do design adotado
    pelo website.
    tambm bastante comum ter um menu de navegao no footer da pgina,
    duplicando a navegao principal do website.
    No necessrio colocar todas as hiperligaes de uma pgina em um
    elemento nav; a especificao HTML5 apenas adverte que os blocos de
    navegao principal so os apropriados para ser includos no elemento nav.

    <nav>
    <h2>Interessantes</h2>
    <ul>
    <li><a href="#">Html5</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Java Server Pages</a></li>
    </ul>
    <h2>Seguir</h2>
    <ul>
    <li><a href="#">Novidades W3c</a></li>
    <li><a href="#>E-commerce</a></li>
    <li><a href="#>Criao para Web</a></li>
    </ul>
    </nav>
    10

    possvel existir um h2 ou h3 para separar grupos de links em um elemento


    nav (links podero funcionar como cabealhos de abas)
    Estes ttulos no so absolutamente necessrios, mas podem ser utilizados
    para agrupar em grupos menores a estrutura de navegao.
    Com a utilizao do elemento nav existe uma grande vantagem em termos de
    acessibilidade.
    Por exemplo, os visitantes de determinado site sero capazes de
    imediatamente pesquisar e utilizar grupos de navegao, de acordo
    com seus interesses

    Novos elementos/ campos


    Novos tipos de campos
    Color
    <input type="color" name="corPreferida">
    Date
    Datetime
    Datetime-local
    Month
    Number
    Range

    Tel
    Torna o input com a funo de formatar o campo e fazer a validao, em
    conjunto com o atributo pattern.
    Search
    Destina-se a definir um input do tipo busca. O efeito deste valor no atributo
    type alterar a estilizao e comportamento do controle diferenciando-
    o dos demais controles do Input
    E-mail
    Torna o input com a funo de formatar o campo e fazer a validao.
    Url
    Um endereo web, tambm com formatao e validao.

    Tipos de Dados e validadores


    Autofocus
    O foco ser colocado neste campo automaticamente ao carregar a pgina.
    Placeholder
    Coloca uma mscara no campo, ou seja, um texto explicativo.
    Required
    Para tornar um campo de formulrio obrigatrio(seu valor precisa ser
    preenchido) basta, em HTML5, incluir o atributo required. exclusivo
    com os elementos input, select e textarea

    Multimdia
    udio
    <audio>
    Exibe qualquer elemento de streaming de udio, com atributos para
    11

    exibio de controles ou execuo automtica.


    <audio src=musica.mp3" controls="true" />
    Vdeo
    <video>
    Exibe vdeos na pgina, com exibio de controles e de uma Imagem
    enquanto o vdeo carregado.
    <video src=video.ogv" width="400" height="300" />
    Codecs
    O codec serve para indicar ao navegador o container e codecs de
    determinado arquivo, usa-se o atributo type no formato.
    Ex: <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    Com MPEG-4 a coisa um pouco mais complicada, por que preciso
    indicar ao navegador tambm o profile do codec de vdeo utilizado.
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240,
    mp4a.40.2"'>

    Drag and Drop


    Com drag and drop voc consegue manipular o posicionamento dos
    elementos na tela
    Exemplos
    Arrastar um item para um carrinho de compra em um site de e-commerce
    Listas de comparao em jogos virtuais
    Exemplo do recurso aplicado: http://html5demos.com/drag

    Correo ortogrfica
    Os agentes de usurio podem oferecer recursos de reviso ortogrfica e
    gramatical, dependendo do que houver disponvel em cada plataforma.

    <textarea spellcheck="true"></textarea>

    Tipos de Dados e validadores (cont.)


    Maxlength
    Limita a quantidade de caracteres em um campo de formulrio. E agora
    pode ser usado na tag textarea.
    Pattern
    Define uma expresso regular, um padro para validao
    Contedo editvel
    Tornar um elemento do HTML editvel
    atributo contenteditable
    Aplicao: <div contenteditable="true">Edite-me...</div>

    Elementos modificados e ausentes


    Alguns elementos do html foram modificados e ausentes
    <basefont>
    <big>
    12

    <center>
    <font>
    <s>
    <strike>
    <tt>
    <u>
    Outros foram retirados porque afetam negativamente a acessibilidade do
    site: <frame>, <frameset> e <noframes>.

    Elementos modificados e ausentes


    Caram em desuso ou podem ser substitudos semanticamente por
    declaraes no CSS para definir o visual dos elementos:
    align nos elementos <table> e demais tags de tabelas
    <iframe>, <img>, <input>, <hr>, <div>, entre outros;
    background em <body>;
    bgcolor nos elementos de tabela e no <body>;
    border em <table> e <object>;
    cellpadding e cellspacing em <table>;
    height em <td> e <th>;
    width nos elementos <hr>, <table>, <td>, <th> e <pre>;
    hspace e vspace em <img> e <object>;
    noshade e size em <hr>.

    Aplicao html5
    Criao de novo arquivo chamado controlesHtml5.html para testar novos
    controles
    Exerccios propostos
    Adaptar pginas at ento trabalhadas (index.html, sistema.html e reurso.html)
    com as novas sees em html5 utilizando os elementos:
    Header, Article, Figure, Nav
    Adaptar controles da pgina reserva.html
    Campos obrigatrios: todos
    Setor: No especificado checado
    Acrescentar item na lista de recursos Selecionar Recurso e deixar
    selecionado
    Datas: tipo data; placeholder
    Accesskey em todos os campos
    Nome do solicitante N
    Setor S
    Recurso R
    Data e hora do uso U
    Data e hora da devoluo D
    Justificativa J
    Necessita operador O
    Boto Concluir Reserva E
    Criar Boto Cancelar/Reset C
    No se preocupar com a formatao, apenas com a estrutura em html5
    13

    Sites com HTML5 e CSS


    http://www.digitalhands.net/
    https://getsatisfaction.com/
    http://lab.4muladesign.com/dribbble/
    http://www.nike.com/us/en_us/
    http://www.chrdesigner.com/
    http://tableless.com.br/
    http://www.pinceladasdaweb.com.br/
    http://www.apple.com/br/safari/

    Validao de pginas HTML, XHTML, HTML5


    Segundo normas da W3c
    COMO SABER SE UMA PGINA EST CORRETAMENTE ESTRUTURADA?
    A W3C tem uma ferramenta de validao
    validator.w3.org
    outro validador: html5.validator.nu

    You might also like