Tecnologias Web EAD Estácio

Prévia do material em texto

Aula 1: Apresentação do ambiente distribuído da internet
O estudo desta disciplina abrange os principais aspectos das novas tecnologias associadas à internet, bem como suas aplicações. Abordaremos a evolução da Internet e suas aplicações, trazendo para você o conhecimento dos principais protocolos e serviços utilizados. Falaremos, também, a respeito de segurança de informações, além de apresentarmos na prática como construir páginas estáticas para Web utilizando linguagem de marcação e folhas de estilos.
Onde tudo começou
O termo Internet, muito utilizado nos dias de hoje, traz uma história bastante rica em personagens e tecnologias. Essa história começou há mais de 40 anos atrás quando o departamento de defesa americano, em plena Guerra Fria, preocupado com um possível ataque russo a sua rede de dados,  lançou, em setembro de 1969, o embrião da Internet.
Durante a Guerra Fria, algumas Universidades e Centros de Pesquisa, tais como Stanford Research Institute (SRI), UCLA, UC - Santa Barbara (UCSB) e Utah aderiram ao projeto de segurança do governo americano sendo os primeiros nós da futura super rede.
ARPA
Enquanto russos e americanos disputavam pela ida do homem à Lua, o projeto da rede de segurança do governo americano corria paralelamente em sigilo sendo financiado pela Advanced Research Projects Agency (ARPA).
ARPA é um órgão responsável pelo desenvolvimento de pesquisas científicas e tecnológico com cunho militar dentro do governo americano.  Com a ARPA responsável pelo projeto de uma super rede, o projeto foi batizado de ARPANET. 
Isso mesmo, a Internet que conhecemos hoje teve este nome anteriormente.
Requisitos da Arpanet - A origem do sucessor
Os pesquisadores trabalhavam para desenvolver uma rede com os seguintes requisitos:
1- Utilizar os serviços de hardware distribuídos.
2- Ser recuperável à distância.
3- Utilizar bancos de dados remotamente.
4- Compartilhar sub-rotinas de softwares e pacotes não disponíveis nos computadores dos usuários devido à incompatibilidade de hardware ou língua;
A essa altura você já deve estar ligando as coisas. Com esses 4 requisitos, fica fácil entender o sucesso da Internet nos dias de hoje.
Vamos ver como os 4 requisitos da ARPANET funcionam na prática:
Bem, tudo isso precisava de um protocolo de comunicação para funcionar. Foi ai que surgiu o TCP/IP (Transmission Control Protocol / Internet Protocol) que possibilitaria a comunicação de duas ou mais máquinas endereçadas por um número único, o endereço IP (Endereço que identifica uma máquina ou hardware em uma rede com padrão TCP/IP). Hoje temos padrão IPv4 e IPv6 que trabalham com endereços de 32 bits e 128 bits respectivamente.
Como você viu, o projeto do governo americano foi tão bom, mas tão bom, que não podia ficar “dentro do quartel”.
Os acadêmicos começaram a criar inúmeras soluções para trocas de dados e informações utilizando este tecnologia.
E, até hoje, isso vem alcançando ganhos inimagináveis para aquela época.
Em 1983 a ARPANET foi dividida, ficando a parte militar com o nome de MILNET e a parte civil manteve o mesmo nome ARPANET que foi modificado para Internet em 1995.
Primeiras redes sociais
As primeiras redes virtuais foram: ARPANET, BITNET, USENET e FIDONET.
Elas favoreceram, durante os anos 70, um grande impulso no trabalho científico, pois, pela primeira vez, a tecnologia permitiria trocar informações, dados e arquivos de maneira rápida entre pessoas a grandes distâncias.
Mas o que seriam estas redes?
BITNET 
A Rede foi criada para envio e recebimentos de e-mails entre Instituições de Pesquisas no mundo todo.
 Em 1988, o LNCC (Laboratório Nacional de Computação Científica) no Rio de Janeiro se conectou via link (conexão de dados) de 64kbps à Universidade de Maryland nos Estados Unidos.
 Em 1989, chegou a vez do NCE (Núcleo de Computação Eletrônica) da UFRJ se ligar a UCLA, também nos Estados Unidos. 
 Várias Instituições de Pesquisa e Universidades foram se interligando por esta rede que só veio a perder força com a popularização do e-mail via Internet . 
 Cabe ressaltar que esta rede era fechada, isto é, somente aquelas Instituições de Pesquisa e Educação filiadas poderiam se falar a princípio.
USENET
É um acrônimo de Users Network (Rede de Usuários). Consistia em um sistema global de discussão na Internet derivado das redes UUCP (Acrônimo de UNIX To UNIX Copy Protocol. É tanto um protocolo quanto um programa).
 Este sistema é um dos mais antigos de comunicação entre redes. Ele possibilita a troca de mensagens e opiniões entre usuários interessados no mesmo tema. Como nos Fóruns de Discussão que existem hoje em dia.
 Começou a funcionar em 1980. Na época, era chamada de ARPANET para pobres. Ela empregava UUCP para utilização de e-mail e transferência de dados, formando, assim, uma solução denominada grupos de notícias. Qualquer usuário inscrito em um grupo de notícias poderia enviar uma mensagem para seu grupo.
 A USENET deu origem ao que conhecemos nos dias de hoje como listas de discussão e fóruns.
Por essa você não esperava?!
FIDONET
Foi fundada em 1984.  
Era a rede mundial de computadores utilizada para comunicação com os BBS (Bulletin Board System).
 Muito popular no início dos anos 90, serviu de inspiração dos recursos e formas de utilização que temos hoje na Internet. Os BBS eram verdadeiros oásis digitais trazendo diversos recursos como em um portal de Internet. 
 Através dos BBS, um usuário poderia fazer uma conexão via modem e linha telefônica, acessando um sistema, utilizando um programa de terminal, utilizando a FIDONET.  Muitos BBS ofereciam jogos on-line, envio e acesso a arquivos, leituras de notícias, envio e recebimento de e-mails e mensagens para grupos de discussão e salas de bate-papo. Tudo isso utilizando programas.
Na figura abaixo, você verá um BBS de SP que ficou no ar até 2007.
Linha do Tempo
Vamos à linha do tempo para falar dessas tecnologias.
1969 : ARPANET
1971 : Criação do símbolo @ 
Envio do primeiro e-mail por Ray Tomlison utilizando a ARPANET.
1973 : Robert Metcalfe planejou o método de conexão de rede Ethernet na Xerox Palo Alto Research Center.
1976 : A Rainha do Reino Unido – Elisabeth II envia seu primeiro e-mail.
1979 : Criado o primeiro worm com o objetivo de buscar “tempo livre” nas máquinas. Isso se transformaria em uma falha de segurança no futuro. Também no mesmo ano, a USENET é estabelecida e o primeiro jogo (Dungeons) em rede foi criado pelos estudantes Richard Bartle e Roy Trubshaw da Universidade de Essex.
1980 : O protocolo TCP/IP vira padrão para comunicação de redes na ARPANET.
1983 : ARPANET se divide em ARPANET e MILNET utilizando o protocolo TCP/IP.
1985 : O primeiro BBS foi criado por Stewart Brand e Larry Brilliant para construir uma comunidade “virtual” de usuários de computadores de baixo custo.
1988 : Morris lançou um worm na ARPANET que atingiu 6000 das 60000 máquinas da rede. Morris foi condenado a 3 anos de liberdade condicional, 400 horas de serviços comunitários e uma multa de 10.050 dólares.
1990 : Nascia a World Wide Web – WWW – quando Tim Berners-Lee, pesquisador de CERN, criou a linguagem HTML (Hyper Text Markup Language). A WWW ganhava o apelido de Teia.
Servidores registrados na Internet
O gráfico abaixo apresenta a evolução do número de máquinas registradas na Internet desde 1994 até hoje. Estamos na casa dos 700 milhões de servidores espalhados pelo mundo, atendendo a toda sorte de solicitações e demandas. Com novas tecnologias e dispositivos sendo adicionados à grande rede a cada dia, estamos certos de que esta curva será cada vez mais crescente.
Antes, as informações utilizavamm telefone, telex ou carta para circular. 
Imagine quanto tempo demorava para uma simples carta chegar até o outro lado do mundo?
Imagine que, para encaminhar um documento a outra ponta, deveria ter um equipamento semelhante para receber uma imagem do mesmo! Quanto trabalho, não é?
Imagine como seria sema Internet? É, fica difícil imaginar, não é?!
Aula1:Teletransmitida 
protocolo = modo de fazer.
Aula 2: Principais protocolos da internet
O que é protocolo?
Para nos comunicarmos tanto por linguagem escrita como falada, estabelecemos, a priori, um conjunto de regras capazes de serem entendidas entre aqueles que participam da conversa.
No nosso caso, estabelecemos que a nossa língua escrita protocolar é a Língua Portuguesa. Não adianta tentar me comunicar com alguém que não saiba ler em Português. Desta forma, todos aqueles que sabem ler em Português poderão ler este texto.
Então, podemos entender que o protocolo é uma padronização que permite a comunicação entre processos.
Para nos comunicarmos, é necessário termos 2 atores. Aquele que codifica a mensagem chamaremos de emissor e aquele que decodifica, o receptor. Desta forma, para estabelecermos uma conversa, temos o emissor de um lado, o receptor do outro e o meio de comunicação, que pode ser uma conversa ao telefone, por exemplo. Um emissor também pode ser o receptor quando ele receber o retorno (feedback) da mensagem enviada ou ainda uma nova mensagem.
Conforme vimos na Aula 1 na especificação do protocolo TCP/IP, um dos requisitos é a verificação da integridade dos pacotes de dados transmitidos. Imagine que se deseje enviar um arquivo com um texto. A máquina de quem o está enviando vai codificá-lo, quebrá-lo em pedaços (pacotes) e encaminhar o tamanho e a sequência dos pacotes como referência para a máquina de quem vai recebê-lo. Para decodificar esse arquivo recebido, a máquina com o protocolo TCP/IP saberá qual o tamanho original dele e, se no meio da transmissão algo der errado, saberá que o mesmo está incompleto.
A verificação de integridade de transmissão e recebimento conferida pelo protocolo TCP/IP trouxe para a Internet um ganho expressivo, pois, através destes, outros surgiram como veremos a seguir.
Como isso funciona?
O fluxo resumido do protocolo TCP/IP é o seguinte: o aplicativo cliente se comunica com um servidor através do endereço IP, enviando ao servidor uma informação que passa pelo meio lógico. Na outra ponta, existe um outro servidor que, ao receber essa informação, gera uma ação que pode ser despachá-la para outro servidor ou armazená-la para que um cliente possa buscá-la. O aplicativo cliente entra em contato com o servidor e resgata a informação.
Correio eletrônico
Este serviço, também conhecido com serviço de e-mail, é um dos serviços mais utilizados pelos usuários da Internet. São milhões de caixas postais espalhadas pelos servidores de correio eletrônico pelo mundo utilizando os protocolos POP, IMAP e SMTP.  
O serviço de correio eletrônico possui características bem semelhantes ao processo de entrega de correspondência dos Correios. Imagine que você queira enviar uma carta até a sede de sua Universidade. Para isso, é necessário que você preencha algumas informações tais como o nome e o endereço do destinatário, o remetente e o CEP. No processamento de um correio eletrônico, isso se dá de forma semelhante. Temos que ter, antes de mais nada, um endereço de e-mail, que corresponde ao nosso CEP pessoal, um endereço único no mundo, capaz de nos identificar e o endereço do destinatário.  
Para o envio e recebimento de e-mails, utiliza-se os protocolos: SMTP, POP3, IMAP, FTP, HTTP.
SMTP
POP3
IMAP
FTP
HTTP
Cada página visitada, também chamada de Home Page, está abrigada em um site que em português chama-se sitio (local). Desta forma, para acessarmos uma página na internet, precisaremos de um endereço web chamado URL.
Com o passar do tempo, os clientes Web, além do protocolo padrão, incorporaram outros protocolos, como HTTPS, FTP e File.
Este protocolo é chamado de STATELESS.
Isto é, cada comando é executado de maneira independente, sem que se desconheça qual  comando foi executado anteriormente.
Esta é a principal razão da dificuldade em se desenvolver sites que reajam de forma inteligente à entrada do usuário.
Desta forma, tecnologias como AJAX, Javascript, Java, Cookies, entre outras, apareceram para suprir esta dificuldade.
Aula2: teletransmitida.
Aula 3: Segurança na Internet
A INTERNET É SEGURA?
Você se lembra que na Aula 1 falamos a respeito da proliferação de Worms desde a época da ARPANET? Está lembrado? Pois bem, desde a criação da Internet, a segurança das informações está sempre em pauta na mesa dos especialistas, pois, na concepção da mesma, existiu uma ideia de que, se um nó fosse atacado, o outro deveria servir de caminho alternativo. Ora, isto nada mais é do que caminhos alternativos para os invasores explorarem, pois, se em nossa rede temos vários caminhos para ir e vir, nada mais lógico que aquele que se propõe a invadir nossa rede também tente percorrê-los.
Antes de qualquer um começar, é interessante sabermos como se categorizam os invasores de sistemas, fazendo uma análise correta de cada um deles:
Hackers: São grandes administradores de sistemas, especialistas com habilidade suficiente para descobrir problemas de segurança e operação em aplicativos ou em sistemas operacionais que se divertem em atacar uma rede.
Eles se justificam dizendo trabalharem pelo prazer na superação dos limites.
Existem diversos sub-tipos de hackers: White hat, Grey hat, Black hat, Newbie, Phreaker, Cracker e Lammer.
Cracker: Eles utilizam suas habilidades para o mal. Se aproveitam da falha dos sistemas para roubarem, chantagearem ou darem prejuízo a terceiros sejam estes pessoas físicas ou jurídicas.
São os “quebradores” de sistemas. Um termo genérico para “Black hat”.
Lammers: São iniciantes na arte da invasão que se apropriam de códigos ou táticas explicitados em revistas e sites para atacarem computadores sem saber, às vezes, o que estão fazendo.
Eles simplesmente executam algo que não sabem como funciona. 
Quando as tentativas de invasão são bem-sucedidas se auto-denominam hackers.
Conheça dois  Hackers/Crackers muito famosos:
Eric Steven Raymond, Kevin David Mitnick
TIPOS DE ATAQUE
Para você saber como proteger sua máquina na Internet, é importante que conheça os principais tipos de ataque utilizados pela maioria dos vilões do ciberespaço. São eles: Cavalo de Tróia, Quebra de Senha, Denial Of Service (DOS), Mail Bomb, Phreaking, Spoofing e Scamming.
Cavalo de Tróia: 
Este é um dos ataques mais comuns que há. Você pode receber um arquivo anexo em seu e-mail, por exemplo, indicando um link e acabar baixando um programa invasor ou, ainda, executar um programa anexo ao e-mail acreditando ser uma apresentação ou uma imagem.
São do tipo Backdoor que utilizam conexão direta ou reversa entre a máquina alvo e o servidor do invasor.
Outro tipo de cavalo de tróia, ou trojan, se destina a roubar senhas de bancos e aplicativos dos usuários da máquina alvo. Eles conseguem até monitorar a sequência do mouse nos teclados de senhas. Estes são do tipo Keylogger.
Alguns trojans populares são NetBus, Back Orifice e SubSeven.
Quebra de Senha:
Este tipo de invasão trabalha com a missão de crackear, ou seja, quebrar as senhas de sistemas e usuários, utilizando técnicas de dicionários de palavras ou, ainda, uma técnica chamada “força bruta”. A quebra de senhas é uma das tarefas que mais divertem os lammers, pois muitos scripts rodam durante dias e noites até encontrarem a senha desejada.
Denial Of Service (DOS): Este ataque se caracteriza pela utilização de computadores de usuários comuns para em um determinado momento sobrecarregarem um servidor com uma quantidade excessiva de solicitações de serviços tirando-os do ar.
Este tipo de ataque traz uma vantagem ao atacante, pois pulveriza as pistas que levariam ao autor principal. Sites como CNN, Yahoo!, ZD Net, AOL, Twitter, Facebook, Google blogs já sofreram este tipo de ataque. 
Os invasores implantam, nas máquinas dos usuários, programas zumbis que ficam aguardando a ordem de atacar coletivamenteem uma determinada data.
Mail Bomb: 
Esta técnica é muito popular. 
O invasor sobrecarrega o servidor de mensagens de correio eletrônico com mensagens, fazendo com que este pare de responder pelo acúmulo de carga de serviço.
Phreaking:
No passado, este tipo de invasão era bastante comum. Muitos usuários divulgavam métodos para burlar as empresas telefônicas e garantir ligações gratuitas ou a baixo custo. 
Ainda hoje, estas técnicas são utilizadas em diversos países tanto para fixos quanto para celulares, mas ficaram restritas a especialistas
Spoofing:
Esta técnica consiste em atacar um computador através de outro, fazendo com que o administrador do sistema pense que o computador que está atacando é aquele no final da comunicação, escondendo as informações do endereço IP do computador de origem.
Scamming:
O intuito deste ataque é roubar senhas de bancos enviando ao usuário uma página simulando o site do banco do mesmo.
Este é um dos ataques que mais logra êxito, pois muitos usuários não reparam no endereço da URL, nem mesmo no cadeado do site.
COMO DIFICULTAR A QUEBRA DE SENHAS
Existem algumas maneiras de tornar a vida dos invasores um pouco mais chata e a sua um pouco mais tranquila. Ao criar uma senha, siga as seguintes dicas:
Nunca utilize senhas com menos de 6 caracteres, pois a combinação destes já dá mais trabalho ao invasor.
Não utilize dados pessoais em suas senhas, tais como nomes de pessoas, animais de estimação, ou datas de aniversário. Utilize letras Maiúsculas combinadas com Minúsculas para dificultar a vida dos invasores. Ex: AlOjPpKj
Inclua números em suas senhas. Ex: A0l2yu7sIa.
Inclua caracteres especiais. Ex: Al156@ty%67.
As senhas mais comuns para ataque são: senha, password, 123, 1234, 123456, 1234567890, amor, Deus, Deuse10, Jesus, Jeseusteama, qwerty,brazil,abc123,myspace1.
COMO DIFICULTAR O ROUBO DE INFORMAÇÕES VIA E-MAIL
Esta é uma prática comum, pois, quando utilizamos listas ou correntes (aquelas mensagens que pedem para você encaminhar para outros 20 para obter um milagre), expomos nosso endereço de e-mail para a Internet. Muitos sites armazenam mensagens de listas expondo o e-mail de seus participantes.
Algumas dicas são importantes para a proteção da identidade.
O e-mail é uma carta e, desta forma, deve ser revisada antes de ser encaminhada.
Muitas pessoas demonstram, ao responder um e-mail, total displicência com relação à forma, ao conteúdo e às informações nele contidas. 
O invasor se vale desta pressa para poder levantar dados dos usuários a serem atacados.
CRIPTOGRAFIA
É a tecnologia que tenta manter em segredo mensagens em trânsito.
Não cabe a este estudo inicial um aprofundamento das técnicas de criptografia e, portanto, abordaremos sua versão mais voltada para a Internet. 
 
Os objetivos da criptografia é manter a confiabilidade da mensagem, mantendo-a íntegra, autenticando, dessa forma, o remetente que não poderá negar a autenticidade da mesma.
Existem dois tipos de Criptografia. São eles:
Chave Simétrica: Onde tanto o emissor quanto o receptor compartilham a mesma chave. O aspecto negativo dessa técnica é o gerenciamento seguro da chave.
Chave Pública: A criptografia assimétrica procura corrigir o problema do gerenciamento seguro da chave utilizado pela chave simétrica, pois nela a chave de criptografia é diferente da chave de decriptografia. 
 
O PGP pode ser utilizado por qualquer pessoa que cria uma chave pública e uma chave privada para si, divulgando somente a chave pública. Existem servidores que armazenam esta chave pública gratuitamente como o servidor da RNP no link da figura ao lado.
Aula 4: Tipos de aplicativos que existem na internet
Internet & Aplicativos para navegação
Existem diversos tipos de aplicativos para serem utilizados na Internet.
Cada uma das categorias cumpre um papel importante, existindo, quase sempre, mais de um aplicativo por categoria.
Na sequência, dividimos em 10 categorias básicas os aplicativos para Internet que iremos lhe apresentar.
WEB 2.0
O segmento intitulado Web 2.0 merece um destaque especial e no site http://www.go2web20.net você poderá encontrar uma lista categorizada das soluções Web neste segmento. Esta nomenclatura surgiu com o intuito de divulgar um novo segmento de aplicativos que integram serviços e permitem aos seus usuários criarem e compartilharem seus recursos. Na verdade, estas soluções foram remodeladas com base nos antigos sistemas pré-existentes conforme vimos. O novo está por conta do visual e a versão Web. 
Este é um mundo vasto que, a cada dia, ganha novas ferramentas e versões que incorporam novas facilidades, chegando, inclusive , algumas vezes, a mudar a característica básica da ferramenta original.
Existem outras categorias de aplicativos para a Internet que poderiam ser listadas, 
tais como Ferramentas para Blog, Gerenciadores de Bookmarks, Ferramentas para Formulários, Ferramentas para Backups, Gerenciadores de Senhas, Ferramentas de Busca, Ferramentas para Redes Sociais, Ferramentas para Redes Sem Fio, VPN entre outras.  
• Google Docs
• Twitter
• Facebook
• Zoho
• Delicious
• Picnik
• Google Maps
• BlinkList
• Flickr
• Google Video
• Youtube
• Ustream
• Justin.tv
• Meebo
• Netvibes
• Picasa
• Think Free Office
• Basecamp
• Media-convert.com
• Snipshot
• Vimeo
Aula 5: Introdução a HTML
HTML
A grande reviravolta na Internet aconteceu quando, em 1989, Tim Berbers-Lee desenvolveu uma linguagem capaz de publicar e organizar conteúdos na Internet. Nascia, aí, a linguagem HTML (Hypertext Markup Language) que permitiria aos pesquisadores do laboratório CERN publicarem suas informações de maneira rápida, padronizada e fácil. Esta facilidade ganhou atenção mundial e tornou-se o maior hit da Internet até hoje. Já são milhões de sites e aplicações baseadas nesta linguagem que vem explorando, a cada dia, mais e mais recursos, trazendo inovação e informação para qualquer pessoa em qualquer parte do mundo onde haja uma conexão com a Internet.
A linguagem HTML é a linguagem padrão do seu navegador. Não importa se você desenvolveu uma aplicação para Web em Java, pois o servidor sempre converterá em HTML qualquer código para que o seu navegador entenda.
As 3 principais facilidades da linguagem HTML são:
Princípio da não linearidade da informação, permitindo ao usuário navegar pelas informações utilizando o princípio do hipertexto.
Permite a formatação do texto, utilizando marcações para estilizá-lo, podendo ser interpretável por todo e qualquer navegador Web desde que sejam respeitadas as marcações padrão do W3C.
Flexibilidade de uso. Esta linguagem permite fácil adequação aos mais diferentes propósitos
FACILIDADES 
Estrutura
Todos os documentos HTML são chamados de páginas e contém elementos dentro de padrões estruturais.
Cada elemento é chamado de tag. Sua sintaxe permite, ainda, a definição de parâmetros o que foi fundamental para o avanço da linguagem.
Cada elemento,quando utilizado, pode trabalhar em par com a abertura e o fechamento desta tag. Neste caso, fecha-se a tag utilizando o caracter \ dentro dos sinais de <> da mesma.
Cada comando tem seus atributos possíveis e seus valores.
De uma maneira geral, o HTML é um poderoso recurso, sendo uma linguagem de marcação muito simples e acessível, voltada para a produção e compartilhamento de documentos e imagens.
Documento HTML
Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum.
Você poderá salvá- lo com a extensão html ou htm.
Comandos em HTML
Dentro do cabeçalho de um documento em HTML podemos encontrar os seguintes comandos:
 
O conteúdo definido dentro desta tag será exibido na barra de título do seu navegador.
É compatível com os principais navegadores Web.
EXEMPLO:
<head>
<title>Aula de Tecnologias Web</title>
</head>
Quando trabalharmos com Folhas de Estilos, definimos aqui osestilos carregados.
É compatível com os principais navegadores Web.
EXEMPLO:
<HEAD>
<STYLE type="text/css">
p {color:red}</STYLE>
</head>
Utilizada para definir a carga de um script do tipo Javascript, por exemplo, do lado do cliente.
É compatível com os principais navegadores Web. No HTML 4.1 tipo de conteúdo é declarado como CDATA, que significa que as entidades não serão parseadas. Já no XHTML o tipo de conteúdo muda para (#PCDATA).
EXEMPLO1:
<SCRIPT type="text/javascript">
document.write("Olá Alunos do Curso!")
</SCRIPT>
EXEMPLO 2:
<SCRIPT type="text/javascript">// <![CDATA[document.write("Olá Alunos do Curso!");// ]]></SCRIPT>
Utilizada para definir ligações entre a página e arquivos externos como, por exemplo, arquivo de folhas de estilos.
Em XHTML esta tag deve ser obrigatoriamente fechada. 
É compatível com os principais navegadores Web. Repare que esta tag é composta, também, por atributos type e href onde o primeiro indica o tipo de referência do link e o segundo a localização do arquivo em si. 
Outros atributos também são importantes, a saber: 
charset - onde definiremos o conjunto de caracteres utilizado
media – onde definiremos o tipo de mídia utilizada. Isto é importante para a acessibilidade. Acompanhe na aula sobre acessibilidade mais à frente.
EXEMPLO:
<head>
<link rel="estilo" type="text/css" href="meuestilo.css"  />
</head>
Esta tag é uma das mais utilizadas para dar aos robôs de busca informações a respeito de sua página e site. Ela define as propriedades da página. Desta forma, ferramentas de indexação de conteúdos podem, ao ler as informações contidas nestas tags, catalogar sites e suas informações, tais  como descrição da página,autor,palavras chave, etc. 
O atributo content é obrigatório, pois especifica o conteúdo da meta informação. Os demais atributos são opcionais. 
Para definir o nome do autor da página devemos utilizar o atributo AUTHOR. Exemplo: <META NAME="AUTHOR" CONTENT="Flavio Brito">
Com o intuito de especificar as informações do cabeçalho da página poderemos utilizar o atributo HTTP_EQUIV. Exemplo: <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> 
CONTENT-TYPE – Define o tipo de conteúdo.
EXEMPLO:  <META HTTP-EQUIV="CONTENT-TYPE"  CONTENT="text/html; charset=UTF-8">
EXPIRES -  Define o prazo de expiração, indicando o tempo de obsolescência do documento. Caso coloquemos o número 0, estaremos indicando que a página expira agora e deve ser atualizada.
EXEMPLO: <META HTTP-EQUIV="EXPIRES" CONTENT="Sex, 13 Nov 2009 11:12:01 GMT">
REFRESH - Define o tempo, em segundos,  de atualização da página e, ainda, pode redirecioná-la após o prazo.
EXEMPLO: <META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.estacio.br/index2.html">
CACHE-CONTROL - Define como o cachê será controlado. Exemplo: <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
PRAGMA NO-CACHE – Indica para não armazenar a página no cache, devendo esta ser sempre solicitada ao servidor.
KEYWORDS – Define as palavras chave para a indexação da página. Todas as palavras devem ser separadas por vírgula.
EXEMPLO: <META NAME="KEYWORDS" CONTENT="Estácio, graduação, ensino a distância ">
ROBOTS - Indica como os robôs de busca e indexação deverão trabalhar em sua página. 
EXEMPLO: <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW"> . Neste caso, estamos indicando aos robôs de busca que indexem a página e não sigam os links contidos nela.
EXISTEM OUTROS ATRIBUTOS DENTRO DE META, PORÉM ESTES SÃO OS MAIS UTILIZADOS.
Tags para web
Algumas tags são importantes para o desenvolvimento da página Web  como, por exemplo, as tags de corpo, quebra de linhas e centralizações de elementos.
	Tags de Corpo
		• Comentários
Tag: <!- - >
Esta tag é utilizada para aplicar comentários ao código HTML. Não se esqueça que ela deve ser fechada por dois sinais de menos e um sinal de maior para limitar o tamanho do comentário. Caso contrário, todo o conteúdo ficará escondido do usuário.
Exemplo: 
<!—Este é o meu comentário. Quando o navegador passar neste ponto, ele não apresentará este texto na tela -->
Ancora
Caracteres e seus Controles
<br> 
Negrito Tag: <b>
Através desta tag, podemos indicar ao navegador que negrite o texto.
<html>
<body>
<b>Texto em  negrito </b><br />
</body>
</html>
<i> 
Itálico Tag: <i>
Para aplicar o efeito itálico no caracter, basta utilizar a tag <i>, não se esquecendo de fechá-la, pois, caso isto não ocorra, todos os elementos textuais ganharão este estilo.
<html>
<body>
<i>Estou em Itálico</i>
</body>
<big>
Tag: <big>
Esta tag enfatiza o conjunto de caracteres ligados a ela não só aumentando seu tamanho em letra como também a espessura do corpo de letra.
<html>
<body>
<big>Este texto está em Big</big>
</body>
<em>
Tag: <em>
Outra forma de enfatizar o texto. A diferença é que, neste caso, o texto ficará em itálico.
<strong>
Tag: <strong>
Esta tag é semelhante a tag <b>
<small>
Publica o texto de forma diminuta. 
Em HTML, esta tag faz com que o texto seja apresentado em uma fonte pequena e estreita.
<strike>
Tag: <strike>
Esta tag é utilizada quando queremos apresentar um texto todo ele riscado na horizontal.
É como se tudo aquilo que estivesse escrito fosse eliminado, porém desejamos que fosse visto.
A tag <strike> foi descontinuado no HTML 4.0.1 e não é suportada pelo DTD Strict do XHTML 1.0
<font>
Tag: <font>
O HTML é rico em recursos e nos permite definir as características das fontes a serem apresentadas no navegador Web do usuário. Existem muitas fontes a serem utilizadas. Tenha cuidado, pois nem todas estão disponíveis nas máquinas dos usuários na Internet. Prefira fontes mais conhecidas, tais como Arial, Helvetica, Times New Roman, Verdana e Courier New. Elas estão disponíveis na maioria dos ambientes gráficos dos sistemas operacionais Gnu/Linux, MacOS e Windows. O elemento font foi descontinuado no HTML 4.0.1 e não é suportado pelo DTD do Strict do XHTML 1.0.
<html>
<body>
<font size="3" color="red">Este é um texto em vermelho cujo tamanho é 3</font><p>
<font face="verdana" color="green">Este é um texto utilizando a família Verdana em verde</font>
</body>
Controle de Caracteres
Quebra de Linha
Tag: <br>
Quando desejarmos quebrar uma linha, tal como fazemos em nosso editor de texto, basta utilizar a tag <br>. 
Tag: <p>
Já esta tag representa um salto maior. Ela simboliza a quebra de parágrafo feita no editor de textos.
Centralização de Elementos
Tag: <center>
Para centralizarmos um texto ou elemento na tela do seu navegador, basta utilizarmos a tag <center>. Ela permite a centralização de forma independente da resolução gráfica apresentada em seu monitor.
Tags para web - listas
Ao utilizarmos uma lista, precisamos definir seu começo e fim e seus itens. Para isso, deveremos trabalhar com algumas tags em bloco, tais como <dd>,<dl> e <dt>.
Tags para web - listas
Ao utilizarmos uma lista, precisamos definir seu começo e fim e seus itens. Para isso, deveremos trabalhar com algumas tags em bloco, tais como <dd>,<dl> e <dt>.
Quando necessitamos elencar itens em uma lista. 
Esta tag deve ser utilizada juntamente com a tag <dl> e <dt>.  
Exemplo:
<dl>
  <dt>Graduação em Análise de Sistemas</dt>
    <dd><a href="http://www.estacio.br/curso1.html">Confira</a></dd>
  <dt>Graduação em Desenvolvimento Web</dt>
    <dd><a href="http://www.estacio.br/curso2.html">Confira</a></dd>
</dl>
Tag: <ol>
 
Para a apresentação de itens ordenados utilizando marcadores numéricos, você deve utilizar a tag <ol> para apresentar uma lista ordenada. Cada item da lista deve ser indicado pela tag <li>, traduzido livremente para lista de itens.
<p>Lista Ordenada:</p>
<ol>
  <li>Gás</li>
  <li>Luz</li>
  <li>Telefone</li>
</ol>
Tag: <ul>
A lista não ordenada somente apresenta marcadores junto ao item.
Não há como verificar ordenação dos dados.
<p>Lista Não Ordenada:</p>
<ul>
  <li>Gás</li>
  <li>Luz</li><li>Telefone</li>
</ul>
Tag: <option>
Existe uma maneira interessante de se exibir uma lista não ordenada economizando bastante espaço na tela. Para isso, devemos utilizar a tag <option>, comumente empregada em formulários cujo objetivo é armazenar grandes listas e poupar espaço na apresentação no navegador do usuário.
Embarcando objeto em sua página (Tag: <embed>)
A tag <embed> permite que você acople objetos externos a sua página como um plug-in. Hoje temos vários sites que oferecem seus objetos codificados nesta tag. Temos o Youtube, Google Video entre outros.
<hr>
LINHA HORIZONTAL
Em HTML é fácil criarmos uma linha horizontal que ocupe toda a extensão da página sem nos preocuparmos com a definição do tamanho.
Basta que usemos a tag <hr>, que em uma tradução livre significa linha horizontal.
Este recurso facilita a divisão visual de elementos no corpo da página. 
Exemplo: <hr>
<img>
Em HTML é possível associarmos imagens ao texto na página. Este tipo de recurso trouxe novos horizontes, pois muitas páginas começaram a ganhar vida com fotos e imagens associadas, permitindo a criação de sites muito interessantes. Esse recurso se expandiu com o uso de CSS pela facilidade do posicionamento dos elementos dentro da página.  Percebam que, diferentemente dos editores de texto, as imagens em HTML são vinculadas e não inseridas. Existem apenas links para a fonte da imagem.
Esta tag possui os atributos src, onde indicaremos a fonte da imagem, o atributo alt, que facilita a identificação com um texto alternativo no caso da não visualização da mesma.
Em XTML a tag <img> deve ser fechada. Os elementos align, border, hspace e vspace foram descontinuados na versão  HTML 4.1 e no DTD do XHTML 1.0 Strict
Atributos Opcionais:
align - indica o alinhamento da imagem. Ex: top,bottom,middle,left,right
border – indica a espessura em pixels da borda que envolve a imagem
height – especifica a altura da imagem
widht  – especifica a largura da imagem
hspace – especifica o espaço em branco a direita e a esquerda da imagem
vspace – especifica o espaço em branco na margem superior e inferior da imagem
longdesc – indica uma URL para um documento que traz mais informações sobre a imagem. Muito utilizado como recurso de acessibilidade.
Exemplo:
<img  src="img/logotop.png" alt="Logo : Logomarca da Estácio;">
Repare que, no exemplo, temos como fonte um subdiretório no servidor chamado img e, logo após, fazemos referência ao nome da imagem – logotop.png. 
No caso desta imagem, ao poder ser visualizada, ou ainda o mouse ser colocado sobre ela, uma informação aparecerá para o usuário, neste caso, “Logo: Logomarca da Estácio”.
<map>
Esta tag é utilizada para criarmos regiões clicáveis em uma imagem do lado do cliente. Através dela, podemos mapear pontos sensíveis de uma imagem que redirecionam o usuário de acordo com o contexto clicado dentro da imagem.
Atributos:
name  - nome do mapa
area  - define uma área clicável
shape – define o formato da região clicável
coords – define as coordenadas x_min, y_min,x_max,y_max
alt – informação alternativa
Exemplo:
<body>
<img src="logo.gif" usemap="#logo" border="0">
<map name="logo">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.estacio.br/ajuda.html"> <!—neste caso x1,y1,x2,y2,...,xN,yN -->
<area shape="rect" coords="128,132,241,179" href="http://www.estacio.br/cursos.html"> <!--neste caso x_min,y_maior,x_max,y_menor -->
<area shape="circle" coords="68,211,35" href="http://www.estacio.br/vestibular.html"> <!—neste caso x,y e raio -->
</map>
</body>
<frameset> e <frame>
Frames
A tecnologia do frame foi criada com o intuito de dividir a página apresentada ao usuário em segmentos distintos, como se fossem janelas, possibilitando a cada um o carregamento independente do conteúdo a ser apresentado.  Cada frame está contido em um frameset (conjunto de frames) e cada um pode ter atributos diferentes, tais como tamanho, paginação entre outros. Em uma tradução livre, frame que dizer moldura.
Desta forma, temos para um conjunto de frames um frameset para organizá-los. Vide o exemplo: 
<frameset cols="25%,50%,25%">
  <frame src="frame_a.html" />
  <frame src="frame_b.html" />
  <frame src="frame_c.html" />
</frameset>
No exemplo acima, temos 3 frames com diferentes tamanhos. Os tamanhos foram definidos com base no porcentual da tela do navegador, isto é, eles se redimencionam a cada resolução apresentada.
No caso da existência de navegadores que não interpretam Frames poderemos utilizar a tag <noframes> Confira no exemplo abaixo:
Exemplo:
<frameset rows="18%,82%">
      <frame src="frame_menu.html">
      <frame src="frame_conteudo.html">
<noframes>Para visualizar frames é necessário um navegador mais recente como o Mozilla Firefox</noframes
<iframes>
Este recurso teve se apogeu há 4 anos, quando muitos sites criavam frames internos para esconder de seus usuários a carga de determinadas informações. Até hoje, encontramos soluções interessantes que fazem uso desta tag. 
Alguns navegadores podem entender seus resultados de forma diferente. Principalmente ao utilizarmos controles de sessão. 
A tag  <iframe> não é suportada pelo DTD Strict do HTML 4.1 e pelo  DTD Strict do XHTML 1.0 
Atributos:
align  - alinhamento – left, right, top, bottom, middle. Descontinuado
frameborder – tamanho da borda – 1 e 0
height –- estabelece a altura do iframe em pixels 
widht – estabelece a largura do iframe em pixels
longdesc – aponta para um arquivo que contém informações adicionais a respeito daquele iframe
marginheight – especifica as margens superior e inferior em pixels
marginwidht – especifica a margem a direita e a esquerda do iframe
name – nome do iframe
scrolling – habilita ou não a barra de scroll
src – indica a URL com o caminho do documento a ser carregado pelo iframe
Exemplo:
<iframe src ="conteudo.jsp" width="100%" height="200">
  <p>Seu navegador não suporta iframes</p>
</iframe>
05 - teletransmitda
marcações = tags
conjunto de tags
 
as propriedades das tag podem ser obrigatórias ou opcionais. depende do tipo da tag.
Arquivos:
Aula 6: 
Tab Nesta aula, iremos aprender como construir tabelas em páginas Web utilizando as principais tags da linguagem HTML.
 Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos.elas
Em HTML, o recurso de tabela é extremamente eficiente quando desejamos, com pouco trabalho, criar tabelas para apresentação de dados.
Com o passar do tempo, este recurso começou a ganhar notoriedade, pois, além da apresentação de dados, era também utilizado para a formatação visual de elementos em uma página, tendo em vista que HTML é uma linguagem de marcação e não de diagramação.
A Construção:
A construção de tabelas não é complicada.
O que é mais desafiador é a construção de layouts utilizando-a. 
Hoje, é muito comum utilizarmos editores Web que apresentam o recurso da construção visual de tabelas. Este tipo de recurso poupa-nos tempo, porém o refinamento manual ainda é a melhor alternativa.
TAG: <TABLE>
Para definirmos uma tabela em HTML devemos utilizar a tag <table>.
Seu navegador quando encontra esta tag procura por informações de linhas <tr> células <td>, em uma tradução livre dados de tabela. 
Repare o atributo border na tag <table>. Ele define a espessura da linha da tabela. Para omitirmos as marcas de linhas nas tabelas, utilize o border=“0”.
Cabeçalhos nas colunas
Outro recurso interessante é o uso de cabeçalhos nas colunas das células.
exemplo
Neste exemplo, criamos 2 cabeçalhos para as colunas 1 e 2 da tabela. Para identificar de maneira diferenciada a informação dos cabeçalhos, a tag <th> coloca o texto nela contido em negrito. 
Outra dica importante: não se esqueça de fechar esta tag.
Aula 7: FORMULARIO
Nesta aula,iremos aprender como construir formulários em páginas Web utilizando as principais tags da linguagem HTML. 
Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos
Formulários
Nos dias de hoje, é cada vez mais comum navegarmos em páginas com formulários. Eles são fundamentais para que o administrador do site possa receber informações das pessoas que navegam em suas páginas. São informações de cadastro, informações de busca entre outras. 
As tags relacionadas a formulários são bastante versáteis e permitem ao Web Designer um conjunto ímpar de recursos.
Modelo Básico: 
<FORM action="http://www.estacio.br/cadastro.jsp" method="post">
    <P>
    <LABEL for="nome">Nome: </LABEL>
      <INPUT type="text" id="nome"><BR>
    <LABEL for="tel">Telefone: </LABEL>
      <INPUT type="text" id="telefone"><BR>
    <LABEL for="email">E-mail: </LABEL>
    <INPUT type="text" id="email"><BR>
    <LABEL for="sexo">Sexo: </LABEL><INPUT type="radio" name="sexo" value="M"> Masculino <INPUT type="radio" name="sexo" value="F"> Feminino<BR>
    <INPUT type="submit" value="Enviar"> <INPUT type="reset">
    </P>
 </FORM>
 No caso do <input>, temos alguns atributos essenciais para o bom entendimento de suas funcionalidades.
type – determina qual o tipo de campo de entrada será. As opções possíveis são texto, enviar e senha. No caso de campos texto,  o type=”text”, para botões de envio, o type=”submit” e, no caso de senha, o type=”password”.
name - Atribui um nome a um determinado campo de referência de modo que você pode, mais tarde, fazer referência a ele em um tratamento via linguagem de programação.
size - Define a largura horizontal do campo. A unidade de medida é em espaços em branco.
maxlength - Define o número máximo de caracteres que podem ser inseridos.
Método de envios de dados
Existem dois tipos de ação a serem tomadas usando formulários em HTML.
Uma delas, a mais comum, é o método POST e a outra é o método GET.
Através do método HTTP "get", os dados são anexados ao URI especificado pelo atributo. - seguro
 Através do método HTTP "post", os dados são anexados ao corpo do formulário e enviados ao agente a cargo do processamento. + seguro
O método GET permite que o usuário grave no seu navegador a URI (Universal Resourse Identifier) com todos os parâmetros. Isto pode ser bom ou ruim pela óptica da segurança de informações. Já o POST esconde estas informações do usuário no endereço do navegador. Assim ao usarmos POST não explicitamos os parâmetros utilizados.
Atributos
Teletransmida 7:
Listas ordenadas tag - OL 
numericas: Algaritimos arábicos e algaritimos romanos
type 1 = arábicos
type 2 = romanos
Alfabéticas
type a = ordem alfabética
 
hl - LISTA NÃO ORDENADA.
Lista de Descrição
dl
não usa type.
GET - trafega em claro 
trafega em claro o type=password
rows = linhas cols= colunas 
AULA 8 : Acessibilidade
Introdução
Nesta aula, iremos aprender como construir e utilizar os conceitos e tags XHTML com foco na acessibilidade, garantindo uma universalização do acesso às páginas que se venha a construir. Veremos, ainda, como aperfeiçoar nosso código para uma maior flexibilidade dos conteúdos on-line utilizando esses recursos
Falar sobre a acessibilidade, principalmente na Internet, é falar em romper barreiras para o acesso às informações. 
Todos têm o direito de ver, de ouvir e de sentir o que está acontecendo ao redor de si mesmo.
A preocupação em garantir o total acesso às informações deveria ser meta tanto nas empresas quanto em todas as esferas governamentais.
Entretanto, o que se observa é que existem portais com ações de cidadania que nem ao menos são acessíveis. O cliente mais engajado com esses princípios observa que as ações sociais mantidas pela empresa não estão preocupadas com o básico, ou seja, a acessibilidade.
No mundo, isso está mudando, pois cada empresa está sendo “avaliada pelo mercado” pelo conjunto social de sua obra e não somente por alguma ação com retorno social.
Acessibilidade e a Internet
Ao longo dos anos, tanto o W3C (Consórcio Mundial de Internet) quanto o WAI (Projeto de Acessibilidade na Internet) não só têm apontado os problemas quanto a esse tema mas também têm feito sugestões de modificações nos portais e nos conteúdos para a Internet a fim de garantir que problemas como os descritos abaixo não mais existam.
Problemas apontados pelo W3C e WAI
1º
2º
Existem dificuldades em se interpretar as informações seja pela barreira da língua, seja pela forma de exposição ou pela busca de informações cujas indicações, muitas vezes, não são dadas ou não estão claras por se acreditar ser óbvio o que se quer dizer.
Nesse caso, é óbvio para quem fez ou para todos os internautas? É fundamental que os especialistas no assunto não validem o que foi construído a fim de garantir o perfeito entendimento e acesso de todos.
3º
Existem pessoas que, por razões diversas, não podem utilizar o mouse. Muitos portais somente permitem interação do usuário via mouse, solicitando-lhe “clicar para pular a introdução”. Se ele não pode utilizar o mouse, ele nunca poderá interagir. 
Outro problema, ainda, são os teclados virtuais que, embora disponibilizados por medida de segurança, não fornecem alternativas àqueles que não podem utilizar o mouse. Nesse caso, estamos falando de impossibilidades  cuja complexidade varia como, por exemplo, um simples cabo de mouse partido, pessoas portadoras de LER (Lesão por Esforço Repetitivo) e pessoas com paralisia.
4º
Existem portais que foram projetados para garantir a atenção dos usuários e, no caso de tarefas em que isto não é possível, não apresentam outras alternativas.
Imagine-se sendo capaz de ler as informações de um portal enquanto dirige um carro. Nada feito. Mas, se o portal disponibilizasse alguma alternativa que tornasse isso possível, ou se o dispositivo de conexão web solucionasse esse problema, mesmo dirigindo, poder-se-ia buscar, na internet, informações através de comandos de voz, e a resposta de tal busca chegaria, também, através de um conteúdo falado. Para isso, tanto os portais quanto os dispositivos móveis deveriam prever esse tipo de solução.
5º 
Necessidade de frequente atualização de recursos na máquina do usuário.
Sabemos que as inovações tecnológicas são importantes, mas, em muitos casos, o mais importante é o conteúdo, a informação dentro do portal e não seus recursos funcionais que obrigam o usuário a atualizar os próprios sistemas. 
Imagine que uma pessoa, navegando pela Internet, ficou empolgada para comprar um carro, mas utiliza um sistema que não possui a última versão de um determinado software ou ainda não possui aquele software proprietário para acessar o conteúdo do portal da empresa para escolher o modelo do carro. Isso acontece a toda hora. Muitas vezes, o cliente altera a escolha que fez pela falta de preocupação da empresa em garantir o acesso de qualquer pessoa ao conteúdo do portal. Imagine o que pode acontecer ao desenvolvedor se o cliente deixar de comprar um carro de trezentos mil reais porque ele pressupõe que o cliente em potencial para esse tipo de automóvel deva ter um determinado sistema instalado em sua máquina. 
No dia em que as empresas souberem que isso acontece, deve-se lamentar pelos desenvolvedores e pelos web designers responsáveis pela criação desses portais.
Esses são, apenas, alguns dos problemas que ocorrem, de maneira frequente e recorrente, nos portais. Todos aqueles que, de alguma forma, lidam com tecnologias devem observar esses problemas e fazer as devidas adaptações para que, sem exceção, qualquer pessoa com qualquer tecnologia possa aproveitar todas as informações contidas nos portais da Internet.
 
Para isso, é necessário que o desenvolvedor aprenda quais são os recursos que estão a disposiçãodos deficientes.
Sistemas auxiliares
Existem sistemas capazes de auxiliar o usuário tanto na sua navegação pela Internet quanto na interatividade com dispositivos.
São eles:
COMPUTADORES:
Hoje, mais do que nunca, a utilização do computador como recurso de auxílio na construção do conhecimento garante ao usuário contato com o mundo. 
O computador não exige locomoção para ser usado e, por isso, tornou-se a extensão dos olhos, dos ouvidos, das pernas e dos braços dos usuários com deficiência. 
Existem políticas públicas que facilitam a aquisição de computadores e de sistemas para esse tipo de usuário.
SINTONIZADORES DE VOZ
Esse recurso é muito empregado em consorciação de computadores, pois permite que tanto cegos quanto deficientes motores possam interagir com as pessoas através deles, rompendo, assim, muitas barreiras.
Atualmente, existem sintetizadores de voz bastante eficientes que apresentam entonações diferenciadas e funcionam como multi-línguas garantindo não só a locução do conteúdo apresentado como também o reconhecimento de comandos através da voz humana.
BASE BRAILE
Esse sistema de leitura pelo tato, criado por Louis Braille, em 1806, permite ao deficiente visual ler e escrever utilizando um conceito bastante simples de cela Braille, onde aparecem 2 colunas com 3 pontos cada uma.
A combinação desses pontos forma letras, números e símbolos e permite ao deficiente se apropriar das informações escritas e impressas quando se faz uso desse tipo de recurso.
Existe uma folha de estilo especial para este propósito que, tal qual páginas com layouts de impressão, indica ao dispositivo Braille que aquele conteúdo é adaptado para ele sem a necessidade de impressão do mesmo. 
Outra informação importante é que nem todos os deficientes visuais dominam o Braille pelas dificuldades do aprendizado, principalmente para aqueles que perderam recentemente a visão.
IMPRESSORA BRAILE
O recurso da impressão em Braille proporciona maior conforto ao usuário, pois não há necessidade de dispositivos especiais para leitura. Contudo, a conversão do conteúdo para o Braille apresenta algumas dificuldades como, por exemplo, as imagens, os gráficos e as expressões matemáticas não adaptadas. Além disso, há, também, o alto custo das impressoras Braille.
Hoje, uma impressora jato de tinta pode custar algo em torno de duzentos reais enquanto que uma impressora Braille pode custar mais de quinze mil reais.
Outro dado importante é a conversão de uma lauda impressa para Braille. A equivalência de cada lauda impressa pode variar entre 2 e 4 folhas em Braille. Imagine o peso de um livro neste sistema.
APLICAÇÃO DO CONTEÚDO
Existem formas de se ampliar o conteúdo, quer sejam imagens, quer sejam textos, para aqueles que possuem baixa visão. 
O problema de baixa visão requer que a impressão ampliada seja feita de acordo com a característica do problema de cada usuário, isto é, existem diversos graus de comprometimento da visão que levam, por exemplo, à necessidade de textos com letras de tamanho 72. Isso mesmo, o número não está errado, 72 e equivale a uma letra da grossura de um polegar.
LIBRAS
Os deficientes auditivos que não possuem implante coclear e não sabem ler lábios necessitam de um sistema que seja capaz de traduzir para a linguagem brasileira de sinais  (LIBRAS) o que está sendo representado em áudio, em vídeo e, até, em Texto. 
Neste ponto, você pode estranhar o porquê da tradução do texto para a LIBRAS se o surdo enxerga. Ele pode ler, sim, mas interpretar a fonética das palavras dando sentido ao texto é uma outra história. Por isso, alguns programas televisivos dispõe de intérpretes de Libras que aparecem no canto da tela ao invés de, somente, se colocar o texto com recursos de legenda do tipo close caption.
Produtos e soluções
SISTEMA DOSVOX
SISTEMA MOTRIX
É um sistema que permite aos portadores de qualquer tipo de deficiência motora, grave ou não, o acesso a um computador, possibilitando-lhes a leitura escrita e a interação com outras pessoas através da Internet.
BRAILE FACIL
Sistema criado pela equipe do Prof. Antônio Borges do Núcleo de Computação Eletrônica da UFRJ para auxiliar na conversão de texto para Braille. O Braille Fácil é gratuito e possui, na 3ª geração, recursos de imagens.
VIRTUAL VISION
Desenvolvido no Brasil, este produto é comercializado sob licença especial, pois visa auxiliar o deficiente visual na navegação pela Internet e na interatividade com os aplicativos do computador pessoal. 
Clientes deficientes visuais de alguns bancos recebem-no gratuitamente.
MONET
DICIONARIO LIBRAS
RYBENÁ
Sistema interpretador de LIBRAS. É um produto comercial desenvolvido pela equipe do DFJUG – Desenvolvedores Java do Distrito Federal.  
Este Applet em Java pode ser acoplado ao portal e garantir aos surdos uma navegação de melhor qualidade
DIRCE
É um programa gerador e tocador de audiolivros baseado na tecnologia padrão DAISY para livros em formato digital com narração em áudio.
JAWS
Leitor de tela comercial. Muito utilizado pelos deficientes visuais. Interpreta javascript.
WINDOWS EVE
Leitor de tela comercial. Muito utilizado pelos deficientes visuais. Interpreta javascript.
NVDA
Leitor de tela gratuito. Muito utilizado pelos deficientes visuais. Interpreta javascript.
COMPLEX TABLE toobar
Conversor de Tabelas.
A equipe do Vision Australia criou uma barra de ferramenta para o Mozilla Firefox que valida a acessibilidade nas tabelas e propõe alterações, no próprio código, para adaptá-las.
OPERA
Navegador com opções muito completas para acessibilidade auxiliando tanto desenvolvedores quanto usuários finais na Web.
Diretrizes de acessibilidade para o conteúdo da Web (WCAG) 2.0
As diretrizes de acessibilidade propostas pelo comitê do W3C vêm, desde 1999, abordando diversos tipos de problemas e de soluções para garantir acesso universal a todo e qualquer internauta que utilize dispositivos, móveis ou não, que obedeçam essas diretrizes.
1999 > Em 1999, surge a versão 1.0 chamada de WCAG 1.0.
2008 > Com o advento da versão 2.0 em 2008, os critérios de sucesso são apresentados como declarações testáveis que não são de tecnologia específica.
São orientações de como interpretar os critérios de sucesso e sobre como satisfazê-los em tecnologias específicas.  
Mas o que é WCAG? 
A sigla WCAG representa Web Content Accessibility Guidelines. Em uma tradução livre, teremos: Guia de Acessibilidade aos Conteúdos na Web.
A quem se destina o WGAG?
PRINCÍPIO#1
Perceptível
Fornecer alternativas de texto para conteúdo não-texto.
Fornecer legendas e alternativas de conteúdo de áudio e vídeo.
Fazer um conteúdo adaptável e disponibilizá-lo para tecnologia assestáveis. 
Adaptável
O WGAG 2.0 recomenda a criação de conteúdos que possam ser apresentados de diferentes maneiras para que não se percam as informações ou a estrutura
Uso de contraste suficiente para tornar as coisas fáceis de se ver e de se ouvir.
Discernível
Faz-se necessária a criação de alternativas, como a audição e a visualização de conteúdos, para a separação do primeiro plano e do plano de fundo no navegador do usuário. 
Utilização de Cores
Recomenda-se que a cor não seja utilizada como o único meio visual de transmitir informações, identificar visualmente um elemento ou solicitar uma resposta ao usuário.
PRINCÍPIO#2
Operável
Exemplos de funcionalidades acessíveis via teclado
aula teletransmitida 8 
checkbox = varias seleções.
radio = 1 seleção
ou combobox
deixa selecionar mais de 1.
Aula 09: Folhas de Estilos em Cascata
Introdução
Nesta aula, iremos aprender como construir e utilizar os conceitos e tags XHTM usando Folhas de Estilos em Cascata para a construção de páginas Web. Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade empregando estes recursos.
O quesão folhas de estilos em cascata?
Folhas de Estilo em Cascata ou CSS (Cascade Style Sheet) são estilos aplicados em HTML. A linguagem HTML, na sua concepção, não foi projetada para ser utilizada na elaboração de páginas com layouts sofisticados. Como a HTML é limitada, foi necessário desenvolver uma alternativa capaz de manipular os elementos para garantir que uma página não fosse mais textos e imagens corridas ou, no máximo, contidas em tabelas.
As Folhas de Estilos em Cascatas têm como funções:
Aplicando Folhas de Estilo em Cascata
Existem 3 formas de se aplicar estilo às páginas em HTML.
in-line
interna
externa
Veremos as três, a seguir, mas, antes, vejamos como é composta a sintaxe em CSS.
A sintaxe do CSS segue o formato Seletor com uma ou mais declarações:
Formas de se aplicar estilo as páginas em HTML
In-line
Esta forma descreve o estilo diretamente na tag HTML  correspondente. Isto, por um lado, tende a facilitar o processo, mas, por outro, dificulta a manutenção do código.
Exemplo:
<p style="color: red">texto</p>
Neste caso, aplica-se, em todo o parágrafo, o estilo com a cor vermelha. Veja o resultado disso na figura:
• Interno
Também pode-se implementar os estilos dentro do código da página. A diferença em relação ao anterior é que, neste caso, o estilo não é definido direto no elemento (tag), mas em uma parte do código cuja aplicação é indicada através de recursos de identificação. Assim, a manutenção da página fica mais fácil, pois, ao se alterar o estilo, todos os elementos associados a ele passam a sofrer essa alteração.
 
Para que se defina os estilos internos da página, deve-se criá-los dentro de tags <style..> </style>, dentro do bloco <head></head>, como no exemplo a seguir.
Repare que o type é text/css. Além do type, pode-se definir para que tipo de mídia (media) se quer aplicar estes estilos. Isso é particularmente importante quando queremos diferenciar os estilos por dispositivos, no caso da acessibilidade.
Podemos ter as seguintes mídias:
Exemplo:
 
No exemplo abaixo, são indicados estilos diferentes para dois tipos de mídias.  Neste caso, se a mídia for screen (monitor), a fonte tem tamanho 25px (25 píxels) em negrito e, se for para impressão ou visualização para impressão, passa para 10px, também em negrito.
Na saída para visualização da impressão, conforme ilustrado abaixo, repare como a fonte de 25px caiu para 10px. Isto significa que este estilo, adaptado para diferentes mídias, funcionou.
• Externo
Esta, com toda a certeza, é a maneira mais prática de se manter um portal. Através de arquivos externos, economiza-se na manutenção de dezenas ou centenas de páginas, pois basta que se altere um arquivo para que tudo aconteça no portal como um todo.
O arquivo css deve ser um arquivo com extensão css e estar dentro do contexto da sua aplicação, isto é, dentro de um diretório onde o servidor Web possa alcançá-lo para o seu navegador.
Veja no exemplo que segue. Será criado um arquivo chamado estilo_portal.css com o conteúdo abaixo.
Seletores
Seletores estão para CSS como tags estão para HTML. O seletor é uma strings que identifica o elemento HTML ao qual a regra será aplicada.
Tipos de seletores
Existem diversos tipos de seletores, mas, nesta aula, apenas serão abordados alguns dos mais utilizados.
SIMPLES - Onde a regra se aplica ao tipo e/ou aos atributos do elemento e não à posição do mesmo. Em resumo, é aquele seletor constituído de um só elemento.
Exemplo: h1, p.
CONTEXTUAL - Onde o seletor é associado aos elementos de acordo com as posições que ocupam na estrutura do documento.  Na verdade, o seletor contextual é um conjunto de seletores simples.
Exemplo: h1.inicio b.
UNIVERSAIS - Aplicável a todos os elementos. 
Exemplo: * {color : red;}
CLASSES - Este seletor pode ser aplicado a qualquer elemento (X)HTML, tendo em vista que se possui a prerrogativa de se criar um nome para ele.  
Exemplo: .estilo_topo { color: navy;} – É importante perceber que, neste caso, criou-se uma classe chamada estilo_topo. Dessa forma, ao ser aplicado, tem-se a cor navy no elemento associado.
Pseudo-classes
São complementações feitas aos seletores que são criadas para acessar as informações que não estão disponíveis na árvore do documento.
Sintaxe:
seletor:pseudo-classe {propriedade:valor} ou, ainda, seletor.classe:pseudo-classe {propriedade:valor}
Âncora
a:active {color:#0000FF}  /* link selecionado */
a:link {color:#FF0000}      /* link ainda não visitado*/
a:visited {color:#00FF00}  /* link visitado*/
a:hover {color:#FF00FF}  /* mouse sobre o link */
dica - O a:hover deve proceder o a:link e o a:visited para funcionar.
O a:active deve vir sempre após o a:hover.
ID
Este é um seletor que se identifica com um único elemento (X)HTML, isto é, ele não pode ser aplicado a outro elemento dentro do documento. 
Sua identificação é através do sinal # junto ao nome.
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
/* Estilo Aplicado somente ao 
Cabeçalho da Página 
*/
#estilo_cabecalho 
{
color:#000080;
background:#ffcc33;
}
</style>
</head>
<body>
<h1 id="estilo_cabecalho">Cabeçalho Página</h1>
<h1> Outro Cabeçalho Página</h1>
</body>
</html>
RESULTADO: 
Descendentes ou encadeados
 São todos os elementos que descendem de outro.
Texto
Através das folhas de estilo em cascata, será possível alterar as fontes e as propriedades das mesmas na página.
Para isso, faz-se necessário que se aprenda bem as seguintes propriedades:
Margens e espaçamentos
São as propriedades mais comumente utilizadas no espaçamento de elementos, em que as margens são espaços fora do elemento e o padding são os espaços dentro do elemento.
Bordas
Para adicionarmos uma borda ao redor do elemento, basta trabalharmos com a propriedade border-style cujos valores são:
LISTAS DE LINKS
Para se criar uma barra de navegação como um menu, faz-se necessário que se conheça mais alguns detalhes. Na verdade, um menu de navegação nada mais é do que uma lista de links.
Na prática 
Agora que você já conhece os principais recursos de CSS, que tal juntar tudo isto e mais um pouco em uma página organizando um menu para construir uma página exemplo? É só digitar o código abaixo e acompanhar, no seu navegador, o exercício. Tente alterar os valores das propriedades e veja o resultado.
Viu como é fácil? Agora, analisemos o exemplo mais complexo. Não fique preocupado com o tamanho, pois são mais itens no menu. Lembre-se de revisar a aula e buscar, no site do W3C, sua complementação.
Aula 10: Layouts - Folhas de Estilos em Cascata
Introdução
Nesta aula, iremos aprender como construir e utilizar os conceitos de layouts com Folhas de Estilos em Cascata. 
Veremos, ainda, como aperfeiçoar nosso código para garantir maior flexibilidade utilizando estes recursos.
Blocos e elementos alinhados
Com o surgimento da CSS, pode-se elaborar layouts extremamente complexos utilizando recursos de blocos ou alinhando elementos. Para isso, utilizam-se:
Layouts
Você já possui todos os elementos para criar páginas Web de forma prática utilizando Folhas de Estilo em Cascata.
Vejamos alguns exemplos de layout que congregam todas as funcionalidades que foram estudadas até agora.