Profa. Rudson rudsondant@gmail.com apostilas.wikidot.com/hipermidia 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 rudsondant@gmail.com 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 <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/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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 preocupa- se somente em estruturar o documento em blocos de informação CSS responsável pelo controle do design Consegue-se separar o estilo do conteúdo Vantagens 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 center-aligned </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