EDO0417_16

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET RICA - EDO0417
Semana Aula: 16
Revisão e Projeto
Tema
Revisão e Projeto
Palavras-chave
Objetivos
Revisar os principais conceitos.
Aplicar os conceitos aprendidos durante as aulas.
Desenvolver um site utilizando os recursos e tecnologias que dão suporte a internet rica
Estrutura de Conteúdo
WEB 2.0
 
Web 2.0 é a revolução nos negócios da indústria da informática causada pela 
mudança para a internet como plataforma, e uma tentativa de entender as regras de 
sucesso dessa nova plataforma.
 
Características da Web 2.0
 
Nas conferencias WEB 2.0, os seguintes princípios foram destacados como 
características fundamentais:
 
 1. Web 2.0 usa a rede como uma plataforma.
 2. Usuário recebe, manipula e controlados os dados no site.
 3. 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.
 4. Uma interface rica, interativa e amigável, baseado em Ajax ou estruturas 
similares.
 5. Modelos de negócios enxutos facilitados pelo gerenciamento de conteúdos e 
serviços.
 6. Fim do Ciclo de software ( versão beta ) 
 7. Alguns aspectos de rede social.
 8. Algumas interfaces gráficas, como gradientes e cantos arredondados (ausente 
na chamada era Web 1.0).
 
 
 
 
RIA é a abreviação de Rich Internet Applications ou Aplicações Ricas para Internet. 
É um conceito inovador no modo de pensar e desenvolver na web. Aplicações RIA, 
unem a funcionalidade dos softwares para desktop com o extenso alcance e 
facilidades econômicas de aplicativos para internet, o que proporciona um novo nível 
de experiências para usuários e desenvolvedores.
Tipicamente uma aplicação RIA transfere todo o processamento da interface para 
o navegador da internet, porém mantém a maior parte dos dados no servidor de 
aplicação (como por exemplo, o estado do programa, dados do banco). 
 
O termo RIA foi usado pela primeira vez em 2001 pela Macromedia (hoje Adobe 
Systems).
A principal ferramenta para o desenvolvimento de RIA é o flash, porém o flash por si 
só não é capaz consultar bases de dados ou fazer qualquer operação no servidor sem 
o auxílio de algum recurso externo, ou seja, tecnologia Remoting. 
 
 
Características de internet rica 
 
Experiência dinâmica para o usuário
 
Um desenvolvimento rápido da aplicação
 
Disponibilização dirigida a padrões para qualquer lugar
 
 
XML
 
XML é o nome abreviado de Extensible Markup Language.
A XML foi concebida como um meio de recuperar o poder e a flexibilidade do SGML 
sem a sua complexidade. Apesar de uma forma restrita de SGML, preserva a maior 
parte do poder e da riqueza da SGML, e ainda mantém todas as características são 
comumente utilizadas.
http://pt.wikipedia.org/wiki/Interface_do_utilizador
http://pt.wikipedia.org/wiki/Navegador
http://pt.wikipedia.org/wiki/Servidor_de_aplica%C3%A7%C3%A3o
http://pt.wikipedia.org/wiki/Servidor_de_aplica%C3%A7%C3%A3o
 
XHTML
 
 O XHTML (eXtensible HyperText Markup Language que é traduzido para 
Linguagem Extensível de Marcação para Hipertexto) é uma reformulação da 
linguagem HTML (Hypertext Markup Language) baseada na XML (Extensible Markup 
Language), 
Em termos de sintaxe, a XHTML não é tão tolerante quanto HTML, isso porque o 
XHTML utiliza as rígidas regras do XML para realizar marcações em um documento.O 
XHTML é uma Recomendação do W3C, isto significa que se trata de uma linguagem 
estável, oficialmente recomendada.
 
DOCTYPE
 
A Definição do tipo de documento (Document Type Definitions DTD) especifica 
qual é a sintaxe SGML usada no documento.
A DTD é usada pelas aplicações SGML (tais como HTML ) para identificar as regras 
que se aplicam a linguagem de marcação usada no documento bem como o conjunto 
de elementos e entidades válidas naquela linguagem. Assim uma DTD para um 
documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de 
marcação XHTML.
O DOCTYPE deve ser sempre a primeira declaração em um documento web.
 
São três os tipos de DOCTYPE para XHTML:
 
XHTML Transitional
XHTML Frameset
XHTML Strict
 
Diferenças entre XHTML e HTML
As principais diferenças entre as duas linguagens de marcação são que em XHTML:
¦ Documentos devem ser bem-formados.
¦ Todas as tags devem ser escritas com letras minúsculas.
¦ Tags devem estar convenientemente aninhadas.
¦ Uso de tags de fechamento é obrigatório.
¦ Elelmentos vazios devem ser fechados
¦ Diferenças na sintaxe dos atributos
 
 
CSS
 
CSS é uma linguagem para estilos que define a forma como os documentos HTML serão 
apresentados. 
Por exemplo, CSS controla fontes, cores, imagens de fundo, linhas, margens, alturas, 
larguras, posicionamentos e muito mais.
 
CSS é suportado por todos os navegadores atuais.
 
 
Quais são os benefícios do uso de CSS?
 
Os benefícios concretos do uso de CSS incluem:
 
 * Controle do layout de vários documentos a partir de uma folha de estilos;
 * Maior precisão no controle do layout;
 * Aplicação de diferentes layouts para servir diferentes mídias (tela, celular, 
impressora, etc.);
 * Emprego de técnicas avançadas de desenvolvimento.
 
Vinculando folhas de estilo a documentos
 
Os três tipos de vinculação de folhas de estilo
 
 1. Inline; 
 2. Incorporadas;
 3. Importadas ou Externa.
 
Exemplo de estilo inline 
 
<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
Exemplo de estilo interno ou incorporado:
 
<head>
...........
<style type="text/css">
<!--
body {
background: #000000; 
url("imagens/minhaimagem.gif");
}
p {
margin-left: 20px; 
}
-->
</style>
...........
</head>
 
 
Sintaxe geral para lincar uma folha de estilo:
 
<head>
...........
<link rel="stylesheet" type="text/css" href="meu_estilo.css">
..........
</head>
 
 
A regra CSS e sua sintaxe
 
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será 
aplicado estilo a um ou mais elementos HTML. 
 
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: 
 
um seletor, uma propriedade e um valor
 
 
seletor { propriedade: valor; }
 
 
O seletor classe
 
Elemento HTML .nome 
 
elemento HTML.minhaclasse { 
 propriedade: valor;
}
 
 
O seletor ID
 
. Uma ID só pode ser aplicada a UM elemento HTML. Para casos em que haja 
necessidade de mais de um elemento com a mesma identificação usamos o atributo class. 
 
O seletor ID segue a seguinte sintaxe: 
 
Símbolo # seguido do nome que você desejar
 
Exemplo:
 
#minhaID {
propriedade: valor;
 }
 
 
JavaScript
JavaScript é uma linguagem de script orientada a objetos, utilizada para desenvolver aplicações 
cliente para internet. Ela foi criada pela SUN Microsystem inc. em parceria com a Netscape, O 
sucesso dessa parceria é devido, principalmente, a necessidade de um browser inteligente e uma 
linguagem de programação distribuída e mais acessível a programadores iniciantes. 
 
Estrutura de decisão
Comando if
 
if (condição){ 
Bloco de comandos verdade; 
} 
else{ 
Bloco de comandos falso; 
} 
Comando case 
 
switch (variável){ 
case 'valor 1': {
bloco de comandos; 
ƒ break;
} 
case 'valor2: {
bloco de comandos; 
ƒ break;} 
default:{ 
comando alternativo;
} 
} 
Estruturas de Repetição
Estrutura for
for (início;condição;incremento) { 
comandos 
} 
Estrutura for in
for( variável no objeto)
{
bloco de comandos; 
} 
 
Estrutura while 
while (variável<=valor)
{
bloco de comandos; 
} 
 
Estrutura do ... while 
do
{
bloco de comandos; 
}
while (variável<=valor); 
 
FUNÇÕES 
Funções em JavaScript nada mais são que uma rotina JavaScript que possui um conjunto de instruções à 
serem executadas. Sua sintaxe compõem-se dos seguintes parâmetros: 
function nomeFunção(argumentos) { 
Comandos 
} 
Eventos
Eventos são ações que podem ser detectadas pelo JavaScript.
Através do JavaScript nós temos a habilidade de criar paginas dinâmicas. Todos os Elementos de uma 
página web possuieventos que podem ser disparados através do JavaScript. Por exemplo nós podemos 
utilizar o evento onClick do elemento button para indicar que uma função irá rodar quando um usuário 
clicar no botão. Os eventos devem ser definidos nas tags HTML. Os eventos normalmente são usados em 
combinação com funções, e as funções não serão executadas antes de ocorrerem os eventos. 
onLoad e onUnload
onFocus, onBlur e onChange
onMouseOver and onMouseOut
DOM
DOM é o acrônimo para Document Object Model - Modelo de Objetos de Documento.
O Modelo de Objetos de Documento é uma interface independente de plataforma e de linguagem 
que permitirá que programas scripts acessem e atualizem dinamicamente o conteúdo, estrutura e 
estilo de documentos. O documento poderá ter um processamento adicional e os resultados deste 
processamento também poderam ser incorporados à página apresentada.
 
Propriedades de elementos DOM
 
childNodes - Retorna uma matriz dos filhos do elemento atual
 firstChild - Retorna o primeiro filho direto do elemento atual
 lastChild - Retorna o último filho do elemento atual
 nextSibling - Retorna o elemento imediatamente posterior ao elemento atual
 nodeValue - Representa o valor do elemento atual
 parentNode - Retorna o pai do elemento atual
 
Métodos de elementos DOM 
Acesso a Elementos Específicos Para cada nó, o DOM define três métodos que podem ser usados 
para encontrar mais facilmente elementos específicos:
 getElementsByTagName()
 getElementsByName()
 getElementById()
JQuery
JQuery é uma biblioteca (ou framework) “projetado para mudar sua maneira de escrever 
javascript“; É uma biblioteca JavaScript rápida e concisa que simplifica manipulação de eventos, 
animação e interações
 
 
Funcionalidades do jQuery
 
Modificar a aparência de uma página web.
Alterar o conteúdo de um documento.
Responder a interação do usuário.
Animações
Simplificar tarefas comuns de JavaScript. 
 
 
Download jQuery
A referência a biblioteca jQuery pode ser incluída em uma página web usando a seguinte marcação:
<script tipo="text / javascript" src="jquery.js"> </script>
Onde src e o endereço do arquivo jquery.js.
 
Componentes da JQuery UI.
 
Os componentes da JQuery UI são divididos em três módulos: interações, widgets e efeitos.
 
Interações - adicionam comportamentos básicos a qualquer elemento, como arrastar, expandir, 
selecionar, etc.
 
Widgets - oferece os principais recursos de navegação utilizados, como abas, caixas de diálogo, 
menu expansivo...
 
Efeitos – Elementos de animação, a UI 
Trás uma série de funcionalidades para tornar websites mais profissionais, interativos e completos.
"interações são ótimas quando se deseja desenvolver interfaces mais amigáveis para aplicações 
mais complexas.
 
Definiria Widgets como responsáveis pelo enriquecimento visual de um projeto. efeitos são úteis 
para animar o site sem a necessidade do flash, fazer um elemento sumir, se mover, mudar de estilo 
são algumas das funcionalidades deste módulo.
 
Ajax 
 
Aplicações Ajax separam a interação com o usuário no lado do cliente e a comunicação com o servidor, e 
as executam em paralelo, o que reduz os atrasos do processamento no lado do servidor, normalmente 
experimentados pelo usuário. 
 
O nome AJAX foi idealizado por Jesse James Garrett, que definiu o objeto XMLHttpRequest 
como um componente criado juntamente com o Internet Explorer 5, da Microsoft. 
Foi incorporado aos outros navegadores posteriormente.
 
Vantagens do AJAX
 
Redução de banda 
Rapidez
Interatividade
Validação de dados
Interfaces sofisticadas.
 
Funcionalidades do Ajax
 
XMLHttpRequest
 
Objeto JavaScript Criado dentro de uma função JavaScript Adotado pelos modernos navegadores
Mozilla, Firefox, Safari, e Opera Comunicação com o servidor via padrão HTTP 
GET/POST Objeto XMLHttpRequest trabalha em background isto não interrompe a operação de usuário.
 
Principais notações e frameworks para AJAX
 
 
? JSON (JavaScript Object Notation)
http://www.json.org/
 
? Dojo Toolkit 
http://dojotoolkit.org/
 
? DWR (Direct Web Remoting)
http://getahead.ltd.uk/dwr/
 
? GWT (Google Web Toolkit)
code.google.com/webtoolkit/ 
 
? Integração de JavaServer Faces (JSF) e AJAX
https://ajax4jsf.dev.java.net/nonav/ajax/ajax-jsf/ 
 
 
 
 
 
 
 
Estratégias de Aprendizagem
Indicação de Leitura Específica
Aplicação: articulação teoria e prática
Considerações Adicionais
https://ajax4jsf.dev.java.net/nonav/ajax/ajax%C2%ADjsf/