Java Corporativo
(RIAs)
HTML, CSS e
Javascript
Rich Internet Application (RIA)
Oferece interfaces ‘ricas’ e novas
experiências ao usuário, tanto web como desktop.
Web 2.0
Animações, Interação, Produtividade,
Rich Internet Application (RIA)
Vantagens:
Melhores Interfaces Equilíbrio Client/Server
Comunicação Assíncrona (AJAX)
Deficiências:
‘Obrigatoriedade’ do uso de scripting Tempo de carregamento
Novos paradigmas para arquitetura de aplicações
Rich Internet Application (RIA)
Tecnologias: atualmente estas possuem a
detenção de mais de 50% do mercado atual das RIAs:
Adobe Flash
HTML 5 (Scridb e Youtube) Java
Microsoft (Silverlight)
Rich Internet Application (RIA)
Alguns exemplos:
www.templatemonster.com
http://thejit.org/demos/
http://maps.google.com/
Rich Internet Application (RIA)
O que se pode utilizar para criar RIAs?
Adobe – Flash/Flex
Java – Richfaces, Icefaces, Vaadim,
Primefaces, JBossSeam, JavaFx
Microsoft – Silverlight HTML 5
Google – GWT, SmartGWT.
Rich Internet Application (RIA)
Conhecimentos desejáveis:
HTML CSS
Javascript (Jquery, Scriptaculous, etc.) Actionscript (Adobe)
C# (Microsoft)
JavaEE (Vários frameworks de RIA para
HTML
Hiper Text Markup Language
Linguagem de marcação
<a></a> <br/>
Utiliza Tags para interpretar e processar
HTML – Algumas tags Importantes
<div> - Definem e ‘encapsulam’
estruturas.
<table>, <tr>, <td> - Definem a
construção de tabelas.
<a> - Criam hiperlinks.
<img> - Utilizada para carregar imagens
<form> - Definem formulários
<script> e <link> - Utilizados para invocar
HTML - Sintaxe
Uma sempre inicia e se fecha dentro da
mesmo
O conteúdo da página sempre estará
entre tags
A maioria das tags permitem o uso de
HTML – XHTML??
XHTML – XML (eXtensible Markup Language) Mais regras Melhor padronização (W3C) Mais consistente Possibilidade de extensão da linguagem
XHTML – Algumas
Padronizações
Errado: <p><div><a></div></p></a> Certo: <p><div><a></a></div></p> Errado: <HTML></HTML> Certo: <html></html> Errado: <br> Certo: <br/> Errado: <td rowspan = 3> Certo: <td rowspan = “3” ou ‘3’>
XHTML - Continuação
Cabeçalho de um documento XHTML
Lista completa das tags XHTML
XHTML - IDEs
Alguns interessantes ambientes para
desenvolvimento em xhtml. Netbeans Eclipse Aptana Notepad++ Dreamweaver
HTML - Prática
Definindo um projeto
HTML - Prática
Adicionando o título <h1> e um
HTML - Prática
Experimente também utilizar tags como
<b> e <i>, negrito e itálico respectivamente
HTML - Prática
Utilizando a tag <a>, pode-se direcionar o
usuário para outras páginas ou para seções dentro da própria página.
HTML - Prática
Para carregar imagens utiliza-se a tag <img>,
passando atributos da url (caminho) da imagem e opcionalmente o alt (texto complementar).
Lembre de passar o caminho da imagem de acordo com a localização da página.
HTML - Prática
Outro atributo importante é a <table> pra construção de tabelas. Esta tag utiliza outras duas tags <tr> e <td> para organizar as linhas e colunas.
HTML - Prática
Formulários <form> são bastante utilizados
em HTML para coletar dados.
Dentro de cada formulário, pode haver
várias tags <input> que serão de vários tipos e podem ter valores distintos.
Como de costume, é sempre bom ter um
editor que ofereça auxílio de código ou uma documentação HTML em mãos para entender todos os inputs e atributos.
HTML - Prática
Os <iframe> permitem que você abra
outras páginas dentro da sua página web.
Além disso ele também é utilizado para
incorporar materiais multimídia, como vídeos, jogo em flash, webservices
CSS - Introdução
Cascate Style Sheets
Definem padrões de como elementos
HTML serão mostrados ao usuário.
Surgiram no HTML 4.0 como meio de
resolver problemas de interface
Permitem organizar estilos e estrutura de
CSS - Organização
A utilização de um CSS se dá por um arquivo
separado ou por um bloco de comandos em parte da página através da tag <style>.
CSS - Organização
Lembrando que por padrões de
organização, é altamente recomendável que o CSS sempre fique em um arquivo separado do arquivo HTML.
Para utilizar o arquivo CSS fora do
documento HTML, basta ‘linkar’ na página HTML com a tag <link>
CSS - Sintaxe
A sintaxe do CSS é bastante simples,
basicamente as são constituídas de
seletores e declarações entre chaves ({ })
body { background-color: red; font-size: 20px; } Seletor Declaração Declaração
CSS - Sintaxe
Exemplo: estilo.css
CSS - Sintaxe
O CSS também permite localizar e
manipular elementos pelo seu atributo ‘id’ e também criar e atribuir classes a estes elementos utilizando o atributo ‘class’.
#id_do_elemento Seletor
.nome_da_classe Seletor
CSS - Sintaxe
ATENÇÃO!!
Não escrever nomes de classes ou ids
começando com números pelamordedeus!!
O CSS, assim como o Javascript possui
incopatibidade entre browsers, algumas coisas são permitidas por alguns, e outros não.
CSS - Sintaxe
CSS - Sintaxe
Beleza, mas qual a diferença entre ‘class’
e ‘id’?
Ambos funcionam da mesma maneira, no
entanto, por padrões de boas práticas, utilizamos ‘id’ em uma relação de 1-1
enquanto que no ‘class’ utilizamos de 1-N, ou seja, uma classe ‘X’ no CSS pode alterar muitos elementos que tenham o atributo ‘class = X’
CSS - Sintaxe
#quadrado {...} .quadrado {...} <div id=‘quadrado’> <div class=‘quadrado’> <p class=‘quadrado’> <h1 class=‘quadrado’> 1..1 1..NCSS - Sintaxe
É possível também utilizar a estrutura
tag.nome_da_classe em um seletor CSS.
Apenas as tags que tenham determinada classe irão sofrer as mudanças.
Exemplo: div.quadrado {..}
Quem se tornará um quadrado realmente, ‘p’ ou ‘div’?
CSS - Sintaxe
ATENÇÃO!!
Não coloque espaço em valores que
precisem especificar a unidade. Incompatibilidade de Browsers...
Exemplo:
Certo: font-size:20px
CSS - Background
Backgrounds ou fundo de tela, possuem
vários sub-atributos, mais importantes:
Background-color Background-image Background-repeat Background-position
CSS - Background
Background-color, permite adicionar uma
cor ao fundo de tela de um elemento. Os parâmetros podem ser passados através do nome da cor em inglês ou
representação hexadecimal.
CSS - Background
ATENÇÃO!!
Quanto ao uso de cores, sempre é
recomendável o uso de cores seguras para web, evitando erros na
‘renderização’ de alguns browsers.
Lista de cores seguras:
CSS - Background
Background-image: adiciona uma
imagem como fundo de um elemento. É representada por uma ‘url’ onde indica o caminho da imagem local ou remoto.
CSS-Background
Caso a imagem seja menor que a área
do elemento, ela irá se repetir até
preencher toda a extensão do elemento.
CSS-Background
Para controlar a repetição de imagens, o
atributo background-repeat pode ser
utilizado. Podendo controlar se a repetição irá na horizontal ou vertical, ou se ela irá ou não acontecer de fato.
Valores assumidos:
no-repeat: não repete a imagem
repeat-x: repete apenas na horizontal repeat-y: repete apenas na vertical
CSS-Background
Exemplo
no-repeat:
repeat-x:
CSS-Background
Caso haja, a necessidade de posicionar o
background, pode-se usar o atributo
background-position, podendo indicar a posição inicial da imagem.
Valores assumidos:
bottom: abaixo right: direita
left: esquerda top: acima
É possível também a concatenação de
CSS-Textos
Texto são imprescindíveis na construção de
páginas web. Eles são altamente
customizáveis no CSS e possuem vários atributos, dentre os quais são:
color: cor do texto
text alignment: alinhamento do texto text decoration: decoração do texto
(sublinhado, cortado, piscando..)
text transformation: todas as letras minúsculas, maiúsculas, apenas a primeira letra maiúscula. text indentation: espaçamento no inicio do
CSS Textos
CSS - Fontes
Fontes são o tipo de forma que as letras
do texto irão tomar. Fontes podem ser do tipo com serifa ou sem. Os que não tem serifa são mais fáceis para leitura.
Alguns atributos:
font-family: tipo da fonte (times, arial..) font-style: estilo (normal, itálico..)
CSS - Fontes
ATENÇÃO!!!
Ao escolher sua font-family, verifique a
tabela de fontes seguras para web, evitando erros de renderização entre browsers.
Tabelas de fontes seguras:
CSS - Fontes
CSS - Links
Links possuem algumas características que
indicam quando você já visitou o link,
quando o mouse ‘passa por cima’, quando está ativo etc. É possivel customizar esses estado apenas mudando o seletor de um link:
a:link {..} – Link normal
a:visited {..} – Link visitado
a:hover {..} – Link com o mouse ‘em cima’ a:active {..} – Link ativo
CSS – Atributos importantes
Existem tambem outros atributos bastante
importantes no uso do CSS. Eles são de
extrema importancia na criação de layouts e posicionamento dos elementos CSS. Segue alguns:
margin: espaçamento externo padding: espaçamento interno border: propriedades da borda width/height: largura/altura
CSS – Atributos importantes
CSS – Atributos importantes
CSS - Outros
Existem vários outros elementos que
possuem estados e podem ser editados via CSS. É claro que para ter um melhor domínio é fazendo uso de ferramentas que auxiliem a escrita de folhas de estilo. Muitas das IDEs já possuem auxilio ao CSS, cabe a cada um explorar mais estes
Javascript - Introdução
Esta é uma das mais populares
linguagens de programação para web. Baseado no ECMAScript. Tornou-se muito adotada pois é bastante leve, rápida e é suportada por todos os browsers
Javascript - Características
Dinâmica
Linguagem fracamente tipificada Paradigmas funcional e OO
MUITO diferente de Java
Javascript - Sintaxe
Javascript - Sintaxe
O Javascript permite acessar a página
html via um objeto chamado document. Com ele é possível acessar elementos da página como divs, links, etc. e alterá-los de acordo com o desejado em tempo de execução, sem precisa recarregar toda a página necessariamente.
Javascript - Sintaxe
Javascript - Sintaxe
O código javascript pode ser separado da página HTML, em um arquivo separado com extensão ‘.js’. É altamente recomendável fazer essa separação por padrões de organização de código.
Para utilizar o arquivo separado basta utilizar a tag <script> para ‘chama-lo’ dentro da página.
Javascript - Sintaxe
Como não é uma linguagem fortemente
tipificada, o conceito de variáveis é
muito genérico. Uma variável é tratada como uma referência na memória e
pode assumir várias formas (até mesmo de funções).
Javascript - Sintaxe
Testem isso:
Javascript - Sintaxe
Entendam funções no javascript como
objetos. Cada função, quando chamada é instanciada (assim como um objeto) e passa a existir na memória, assim como variáveis criadas dentro dela. Estranho né?
Javascript - Sintaxe
Exemplo
Javascript - Sintaxe
O Javascript também admite
‘instanciações’ de objetos (vulgo ‘new Objeto()’) através do uso do ‘new’ que nem em Java/C#. Mas com algumas pecularidades....
Javascript - Sintaxe
Javascript - Sintaxe
Condicionais não possuem muita
diferença com outras linguagens, veja os exemplos:
Javascript - Sintaxe
Loops também não diferem muito da
Javascript - Sintaxe
Basicamente o javascript, é utilizado da
seguinte forma:
Cria-se uma função
Utiliza-se a função em eventos dos
componentes
onclick, onfocus, onselect..
Ou para alterar propriedades do design.
Javascript - Sintaxe
Além disso é também utilizado para
realizar chamadas AJAX (Assynchonous Javascript and XML), ou seja, acessar um serviço remotamente e mostrar ao
usuário sem precisar recarregar toda a página HTML.
Javascript - Sintaxe
Javascript - Problemas
Linguagem ‘difícil’ de se aprender Pouca organização em relação a
linguagens atuais (Java, C#..)
O grande problema de Cross-Browser!!
Não pense que seu código irá funcionar
perfeitamente em todos os navegadores sem a devido teste! Isso é chato não é?
Javascript - JQuery
Jquery é uma das mais famosas e
utilizadas bibliotecas Javascript criadas inicialmente por John Resig.
Simplifica a escrita e resolve a maioria dos
problemas cross-browser
Utiliza objeto próprio para fazer
operações de forma efetiva e correta na maioria dos browsers
Jquery - Instalação
Para ‘instalar’ o jquery, basta fazer o
download da biblioteca e adicioná-la na página web com a tag <script>
Jquery - Sintaxe
A sintaxe do jquery se organiza de forma
simples.
$(“div”).addClass(“meuCSS”).show(“slow”);
Jquery – Seletores e Eventos
Utilizando Jquery e expressões CSS e
Xpath, podemos selecionar praticamente qualquer coisa de desejamos na página. Basta passar dentro do objeto do Jquery.
Exemplo:
$ ( " # o r d e r e d l i s t " ) . a d d C l a s s ( " r e d " ) ;
Jquery – Seletores e Eventos
Se quisermos aplicar mudanças apenas
quando o usuário passar o mouse em cima do link podemos utilizar a seguinte abordagem: $ ( " # o r d e r e d l i s t l i : l a s t " ) .h o v e r( f u n c t i o n ( ) { $ ( t h i s ) . a d d C l a s s ( " g r e e n " ) ; } , f u n c t i o n ( ) { $ ( t h i s ) . r e m o v e C l a s s ( " g r e e n " ) ; } ) ;
Jquery – Seletores e Eventos
Caso a busca seja de multiplos objetos, o
Jquery, tem um ‘for’ implementado que otimiza nosso código. Vamos tentar:
$ ( " # o r d e r e d l i s t " ) . f i n d ( " l i " ) . e a c h ( f u n c t i o n ( i ) { $ ( t h i s ) . a p p e n d ( " A C H O U ! " + i ) ;
Jquery – Seletores e Eventos
Caso o Jquery ache mais de um
elemento, ele retorna em forma de array, onde podemos selecionar como um
array convencional:
$ ( " # r e s e t " ) . c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ) [ 0 ] . r e s e t ( ) ;
} ) ;
O método reset(), é do Javascript puro e ele reseta praticamente qualquer input ou form
Jquery – Seletores e Eventos
Este é para o caso de resetar todos os forms
da página: $ ( " # r e s e t " ) . c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ) . e a c h ( f u n c t i o n ( ) { t h i s . r e s e t ( ) ; } ) ; } ) ;
Pergunta: por quê não estamos utilizando $(this)
Jquery – Seletores e Eventos
O Jquery também pode fazer buscas mais
complexas como: $ ( " l i " ) . n o t ( " : h a s ( u l ) " ) . c s s ( " b o r d e r " , " 1 p x s o l i d b l a c k " ) ; $ ( " a [ n a m e ] " ) . c s s ( " b a c k g r o u n d " , “ b l u e " ) ; $ ( " a [ h r e f* =' / c o n t e n t / g a l l e r y ' ] " ) . c l i c k ( f u n c t i o n ( ) { / / f a ç a a l g o } ) ; Simples, não é?
Jquery – Seletores e Eventos
Criando um organizador de tópicos:
$ ( ' # f a q ' ) . f i n d ( ' d d ' ) . h i d e ( ) . e n d ( ) . f i n d ( ' d t ' ) . c l i c k ( f u n c t i o n ( ) {
$ ( t h i s ) . n e x t ( ) . s l i d e T o g g l e ( ) ; } ) ;
Jquery – Seletores e Eventos
Buscando por tags raiz de uma tag: $ ( " a " ) . h o v e r ( f u n c t i o n ( ) { $ ( t h i s ) . p a r e n t s ( " p " ) . a d d C l a s s ( " h i g h l i g h t " ) ; } , f u n c t i o n ( ) { $ ( t h i s ) . p a r e n t s ( " p " ) . r e m o v e C l a s s ( " h i g h l i g h t " ) ; } ) ;
Jquery – Usando Ajax
Jquery – Animando
Jquery fornece funcionalidades para criar
animações, ainda permite que você crie suas próprias animações.
No website do jquery além de
animações, existem vários outros plugins que podem ser muito úteis para
Jquery – Animando
$ ( " a " ) . t o g g l e ( f u n c t i o n ( ) { $ ( " . s t u f f " ) . h i d e ( ' s l o w ' ) ; } , f u n c t i o n ( ) { $ ( " . s t u f f " ) . s h o w ( ' f a s t ' ) ; } ) ;Jquery – Animando
Criando uma animação, exemplo: $ ( " a " ) . t o g g l e ( f u n c t i o n ( ) { $ ( " . s t u f f " ) . a n i m a t e ( { h e i g h t : ' h i d e ' , o p a c i t y : ' h i d e ' } , ' s l o w ' ) ; } , f u n c t i o n ( ) { $ ( " . s t u f f " ) . a n i m a t e ( { h e i g h t : ' s h o w ' , o p a c i t y : ' s h o w ' } , ' s l o w ' ) ; } ) ;
Jquery – Utilizando plugins
Plugins javascript são muito fáceis de se
utilizar, basta baixar e salvar plugins com a extensão .js e importá-los na mesma página HTML do jquery utilizando a tag script.
Como exemplo vamos utilizar o
Jquery – Utilizando plugins
Após a chamada, o código do plugin já
está integrado com o jquery. Basta chamar o método no código:
$ ( " # l a r g e " ) . t a b l e s o r t e r ( ) ; $ ( " # l a r g e " ) . t a b l e s o r t e r ( {
w i d g e t s : [ ' z e b r a ' ] } ) ;
