Aulas 1 a 10

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Teste 1
1.Marque a afirmativa que corresponde às assertivas abaixo:
a.	Um sítio da Web 2.0 tem o seu conteúdo com informações geradas por empresas.
b.	Os anúncios são contratados por exibição na Web 2.0.
c.	Os buscadores usam categorias na Web 2.0.
1) Todas estão corretas. 
2) A primeira e a última estão corretas. 
3) Somente a última está correta. 
Resposta: Somente a primeira está errada. 
5) Somente a segunda está errada. 
2.Marque a resposta que só possui características Web 2.0:
 
1) Google Adsense, Wikipedia, Britânia Online. 
 2) Website pessoal, Bit Torrent, Page Views. 
 Resposta: Inteligência Coletiva, Folksonomy, Blogging. 
 4) Taxonomy, Napster, Akamai. 
 5) Ofoto, Web Services, Flickr. 
3.A técnica que permite um clique que, em um link ou em um botão de formulário, atualiza as informações da página atual sem que seja necessário carregar uma página inteira chama-se:
 1) Dot.Net. 
 Resposta: Ajax. 
 3) PHP. 
 4) Scrum. 
 5) ASP. 
4.Quando foi definido o termo Web 2.0:
 
1) o W3C determinou que a Web havia passado por muitas transformações e deveria ser encarada de outra forma. 
 2) TIM Berners-Lee apresentou um novo conceito sobre uso da Internet. 
 3) a construção de páginas passou a usar recursos que eram muito modernos e que os Webdesigners chamaram de Web 2.0. 
 4) a Microsoft passou a publicar o termo em seu site e os profissionais de informática passaram a usá-lo. 
Resposta: nome usado em uma série de conferências da O’Reilley.
Teste 2
1.Marque a afirmativa que corresponde às assertivas abaixo:
a. Um interface rica somente pode ser feita usando o Flash.
b. O Javascript pode ser usado sem estar associado ao Ajax.
c. Pode ser feito o drag and drop (arrastar e soltar) nas interfaces ricas.
 1) Todas estão corretas 
 2) A primeira e a última estão corretas 
 3) Somente a última está correta 
 4) Somente a primeira está correta 
Resposta: Somente a segunda e a terceira estão corretas 
2.Marque a tecnologia que não possui relação ao desenvolvimento de RIA.
 1) Ajax 
 2) XHTML 
Resposta: MPEG 
 4) Flash 
 5) DOM 
3.A ação de um botão de um formulário em uma interface rica deve ser desenvolvida de que forma?
 1) Usando um botão do tipo SUBMIT para chamar outra página. 
Resposta: Usar o evento onClick para chamar a função que irá fazer a chamada ao objeto XMLHttpRequest. 
 3) Usando um botão do tipo RESET para chamar outra página. 
 4) Usar o evento onClick para chamar a função que irá fazer a chamada ao método submit() do formulário. 
 5) Usando um botão do tipo BUTTON para chamar outra página/arquivo que está configurada no atributo action da tag form. 
4.Marque um uso que não pode ser feito com a tag “DIV” em uma página XHTML.
Resposta: Ser a raiz a página XHTML. 
 2) Apresentar texto. 
 3) Verificar se o mouse está sobre ele. 
 4) Ocultar uma parte da página. 
 5) Carregar um formulário.
Teste 3
1.O que é SGML?
 1) Tecnologia para criar páginas Web 
 2) Implementação que contém todas as tags do HTML 
 3) A sigla significa System Global Markup Language 
Resposta: Metalinguagem que define as linguagens de marcação 
 5) Surgiu a partir do HTML para que fosse criado o XHTML 
2.Como são enviados os dados de um formulário quando ele utiliza o método “GET”?
 Resposta: Através da URI. A parte que contém os campos e os dados é chamada de querystring. 
 2) São enviados junto com a requisição da página. 
 3) São enviados da mesma forma que o método “POST”. 
 4) São enviados obrigatoriamente por AJAX. 
 5) O método “GET” não envia dados apenas solicita um recurso do servidor. 
3.A tag “DIV” possui várias utilizações marque a opção que descreve uma funcionalidade que não pode ser realizada pela tag.
 
 1) É utilizada para a construção de menus suspensos (menus drop down). 
 2) Permite a montagem do leiaute (layout) de uma página, conhecido como tableless. 
Resposta: Envio de formulário preenchido pelo usuário. 
 4) Apresentação de mensagens para o usuário. 
 5) Exibir e ocultar áreas da página.
Teste 4
1.Marque a afirmativa errada:
Resposta: O arquivo externo segue as regras do XML 
 2) Todas as configurações (formatações) devem ser terminadas com um ponto e vírgula, sendo opcional na última do estilo 
 3) Podemos listar várias tags antes das chaves, todas elas terão o estilo aplicado nelas 
 4) Podemos configurar as linhas em volta do texto, sendo cada uma com uma cor diferente 
 5) Um dos pseudo elementos funciona da mesma forma que eventos, sendo acionado por ações do usuário enquanto usa a interface 
2.Podemos colocar os estilos em três locais diferentes, assinale a afirmativa correta:
 1) A criação de estilo inline permite que se altere todo estilo de um sítio de uma forma fácil 
 2) Os estilos incorporados nunca devem ser usados, pois precisam ser reescritos várias vezes na mesma página 
Resposta: Um estilo inline pode alterar a configuração especificada em um arquivo externo para a sua tag 
 4) Uma página só pode possuir um único estilo externo 
 5) Um formatação usada em um estilo incorporado altera a formatação de um estilo inline para a sua tag
Teste 5
1.O padrão atual usado para linguagens scripts clientes interpretada pelos navegadores é o ECMAScript-262Marque a afirmação correta sobre Javascript:
 Resposta: O padrão atual usado para linguagens scripts clientes interpretada pelos navegadores é o ECMAScript-262 
 2) Javascript e Jscript foram criadas pela Netscape, a segunda foi uma alteração da primeira para funcionar no Internet Explorer 
 3) Um script feito em Javascript funciona da mesma forma em todos os navegadores 
 4) O Javascript tem esse nome por ter sido criada a partir do Java 
 5) A Microsoft lançou o Javascript primeiramente e a Netscape copiou a linguagem, colocando-a em seu navegador 
2.Marque a opção que informa um local inválido para ser colocado um código Javascript em um documento XHTML válido:
 1) Dentro da macacão "script", no interior da marcação "head". 
 2) Dentro da macacão "script", no interior da marcação "body". 
 3) Diretamente no evento de um objeto. 
Resposta: Dentro da macacão "script", após a marcação "html". 
 5) Em um arquivo externo, sem a marcação script. 
3.As estruturas da linguagem permitem que repitamos o nosso código ou que façamos que apenas parte do código seja executada. Marque a estrutura a opção que possui a explicação correta para a sua estrutura.
 1) for – principal estrutura de repetição, utiliza uma única instrução entre os parênteses 
Resposta: if – estrutura de seleção que possui um complemento ("else") para que seja executado apenas um dos dois conjuntos de instruções. 
 3) while – estrutura de seleção que permite que um conjunto de instruções seja executado ou não 
 4) do – possui um par que informa se o conjunto de instruções continuará sendo executado, isso ocorre caso o valor testado seja falso. 
 5) switch – estrutura de seleção que utiliza os operadores relacionais para determinar qual opção será executada. 
4.O evento é a porta do funcionamento das interfaces para os sistemas operacionais de janela. Criamos códigos para tratar as operações que o usuário irá realizar com a tela. A interface de um sistema que precise que o cliente arraste uma imagem do produto para a imagem do produto precisará acompanhar vários eventos, marque a opção que lista eventos que podem ser usados nesse cenário.
 1) onload – onmouseover 
 2) onselect – onload 
 3) onmouseover - onsubmit 
 Resposta: onclick - onmouseover 
 5) onsubmit - onfocus
Teste 6
1.O DHTML teve seu início em que época:
 1) Foi introduzido no navegador Netscape 2.0 junto com todas as novidades que ele trouxe. 
 2) O Internet Explorer revolucionou a Web ao apresentar
a versão 3.0 do seu navegador, ele contemplava a criação de estilos com CSS, permitindo a técnica DHTML. 
Resposta: As versões 4.0 dos navegadores Netscape e Internet Explorer permitiram o desenvolvimento com DHTML, apesar da grande dificuldade existente na verificação de erro. 
 4) O DOM e o CSS foram introduzidos no HTML 4.0, só sendo possível construir DHTML para as versões 5.0 dos navegadores IE e NS. 
 5) O DOM, o CSS e o Javascript já eram totalmente contemplados na versão 3.2 do HTML, tornando possível o seu uso completo nas versões dos navegadores compatíveis com essa versão do HTML. 
2.A recomendação w3C para se recuperar um campo de formulário na estrutura da página é:
 1) Usar o nome do formulário e o nome do campo diretamente após o objeto "document". 
 2) Usar o id do formulário e o id do campo diretamente após o objeto "document". 
 3) Usar o método getElementByName do objeto "document". 
 Resposta: Usar o método getElementById do objeto "document". 
 5) Usar o nome do formulário e o id do campo após o objeto "document". 
3.Devemos usar par recuperar o botão teclado do mouse:
 1) onmouseover do "body" 
 2) onmouseclick dos elementos do DOM 
 3) onmousedown do "div“ 
 4) evento do objeto mouse 
Resposta: através da propriedade button do objeto event. 
4.A verificação do navegador e sua versão pode ser feita através de:
Resposta: Através das propriedades appName e appVersion do objeto "navigator". 
 2) Através das propriedades appName e appVersion do objeto "browser". 
 3) Usando document.appName e document.appVersion. 
 4) Através das propriedades appName e appVersion do objeto "window". 
 5) Usando window.parentNode que irá retornar o navegador que está sendo usado, podendo ser recuperados os valores das propriedades appName e appVersion.
Teste 7
1.Marque a única afirmativa correta sobre jQuery:
 1) É um famework para acesso a bancos de dados através de consultas (queries) 
 2) É baseado no famework prototype, assim como Ruby on Rails 
Resposta: É um famework javascript que visa diminuir a quantidade de código escrito 
 4) A criação dos seletores dificultaram a criação com o framework 
 5) Os plugins são desenvolvidos pela equipe do jQuery para que seja mantida a comaptibilidade 
2.jQuery possui um método “css”para os objetos recuperados com seletores. Marque a questão que informa tipos de seletores válidos.
Resposta: a marcação, atributo id e nome da classe. 
 2) atributos id e name de uma marcação. 
 3) o id seguido da classe para recuperar uma marcação específica. 
 4) o nome da marcação seguido do valor do atributo name dos elementos filhos. 
 5) usamos os seletores com o método getElementById. 
3.Foi introduzido no navegador Netscape 2.0 junto com todas as novidades que ele trouxe.
 1) O Internet Explorer revolucionou a Web ao apresentar a versão 3.0 do seu navegador, ele contemplava a criação de estilos com CSS, permitindo a técnica DHTML. 
Resposta: As versões 4.0 dos navegadores Netscape e Internet Explorer permitiram o desenvolvimento com DHTML, apesar da grande dificuldade existente na verificação de erro. 
 3) O DOM e o CSS foram introduzidos no HTML 4.0, só sendo possível construir DHTML para as versões 5.0 dos navegadores IE e NS. 
 4) O DOM, o CSS e o Javascript já eram totalmente contemplados na versão 3.2 do HTML, tornando possível o seu uso completo nas versões dos navegadores compatíveis com essa versão do HTML.
Teste 8
1.Marque a única afirmativa errada sobre Flash:
 1) Permite que construamos formulários de cadastro 
Resposta: Possui uma linguagem própria chamada Flashscript 
 3) A linha do tempo controla determina o que está sendo apresentado no momento 
 4) Existem três tipos de símbolos 
 5) O palco é o local onde são colocados os elementos que poderemos interagir 
2.A IDE do Flash é uma ferramenta com muitos recursos, ela permite que façamos desenhos, controlemos nossos símbolos e programemos. Qual o elemento que tem o funcionamento igual a de um filme Flash?
 1) Gráfico 
 2) Botão 
 3) Retângulo 
 4) Componente 
Resposta: Clipe de Filme 
3.Escolha a opção correta para uso de recursos do Flash:
 Resposta: As cenas permitem que tenhamos telas diferentes, facilitando a criação de fases em jogos, a criação de "páginas" diferentes em um site. 
 2) Os símbolos servem para a organização das informações na tela. 
 3) Usamos as camadas para organizar os desenhos, sendo obrigatório a colocação de desenhos ou símbolos em todas as camadas. 
 4) A janela propriedades permite que alteremos as configuração de um elemento da tela, inclusive a conversão para símbolo. 
 5) Todos os ícones da "Barra de Ferramentas" possuem um sub-menu para selecionar a ferramenta específica. 
4.A programação em Flash permite que os filmes sejam mais do que simples seqüência de quadros, passando a ser uma interface interativo com vários recursos. Marque a opção errada em relação à codificação:
 1) A declaração de variáveis com classes que não estejam no mesmo pacote exige que seja feita a importação da classe ou que se informe o caminho completo. 
 2) Podem ser usadas classes existentes no ambiente e classes definidas pelo desenvolvedor na definição de variáveis. 
 3) O elemento pode perceber uma ação sobre ele, essa ação dispara um evento. Devemos adicionar um escutador ao objeto para perceber que o evento ocorreu, associando a função que será executada. 
 Resposta: O Flash controla a posição dos elementos através do uso das propriedades "top" e "left" do objeto, possibilitando que se crie botões para alterá-las. 
 5) Pode ser controlada a execução do filme, um exemplo é a possibilidade de se desviar a execução para um quadro específico, mesmo que ele pertença a uma outra cena.
Teste 9
1.Um arquivo XML permite que troquemos dados entre sistemas de plataformas diferentes. O uso da metalinguagem para a criação de documentos forneceu avanços para a criação de padrões mais facilmente entendidos por programas. Marque a afirmação errada em relação ao manuseio de dados XML em páginas AJAX.
 1) Podemos criar um elemento através do método createElement do objeto document. 
 Resposta: Usamos elemento.getElementsByTagName("nome_de_elemento_filho")[0].nodeValue para recuperar o texto que fica entre o par de abertura e fechamento do elemento. 
 3) Podemos andar pelos filhos na hierarquia usando a propriedade childNodes ou com o método getElementsByTagName. 
 4) O método createTextNode do objeto document permite que coloquemos texto entre o par de abertura e fechamento do elemento. 
 5) O método appendChild pode ser usado em qualquer elemento para adicionarmos um filho ao elemento. 
2.O objeto XMLHttpRequest muda de estado (readyState) durante o processamento da requisição. A avaliação do estado permite que tomemos providências, o processo termina quando chega ao valor quatro. Podemos criar uma função para tratar o retorno recebido pelo objeto. Marque a questão errada sobre o processamento do objeto.
Resposta: O método de envio só pode ser feito por "GET", pois é enviada uma url e não temos campos de formulários dentro da função. 
 2) Usamos o estado 200 que informa que a requisição foi completa com êxito para tratarmos o retorno dos dados. 
 3) O objeto pode recuperar a informação recebida como texto (reponseText) ou como XML (responseXML), para trabalharmos com JSON é usado o retorno de texto. 
 4) O método open do objeto permite que se informe o endereço da página que será requisitada. 
 5) O método send envia a requisição para o servidor Web enquanto o open apenas configura.
Teste 10
1. Marque a característica que não tem relação com o desenvolvimento dot Net:
 1) Implantação simplificada 
Resposta: Compilação única 
 3) Interoperabilidade 
 4) Segurança 
 5) Independência de linguagem
2.Símbolo usado para se representar herança na declaração de uma classe:
 1) -> 
 2) . 
 3) & 
 Resposta: : 
 5) $ 
3. Marque a opção que possui a definição correta para o modificador de acesso:
 1) protected - Permite acesso pela classe e por classes filhas 
 2) private - Permite acesso no mesmo programa e por classes filhas 
Resposta: protected - Permite acesso no mesmo programa 
 4) public - Permite acesso apenas pela própria classe 
 5) private – Não possui restrições, qualquer classe pode acessá-la diretamente 
4. O framework dot Net possui objetos para tratamento de acesso ao banco de dados. Marque o espaço de nomes (namespace) que não cuja finalidade não é possuir classes para manuseios de dados persistidos.
 1) System.Data.OleDB 
 2) System.Data.SqlTypes 
 Resposta: System.Data.SqlTDS 
 4) System.Data.SqlClient 
 5) System.Data. Common 
5. Marque a característica que não tem relação com o ambiente de desenvolvimento Visual Web Developer:
 1) Permite o uso da linguagem VB.NET 
 2) Podemos criar uma conexão com auxílio de caixas de diálogos 
 3) É possível acessar gerenciadores de banco de dados de outras empresas, desde que exista um driver dot.net para ele 
 4) É possível exibir dados de uma tabela do banco em uma página Web sem se escrever uma linha de código 
Resposta: linguagem de acesso ao banco de dados MySQL usada nele é o PHP.
Aula 1
A EVOLUCAO DA WEB
A Web passou por várias transformações desde sua criação, o objetivo inicial era para podermos interligar documentos, permitindo que as pessoas pudessem acessar as fontes usadas em pesquisas, continuações de trabalhos. Os navegadores evoluíram e passaram a ter mais recursos, a reconhecer uma gama maior de marcações ( tags ), forçando ao Consócio gestor da Web a incorporam algumas no padrão do HTML. O uso da Web cresceu em uma velocidade e uma dimensão nunca esperada. Começou-se a usar a Web para vários fins diferentes, criou-se o comércio eletrônico, as animações em Gif animado foram substituídas por filmes em Flash,  a Web realmente mudou.
ALGUNS FATOS
1990 – TIM Berners-Lee publica uma proposta para a World Wide Web junto com Robert Cailliau
1991 – Lançamento do NCSA Mosaic  (NCSA - Centro Nacional de Supercomputação Aplicada)
1994 – Jim Clark e Marc Andreessen se juntam e fundam a Mosaic Communications, que posteriormente foi rebatizada para Netscape Communications.
1995 – Microsoft lança o Internet Explorer.
1999 – É lançada a versão 5 do Internet Explorer. O navegador já possuía a API XMLHttpRequest.
2000 – A Microrft disponibiliza o Outlook Web Access, cliente de email que usava o navegador como frontend e utilizava a técnica Ajax de contrução de aplicação Web.
2002 – O projeto Mozilla inclui uma versão completamente funcional nsIXMLHttpRequest, permitndo que crie aplicações Ajax no navegador.
2004 – Safari lança uma versão com a API.
2005 – Konqueror e Opera lança a sua versão com a API
O desenvolvimento de sítios poderia ter mudado desde 2000 com a possibilidade incluída pela Microsoft, mas os programadores ainda estavam se acostumando com as possibilidades criadas pelas linguagens Web e os outros navegadores ainda não ofereciam suporte a API, limitando o uso desses tipos de página apenas em Intranets.
HTML e XHTML
Tim Berners-Lee propôs a especificação do HTML 1.0 contendo 20 tags, que junto com o programa Mosaic, tornando possível a confecção de páginas e a navegação sobre o protocolo HTTP. A linguagem já possuía suporte à link, listas e cabeçalhos, algumas foram descontinuadas.
Os navegadores solicitam as páginas Web.
Os Servidores procuram os arquivos e devolvem
as páginas com os outros aquivos que a compõe.
Em 1993, inicia o uso do CGI (Common Gateway Interface), permitindo que as páginas web não possuam apenas links, mas enviem informações para o servidor Web, que deixam de ter a tarefa de apenas encaminhar arquivos e passam a realizar processamento no servidor. A primeira linguagem difundida para aumentar as funcionalidades das páginas foi o PERL. Muitas outras linguagens foram e são usadas para que possamos ter páginas com conteúdo dinâmico.
Participaram da especificação do CGI:
Rob McCool (autor do servidor Web da NCSA). 
John Franks (autor do GN web server). 
Ari Luotonen (Desenvolvedor do servidor Web do CERN). 
Tony Sanders (autor do servidor Web Plexus). 
George Phillips (suporte do servidor Web da University of British Columbia).
Tim e Daniel Connolly fazem a proposição da HTML 2.0 junto ao W3C em 1993, tendo sido oficializada pelo W3C em 1995 com tags adicionais. A linguagem passa a permitir algumas característica a mais como imagem, título da página e formulários. Aumenta a interatividade das páginas, permitindo que o usuário envie informações para o servidores Web, sendo as informações processadas por scripts e programas CGI.
A versão 3 do HTML é proposta em 1995 com uma gama de novas funcionalidades, ela já incluía Style Sheet, o documento possuía 150 páginas. As empresa que criavam os navegadores implementaram parcialmente as especificações, fazendo que o HTML 3 não fosse um padrão de fato no início.
O Consócio W3 formaliza o padrão HTML 3.2, os grande produtores de browsers participaram das revisões da especificação, assim como todas as organizações membros do consórcio. O padrão trazia algumas evoluções como tabelas, applets Java, texto na mesma linha que imagens, subscrito e sobrescrito. A linguagem passa a possuir uma definição de tipo de documento.
Estrutura padrão HTML 3.2
Dave Raggett, junto com Arnaud Le Hors e Ian Jacobs fazem a proposição do HTML 4. A nova especificação continha aprimoramentos, podemos citar a programação para DOM (Document Object Model) e a inclusão da possibilidade se usar o estilo em cascata (CSS – Cascate Style Sheet).
A última versão do HTML foi revisada para 4.0.1, se mantendo como última até que a versão 5.0 esteja homologada e funcionando nos navegadores.
 
O W3C recomenda que se usa XTHML desde 2000, quando reformularam o HTML 4, usando como base o XML 1.0. Os documentos em HTML passaram a seguir as regras do XML, podendo ser validados e verificados com uma DTD (Document Type Definition).
Benefífios obtidos com a confecção de páginas em XHTML 1.0 em relação ao uso de HTML:
O XML permite a sua extensão com mais facilidade, fazendo com que desenvolvedores e navegadores possam implementar nova funcionalidades sem muita complicação. O XHTML possui uma especificação para a inclusão de novos módulos.
Estão surgindos novas formas de acesso à Internet, a visualização dos documentos podem ser direcionados para os equipamentos ou navegadores usados de uma forma mais fácil com a adoção do XHTML.
Web 2.0
"Web 2.0 é a mudança para uma internet como plataforma, e um entendimento das regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais importante é desenvolver aplicativos que aproveitem os efeitos de rede para se tornarem melhores quanto mais são usados pelas pessoas, aproveitando a inteligência coletiva"
Tim O'Reilly
O termo Web 2.0 foi criado pela O'Reilly Media para dar nome para um conjunto de conferências em 2004. O termo foi associado a um conjunto de tecnologias, técnicas de criação de páginas e objetivo dos sítios que estavam sendo criados. O nome não foi bem recebido por todas as pessoas, Tim Berners-Lee contestou ouso do nome, pois muitos conceitos considerados como Web 2.0 já existiam há bastante tempo. O que não podemos negar é que mesmo que o pai da Internet não goste do termo, ele passou a ser considerado por todos.
Os serviços online gratuitos também vieram a substituir o uso de alguns programas pagos, a Web estava repleta de mudanças em relação a sua proposta inicial, não só quanto ao seu início, mas também em contraste aos primeiros sites de serviço. A interação, as funcionalidades, os frameworks Javascript que estavam surgindo,
o crescimento do acesso a grande rede, o surgimento de conexões mais rápidas, eram mudanças em cima de mudanças. O cenário não era mais o mesmo, o nome pode não estar adequado para alguns, mas a sua criação ajudou a produzir um marco para a Web, aumentou-se a discussão sobre um mundo que estava a parte dos fóruns sobre metodologias, o desenvolvimento Web precisava amadurecer.
Nas conferencias WEB 2.0, os seguintes princípios foram destacados como características fundamentais:
Web 2.0 usa a rede como uma plataforma.
Usuário recebe, manipula e controlados os dados no site.
Arquitetura participativa na qual o usuário pode adicionar ou editar total ou parcialmente uma aplicação de acordo com suas necessidades e experiência.
Uma interface rica, interativa e amigável, baseado em Ajax ou estruturas similares.
Modelos de negócios enxutos facilitados pelo gerenciamento de conteúdos e serviços.
Fim do Ciclo de software ( versão beta ) 
Alguns aspectos de rede social.
Algumas interfaces gráficas, como gradientes e cantos arredondados 
(ausente na chamada era Web 1.0).
Conteúdo gerado pelo usuário
O CONTEUDO GERADO PELO USUARIO TEM SIDO A CHAVE PARA MUITAS DAS EMPRESAS LIDERES DE WEB 2.0. A EMPRESA DISPONIBILIZA UMA FERRAMENTA QUE AUXILIA O USUARIO UTILIZANDO AS INFORMAÇÕES INSERIDAS POR ELE. ESSE MODELO PODE SER ENCONTRADO EM SITES COMO AMAZON, EBAY, MERCADO LIVRE, MONSTER, LINKEDIN OU YOU TUBE. A COMUNIDADE AGREGA VALOR A ESSES SITES, QUE, EM MUITOS CASOS, SÃO QUASE INTEIRAMENTE CRIADOS SOBRE O CONTEUDO DO USUARIO.
A AMAZON UTILIZA AS INFORMAÇÕES DOS CLIENTES PARA AUXILIAR UM USUARIO, MOSTRANDO PRODUTOS QUE FORAM ADQUIRIDOS, JUNTO COM O PRODUTO QUE ESTA OBSERVANDO, ESSE TIPO DE AUXILIO PASSOU A SER USADO POR OUTRAS LOJAS PONTO COM.
O EBAY E O CLONE NACIONAL, MERCADO LIVRE, FORNECEM PARA O VENDEDOR UM AMBIENTE PARA DIVULGAR OS SEUS PRODUTOS E AUXILIA A VENDA COM FERRAMENTAS PARA PAGAMENTO. ESSE MODELO IMPULSIONOU O MODELO DE VENDA ENTRE PESSOAS FISICAS, POREM CRIOU UM AMBIENTE DE SONEGAÇÃO FISCAL.
Inteligência coletiva
É O CONCEITO DE QUE A COLABORAÇÃO PODE RESULTAR EM IDEIAS INTELIGENTES. TRABALHANDO JUNTOS OS USUARIOS COMBINAM SEU CONHECIMENTO PARA O BENEFICIO DE TODOS. O MAIOR SIMBOLO DESSE TIPO DE USO SÃO OS WIKIS.
OS WIKIS SÃO SITES WEB QUE PERMITEM AOS USUARIOS EDITAR O CONTEUDO EXISTENTE E ACRESCENTAR NOVAS INFORMAÇÕES, SÃO EXCELENTES EXEMPLOS DE CONTEUDO GERADO PELO USUARIO E INTELIGENCIA COLETIVA. O WIKI MAIS POPULAR É O WIKIPEDIA, UMA ENCICLOPEDIA GERADA PELA COMUNIDADE COM ARTIGOS DISPONIVEIS EM MAIS DE 200 IDIOMAS. A WIKIPEDIA CONFIA QUE SEUS USUARIOS SEGUIRAM DETERMINADAS REGRAS COMO NÃO EXCLUIR INFORMAÇÕES CORRETAS NEM ACRESCENTAR INFORMAÇÕES TENDENDIOSAS E PERMITE QUE MEMBROS DA COMUNIDADE IMPONHAM AS REGRAS.
PERMITE QUE CLASSIFIQUEMOS CONTEUDOS COLOCANDO MARCAÇÕES, AS PAGINAS ANTIGAS POSSUIAM AS MARCAÇÕES FEITAS APENAS PELA PESSOA QUE A CONSTRUIA, POIS ERA USADA A TAG META. OS USUARIOS PASSARAM A INFORMAR O RELACIONAMENTO QUEO CONTEUDO TINHA PARA O MEIO DELA, APLIANDO O CONCEITO DE BUSCA DE INFORMAÇÕES.
OS VIDEOS DO YOU TUBE PUDERAM SER CLASSIFICADOS ASSIM COMO O CONTEUDO DE UM BLOG, AS MARCAÇÕES PASSARAM A SER TÃO DINAMICAS QUANTO O CONTEUDO QUE ESTAVA SENDO CONSTRUIDO NA WEB. O DEL.ICIO.US E O FLICKR GANHAM EM NAVEGAÇAO COM USO DAS TAGS, POIS OS FATOS RELACIONADOS SÃO MARCADOS CONFORME VÃO SURGINDO, AMPLIANDO A EXPERIENCIA DO USUARIO. OUTROS SITES SE UTILIZAM DESSE RECURSO PARA FAZER COM QUE ASSUNTOS GANHEM MAIS IMPORTANCIA COMO O DIGG.
As rede sociais começaram a ser usadas muito antes da Web 2.0, as possibilidades nessa nova era da Internet foi ampliado pelas tecnologias existentes. O primeiro sítio considerado como Rede Social que temos conhecimento é o SixDegrees.com, ele foi lançado 1997. 
Uma rede social tem a finalidade de conectar pessoas, permitindo que elas sejam localizadas e se agrupem. Ela deve possibilitar que exista privacidade junto com a visibilidade, parece que sejam antagônicos, mas a visibilidade permite que as pessoas sejam encontradas, enquanto que a privacidade permite que se controle que conteúdo pode estar disponível ou não. 
Existem várias classificações que podem ser feitas nas redes sociais, tais como: site de relacionamento, redes de profissionais, jogos online, etc.
O Brasil atingiu a marca de maior número de usuários no Orkut.
Mídia Social
"Um grupo de aplicações para Internet construídas com base nos fundamentos ideológicos e tecnológicos da Web 2.0, e que permitem a criação e troca de Conteúdo Gerado pelo Utilizador (UCG)" - Andreas Kaplan e Michael Haenlein
A diminuição do preço das câmeras web, câmeras digitais e das filmadoras digitais possibilitou que um grande número de pessoas gerasse muita informação, criando a necessidade de que essa mídia fosse disponibilizada para as pessoas conhecidas. Surgiram sites que permitiam que colocássemos esse novo tipo de material na Internet e que outros acessassem o conteúdo. A mudança que ocorreu com a Web 2.0 é que a informação era compartilhada, podia-se buscar as informações e fazer registros, não estava mais pessoal e sim global, fazia paste de uma galeria dos navegantes da Web.
O YouTube passou a ser o maior símbolo desse movimento, onde as pessoas colocam os seus vídeos e os espectares podiam avaliar, guardar em favoritos, compartilhar e receber os vídeos afins.
Os blogs datam da década de 90, criado por Jorn Barger com o nome de Weblog. O primeiro site foi o http://robotwisdom.com, que obteve um grande número de acesso apesar de não ter nenhum requiste visual. O nome passou a ser chamado de Blog quando Peter Merholz dividiu a palavra em duas, ficando We-Blog, no final dos anos 90.
Eles possuíam vários usos, desde diários online até a uma visão jornalística, o que foi mais perceptível na época em que estavam começando a se discutir sobre a Web 2.0, pois os usuários estavam construindo a informação.
 
Um blog é composto de textos que são colocados, acompanhados ou não de fotos, podendo possuir links para outras páginas ou blogs. Os visitantes podem fazer comentários sobre as postagens realizadas. Existiram blogs para tudo o que se possa imaginar. O número de blogs passa da casa dos 100 milhões em toda a Internet.
Aula 1
Introdução
O crescente uso da Web trouxe necessidades, aplicações e usuários. O tipo de funcionamento incomodava os navegantes da grande teia, pois era necessário esperar um longo tempo para que cada página fosse carregada, além disso, cada sítio processava uma solicitação após a outra, diferentemente dos programas usados, que permitiam executar tarefas enquanto uma anterior ainda não tivesse terminado.
A inclusão da API XMLHttpRequest pela Microsoft permitiu que a construção de páginas evoluísse. Não era mais necessário esperar o término de uma ação para que pudéssemos clicar em outro botão. A evolução do DHTML (Dynamic HTML – Javascript + CSS + HTML) permitia que as telas tivessem mais possibilidades na interação, aumento a atratividade e mantendo o usuário mais tempo acessando a mesma página. Os desenvolvedores começaram a mudar a forma de construir suas páginas, trocando as tabelas por camadas como ferramenta de estruturar os leiautes, essa modo de se criar páginas é conhecido como tableless.
O cenário estava propício para que os programadores e designers Web adotassem uma nova técnica, o Ajax passa a ser o grande artifício para que as páginas funcionem de forma semelhante aos programas que eram executados nos computadores.
Funcionalidades possíveis em interfaces ricas
- Preenchimento automático a partir de seleções.
- Drag and drop (arrastar e soltar).
- Atualizações parciais das páginas.
- Menus dinâmicos.
- Animações dinâmicas.
O termo RIA foi usado pela primeira vez em março de 2003 em um white paper (documento oficial publicado) pela Macromedia. Outros termos foram usados para definir o mesmo tipo de construção de páginas, como Remote Scripting pela
Microsoft em 1999.
Os navegadores passam a controlar as respostas às ações do usuário, as atualizações das partes da tela e o funcionamento da interface na máquina do usuário. A atualização das informações e os processamentos continuam ocorrendo no servidor Web.
Diferenciando o funcionamento
As páginas Web possuíam o seu funcionamento ditado pelos links do HTML, onde uma página chamava outra, ocorrendo sempre o carregamento inteiro de uma página. Uma forma utilizada para se diminuir o carregamento foi a utilização de páginas com frames, usando-se as tags frameset e frames para se definir as divisões. A página era chamada para um quadro específico, enquanto os outros mantinham as suas informações, não sendo necessário transferir novamente os arquivos para os outros quadros. Os designers contestavam muita a utilização de frames.
A construção de páginas com a técnica Ajax muda a forma de estruturar os sítios. A primeira página possuirá o tratamento das funcionalidades que irão controlar a navegação, esse tratamento é realizado por funções Javascript. As ações do usuário irão chamar arquivos que devolverão informações ou partes das páginas, diminuindo significativamente a quantidade de informação a ser transferida para o usuário a partir do servidor Web. A criação de frameworks facilitou a criação de interfaces ricas, pois eles oferecem as funcionalidades necessárias e realizam os tratamentos necessários para que as páginas funcionem em vários navegadores.
Tecnologias utilizadas
A construção de interfaces ricas pode ser feita com uma grande variedade de tecnologias, técnicas e linguagens. Podemos usar o XHTML como base ou produtos desenvolvidos por empresas.
- XHTML
Quando usamos o XHTML para construir a interface, necessitamos do Javascript para tratar as ações do usuário, alterar as informações da tela. O CSS é usado para que possamos configurar a aparência dos objetos. A API XMLHttpRequest irá fazer a requisição dos arquivos no servidor Web, a maioria das vezes esses arquivos serão formados por linguagens que são executas no servidor, sendo essas responsáveis por acessar informações em bases de dados ou atualizá-las, enviar emails, atualizar arquivos, entre tantas funcionalidades possíveis.
- FLASH
Software desenvolvido pela FutureWave Software para o sistema operacional PenPoint OS. O aplicativo foi portado para funcionar na Internet. A Macromedia adquiriu o aplicativo renomeando-o para Flash. Permite a construção de interfaces bem elaboradas, possibilitando a inclusão de som e vídeo. Ele é muito poderoso, permitindo a criação de jogos. A linguagem embutida, ActionScript, fornece ao desenvolvedor o controle sobre todos os objetos utilizados na tela.
O arquivo gerado pelo aplicativo é chamado de filme Flash. O navegador necessita que seja instalado plug-in para que ele possa executar o filme. A versão de plug-in pode ser estipulada ao se confeccionar o filme.
As atualizações das informações são realizadas através de chamadas a linguagens executadas no servidor. A Adobe possui o Flex, ele possui a função de facilitar a integração entre o filme e as chamadas aos códigos que são executados no servidor Web, integrasse de uma forma mais simples com a linha de tempo dos filmes Flash.
- MS SILVERLIGHT
A Microsoft criou um concorrente para o Flash, o framework Silverlight. Permite criar interfaces do usuário usando o bloco de notas, o Visual Studio ou qualquer outro editor, porém o trabalho fica muito facilitado com o Microsoft Expression Blend, que é uma ferramenta WYSIWYG. Utiliza o XAML (Extensible Application Markup Language) para descrever os objetos da tela. O Silverlight utiliza uma parte do framework dot Net, que é utilizado para chamadas aos códigos do servidor também.
Benefícios
As aplicações ricas vieram auxiliar aos usuários que não possuem muita habilidade no uso do computador. Elas permitem a construção de facilidades no uso, textos de ajuda, informações de retorno e interfaces mais intuitivas. Os frameworks ajudaram bastante a padronizar o funcionamento dos objetos de tela, o que deixa o usuário mais seguro ao interagir com as páginas.
Muitas ferramentas estão sendo migradas para a plataforma Web, muitas delas necessitam de funcionalidades que o HTML não consegue suprir. Os recursos que podem ser desenvolvidos com o uso de Javascript e CSS aliados ao DOM do XHTML, transformaram os aplicativos Web muito poderosos.
O tempo de resposta para o usuário em RIA é menor, o que melhora a satisfação. Elas permitem que se executem outras tarefas sem exigir que se espere o término de um anterior, aumentando a funcionalidade da interface. A aproximação do formato das telas de programas que são executados localmente no computador, auxilia o aprendizado dos novos usuários nesse novo ambiente.
Aula 3
Introdução à XHTML
SGML STANDARD GENERALIZED MARKUP LANGUAGE
UMA METALINGUAGEM ATRAVES DA QUAL PODEMOS DEFINIR
LINGUAGENS DE MARCAÇÃO PARA DOCUMENTOS.
XML EXTENSIBLE HYPER TEXT MARKUP LANGUAGE
TAMBEM É UMA METALINGUAGEM, É DERIVADA DA SGML. TEM COMO OBJETIVO A ESTRUTURAÇÃO DE DADOS.
XHTML EXTENSIBLE HYPER TEXT MARKUP LANGUAGE
1.0 É A PRIMEIRA ESPECIFICAÇÃO PARA FAMILIA XHTML, CONTINUA COM A MESMA VERSÃO, SENDO RECOMENDADA EM JANEIRO DE 2000, RECEBENDO UMA REVISÃO EM 2002, A VERSÃO 1.1 POSSUI A SUA RECOMENDAÇÃO DATADA DE NOVEMBRO DE 2010. ELA REALIZA UMA REFORMULAÇÃO DOS DOCUMENTOS HTML 4, TORNANDO SE COMO APLICAÇÕES DE XML. ELA POSSUI TANTO A SINTAXE E REGRAS XML 1 PARA IMPLEMENTAR AS FUNCIONALIDADES DO HTML 4.
A criação de páginas Web vem evoluindo desde o seu início. Os navegadores ganharam versões mais atualizadas, contendo mais recursos e reconhecendo uma gama maior de marcações. A linguagem recomendada pelo W3C é o XHTML 1.1. A versão 5.0 da HTML ainda está em fase de desenvolvimento, mas algumas novidades já são reconhecidas pelos navegadores.
Iremos ver a XHTML e nos ater aos recursos mais utilizados para a construção de interfaces ricas. Outras disciplinas possibilitaram que vocês criassem interfaces e que se apropriassem da construção de páginas com XHTML, faremos algumas recordações necessárias.
O XHTML possui a estrutura de um arquivo XML e as marcações do HTML, como já vimos nas aulas anteriores. A mudança veio trazer algumas facilidades para validação do documento e criação de navegadores para outros equipamentos. O HTML é uma aplicação da SGML.
Estrutura
A estrutura das páginas XHTML continua seguindo o que já era imposto pelo HTML 4, porém passamos a ter a rigidez do XML, aliado a isso, podemos validar o nosso documento, pois a determinação de uma DTD (Document Type Definition) permite que programas verifiquem se o documento segue a definição. Ela especifica qual a estrutura do documento, quais marcações podem ser colocadas internas às outras e os atributos aceitos por uma específica, informando a sua obrigatoriedade ou não.
Estrutura básica de uma página XHTML 1.0
Estrutura da página mostrando elementos e atributos
DOCTYPE
Define o tipo do documento. Informando qual a DTD (Document Type Definition) será utilizada para validar o documento.
Parte da DTD que define a tag "html" (informa que ela só pode possuir head e body)
DTD STRICIT
Não permite o uso de tags/atributos descontinuados. É indicada para uso em conjunto com CSS. O documento deve ser bem formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DTD TRANSATIONAL
Permite o uso de tags/atributos descontinuados. O documento deve ser bem formado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DTD FRAMESET
Possui as mesmas características da DTD Transational, inclui a possibilidade do documento possuir frameset, criação de estrutura de quadros.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
MUDANÇAS GERADAS PELA ADOCAO DE XHTML
A adoção do XML como forma de estruturar o documento trouxe algumas mudanças na confecção de páginas Web. 
Características:
As marcações sempre ser propriamente aninhados.
Não podem existir tags intercaladas, uma marcação não pode possuir uma terminação antes que todas as internas a ela estejam fechadas.
Ex: correto - <tr> <td>texto </td> </tr>
Ex: errado - <tr> <td>texto </tr> </td>  (o fechamento do tr deveria vir após o fechamento do td)
Todas as marcações devem possuir a terminação.
Tags que não possuam uma terminação devem informar na abertura que não existe um par para ela.
Ex: em par - <p> texto do parágrafo </p>
Ex: marcação única - <input type="text" name="endereco"  /> (a barra deve fica colada ao sinal de maior)
Não é permitido o uso de marcação sem fechamento. A quebra de linha é um outro exemplo dessa necessidade, passou a ser escrita com a barra: <br />
Os nomes das marcações devem sempre estar em letra minúscula.
Atributos devem estar sempre entre aspas. A HTML permitia que o valor de um atributo ficasse colado ao sinal de igual sem estar entre aspas, isso não é permitido em XHTML.
O documento deve possuir somente um elemento raiz.
VALIDAÇÃO DE DOCUMENTOS XHTML
A criação de documentos usando uma DTD permite que seja verificado o código, podemos verificar a estrutura e validar as marcações utilizadas, tanto na sua posição dentro do documento quanto a utilização dos atributos. O W3C fornece um link para fazermos a avaliação, porém a informação retornada é se o arquivo está com erros ou não. Algumas IDEs fornecem feedbacks na posição do erro, o Dreamweaver apresenta mensagens para tags sem fechamento ou sem abertura, o NetBeans fornece avisos para erros em atributos também, além de possuir auxílio para elementos e atributos possíveis, mostrando listagem de valores possíveis para os atributos.
Vantagens
Os documentos XHTML estão em conformidade com a estruturação estabelecida na XML, permitindo que eles sejam validados através da DTD selecionada. Podem ser usadas ferramentas para editar arquivos XML para manipular o documento. 
A criação de novos navegadores é mais fácil, pois as regras da XML são mais concisas, facilitando a interpretação dos códigos e sua posterior renderização.
O documento HTML permite o uso de marcações que o navegador só terá certeza que não tinha um par de término ao chegar ao seu fim, fazendo que todas as informações permaneçam empilhadas na memória do computador e gerando a necessidade de um número maior de avaliações, o documento XHTML diminui o trabalho do navegador, acelerando a interpretação e apresentação da página.
Os documentos podem incluir MathML, SMIL, or SVG, aumentando as possibilidades com a apresentação de outros recursos como o desenho vetorial criado com SVG.
Formulários
Os formulários permitem que os usuários entrem com informações em uma página Web. O uso do formulário permitiu que os sítios construídos passassem a oferecer muitas possibilidades, os desenvolvedores puderam construir sistemas Web com as mesmas finalidades dos sistemas que eram executados nos computadores dos clientes.
A marcação "form" possui atributos para configurar o seu funcionamento, entre elas podemos citar o atributo "method", ele informa como serão enviados os dados para o arquivo especificado no atributo "action". As interfaces ricas utilizam o Ajax para enviar os dados, podendo enviá-los através do método POST ou GET, da mesma forma que seria enviada diretamente pelo método "submit" formulário.
O atributo "id" é usado pela linguagem Javascript para fazer referência a uma tag no documento, sendo obrigatório o seu uso nas partes da página que serão acessadas pelas funções da linguagem.
Sabemos que o formulário fornece uma porta de entrada para as informações do usuário, mas vamos tentar abordar algumas utilizações possíveis, iremos abordar também as diferenças geradas pelo uso de Ajax e interfaces ricas. Esse par fez com que algumas interações que eram feitas por links ou por formulários pudessem ser feitas com outros objetos sendo selecionados ou arrastados pela tela.
O uso do botão limpar (<input type="reset" />) sempre foi questionado por mim, pois poderia causar uma situação desagradável se não tivesse nenhum tratamento. Qualquer usuário ficaria muito irritado ao clicar erradamente no botão limpar de um formulário após completar quarenta campos de informações, esse botão poderia ter tratamento com Javascript, quase nunca se encontra o tratamento.
Formulários que possuem campos interdependentes exigiam que os dados digitados pelo usuário fossem preenchidos novamente quando a página fosse recarregada, as seleções em alguns campos fossem ativadas novamente e o campo que possui dados de acordo com a informação de outro viesse com as suas informações disponíveis. O Ajax permite que o preenchimento ou a filtragem de campos interdependentes seja feita sem a necessidade que esses campos recebam o tratamento listado, pois os campos vão sendo preenchidos com o usuário informando os dados pedidos, sem que a página seja recarregada.
Camadas
O desenvolvimento de páginas Web passou por várias fases. O uso de apelos visuais sempre esteve presente, desde que se usavam pequenos GIFs animados até as animações interativas feitas em Flash. A entrada dos “designs de papel” para a área de criação de leiaute de páginas mudou muito a forma de se pensar interfaces, passamos a ter telas mais elaboradas. O uso de imagens pesadas foi marcante nesse início, houve um tempo de adaptação, o que podia se constatar é que tudo estava mais bonito.
A criação da estrutura do leiaute com tabelas era comum, porém trabalhosa e dificultava o uso de pessoas acostumadas com as ferramentas gráficas. Um termo se popularizou nessa época, o “tableless”, a proposta era de que se construísse o formato da tela sem o uso de tabelas e sim com camadas posicionadas em posições específicas. Isso foi possível com a utilização de CSS.
Algumas marcações foram usadas para se criar camadas são “span” e “div”. A Netscape havia lançado a proposta de se usar uma marcação chamada “layer”, porém ela não foi aceita pelo W3C. Essas marcações podem ser usadas para definir formatações em uma determinada região, mas o crescimento do uso de “div” acontece com o uso leiautes “tableless”, tendo a funcionalidade de uma camada como as usadas em programas gráficos. 
As áreas delimitadas possuem uma funcionalidade própria podendo ser colocadas em áreas da página, ocultadas, arrastadas, ter o seu conteúdo alterado. Algumas páginas utilizavam desse funcionamento para que fosse possível melhorar as informações para o usuário e a facilidade de interação com os objetos de tela.
Exemplo:
 
        <h1>Começando com camadas</h1>
 
        <div title="exemplo" >
            Primeira camada
        </div>
        <div title="Experimentando" >
            Segunda camada
        </div>
Outras Tags
Uma página XHTML é feita de muito mais marcações do que apenas formulário e camadas, não vamos entrar em detalhes nas outras pois já foram examinadas em outras disciplinas, mas estamos lembrando que você precisará de todo o arsenal de tags para poder construir interfaces ricas. Precisaremos das tabelas para dispormos informações, precisaremos dos links, mesmo que sejam usados para que o carregamento das páginas seja feito com funções Javascript e chamadas Ajax, precisaremos da imagem para que o usuário queira interagir com as página e conhecer a aparência de produtos. Podemos construir interfaces ricas com Flash, mas o XHTML também permite. Os frameworks Javascript poupam muito trabalho, mas não fazem a interface toda, apenas interagem com o que você construir.
Aula 4
Introdução
O CSS aumentou muito a possibilidade de se formatar páginas HTML, não incluindo apenas padrões, mas adicionando possibilidades na criação de configurações e adornos que o HTML
não possuía. Inicialmente existia apenas a folha de estilos, posteriormente foi adicionada a possibilidade de se aplicar o estilo gradualmente em cascata.
Foram criadas ferramentas que facilitavam a criação de folhas de estilo externas, posteriormente os construtores de páginas passaram a possuir essa facilidade. As IDEs WYSIWYG auxiliam na utilização de folhas de estilos, pois podemos verificar enquanto vamos construindo a página.
O CSS permite que a mesma página possua aparências diferentes, sendo cada uma destinada para ela sejam exibida em um meio diferente, podemos construir uma formatação para ela ser apresentada no navegador e outra para a impressora, isso é útil em comprovantes impressos pelo sítio.
A criação de páginas ganhou com o uso de estilos, podemos ter mais controle do que desejamos que o navegador exiba, As formas e as cores bem usadas melhoram a aparência, deixando a interface mais agradável para o usuário.
Histórico
Folha de estilo existe desde a década de 80, porém temos a sua inclusão no HTML 3.0 em 1995. Foram feitas nove proposições para aumentar as possibilidades de se formatar a aparência das páginas Web, duas formaram a base do que se transformou no CSS que temos hoje.
Håkon Wium Lie propôs em outubro de 1994 a CHSS (Cascading HTML Style Sheets). Bert Bos apresenta em abril de 1995 o navegador Argo ao W3C, ele utilizava uma linguagem própria de estilos o SSP (Stream-based Style Sheet Proposal). A convite de Lie eles se juntaram para desenvolver o padrão CSS baseados na CHSS,  como a folha de estilo poderia ser usada em outras linguagens de marcação removeram o H. Lie e Yves Lafon se juntaram com Dave Raggett (trabalho na prposição do HTML 4) para fazer com que o navegador Arena suportasse CSS, esse foi apresentado também em abril de 1995.
Começando com CSS
Para podermos entender o funcionamento de estilos, precisamos primeiramente saber como criamos e o que é um estilo. Um estilo possui um conjunto de regras de formatação que podem ser aplicados a uma marcação ou a um conjunto de marcações. Podemos definir que sempre que uma marcação esteja sempre com uma marcação, além disso, é possível se definir uma classe para posterior uso.
Onde,
Seletor – nome de uma tag.
Classe – nome um estilo que pode ser usado em uma tag.
[ ] – opcional, podemos definir classes associadas a uma marcação específica ou solta, podendo ser usada em qualquer marcação nesse caso.
Foram formatadas as marcações “p” e “body”. A última formatação do estilo não necessita que se informe o símbolo de fim de instrução “;”.
AGRUPANDO
Podemos informar mais de uma tag na mesma formatação.
USANDO CLASSES
As classes criadas nas definições dos estilos podem ser usadas em qualquer tag, se não estiver associada a uma marcação específica, ou nas marcações definidas para diferenciar formatações.
Prioridade dos estilos
A prioridade para o efeito cascata em ordem crescente:
- Folha de estilo padrão do navegador do usuário;
- Folha de estilo do usuário;
- Folha de estilo do desenvolvedor;
- Estilo externo;
- Estilo incorporado;
- Estilo inline ;
- Declarações do desenvolvedor com !Important;
- Declarações do usuário com !Important;
Iremos falar e mostrar algumas formatações existente no CSS, mas o ideal é ter contato com todas e saber como podemos consultar para conhecer todo o seu poder.
Configurando fontes e textos
O CSS permite que se configure o texto nas páginas, oferecendo uma quantidade enorme de formatações. Iremos olhar algumas e pedir que faça alguns exercícios para que consiga compreender o funcionamento.
Color
Define a cor da fonte. O valor atribuído pode ser um nome de cor conhecido ou uma combinação de cores no padrão rgb, a combinação pode ser feita com um valor hexadecimal ou com o uso da função rgb e os valores em decimal separados por cor.
	Nome no CSS 
aqua 
black 
blue 
fuchsia 
gray 
green 
lime 
maroon 
navy 
olive 
purple 
red 
silver 
teal 
white 
yellow
	Cor 
Azul claro 
Preto 
Azul 
Rosa 
Cinza 
Verde 
Verde-limão 
Marrom 
Azul escuro 
Marrom claro 
Roxo 
Vermelho 
Prata 
Verde-água 
Branco 
Amarelo
	
Configurando Caixas
Existem várias configurações que podemos usar para que nossas interfaces fiquem mais atraentes. As caixa permitem que coloquemos linhas em volta do texto ou em uma tag específica, as larguras e alturas podem ser especificadas. As formatações de fundo possuem vários recursos, existe forma de se fixar imagens no fundo, fazer com que ela expanda, atribuir cor de fundo para uma marcação apenas.
Iremos apresentar algumas formatações para que se possa ter contato com a formatação de caixas.
Usando pseudo elementos e pseudo classes
O CSS possui algumas formatações que estão relacionadas com situações específicas. Os hiperlinks fornecem a possibilidade de se configurar três estados, normal (o link), visitado e ativo (com o foco do cursor). O parágrafo permite que existam configurações específicas para a primeira letra, a primeira linha, antes e depois do parágrafo. A página permite se configure as margens direita e esquerda. As marcações percebem se o mouse está sobre ela ou não, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada com as outras marcações.
Exemplos de utilização de CSS
O CSS possui algumas formatações que estão relacionadas com situações específicas. Os hiperlinks fornecem a possibilidade de se configurar três estados, normal (o link), visitado e ativo (com o foco do cursor). O parágrafo permite que existam configurações específicas para a primeira letra, a primeira linha, antes e depois do parágrafo. A página permite se configure as margens direita e esquerda. As marcações percebem se o mouse está sobre ela ou não, apesar de ser mais usado com a tag "a", a pseudo classe pode ser usada com as outras marcações.
Assista alguns vídeos para maior conhecimento.
Aula 5
Histórico do Javascript
O Javascript foi desenvolvido pela Netscape por Brendan Eich. A linguagem foi inicialmente chamada de Mocha. Quando a versão 2.0 do Netscape é lançada em setembro de 1995, o navegador já interpretava a linguagem, porém, ela havia sido rebatizada para Livescript. A linguagem já se chamava Javascript na atualização da versão do navegador 2.0B3 em dezembro do mesmo ano. A utilização do nome surge de uma associação entre a Netscape e a Sun, quando o navegador passou a possuir suporte a tecnologia Java, permitindo o uso de Applets. A Netscape apresentou a especificação da linguagem para a Ecma International, exsitia a intenção de que ela fosse  considerada como um padrão da indústria. A entidade ciniiou grupos de trabalho para gerar um padrão, foi criado ECMAScript.
A Microsft lançou a sua linguagem script com sintaxe oriunda de "C++" para não ter problema com patentes, o Jscript. O navegador Internet Explorer também possuia um interpretador para Vbscript, porém ela não funcionava no Netscape. O Jscript foi incluido na versão 3.0 do navegador. Ela seguia inicialmente o que existia no Javascript, tendo algumas funcionalidades distintas, posteriormente passou a seguir o padrão, ECMAScript. A diferença entre o funcionamento das linguagens script no Netscape e no Internet Explorer sempre foi um problema para os desenvolvedores.
O Javascript transformou o mundo Web, permitiu que os navegadores deixassem de ser meros espectadores, passando a ter a missão de entender e executar códigos de uma linguagem de programação. A criação de scripts Javascript trouxe animações nas páginas, validações de formulários, entre tantas outras possibilidades. A criação de interfaces ricas aumenta a necessidade do uso de Javascript e o Ajax também amplia essa necessidade, os dados deixaram de ser enviados quando o navegador requisita uma página, mas quando um objeto dele faz isso, necessitando da linguagem para realizar esse trabalho.
Sintaxe da linguagem
O Javascript segue a sintaxe básica do Java para as suas estruturas. Não é fortemente tipada, permitindo que suas variáveis funcionem de acordo com o conteúdo que estão armazenando. A linguagem não exige que suas variáveis sejam declaradas, bastando atribuir u+.9+.m valor para que elas possam ser usadas a partir de um determinado ponto.
Estrutura básica de inclusão de scripts nas páginas HTML.
<script> 
Set de instruções 
</script> 
A marcação script delimita uma área para que coloquemos códigos.
TYPE
MIME-type - especifica o tipo de arquivo.
• text/javascript (usaremos este)
• text/ecmascript
• application/ecmascript
• application/javascript
• text/vbscript
CHARSET
Especifica a codificação usada para os caracteres 
• "ISO-8859-1" – padrão para as línguas Latinas, contém os acentos e o cedilha
• "UTF-8" – codificação que contempla todos os alfabetos, existe a proposta em transformá-lo em padrão.
Existem várias codificações, atendendo as linguagens
TYPE
Informa o arquivo com o seu caminho, veremos o uso de arquivo externo.
Podemos inserir comentários em nossos códigos, é usado o // (barra barra) para comentários de uma linha e /*  texto  */ (barra asterístico e asterístico barra) para comentários de várias linhas.
Onde podemos colocar os códigos Javascript
A marcação "script" pode ser colocada dentro de "head" ou "body", iremos usar o "head" para colocarmos nossas funções e o "body" quando necessitarmos que o Javascript  apresente alguma caixa de diálogo ou gere objetos da tela e textos na tela quando a página for carregada.  Existe também a possibilidade de que sejam colocados códigos diretamente nos eventos, iremos ver isso no assunto eventos.
Exemplo de seleção simples:
<html>
   <head>
      <tilte>Título da Página</title>
      <script type="text/Javascript" > 
         //código
      </script> 
   </head>
 
   <body>
 
   </body>
</html>
Operadores
Dividimos os operadores inicialmente em operadores aritméticos, relacionais e lógicos, existem também operadores de bit, operador de seleção (ternário). Os operadores aritméticos permitem que façamos expressões e obtenhamos um resultado que irá depender dos tipos de dados e dos próprios operadores. Os operadores relacionais obtêm um valor lógico como resultado de sua avaliação. Operadores lógicos comparam valores lógicos, gerando um novo valor lógico.
Usaremos o método "write" do objeto "document", o método adiciona informações na página, fazendo com que o navegador exiba os dados recebidos.
Delimitadores de bloco
O Javascript utiliza as chaves como delimitador de bloco. Eles permitem que várias instruções recebam o mesmo funcionamento que a instrução após a estrutura da linguagem, algumas interferem na instrução imediatamente após a ela. A estrutura "if" realiza um teste condicional  que executa ou não a próxima instrução, para que esse tratamento seja aplicado a varias instrução devemos circundá-la com delimitadores de bloco.
Exemplo de Bloco:
<script type="text/Javascript" > 
//*******
// sem bloco
//*******
if (10 < 6) 
    alert("Primeiro texto.");
    alert("Segundo texto.");
    alert("Terceiro texto.");
//*******
// com bloco
//*******
if (10 < 6) {
    alert("Primeiro texto.");
    alert("Segundo texto.");
    alert("Terceiro texto.");
} 
</script>
Caixas de diálogo
As caixas de diálogo são janelas que permitem que o nosso sistema interrompa seu funcionamento, aguardando que o usuário interaja com elas antes de prosseguir, esse tipo de funcionamento é chamado de janela modal, impede que o usuário acione qualquer outra parte do sistema antes de fechar a janela atual.
Mostramos duas caixas de diálogo em nossos exemplos, ficando apenas uma de fora. Existe uma para podermos enviar um aviso ao usuário, uma segunda para pedirmos que o usuário entre com alguma informação e uma terceira que pede ao usuário para escolher entre opções com dois botões (OK e Cancelar), como os navegadores é que interpretam o HTML e o Javascript esses valores podem ser diferentes.
Exemplos com as caixas de dialogo:
Funções
A função possui vários aspectos dentro de linguagens de programação, iremos começar olhando pela ótica de diminuirmos o esforço de digitação e manutenção, uma funcionalidade do programa pode possuir a necessidade de ser utilizada em vários locais pode ser colocada em uma função. Essa estratégia permite que a manutenção seja realizada em um único local, diminuindo esforço futuro e risco de inconsistência. Outro aspecto a se considerar é a divisão de trabalho, uma equipe de desenvolvimento pode receber tarefas individualizadas, a modularização permite que cada pessoa crie parte do programa. O tratamento de evento é normalmente associado  à uma função.
Algoritmo diferencia procedimento de função, o Javascript irá criar sempre como função, através do retorno ou não de um valor pela função é que iremos diferenciar se está no papel de função ou de procedimento. A criação de funções é feita dentro da marcação "script", podemos criá-las em arquivos externos. Algumas avaliações de performance indicam que podemos melhorar o carregamento das páginas colocando-as no final do documento, colocando a marcação "script" dentro de "body", perto de seu fechamento.
Criando uma função
function nomeDaFunção (Parâmetros) {
   instruções da função ...
}
Podemos criar funções com vários objetivos, vamos exemplificar com uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade, recebendo como parâmetro a sua idade.
Exemplo
<script type="text/Javascript" > 
function diMaior(anos){
   if  (Anos > 17) {
      alert ("Maior de Idade"); 
   } else {
      alert ("Menor de Idade") ;
   }
}
</script>
Essa função estará tendo o seu processamento como um procedimento.
Uma função não é iniciada sozinha, ela precisa ser chamada por outro processamento.
Direito Ambiental
Podemos passar informações para a função, essas informações têm o nome de parâmetro.  Uma variável comum é passada por valor, a função recebe uma cópia de seu valor e esse é armazenado na variável que é criada quando a função inicia, a variável original possui seu valor inalterado. Quando passamos objetos ou vetores nos parâmetros o Javascript não cria uma cópia dele, é criada uma referência para o próprio objeto, todas as alterações realizadas nos valores são feitas diretamente no objeto ou vetor passado, não havendo preservação do valor original.
A função pode ser definida com nenhum parâmetro ou vários, podemos também criar funções que possuam um número de parâmetros variável, recuperando-os através do vetor "arguments".
Eventos
Os objetos de uma página XHTML percebem algumas ações sobre eles, chamamos de eventos essas ações reconhecidas. A programação motivada por eventos começou nos sistemas operacionais com janelas, o programador insere código para tratar ações que o usuário deveria realizar com a tela.
Em seguida apresentamos a lista de alguns eventos possíveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passíveis de sua ocorrência.
onunload
A marcação "body" pode chamar algum tratamento antes de o usuário sair da página.
onchange
Ocorre quando o objeto perde o foco e houve mudança de conteúdo,  válido para os objetos text, select e textarea.
onblur
Quando o cursor sai do objeto, ele perde o foco. Esse evento é usado quando se deseja tratar mesmo que não tenha havido mudança, válido para os objetos text, select e textarea.
onfocus
Funciona de forma inversa do anterior, ele é chamado sempre que o objeto receber o foco, válido para os objetos text, select e textarea.
onclick
Ocorre quando o objeto recebe um click do mouse, válido para todos objetos de tela, usamos mais para o objeto <input type="button"
/>.
onmouseover
Ocorre quando o ponteiro do mouse passa por sobre o objeto. Podemos usar esse evento no objetos da tela. Possui muitas possibilidades na criação de interfaces ricas, permite que seja percebido se um produto foi arrastado para uma imagem do carrinho por exemplo.
onselect
Ocorre quando o texto dentro do objeto é selecionado, válido para os objetos "inpt text" e textarea.
onsubmit
Ocorre quando um formulário está sendo enviado. Utilizamos esse evento para podermos validar formulários, podendo cancelar o seu envio. Para cancelar um envio, basta que ele retorne "false".
<form action="avalia.aspx" onsubmit="return validaCampo();" > 
Nome <input type="text" name=nome" id="nome" /> <br />
 
<input type="submit" value="Incluir" />
</form >
Aula 6
Conhecendo o DHTML
O DHTML utiliza outras tecnologias para criar interatividade nas interfaces Web. A união do HTML que define os elementos de nossa página, o Javascript com a programação script, o CSS com as suas possibilidades de formatação e posicionamentos, unidos a definição de estrutura hierárquica de objetos oferecida pelo DOM permitem que construamos telas com animações, que são alteradas de acordo com as ações do usuário, com avisos visuais sobre os elementos da interface, as possibilidades passam a ser limitadas por nossa criatividade.
A guerra dos navegadores existe desde que o Internet Explorer 3.0 foi lançado, apesar de ainda ser inferior do que o Netscape nessa época. O Internet Explorer começa a fazer frente ao Netscape quando lança a sua versão 4.0 e a Microsoft o incluiu como parte do sistema operacional, fazendo com que todos usassem o Windows já tivessem o navegador, pois vinha junto e não poderia ser retirado.
O Nescape 4.0 é lançado em junho de 1997 e o Internet Explorer logo após, em outubro do mesmo ano. Eles possuem recursos que possibilitam a criação de DHTML de forma básica.
A versão 4.0 do HTML já possuía o DOM 1.0, permitindo com que o DHTML possa ser desenvolvido de uma forma mais natural, pois o que os navegadores interpretavam antes ainda estava em desenvolvimento e não estava completamente padronizado, era chamado de versão 0 do DOM.
A versão 4.0 do HTML também trouxe uma alteração nos estilos, inseriu a possibilidade de se aplicar os estilos em cascata, mudando o seu nome para CSS. Houve um aumento nas formatações possíveis e uma tentativa na padronização dos estilos nos navegadores. O Javascript e o Jscript nos dois navegadores possuem uma estrutura bem próxima, ficando as diferenças por conta de detalhes no CSS e na estrutura do DOM que cada um implementava.
DOM
O W3C define DOM como:
" The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.“
O DOM possibilita que as linguagens naveguem pela estrutura do documento, insira um elemento, altere os valores dos atributos, construa-o dinamicamente. Ele é uma API de programação para documentos, contem os métodos que permitam interagir com os elementos, assim como os eventos percebidos por eles e suas propriedades.
Arquitetura do DOM
As especificações do DOM definem módulos para tratar um uso específico. Os módulos dependem de outros, todos dependem do núcleo principal.
Estrutura no HTML
O Dom determina a estrutura básica do documento HTML, o primeiro elemento do documento é o document, porém ele é interpretado dentro de uma janela de um navegador, tornando o window como o primeiro elemento. Cada marcação é uma representação do objeto element, o element possui atributos (attribute) que ficam postados dentro da marcação, entre a abertura e fechamento da marcação podemos colocar textos (text). Um elemento pode possuir elementos filhos, gerando a hierarquia do documento.
Os elementos podem ser recuperados de algumas formas, podemos acessar um elemento através de seu id, podemos andar pela estrutura até chegar ao no desejado e podemos recuperar todas as marcações do mesmo tipo, até chegar ao elemento procurado. Existe a possibilidade de se andar pelos names das marcações, porém não é a recomendação w3c.
DOM e Javascript
O DOM define métodos que os objetos devem possuir para que possamos gerenciar a estrutura do documento. O Javascript interage com os objetos, criando-os e chamando seus métodos, tornando possível a alteração da estrutura da página, mesmo depois de sua exibição. A linguagem permite que manipulemos os elementos.
Recuperando um elemento
O primeiro passo é a identificação do elemento que será a abse da ação, para tanto usaremos o método getElementById.
<script type="text/javascript">
minhaBorboleta = document.getElementById("borboleta");
alert( minhaJanela );
</script>
O objeto document possui o método getElementById que retorna o elemento que possui o id informado. A caixa de diálogo irá exibir que minhaBorboleta possui um elemento do HTML. Podemos usar document.odemos usar document. getElementsByTagName("marcação") para retornar todos os elementos do com o mesmo nome de marcação, pode ser retornado todos os elementos do tipo "tr".
Métodos dos objetos DOM
Vamos ver os métodos para podermos entender o uso deles.
hasAttribute("atributo") - Verfica se o elemento possui o atributo.
setAttribute("atributo","valor") - Atribui um valor ao atributo. Caso o elemento não o possua, então o atributo será criado.
getAttribute("atributo") - Obtém o valor do atributo.
removeAttribute("atributo") - Remove o atributo.
appendChild(objeto) - Adiciona um elemento como filho do elemento atual. O navegador irá exibir o elemento se for uma marcação XHTML conhecido por ele.
createElement("elemento") - Cria um elemento para que seja possível adicioná-lo à estrutura da página.
createTextNode("conteúdo") - Insere um texto entre o par da marcação
parentNode - Retorna o elemento pai do nó (elemento) atual.
childNodes - Retorna a coleção de filhos do elemento.
firstChild - Retorna o primeiro nó interno ao elemento.
lastChild - Retorna o último nó interno ao elemento.
nextSibling - Retorna o próximo nó filho do mesmo pai que o nó atual.
Trabalhando com o cursor
O mouse pode ser usado para o usuário interagir com a interface além do clique simples, podemos arrastar objetos, verificar se ele está sobre uma determinada posição, sobre um objeto, se movendo, entre outras possibilidades. Vamos ver como podemos verificar esses eventos.
As marcações XHTML possuem alguns eventos que já falamos na aula sobre Javascript. Os eventos são percepções que os objetos possuem, eles conseguem detectar que alguma ação ocorreu. Os desenvolvedores escrevem códigos para os eventos, por isso que esse tipo de programação chama-se motivado por eventos.
As marcações percebem alguns eventos, mas foi criado um objeto chamado de "event" para permitir que se obtenha algumas informações em relação ao tipo de ação que o usuário fez. O botão do mouse que o usuário está segurando, a tecla pressionada, o shift está pressionado são informações que podemos recuperar com o objeto "event".
Camadas
As camadas permitem que sejam introduzidos conteúdos no seu interior, podemos adicionar textos sem formatações ou partes de XHTML completamente formatadas. Quando se começou a criar leiautes sem tabelas, usando o posicionamento de camadas, usando "div" ou "span", o uso de CSS passou a crescer, pois os estilos permitiam o posicionamento e a alternância entre visível e oculto o estado da camada. 
Para alterarmos o conteúdo de uma "div" usamos a sua propriedade "innerHTML".
function altera(){
//Recuperando a div
var camada = document.getElementById("minhaCamada");
//Recuperando o campo de texto
var texto = document.getElementById("texto");
//Recuperando a caixa de seleção
var negrito = document.getElementById("negrito");
info = texto.value;
// verificando se está selecionado
if (negrito.checked) {
// colocando negrito para a caixa selecionada
info = "<span style='font-weight: bold'>" + info + "</span>";
} 
//colocando o texto na "div"
camada.innerHTML = info ;
}
O posicionamento de camadas pode ser feito dinamicamente, veremos ainda nessa aula.
Exemplo de menu
A construção de menus DHTML é muito usada no desenvolvimento de interfaces Web. A construção se baseia no conceito de exibir e ocultar camadas e o posicionamento das camadas. O exemplo abaixo visa ilustrar a configuração visibility do CSS, existem algumas formas de fazer que o funcionamento seja mais perfeito. Uma das formas de resolver o problema é de se colocar uma camada inferior que englobe todo o meu, fazendo com que ela oculte todos os submenus.
<script type="text/javascript">
function exibe(sub){
// Recuperando o menu
var camadaSub = document.getElementById(sub);
//Exibindo o menu
camadaSub.style.visibility = "visible";
}
 
function oculta(camadaSub){
// Não necessita recuperar o elemento, 
// pois é que foi passado.
// Ocultando o menu
camadaSub.style.visibility = "hidden";
}
</script>
Ativando as funções com o tempo
O Javascript possui dois funções que permitem que se chame uma "function" após um determinado tempo, setTimeout e setInterval. A função setTimeout permite que se escolha uma função após decorrem um tempo determinado, enquanto a setInterval chamará a função a cada intervalo de tempo determinado.
Javascript e CSS
O Javascript permite que se altere estilos de campos da página, que se altere valor para um estilo. O estilo pode ser informado de três formas conforme foi visto na aula de CSS. Podemos determinar para um elemento qual formatação que será aplicada nele, alterar a classe que está sendo aplicada ou alterar a folha de estilos para a página.
Podemos fazer que o link não leva para nenhuma página e não mova o documento atual. Colocando-se "return false;" no final do evento "onclick" o navegador cancela o que seria feito com o click.
<a href="folha 2" onclick=" folha(2); return false;" >folha 2</a>
Alterando Imagens
Podemos alterar as imagens através de objetos imagens ou através da propriedade "src", fazendo a alteração através de código Javascript. Existem algumas aplicações que se utilizam desses recursos para mostrar várias visões de produto. A união da alterações de imagens com a possibilidade de se ocultar e exibir camadas permite que lojas online apresentem zoom de seus produtos com algumas imagens.
<script type="text/javascript" >
var qual = 1;
function trocar(){
if (qual == 1){
qual = 2;
} else {
qual = 1;
}
var ref = document.getElementById("ref");
// A propriedade src está sendo usada para
// informar o enderço da nova imagem
ref.src = "img/refri" + qual +".jpg"
}
</script>
Javascript e o HTML5
O HTML 5 está perto de ser uma recomendação, os navegadores correm em passar a compreendê-lo para que possam aumentar a sua lista de usuários. Ele ganha marcações para tratar objetos multimídia. A intenção da nova versão é de que se controle vídeo pela página com códigos Javascript. As páginas com interações e conteúdo ricos possuirão mais possibilidades. O Javascript terá que interagir com os objetos, ganhando mais funcionalidades
Um aliado a nova versão é o CSS3, que irá auxiliar na tarefa de aumentar as possibilidades da interface. O modelo DOM se adequa às alterações feitas, permitindo que voltemos com mais força para a construção de interfaces dinâmicas. A criação dos códigos sempre foi trabalhosa, a verificação para que as páginas tivessem o mesmo tipo de comportamento nos navegadores mais usados.
Os frameworks começaram a fazer as atualizações para poderem contemplar os novos recursos, não permitindo que os espaços ganhos com os usuários fossem perdidos.
Aula 7
Histórico do jQuery
Alguns frameworks começaram a surgir, o Prototype é um bom exemplo que tem a sua primeira versão em fevereiro de 2005, ele é base para muitos outros frameworks tais como Ruby on Rails, script.aculo.us e Rico. O desenvolvimento do jQuery é inicado em agosto de 2005.
John Resig questionava o quanto era escrito para que se incluísse um Javascript, começou a desenvolver um modelo de como ele achava que o tratamento dos comportamentos deveria ser implementado. Esse estudo se transformou em um framework cuja primeira versão data de janeiro de 2006, a primeira versão estável (1.0) é de agosto do mesmo ano.  A intenção é que o framework se chamasse JSelect, mas o domínio já estava registrado na Web, forçando-o a escolher um outro nome, o nome leva a crer que seria para consultas a banco de dados. jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2.
O jQuery permite a acréscimo de suas funcionalidades com a utilização de plugins. Podemos utilizar um existente ou criar o nosso próprio. Uma das vantagens de se estender o jQuery  é que as páginas estarão usando um único tipo de sintaxe, facilitando o aprendizado de novos desenvolvedores e a manutenção das páginas existentes. Um plugin contém uma coleção de objetos que possuem comportamentos próprios.
Começando a trabalhar com o Framework
O uso de um framework sempre começará pela obtenção do mesmo, deve ser baixada última versão estável. As versões de teste devem ser usadas quando já dominamos a tecnologia e desejamos nos preparar para as novidades que virão na próxima versão, podemos também participar do projeto, nesse caso testamos as funcionalidades e relatamos os erros apresentados para que possam ser retirados.
Primeiro contato
Para usarmos o framework, devemos fazer a referência do arquivo Javascript na nossa página XHTML. O arquivo baixado do site do jQuery foi colocado na pasta "js" dentro do sítio. Devemos incluir a marcação script com o atributo "src" contendo o caminho e o nome do arquivo.
A biblioteca possui todo arcabouço, porém precisamos chamar as funções e para isso temos que ter o nosso código Javascript, usaremos um arquivo externo para esses códigos.
Seletores
CSS trouxe a separação entre conteúdo e layout, permitindo que as páginas pudessem ser formatadas através de arquivos externos. Os estilos eram aplicados aos elementos, foram criados seletores para que fosse possível se determinar qual receberia a configuração.
tag{ estilo: configuração; }
tag.classe{ estilo: configuração; }
#id{ estilo: configuração; }
O jQuery usa a mesma forma de acesso, ele utiliza o símbolo "$" ou a palavra jQuery.
$ (seletor)
ou
jQuery (seletor)
Podemos recuperar objetos do XHTML com os seletores como fizemos nas outras aulas para elementos do DOM com getElementById.  Algumas diferenças existem, elas serão vistas na aula de hoje. O jQuery aplica o método a um elemento ou vários de acordo com a quantidade de elementos que se enquadrem ao padrão informado. Ao procurarmos usando um seletor para uma marcação XHTML, serão retornados todos os elementos que sejam da marcação.
Corpo = $ (“body”);
Alert (corp);
Podemos selecionar vários elementos, bastando separá-los por vírgulas.
Seletores compostos
Quando existe a necessidade de se recuperar um elemento que está interno a outro, podemos usar no seletor a seqüência até a marcação desejada. Pode ser recuperado um conjunto de elementos que se enquadrem na busca.
Seletores para formulários
São seletores criados especialmente para uso em formulários.
$(':input') – para todas as marcações "input"
$(':text') – os campos de formulário do tipo "text"
$(':password') – os campos de formulário do tipo "password"
$(':checkbox') - os campos de formulário do tipo " checkbox'"
o mesmo serve para inputs do tipo radio, button, submit, reset, image e file.
$(':enabled') - todos os elementos do formulário que estejam abilitados
$(':disabled') - todos os elementos do formulário que
estejam desabilitados
$(':checked') – todos os elementos selecionados em campos do tipo radio e checkbox
$(':selected') – todos os elementos selecionados nos selects do formulário
Só é válido se for criado código para andar pelos campos, é mais indicado o uso do "id" para recuperar um campo específico.
Configurando a aparência com o CSS
Existem muitas possibilidades criadas com o CSS, podemos acessá-las usando o método "css" do objetos recuperados pelo jQuery.
Os nomes usados para as propriedades configuradas são os mesmo utilizados em DHTML.
O jQuery possui métodos que permitem que atribuamos dinamicamente classes, temos também a possibilidade de removê-las de um elemento. As classes podem ter os seus valores atribuídos com programação, sendo em resposta a eventos ou não.
Estamos exibindo um código com o evento "click", podemos usar: "mouseover", "mouseout", "hover". O evento mouse permite que informemos duas funções, sendo a primeira para quando o mouse estiver sobre o elemento e a segunda para o caso contrário.
Interagindo com os elementos
A página XHTML possui uma estrutura hierárquica de elementos, o framework oferece algumas formas de andarmos pelo documento DOM. Vimos como podemos acessar os elementos com um seletor, vamos explorar um pouco mais as possibilidades de se recuperar e manusear os elementos.
A interação do usuário pode gerar a necessidade de incluirmos um elemento (marcação), alterarmos o valor de um atributo, o jQuery oferece métodos simples para esses tipos de manipulação. A administração de dados através de AJAX passa para o navegador a responsabilidade de atualizar a interface, enviar dados para as páginas que irão registrar as novas informações, entre processamentos possíveis.
Devemos ter cuidado com as alterações de valores de atributos, pois serão afetados todos os elementos recuperados pela seleção. Ao se alterar um valor para uma seleção que recuperou a marcação "a", todos os links da página serão atualizados. O uso do atributo "id" através do uso da tralha diminui esse risco quando se pretende trocar o valor para apenas uma das marcações da página.
Métodos:
text - Obtém ou atribui conteúdos de texto, caso o elemento possua HTML, ele será removido.
attr - Obtém ou atribui o valor do atributo fornecido.
width - Obtém ou atribui a largura em pixels, apenas o primeiro elemento na seleção será afetado caso a seleção retorne vários.
height - Obtém ou atribui a altura em pixels o elemento ou o primeiro da seleção.
position - Obtém um objeto de posição que possui o topo e a esquerda do elemento, ou do primeiro da seleção. A posição é relativa ao elemento que o contém, ao seu elemento pai. 
Val - Obtém ou atribui o valor de elementos que são campos de formulário de formulários.
 Funções atribuídas aos eventos dos botões:
Foi usado o método "val" que retorna os valores dos campos de formulário para obter as informações
Crie um formulário com todos os tipos de campos de formulário e apresente todas as informações digitadas dentro de um "textarea". Concatene todos os dados antes de colocar dentro do textarea.
Capturando a interação com o usuário
Os eventos que os objeto percebem e podem ser tratados por Javascript também são reconhecidos pelo jQuery. Usamos o "click" em nossos exemplos, mas existem mais eventos.
A construção pode ser feita com o acesso direto ao evento do elemento, como fizemos, outra forma é o uso do método "bind", ele associa uma função ao evento para o elemento, e a terceira forma é feita com o uso de "addEventListener".
Caixas de diálogo
O plugin jQuery User Interface fornece um conjunto de objetos de tela, temos muito ganho de aparência e nossas aplicações com a utilização deles. Iremos falar um pouco sobre o "Dialog". Ele permite que seja criada uma caixa de diálogo com mais possibilidades do que as oferecidas pelo Javascript, é criada uma camada contendo uma interface XHTML, podendo ser modal ou não.
Animações
Podemos criar muitos efeitos com os objetos da tela, efeitos de transição, na imagem, alterar tamanho, mover objetos, além dos efeitos existentes ainda temos a possibilidade de incluir plugins que resolvam alguma necessidade.
 
O plugin jQuery UI possui o tratamento de drag and drop, permitindo que arrastemos objetos da tela com o mouse. Os arquivos Javascript ui.mouse.js e ui.draggable.js devem ser incluídos na página para que se possa utilizar a funcionalidade.
Começando a usar a técnica Ajax
A Internet Rica só tem razão de ser ao ser utilizada junto com o AJAX, que faz com que os processamentos de servidor ocorram sem que a interface saia da frente do usuário. O objeto XMLHttpRequest criado pela Microsoft permitiu que construíssemos telas mais interativas.
O jQuery possui a função $.ajax(options) que incializa uma chamada AJAX, onde as opções configuram a forma de envio e o que será enviado. Podemos enviar os dados por post ou get. O objeto que controla o envio possui métodos que são disparados conforme o envio passa por etapas.
Aula 8
O ambiente de desenvolvimento do Flash
Para começarmos a trabalhar com o Flash precisamos conhecer o ambiente e as ferramentas que ele possui, como ele controla o tempo, o que são as camadas e os objetos que ele permite que construamos.
O Flash permite que seja mudada a área de trabalho através do menu "Janela" e submenu  "Espaço de Trabalho", podendo a distribuição das ferramentas de acordo com o tipo de trabalho que estiver realizando. Outro local que podemos usar para a escolha é a caixa de combinação existente na parte superior, a imagem está com o padrão "Essenciais" selecionado.
O ambiente possui vários painéis para que possamos criar o nosso filme, cada uma para uma funcionalidade diferente. A escolha do "Espaço de Trabalho" irá disponibilizar as ferramentas que são mais usadas para determinado objetivo.
Podemos fechar painéis ou encolhê-los que não estamos usando para aumentar o espaço da área do filme, facilitando a interação com os objetos da tela. Usamos o símbolo com dois triângulos na parte superior de um para realizar a ação.
O menu "Janela" permite que sejam exibidas outras janelas dentro de seu painel. O uso de atalhos também agiliza o trabalho, podemos usar "F9" para chamarmos a janela de ações.
Quando usamos a tela com os painéis fechados, em forma de ícone, será exibida a janela escolhida ao se clicar no botão do ícone.
O Flash chama área do filme de "Palco", é o local onde serão colocados os objetos, onde podem ser feitos desenhos, onde colocaremos as nossas imagens. A "Linha de Tempo" controla o que acontece em relação ao tempo, ela permite que as informações sejam dispostas em camadas para que objetos apareçam sobre outros.
Começando a desenhar
Uma forma de entender como funciona a construção de filmes Flash é começar com os desenhos. Iremos criar objetos simples para poder mostrar o seu funcionamento. Precisamos conhecer a “Barra de Ferramentas”, ela possui os objetos de desenho que podemos inserir no nosso “Palco”.  Iremos criar retângulos e ovais.
O desenho de formas permite que se alterne entre alguns tipos, bastando que pressione o botão esquerdo do mouse e espere a exibição do menu. Esse procedimento pode ser feito em todas os ícones que possuam um pequeno triângulo preto na parte inferior direita.
O pincel e o retângulo possuem um menu de opções.
Clique no palco e arraste o mouse com o botão do mouse pressionado, faça o mesmo com o shift também pressionado, iremos desenhar um retângulo e quadrado.
Vamos configurar os objetos, para tanto podemos configurar o preenchimento e a linha de contorno. Clique na "Ferramenta de Seleção", ela é a seta preta na parte superior da "Barra de Ferramentas". Selecione o quadrado e clique no ícone "Propriedades", ele fica na parte superior direita da IDE. Configure a linha para 10, escolha a cor azul (#0000CC) para a linha e vermelha (#CC0000) para o fundo, vertifique
o Alfa, deixando-o em 100%. Altere para tracejada o estilo da linha.
Podemos usar as janelas "Cor" e "Amostras para podermos configurar as cores dos elementos de desenho também, lembrando sempre que o desenho vetorial me permite alterar os elementos após desenhá-los, facilitando correções e ajustes.
A "Janela de Alinhamento" permite que ajustemos os objetos da tela, fazendo com que fiquem alinhas em um mesmo referencial.  Temos no mesmo grupo "Informações", possibilita que sejam feitos ajustes  de tamanho e posição, e "Transformar", possibilitado que altere tamanho, rode e mude configurações de 3D.
Existem outras ferramentas que podem ser usadas, como o lápis que traça linhas e o pincel que pinta fundos. As ferramentas para alteração auxiliam após o desenho ser feito, a borracha e o balde são desse tipo, ainda temos o conta gotas que permite que capturemos a cor de um elemento.
Linha de tempo e camadas
A linha de tempo controla o que está sendo apresentado, ela permite que sejam apresentadas informações diferentes, bastando que se inclua, remova ou altere os elementos no "Palco".  A linha de tempo é composta de quadros, existe um tipo especial de quadro que é chamado de "Quadro-Chave". Quadros comuns repetem o conteúdo da tela, fazendo apenas que o tempo passe, enquanto os "Quadros-Chave" permitem que sejam alterados os elementos da tela, podemos trocar a tela toda ou apenas fazer uma alteração pequena, fazendo uma animação por quadros. Os símbolos permitem que sejam feitas animações mais elaboradas, com caminhos.
Podemos dispor os elementos em camadas, gerando um maior controle do que acontece no palco. As camadas podem ser colocadas através do objeto inferior da esquerda na janela da linha do tempo, podemos também duplicar e excluí-las. As camadas podem ser re-arrumadas, trazendo para cima ou baixo de forma a que estejam na posição correta.
Cena
Um filme pode ser dividido em muitas cenas, esse funcionamento permite que sejam criadas telas totalmente distintas em locais separados, com elementos e fundo diferentes. A divisão em cenas facilita a administração e manutenção do trabalho.  A inserção de uma cena é feita através do menu "Inserir".
O símbolo no Flash
O Flash possui várias possibilidades ao convertemos um desenho em símbolo, podemos converter em gráfico, botão e clip de filme (movie clip). Os símbolos permitem que se tenha controle sobre o que está acontecendo nas cenas, esse controle é obtido através de programação.
Clipe de Filme
Funciona como uma parte de um filme, ele é usado para criarmos animações interativas ou para termos partes da tela com funcionamentos independentes.
Botão
O desenho passa a ter as características de um objeto clicável. Um grande parte da interação com o usuário é feita através de cliques do mouse.
Gráfico
Usado para se criar animações simples, podemos usar para pontos da tela que podemos ter alguma interação também.
Biblioteca: Os símbolos são armazenados na biblioteca, podendo ser usados em vários lugares ou várias vezes no mesmo lugar. Podem ser criadas pastas para aumentar a organização, facilitando o uso em trabalhos maiores. Os símbolos guardados na biblioteca podem ser arrastados para o palco, passando a fazer parte do mesmo.
Trabalhando com clipe de filme
Um clipe de filme, como foi mencionado antes, funciona como um filme, a diferença fica por conta de ele ter uma área e uma linha de tempo própria. Podem ser editados após ter sido completado, basta um clique duplo no clipe para que ele seja apresentado para alteração, podemos fazer a ação através do menu de contexto, clicando-se com o botão direito do mouse.
Os componentes
Os componentes são símbolos especiais com comportamento, eles foram desenvolvidos inicialmente para dar suporte aos formulários, permitindo que fossem criadas interfaces de entrada de dados de uma forma facilitada. Iremos olhar alguns para entender o seu funcionamento, iremos continuar a falar um pouco mais no Actionscript.
Alguns "Espaços de Trabalho“ já apresentam a janela "Componentes", porém a clássica não.  A inclusão é feita através do menu ”Janela" – "Componentes", podendo ser colocado onde se sentir mais a vontade, iremos colocar em nossos exemplos abaixo "Biblioteca" e "Predefinições de Movimento".
O Flash apresenta componentes de interface do usuário, para utilização com Flex e para tratamento de vídeos.
A criação de uma interface deve facilitar o uso pelo navegante, a internet possui usuários de todos os tipos, alguns padrões estabelecidos aumentam o conforto deles. Vamos criar um formulário simples de cadastro para ilustramos o uso dos formulários. Iremos cadastrar os seguintes dados: nome, nascimento, email, estado e cidade.
Flex - O lado servidor
Flex é um poderoso framework de código aberto que permite que você facilmebnte construa aplicações móveis para o iOS, Android e BlackBerry  Tablet OS dispositivos, bem como aplicações tradicionais para o navegador e desktop usando o mesmo modelo de programação, ferramentas e base de código. As aplicações podem acessar os recursos do dispositivo, tais como GPS, acelerômetro, câmera e banco de dados local.
A IDE Adobe Flash Builder, que é uma customização do Eclipse IDE. Ela oferece recursos de produtividade, dispositivo de depuração e simulações de dispositivos móveis para testar em tamanhos e resoluções de tela. 
O framework possibilita integração com linguagens e tecnologias que são executados no servidor, incluindo Java, Spring, Hibernate, PHP, Ruby,. NET, Adobe ColdFusion, e alguns padrões da indústria como REST, SOAP, JSON, JMS, e AMF.
O Flex utiliza o Actionscript e o MXML, é uma linguagem declarativa baseada em XML.
Aula 9
Introdução ao Ajax
O primeiro ponto que devemos firmar é que AJAX é uma técnica, não é uma tecnologia ou uma linguagem. A técnica se utiliza de outros recursos e só é possível após a criação pela Microsoft de um componente para o Internet Explorer 5.0. A equipe que criou o Outlook Web Access para o Microsft Exchange Server 2000, criou um componente que permitia que as solicitações pudessem ser feitas pelo navegador através de um componente ActiveX chamado por programação script no navegador. O objeto veio como uma evolução do MSXML, a mesma ainda é usada para podermos navegar por objetos XML.
A técnica ficou essencialmente confinada ao Outlook Web Access do Exchange 2003 até março de 2003, quando recebeu o nome de AJAX.
Outlook Web Access
O Microsoft Outlook Web Access é a primeira aplicação Ajax desenvolvida, cliente de email com acesso ao servidor de email da Microsoft. O funcionamento Web era muito similar às versões intaladas nas máquinas.
Funcionamento do AJAX
O desenvolvimento tradicional faz com que cada página seja enviada para o navegador, XHTML e outros arquivos solicitados, podemos melhorar com o uso de cache. O uso do AJAX transforma uma página em muitas páginas, as partes da tela são atualizadas com informações, não necessitando de se enviar os arquivos e imagens que compõe o layout. A mudança dimui a quantidade de Bytes que é enviada em uma aplicação Web que o usuário precisa utilizar, aumenta a espera da primeira e melhorando a sensasção de uso pela melhora nas resposatas das próximas solicitações.
Recuperando informações e atualizando a interface
As informações são solicitadas para a função Ajax, são fornecidas as informações necessárias para que o código chame o arquivo no servidor e que atualize a parte da interface. Uma das maneiras de se realizar essa alteração na tela é o retorno de código XHTML que será atribuído a área com o uso da propriedade innerHTML, ela substitui o conteúdo do elemento pelo valor passado. A função apresentada realiza esse tipo de atribuição dentro do evento "onreadystatuschange". Faremos uso dela no exemploa seguir, quando carregaremos um arquivo contendo toda a formatação.
Construção Simples:
Vamos construir uma interface simples com informações para experimentar a função, o
evento “onload” da marcação “body” é acionado quando toda a página é carregada, só é possível acessar um elemento da página quando ele já foi interpretado pelo navegador, por isso que existe a necessidade de se usar o “onload”, podemos colocar a chamada após o elemento, forçando a sua execução depois de que a marcação faça parte da página.
Os arquivos chamados podem ser criados com qualquer linguagem ou tecnologia processada no servidor, linguagens como Java, PHP, Python, Ruby, Cold Fusion ( possui uma proposta diferente ), e tecnologias como dot Net são formas que  podemos usar para acessarmos o banco de dados e realizarmos os processamentos necessários para o sistema.
Chamada da função
<body onload=”chamaProc (“noticia1.html’, ‘coluna’, 1)”>
Camada que terá o seu conteúdo preenchido pela página solicitada.
<div id=”coluna1”></div>
Usando Dom e XML
O objetivo desse tipo de construção é que as requisições retornem apenas dados, as propriedades do objeto XMLHttpRequest, permitem que recuperemos os dados no formato XML.  O exemplo mostrado anteriormente, preenche uma área com uma página XHTML através da propriedade "innerHTML". Os exemplos que iremos ver a seguir usarão as funções que manipulam o DOM.
O objeto recuperado através da propriedade "responseXML" é do tipo XML, permitindo que usemos as funções de navegação por seus elementos e atributos, podemos varrer todos os filhos do elemento raiz, descendo pela hierarquia. Podemos localizar um elemento específico ou grupo de elementos. Usaremos um exemplo com um arquivo XML sobre peixes.
Arquivo XML
Usaremos no exemplo um arquivo XML com os dados dos peixes. Iremos andar pela estrutura com DOM e inserir elemento a elemento na camada de destino.
Envio de dados de formulário
O uso de Ajax para envio de dados de um formulário para outra página pode ser feita através do método "GET" ou "POST" da mesma forma que fazemos no modo tradicional, a grande diferença é que devemos recuperar as informações para que elas sejam enviadas para o arquivo que as receberá. A função Ajax deve ser alterada para que possibilite esse tipo de tratamento, caso você tenha percebido a função apresentada está com o método padrão estipulado.
O método "GET" envia as informações através do endereço de chamada da página, são passadas informações após o nome do arquivo. O símbolo que separa o nome do arquivo dos dados é a interrogação. Os campos de formulários são adicionados ao endereço no formato campo igual valor, os pares são separados pelo símbolo e comercial (&). O nome dado para esse conjunto de pares é "querystring". Podemos montar com programação a chamada ao arquivo com todos os dados necessários.
A construção usando o método "POST" não diferencia muito, mas os dados são enviados através do método "send" do objeto XMLHttpRequest.
Iremos mostrar as mudanças realizadas para gerar uma função de envio através de "post". A primeira alteração é que temos um parâmetro a mais para que possa ser enviada a lista de campos no padrão de uma "querystring".  A função na página que chama a que realiza a chamada assíncrona deve recuperar os campos e criar a variável com os dados.
A assinatura da função contendo o parâmetro campos.
Function chamaProcPost(pagina, destino, func, campos, mostraMsg){
O método deve ser trocado para "POST" no método "open" e devemos informar os cabeçalhos para envio de dados no método.
Usando Dom e JSON
Existem outras formas que podemos organizar as informações para envio de dados entre aplicações, uma bastante usada na Web é a JSON. O padrão JSON organiza os dados da mesma forma que criamos uma estrutura em Javascript, permitindo uma hierarquia um elemento pode ter uma coleção de filhos, da mesma forma que o XML. O tamanho do arquivo gerado é um pouco menor que se fosse usado o XML para descrever os dados.
As alterações feitas na função para recuperar dados com XML são pequenas, a primeira parte que temos que fazer é a conversão do texto retornado em um objeto Javascript, usamos a função "eval" do Javascript para executar o texto que está no texto.
O formato JSON trás a vantagem de estarmos dentro de uma estrutura Javascript, permitindo acesso mais direto aos elementos dentro da hierarquia.
jQuery e Ajax
O Framework jQuery possui vários recursos, entre eles podemos citar o ganho no uso com o Ajax e trabalho com a estrutura. Toda a complexidade de se tratar o navegador, troca de estados e evento disparado pelo objeto XMLHttpRequest ficam a cargo do framework. A simplicidade no retorno de texto com o resultado formatado é muito grande, bastando chamar uma função.
Function usandoJQuery(){
$(“#apresenta”).load(“pagina.html”);
}
Exemplo de chamada simples onde o retorno será carregado no elemento com id igual a apresenta.
 
O método "load" possui mais parâmetros opcionais que permitem um maior controle da resposta.
Sintaxe:
$(selector).load(url,data,function(response,status,xhr));
Onde:
url – endereço do arquivo
data – dados que serão enviados pelo objeto XMLHttpRequest (formato querystring)
function – pode ser criada uma função, sendo passado apenas o nome, ou criada uma função anônima em linha. A função deve ter os três parâmetros mostrados na sintaxe.
    response – contém o retorno da requisição
    status – pode conter os valores: "success", "notmodified", "error", "timeout" ou "parsererror"
    xhr – contém o objeto XMLHttpRequest
Aula 10
Microsoft e o Framework dot Net
Existem muitas ferramentas e linguagens para que tornam possível o desenvolvimento de funcionalidades em sistemas Internet. Em nossa primeira aula, destacamos a evolução, até que fosse criado a CGI e a marcação "form" com os seus campos. A evolução das linguagens, tecnologias e servidores Web, exige uma atualização constante dos profissionais.
A Microsoft possuía dois produtos para o desenvolvimento Web, o Front Page e o Visual InterDev. Eles foram substituídos com a criação do framework dot Net. Ocorreu uma demora de um ano e meio após a apresentação do framework até disponibilizar a sua versão final em 2002.
Existem outras ferramentas voltadas para a criação de sistemas Web da empresa, o WebMatrix era a solução gratuita para início na tecnologia, sendo usada para que pessoas experimentassem o seu funcionamento, o Expression Web substituiu o Front Page como construtor de páginas, tendo código de servidor ou não, o Expression Blend possui a função de ser um integrador de tecnologias Web, o Visual Web Developer é o ambiente de desenvolvimento para ASP dot Net. Iremos focar os nossos exemplos no ambiente Visual Web Developer Express, facilitando a utilização por todos por ser gratuito.
Framework dot Net
A Microsoft desenvolveu uma máquina virtual, Common Language Runtime (CLR), para que fosse executado o seu novo padrão, o dot Net. O framework foi desenvolvido para dar suporte também aos sistemas distribuídos, uma tendência que já era percebida na época de sua criação. Ele funciona como uma coleção de funcionalidades disponíveis para o desenvolvimento de aplicações. 
Características:
• Interoperabilidade.
• Independência de linguagem.
• Implantação simplificada.
• Segurança.
• Portabilidade.
O código dot Net utiliza uma forma similar ao Java, o código é compilado para um estado que intermediário chamado Bytecode.
O Framework e alguns componentes
Common Type System (CTS) 
Especificação que define todos os tipos de dados.
Commom Language Runtime (CLR)
Máquina virtual onde o código será executado.
Common Language Infrastructure (CLI)
Fornece uma plataforma para desenvolvimento e execução de aplicações dor Net.
Base Class Library (BCL)
Biblioteca fornece classes que encapsulam funções comuns, incluindo leitura e escrita de arquivos, processamento gráfico, a interação de banco de dados, manipulação de documentos XML, entre outras.
Linguagem C#
A linguagem C# é orienta a objetos e
fortemente tipada, as varáveis necessitam ser definidas e passam a possuir as características de seu tipo. O framework dot NET possui a definição dos tipos de variáveism, assim como, fornece um grande conjunto de classes para suprir as necessidades de desenvolvimento.  A sintaxe básica da linguagem e as estruturas seguem o formato da linguagem C.
Tipos de Dados
A linguagem fornece duas formas de funcionamento da variável: ela armazena um valor (uma constante é armazenada nela) ou ela armazena uma referência para um endereço de memória (local onde a informação está alocada). Pode ser feita referência ao mesmo endereço de memória por mais de uma variável, podemos ter uma variável apontando para as informações de um carro e depois fazer com que outra aponte também, a alteração dos dados poderá ser feita em qualquer uma das duas.
Criamos um objeto a partir de uma classe Carro e o armazenamos na variável carro. Atribuímos a variável carro a outra variável carroNovo, a segunda variável não armazena uma cópia, ela aponta para os dados originais, tudo que for alterado através dela será percebido através da variável carro.
Controles
Os formulários possuem campos para que a página possa enviar informações para o código que é executado no servidor Web.  Podemos usar marcações HTML de campos de formulário com o atributo "runat" contendo o valor "server" ou controles ASP.NET.  Os controles permitem que o funcionamento seja similar aos usados em programação desktop, fazendo com que os eventos disparem códigos no servidor. Existem alguns controles usados para exibição de informações. A lista a seguir mostra alguns dos controles que podemos usar.
Acesso ao banco de dados
A Microsoft atualizou o seu método de acessar banco de dados do ADO para o ADO.NET (ActiveX Data Objects .NET). Ele possui uma estrutura de objetos destinados para o acesso e manuseio de banco de dados.
Formas de acesso do ADO.NET
Espaços de Nome do ASP.NET
System.Data - (Dados do sistema) - classes fundamentais para gerenciar dados como DataSet e DataRelation.
System.Data.Common - (Dados comuns de Sistema) - classes bases que são herdadas por outras classes.
System.Data.OleDb - classes usadas para realizar conexão com o provedor OLE DB.
System.Data.SqlClient - classes para conexão com um banco de dados SQL Server via interface TDS (Tabular Data Stream)
System.Data.SqlTypes - (Tipos SQL de dados) – permite que façamos uso de dados fornecidos ou recebidos por um banco de dados relacional. Aumenta a segurança em relação aos dados trabalhados.
Criando uma conexão
Para podermos executar scripts SQL em um servidor de banco de dados, primeiramente, precisamos fazer com que um objeto se conecte ao banco de dados.  Após termos uma conexão com um banco de dados, podemos executar os scripts, acessando os objetos do banco. Para exibirmos os dados na tela, temos que recuperá-los em um objeto.
Passo 1: Conexão com o banco
Passo 1: Conexão com o banco
Existem algumas formas de nos conectarmos a um banco de dados, pode ser feita através de uma conexão ODBC previamente configurada no sistema operacional, podemos usar OLEDB que permite se configure pela programação, por exemplo.
Passo 2: Executando comandos
Passo 2: Executando comandos
Precisamos informar para um objeto de comandos o SQL que pretendemos usar. A construção da instrução SQL pode ser feita de duas formas, pode ser criado um texto com o script  concatenando-se a parte fixa com as informações recebidas da requisição HTTP, ou podemos criar um texto com caracteres de escape que indicam que existem parâmetros que precisam ser informados, sendo posteriormente substituídos pelas informações recebidas, "@".
Ex1:
command.CommandText = "INSERT INTO pessoa (nome, idade) "VALUES (" 
                                  "'" + Reques.Form["nome"] + "', "
                                      + Reques.Form["idade"] + ")";
Ex2:
command.CommandText = "INSERT INTO pessoa (nome, idade) " +
           "VALUES (@nome, @idade)";
SqlParameter paramNome = New SqlParameter("@nome", SqlDbType.Text, 0);
SqlParameter paramIdade = New SqlParameter("@idade", SqlDbType.Int, 0);
 
command.Parameters.Add(paramNome);
command.Parameters.Add(paramIdade);
 
paramNome.value = Reques.Form["nome"];
paramIdade.value = Convert.ToInt32(Reques.Form["idade"]);
 
//Realiza a configuração parâmetros com o comando.
command.Prepare();
command.ExecuteNonQuery();
Passo 3: Recuperando registros de tabela
Passo 3: Recuperando registros da tabela
Podemos recuperar o retorno da instrução SQL, a lista de registro pode ser exibida na tela. Usamos o método "ExecuteNonQuery" no exemplo anterior, ele envia o script para ser processado pelo gerenciador de banco de dados e não recebe retorno. Usaremos o método "ExecuteReader", ele retorna um objeto do tipo SqlDataReader.
//
        //string de conexão
        //
        string connectionString = @"Data Source=.\ServidorSQL;" +
                                    " Initial Catalog=Petshop;" +
                                    " Integrated Security=True;" +
                                    " Pooling=False";
 
        //
        // Variável para armazenar a consulta SQL
        //
        string query = "SELECT * FROM Peixe";
  
        //
        // Objetos para andar pelos dados
        //
        SqlDataReader reader = null;
        SqlConnection conn = null;
  
        try {
            //
            //instância da conexão
            //
            conn = new SqlConnection(connectionString);
  
            //
            //abre conexão
            //
            conn.Open();
  
            //
            // Criação do objeto comando, 
            //que recebe a query que será utilizada na operação 
            //e a conexão com o banco.
            //
            SqlCommand cmd = new SqlCommand(query, conn);
  
            //
            // Executa comando, passando para reader o retorno
            //
            reader = cmd.ExecuteReader();
  
            //
            //interage com a tabela retornada
            //
            while (reader.Read())
            {
                // Recuperando dados da tabela
                //reader["nome"].ToString() ;
                //reader["descricao"].ToString();
            }
  
            //
            // Fecha conexão com o banco
            //
            conn.Close();
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
        finally
        {
            //
            // Garante que a conexão será fechada mesmo que ocorra algum erro.
            // Não existe problema em fechar uma conexão duas vezes. 
            // O problema esta em abrir uma conexão duas vezes.
            //
            if (conn != null)
            {
                conn.Close();
            }
        }
Exemplo de Uso
Iremos fazer um exemplo usando as facilidades fornecidas pelo ambiente Visual Web Developer. O IDE nos fornece facilidades para se criar a aplicação e acessar banco de dados. O ambiente é similar ao Visual Studio que vocês tiveram contato nas disciplinas que trabalham algoritmo e estruturas de dados. Ele é muito intuitivo e de fácil aprendizado.
O ambiente fornece templates para podermos começar sistemas com estruturas padrões inclusas ou podemos começar com um projeto vazio. Além disso, podemos especificar qual a linhagem que será adotada. A linguagem não irá interferir muito o modo de desenvolvimento, pois o uso do framework dot Net irá direcionar o que será usado, a diferença fica por conta da sintaxe.
Vamos fazer uma aplicação vazia para podermos diminuir a complexidade e conseguir gerar um código funcional.
Iremos fazer
uma listagem, a aparência da listagem será simples, mas pode ser melhorada com pouco trabalho.
O primeiro passo é a criação do banco de dados. As hospedagens oferecem alguns tipos de bancos  de dados para fazer a persistência de nossos dados, muito oferecem gratuitamente o MySQL e o Firebird, mas cobram pelo uso do MS SQL Server. Usamos no nosso exemplo o pacote Easy PHP por ser um produto gratuito. Ele fornece um servidor Apache com PHP, o gerenciador de banco de dados MySQL e o front end PHP MyAdmin para MySQL.
O mo pode ser visto na aba Designer (a chave estrangeira composta não é exibida)
Conclusão
O ambiente de desenvolvimento dot Net da Microsoft facilita o desenvolvimento, diminuindo o tempo de construção de aplicações, mas ele não faz tudo sozinho e devemos nos aprimorar para tirar o máximo de proveito e criar sistemas com qualidade. O estudo de banco de dados é essencial para um melhor funcionamento dos sistemas informatizados. Quanto melhor for a sua interface, quanto menor dificuldade ela oferecer ao usuário, maior a chance de sucesso.
_1445497571/ole-[42, 4D, 8E, D3, 03, 00, 00, 00]