Revisão Tecnologias Web por Paloma Garcia

Prévia do material em texto

Tecnologias Web
Revisão
Aula 1 – Apresentação do ambiente distribuído da internet
		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.
�
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.
Como os 4 requisitos da ARPANET funcionam na prática:
Requisito 1 – Quando você navega pela internet e digita o nome de um site no navegador do seu computador, existem serviços que são adicionados em diversos servidores (máquinas que realizam tarefas específicas em grande velocidade e capacidade) para lhe entregar o conteúdo da página. Pois bem, este é o Requisito 1 – São servidores, em vários locais do mundo, que trabalham para entregar uma informação a você.
Requisito 2 – Agora, imagine que você necessite recuperar dados remotamente em uma máquina ou até mesmo recuperar seus serviços. Esta é uma exigência do requisito 2.
Requisito 3 – Imagine aquele dado tão importante armazenado sem seu banco de dados da empresa e que você necessita acessar de uma filiar através da internet.
Requisito 3 – Faltou algo em seu computador para rodar um sistema? O requisito 4 cuida disso. Quando você deseja fazer algo através da internet, ficamos despreocupados com a compatibilidade do hardware do servidor com o nosso computador. Imagine ter que instalar todos os programas que rodam nos servidores para poder ser cliente de seus serviços. É, hoje não faz sentido mas, naquela época, isso virou requisito para ARPANET surgir.
Em 1983 a ARPANET foi divida, ficando a parte militar com 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 e grandes distâncias. Mas o que seriam estas redes?
BITNET 
USENET 
 
FIDONET
Aula 2 – Principais Protocolos da Internet
Para nos comunicarmos, é necessário termos 2 atores. Aquele que codifica a mensagem chamaremos de emissor e aquele que decodifica, o receptor. Desta forma, estabelecemos uma conversa, temos o emissor de um lado, o receptor de 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.
Um dos requisitos do protocolo TCP/IP é a verificação da integridade dos pacotes de dados transmitidos, essa verificação trouxe para a internet um ganho expressivo, pois através deste outros surgiram.
Correio Eletrônico
Também conhecido como e-mail, é um dos serviços mais utilizado 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.
Para o recebimento de e-mails utiliza-se os protocolos: SMTP, POP3, IMAP, FTP e HTTP.
SMTP
POP 3
IMAP
FTP
HTTP
URL – Para acessarmos uma página na internet, precisamos de um endereço web chamado URL (Uniform Resource Locator) ou seja um Localizador de Recursos Universal.
A composição de uma URL deve seguir a seguinte recomendação:
URL: Protocolo//endereço
 Exemplo: http://www.estacio.com.br
Existe uma variação para sites seguros, onde devemos adicionar ao nome do protocolo a letra s, de seguro:
Exemplo: https://www.estacio.com.br
Neste caso, o servidor web, indica ao navegador web que o site é seguro, utilizando o Protocolo Secury Sockets Layer (SSL).
STATELESS
HTTP Header ou Cabeçalho HTTP possibilita ao cliente web saber de que forma tratar o objeto retornado. São campos específicos que podemos capturar durante o processamento de uma página via programação.
Aula 3 – Segurança na Internet
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 que trabalharem pelo prazer na superação dos limites. Existem diversos sub-tipos: White hat, Grey hat, Black hat, Newble, Phreaker, Cracker e Lammer.
Crackers = 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-demoninam hackers.
Tipos de Ataque
Os principais tipos de ataque são: Cavalo de Tróia, Quebra de Senha, Denial Of Service (DOS), Mail Bomb, Phreaking, Spoofing e Scamming.
Criptografia
É a tecnologia que tenta manter em segredo mensagens em trânsito. Seus objetivos são:
*Manter a confiabilidade da mensagem
* Manter a mensagem íntegra
* Autenticada
Existem dois tipos de Criptografia: Chave Simétrica e Chave Pública ou Assimétrica
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 ou 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.
Aula 4 – Tipos de Aplicativos que existem na Internet
		Internet e aplicativos para navegação: Existem diversos tipos de aplicativos para serem utilizados na internet. Cada uma das categorias compre um papel importante, existindo, quase sempre, mais de um aplicativo por categoria.
 
* Navegadores = Para você navegar em páginas na internet, é necessário a utilização de navegadores Web capazes de interpretar o HTML encaminhado pelo servidor Web. Atualmente, existem diversos navegadores que obedecem ao W3C e outros ainda não possuem esta identificação como o padrão, não interpretando de forma correta aspáginas recebidas. Este aspecto é fundamental, pois, para garantirmos maior acessibilidade aos sites, é necessário que se obedeça a um padrão estabelecido e acordado.
		
		Principais Navegadores:
* Discadores = Os discadores são aplicativos voltados basicamente para a comunicação entre cliente e servidor através de conexões via MODEM (Modulador DEmodulador). Seu uso tornou-se muito popular no começo da internet discada gratuita, tais como IG, BRFREE, Yahoo, etc. Atualmente, ainda são muito utulizados, principalmente, pelos provedores de conexões ADSL, como a Oi. São muitos os provedores de serviço que possuem seus próprios discadores, pois cada um tem uma lista específica de telefones de acesso.
* Comunicadores Instantâneos = Esta categoria tem se tornado muito popular, principalmente, com o advento do acesso à internet via banda larga. Os usuários podem passar o dia todo conectados através destes, trazendo arquivos e conversas via rede doméstica ou empresarial. Os comunicadores instantâneos trazem bastante dinamismo nas comunicações, pois qualquer momento podemos travar diálogos entre nossa rede de amigos e clientes, utilizando não só a troca de mensagens e arquivos, mas também fazendo de videoconferências oferecidas por muitos deles. Recados em voz e SMS. Podemos, até mesmo, utilizá-los como suporte aos serviços da empresa de forma barata e rápida.
* Compartilhamento de arquivos = Existem muitas maneiras de se compartilhar arquivos. Muitos depositam seus arquivos em servidores na internet para serem acessados via protocolo HTTP. Contudo como apresentamos, anteriormente, este protocolo não é ó melhor para gerenciar este tipo de serviço. Para contornar estas dificuldades, surgiram alguns aplicativos bem interessantes que podem auxiliar nesta tarefa.
* Editores HTML = NVU, Notepad ++, Dreamweaver.
* Segurança na Rede = 
		* Antivírus = Programas de proteção contra contaminações por vírus eletrônicos. (McAfee, Norton, Avirá)
		* Firewall = Programa de proteção contra contaminações por vírus eletrônicos.
		* Proteção contra Spywares = São ataques muito comuns em serviços como eDonkey, Kasaa, MSN, ICQ e Tool Bars (Barra de Ferramenta) instaladas via outros aplicativos.
		* Proteção contra Trojans = Proteção contra cavalos de tróia
		* Criptografia = Proteção contra acesso não autorizado a dados.
* VOIP = Aplicativos que possibilitam a comunicação por voz via rede TCP/IP, estabelecendo comunicação com telefonia fixa ou celular. Estes aplicativos possibilitam a comunicação gratuita com usuários cadastrados no próprio serviço de comunicação.
* E-mail = Os serviços de correio eletrônico contam com uma gama bastante expressiva de clientes que trabalham tanto com protocolos POP3 quanto com IMAP. Existem serviços como Gmail, Yahoo e Hotmail que permitem acessos via POP3, além do IMAP. Dessa forma, a lista de aplicativos nessa categoria ganhou produtos de peso.
* Acesso Remoto = Compreende um conjunto maior de aplicativos para acesso remoto aos serviços na internet, serviços estes tais como FTP, Download de arquivos, conexões via terminal entre outros.
* Servidores Web = Para hospedagem de sites, é necessário que haja um servidor capaz de interpretar requisições HTTP, atualmente, existem servidores que, além do código HTML, interpretam outras linguagens como Java, PHP, ASP, entre outras. Da mesma forma, protocolos como FTP e RSS .net e C# também são aceitos por alguns destes.
Web 2.0 
		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, algumas vezes, a mudar a característica básica da ferramenta digital.
Aula 5 – Introdução ao 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, 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. 
As 3 principais facilidades da linguagem HTML são:
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, 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 com o caracter \ dentro dos sinais < > da mesma.
Uma TAG é formada por: 
*Comandos 
* Atributos – modificam os resultados da mesma
* Valores – caracterizam essa mudança
Todas as TAGS devem ser descritas dentro da estrutura maior de uma página HTML, que nada mais é que um arquivo texto, cujos elementos estruturais são também descritos por tags como, por exemplo:
<HTML><BODY></BODY></HTML>
Cada comando tem seus atributos possíveis e seus valores:
De 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 HMTL
		Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum. É possível salvá-lo com a extensão html ou htm.
		As tags básicas de HTML que você normalmente encontrará nas páginas da internet são:
* <HTML> - Esta tag irá definir o início de um documento HTML ao navegador web.
* <HEAD> - Nesta tag estão as definições de cabeçalho do documento. Podem ser postos aqui: chamadas Javascript, CSS, tags META entre outras.
* <BODY> - Em um documento HTML faz-se necessário indicar o corpo do documento. A partir desta tag até o fechamento da mesma, todos os elementos aqui descritos serão apresentados como conteúdos na página em seu navegador.
A Estrutura de um documentos HTML apresenta os seguintes componentes:
<!DOCTYPE html>
<html>
<head>
 Cabeçalho
</head>
<body>
 Corpo
</body>
</html> 
Comandos em HTML
		Dentro do cabeçalho de um HTML podemos encontrar os seguintes comandos:
* <TITLE> - 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 Tecnologia Web </title>
			 </head>
* <STYLE> - Quando trabalhamos com Folhas de Estilo, definimos aqui os estilos carregados. É compatível com os principais navegadores web.
		EXEMPLO: <head>
			 <style type=”text/css”>
			 p [color:red]
 			 </head>
* <SCRIPT> - Utilizada para definir a carga de um script do tipo Javascript, por exemplo, do lado do cliente. É compatível com 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).
		EXEMPLO: <script type=”text=javascript”>
			 document.write (“Olá Alunos do Curso!”)
 </script>
* <LINK> - Utilizada para definir ligações entre a página e arquivos externos como, por exemplo, arquivo de folha de estilos. Em XHTML esta tag deve ser obrigatoriamente fechada. É compatível com os principais navegadores web. É composta também por atributos type e href onde o primeiroindica 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 é definido o conjunto de caracteres utilizado
 - Media = onde é definido o tipo de mídia utilizada, isto é importante para a acessibilidade. 
	
		EXEMPLO: <head>
			 <link rel=”estilo” type=”text/css” href=”meuestilo.css”/>
 		 </head>
* <META> - 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 opicionais.
		 
		 -- Para definir o nome do autor da página devemos utilizar o atributo AUTHOR.
				
				EXEMPLO: <META NAME=”AUTHOR” CONTENT=”Flávio 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”>
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ção de elementos.
* Tags de corpo
		*Comentários = Tag: <!- - >
 
			Esta tag é utilizada para aplicar comentários ao código HTML. 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 é meu comentário. Quando o navegador passar neste ponto, ele não apresentará este texto na tela -->
		* Âncora = Tag: <a>
			Esta tag define uma âncora dentro ou fora da página. Através dela, é possível fazer uma ligação com outro documento ou ainda saltar para um ponto específico do documento sem a necessidade da ação de paginação feita pelo usuário.
*Caracteres e seus Controles
		* <b> - Deixa o texto em negrito
		* <i> - Deixa o texto em itálico
		* <big> - Enfatiza o texto aumentando seu tamanho e expessura.
		* <em> - Enfatiza o texto, deixando-o em itálico
		* <strong> - Possui o mesmo efeito da tag <b>, deixando o texto em negrito
		* <small> - Publica o texto de forma diminuta, deixando a fonte pequena e estreita
		* <strike> - Texto riscado.
		* <font> - Define a fonte que será utilizada
* Controle de Caracteres
		* Quebra de Linha
			* <br> - Pula uma linha
			* <p> - Pula um parágrafo
	
		* Centralização de Elementos
			* <Center> Centraliza um texto ou elemento na tela do navegador de forma independente da resolução gráfica apresentada no monitor.
Tag para Web – Listas
		* Lista de Descrição - <dl> - Define a Lista, <dt> - Item da Lista, <dd> - Define dados do item da lista.
		* Lista Ordenada – Utilizada para apresentação de informações organizados de forma numérica ou alfabética. <ol> - Define a Lista, <li> - Item da Lista, <ol type=” ” > - Define se será numérica ou alfabética.
		* Lista Não Ordenada – Utilizam marcador para indicar cada elemento da lista. 
			*<ul> - Define a lista. Marcadores – disc (disco), square (quadrado) e circle (círculo). <ul type=” ”> - Define tipo de marcador.
			* <option> - Exibe um lista não ordenada economizando espaço em tela, abrindo opções. <select> - define a lista, <option> - opções da lista, <option selected> - Item que aparece pré selecionado.
Embarcando objeto em sua página (Tag: <embed>)
		A tag <embed> permite acoplar objetos externos a sua página como um plug-in.
		 
Cabeçalhos ( Tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
		As tags de h1 – h6 foram muito utilizadas no passado para dar ênfase ao tamanho dos textos utilizados em cabeçalhos. O valor 1 indica o maior e o 6 o menor tamanho das letras.
Outras Tags
		* <hr> - Cria uma linha horizontal ocupando toda a extensão da página sem definição de tamanho. Facilita a divisão visual dos elementos no corpo da página.
		* <img> - Associa imagens JPG, PNG e GIF ao texto da página. Em HTML as imagens são vinculadas e não inseridas, existindo apenas links para a fonte da imagem. 
			 Possui atributos: src – indica a fonte da imagem, alt – facilita a identificação com um texto alternativo no caso da não visualização da mesma. 
		 Atributos Adicionais: align – Alinhamento da imagem (top, bottom, middle, left, right), border – Espessura em pixels da borda que envolver a imagem, height – altura, width – largura, hspace – Espaço em branco a direita e a esquerda da imagem, vspace – Espaço em branco na margem superior e inferior da imagem, longdesc – url para um documento que traz mais informações sobre a imagem, recurso de acessibilidade. 
				<img src= “caminho da imagem” height=”305” width=”400” />
		* <map> - Cria regiões clicáveis em uma imagem do lado do cliente. Através dela é possível mapear pontos sensíveis de uma imagem que redireciona o usuário de acordo com o contexto clicado dentro da imagem.
			 Atributos: name – nome do mapa, area – área clicável, shape – formato da região clicável, coords – coordenadas x_min, y_min, x_max, y_max, alt – informação alternativa.
		* <frameset> e <frame> - Divide 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 framset (conjunto de frames) e cada um pode ter atributos diferentes, tais como tamanho, paginação entre outros. Em tradução livre frame significa moldura.
		
		* <iframes> - 
Aula 6 – Tabelas
		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 HMTL é uma linguagem de marcação e não de diagramação.
Construção
		Para definir uma tabela em HTML deve-se utilizar a tag <table>. Quando o navegador encontra essa tag, procura por informações de linhas <tr> e colunas <td. Também é possível definir uma linha em destaque para os elementos do cabeçalho com a tag <th>.
		Para mesclar células utiliza-se os atributos rowspan – mescla linhas e colspan – mescla colunas.
		O atributo border define a espessura da linha da tabela. Para as omitir, utiliza-se o border=”0”.
		Este recurso até hoje é bastante explorado e a ainda possui adeptos. Atualmente, existe um segmento na área de design web que propõe o “tabeless”, ou seja, eliminar qualquer recurso de tabela para o tratamento do layout de página.
Cabeçalho nas Colunas
Exemplo 1 
�
Exemplo 2 
�
Exemplo 3 
�
Aula 7 – 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.
		Um formulário HTML ou formulário web (webform), permite que o usuário especifique dados em uma página para serem enviados e processador porum servidor. Para isso, o usuário precisa preencher as informações nos elementos do formulário conhecidos como campos.
		O elemento de formulário é definido na página com a tag <form>, além disso é necessário definir qual a ação (action) realizada pelo formulário quando o usuário submeter os dados. O processo de submissão (submit) é responsável por enviar os dados para o servidor, sendo preciso ainda especificar o método de transmissão, GET ou POST.
<form action=”cadastro.html” method=”POST”>
Modelo Básico
		No modelo básico de um formulário temos uma caixa de entrada definida através da tag <input> e um botão para encaminhar os dados definido pela tag <submit>. Há também o tipo radio, cuja função é apresentar ao usuário um objeto do tipo de rádio que se selecionado desmarca outra opção.
�
		
Método de Envio de Dados
		Existem dois tipos de ação a serem tomadas usando formulários em HTML. Uma delas, a mais comum, é o POST e a outra GET.
		* GET = Através desse método os dados são anexados ao URL especificado pelo atributos separadas pelo caractere de interrogação. Para o envio de diversas informações, é necessária a separação utilizando o símbolo e-comercial (&). Isso pode ser bom ou ruim pela óptica da segurança das informações. Só é permitido no máximo 1024 caracteres.
www.minhapagina.com.br/index.html?nome=Joao&idade=25
		* POST = Já através desse, os dados são anexado ao corpo do formulário e enviados ao agente a cargo do processamento, ou seja, esconde as informações do usuário no endereço do navegador, assim não fica explícito os parâmetros utilizados. Uma das principais características é a possibilidade de enviar informações sem limite de tamanho, além disso é possível enviar qualquer tipo de dados.
Atributos
		* Caixa de Entrada de Texto Multlinhas = Este tipo de caixa permite a entrada de uma grande quantidade de texto em uma única página, tal como um editor de texto. Contudo não aceita a formatação de textos como um editor visual.
		*Caixa de Entrada de Texto = É utilizada para entrada de dados como um campo em um formulário. Pode ser utilizado para solicitar nome, endereço, telefone, CPF entre outros. Seu limite é bem menor que aquele definido na área de texto.
		* Caixa de Senha = Com esta caixa, pode-se digitar sem que os usuários próximos saibam qual o texto está sendo digitado. Os caracteres são substituídos por *.
		* Caixa de Verificação = Muito Utilizada para a marcação de valores do tipo de múltipla escolha.
�
		* Botão de Rádio = Muito utilizado para a marcação de valor do tipo de múltipla escolha com uma única resposta.
�
		* Caixa de Seleção = Permite carregar uma lista com muitos elementos pré-selecionando um dos itens. Muito utilizada para a carga de UF em sites.
�
		* Campo invisível = Usado para pré-processar algum dado utilizando por exemplo, Javascript e submetê-lo sem que o usuário intervenha. Usando então o objeto hidden para este propósito.
�
		* Botão Cancelar = Através deste Botão, o usuário pode limpar os dados inseridos em seu formulário antes de submetê-lo.
�
		* Botão Enviar = Através deste botão o usuário pode enviar os dados que estão no formulário. Após o envio, normalmente não existe opção desfazer, pois o processamento deverá acontecer no servidor e não mais no cliente.
�
		* Imagem = É possível criar um botão utilizando uma imagem. O processo é semelhante ao do exemplo do Botão Enviar.
�
Aula 8 – Acessibilidade
		A internet oferece aos usuários um infinidade de recursos que podem ser explorados por meio de um navegador. No entanto, nem todas as pessoas podem acessar estes recursos da maneira que gostariam, uma vez que muitas páginas não estão preparadas para o acesso de pessoas com algum tipo de deficiência.
		O ponto central das discussões sobre acessibilidade na web é tornar a navegação mais fácil para uma gama de pessoas. Neste contexto, a inclusão está preocupada com pessoas com deficiência visual, problemas de mobilidade, além das pessoas com problemas congnitivos.
		O HTML desde suas primeiras versões, até a especificação mais recente, HTML5, possui uma série de elementos e atributos para tornar as páginas mais acessíveis.
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
- Sintonizadores de Voz
- Sistema Braile
- Impressora Braile
- Ampliação de conteúdo
- Libras
Produtos e Soluções
- Sistema DOSVOX = Possui uma suíte de aplicativos bastante diversificados e frequentemente atualizados que auxiliam o deficiente visual não só a navegar na internet como também o próprio uso do computador no dia a dia. Sua limitação é o reconhecimento automático de Javascript e com isso o uso de tecnologias baseadas em sistemas cliente como o AJAX por exemplo, fica prejudicado.
- Sistema Motrix = 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 Fácil = Auxilia na conversão de texto para Braille. É gratuito e possui na 3ª geração, recursos de imagens.
- Virtual Vision = É 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.
- Monet = Integrável ao Braile Fácil, é capaz de converter imagens em pontos através da utilização de impressoras em Braile.
- Dicionário de Libras = Traz o dicionário de libras para a internet.
- Rybená = Interpretador de Libras.
- Dirce = 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.
- Windows Eve = Leitor de tela comercial.
- NVDA = Leitor de tela gratuito.
- Complex Table Toolbar = Conversor de Tabelas. Barra de tarefas para 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ário finais na web.
Diretrizes de acessibilidade para conteúdo da Web (WCAG) 2.0
		A sigla WCAG representa Web Content Acessibility Guidelines. Em tradução livre, Guia de Acessibilidade aos Conteúdos na Web.
		
 
Princípio 1 = Perceptível
Princípio 2 = Operável
	
Funcionalidades Acessíveis via teclado
	
Existem várias formas de se criar um botão em HTML e estão todas associadas à função “botão”.
Exemplo 1 = 
Exemplo 2 = 
Exemplo 3 = 
Exemplo 4 = 
Exemplo 5 = 
Aula 9 – Folhas de Estilo em Cascata
		Folhas de Estilo em Cascata ou CSS 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, sendo assim 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.
		O CSS tem como funções:
Definir a aparência das páginas em um único lugar, em vez de repetir-se uma ou outra vez no site.
Facilmentealterar a aparência das páginas, mesmo depois que eles são criados.
Definir o tamanho da fonte e os atributos semelhantes com a mesma precisão que você tem com um processador de texto.
Definir a posição do conteúdo das páginas com precisão de pixel.
Definir estilos personalizados.
Definir as camadas sem a necessidade de pop-ups.
Aplicando CSS
A sintaxe do CSS segue o formato seletor com uma ou mais declarações:
Existem 3 formas de se aplicar estilos ao HTML:
Inline = Descreve o estilo diretamente na tag HTML correspondente, por um lado tende a facilitar o processo, por outro dificulta a manutenção do código.
<p style=”color:red”>texto</p>
Interno = Implementa os estilos dentro do cabeçalho da página , <header>. Assim, a manutenção da página fica mais fácil, pois, ao se alterar o estilo, todos os elementos associados passam a sofrer essa alteração. 
 Para definir os estilos interno da página, deve-se criá-los dentro da tag <style..> </style>, dentro do bloco <head> </head>.
<head>
<style type=”text/css”>
p{color:red;}
</style>
 </head>
Externo = É o mais indicado para grande parte dos projetos de sites para internet. A grande vantagem deste tipo de codificação é a centralização de todos os estilos que serão aplicados nos documentos em um único arquivo. 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ça-lo para o seu navegador. Assim, as formatações definidas com CSS podem ser reaproveitadas em outras páginas. 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.
 
(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:
A omissão da declaração media determina o valor padrão dll.
		( Não se esqueça do DOCTYPE. 
Existem vários tipo de HMTL: HMTL 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict entre outros.
Para cada situação, é preciso que se defina o tipo de documento a ser interpretado através da declaração de DTD (Document Type Definition). Isto não é complicado mas precisa ser feito de forma consciente, pois alguns editores de código (X) HTML os definem com base no padrão do fabricante do software e não de acordo com padrão pessoal.
Até aqui, teve-se a liberdade de não definí-los, mas, quando se lida com CSS e, por conseguinte, com XHTML, isto se torna imperativo.
* Diferença básica de alguns tipos de HTML: 
- Strict – Padrão impõe regras muito rígidas dos elementos em (X)HTML.
- Transitional – Padrão mais flexível, pois possibilita a escrita de códigos HTML compatíveis com outras versões e, ainda permite que sejam adaptados aos navegadores web.
- Frameset – Utilizado quando desejamos trabalhar com frames.
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
Pseudo-classes
		São complementações feitas aos seletores que são criadas para acessar 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.
 - :first-child = define um elemento espefífico que o primeiro filho de um elemento.
- :focus = Define o foco sobre um elemento ao se clicar nele. Muito utilizado na elaboração de formulários.
 
* Pseudo-elementos: 
:after – Adiciona o conteúdo após o elemento.
:before – Adiciona o conteúdo antes do elemento.
:first-letter – Aplica o estilo na primeira letra do texto.
:first-line – Aplica o estilo na primeira linha do texto.
* Seletor de ID: Se identifica com um único elemento (X)HTML, ou seja, não pode ser aplicado a outro elemento dentro do documento. Sua identificação é através do sinal # junto ao nome.
<!DOCTYPE hmtl>
<html>
<head>
		<meta charset=”utf-8”>
		<style type=”text/css/>
			a{ text-decoration:none;}
			a:link{color:blue;}
			a:visited{color:gray;}
			a:hover{color:red;}
			a:active{color:yellow;}
		</style>
</head>
<body>
		<h1> Lorem Ipsum </h1>
		<a href=”#”>Âncora 1</a><br/>
		<a href=”#”> Âncora 2 </a><br/>
</body>
</html>
Descendentes ou Encadeados
		São todos os elementos que descendem de outro.
Neste caso, todos os links de todos os itens de uma lista não ordenada serão verde-limão.
Texto
		Através das Folhas de Estilo em Cascata, é 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:
font-family = É a fonte propriamente dita. Ex. Arial, verdana. Porém a fonte escolhida deve estar instalada no microcomputador do usuário. Caso contrário aparecerão outras fontes em substituição a ela e não se terá o mesmo apelo visual. Ex. font-family:”Times New Roman”
font-size = Define o tamanho da fonte. Ex. font-size> 12px
font-weight = Peso da fonte.Ex. font-weight:bold ou font-weight: normal
font-style = Inclinação do texto, se está ou não em itálico. Ex. font-style: italic ou font-style: normal.
text-decoration = O texto pode ter alguns elementos de marcação. 
- text-decoration: overline, apresenta uma linha sobre o texto.
- text-decoration: line-through, apresenta uma linha atravessando o texto.
- text-decoration: underline, sublinha o texto. Cuidado pois esta opção confunde o usuário com link.
text-transform = 
- text-transform: capitalize, apresenta a primeira letra de cada palavra em maiúscula.
- text-transform: uppercase, apresenta todas as letras em maiúscula.
- text-transform: lowercase, apresenta todas as letras em minúsculas.
- text-transform: none, reseta qualquer estilo neste contexto.
text-spacing = Cuida do espaçamento, identação e alinhamento entre letras e palavras.
- letter-spacing e word-spacing, espaçamento entre letras e palavras respectivamente. O padrão é normal.
- line-height, configura a altura entre as linhas, tal como ocorre com o espaçamento entre parágrafos no editor de texto. Múltiplos do tamanho da fonte ou %. O padrão é normal.
- text-align, alinha o texto pela direita,ao centro, à esquerda ou justificado. Opções: left, right, center e justify.
- text-indent, indica a identação da primeira linha do parágrafo.
Margens e Espaçamento
		São 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.
( Os 4 lados podem ser trabalhados de forma individual utilizando-se as seguintes propriedades:
margin-to, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom e padding-left.
Exemplo de layout com as propriedades:
Bordas
		Para adicionarmos uma borda ao redor do elemento, basta trabalharmos com a propriedade border-style cujos valores são:
Solid, dashed, dotted, groove, ridge, double, inset e outset.
		Além dessas propriedades para border-style, devemos trabalhar a espessura da mesma com a propriedadeborder-widht.
Lista 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.
		Existe uma propriedade na definição da lista chamada list-style-type que deternina como a lista vai se comportar quanto à existência de marcadores. Neste caso, o valor está em none tendo em vista que uma barra de navegação não precisa de marcadores.
		Além disso, as margens e espaçamentos estão zerados com o intuito de remover os valores nos navegadores web.
		Para listas verticais, o código é outro, pois somente é preciso definir um estilo para a tag <a> a fim de se orientar como os links irão se comportar. No exemplo abaixo foi definido um bloco por ser um menu vertical.
Aula 10 – Folhas de Estilo em Cascata – Layout
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:
Exemplo:
ul li a {color:#80ff00;}
Exemplo:
p{
letter-spacing:0,75 cm;
word-spacing:2cm;
line-height: 2.0;
text-align:justify;
}
a{
display:block;
width:100px;
}