Webstandards, Tableless, CSS e Acessibilidade - PDF
Download "Webstandards, Tableless, CSS e Acessibilidade"
Camila Vilarinho Casqueira
1 Webstandards, Tableless, CSS e Acessibilidade I202 Um curso Infnet utilizando a metodologia NETLEARN. INSTITUTO INFNET - 1
2 Sobre o Instituto Infnet Histórico Parcerias Treinamento aberto Treinamento fechado Contato 2 NETLEARN - INTRODUÇÃO Histórico: Fundado em outubro de 1994, o Infnet é hoje a empresa líder em treinamento de Tecnologia da Informação (TI) e Design Digital. Além de servir como referência no aperfeiçoamento e reciclagem de profissionais de informática, o Instituto Infnet capacita funcionários para dezenas de empresas, como Embratel, Furnas, Telerj, BNDES, Fleischmann Royal, Origin, FGV, Xerox, De Plá, Ponto Frio etc. Parcerias: O Instituto Infnet é parceiro educacional da Adobe, Macromedia, Microsoft, RealNetworks e RNP, sendo também parceiro do portal TI Master ( que é dirigido ao desenvolvimento profissional na área de TI. Educação e treinamento: O Instituto oferece formações completas em TI e Design Digital, que podem ser amplamente conhecidas em nosso site, Os cursos são oferecidos tanto em turmas abertas, nas salas de aula do Instituto, ou em empresas. O Instituto também tem um longo e bem sucedido histórico de cursos personalizados para empresas, voltados para atender a necessidades específicas. Para entrar em contato com o Infnet, utilize nossa Central de Atendimento, pelo (21) , ou envie para INSTITUTO INFNET - 2
3 MÓDULO DE INTRODUÇÃO INTRODUÇÃO DA UA DESCRIÇÃO CONCEITOS BÁSICOS NETLEARN ONE 1 a UNIDADE DE APRENDIZADO BLOCO DE CONSTRUÇÃO DO APRENDIZADO TEORIA EXERCÍCIOS UA BCA EXEMPLO LAB REFERÊNCIAS BCA BLOCO DE CONSTRUÇÃO DO APRENDIZADO TEORIA EXERCÍCIOS EXEMPLO ESTUDO DE CASOS LAB PROJETO JÚNIOR APRESENTAÇÃO APRESENTAÇÃO 3 NETLEARN - INTRODUÇÃO NETLEARN ONE : O método NETLEARN ONE foi desenvolvido pelo Infnet para que os alunos obtivessem um grau de entendimento e retenção das tecnologias ensinadas muito superior aos cursos tradicionais. Sua criação teve por base uma longa experiência no ensino de TI (Tecnologia da Informação) e um profundo estudo das necessidades e dificuldades dos alunos em sala. O método não somente permite uma melhor compreensão das aulas, mas um aproveitamento superior dos conhecimentos adquiridos quando aplicados em ambientes reais de produção. Seguindo a risca as instruções de seus professores, profissionais dos mais competentes, você vai tirar proveito total do mais eficaz método de ensino-aprendizagem de tecnologias intranet/internet disponível hoje. O método NETLEARN é patenteado pelo Infnet e sua utilização sem autorização escrita e explícita do Infnet constitui crime previsto em lei. INSTITUTO INFNET - 3
4 Observação Importante: O método NETLEARN visa trazer o melhor para os alunos. E nós sabemos que para se ter o melhor é preciso que se tenha flexibilidade. Cada assunto tem suas características específicas. Cada curso tem suas necessidades. Por isso, nem sempre todos os módulos do NETLEARN estarão presentes em todos os cursos. 4 NETLEARN - INTRODUÇÃO NETLEARN: O objetivo primordial do Infnet é que você efetivamente aprenda. A utilização da metodologia NETLEARN facilita o processo de aprendizado e aumenta a retenção do conhecimento. Entretanto, nem todas as etapas da metodologia são benéficas para todos os tipos de cursos ou assuntos. A generalização excessiva não traz benefícios para os alunos. Por isso, o Infnet não vai deixar de oferecer o melhor para você por falta de flexibilidade. INSTITUTO INFNET - 4
5 A apostila Sua apostila é dividida em 2 partes: os slides, na parte de cima de cada página as anotações, na parte de baixo Slides: São os slides que o professor vai utilizar durante o curso. Anotações: Informações complementares, zoom no código de programas e espaço para você escrever 5 NETLEARN - INTRODUÇÃO Slides: Os slides de sua apostila são os mesmos usados pelo professor durante o curso. Você poderá acompanhar todas as aulas através deles e estudar a matéria posteriormente com este material. Anotações: Abaixo dos slides, há um espaço chamado de anotações. Ele tem vários propósitos: Conter informações complementares ao conteúdo do slide, muitas vezes evitando que você precise anotar tudo o que o professor diz em aula. Servir de referência em tópicos mais extensos, permitindo que você se aprofunde na matéria após o término do curso. Repetir o código de programas, imagens e telas capturadas que ficaram muito pequeninas no slide, facilitando sua leitura e o acompanhamento das aulas. Ser um espaço para você escrever suas próprias observações e perguntas. INSTITUTO INFNET - 5
6 Logística Horários Computadores e Rede Banheiros Cigarro 6 NETLEARN - INTRODUÇÃO INSTITUTO INFNET - 6
7 Professor Nome Experiência Alunos Apresentações Nome Empresa onde trabalha e cargo Expectativas 7 NETLEARN - INTRODUÇÃO Professores e colegas: Os seus professores são profissionais de comprovada experiência prática nas tecnologias que serão ensinadas durante o curso. Você deve ficar totalmente à vontade para tirar suas dúvidas. Durante o horário de aula o professor estará a seu inteiro dispor para esclarecer quaisquer tópicos relacionados ao conteúdo do curso e a compartilhar sua experiência com todos os alunos. Ao final do curso você será responsável por uma avaliação do professor. O Infnet lhe agradeceria se você estivesse atento às principais características de seus professores: Disponibilidade, dedicação, atenção, cordialidade, conhecimento da matéria, didática, etc. Os seus colegas de classe são também uma importante fonte de conhecimento. Muitos alunos que se conhecem nos cursos do Instituto Infnet tornam-se amigos (e até sócios!) e ajudam-se mutuamente nas dúvidas que surgem com o uso das tecnologias aprendidas. Anotando o de seus colegas, você poderá no futuro manter bons relacionamentos. INSTITUTO INFNET - 7
8 UA 1: WebStandards 7 BCA 1.1 Introdução aos Webstandards 9 Estrutura e Forma Separando a estrutura da forma Porque padrões? Quando falamos de standards para a Web, queremos dizer: BCA 1.2 Os padrões 18 O padrão HTML A volta da Semântica O padrão XML Definição de Tipo de Documento DTDs Disponíveis Padrão XHTML Comparação HTML x XHTML XHTML no Dreamweaver Convertendo HTML em XHTML BCA 1.3 Acessibilidade 38 Desenho Universal Tecnologia Assistiva Recomendações do W3C Roteiro para construção de sites Acessíveis Índice UA 2: DHTML 51 BCA 2.1 JavaScript em ação 53 Como funciona o JavaScript Objetos de um Browser Inserindo um JavaScript A tag <script> Links com JavaScript Links que chamam funções JavaScript Externo Apontando para um.js UA 3: Cascading Style Sheets 74 BCA 3.1 Entendendo as CSS 76 Definindo CSS Gerações CSS Métodos de Especificação CSS - Inline CSS - Embedding CSS - Linking CSS - Importing BCA 3.2 Sintaxe das CSS 86 A regra CSS e sua Sintaxe Tipos de Seletor Seletores simples Seletores Múltiplos Seletores Contextuais Seletores do tipo classe Pseudoclasse Seletores do tipo ID Propriedades e Valores BCA.3.3 Style Switchers JavaScript e CSS 101 Uma página, vários estilos Folhas de estilo alternativas O JavaScript do Switcher Cookies Colocando tudo junto UA 4: Metodologia Tableless 109 BCA 4.1 Introdução ao Tableless 111 Box Model Margin e Padding Float Clear Mudando gradativamente (Tabelas x Layers) BCA 4.2 Positioning 128 Posicionamento Estático Posicionamento Absoluto Posicionamento Relativo Empilhamento de Camadas Empilhamento no Dreamweaver BCA 4.3 Manipulando Listas 138 Listas como Navegadores Manipulando Listas BCA 4.4 CSS Hacks 144 Exemplos de CSS Hacks INSTITUTO INFNET - 8
9 Objetivos do curso Formar alunos capazes de criar páginas utilizando formatação com CSS e tableless, capazes também de seguir estritamente os padrões oficiais da Web e de lidar com questões de acessibilidade. 9 NETLEARN - INTRODUÇÃO INSTITUTO INFNET - 9
10 1- Webstandards Unidade de Aprendizado INSTITUTO INFNET - 10
11 WebStandards Você aprenderá : A diferença entre estrutura e forma Por que da utilização da padrões? Quais padrões utilizar e suas principais características 11 UA WebStandards Nesta Unidade de Aprendizado, abordaremos conceitos básicos sobre a utilização de Webstandards na construção de páginas internet, estando o assunto dividido nos seguintes Blocos de Construção do Aprendizado (BCA): BCA 1.1 Introdução aos Webstandards Estrutura e Forma Separando a estrutura da forma Porque padrões? Quando falamos de standards para a Web, queremos dizer: BCA 1.2 Os padrões O padrão HTML A volta da Semântica O padrão XML Definição de Tipo de Documento DTDs Disponíveis Padrão XHTML Comparação HTML x XHTML XHTML no Dreamweaver Convertendo HTML em XHTML BCA 1.3 Acessibilidade Desenho Universal Tecnologia Assistiva Recomendações do W3C Roteiro para construção de sites Acessíveis INSTITUTO INFNET - 11
12 1.1- Introdução aos WebStandards Bloco de Construção do Aprendizado Vamos entender as diferenças entre a informação e sua formatação gráfica, como tornar nossas páginas mais leves, inteligentes e práticas, além de saber mais sobre por que devemos nos preocupar com a utilização de padrões e seus benefícios. INSTITUTO INFNET - 12
13 Estrutura e Forma A separação entre informação e formatação traz muitas vantagens: Facilidade de Manutenção Maior produtividade Interfaces mais leves Melhor integração com interpretadores (Search Engines,WAP, RSS, etc.) 13 BCA.1.1 Introdução aos WebStandards Estrutura e Forma Quando navegamos na internet, viajamos por uma variedade gigantesca de páginas que apresentam não só informações, mas uma série de objetos como por exemplo: textos, imagens, animações, vídeos, dentre outros. Quando dispostos em conjunto formam interfaces que guiam o usuário por um número incontável de informações e experiências. Se analisarmos mais a fundo essas páginas, iremos descobrir que cada um apresenta uma série de estruturas de código, tais como TABLE; DIV; FONT; P e outras que, ao se encadearem, são responsáveis tanto pelo posicionamento quanto pela aparência da interface. Todas essas formatações geram um volume de código muito grande, o que dificulta tanto a manutenção quanto a visualização. Com o passar do tempo, desenvolvedores perceberam a necessidade de se melhorar os documentos da Web, sendo fundamental que fossem mais fáceis de organizar; mais simples de se atualizar; mais leves de se navegar e que pudessem se integrar melhor com outros serviços. Começou-se então a separar a formatação gráfica dos elementos (cores, fontes, fundos, etc.) da estrutura básica da página (HTML ou XHTML). A utilização do CSS (Cascading Styles Sheets) foi fundamental para que fosse possível separar às formatações que lidavam com a estética das páginas, tais como cores, fontes, fundos em arquivos independentes. Essas Folhas de Estilo, com o passar do tempo, começaram a serem utilizadas também para tratar da posição dos objetos tornando nossas páginas mais leves e muito mais simples de atualizar. INSTITUTO INFNET - 13
14 Separando a estrutura da forma Um CSS para várias páginas Vários CSS para uma página (Style Switcher) 14 BCA.1.1 Introdução aos WebStandards Um CSS para várias páginas Ao separarmos as formatações gráficas de nossas páginas utilizando CSS (Cascading Styles Sheets), podemos gerenciar um maior número de documentos de uma forma mais simples. Um arquivo CSS pode controlar a interface de todos as páginas de um site, centralizando as alterações futuras em um único arquivo. Exemplo: Vários CSS para uma página Com tantos facilitadores, o CSS, conquistou rapidamente o gosto de desenvolvedores e designers ávidos por novidades e ferramentas que estendessem as possibilidades da interface Web. Uma das grandes tendências mundiais, se baseia na customização da página pelo usuário que modifica a forma de apresentação do conteúdo conforme seu gosto alterando fontes, fundos, imagens. Essa técnica chama de Style Switcher, combina CSS e JavaScript para trocar a aparência da página ao se alternar folhas de estilo pré-determinadas. Exemplo: INSTITUTO INFNET - 14
15 Separando a estrutura da forma Demonstração Um CSS para várias páginas 15 BCA.1.1 Introdução aos WebStandards INSTITUTO INFNET - 15
16 Separando a estrutura da forma Demonstração Vários CSS para uma página 16 BCA.1.1 Introdução aos WebStandards INSTITUTO INFNET - 16
17 Por que padrões? Tornar nossas páginas mais acessíveis Universalizar o conteúdo independente do navegador Reduzir os custos de produção Evitar múltiplas versões de cada página Facilitar o acesso de um maior número de dispositivos à Internet (PDA, Celular, TV); 17 BCA.1.1 Introdução aos WebStandards Por que padrões? O World Wide Web Consortium (W3C), em conjunto com outros grupos reguladores, estabeleceu um conjunto de tecnologias para criação e interpretação de conteúdo para a Web. Essas tecnologias, chamadas de Web Standards, foram criadas para beneficiar ao maior número possível de usuários, assim como facilitar a vida de desenvolvedores e designers para que pudessem gerar seus conteúdos com mais eficiência e agilidade. Durante muito tempo, essas regras não foram levadas em consideração pelos fabricantes de navegadores, gerando uma série de duvidas para ambos os lados. A dita Guerra dos Browsers dificultou muito, tanto para desenvolvedores quanto usuários que muitas vezes se perguntavam se estavam usando o navegador certo. Mas, em 1998, após um período de hegemonia do Internet Explorer mesmo sem respeitar muitos dos padrões estabelecidos pelo W3C, foi criado o Web Standards Project (WaSP). Um conjunto de profissionais de internet que se organizou com o objetivo de promover os Web Standards e encorajar os fabricantes de navegadores a fazer o mesmo, assegurando desse modo um acesso simples e com menos custos para todos, e ainda assegurar o futuro ao abraçar novas formas de distribuição tais como PDA, Celular e TV. Nota: A palavra standard significa padrão em inglês. INSTITUTO INFNET - 17
18 Quando falamos de standards para a Web, queremos dizer: Linguagens Estruturais XHTML 1.0 XHTML 1.1 XML 1.0 Linguagens de Apresentação CSS Nível 1 CSS Nível 2 CSS Nível 3 MathML 1.01 MathML 2.0 SVG 1.0 Modelos de Objeto DOM Nível 1 DOM Nível 2 Linguagens de Scripting ECMAScript BCA.1.1 Introdução aos WebStandards XHTML -Extensible Hypertext Markup Language XML -Extensible Markup Language CSS -Cascading Style Sheets DOM - Document Object Model MathML -Mathematical Markup Language SVG - Scalable Vector Graphics ECMAScript - Versão standard do JavaScript INSTITUTO INFNET - 18
19 Exercício teórico Resolva o questionário abaixo. 19 BCA.1.1 Introdução aos WebStandards Exercícios: 1) Quando citamos estrutura e forma estamos falando de quê? a) Como a estrutura dos Browsers suporta a forma das páginas HTML. b) Como dentro de uma estrutura de páginas podemos modificar a forma do CSS. c) A Estrutura seriam as informações enquanto que a forma os estilos gráficos. d) A estrutura dos documentos CSS se adequando a forma da página. 2) Qual seria a maior vantagem de se estar utilizando Webstandards? a) Nossas páginas poderiam ser vistas em um maior número de países. b) Estarmos criando páginas mais coerentes e práticas e ao mesmo tempo mais acessíveis. c) A facilidade que precisávamos para podermos utilizar CSS e JavaScript. d) Estar em dia com as novas tendências tecnológicas. 3) O que é uma página com Switcher? a) Página com um CSS que troca a aparência de todos os JavaScripts do documento. b) Página com um JavaScript que troca a aparência de todos os CSS s do documento. c) Página com um JavaScript que troca as folhas de CSS alterando automaticamente aparência do documento. d) Página com um CSS que troca um JavaScript alterando automaticamente aparência do documento. INSTITUTO INFNET - 19
20 O que já aprendemos? UA 1: WebStandards BCA 1.1: Introdução aos WebStandards 20 UA WebStandards Aprendemos neste BCA: A diferenciar tags de forma e de estrutura O porquê de se trabalhar com os WebStandards O que são WebStandards INSTITUTO INFNET - 20
21 1.2- Os padrões Bloco de Construção do Aprendizado Baseados nas tecnologias desenvolvidas pelo World Wide Web Consortium (W3C), mostraremos os padrões existentes para a criação de páginas Web, características específicas e aplicabilidade de cada um. INSTITUTO INFNET - 21
22 O Padrão HTML Hyper Text Markup Language Linguagem de marcação para produzir páginas na Internet; Utiliza marcas conhecidas como Tags ; Usada para apresentação das informações na tela do usuário; Tem sido utilizado de uma forma totalmente despadronizada por designers e desenvolvedores; 22 BCA.1.2 Os Padrões O padrão HTML A sigla HTML deriva da expressão Hyper Text Markup Language. Trata-se de uma linguagem de marcação utilizada para produzir páginas na Internet. Esses códigos podem ser interpretados pelos browsers para exibir as páginas. Ao contrário de outras linguagens estruturadas, o HTML utiliza etiquetas, marcações que são conhecidas como Tags, que consistem em breves instruções tendo uma marca de início e outro de final, mediante as quais se determinam à formatação do texto, inserção de imagens e demais elementos que compõem uma página HTML. Desde o seu início o HTML demonstrou ser uma eficiente linguagem para se padronizar informações. Os documentos que a princípio utilizavam essa linguagem provinham de instituições de ensino e tinham intuitos científicos. Com a comercialização da internet, os elementos que antes eram utilizados de maneira bem simples e padronizadas (Parágrafos, listas, headers, títulos) passaram por grandes distorções para viabilizar uma criatividade emergente. Essas modificações tornaram os documentos antes universais em peças de exposição restrita a navegadores que entendessem um maior número de formatações aninhadas. INSTITUTO INFNET - 22
23 A volta da Semântica Temos que usar as tags exatamente para o que foram criadas Tabelas nasceram para mostrar dados tabulares, não montar layouts Códigos semanticamente corretos geram interfaces leves e práticas Na verdade projetar com as Web standards diminui custos 23 BCA.1.2 Os Padrões Projetar em conformidade com os Webstandards simplifica a manutenção do código do Web site, porque está filosofia dispensa a necessidade de múltiplas versões para atender a diferentes browsers. Suas páginas terão longa vida e estarão libertas de tecnologias passageiras. Por isso temos que estar sempre estar utilizando a linguagem da melhor maneira possível, isso quer dizer: usar as tags exatamente para aquilo que elas foram criadas. Exemplo: Blocos de texto div Divisões de conteúdo. p - Parágrafos span - Seções em seu conteúdo Listas ul, ol e li - Listas, numeradas ou não. dl, dd, dt - Listas de definição Formatos b - Negrito i - Itálico big - Texto grande small - Texto pequeno sub - Subescrito. sup -Sobrescrito. Significado especial h1, h2, h3, - Títulos. Quanto menor h4, h5 e h6 o número, maior a importância. abbr -Abreviatura acronym -Acrônimo address - Informações sobre o autor blockquote - Uma citação longa q - Uma citação curta cite Citação em - Texto enfatizado strong - Texto "forte" del - Texto excluído ins -Texto inserido pre - Texto pré-formatado code - Código de computador kbd - Entrada de teclado INSTITUTO INFNET - 23
24 Exemplo de um Código HTML: <HTML> <HEAD> <TITLE>Adobe Studio Exchange</TITLE> <LINK HREF="/wa/style/common.css" REL="styleSheet TYPE="text/css"> </HEAD> <BODY CLASS="axchangePageBkg"> <table border="0" cellspacing="0" cellpadding="0 > <tr> <td height="23"><img src="/studio/images/menudivider.gif" width="19" height="23" border="0" alt=""></td> <td height="23"><b><a href=" class="grey">search</a></b></td> <td height="23"><img src="/studio/images/menudivider.gif" width="19" height="23" border="0" alt=""></td> <td height="23"><b><a href="misc/comments.html" class="grey">contact Us</a></b> </td> </tr> </table> BCA.1.2 Os Padrões Se olharmos um pouco mais atentamente o código acima, iremos perceber que ainda se utilizam muitas tabelas para se montar layouts, e quase nunca existe uma preocupação em se estar utilizando os Webstandards. Mesmo para interfaces simples, como a versão gráfica (imagem abaixo) do nosso exemplo. INSTITUTO INFNET - 24
25 Lab 1 Abra o arquivo lab1.html e acrescente as tags que estão faltando para que o documento fique hierárquica e semanticamente correto. 25 BCA.1.2 Os Padrões Siga as instruções contidas nas linhas de comentário do arquivo lab1.html INSTITUTO INFNET - 25
26 O Padrão XML Extensible Markup Language É uma linguagem de marcação como o HTML; É considerado um complemento perfeito ao HTML; Mantém os dados separados da apresentação e do processamento dos dados; Possibilita a transferência e manipulação de dados através da Internet; 26 BCA.1.2 Os Padrões O padrão XML O XML surgiu para suprir toda uma carência deixada pelo HTML no desenvolvimento de aplicações avançadas para a Internet, principalmente no que tange àquelas aplicações que precisam manipular um grande volume de dados. Mas o XML não é uma substituição do HTML, sendo considerado um complemento perfeito ao HTML. Enquanto o HTML se limita em exibir dados, o XML, é projetado para descrever dados dando ênfase em o que os dados são. Um dos objetivos por trás dessa linguagem XML, é possibilitar a transferência e manipulação de dados através da Internet de modo fácil e consistente, de tal forma que qualquer tipo de aplicação, independentemente da plataforma, sistema operacional, ou linguagem em que foi construída consiga manuseá-los. De alguns modos importantes, o XML é simplesmente um outro formato de dados. De outros modos, o XML apresenta várias vantagens fundamentais sobre outros formatos que o ajudaram a se distinguir como um meio para armazenar informações. INSTITUTO INFNET - 26
27 Exemplo de um Código XML: <?xml version = "1.0" encoding="iso "?> <doc> <clientes> <nome>orson Welles</nome> <telefone>(11) </telefone> <idade>52</idade> </clientes> <clientes> <nome>dashel Hammet</nome> <telefone>(11) </telefone> <idade>45</idade> </clientes> </doc> 27 BCA.1.2 Os Padrões Vimos que não é muito difícil entender o que o arquivo descreve, graças as suas tags totalmente personalizadas. Se você prestar um pouco mais de atenção à listagem do arquivo clientes.xml mostrada no exemplo acima, perceberá que não existe nada indicando o tipo dos dados apresentados. E embora você possa encontrar tags de campos como nome, telefone e idade, não existe uma definição desses dados. Este tipo de declaração não é realmente necessário. Porém, se você deseja assegurar a integridade e estruturar seu documento XML, é interessante acrescentar uma definição dos dados que ele contém. Isso pode ser feito por meio de um arquivo DTD (Document Type Definition, ou Definição de Tipo de Documento). INSTITUTO INFNET - 27
28 Definição de Tipo de Documento(DTD) O DTD descreve o que é possível na sua linguagem XML; O DTD é a gramática de uma linguagem de marcação; O DTD permite você 'inventar' novas tags; Assegura a integridade e a estrutura seu documento XML; Existem vários tipos de DTD sendo utilizados atualmente; 28 BCA.1.2 Os Padrões Se você prestar um pouco mais de atenção à listagem do arquivo clientes.xml mostrada no exemplo anterior, perceberá que não existe nada indicando o tipo dos dados apresentados. E embora você possa encontrar tags de campos como nome, telefone e idade, não existem uma definição desses dados. Para se assegurar a integridade e estruturar seu documento XML, podemos utilizar o DTD (Document Type Definition, ou Definição de Tipo de Documento). O arquivo DTD define os dados, ou elementos, que o documento XML poderá conter. Isso permite que o processador de XML valide com precisão o conteúdo do arquivo XML. O arquivo DTD define os dados, ou elementos, que o documento XML poderá conter. Isso permite que o processador de XML valide com precisão o conteúdo do arquivo XML. Para o arquivo clientes.xml do exemplo anterior, poderíamos ter o seguinte arquivo DTD simples associado: <!-- Arquivo clientes.dtd --> <!ELEMENT doc (clientes)> <!ELEMENT clientes (nome,telefone,idade)> <!ELEMENT nome (#PCDATA)> <!ELEMENT telefone (#PCDATA)> <!ELEMENT idade (#PCDATA)> Este arquivo apenas define, de modo bastante simples, os elementos de dados que serão incluídos como tags no documento XML. INSTITUTO INFNET - 28
29 DTDs Disponíveis Docbook-XML; MathML; RDF/RSS; SOAP; SVG; XHTML; Outros. 29 BCA.1.2 Os Padrões Docbook-XML - O Docbook é a linguagem para escrever documentos estruturados, por exemplo, livros e papeis. Mas, também é utilizada para outras tarefas diferentes. Esta é uma das mais populares DTDs do XML. MathML - O MathML é a linguagem de marcação Matemática, que é utilizada para descrever expressões e fórmulas matemáticas. RDF - A RDF é a Resource Description Framework. É desenhada para ajudar a codificar e a reutilizar os meta dados. Tem como uma de suas descendentes o RSS. Famoso formato que permite de uma lista de atualizações dos sites escolhidos, no momento em que elas ocorram. SOAP - O SOAP significa Simple Object Access Protocol (Protocolo simples de acesso a objetos). É uma linguagem utilizada por processos para se comunicarem remotamente, permitindo a integração de aplicativos via internet. SVG - Scalable Vector Graphics. O SVG não se baseia em bitmaps, mas é um formato de imagem à base de vetores. XHTML - XHTML é a variante XML da versão do HTML Devido à sintaxe restrita do XML, existem algumas coisas que pode fazer no HTML, mas que não são válidas no XHTML. Mas por outro lado, uma página que escreva em XHTML é ao mesmo tempo uma página HTML válida. Note que o programa tidy HTML pode converter as suas páginas existentes em XHTML para XML. INSTITUTO INFNET - 29
30 O Padrão XHTML EXtensible HyperText Markup Language; XHTML é uma combinação do HTML com XML; Define o HTML como uma aplicação XML; XHTML é o próximo degrau na evolução da Internet; O XHTML facilita oferecer os dados do seu site através de WAP ou de um RSS; Recomendado pelo W3C; 30 BCA.1.2 Os Padrões O padrão XHTML Quando criamos nossas páginas HTML, quase sem perceber acabamos por utilizar técnicas de montagem que tornam nossos documentos não só mais pesados e complexos, mas quase ilegíveis para certos navegadores e até ferramentas de busca. Devemos evitar que a falta de semântica em nossos códigos torne nossas páginas menos acessíveis. Pensando nisso a linguagem XHTML (Extensible HyperText Markup Language) foi desenvolvida e aprovada como recomendação do World Wide Web Consortium (W3C) em 2000, e gradualmente vem se tornando a linguagem sucessora do HTML. Por consistir uma reformulação do HTML 4.01 como aplicação XML 1.0, vamos perceber que seu documento HTML ganha a coerência e flexibilidade de um documento XML, podendo ser facilmente lido por ferramentas automáticas e convertido em outros formatos de arquivos. Com XHTML fica muito mais fácil oferecer os dados do seu site através de WAP ou de um RSS, por exemplo, bem como transformar o resultado de uma consulta a banco de dados ou um documento XML numa página Web. INSTITUTO INFNET - 30
31 Exemplo de um Código XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " <html> <head> <title>css Vault» The Web's CSS Site</title> <style " <body> <div id="header"> <h1 id="h_logo"><a href=" title="css Vault» The Web's CSS Site - A repository of sites using cascading style sheets and a list of resources"><span>css Vault» The Web's CSS Site A repository of sites using cascading style sheets and a list of resources</span></a></h1><br/> 31 BCA.1.2 Os Padrões Ao analisarmos o código acima, iremos perceber diferenças do HTML que usamos comumente. Uma das mais visíveis no exemplo acima é que para se fazer um XHTML válido, devemos fechar TODAS as tags. Mesmo aquelas ditas "solitárias", assim, ao invés de <br> escrevemos <br />. INSTITUTO INFNET - 31
32 Comparação HTML x XHTML Elementos perfeitamente encadeados Em HTML alguns elementos podem não ser encadeados perfeitamente: <b><i>esse texto está em negrito e itálico</b></i> Em XHTML todos os elementos devem estar devidamente encadeados: <b><i> Esse texto está em negrito e itálico </i></b> 32 BCA.1.2 Os Padrões Sempre aprendemos em HTML que devemos manter a ordem de fechamento das tags. Também chamada de LIFO (Last In First Out), essa norma determina que devemos fechar os últimos tags abertos e depois ir fechando os demais. Essa ordem, em documentos HTML, pode até ser desrespeitada pois browsers mais modernos vão renderizar sem maiores problemas. Mas quando estivermos trabalhando com documentos XHTML, mesmo esse pequeno erro não será tolerado e poderá comprometer não só performance como o layout da página. INSTITUTO INFNET - 32
33 Comparação HTML x XHTML Tags precisam estar escritas em caixa-baixa Errado: <BODY> <P>Primeiro Parágrafo</P> </BODY> Certo: <body> <p>primeiro Parágrafo</p> </body> 33 BCA.1.2 Os Padrões Isso porque, documentos XHTML são aplicações XML, portanto estamos nos referindo a uma linguagem case-sensitive que significa a diferença entre letras maiúsculas e minúsculas. O que não acontecia no HTML. INSTITUTO INFNET - 33
34 Comparação HTML x XHTML Todos os elementos precisam ser fechados Errado: <p>primeiro Parágrafo</p> Uma quebra de Linha<br> <img src="logo.gif" alt="meu Logo" > Certo: <p>primeiro Parágrafo</p> Uma quebra de Linha<br /> <img src="logo.gif" alt="meu Logo" /> 34 BCA.1.2 Os Padrões Ao contrario do HTML, em XHTML precisamos fechar todos os elementos. Inclusive aqueles que não possuam uma tag específica de fechamento, também conhecidas como tags solitárias". INSTITUTO INFNET - 34
35 Comparação HTML x XHTML DTD específico Os tipos de DOCTYPE : -STRICT - TRANSITIONAL - FRAMESET 35 BCA.1.2 Os Padrões A DTD é usada para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML. Strict: Tipo usado quando você fez um código XHTML puro, sem erros. Esta é a mais rígida das declarações <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional: Utilizado quando está começando a migrar do HTML para o XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset: É usado quando você está utilizando FRAMES. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " INSTITUTO INFNET - 35
36 XHTML no Dreamweaver Você pode criar seus arquivos XHTML pelo Dreamweaver de uma forma fácil. 36 BCA.1.2 Os Padrões Validando um documento XHTML A W3C disponibiliza um validador gratuito para documentos XHTML. Lá, você digita o URL de seu documento e um robô o analisa, fornecendo um relatório completo dos erros existentes. É uma ferramenta excelente para você usar durante a elaboração e/ou migração do seu documento para XHTML. O Dreamweaver também pode realizar esse trabalho, bastando para isso primeiramente, você ir no Menu: Edit > Preferences... > Category : Validator > marque : XHTML 1.0 transitional. Após essa configuração realizada, vá no Menu Windows > Results > aba Validation > Validate Current Document. Todos os erros de código em seu arquivo serão listados. INSTITUTO INFNET - 36
37 Convertendo HTML em XHTML HTML Tidy 37 BCA.1.2 Os Padrões Desenvolvido inicialmente por Dave Raggett, o HTML Tidy é uma ferramenta para transformação de HTML em XHTML. O HTML Tidy não pode ser considerado um editor pois suas funcionalidades se limitam a identificar os erros semânticos do código e corrigi-los. Sua eficiência impressiona e ajuda desenvolvedores em todo mundo a manterem seus códigos corretos e acessíveis. O HTML Tidy hoje é mantido por um projeto de código aberto: SourceForge, por um grupo de voluntários. INSTITUTO INFNET - 37
38 Exercício teórico Resolva o questionário abaixo. 38 BCA.1.2 Os Padrões Exercícios: 1) Assinale a afirmativa correta: a) XML é uma espécie de Banco de Dados aonde posso armazenar informações. b) XML é uma linguagem de marcação que imita funcionalidades do HTML. c) XML é uma linguagem complementar ao HTML só que focada na informação e não em sua aparência. d) XML é uma linguagem complementar ao XHTML só que focada na formatação da informação. 2) O XHTML pode ser considerado... a) Um XML mais moderno com formatações gráficas. b) Uma combinação do XML com o CSS. c) Um tipo de documento XML à partir de um DTD específico. d) N.R.A. 3) Em um documento XHTML quais das seqüências estaria errada? a) <br/> <br/><div><span>smoothlounge.com</span><div><br/> <br/> b) <hr/><br/> <i><b> Produtos de Exportação</i></b><hr/><br/> c) <h1> Meu blog</h1><h2>as mil e uma noites em Londres</h2><br/> d) <body><div><span>testemunha de Acusação</span><div></body> INSTITUTO INFNET - 38
39 Lab 2 1. Utilizando o aplicativo TidyHTML abra o arquivo lab2.html no qual existem erros de sintaxe. 2. Faça um comparativo e perceba as diferenças entre a versão original e a versão Tidy. 3. Aplique as alterações e salve o documento. 39 BCA.1.2 Os Padrões INSTITUTO INFNET - 39
40 O que já aprendemos? UA 1: WebStandards BCA 1.1: Introdução aos WebStandards BCA 1.2: Os padrões XML e XHTML 40 UA WebStandards Aprendemos neste BCA: Utilizar os padrões Web de forma correta O que é XML e suas definições de documento O que é XHTML, suas particularidades e vantagens. Comparações entre HTML e XHTML INSTITUTO INFNET - 40
41 1.3- Acessibilidade Bloco de Construção do Aprendizado Iremos entender como a flexibilidade da informação e a interação permitem a utilização da Web por pessoas com necessidades especiais, bem como em diferentes ambientes e situações através de vários equipamentos ou navegadores. INSTITUTO INFNET - 41
42 O que é Acessibilidade na Web Inclusão digital para as pessoas portadoras de necessidades especiais Criar ou tornar as ferramentas e páginas Web acessíveis a um maior número de usuários Beneficia também pessoas idosas, usuários de navegadores alternativos, usuários de tecnologia assistiva e de acesso móvel. 42 BCA.1.3 Acessibilidade Acessibilidade na internet ou acessibilidade na Web significa permitir o acesso à Web por todos, independente de tipo de usuário, situação ou ferramenta. É criar ou tornar as ferramentas e páginas Web acessíveis a um maior número de usuários, inclusive pessoas com deficiências. A acessibilidade na Web beneficia também pessoas idosas, usuários de navegadores alternativos, usuários de tecnologia assistiva e de acesso móvel. A acessibilidade na Web engloba: Páginas e Aplicações Web: onde as pessoas podem perceber, compreender, navegar e interagir. Navegadores, media players, plugins: que podem se usados efetivamente por pessoas com deficiências e que funcionem bem com tecnologias assistivas utilizadas por algumas pessoas com deficiência, para acessar a Web. Ferramentas de autoria Web e outras tecnologias que envolvem a Web: utilizadas para produção de conteúdo Web e outras funções. INSTITUTO INFNET - 42
43 Desenho Universal 1. Equiparação nas possibilidades de uso. 2. Flexibilidade no uso 3. Uso Simples e intuitivo 4. Captação da informação 5. Tolerância ao erro 6. Mínimo esforço físico 7. Dimensão e espaço para uso e interação 43 BCA.1.3 Acessibilidade O propósito do Universal Design é simplificar a vida das pessoas de todas as idades e habilidades, projetando produtos, meios de comunicação e ambientes usáveis por muitas pessoas, com pouco ou nenhum custo. 1. Equiparação nas possibilidades de uso: o design é útil e comercializável às pessoas com habilidades diferenciadas. 2. Flexibilidade no uso: o design atende a uma ampla gama de indivíduos, preferências e habilidades. 3. Uso Simples e intuitivo: o uso do design é de fácil compreensão. 4. Captação da informação: o design comunica eficazmente, ao usuário, as informações necessárias. 5. Tolerância ao erro: o design minimiza o risco e as conseqüências adversas de ações involuntárias ou imprevistas. 6. Mínimo esforço físico: o design pode ser utilizado de forma eficiente e confortável. 7. Dimensão e espaço para uso e interação: o design oferece espaços e dimensões apropriados para interação, alcance, manipulação e uso. INSTITUTO INFNET - 43
44 Tecnologia Assistiva Deficiência Visual (LEITOR DE TELA, NAVEGADOR TEXTUAL, NAVEGADOR COM VOZ) Baixa visão (AMPLIADOR DE TELA) Deficiência física (TECLADO ALTERNATIVO) 44 BCA.1.3 Acessibilidade Tecnologia Assistiva Chama-se Tecnologia Assistiva o movimento dedicado a criação de suportes aos deficientes nos âmbitos do software e do design. Não existem tantos dispositivos ou softwares quanto deveriam, mas esse é um movimento que ganha mais força a cada dia. Com a ajuda de WebDesigners e Desenvolvedores dispostos a criar um conteúdo que tenha alternativas para todos teremos num futuro bem próximo uma Internet sem barreiras. No campo das deficiências, a cegueira tem o maior número de aplicativos de apoio como os leitores de tela, um software que lê o texto que está na tela do microcomputador e a saída desta informação é através de um sintetizador de voz ou um display braille - o leitor de tela "fala" o texto para o usuário ou dispõe o texto em braille através de um dispositivo onde os pontos são salientados ou rebaixados para permitir a leitura. INSTITUTO INFNET - 44
45 Acessibilidade por tipo de media Com CSS podemos escolher os estilos a aplicar aos diversos tipos de media Existem vários tipos de media: all, aural, braille, embossed, handheld, print, projection, screen, tty e tv Cada media pode ser tratada de acordo com as suas especificações 45 BCA.1.3 Acessibilidade A possibilidade que nos é dada pelos estilos CSS para escolher os estilos a aplicar aos diversos tipos de media permite-nos especificar com precisão a forma como os documentos são apresentados aos usuários. Podemos definir estilos para serem aplicados quando as páginas são apresentadas graficamente num browser, impressas sobre papel, ou lidas em voz alta num browser capaz de sintetizar voz e ainda para dispositivos móveis com PDA s e Celulares. Tipos de media: All Usa-se para definir estilos para todos os tipos de media aural Usa-se para definir estilos para sintetizadores de voz braille Usa-se para definir estilos a aplicar a texto escrito em braille embossed Define estilos para textos a imprimir em impressoras braille handheld Usa-se para definir estilos para pequenos aparelhos móveis (PDAs, telefones móveis,...) print Define estilos para quando a página é impressa sobre papel projection Define estilos para quando a página é apresentada num projetor (slides, por exemplo) screen Estilos para apresentação em tela de computador tty Estilos para apresentação em terminais com recursos limitados (caracteres com tamanho fixo e outras limitações) tv Define estilos a aplicar quando a página é apresentada num televisor ou aparelho semelhante INSTITUTO INFNET - 45
46 Acessibilidade no Dreamweaver 46 BCA.1.3 Acessibilidade O Dreamweaver MX é uma das poucas as ferramentas para a criação de conteúdos Web que contemplam a verificação da acessibilidade. Com ele será possível se criar páginas altamente acessíveis sem muito esforço. Se formos ao menu Edit > Preferences > Accessibility. INSTITUTO INFNET - 46
47 Recomendações do W3C Fornecer alternativas ao conteúdo sonoro e visual; Assegurar a percepção do texto e dos elementos gráficos quando vistos sem cores; Utilizar corretamente marcações e folhas de estilo; Indicar claramente qual o idioma utilizado; Criar tabelas passíveis de transformação harmoniosa; Páginas dotadas de novas tecnologias sejam transformadas harmoniosamente; 47 BCA.1.3 Acessibilidade INSTITUTO INFNET - 47
48 Recomendações do W3C Assegurar o controle do usuário sobre as alterações temporais do conteúdo; Assegurar a acessibilidade direta de interfaces do usuário integradas; Projetar páginas considerando a independência de dispositivos; Utilizar soluções de transição; Utilizar tecnologias e recomendações do W3C; Fornecer informações de contexto e orientações; 48 BCA.1.3 Acessibilidade INSTITUTO INFNET - 48
49 Roteiro para construção de sites acessíveis; Imagens e Animações:Use o atributo alt para descrever a função de cada elemento visual; Multimídia: Inclua legendas e transcrições para o áudio, e descrições para o vídeo. Híperlinks: Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui". Organização da Página: Use cabeçalhos, listas e uma estrutura consistente. Use CSS para layout e estilo sempre que possível. Gráficos e Diagramas: Sumarize o conteúdo ou use o atributo longdesc. 49 BCA.1.3 Acessibilidade INSTITUTO INFNET - 49
50 Roteiro para construção de sites acessíveis; Frames: Use o tag noframes e empregue títulos significativos; Tabelas: Torne compreensível a leitura linha a linha. Resuma; Navegação: Fornecer mecanismos de navegação claros; Simplicidade: Assegurar a clareza e a simplicidade dos documentos; Valide seu trabalho: Use as ferramentas, checklist e os guias disponíveis em 50 BCA.1.3 Acessibilidade INSTITUTO INFNET - 50
51 Lab 3 1. Utilizando o aplicativo Jaws navegue pela internet e descubra como os sites lidam com leitores de tela. 2. Depois acesse o site : e perceba as diferenças. 51 BCA.1.3 Acessibilidade INSTITUTO INFNET - 51
52 Lab 4 1. Utilizando o browser Opera acesse um site e tecle shift+f11 para simular um dispositivo móvel. 2. Depois acesse o site : e perceba as diferenças. 52 BCA.1.3 Acessibilidade INSTITUTO INFNET - 52
53 O que já aprendemos? UA 1: WebStandards BCA 1.1: Introdução aos WebStandards BCA 1.2: Os padrões XML e XHTML BCA 1.3: Acessibilidade 53 UA WebStandards Aprendemos neste BCA: O que é o Desenho Universal Entendemos várias Tecnologias Assistivas Recomendações do W3C Um roteiro para construção de sites Acessíveis INSTITUTO INFNET - 53
54 2- DHTML Unidade de Aprendizado INSTITUTO INFNET - 54
55 DHTML Você aprenderá : Enriquecer seu HTML com Javascript; Como funciona o JavaScript Trabalhando com JavaScript; 55 UA DHTML INSTITUTO INFNET - 55
56 2.1 O JavaScript em ação Bloco de Construção do Aprendizado INSTITUTO INFNET - 56
57 O JavaScript em ação Você aprenderá: Como funciona o JavaScript? O que são event handlers, objetos do browser e como os acessam os DOMs Escrever um script básico Apontar para scripts com links do HTML 57 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 57
58 Como funciona o JavaScript? O JavaScript é uma linguagem baseada em objetos. (Veja os objetos do browser no próximo slide) Ele trata os elementos HTML como objetos. Ele trabalha com os DOMs 58 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 58
59 Objetos de um browser Window Navigador Frame Document History Location Mime Type Plugin Image Anchor Layer Area Link Form Applet Plugin Button Checkbox Hidden FileUpload Radio Reset Submit Password Text Textarea Select Option 59 BCA.2.1 O JavaScript em Ação O que diz respeito aos objetos, por exemplo? Navigator: ao nome e a versão do browser; Window: à janela aberta pelo browser; Document: às informações sobre a página exibida, tais como âncoras, links, formulários, applets, etc; Form: às informações sobre o formulário, por exemplo, método (post/get), campos, etc; History: à lista das URLs visitadas através do browser a partir do início da última sessão; Location: às informações técnicas sobre a página, seu protocolo, seu domínio, etc. INSTITUTO INFNET - 59
60 Como funciona o JavaScript? Os objetos contém informações e propriedades que podem ser alterados pelo script em determinados eventos. Eventos podem ser: onmouseover; onmouseout, onload, onsubmit, etc. Eventos são chamados junto ao código HTML e os event handlers são dispostos como se fossem atributos da tag. Por exemplo: <input type= button onclick= funcaox(), funcaoy() > 60 BCA.2.1 O JavaScript em Ação Handlers de Evento mais comuns: onfocus: sempre que um campo ganha foco. onblur: sempre que um campo perde foco. onchange: sempre que um campo for alterado. onclick: quando o usuário clica sobre o objeto. onload: quando o documento estiver carregado. onunload: quando um documento é abandonado. onmouseover: quando o mouse estiver sobre o objeto. onmouseout: quando o mouse abandona um objeto. onselect: quando um texto for selecionado num campo tipo text ou textarea. onsubmit: quando um formulário for enviado para o servidor. oncontextmenu: quando o botão de contexto é clicado. INSTITUTO INFNET - 60
61 Exemplo de Script <html> <head> <title>javascript</title> <script language= JavaScript > <!-- function inicia() { window.open ( propaganda.htm, _blank, width=300,height=200 ); } //--> </script> </head> <body onload= inicia() >O script acima abre uma janela pop-up. </body> </html> 61 BCA.2.1 O JavaScript em Ação O exemplo acima resume bem o JavaScript e como se relaciona com o HTML. O bloco de script é determinado pelas tags <script> e </script>, situadas na área de influência de <head> e </head>. Ele é chamado pelo handler de evento onload quando este aponta para a função inicia(). Observa-se que o código JavaScript é sensível ao tamanho das letras, isto é, definindose uma função inicia(), não se pode executá-la por Inicia(), pois inicia() e Inicia() definiriam funções diferentes. INSTITUTO INFNET - 61
62 Inserindo o JavaScript É comum utilizar-se a tag <noscript> para exibir partes da página somente em browsers que não compreendam JavaScript ou estejam com o JavaScript desabilitado. <html> <head><title>exemplo</title> </head> <body> <noscript> O seu browser não entende JavaScript. </noscript> </body> </html> Esta mensagem só aparecerá nos browsers que não entendem JavaScript ou estão com o JavaScript desabilitado. 62 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 62
63 A tag <script> É utilizada para inserir blocos de JavaScript na página. Seu atributo LANGUAGE especifica a versão do JavaScript. O script deve estar inserido na área de influência de tags de comentário do HTML para evitar ser exibido em browsers que não o reconheçam. 63 BCA.2.1 O JavaScript em Ação Nomes de linguagens: Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de instruções e funções, quase todas as que existem agora já se introduziram no primeiro padrão. Javascript 1.1: É a versão de Javascript que foi desenhado com a chegada dos navegadores 3.0. Implementava pouco mais que sua versão anterior, como por exemplo, o tratamento de imagens dinamicamente e a criação de arrays. Javascript 1.2: A versão dos navegadores 4.0. Esta tem como desvantagem que é um pouco distinta em plataformas Microsoft e Netscape, já que ambos navegadores cresceram de distinto modo e estavam em plena luta no mercado. Javascript 1.3: Versão que implementam os navegadores 5.0. Nesta versão foram limitadas algumas diferenças e asperezas entre os dois navegadores. Javascript 1.5: Versão atual, no momento de escrever estas linhas, que implementa Netscape 6. INSTITUTO INFNET - 63
64 A tag <script> Podem ser inseridos mais de um bloco de scripts no código. Podem ser inseridos blocos de script tanto na área de influência entre <body> e </body> quanto entre <head> e </head>. Usualmente declaram-se as funções do JavaScript entre <head> e </head>. Entre <body> e </body> colocamos os handlers de evento que apontam para as funções declaradas no script. 64 BCA.2.1 O JavaScript em Ação <html> <head> <title>javascript</title> <script language= JavaScript > <!-- function inicia() { window.open ( propaganda.htm, _blank, width=300,height=200 ); } //--> </script> </head> <body onload= inicia() >... </body> </html> INSTITUTO INFNET - 64
65 Lab 5 Crie uma página em HTML e coloque um bloco de script com o seguinte comando: alert ( Funcionou! ); 65 BCA.2.1 O JavaScript em Ação <html> <head> <title>:: DHTML - Style Sheets - LAB 1 ::</title> <script language="javascript" type="text/javascript"> alert ("Funcionou!") </script> </head> <body> <h1>instituto Infnet</h1> <h2>dhtml - Style Sheets</h2> <h3>lab 1</h3> </body> </html> INSTITUTO INFNET - 65
66 Lab 6 Crie uma página em HTML e coloque uma mensagem de alerta dizendo: Seja mais um WebDesigner de ponta: trabalhe com DHTML! No mesmo bloco de script coloque o seguinte comando: document.write ( Já pensou em usar JavaScript para preencher páginas HTML? ) 66 BCA.2.1 O JavaScript em Ação <html> <head> <title>:: DHTML - Style Sheets - LAB 2 ::</title> <script language="javascript" type="text/javascript"> alert ("Seja mais um WebDesigner de ponta: trabalhe com DHTML!"); document.write ("Já pensou em usar JavaScript para preencher páginas HTML?") </script> </head> <body> <h1>instituto Infnet</h1> <h2>dhtml - Style Sheets</h2> <h3>lab 2</h3> </body> </html> INSTITUTO INFNET - 66
67 Lab 7 Com base no slide EXEMPLO DE SCRIPT, crie uma página em HTML com um script que abra uma janela pop-up que exiba a página popup.htm. Dica: window.open ( popup.htm, janelapop, width=300,height=200 ); Salve sua página na pasta Laboratórios onde estarão os arquivos: popup.htm, lab9a.gif e lab9b.gif 67 BCA.2.1 O JavaScript em Ação <html> <head> <title>:: DHTML - Style Sheets - LAB 3 ::</title> <script language="javascript" type="text/javascript"> function abrejanela() { window.open ('popup.htm','popup1','width=550,height=400,left=0,right=0,sc rollbars=yes'); } </script> </head> <body onload="abrejanela()"> <h1>instituto Infnet</h1> <h2>dhtml - Style Sheets</h2> <h3>lab 3 </h3> </body> </html> INSTITUTO INFNET - 67
68 Lab 8 Modifique o exercício anterior para que o event handler seja modificado de onload para onclick Para isso o evento deve entrar como um atributo da tag que cria um botão em HTML 68 BCA.2.1 O JavaScript em Ação <html><head><title>:: DHTML - Style Sheets - LAB 4 ::</title> <script language="javascript" type="text/javascript"> <!-- function abrejanela() { window.open ('popup.htm','popup1','width=550,height=400,left=0,right=0,sc rollbars=yes'); } //--> </script></head> <body onload="abrejanela()"> <h1>instituto Infnet</h1> <h2>dhtml - Style Sheets</h2> <h3>lab 4 </h3> <input type="button" value="clique aqui" onclick="abrejanela()"> </body> </html> INSTITUTO INFNET - 68
69 Links com JavaScript É possível criar links que, ao invés de remeter o usuário à outra página, executam um ou mais comandos de JavaScript. <html> <head><title>exemplo</title></hea d> <body> Esta é uma página de teste... <a href= javascript:alert ( Testando link... ) > Clique para testar o link</a> </body> </html> Este comando em JavaScript será executado quando o link for pressionado. 69 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 69
70 70 Links que chamam Funções <html> <head> <title>exemplo</title> <script> <!-- function funcaox() { alert ( Testando a função x... ) // Este é um comentário que será desconsiderado pelo browser. } // --> </script> </head> <body> Esta é uma página de teste...<br /> <a href= javascript:funcaox() > Pressionando aqui a função x será executada</a> </body> </html> BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 70
71 JavaScript externo Pode-se referenciar funções de JavaScript em arquivos separados da página HTML Podem ser criadas funções que são referenciadas em todo o site Vantagem: apontando-se para um arquivo *.js externo ao HTML, o documento JavaScript fica armazenado no cache do browser 71 BCA.2.1 O JavaScript em Ação Imagine que você tem um site com menus animados em diversas páginas. Provavelmente você estará usando um script desenvolvido com algumas funções de JavaScript para criar o efeito desejado. Armazenando as funções em arquivos separados das páginas, você evita ter que reescrevêlas em cada uma das páginas do site. Isto, além de tornar o site mais veloz, pois as funções não aumentam o código de todas as páginas, torna a manutenção bem mais simples. Quando você ou seu desenvolvedor desejar fazer uma modificação qualquer no código JavaScript, não precisará ir em todas suas páginas. No entanto, se seu provedor de informações não tiver configurado corretamente o Web Server, o seu arquivo JavaScript externo poderá não funcionar. A forma mais prática de verificar se o servidor está configurado para a utilização de JavaScript externo é fazer um teste. Faça uma página que utiliza este recurso e envie para o provedor. Se ela funcionar, é porque você não precisa se preocupar. Se ela funcionar, avise ao seu provedor que ele precisa configurar o Web Server com a seguinte informação: Type=application/x-javascript exts=js INSTITUTO INFNET - 71
72 Apontando para um.js function funcaox() { alert ( Esta função está em outro arquivo ) } <html> <head><title>exemplo</title> </head> <body> <script language= JavaScript1.1 src= teste.js > </script> <script> <!-- funcaox() //--> </script> </body> </html> Este é o conteúdo do arquivo teste.js O conteúdo do arquivo teste.js funciona como se fizesse parte da página corrente 72 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 72
73 Lab 9 1) Abra o arquivo lab9.htm; Aponte com um bloco de script para o arquivo lab7.js Teste e observe os resultados 2) Abra o arquivo lab9_a.htm; Aponte com um bloco de script para o arquivo lab7_a.js Teste e observe os resultados 73 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 73
74 Lab 10 Abra o documento lab10.htm e coloque um event handler no botão em HTML para que a janela seja fechada quando for clicada Dica: para fechar a janela é necessário usar o seguinte objeto.propriedade: window.close() Crie uma página HTML que tenha 4 links Cada um desses links deverá chamar uma das 4 funções do arquivo lab6.js Testar e observar o comportamento 74 BCA.2.1 O JavaScript em Ação INSTITUTO INFNET - 74
75 Exercício teórico Resolva o questionário abaixo. 75 BCA.2.1 O JavaScript em Ação Exercícios: 1) Assinale a alternativa correta: a) Chamamos de bloco de script o link que aponta para o arquivo.js que contém o JavaScript em diagrama de bloco b) O arquivo.js sempre é interpretado se estiver incorporado ao código-fonte do HTML c) Para chamar um arquivo.js externo deve-se fazê-lo com o atributo href do HTML d) Nunca colocamos uma tag HTML dentro do script de um arquivo.js externo e) Todas as alternativas estão incorretas 2) Assinale a alternativa em que não há erro nas tags: a) <a src= javascript:alert ( Testando link... ) > Clique para testar o link</a> b) <a href= javascript : alert ( Testando link... ) > Clique para testar o link</a> c) <a href= javascript:alert ( Testando link... ) > Clique para testar o link</a> 3) Assinale a alternativa em que não há erro nas tags: a) <a href= javascript:funcaox() > Pressionando aqui a função x será executada</a> b) <a href= javascript:funcaox()> Pressionando aqui a função x será executada</a> c) <a src= javascript:funcaox() > Pressionando aqui a função x será executada</a> INSTITUTO INFNET - 75
76 O que já aprendemos? UA 2: DHTML BCA 2.1: JavaScript em Ação 76 UA DHTML Aprendemos neste BCA: Como funciona o JavaScript Como inserir um JavaScript Trabalhar com um JavaScript Externo INSTITUTO INFNET - 76
77 3- Cascading Style Sheets Unidade de Aprendizado INSTITUTO INFNET - 77
78 Cascading Style Sheets Você aprenderá: O porquê de se trabalhar com folhas de estilo A evolução das folhas de estilo através das gerações de CSS Métodos de especificação para as CSS 78 UA Cascading Style Sheets Nesta Unidade de Aprendizado, abordaremos conceitos avançados de composição de layouts utilizando Cascanding Styles Sheets, estando o assunto dividido nos seguintes Blocos de Construção do Aprendizado (BCA): BCA.3.1 Entendendo as CSS Definindo CSS Gerações de CSS Métodos de Especificação BCA.3.2 Sintaxe das CSS Técnicas de aplicação das CSS Métodos de Seleção das CSS BCA.3.3 Style Switchers - JavaScript e CSS Uma página, vários estilos Folhas de estilo alternativas O JavaScript do Switcher Cookies Colocando tudo junto INSTITUTO INFNET - 78
79 3.1- Entendendo as CSS Bloco de Construção do Aprendizado Compreender as folhas de estilo, suas convenções e métodos é fundamental para podermos colocar em prática a sofisticação que nossos layouts precisam sem comprometer a performance ou acessibilidade dos mesmos. INSTITUTO INFNET - 79
80 Definindo CSS Cascading Style Sheets. São conhecidas como folhas de estilo. Vantagens: Separam forma da estrutura. São puramente textos. Não exigem plugins. Facilitam codificação e manutenções posteriores. Problemas: Diferenças entre browsers. 80 BCA.3.1 Entendendo as CSS Conceitos de CSS As Cascading Style Sheets Surgiram no final de 1996 e vêm cada vez mais sendo utilizadas em páginas web.são aceitas pelos browsers IE a partir da versão 3.x e pelos NN a partir da versão 4.x, entretanto ignoradas nos browsers mais antigos, algumas vezes sem degradação, outras vezes com adulteração do formato visual. Seu código, separado do HTML, amplia as capacidades da própria linguagem HTML, redefinindo o funcionamento das tags. O relacionamento entre elas (CSS e HTML) permite que a estrutura seja montada pelo HTML enquanto que a forma é tratada pelas folhas de estilo. Assim, proporcionam menos código HTML, com páginas mais ágeis e downloads mais rápidos. Elas facilitam o trabalho de atualização de um Website, pois as informações sobre o estilo ficam armazenadas num único documento. O código separado amplia as capacidades da HTML, cujas tags tiveram seu funcionamento redefinido. Usando-se a CSS para alterar a forma, pode-se evitar a criação de novas tags HTML que façam o mesmo trabalho, pois mudando-se a definição em uma única regra CSS localizada centralmente você pode alterar a aparência de todas as tags controladas por aquela regra. INSTITUTO INFNET - 80
81 ? Gerações de CSS CSS1 CSS2 CSS3 Formatar textos Definir Fontes Definir Margens Posicionamento Absoluto Problemas na tag BODY Ênfase na facilidade de acesso Capacidade de especificar estilos para mídia Metodologia Tableless (Antigo CSSP) Ênfase na inclusão de vetores SVG (Scale Vector Graphic). 81 BCA.3.1 Entendendo as CSS Acima temos um quadro comparativo das gerações das CSS, observando a partir de quando os browsers começaram a adotá-las. No entanto, observa-se que nem todas as empresas implementaram 100% dos recursos de cada geração em seus navegadores, dificultando a utilização da tecnologia em sua plenitude. Percebemos também, que, estamos vivendo um momento de transição bem definido pela seta localizada em nosso quadro. Atualmente estamos trabalhando com o CSS 2.1 em um nível bem sofisticado, tendo a Metodologia Tableless uma das mais expressivas tendências na composição de páginas hoje. O W3C já está trabalhando no terceiro padrão de CSS, este voltado para a aplicação junto a imagens vetoriais, para permitir o trabalho com esta tecnologia sem a necessidade de plugins proprietários. Sendo o Opera 8 o único browser do mercado com SGV nativo. INSTITUTO INFNET - 81
82 Métodos de Especificação As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas: - Inline - Embedded -Linked -Imported 82 BCA.3.1 Entendendo as CSS Como uma de nossas intenções primordiais é separar a forma da estrutura, o CSS sempre vai ter uma ligação com o XHTML de uma maneira a melhorar não somente a performance mas a praticidade de atualização. Quando falamos em CSS, automaticamente nos perguntamos quando e como utiliza-lo, seja com HTML ou XHTML. A seguir vamos explorar as formas existentes de como se relacionar atributos, propriedades e valores baseados em CSS em nossas páginas. INSTITUTO INFNET - 82
83 CSS - Inline Estilo aplicado localmente na tag HTML através do atributo STYLE : <html> <head><title>exemplo</title> </head> <body> <p style= font-family: Arial; color:red >Esta frase também está escrita com fonte Arial e na cor vermelha.</p> <p>esta frase está normal.</p> </body> </html> 83 BCA.3.1 Entendendo as CSS Sendo uma das formas mais simples de aplicação do CSS, o método InLine apresenta poucas vantagens, já que suas propriedades e valores estão atrelados as tags como parte do bloco de declaração style, estando vinculado a estrutura do HTML não oferecendo mobilidade alguma. Deve ser utilizado com precaução, evitando se relacionar estilos importantes ao layout. INSTITUTO INFNET - 83
84 CSS - Embedding Estilo incorporado ao HTML através de um Bloco de Style : <html> <head><title>exemplo</title> <style> <!-- p {font-family: Arial; color:red} --> </style> </head> <body> <p>esta frase está escrita com fonte Arial e na cor vermelha.</p> </body> </html> 84 BCA.3.1 Entendendo as CSS Ao utilizarmos esse tipo de especificação, tornamos nossa página bem mais simples de trabalhar. Os estilos são informados dentro de um bloco de declaração posicionado dentro da área de influência da tag <head>. Dessa maneira os atributos relacionados nessa área valem para todo o documento. Podemos criar atributos e valores para um seletor, como no exemplo acima a tag <p>. Isso faz com que todas as vezes que a tag <p> aparecer na página ela ganhará a formatação descrita no bloco <style>. Essa ainda é uma forma muito popular de se relacionar CSS e HTML, com muitas vantagens e bem simples de se aplicar. Suas desvantagens começam a aparecer quando temos que relacionar nossos estilos a vários documentos. Muito difundida em layouts de Mail- Marketing possibilitando melhor performance no leitor de , deixando o download para as imagens que vão enriquecer a interface do cliente. INSTITUTO INFNET - 84
85 CSS - Linking Vincula-se um arquivo externo apontando-o internamente com a tag <link>. Conteúdo do arquivo meuestilo.css p {font-family: Arial; color:red} <html> <head><title>exemplo</title> <link rel= stylesheet href= meuestilo.css type= text/css > </head> <body> <p>esta frase está escrita conforme o estilo declarado no arquivo vinculado.</p> </body> </html> 85 BCA.3.1 Entendendo as CSS Esse é um dos métodos mais utilizados atualmente. Ao colocarmos todos os nossos estilos em um arquivo externo, podemos relacioná-los com um número infinito de páginas estendendo o poder de nossas formatações que antes controlavam páginas, para controlarem sites inteiros. Existem pouquíssimas desvantagens em se utilizar essa técnica. Uma delas está relacionada à complexidade com que os arquivos CSS podem ter. O excesso de classes, ids e redefinições de tags podem tornar até os levíssimos arquivos de texto do CSS difíceis de serem lidos pelo browser. meuestilo.css minha_pagina.html INSTITUTO INFNET - 85
86 CSS - Importing <html> <head><title>exemplo</title> <style type= text/css > <!-- Conteúdo do url(seuestilo.css); body {background-color:#cccccc} --> </style> </head> p {font-family: Arial; color:red} <body> <p>esta frase está escrita conforme o estilo declarado no arquivo importado.</p> </body> </html> 86 BCA.3.1 Entendendo as CSS O método Importing apresenta uma das soluções mais versáteis para a montagem de complexas interfaces. Utilizando essa técnica é possível se combinar vários arquivos CSS em uma única interface. Como estamos falando de vários arquivos, com várias formatações como saber quais vão se sobressair. Aqui entra o efeito cascata, que nada mais é, do à determinação de uma prioridade para aplicação da regra de estilo ao elemento. Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo. A prioridade para o efeito cascata: 1) folha de estilo do usuário; 2) folha de estilo do desenvolvedor; Estilo inline (dentro de um elemento HTML) Estilo incorporada (definido na tag <head> do documento) Estilo externo (importado ou linkado) 3) folha de estilo do navegador browser. INSTITUTO INFNET - 86
87 Exercício teórico Resolva o questionário abaixo. 87 BCA.3.1 Entendendo as CSS Exercícios: 1) Assinale a alternativa correta: a) Style Sheets são folhas de estilos aplicadas com plugins e interpretadores b) Style Sheets resolvem os problemas de exibição nos navegadores c) O W3C orienta que se use HTML para forma e CSS para estrutura d) As folhas de estilo separam forma da estrutura e) Todas as alternativas anteriores estão incorretas 2) Complete as sentenças : Quando queremos alterar um aspectos simples de uma tag podemos utilizar o método, que nos limita quanto a atualização, mas pode ser muito útil em muitos casos. é o melhor método de vinculação entre um html e o CSS, pois possibilita se manipular várias páginas ao mesmo tempo. A Metodologia é uma das mais populares soluções de construção de documentos semanticamente corretos e acessíveis utilizando todo o poderio do CSS. 3) Marque a alternativa falsa: a) Incorporamos um estilo a uma página HTML através das CSS Embedding b) Vinculamos um arquivo externo apontando-o internamente com a tag LINK c) Importamos um arquivo externo por meio de um bloco de STYLE d) Podemos importar uma folha de estilo a partir de outra folha de estilo e) Podemos vincular uma folha de estilo a outra folha de estilo INSTITUTO INFNET - 87
88 O que já aprendemos? UA 3: Cascading Style Sheets BCA 3.1: Entendendo as CSS 88 UA Cascading Style Sheets Aprendemos neste BCA: As gerações das CSS Seus Métodos de Especificação INSTITUTO INFNET - 88
89 3.2 Sintaxe das CSS Bloco de Construção do Aprendizado Ao nos familiarizarmos com as convenções de como se codificar nossos estilos baseados em CSS. Seremos capazes de criar interfaces mais sofisticadas, acessíveis, práticas e modernas. INSTITUTO INFNET - 89
90 A regra CSS e sua sintaxe Uma regra CSS define como será aplicado o estilo a um ou mais elementos Um conjunto de regras CSS formam uma Folha de Estilos Uma regra CSS é composta de três partes: seletor, propriedade e valor 90 BCA.3.2 Sintaxe das CSS Quando trabalhamos com CSS (Cascading Style Sheets), sempre surgem dúvidas em relação a como os estilos são aplicados, que estilo será aplicado, quando há mais de um estilo especificado para um mesmo elemento HTML? Todas essas questões são solucionadas quando entendemos o efeito cascata, que nada mais é, do a determinação de uma prioridade para aplicação da regra de estilo ao elemento.para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo. A ordem para o efeito cascata é a ordenação das regras CSS de acordo com critérios préestabelecidos, estes critérios são os abaixo enumerados: 1. Localizadas todas as regras CSS aplicáveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada. 2. Regras com declaração importante (! important) têm prioridade sobre aquelas sem a declaração. 3. Regras com mesmo peso (sem!important) e conflitantes, declaradas pelo autor têm prioridade sobre aquelas declaradas pelo usuário. 4. Regras mais específicas têm a prioridade sobre as menos específicas. 5. Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na seqüência das regras na folha de estilos. INSTITUTO INFNET - 90
91 A regra CSS e sua sintaxe seletor {propriedade: valor;} seletor propriedade Valor 91 BCA.3.2 Sintaxe das CSS Ao iniciarmos o estudo de aplicação do CSS em nossas páginas, iremos nos deparar em como determinar quais estilos devem ser atribuídos a quais objetos. Assim, para podermos atingir o objeto certo com o estilo que desejamos devemos seguir uma regra básica de atribuição de valores seguindo a seguinte sintaxe: seletor {propriedade: valor;} Seletor: genericamente, é o elemento HTML (ou uma classe pré definida ou pseudo-seletor, conforme veremos adiante) para o qual a regra será válida (por exemplo: <p>, <h1>, <form>,.minhaclasse, etc...); Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...). Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...) Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves. Quando mais de uma propriedade for definida na regra, devese usar ponto-e-vírgula para separá-las. INSTITUTO INFNET - 91
92 Tipos de Seletores Seletores podem ser: Simples Múltiplos Contextuais Classes Pseudoclasses Grupos de ID 92 BCA.3.2 Sintaxe das CSS Sempre que formos trabalhar com CSS vamos utilizar seletores. São eles que vão possibilitar a localização do objeto que você quer modificar. Existem várias maneiras de se declararem os seletores, muitas delas recorrem as próprias tags do HTML outras utilizam nomes, identificadores e até fórmulas. O bom entendimento de como lidamos como seletores é fundamental para ganhar toda a liberdade e praticidade que o CSS pode nos proporcionar. INSTITUTO INFNET - 92
93 Seletores Simples São aqueles formados por tags HTML p {font-family: courrier; color: red} h1 {font:small-caps bold; color:red} h2 {font:small-caps bold} 93 BCA.3.2 Sintaxe das CSS Ao definirmos o estilo com um seletor simples, o mesmo funciona como uma redefinição da tag no documento, formatando todas as ocorrências da mesma. INSTITUTO INFNET - 93
94 Seletores Múltiplos São aqueles formados por mais de um seletor simultaneamente p, td {font-family: courrier; color: red} h1, h2{font:small-caps bold; color:red} h3, h4{font:small-caps bold} 94 BCA.3.2 Sintaxe das CSS Os seletores múltiplos têm mais de um seletor separado por vírgula(s). As propriedades e seus atributos são declarados entre-chaves são aplicadas da mesma forma a todos os seletores. INSTITUTO INFNET - 94
95 Seletores Contextuais O estilo é aplicado no primeiro seletor se e somente se a tag estiver contida na área de influência do seletor que vem a seguir h1 p {font:small-caps bold; color:red} h3 div{font:small-caps bold} 95 BCA.3.2 Sintaxe das CSS As propriedades e atributos são aplicadas ao seletor H1 se ele estiver na área de influência de <p> e </p>. As propriedades e atributos são aplicadas ao seletor H3 se ele estiver na área de influência de <div> e </div>. INSTITUTO INFNET - 95
96 Seletores do tipo CLASSE Cria um estilo independente que poderá ser aplicado numa tag HTML posteriormente:.minhaclasse {font-family: courrier; color:red} Esta classe pode ser aplicada a muitas tags diferentes. Pode criar um estilo dependente para ser aplicado somente com uma tag em particular: P.minhaclasse {font-family: courrier; color:red} Esta classe só pode ser aplicada à tag <P>. 96 BCA.3.2 Sintaxe das CSS Ao criarmos nossas classes precisamos estar atentos a repetição tanto de nomes quanto de atributos. Classes com nomes iguais geram conflito, sendo a última a ser lida pelo browser a escolhida para ser aplicada. INSTITUTO INFNET - 96
97 Pseudoclasses As pseudoclasses são seletores que influenciam o comportamento da tag A a:visited {color:#cc0000} a:link {color:#ff0000} a:hover {color:#990000} a:active {color:#cccccc} 97 BCA.3.2 Sintaxe das CSS a:visited Configura o estilo para quando o link já foi visitado a:link Configura o estilo para quando o link não foi visitado a:hover Configura o estilo para quando o cursor está sobre o link a:active Configura o estilo para quando o link está ativo (sob o clique do mouse) INSTITUTO INFNET - 97
98 Seletores do tipo ID Deve ser usado apenas uma vez na página para definir um único elemento. Muito utilizados para organizar seletores contextuais criando uma seqüência lógica de atributos Permitem também que funções JavaScript identifiquem um objeto exclusivo na tela. 98 BCA.3.2 Sintaxe das CSS O seletor do tipo ID oferece grandes possibilidades, mesmo se tratando de um termo que só pode ser aplicado somente uma vez na sua página. Sua área de influência pode ser bem ampla, dependendo do tipo de objeto que for aplicado. Cada tag dentro dessa área de influência pode ser manipulada sem alterar as outras instâncias da mesma em outras partes do documento. No exemplo abaixo, se tivermos a seguinte situação: <div id = sponsor >... </div> Podemos afirmar que qualquer <h3> ou <p> que exista dentro da div com o id indicado vai ser formatada sem que se precise indicar nada mais no html. Só o identificador já basta para que o HTML entenda que deve aplicar os valores as tags indicadas no CSS como integrantes do universo do id sponsor. INSTITUTO INFNET - 98
99 Propriedades e Valores As propriedades devem estar entre chaves. Podem existir duas ou mais propriedades por seletor, desde que separadas por um ;. Não usar o ; pode causar falha total na regra. Propriedades podem ter mais de um valor associado. Os valores não precisam estar separados por vírgulas. 99 BCA.3.2 Sintaxe das CSS Os seletores são muito úteis, mas não conseguem fazer nada sem as propriedades ou os valores. São com eles que conseguimos atribuir, mesclar e manipular os elementos da interface que selecionamos via os seletores, além de, podermos colocar inúmeras propriedades e valores por seletor. Propriedade: é o atributo ao qual será aplicada a regra (por exemplo: font, color, background, etc...). Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor preta, fundo vermelho, etc...) No exemplo ao lado, estamos aplicando as seguintes propriedades e valores ao seletor h1: h1{ font-family:arial, Helvetica, sansserif; font-size:28px; color:#990000; text-transform: uppercase;} INSTITUTO INFNET - 99
100 INSTITUTO INFNET - 100
101 Exercício teórico Resolva o questionário abaixo. 101 BCA.3.2 Sintaxe das CSS Exercícios: 1) Qual das seqüências abaixo temos certeza de que não teremos problemas de funcionamento no estilo? a) a:link, a:vlink, a:active, a:hover b) a:link, a:vlink, a:hover, a:active c) a:vlink, a:link, a:active, a:hover d) a:vlink, a:link, a:hover, a:active e) Nenhuma das respostas 2) O estilo personalizado é configurado com: a) pseudoclasses b) classes c) ids d) a e b estão corretas e) b e c estão corretas 3) Se queremos aplicar um estilo em mais de um seletor, optamos por: a) seletores contextuais b) vários seletores simples c) seletores múltiplos d) basta aplicar classes nas pseudoclasses e) Todas as alternativas estão corretas INSTITUTO INFNET - 101
102 Lab 11 Abra o arquivo lab11.html e aplique seus conhecimentos em seletores, seguindo as instruções listadas abaixo. 102 BCA.3.2 Sintaxe das CSS 1) Criar uma classe para o Body do documento, aplicando a imagem bg_topo.gif como background mantendo a repetição somente na horizontal; 2) Redefinir os títulos e parágrafos seguindo as seguintes formatações: h1 fonte Arial, tamanho 28, cor: #990000, toda frase em caixa alta; h2 - fonte Arial, tamanho 18, cor: #990000; p - fonte Arial, tamanho 13, cor: #333333; 3) Utilizando um seletor com o id: funcionalidades, redefina o 3º título e os links da lista, seguindo as seguintes formatações: h3 - fonte Arial, tamanho 14, cor: #333333; a - fonte Arial, tamanho 12, cor: #990000, decore os link com sublinhado somente quando o mouse passar por sobre o link. INSTITUTO INFNET - 102
103 Lab 12 Abra o arquivo lab12.html e aplique seus conhecimentos em especificações, seguindo as instruções listadas abaixo. 103 BCA.3.2 Sintaxe das CSS 1) Corte todos os estilos existentes dentro do <head> do documento lab11.html e cole em uma arquivo texto em branco. 2) Salve esse arquivo como lab12.css 3) Teste o documento lab11.html, sem nenhum dos estilos criados até agora. 4) Salve a página com lab12.html 5) Volte ao documento e utilize o método Linking para criar um vínculo entre lab12.html e lab12.css. 6) Teste novamente o documento e sinta a diferença. INSTITUTO INFNET - 103
104 3.3 Style Switchers JavaScript e CSS Bloco de Construção do Aprendizado Ao juntarmos as forças do CSS com JavaScript podemos criar interfaces bem elaboradas e acessíveis. Com a técnica Style Switchers aprenderemos a lidar com folhas de estilo alternativas e como deixar o usuário alterná-las. INSTITUTO INFNET - 104
105 Uma página, vários estilos Possibilita os usuários escolherem o estilo a ser aplicado na página Uma ótima alternativa de acessibilidade Usaremos JavaScript, CSS e Cookies para habilitar essa funcionalidade Style Switchers JavaScript e CSS Os Style Switchers nasceram com o intuito de ajudar designers e desenvolvedores a criarem interfaces capazes de serem alteradas pelo usuário. Sendo muito utilizados em páginas com conteúdo que potencialmente terá um público muito heterogêneo, ou um público que precise se alternativas de layout com modos de acesso (deficientes visuais, e outros). A partir de um artigo Alternative Style: Working With Alternate Style Sheets apresentado no site A list Apart, demonstraremos como implementar o uso de folhas de estilo alternativas. Veja: INSTITUTO INFNET - 105
106 Folhas de estilo alternativas Persistent <link rel="stylesheet" type="text/css" href="default.css" /> Preferred <link rel="stylesheet" type="text/css" href= vermelho.css" title= vermelho" /> Alternate <link rel="alternate stylesheet" type="text/css" href= azul.css title= azul" /> Style Switchers JavaScript e CSS Os usuários do Internet Explorer não estão acostumados com folhas de estilo alternativas, pois o mesmo não suporta esse método. Browsers como Konqueror, Safari, Mozilla e Opera suportam folhas de estilo alternativas. Essa funcionalidade faz com que o usuário possa trocar as folhas de estilo de uma página como uma funcionalidade do próprio Browser. Visando expandir o número de usuários explorando esse conceito, os desenvolvedores do A list a Part criaram os Style Switchers. Para criarmos o nosso Switcher, precisamos criar folhas de estilo alternativas que posteriormente vão ser chamadas pelo JavaScript. Existem três formas de nós referenciarmos as folhas de estilo no <head> de nossa página: Persistent Esse é o tipo de link que estamos acostumados a trabalhar, onde os estilos estão sempre habilitados. Para um CSS ser do tipo Persistent, o atributo rel precisa ser stylesheet e não se coloca um name para o arquivo. Preferred Assim como o anterior, o Preferred também está sempre ligado, mas a diferença é que ele pode ser desabilitado pelo usuário deixando que outro CSS tome o seu lugar. Para um CSS ser do tipo Preferred, o atributo rel precisa ser stylesheet sendo necessário que o arquivo seja nomeado com o atributo title. Alternate Esse é o tipo de CSS que o usuário pode escolher para usar em substituição a que está Preferred. Para especificarmos que uma CSS é do tipo Alternate o atributo rel precisa ser alternate stylesheet sendo necessário que o arquivo seja nomeado com o atributo title. INSTITUTO INFNET - 106
107 O JavaScript do Switcher function setactivestylesheet(title) { var i, a, main; for(i=0; (a = document.getelementsbytagname("link")[i]); i++) { if(a.getattribute("rel").indexof("style")!= -1 && a.getattribute("title")) { a.disabled = true; if(a.getattribute("title") == title) a.disabled = false; } } } Style Switchers JavaScript e CSS Esse é um script feito especialmente para identificar as folhas de estilo pelo atributo title, e substituí-lo. Note que somente os CSS do tipo Preferred e Alternate vão ter o atributo title. Preferencialmente esse script é colocado em um.js externo, pois todas as nossas páginas vão precisar ter esse script. INSTITUTO INFNET - 107
108 Cookies Fazem que o estilo escolhido pelo usuário persista por todo o site Precisam de funções específicas para serem relacionadas ao usuário Outras funcionalidades além do switcher podem ser adicionadas aos cookies Style Switchers JavaScript e CSS function createcookie(name,value,days) { if (days) { var date = new Date(); date.settime(date.gettime()+(days*24*60*60*1000)); var expires = "; expires="+date.togmtstring(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readcookie(name) { var nameeq = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charat(0)==' ') c = c.substring(1,c.length); if (c.indexof(nameeq) == 0) return c.substring(nameeq.length,c.length); } return null; } INSTITUTO INFNET - 108
109 Colocando tudo junto Faremos o link do nosso.js a página <script type="text/javascript" src="styleswitcher.js"></script> E links para o usuário escolher o estilo <a href="#" onclick="setactivestylesheet( v'); return false;">estilo Vermelho</a> <a href="# onclick="setactivestylesheet( azul'); return false;">estilo Azul</a> Style Switchers JavaScript e CSS INSTITUTO INFNET - 109
110 Lab 13 Abra o arquivo lab13.html e aplique seus conhecimentos em JavaScript e CSS, seguindo as instruções contidas nos comentários do arquivo Style Switchers JavaScript e CSS INSTITUTO INFNET - 110
111 O que já aprendemos? UA 3: Cascading Style Sheets BCA 3.1: Entendendo as CSS BCA 3.2: Sintaxe das CSS BCA 3.3: Style Switchers - JavaScript e CSS 111 UA Cascading Style Sheets Aprendemos neste BCA: Como criar CSS alternativos Relacionar um JavaScript para a troca de estilos Trabalhar com Cookies INSTITUTO INFNET - 111
112 4- Metodologia Tableless Unidade de Aprendizado INSTITUTO INFNET - 112
113 Metodologia Tableless Você aprenderá: As vantagens de se trabalhar seguindo a Metodologia Tableless As técnicas de formatação e criação de layouts Tabeless Que Tableless é muito mais do que simplesmente páginas sem tabelas 113 UA Metodologia Tableless Nesta Unidade de Aprendizado, abordaremos a composição de layouts de páginas internet sem tabelas, seus benefícios, problemas e soluções. Estando o assunto dividido nos seguintes Blocos de Construção do Aprendizado (BCA): BCA.4.1 BCA.4.2 Introdução ao Tableless Box Model Margin e Padding Float Clear Mudando gradualmente Positioning Posicionamento Estático Posicionamento Absoluto Posicionamento Relativo BCA 4.3 Manipulando Listas Listas como Navegadores Manipulando Listas Adicionando Submenus as listas BCA 4.4 CSS Hacks Exemplos de CSS Hacks INSTITUTO INFNET - 113
114 4.1 Introdução ao Tableless Bloco de Construção do Aprendizado INSTITUTO INFNET - 114
115 Introdução ao Tableless Você aprenderá: Box Model Float Posicionamento Manipulando listas CSS Hacks e DOCTYPE 115 BCA.4.1 Introdução ao Tableless INSTITUTO INFNET - 115
116 Box Model Caixas" de exibição de tags de bloco; Apresentam características como: borda, margens, padding (margens internas), background (fundo), etc; As caixas são formatadas, estilizadas e dispostas pelas CSS segundo uma seqüência, na qual cada elemento HTML ocupa uma caixa. 116 BCA.4.1 Introdução ao Tableless A partir de agora, estaremos sempre falando do Box Model como uma referência a como os browsers interpretam de tags bloco, como divs e parágrafos. Essas caixas vão ser essenciais par montarmos nossos layouts, pois vão permitir a criação de colunas e várias outras estruturas. A compreensão de como podemos manipular seus atributos, tais como borda, margens, padding (margens internas) e background (fundo) será fundamental. INSTITUTO INFNET - 116
117 Margin e Padding As propriedades margin e padding são bem parecidas: ambas têm a mesma sintaxe, mas com propósitos diferentes. - Padding: é utilizada para definir o espaço entre a borda do box e seu conteúdo interno. - Margin: define a margem, o espaço em volta do box (da borda para fora). 117 BCA.4.1 Introdução ao Tableless As propriedades margin e padding são bem parecidas: ambas têm a mesma sintaxe, mas com propósitos diferentes. Padding é utilizada para definir o espaço entre a borda do box e seu conteúdo interno. Já a propriedade margin define a margem, o espaço em volta do box (da borda para fora). Uma sintaxe muito similar com as tabelas e as suas relações com as células e colunas. INSTITUTO INFNET - 117
118 Margin e Padding Conteúdo Marging Padding Borda 118 BCA.4.1 Introdução ao Tableless div{ background-color:#ffffff; margin:0px;} Notamos que, quando zeramos as margens da div do conteúdo o mesmo se posiciona no topo esquerdo tal como uma célula de tabela com o alinhamento top. div{ background-color:#ffffff; margin:0px; padding-left:10px; padding-top:10px;} E se ainda adicionarmos os atributos de padding ativando as margens internas do box, ele se desloca tal qual fazíamos com as de tabelas. O único inconveniente é que, quando utilizamos padding, tanto nossa largura quanto altura da div que envolve o conteúdo foi redimensionado. INSTITUTO INFNET - 118
119 Float Atributo essencial para construção de layouts; Os objetos com esse atributo literalmente flutuam em relação ao outros; Seus valores são none, left e right, sendo none o default. 119 BCA.4.1 Introdução ao Tableless Já que não usaremos mais tabelas para nos guiar, teremos que atribuir aos objetos um atributo fundamental para formarmos nossos layouts. O Float faz os elementos flutuarem literalmente, podendo assim resolver vários problemas de layout sem termos que criar estruturas ou mesmo scripts para simularmos esse tipo de atributo. Os objetos que conterem esse atributo, vão poder se relacionar com o ambiente de uma forma diferente podendo ainda ser empilhados, isso quer dizer além dos atributos X e Y poderemos incluir o Z como uma forma de extrapolar as duas dimensões da página criando muitos efeitos antes restritos a scripts. INSTITUTO INFNET - 119
120 Objeto com atributo de float:right. Float Dois objetos, um com atributo de float:left e outro float:right. 120 BCA.4.1 Introdução ao Tableless #foto{width:134px; margin-right:10px; float:none;} #foto{width:134px; margin-right:10px; float:left;} #foto{width:134px; margin-right:10px; float:right;} INSTITUTO INFNET - 120
121 Clear Atributo essencial para construção de layouts; Atributo clear provoca uma quebra no float; Seus valores são none, right, left e both. 121 BCA.4.1 Introdução ao Tableless Como agora estaremos trabalhando em um ambiente que nos permite fazer com que nossos objetos flutuem, devemos tomar certas precauções quando estivermos posicionando nossos objetos. O atributo Float influencia diretamente os objetos que estiverem próximos dele, principalmente aqueles que também apresentarem Float, invertido ou não. Se esse fluxo de flutuação não for quebrado todos os objetos subseqüentes vão seguir um encadeamento gerando um dos problemas mais comuns em se tratando de layouts sem tabelas. O Clear vem solucionar esse problema, quebrando a seqüência de flutuação dos objetos e mantendo os atributos na cadência em que você determinou. Essa quebra pode ser atribuída para ambos os lados (both) ou somente em um lado específico (left ou Right). INSTITUTO INFNET - 121
122 float:left float:right clear:both Clear O atributo clear provoca uma quebra no float fazendo com que, se houver um elemento com float antes do que recebe o clear, o elemento com clear apareça depois do anterior, ignorando o float. 122 BCA.4.1 Introdução ao Tableless Se apenas dispormos objetos com atributo de Float, sem que exista em momento algum a quebra da flutuação todos vão seguir o encadeamento. br{ clear:both;} Se simplesmente entro os objetos colocarmos um <br> com atributo de clear:both, estaremos determinando que todas as vezes que eu usar o br ele irá quebrar o fluxo de flutuação em ambos os lados de qualquer objeto com o qual ele tenha proximidade. INSTITUTO INFNET - 122
123 Dimensões máximas max-height div { max-width: 500px} max-width h2 { max-width: 500px} 123 BCA.4.1 Introdução ao Tableless max-height A propriedade max-height define a altura máxima permitida para um elemento. max-width A propriedade max-width define a largura máxima de um elemento. Valores atribuídos: None Não estabelece qualquer limite para a largura ou altura máxima do elemento Valores fixos (px) Define a largura ou altura máxima permitida para o elemento Porcentagem (%) Define a largura ou altura máxima permitida para o elemento como uma percentagem da largura ou altura do bloco que o contém INSTITUTO INFNET - 123
124 Dimensões mínimas min-height h1 { min-width: 500px} min-width h2 { min-width: 500px} 124 BCA.4.1 Introdução ao Tableless min-height A propriedade min-height define a altura mínima permitida para um elemento. min-width A propriedade min-width define a largura mínima de um elemento. Valores atribuídos: None Não estabelece qualquer limite para a largura ou altura mínima do elemento Valores fixos (px) Define a largura ou altura mínima permitida para o elemento Porcentagem (%) Define a largura ou altura mínima permitida para o elemento como uma percentagem da largura ou altura do bloco que o contém INSTITUTO INFNET - 124
125 Exercício teórico Resolva o questionário abaixo. 125 BCA.4.1 Introdução ao Tableless Exercícios: 13) Afinal o que é o Box Model? a) Um modelo de caixas que utilizamos para separar o conteúdo da forma. b) Caixas de texto invisíveis que dispostas em conjunto formam as páginas. c) Caixas de tags em bloco estilizadas com CSS e dispostas em seqüência d) Blocos de texto que podem flutuar junto com as imagens de uma página e) Caixas que simulam o posicionamento que as tabelas conseguem sem tantas tags. 14) Assinale a alternativa incorreta: a) O Padding define o espaço entre a borda do box e seu conteúdo interno. b) O Padding pode ser dividido em: Left, Right, Top, Bottom e Justify c) A Margin define o espaço em volta do box, da borda para fora. d) A Margin pode ser dividida em: Left, Right, Top, Bottom e) Todas as respostas acima estão incorretas. 15) Quando utilizamos o atributo Clear, queremos: a) Limpar o código para acrescentarmos mais objetos ao documento b) Travar as direções do Float dos objetos próximos ao com o atributo c) Quebrar a regra do float permitindo outros objetos se encadearem d) Atribuir aos objetos próximos uma relação de quebra de posicionamento. e) Entrar com outros valores no atributo de float do objeto selecionado INSTITUTO INFNET - 125
126 Lab 14 Abra os arquivos lab14.html e vamos montar um layout básico com duas colunas totalmente tableless. 126 BCA.4.1 Introdução ao Tableless INSTITUTO INFNET - 126
127 tabela 1 tabela 1.1 tabela 1.2 tabela tabela tabela tabela 1.3 Mudando Gradativamente Layouts com Tabela 1) Muitas tabelas aninhadas; 2) Estruturas complexas somente para posicionar; 3) Alinhamentos sempre dependentes de outros compartimentos (<td> <table>... </table></td>) 4) Limitações de interatividade com o layout; 127 BCA.4.1 Introdução ao Tableless Trabalhando com tabelas, quase sempre temos estar pensando em maneiras de como enganar o browser. A cada tabela dentro de tabela que criamos, damos ao browser a sensação de que para mostrar um certo conteúdo, ele tem que construir paredes inteiras para empurrar nossos objetos. Quanto mais paredes criamos, mais exigimos do browser como construtor dessa interface. Por isso tabelas aninhadas trazem tantos problemas tanto na sua criação quanto na renderização. E as limitações não param por ai. Com a Web cada vez mais voltada para a customização, cada vez mais encontramos interfaces que podem ser adaptadas pelos usuários. Com tabelas, esse se torna um trabalho extremamente desgastante quanto a sua produção, e de disponibilização segregada aos usuários com largura de banda alta. INSTITUTO INFNET - 127
128 Layer 1 Layer 2 Layer 3 Layer 3 Layer 3 Layer 4 Mudando Gradativamente Layouts com Layers 1) Layers Independentes; 2) Múltiplos posicionamentos por tipo de objeto; 3) Herança de atributos facilitam a interatividade; 4) Possibilidades ilimitadas de layouts dinâmicos; 128 BCA.4.1 Introdução ao Tableless Ao começarmos a mudar o nosso layout para tableless, isso quer dizer sem tabelas, entraremos em um mundo no qual a semântica faz toda a diferença. Cada tag, atributo e especificação usada da forma certa trará benefícios a todos nós. Layouts montados baseados nessa metodologia são extremamente ágeis, muito simples de serem atualizados e disponibilizados. INSTITUTO INFNET - 128
129 Lab 15 Abra os arquivos lab15.html e lab15.css e aplique seus conhecimentos em Float e Clear seguindo as instruções contidas nos comentários do arquivo CSS. 129 BCA.4.1 Introdução ao Tableless INSTITUTO INFNET - 129
130 O que já aprendemos? UA 4: Metodologia Tableless BCA 4.1: Introdução ao Tableless 130 UA Metodologia Tableless Aprendemos neste BCA: O Box Model Margin e Padding O atributo Float O atributo Clear Mudando Gradativamente para layouts sem tabelas INSTITUTO INFNET - 130
131 4.2 Positioning Bloco de Construção do Aprendizado INSTITUTO INFNET - 131
132 132 Posicionamento Estático Mantém a posição normal do elemento no documento. Não suporta propriedades left, top, right, e botom <html> <head><title> Exemplo</title> <style> <! div {position: static;} --> </style> </head> <body> <div><img src="foto1.jpg" width="134" height="99" /></div> </body> </html> BCA.4.2 Positioning Mantém a posição normal do elemento no documento. Não suporta propriedades left, top, right, e botom INSTITUTO INFNET - 132
133 Posicionamento Absoluto Posiciona o objeto em qualquer lugar à partir de coordenadas: top, right, bottom e left. <html> <head><title> Exemplo</tilte> <style> <! div {position: absolute; top: 15px; left: 15px;} --> </style> </head> <body> <div><img src="foto1.jpg" width="134" height="99" /></div> </body> </html> 133 BCA.4.2 Positioning O elemento com valor absoluto pode ser posicionado em qualquer lugar da página. As coordenadas são relativas ao elemento-pai que possua também um atributo position. Se não houver nenhum elemento-pai com position, as coordenadas são em relação ao navegador. 15px 15px INSTITUTO INFNET - 133
134 Posicionamento Relativo Posiciona o objeto a partir de coordenadas levando em consideração a posição do objeto pai. <html> <head><title> Exemplo</tilte> <style> <! div {position: absolute; top: 15px; left: 15px;} img{position: relative; top: 20px; left: 20px;} --> </style> </head> <body> <div><img src="foto1.jpg" width="134" height="99" /></div> </body> </html> 134 BCA.4.2 Positioning O objeto com posicionamento relativo assume as coordenadas atribuídas a tag aonde ele reside e ainda adiciona o seu próprio valor no deslocamento. 15px 20px 15px 20px INSTITUTO INFNET - 134
135 Empilhamento de camadas Permite que objetos sejam empilhados utilizando o atributo z- index. <html> <head><title> Exemplo</tilte> </head> <body> <div id="foto" style="position:absolute; left:104px; top:64px; width:134px; height:99px; z-index:1"><img src="foto1.jpg" width="134" height="99"></div> <div id="foto2" style="position:absolute; left:168px; top:120px; width:134px; height:99px; z-index:2"><img src="foto2.jpg" width="134" height="99"></div> </body> </html> 135 BCA.4.2 Positioning Ao trabalharmos com CSS para posicionamento, percebemos que a tag DIV é extremamente versátil se tornando o compartimento padrão quando estamos falando de divisões. Essas divisões, estão relacionadas as partes do seu conteúdo, por exemplo, podemos ter uma div para contendo toda a navegação, outra para todo o conteúdo e outra para o rodapé. Mas existem momentos em que precisamos avançar os limites do nosso layout e posicionar esses objetos de uma maneira não convencional. O empilhamento. Esse conceito de se utilizar a propriedade z, para se dar a noção de profundidade com o atributo z-index sempre esteve relacionado a tag layer e sempre eram chamados de camadas ou ainda layers fazendo referência à antiga tag exclusiva da Netscape. Hoje em dia, não utilizamos mais essa tag layer e sim div. Continuamos empilhando ou simplesmente posicionando nossos objetos por cima de toda página como tem sido utilizado em larga escala em banners publicitários. INSTITUTO INFNET - 135
136 Empilhamento no Dreamweaver 136 BCA.4.2 Positioning Dentro do Dreamweaver,, as camadas ainda são chamadas Layers mas já utilizam a tag div. Para adicionar uma layer, precisamos trabalhar com o dreamweaver no modo Standard View. Na palheta Common (Comum) e na palheta Layout (Desenho) existe uma opção de desenhar sua layer, como mostra na figura abaixo: Para acessar o painel de layer vá em > Windows > Others > Layers. O painel de layer serve para você poderá controlar a ordem de empilhamento das layers INSTITUTO INFNET - 136
137 Media Types e Positioning Podemos associar mais de um tipo media por documento Cada CSS pode mudar inteiramente o documento Regras para dispositivos móveis e impressão são os mais utilizados 137 BCA.4.2 Positioning Uma das maneira mais práticas de se lidar com posicionamento e múltiplo layouts para todos os tipos de dispositivos a partir de um único documento, é trabalhar com as especificações de tipo de media na página. Existem três maneiras de atribuir os media Types em uma página 1) Podemos atribuir um novo tipo de media já no link do Style Sheets: <link rel="stylesheet" type="text/css" href="ink.css" media="print"> 2) Podemos importar o CSS e associar vários tipos de media ao mesmo CSS <style type="text/css" media="braille, "../tactile.css"; </style> 3) E podemos ainda definir qual tipo de media no CSS embedded <style print { h1 {font-size: 22pt; background: white; } } </style> INSTITUTO INFNET - 137
138 Lab 16 Abra os arquivos lab16.html e lab16.css e aplique seus conhecimentos em Float e Clear seguindo as instruções contidas nos comentários do arquivo CSS. 138 BCA.4.2 Positioning INSTITUTO INFNET - 138
139 Lab 17 Abra os arquivos lab17.html e lab17.css e aplique seus conhecimentos em media types. 139 BCA.4.2 Positioning INSTITUTO INFNET - 139
140 O que já aprendemos? UA 4: Metodologia Tableless BCA 4.1: Introdução ao Tableless BCA 4.2: Positioning 140 UA Metodologia Tableless Aprendemos neste BCA: Posicionamento Estático Posicionamento Absoluto Posicionamento Relativo INSTITUTO INFNET - 140
141 4.3 Manipulando Listas Bloco de Construção do Aprendizado INSTITUTO INFNET - 141
142 Listas como Navegadores Vantagens: Muito leves Extremamente práticas Semanticamente corretas (lista de links) Múltiplas possibilidades (vertical e horizontal) Se adaptam facilmente a qualquer layout 142 BCA.4.3 Manipulando listas O Com o intuito de facilitar a atualização e ao mesmo tempo tornar nossas navegações mais intuitivas e semanticamente corretas. Designers especializados em CSS, começaram a utilizar Listas Desordenadas como navegadores. Essa técnica se tornou extremamente popular e vem se mantendo como uma das formas mais simples e eficazes de se montar uma navegação. Vamos aqui apresentar uma versão do método do estúdio australiano MaxDesign. ( INSTITUTO INFNET - 142
143 Manipulando listas Montamos uma lista desordenada Depois tiramos as margens e os paddings do UL Tiraremos os bullets dos itens Faremos eles ficarem na mesma linha Formataremos os links e bordas 143 BCA.4.3 Manipulando listas Os passos acima são como uma fórmula. Tornar uma simples lista desordenada em um navegador, exige um pouco mais de trabalho do que estávamos acostumados quando lidávamos com links no CSS. Temos que tirar toda a estrutura da lista e depois, nesse nosso exemplo, modificar-mos a disposição de vertical para horizontal. Ornamentar links e bordas também podem ser bem efetivos como itens fde finalização. Atualmente existem várias técnicas relacionadas a transformação de listas e objetos de navegação. No Lab a seguir, siga as instruções contidas nos comentários do exemplo e monte seu navegador a partir de uma lista. INSTITUTO INFNET - 143