java corporativo - html css javascript
TRANSCRIPT
Java Corporativo
(RIAs)
HTML, CSS e
Javascript
Edson Koiti Kudo Yasojima
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,
Marketing
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
Deficiência em indexação de busca
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)
Fonte: http://www.statowl.com/
Rich Internet Application (RIA)
Alguns exemplos:
www.templatemonster.com
http://thejit.org/demos/
http://maps.google.com/
E mais milhares de outros por aí...
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.
Jquery, DojoToolkit, Scriptaculous
Rich Internet Application (RIA)
Conhecimentos desejáveis:
HTML
CSS
Javascript (Jquery, Scriptaculous, etc.)
Actionscript (Adobe)
C# (Microsoft)
JavaEE (Vários frameworks de RIA para
Java)
HTML
Hiper Text Markup Language
Linguagem de marcação
<a></a>
<br/>
Utiliza Tags para interpretar e processar
texto
HTML – Estrutura básica
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 arquivos externos como CSS e Javascript
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
atributos
HTML – XHTML??
XHTML – XML (eXtensible Markup
Language)
Mais regras
Melhor padronização (W3C)
Mais consistente
Possibilidade de extensão da linguagem
de marcação (JSF, Jboss Seam, etc.)
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
http://www.w3schools.com/tags/default.asp
XHTML - IDEs
Alguns interessantes ambientes para
desenvolvimento em xhtml.
Netbeans
Eclipse
Aptana
Notepad++
Dreamweaver
HTML - Prática
Definindo um projeto
New > Web Project > Basic Template > Ok
HTML - Prática
Adicionando o título <h1> e um
paragrafo qualquer <p>.
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
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
(google maps) e etc.
HTML - Prática
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
páginas web.
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
Propriedade Valor
CSS - Sintaxe Exemplo:
estilo.css
pagina.html
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
Exemplo
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..N
CSS - 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
Errado: font-size:20 px
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.
Exemplo:
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: http://erikasarti.net/html/tabela-cores-seguras-web-safe/
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
CSS-Background
Caso a imagem seja menor que a área
do elemento, ela irá se repetir até
preencher toda a extensão do elemento.
Imagem inicial
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
repeat: repete vertical e horizontal (padrão)
CSS-Background
Exemplo
no-repeat:
repeat-x:
repeat-y:
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 valores (ex: direita e acima = right top)
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 paragrafo em pixels.
CSS Textos
Exemplo tudo-em-um:
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..)
font-size: tamanho da fonte em pixels
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: http://www.fonttester.com/help/list_of_web_safe_fonts.html
CSS - Fontes
Exemplo completo:
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
content: conteúdo
CSS – Atributos importantes
Esquema
CSS – Atributos importantes
Exemplo
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
elementos.
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
existentes mais famosos no mercado.
Javascript - Características
Dinâmica
Linguagem fracamente tipificada
Paradigmas funcional e OO
MUITO diferente de Java
Utiliza conceitos de prototipagem
Javascript - Sintaxe
Exemplo
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
Exemplo
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.
Exemplo:
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:
Vai funcionar??
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é?
Veja um exemplo a seguir..
Javascript - Sintaxe
Exemplo
Resultado?
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....
Veja a seguir:
Javascript - Sintaxe
user.name e name serão iguais??
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
linguagem Java:
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.
document.getElement().innerHTML == “blablabla”
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
Mostrar exemplo ajax
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”);
Objeto JQuery Chamada de métodos concatenados
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 " ) ;
$ ( " # o r d e r e d l i s t > l i " ) . a d d C l a s s ( " b l u e " ) ;
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:
$( "# rese t " ) .c l ick( func t ion( ) { $ ( " fo rm" ) [0 ] . rese 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) acima?
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 io 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 ( ) ;
} ) ;
Conseguiram interpretar o código?
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
Vamos ao exemplo prático!
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
determinados problemas.
Jquery – Animando
$("a") . toggle( funct ion() {
$ ( " . s tu f f " ) .h ide( ' s low' ) ;
} , funct ion() {
$ ( " . s tu f f " ) . show( ' fas 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
tablesorter plugin para organizar tabelas:
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 ' ]
} ) ;
Java Corporativo
(RIAs)
HTML, CSS e
Javascript
Edson Koiti Kudo Yasojima