Faculdade de Excelência Educacional do Rio Grande do Norte Padrões Curso: Desenvolvimento de Sistemas para Internet Disciplina: Tecnologia Hipermídia e Multimídia Profa. Rudson [email protected] apostilas.wikidot.com/hipermidia Visão geral W3C – criado em 1994 para lidar com questões de padronização do ambiente Web • Dar benefícios aos usuários • Assegurar a viabilidade dos documentos publicados na Web ao longo do tempo A adoção de padrões dá maior dinamismo ao desenvolvimento de sítios/docs Web, além de permitir um melhor compartilhamento das informações Padrões Vantagens da adoção dos padrões Web • Liberdade • Estabilidade • Acessibilidade • Simplicidade • Facilidade de criação e manutenção Características Facilidade de navegação • Elementos de sua interface sejam operáveis por qualquer pessoa Conteúdo e os controles devem ser de fácil identificação e auto-explicativos Conteúdo deve ser perceptível a qualquer pessoa, independente das condições de acesso Utilizar tecnologias compatíveis com os dispositivos de visualização Principais Padrões Padrões desenvolvidos pela W3C: • HTML (Hyper Text Markup Language) • XML (Extensible Markup Language) • XHTML (Extensible HyperText Markup Language • CSS (Cascading Style Sheets) • DOM (Document Object Model) • etc. HTML Linguagem de marcação que descreve a estrutura, o conteúdo e a apresentação de um documento e sua relação com outros documentos Apresenta uma informação e vinculá ela a outros recursos: • texto, áudio, vídeo, gráficos, etc. Permite que várias informações sejam exibidas de forma simultânea Composto Informações e Tags HTML Tags (rótulos) • • • • Elementos que compõe a estrutura de um documento HTML • Elementos de marcação que definirão como os navegadores exibirão as informações contidas nas páginas do sítio Uma tag sempre está entre os caracteres: “<” e “>” Na maioria das vezes, uma tag possui uma tag de fechamento • Exemplo: <body> ... </body> Podem possuir atributos, que definem suas características ou propriedades Exemplo: Documento HTML simples <html> <head> <title> Hello Class! </title> </head> <body> <h1> Oi! <h1> <p> Meu <em> primeiro </em> <strong> documento </strong> HTML </p> </body> </html> XML Desenvolvida para solucionar limitações da HTML Linguagem de marcação para: descrição, captura, processamento e publicação de informações em diferentes tipos de mídias É um método para estruturar dados Fornece meios para introduzir informação específica relacionada com o contexto em que os documentos são utilizados • Facilitando compreensão e troca XML Também utiliza tags e atributos • Não especifica o que cada tag e atributo • significam (como na HTML) As tags delimitam os trechos de dados • Interpretação fica a cargo da aplicação que os lê HTML = descreve a aparência e as ações em um documento XML = descreve o que cada trecho representa (conteúdo do documento) Exemplo de XML <?xml version="1.1"?> <!-- both namespace prefixes are available throughout --> <bk:book xmlns:bk='urn:loc.gov:books' xmlns:isbn='urn:ISBN:0-395-36341-6'> <bk:title>Cheaper by the Dozen</bk:title> <isbn:number>1568491379</isbn:number> </bk:book> XHTML Reformulação da versão 4.01 da HTML baseada na XML Aproveita as vantagens de uma linguagem de descrição de conteúdos com compatibilidade com quase tudo na Web • Garantia de uma fácil transição Suporta todas as funcionalidades da HTML 4.01 com a aplicação das regras mais rígidas da sintaxe do XML XHTML É uma linguagem independente de dispositivos Não é tão tolerante com a HTML • • • • Todas as tags possuem uma tag de fechamento Nome da tag de fechamento = Nome da tag de abertura precedido do caractere “/” As tags devem ser escritas em minúsculas O valor de um atributo da tag deve ser delimitado por aspas duplas • nome_atributo=“valor” Exemplo XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd"> CSS Padrão de formatação para documentos HTML/XHTML Permite: • Maior versatilidade no desenvolvimento de • • design para sítios sem aumentar o seu tamanho Controle maior sobre os atributos tipográficos (tamanho/cor das fontes, espaçamento linhas/caracteres) Sobreposição de texto sobre texto/imagem • Utilização de layers (camadas) CSS Com o CSS, a HTML/XHTML preocupase somente em estruturar o documento em blocos de informação CSS responsável pelo controle do design Vantagens • Consegue-se separar o estilo do conteúdo • Facilidade na criação e manutenção do design • Mais simples modificar a página de estilo dos que todos os documentos CSS Vantagens (Continuação) • Estilos diferentes e sofisticados podem ser aplicados ao mesmo documento • Autor pode redirecionar seu conteúdo para novos formatos • Consistência • Garantia de que todos os documentos tenham o mesmo desenho e arranjo • Linguagem simples • Descrição de um estilo, não se preocupando com fatores específicos da HTML/XHTML CSS p { text-align: center; color: black; font-family: arial } <h1 class="center"> This heading will be centeraligned </h1><p class="center"> This paragraph will also be center-aligned. </p> DOM Interface de programação de aplicativos para documentos HTML, XHTML e XML É a definição da estrutura lógica (modelo de estrutura) dos documentos e o meio pelo qual um documento é acessado e manipulado Seu objetivo é proporcionar uma interface de programação padrão que possa ser utilizada em um grande número de ambientes e aplicativos DOM Propriedade importante • Isomorfismo estrutural: se duas implementações quaisquer de DOM forem utilizadas para criar uma representação de um mesmo documento, elas irão criar um mesmo modelo de estrutura com exatamente os mesmos objetos e relacionamentos
Download
