You are here: Wiki-Colivre>Tech Web>PadroesWeb (13 Jun 2008, MonicaPaz)EditAttach

Padrões Web

W3C

O W3C (World Wide Web Consortium) é um consórcio que reuni várias empresas e outras instituições com o objetivo de estabelecer padrões (especificações, orientações, softwares e ferramentas) que mantenham a interoperabilidade da Web. No seu site (http://www.w3.org/) pode-se encontrar documentações sobre HTML, XHML, XML, SVG, PNG, RSS, dentre outros.

Para tutoriais (em inglês) de muitos desses padrões, aconselhamos o site da W3School (http://www.w3schools.com), que apesar do nome, não mantem relação direta com a W3C.

Sintaxe e semântica das linguagens de marcação - HTML

Pré-Requisito?

  • Uma noção de como funciona a internet (yep!)

Para que estudar HTML?

...

O que é HTML?

  • HTML significa Hyper Text Markup Language
  • HTML é um arquivo texto que contém pequenas tags de marcação
  • As tags de marcação dizem para o navegador como mostrar a página
  • Um arquivo html deve possuir a extensão htm ou html
  • Um arquivo html pode ser criado usando um editor de texto simples

TAGS

  • As tags são usadas para marcar elemento HTML
  • As tags HTML estão entre os caracteres "<" e ">"
  • As tags HTML normalmente estão em pares como <i> e </i>
  • Tipo de tags
    • Abertura: 
       <etiqueta>
    • Fechamento: 
       </etiqueta>
      comando não é um bom nome exemplo para uma tag. Comando está relacionado com programação, a ordem para uma ação. A tag é uma marcação, sua tradução é uma boa dica de seu propósito: "Etiqueta".
  • O texto entre a abertura e o fechamento de uma tag é o conteúdo do elemento HTML
  • As tags não são case sensitive
  • Então... 
     <eTIqueta> conteúdo do elemento comando. </ETIQUETA>

Será que eu menti?

<center> <b>HTML é tag, nada mais!!! </b>
Aprender HTML é aprender como usar as diferentes tags. </center>

Documento HTML Básico - Parte Chata 

<html>
    <head>
        <title>
        </title>
    </head>
    <body>
        <i>Aqui fica o conteúdo.</i><b>Incrível</b>
    </body>
</html>

Documento HTML Básico - Parte Legal

Faça você mesmo!!!

Atributos das Tags

  • Informações adicionais sobre os elementos HTML
  • Por exemplo: 

<body bgcolor="red">

  • Os atributtos HTML sempre aparecem em um par nome/atributo no formato: nome="valor"

Vamos aprender na prática?

O Projeto

Outras Tags

Frame:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_frame_navigation 

<!--  isso é um comentário -->

Será que você aprendeu?

http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

Referências

Mais de HTML

Em seu tutorial (http://www.tableless.com.br/caminhando-pelo-html-parte-1), Elcio Ferreira diz em seu texto que "trabalhando com padrões web, HTML é uma linguagem realmente simples, e muito poderosa (...) HTML é a própria base da construção de sites com padrões web. Antes da formatação CSS, de um elegante javascript baseado em DOM ou um poderoso Ajax, todo site baseado em padrões começa com HTML e é impossível trabalhar com padrões web sem saber HTML."

Formulários

Veja o código seguir, é um bom exemplo de formulário, que usa diferentes tipos de entrada e que ainda pode ter o envio de dados testado na página https://www.colivre.coop.br/Tech/TesteForm. 

<html>
    <head>
        <title>
        Aula sobre Formulário
        </title>
    </head>
    <body>
   <p>
        <b>Formulário</b>
   </p>

  <form action="http://colivre.coop.br/Sandbox.TesteForm" method="post">

  <label for="f_nome">Nome:</label>
  <input type="text" name="nome" id="f_nome" />
  <br/>
  <label for="f_idade">Idade:</label>
  <input type="text" name="idade" id="f_idade" value="28" />

  <p/>

  <input type="radio" name="sexo" value="M" id="f_sex_m" checked="checked" />
  <label for="f_sex_m">Masculino</label>

  <input type="radio" name="sexo" value="F" id="f_sex_f" />
  <label for="f_sex_f">Feminino</label>

  <p/>

  Linguagens:
  <input type="checkbox" name="lang" value="HTML" id="f_lang_html" checked="checked" />
  <label for="f_lang_html">HTML</label>

  <input type="checkbox" name="lang" value="CSS" id="f_lang_css" />
  <label for="f_lang_css">CSS</label>

  <input type="checkbox" name="lang" value="JS" id="f_lang_js" />
  <label for="f_lang_js">Javascript</label>

  <p/>

  <select name="estado">
    <option value="AC">Acre</option>
    <option value="BA" selected="selected">Bahia</option>
    <option value="SE">Sergipe</option>
    <option value="AL">Alagoas</option>
    <option value="CE">Ceará</option>
  </select>

  <p/>
   Mensagem:<br/>   
  <textarea name="mensagem" rows="6" cols="60">Bla bla bla...</textarea>
  <p/>

  <input type="submit" value="Enviar" />
</form>
</body>
</html>

  • O action
  • O method = "pos"
  • O label nos botões radio servem para deixar o texto clicável facilitando para o usuário a seleção;
  • Os id servem para identificar quem o label devem marcar.
  • O market
  • O checket
  • O método POST é usado por ser mais aconselhado, visto que não passa os valores do formulário na URL. Veja a diferença entre o POST e o GET na URL da página de teste. A página de teste utiliza uma técnica (variável URLPARAM do TWiki) que necessita do uso do GET para que os dados sejam apresentados.
  • Tipos de Input, ou entradas: text, radio, checkbox. Além é claro do select.

Além de serem enviados para tratamento por alguma aplicação, um uso simples e comum de formulário é fazer que o action envie os dados para um e-mail especificado. Para tal, é preciso que o servidor esteja habilitado para enviar e-mails XXXX...

Sintaxe e semântica das linguagens de marcação - XHTML

Motivação XHTML

Unir o útil ao agradável

O que é XHTML?

  • XHTML é EXtensible HyperText Markup Language
  • XHTML foi criado para substituir o HTML
  • XHTML é uma versão mais enxuta de HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation

Não Adianta Blá, Blá, Blá

Os documentos html agora devem ser escritos com as tags html em caixa baixa e não deve ser esquecer de fechar as tags.

Características

  • Os elementos XHTML devem ser corretamente aninhados
  • Os documentos XHTML devem ser bem formados
  • Os nomes das Tags devem estar em caixa baixa (_ lowercase_)
  • Todos os elementos XHTML devem ser fechados

Os elementos XHTML devem ser corretamente aninhados 

<b><i>Este texto é negrito e itálico</b></i>


<b><i>Este texto é negrito e itálico</i></b>

Os documentos XHTML devem ser bem formados 

<html>
<head> ... </head>
<body> ... </body>
</html>
Ou seja, todos os elementos podem ter sub-elementos. Os sub-elementos têm que aparecer em pares e aninhados corretamente com os elementos parentes.

Os nomes das tags devem aparecer em caixa baixa (lowercase) 

<BODY>
<P>Isto é um parágrafo</P>
</BODY>



<body>
<p>Isto é um parágrafo</p>
</body>

__OBS: Isso se deve pelo fato de documentos XHTML serem aplicações XML e XML é case-sensitive.

Todos os elementos XHTML devem ser fechados 


<p>Isto é um parágrafo
<br>Isto é uma quebra de linha
<img src="bli.jpg" alt="bli" > Isto é uma imagem




<p>Isto é um parágrafo</p>
<br/>Isto é uma quebra de linha
<img src="bli.jpg" alt="bli" /> Isto é uma imagem

Os nome de atributos devem estar em caixa baixa (lowercase) e entre aspas 


<table WIDTH="100%">
<table width=100%>




<table width="100%">
<table width="100%">

Será que você aprendeu?

Teste seus conhecimentos nesse quiz:

http://www.w3schools.com/quiztest/quiztest.asp?qtest=XHTML

Vamos usar XHTML?

Exemplo XHTML do Nosso Projeto

Como faço Validar um documento XHTML?

Visite:

http://validator.w3.org/

Mais de XHTML

Caso precise de outra fonte, veja também o tutorial "Escrevendo um XHTML válido" escrito por Diego Eis, acessível em http://www.tableless.com.br/escrevendo-um-xhtml-valido.

CSS

Definindo

Cascading Style Sheets, ou simplesmente CSS é um mecanismo simples para adicionar estilo a documentos. Ele foi criado e definido pela W3C com foco no HTML, mas já é usado para formatar conteúdo definido em markup que servem a outros fins como XUL e SVG.

Através do CSS é possível tornar o conteúdo independente da forma como ele será apresentado. Ou seja, uma página HTML não precisa usar tags como a <font> para definir a aparência de um bloco de texto, o bloco deve ser identificado e assim ele será formato. Da mesma forma um título não deve ser simulado com tags de formatação, ele deve usar a tag semanticamente coerente <H1> e ser formatado via CSS para ter a aparencia desejada. Seguindo esse pensamento se desenvolveu a filosofia de construção de layouts web conhecida como Tableless que trouxe sites com código mais limpo e mais acessiveis ao mundo.

Seletores CSS - Quem eu formato?

Para formatar as ocorrencias de uma tag <tag>: 
  tag {
    propriedade1 : valor1;
    propriedade2 : valor2;
  }

Para formatar as ocorrencias da classe bli em qualquer tag:
  .bli { ...

Para formatar as ocorrencias de uma tag com uma classe <tag class="bli">:
  tag.bli { ...

Para formatar uma tag identificada como <tag id="souUnica">:
  #souUnica { ...

Para formatar as ocorrencias de uma tag <filha> dentro de <mãe>:
  mãe filha { ...

...e a pseudo-classe.

Notação CSS - Como eu formato? 

  seletor {
    prop1 : <string>;
    font-family : serif;
    prop2 : <num absoluto>;
    font-weight : 800;
    prop3 : <num relativo>[<unidade de medida>|%];
    width : 350px;
    width : 70%;
    prop4 : url(<endereço refencia>);
    background-image : url(imgs/fundo.jpg);
    prop5 : #<cor hexadecimal 24bits>;
    color : #FFA800;
    prop6 : rgb(<0..255>, <0..255>, <0..255>);
    color : rgb(255, 168, 0);
    prop7 : rgb(<0..100>%, <0..100>%, <0..100>%);
    color : rgb(100%, 65.88%, 0%);
    propMulti : <valor tipo1> <valor tipo2> ... <valor tipoN>;
    border: 4px dotted #009900;
  }

Inserindo CSS na sua página (1)

Exemplo do Mozilla.org: 
<head>
 ...
 <link rel="stylesheet" type="text/css"
       href="css/print.css" media="print" />

 <link rel="stylesheet" type="text/css"
       href="css/base/content.css" media="all" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/content.css" title="Cavendish" media="all" />

 <link rel="stylesheet" type="text/css"
       href="css/base/template.css" media="screen" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/template.css" title="Cavendish" media="screen" />

 <link rel="stylesheet" type="text/css"
       href="css/cavendish/home.css" title="Cavendish" media="screen" />
 ...
</head>

Inserindo CSS na sua página (2)

Você também pode isserir diretamente na página: 
<head>
 ...
 <style type="text/css">
   seletorA {
     propriedade1 : valor1;
     propriedade2 : valor2;
   }
   seletorB {
     propriedade3 : valor3;
     propriedade4 : valor4;
   }
 </style>
 ...
</head>

Ou forçar o download antes da apresentação sem precisar extender o documento html: 
<head>
 ...
 <style type="text/css">
   @import url(layout.css);
 </style>
 ...
</head>

CSS Alternativo

http://www.w3.org/Style/Examples/007/alternatives.html 
<link rel="stylesheet" title="Gold (right, fixed) + navbar"
      href="../../threepart-f.css">
<link rel="alternate stylesheet" title="Gold (right)"
      href="../../threepart-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left)"
      href="../../threepart-left-nobanner.css">
<link rel="alternate stylesheet" title="Gold (left, fixed) + navbar"
      href="../../threepart-left-f.css">
<link rel="alternate stylesheet" title="Gold (right, fixed)"
      href="../../threepart-nobanner-f.css">
<link rel="alternate stylesheet" title="Gold (left, fixed)"
      href="../../threepart-left-nobanner-f.css">
<link rel="alternate stylesheet" title="Oldstyle"
      href="http://www.w3.org/StyleSheets/Core/Oldstyle">
<link rel="alternate stylesheet" title="Modernist"
      href="http://www.w3.org/StyleSheets/Core/Modernist">
<link rel="alternate stylesheet" title="Midnight"
      href="http://www.w3.org/StyleSheets/Core/Midnight">
<link rel="alternate stylesheet" title="Ultramarine"
      href="http://www.w3.org/StyleSheets/Core/Ultramarine">
...
<link rel="stylesheet" title="Handheld" href="../../handheld.css" media="handheld">

Modularize e não se repita = Importe

Um site em tons verdes: 
@import url(layoutBase.css);
@import url(layoutVerde.css);

O mesmo site em tons azuis: 
@import url(layoutBase.css);
@import url(layoutAzul.css);

O código comum aos dois modelos fica em um documento separado. layoutBase.css

Trabalhando!

Hora de colocar a mão na massa.

Agora veremos "Visual Formatting Model"

Microformats

Ai... mais coisa pra aprender...
Pare de chorar e aproveite! 

<div class="vcard">
  <a class="url fn" href="http://aurium.cjb.net">Aurélio A. Heckert</a>
  <span class="org">Colibre</span>
</div>

Referências

Mais de CSS

  • HTML simples com XML e CSS - Neste texto, Elcio Ferreira fala das facilidades e do poder de se usar XHTML em termos de coerência, estrutura e flexibilidade do documento. Também trata do uso da formatação em um documento separado, no caso, o CSS, para facilitar a manutenção do site. Além é claro de tratar questões como o posicionamento de elementos do site, abolindo o uso das tabelas com essa finalidade.
  • Informação e Formatação; As duas camadas de desenvolvimento web - O texto do Diego Eis fortalece a necessidade de segmentação de um site nas camadas de informação (HTML) e formatação (CSS), o que traz as vantagens de "1. Facilidade de Manutenção [e] 2. Maior produtividade". Além de citar algumas péssimas situações das quais o programador pode se livrar por usar o CSS.
  • Centralizando um objeto na Horizontal e Vertical com CSS - Neste texto, Diego Eis apresenta um exemplo simples de posicionamento de imagens no centro da tela, trabalhando assim com alguns atributos CSS, como o top, margin, etc.
  • Criando um Menu Horizontal com CSS - De forma bem simples, Diego Eis apresenta o passo-a-passo da construção de um menu horizontal simples, com o uso de atributos como o float, padding, list, etc.

Tableless

Em seu texto "O que é Tableless?" acessível em http://www.tableless.com.br/o_que_e_tableless, de 2005, Diego Eis conta como alguns padrões tiveram que ser criados para possibilitar a continuidade da livre troca de informações na Internet. Devido a falta de padrões que unificasse a de cada browser, o uso de tabelas para posicionamento de elementos do layout de sites se propagou, mas que agora é uma prática condenável devido a existência de padrões que determinam a modularização de um site em: 1 - Informação, 2 - Formatação, e ainda, 3 - Comportamento (JavaScript e Ajax). Ou seja, tableless é o método de se criar sites que siga a modularização citada anteriormente.

Em seu texto "Site em Ajax? Site em Flash? Pergunta ruim", acessível em http://www.tableless.com.br/site-em-ajax-site-em-flash-pergunta-ruim, Elcio Ferreira explica que a funcionalidade do HTML e a do Ajax ou Flash são diferentes e relata quando usar cada um deles, ou seja, "não faça sites [aspas]em Ajax[aspas], nem sites [aspas]em Flash[aspas]. Faça sites com os padrões web, e use Ajax ou Flash onde isso for realmente ajudar seus usuários", como escreveu o autor do texto.

Um bom exercício para praticar o Tableless é refazer um layout de site construído originalmente com tabelas, usando-se de CSS para fazer a formatação e posicionamento dos elementos do layout. Um site com layout simples que pode ser usado é o do Google, que ainda usa tabelas e não é compatível com o padrões especificados pela W3C.

Acessibilidade

Entende-se como Web Acessibilidade a possibilidade de uso da Web por pessoas com deficiências. Dentre essas deficiências (totais ou parciais) pode-se citar a visual, auditiva, motora, de entendimento e interpretação de textos, dentre outras.

O site brasileiro Da Silva é um avaliador que indica se o seu site é ou não acessível. Além disso, o site apresenta as vantagens de se manter um site acessível. Dessas vantagens destaca-se a possibilidade de se adaptar a diferentes navegadores, inclusive os mais velhos; inclusão de pessoas deficientes, aumento os usuários do site e de possíveis anunciantes. Veja o artigo em http://www.dasilva.org.br/?itemid=11.

A Colivre também chama a atenção para a necessidade de criação documentos semanticamente coerentes, tanto para se aproveitar da boa indexação em mecanismos de busca (Web Semântica) quanto para garantir o bom uso do site por leitores de tela, programas usados por pessoas com deficiência, dentre outros facilitadores.

O vídeo "Acessibilidade Web: Custo ou benefício" que pode ser baixado a patir do link http://acessodigital.net/video.html é um bom recurso de conscientização de profissionais para o uso de técnicas para melhor acessibilidade de conteúdos Web.

A seguir, algumas diretrizes que devem ser seguidas para assegurar a acessibilidade de seu site acessível, segundo o W3C - Web Accessibility Initiative (WAI), em sua tradução para o português (em negrito) disponível em http://www.utad.pt/wai/wai-pageauth.html:

  1. Fornecer alternativas equivalentes ao conteúdo áudio visual
    • Apesar do conteúdo sonoro e visual ser importante para pessoas que não enxergam ou que não compreendem bem a mensagem escrita, respectivamente, devem ser acompanhados de informações que tradução a funcionalidade do áudio ou vídeo usado.
    • EX: Use atributo alt nas tags img.
  2. Não se utilizar apenas cor
    • Como algumas pessoas tem dificuldades de diferenciar cores, deve-se sempre usar contrastes e textos adicionais para as informações transmitidas pelas cores usadas.
    • EX: Não solicite que entradas de formulário do usuário do tipo "selecione umas das opções em vermelho". Use display: none para textos que indiquem início e fim de exemplos, menus, etc.
  3. Utilizar corretamente as tags e folhas de estilo
    • Usar cada elemento ou tag para a sua finalidade correta para melhor estruturação semântica do documento.
    • EX: Utilizar H1 para títulos e os demais para as subseções e nunca os usar para conseguir efeitos de fonte; construir listas com ul ou ol, li; usar o font do CSS e não o do HTML; usar o DOCTYPE para se definir o tipo de documento, etc.
  4. Indicar claramente qual a língua utilizada
    • Priorizando pessoas com dificuldades de audição e de aprendizado, a língua do documento deve está explícita para otimizar o funcionamento de programas sintetizadores de voz e de baille.
    • EX: definir o metadado lang do HTML; escrever por extenso o significado das siglas em sua primeira ocorrência; sinalizar mudanças de língua no texto com <span lang="en"> ou <q lang="it">, etc.
  5. Criar tabelas passíveis de transformação harmoniosa
    • As tabelas devem ser usadas para formatação de dados tabulares e não para posicionamento de elementos em benefício de pessoas que vêem parte da tela por vez ou que precisam de software leitor de tela para visitar as células da tabela.
    • EX: diferenciar as células de dados e de cabeçalho com td e th respectivamente; só utilizar o th para o cabeçalho e não destacar conteúdo de células de dados; utilizar o atribute summary da tag table para descrever o conteúdo da tabela, etc.
  6. Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
    • Deve-se usar técnicas que permitam que os navegadores antigos apresentem satisfatoriamente o conteúdo gerado pela nova tecnologia (scripts, applets, folhas de estilo, etc).
    • EX: Uso de páginas alternativas; assegurar a boa interpretação do texto sem o CSS; uso de alt no elemento do applet; garantir que as entradas sejam independentes do dispositivo, sendo este escolhido pelo usuário, etc.
  7. Assegurar o controle do usuário sobre as alterações temporais do conteúdo
    • Algumas pessoas com deficiência de concentração ou cognitivas tem a leitura da página prejudicada na existência de muito movimento. Outras pessoas com dificuldades motoras não conseguem acessar conteúdos em movimento, ou os leitores de tela não conseguem captar links que piscam.
    • EX: Assegurar pouco ou nenhum movimento do conteúdo; evitar as atualizações automáticas do site, etc.
  8. Assegurar a acessibilidade direta de interfaces do usuário integradas
    • Caso a aplicação tenha interfase prórpia (que não utilize a do navegador), assegurar que os conceitos de: acesso independente de dispositivos, operacionalidade pelo teclado e verbalização, etc.
  9. Pautar a concepção pela independência diante de dispositivos
    • EX: usar mapas de imagens sediados no cliente; fornecer atalhos de teclado que apontem para links, principalmente dos contidos em imagens; assegurar independência de dispositivos de entrada; etc.
  10. Utilizar soluções de transição
    • As vezes, mudanças de conteúdo e surgimento de janelas não são captadas por leitores de tela e essas transições devem ser sinalzadas.
    • EX: Evitar aparecimento e sobreposição de janelas; Informar mudanças no conteúdo do site; Escrever os labels e controles de formulários em uma mesma linha, etc.
  11. Utilizar as tecnologias e as diretivas do W3C
    • Deve-se utilizar das tecnologias abertamente desenvolvidas pela W3C para promover sites acessíveis priorizando por versões mais recentes. No caso de impossibilidade de uso dessas técnicas, fornecer página alternativa com as informações do site.
  12. Fornecer contexto e orientações
    • Para facilitar o entendimento do site por pessoas que têm deficiencias cognitivas e visuais, é necessário que elementos complexos tenham seu contexto e ligações explicitadas.
    • EX: associar cada label de um formulário ao seu identificador relacionado com o for: <input type="checkbox" name="lang" value="HTML" id="f_lang_html" checked="checked" /> e <label for="f_lang_html">HTML</label>; identificar cada frame com um título, etc.
  13. Fornecer mecanismos de navegação claros
    • Mapas de sítios e outros facilitadores de navegação e localização do site são funcionalidades que beneficiam a todos os usuários, inclusive deficiencias cognitivas e visuais.
    • EX: Dá nomes semânticos para os links para que por si só já representem a natureza do conteúdo a ser visitado; criar mapa do site; fornecer diferentes opções de pesquisa no site; fornecer barras de navegação, etc.
  14. Assegurar a clareza e a simplicidade dos documentos
    • Empregar linguagem simples no site para a transmissão das informações também é útil para todos os usuários, especialmente para pessoas com dificuldades de compreenção, leitura e ainda estrangeiros.
    • EX: usar linguagem clara; coplementar o site com informações sonoras e gráficas; dispor as páginas e informações de forma uniforme ao longo do site.

Para mais informações acesse as diretivas completas no site do W3C.

Compatibilidade entre Browsers

FALTA

Uso Artístico de Cores

Veja o tópico cores: Cores
Topic attachments
I Attachment Action Size Date Who Comment
layout-dark_ritual.tar.gzgz layout-dark_ritual.tar.gz manage 28.7 K 04 Jun 2008 - 16:25 AurelioAHeckert  
Edit | Attach | Print version | History: r13 < r12 < r11 < r10 | Backlinks | View wiki text | Edit wiki text | More topic actions
Topic revision: r13 - 13 Jun 2008, MonicaPaz
 

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Wiki-Colivre? Send feedback