Tarlis Portela Web Design XHMTL

Transcrição

1 Tarlis Portela Web Design XHMTL

2 Web Design CONCEITOS 01

3 01 Todas as linguagens de marcação da web são baseadas em SGML, uma metalinguagem complexa, projetada para máquinas com a finalidade de servir de base para criação de outras linguagens; O SGML foi usado para criar a XML (Extensible Markup Language), também uma metalinguagem, porém bem mais simples.

4 01 Com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação; XHTML foi criado dentro deste conceito e por isso é uma aplicação XML; As tags e atributos do XHTML foram criadas ("inventadas") aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras.

5 01 XHTML O que é? Para que serve? Por que adotar?

6 01 O XHTML, ou extensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML, baseada em XML; Este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc); Sua intenção é melhorar a acessibilidade; Nada mais é do que um HTML "puro, claro e limpo".

7 01 Vantagens Compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos; XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs"; Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente.

8 01 Vantagens O tempo de carregamento de uma página XHTML é mais rápido pois os browsers tem a interpretar uma página limpa sem ter que interpretar e decidir sobre renderização de erros de código; Uma página XHTML é mais acessível aos browsers e aplicações de usuário padrão incrementando a interoperabilidade e a portabilidade dos documentos web; Uma página XHTML é totalmente compatível com todas as aplicações de usuários para HTML, antigas e já ultrapassadas.

9 Web Design ESTRUTURA 02

10 02 Diferenças: XHTML X HTML Todas as tags devem ser escritas em letras minúsculas; As tags devem estar convenientemente aninhadas; Os documentos devem ser bem formados; O uso de tags de fechamento é obrigatório; Elementos vazios devem ser fechados; Diferenças para os atributos.

11 02 Todas as tags devem ser escritas em letras minúsculas; De vez que XHTML é uma aplicação XML, também é sensível ao tamanho de caixa. Errado: Certo: <DIV><P>Aqui um texto</p></div> <div><p>aqui um texto</p></div>

12 02 As tags devem estar convenientemente aninhadas Errado: Certo: <div><em><p> Aqui um texto negrito </em></p></div> <div><em><p> Aqui um texto negrito </p></em></div>

13 02 Os documentos devem ser bem formados; Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>; A estrutura básica do documento deve ser conforme: <html> <head>... </head> <body>... </body> </html>

14 02 O uso de tags de fechamento é obrigatório; Errado: Certo: <p>um parágrafo. <p>outro parágrafo. <p>um parágrafo.</p> <p>outro parágrafo.</p>

15 02 Elementos vazios devem ser fechados; a tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>; Errado: <br> <hr> <img src="imagem.gif" alt="minha imagem "> Certo: <br /> <hr /> <img src="imagem.gif" alt="minhaimagem " />

16 02 Diferenças para os atributos Nomes de atributos: Os atributos também são sensíveis ao tamanho de caixa; Errado: Certo: <td ROWSPAN="3"> <td rowspan="3">

17 02 Diferenças para os atributos Valores de atributos: Os valores de atributos devem estar entre "aspas"; Errado: Certo: <td rowspan=3> <td rowspan="3">

18 02 Diferenças para os atributos Sintaxe de atributos: A sintaxe para atributos deve ser escrita por completo; Errado: Certo: <input checked /> <input checked="checked" />

19 02 Abaixo uma relação dos atributos que se enquadram nesta recomendação: compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

20 02 Diferenças para os atributos Os atributos id e name: O HTML define o atributo name para os elementos a, applet, form, frame, iframe, img, e map; HTML também introduziu o atribute id; Ambos os atributos foram projetados para serem usados como identificadores.

21 02 Diferenças para os atributos Os atributos id e name: Em XML, os identificadores são exclusivamente do tipo ID; E,poderá existir somente um atributo do tipo ID por elemento; Além disso um determinado identificador deve ser único no documento.

22 02 Diferenças para os atributos Os atributos id e name: Errado: <img src="img.gif" name="minha_imagem" /> Certo: <img src="img.gif" id="minha_imagem" /> Por razões de compatibilidade com browsers antigos você pode usar ambos os atributos: <img src="img.gif" id="minha_imagem" name="minha_imagem" />

23 02 Diferenças para os atributos O atributo lang: O atributo lang destina-se a definir a língua em que foi escrito o documento HTML; E o atributo xml:lang para definir a língua em que foi escrito o documento XML.

24 02 Pontos de âncoras Em HTML para criar um ponto de âncora, associamos um nome ao elemento <a>: <a name="topo" >Início</a> Em XHTML adicione o atributo id: <a id="topo" name="topo" >Início</a>

25 02 O atributo alt para imagens Em XHTML o uso do atributo alt para imagens é obrigatório <img src="img.gif" alt ="minha_imagem" /> Se tratar-se de uma imagem decorativa pode-se usar o atributo alt vazio: <img src="img.gif" alt =" " />

26 02 Caracter & (ampersand) Codifique o & ( e comercial) Errado: Certo: Comércio & Exportação Comércio & Exportação

27 02 Elementos obrigatórios em um documento XHTML É obrigatório a declaração do DOCTYPE assim como a existências dos elementos <html>, <head>, <title> e <body>; A declaração DOCTYPE não faz parte da marcação XHTML e como tal não é também um elemento, razão pela qual não há necessidade de tag de fechamento.

28 02 <!DOCTYPE bla..bla..bla> <html xmlns=" <head> <title>título do odcumento</title> </head> <body> Conteúdo do documento </body> </html>

29 02 DOCTYPE Definição do tipo de documento (Document Type Definitions DTD); Uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.

30 02 Tipos de DOCTYPE São três os tipos de DOCTYPE para XHTML: STRICT TRANSITIONAL FRAMESET

31 02 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN" " strict.dtd"> Esta é a mais rígida das declarações. Os documentos XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo as recomendações do W3C; São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação.

32 02 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN" " transitional.dtd"> Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

33 02 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN" " ml1-frameset.dtd"> Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.

34 02 Validação do documento XHTML W3C disponibiliza um validador gratuito para documentos XHTML; Revisor do código que você cria; Fornece um relatório completo e detalhado das não conformidades por ventura existentes; Excelente ferramenta para usar durante a elaboração ou migração do documento para XHTML.

35 02

36 02 Namespaces Nos primórdios do HTML os diferentes fabricantes acrescentaram elementos e atributos ao HTML ao seu gosto e conveniências. Este procedimento acabou trazendo um verdadeiro caos; Permite que projetistas de linguagens baseadas em XML, definam seus próprios elementos.

37 02 Namespaces <html xmlns=" xml:lang="en" lang="en"> HTML namespace: MathML namespace:

38 02 Namespaces <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>virtual Library</title> </head> <body> <p>moved to <a href=" </body> </html>

39 Web Design METADADOS 03

40 03 Metadados Meta dados incorporados ao código XHTML são, na verdade, estruturas de dados sobre os próprios dados, uma breve descrição do conteúdo da página, seu autor, data de criação, linguagem e outras informações relevantes.

41 03 Metadados Se estas tags forem usadas correta e racionalmente elas podem aumentar a relevância nos resultados de busca o que é vantajoso tanto para o proprietário do site quanto para seu usuário.

42 03 Prós e Contras Mantenha as meta tags simples e concisas Descrições muito longas e palavras-chave em excesso serão ignoradas por alguns buscadores; Sistemas de indexação podem também identificar o chamado "metatag spamming", onde as palavras-chave são repetidas várias vezes, penalizando, assim, o site em seu ranking.

43 03 Prós e Contras Dê prioridade às palavras-chave mais importantes Uma vez que alguns sistemas de indexação leem somente algumas das keywords é importante listar as mais importantes primeiro.

44 03 Prós e Contras Evite o uso da meta tag REFRESH para redirecionamento Porque ela tende a confundir os bancos de dados dos sistemas de indexação e depois porque confundem também ao usuário.

45 03 Prós e Contras Não abuse das meta tags Meta tags fornecem informações usadas para categorizar, priorizar e rankear websites além de controlar seu conteúdo pelos webmasters e/ou autores; Muitos sistemas de indexação são "inteligentes" o suficientes para perceber quando há abuso, penalizando o site em sua colocação no ranking.

46 03 Prós e Contras Para o Google, elas não existem! Devido à grande quatidade de "metatag spamming" o robô de busca do Google foi programado para ignorá-las! Ele indexa parte do conteúdo da própria página em seu banco de dados ao invés da "description".

47 03 Especificações de meta tags Author O nome do autor da página. <meta name="author" content="andré" />

48 03 Especificações de meta tags Cache-Control Esta tag é apenas reconhecida pelo http 1.1 e permite os seguintes valores: Public: os dados da página podem ser armazenados de forma compartilhada, isto é, será utilizado por diferentes usuários de um mesmo browser; Private: o cache é armazenado para um usuário. No-Cache: a página não é armazenada em Cache. No-Store: é feito um cache temporário, a página não é arquivada. <meta http-equiv="cache-control" content="no-cache" />

49 03 Especificações de meta tags Content-language Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada pelos motores de busca para categorizar por idioma. <meta http-equiv="content-language" content="pt-br, en-us, fr" />

50 03 Especificações de meta tags Content-type Define o tipo de conteúdo da página e o tipo de codificação de caracteres. Pode-se dizer que é a meta tag mais importante, sempre deve ser usada. <meta http-equiv="content-type" content="text/html; charset=utf-8" />

51 03 Especificações de meta tags CopyRight Como o nome já diz declara o direito autoral da página. <meta name="copyright" content=" 2004 tex texin" />

52 03 Especificações de meta tags Description Contém uma descrição da página <meta name="description" content="...resumo da página..." />

53 03 Especificações de meta tags Expires A data e a hora depois dos quais o documento deve ser considerado como expirado. Uma data ilegal como, por exemplo "0" é considerada como "agora"; Configurar "Expires" como "0" pode também ser usado para forçar uma nova checagem a cada visita do robô de busca. <meta http-equiv="expires" content = "Mon, 22 jul :12:01 GMT" />

54 03 Especificações de meta tags Keywords As keywords tipicamente são usadas por alguns motores de busca para indexar os documentos juntamente com informações encontradas em seu título e body. <meta name="keywords" content="..palavraschave do documento" />

55 03 Especificações de meta tags Pragma no-cache Faz com que o navegador não armazene a página em cache. Diferencia-se de "cachecontrol:no-cache" pelo fato de ser reconhecida por todas as versões do HTTP. <meta http-equiv="pragma" content="nocache" />

56 03 Especificações de meta tags Refresh Especifica um tempo em segundos para o browser atualizar a página, opcionalmente pode-se adicionar uma URL para a qual será redirecionado. <meta http-equiv="refresh" content= "15;url= />

57 03 Especificações de meta tags Robots Especifica informações de indexação para os robôs de busca. <meta name="robots" content="all" />

58 03 Especificações de meta tags Suporta os seguintes valores: All: Valor default, significa vazio, o robô de busca não recebe nenhuma informação; Index: Os robôs de busca podem incluir a página normalmente; Follow: Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém; NoIndex: Os links podem ser seguidos, mas a página não é indexada; NoFollow: A página é indexada, mas os links não são seguidos; None: Os robôs podem ignorar a página; NoArchive (Apenas Google): A página não é arquivada.

59 03 Especificações de meta tags GoogleBoot Em adição com a meta tag "Robots", o Google suporta um commando "GoogleBoot". Dizendo ao google que não quer que a página seja indexada. Nota: A página continuará a ser indexada pelos outros buscadores.

60 03 Especificações de meta tags Imagetoolbar No internet explorer elimina aquela pequena barra de opções que aparece ao passarmos o mouse por cima de uma imagem. <meta http-equiv="imagetoolbar" content="no" />

61 03 Especificações de meta tags Generator Indica o software usado para criar a página como forma de medir a popularidade do produto. <meta name="generator" content="dreamweaver 8" />

62 03 Especificações de meta tags Revisit-After Diz para os servidores proxy refazer o cache da página depois de um tempo específico; Esta meta tag não faz com que os motores de busca voltem para sua página, eles fazem isso em períodos aleatórios. <meta name="revisit-after" content="15 days" />

63 03 Especificações de meta tags Rating Esta tag funciona para classificar a página por censura, assim como no cinema, suporta os valores: General: para qualquer idade; 14 years: censura 14 anos; Mature: acima de 18 anos. <meta name="rating" content="general" />

64 03 Especificações de meta tags Content-Script-Type Define o tipo padrão da linguagem de script do documento. <meta http-equiv="content-script-type" content="text/javascript" />

65 03 Especificações de meta tags Content-Style-Type Define o tipo padrão de linguagem para estilização do documento. <meta http-equiv="content-style-type" content="text/css" />

66 Web Design HTML XHMTL 04

67 04 Conversão de HTML para XHTML Adicionar a seguinte linha de definição Doctype no início do arquivo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd">

68 04 Conversão de HTML para XHTML Converter todas as tags e atributos escritos em letras maiúsculas para minúsculas.; Colocar todos os valores dos atributos entre aspas duplas; Fechar as tags vazias; Validar o XHTML.

69 Tarlis Portela Web Design XHMTL