Java Corporativo - HTML CSS Javascript

Java Corporativo (RIAs) HTML, CSS e Javascript
Edson Koiti Kudo Yasojima
Rich Internet Application (RIA)

Oferece
interfaces ricas e novas experincias ao usurio, tanto web como desktop. Web 2.0 Animaes, Interao, Produtividade, Marketing
Vantagens:

Melhores Interfaces Equilbrio Client/Server Comunicao Assncrona (AJAX) Obrigatoriedade do uso de scripting Tempo de carregamento Novos paradigmas para arquitetura de aplicaes Deficincia em indexao de busca
Deficincias:


Tecnologias:
atualmente estas possuem a deteno de mais de 50% do mercado atual das RIAs:

Adobe Flash HTML 5 (Scridb e Youtube) Java Microsoft (Silverlight)
Fonte: http://www.statowl.com/

Alguns

exemplos:
www.templatemonster.com http://thejit.org/demos/ http://maps.google.com/
E mais milhares de outros por a...

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

Conhecimentos

desejveis:
HTML CSS Javascript (Jquery, Scriptaculous, etc.) Actionscript (Adobe) C# (Microsoft) JavaEE (Vrios frameworks de RIA para Java)
HTML
Hiper
Text Markup Language Linguagem de marcao
<a></a> <br/>
Utiliza
texto
Tags para interpretar e processar
HTML Estrutura bsica
HTML Algumas tags Importantes

<div>
- Definem e encapsulam estruturas. <table>, <tr>, <td> - Definem a construo de tabelas. <a> - Criam hiperlinks. <img> - Utilizada para carregar imagens <form> - Definem formulrios <script> e <link> - Utilizados para invocar arquivos externos como CSS e Javascript
HTML - Sintaxe
Uma
sempre inicia e se fecha dentro da mesmo O contedo da pgina sempre estar entre tags A maioria das tags permitem o uso de atributos
HTML XHTML??
XHTML
XML (eXtensible Markup Language) Mais regras Melhor padronizao (W3C) Mais consistente Possibilidade de extenso da linguagem de marcao (JSF, Jboss Seam, etc.)
XHTML Algumas Padronizaes
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 - Continuao
Cabealho
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 - Prtica
Definindo
um projeto
New > Web Project > Basic Template > Ok
HTML - Prtica
Adicionando
o ttulo <h1> e um paragrafo qualquer <p>.
HTML - Prtica
Experimente
tambm utilizar tags como <b> e <i>, negrito e itlico respectivamente
HTML - Prtica
Utilizando
a tag <a>, pode-se direcionar o usurio para outras pginas ou para sees dentro da prpria pgina.
HTML - Prtica
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 localizao da pgina.
HTML - Prtica
Outro atributo importante a <table> pra construo de tabelas. Esta tag utiliza outras duas tags <tr> e <td> para organizar as linhas e colunas.
HTML - Prtica
Formulrios
<form> so bastante utilizados em HTML para coletar dados. Dentro de cada formulrio, pode haver vrias tags <input> que sero de vrios tipos e podem ter valores distintos. Como de costume, sempre bom ter um editor que oferea auxlio de cdigo ou uma documentao HTML em mos para entender todos os inputs e atributos.
HTML - Prtica
HTML - Prtica
Os
<iframe> permitem que voc abra outras pginas dentro da sua pgina web. Alm disso ele tambm utilizado para incorporar materiais multimdia, como vdeos, jogo em flash, webservices (google maps) e etc.
HTML - Prtica
CSS - Introduo
Cascate
Style Sheets Definem padres de como elementos HTML sero mostrados ao usurio. Surgiram no HTML 4.0 como meio de resolver problemas de interface Permitem organizar estilos e estrutura de pginas web.
CSS - Organizao
A utilizao de um CSS se d por um arquivo separado ou por um bloco de comandos em parte da pgina atravs da tag <style>.
CSS - Organizao
Lembrando
que por padres de organizao, altamente recomendvel que o CSS sempre fique em um arquivo separado do arquivo HTML. Para utilizar o arquivo CSS fora do documento HTML, basta linkar na pgina HTML com a tag <link>
CSS - Sintaxe
A
sintaxe do CSS bastante simples, basicamente as so constitudas de seletores e declaraes entre chaves ({ })
Propriedade body Valor
{ background-color: red; font-size: 20px; }
Seletor
Declarao
Declarao
CSS - Sintaxe
Exemplo:
estilo.css
pagina.html
CSS - Sintaxe
O
CSS tambm permite localizar e manipular elementos pelo seu atributo id e tambm criar e atribuir classes a estes elementos utilizando o atributo class.
#id_do_elemento .nome_da_classe
Seletor
Seletor
CSS - Sintaxe
ATENO!!
No
escrever nomes de classes ou ids comeando com nmeros pelamordedeus!! O CSS, assim como o Javascript possui incopatibidade entre browsers, algumas coisas so permitidas por alguns, e outros no.
CSS - Sintaxe
Exemplo
CSS - Sintaxe
Beleza,
e id?
mas qual a diferena entre class
Ambos funcionam da mesma maneira, no entanto, por padres de boas prticas, utilizamos id em uma relao 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 {...}
1..1
<div id=quadrado>
.quadrado {...}
1..N
<div class=quadrado> <p class=quadrado> <h1 class=quadrado>
CSS - Sintaxe
possvel tambm utilizar a estrutura tag.nome_da_classe em um seletor CSS. Apenas as tags que tenham determinada classe iro sofrer as mudanas. Exemplo: div.quadrado {..}
Quem se tornar um quadrado realmente, p ou div?
CSS - Sintaxe
ATENO!!
No
coloque espao 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 vrios 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 parmetros podem ser passados atravs do nome da cor em ingls ou representao hexadecimal. Exemplo:
CSS - Background
ATENO!!
Quanto
ao uso de cores, sempre recomendvel o uso de cores seguras para web, evitando erros na renderizao 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 extenso do elemento.
Imagem inicial
CSS-Background
Para controlar a repetio de imagens, o atributo background-repeat pode ser utilizado. Podendo controlar se a repetio ir na horizontal ou vertical, ou se ela ir ou no acontecer de fato. Valores assumidos:

no-repeat: no repete a imagem repeat-x: repete apenas na horizontal repeat-y: repete apenas na vertical repeat: repete vertical e horizontal (padro)
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 posio inicial da imagem. Valores assumidos:

possvel tambm a concatenao de valores (ex: direita e acima = right top)
bottom: abaixo right: direita left: esquerda top: acima
CSS-Textos
Texto so imprescindveis na construo de pginas web. Eles so altamente customizveis no CSS e possuem vrios atributos, dentre os quais so:

color: cor do texto text alignment: alinhamento do texto text decoration: decorao do texto (sublinhado, cortado, piscando..) text transformation: todas as letras minsculas, maisculas, apenas a primeira letra maiscula. text indentation: espaamento no inicio do paragrafo em pixels.
CSS Textos
Exemplo
tudo-em-um:
CSS - Fontes
Fontes
so o tipo de forma que as letras do texto iro tomar. Fontes podem ser do tipo com serifa ou sem. Os que no tem serifa so mais fceis para leitura. Alguns atributos:

font-family: tipo da fonte (times, arial..) font-style: estilo (normal, itlico..) font-size: tamanho da fonte em pixels
CSS - Fontes
ATENO!!!
Ao
escolher sua font-family, verifique a tabela de fontes seguras para web, evitando erros de renderizao 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 caractersticas 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 so de extrema importancia na criao de layouts e posicionamento dos elementos CSS. Segue alguns:

margin: espaamento externo padding: espaamento interno border: propriedades da borda width/height: largura/altura content: contedo

Esquema

Exemplo
CSS - Outros
Existem
vrios outros elementos que possuem estados e podem ser editados via CSS. claro que para ter um melhor domnio 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 - Introduo
Esta
uma das mais populares linguagens de programao para web. Baseado no ECMAScript. Tornou-se muito adotada pois bastante leve, rpida e suportada por todos os browsers existentes mais famosos no mercado.
Javascript - Caractersticas
Dinmica
Linguagem
fracamente tipificada Paradigmas funcional e OO MUITO diferente de Java Utiliza conceitos de prototipagem
Javascript - Sintaxe
Exemplo
O
Javascript permite acessar a pgina html via um objeto chamado document. Com ele possvel acessar elementos da pgina como divs, links, etc. e alter-los de acordo com o desejado em tempo de execuo, sem precisa recarregar toda a pgina necessariamente.
Exemplo
O cdigo javascript pode ser separado da pgina HTML, em um arquivo separado com extenso .js. altamente recomendvel fazer essa separao por padres de organizao de cdigo. Para utilizar o arquivo separado basta utilizar a tag <script> para chama-lo dentro da pgina. Exemplo:
Como
no uma linguagem fortemente tipificada, o conceito de variveis muito genrico. Uma varivel tratada como uma referncia na memria e pode assumir vrias formas (at mesmo de funes).
Testem
isso:
Vai funcionar??
Entendam
funes no javascript como objetos. Cada funo, quando chamada instanciada (assim como um objeto) e passa a existir na memria, assim como variveis criadas dentro dela. Estranho n? Veja um exemplo a seguir..
Exemplo
Resultado?
O
Javascript tambm admite instanciaes de objetos (vulgo new Objeto()) atravs do uso do new que nem em Java/C#. Mas com algumas pecularidades.... Veja a seguir:
user.name e name sero iguais??
Condicionais
no possuem muita diferena com outras linguagens, veja os exemplos:
Loops
tambm no diferem muito da linguagem Java:
Basicamente
o javascript, utilizado da seguinte forma:
Cria-se uma funo Utiliza-se a funo em eventos dos componentes

onclick,
onfocus, onselect..
Ou para alterar propriedades do design.
document.getElement().innerHTML == blablabla
Alm
disso tambm utilizado para realizar chamadas AJAX (Assynchonous Javascript and XML), ou seja, acessar um servio remotamente e mostrar ao usurio sem precisar recarregar toda a pgina HTML.
Mostrar exemplo ajax
Javascript - Problemas
Linguagem
difcil de se aprender Pouca organizao em relao a linguagens atuais (Java, C#..) O grande problema de Cross-Browser!!
No pense que seu cdigo ir funcionar perfeitamente em todos os navegadores sem a devido teste! Isso chato no ?
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 prprio para fazer operaes de forma efetiva e correta na maioria dos browsers
Jquery - Instalao
Para
instalar o jquery, basta fazer o download da biblioteca e adicion-la na pgina 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 mtodos concatenados
Jquery Seletores e Eventos

Utilizando
Jquery e expresses CSS e Xpath, podemos selecionar praticamente qualquer coisa de desejamos na pgina. Basta passar dentro do objeto do Jquery. Exemplo:
$("#orderedlist").addClass("red"); $("#orderedlist > li").addClass("blue");

Se
quisermos aplicar mudanas apenas quando o usurio passar o mouse em cima do link podemos utilizar a seguinte abordagem:
$("#orderedlist li:last").hover(function() { $(this).addClass("green"); },function(){ $(this).removeClass("green"); });

Caso
a busca seja de multiplos objetos, o Jquery, tem um for implementado que otimiza nosso cdigo. Vamos tentar:
$("#orderedlist").find("li").each(function(i) { $(this).append( " ACHOU! " + i ); });

Caso
o Jquery ache mais de um elemento, ele retorna em forma de array, onde podemos selecionar como um array convencional:
$("#reset").click(function() { $("form")[0].reset(); }); O mtodo reset(), do Javascript puro e ele reseta praticamente qualquer input ou form
Este para o caso de resetar todos os forms da pgina:

$("#reset").click(function() { $("form").each(function() { this.reset(); }); }); Pergunta: por qu no estamos utilizando $(this) acima?
O Jquery tambm pode fazer buscas mais complexas como:

$("li").not(":has(ul)").css("border", "1px solid black");
$("a[name]").css("background", blue" );
$("a[href*='/content/gallery']").click(functi on() { //faa algo });
Simples, no ?

Criando
um organizador de tpicos:
$('#faq').find('dd').hide().end().find('dt'). click(function() { $(this).next().slideToggle(); });
Conseguiram interpretar o cdigo?

Buscando por tags raiz de uma tag: $("a").hover(function(){ $(this).parents("p").addClass("highligh t"); },function(){ $(this).parents("p").removeClass("high light"); });
Jquery Usando Ajax

Vamos
ao exemplo prtico!
Jquery Animando
Jquery
fornece funcionalidades para criar animaes, ainda permite que voc crie suas prprias animaes. No website do jquery alm de animaes, existem vrios outros plugins que podem ser muito teis para determinados problemas.
Jquery Animando
$("a").toggle(function(){ $(".stuff").hide('slow'); },function(){ $(".stuff").show('fast'); });
Jquery Animando
Criando uma animao, exemplo: $("a").toggle(function(){ $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow'); } ,function(){ $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow'); });
Jquery Utilizando plugins

Plugins
javascript so muito fceis de se utilizar, basta baixar e salvar plugins com a extenso .js e import-los na mesma pgina HTML do jquery utilizando a tag script. Como exemplo vamos utilizar o tablesorter plugin para organizar tabelas:
Jquery Utilizando plugins

Aps
a chamada, o cdigo do plugin j est integrado com o jquery. Basta chamar o mtodo no cdigo:
$("#large").tablesorter(); $("#large").tablesorter({ widgets: ['zebra'] });
Java Corporativo (RIAs) HTML, CSS e Javascript

Edson Koiti Kudo Yasojima

Java Corporativo - HTML CSS Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Corporativo - HTML CSS Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Java Corporativo (RIAs) HTML, CSS e Javascript

Edson Koiti Kudo Yasojima

Rich Internet Application (RIA)

Rich Internet Application (RIA)

Rich Internet Application (RIA)

Adobe Flash HTML 5 (Scridb e Youtube) Java Microsoft (Silverlight)

Rich Internet Application (RIA)

www.templatemonster.com http://thejit.org/demos/ http://maps.google.com/

E mais milhares de outros por a...

Rich Internet Application (RIA)

que se pode utilizar para criar RIAs?

Rich Internet Application (RIA)

Text Markup Language Linguagem de marcao

Tags para interpretar e processar

HTML Estrutura bsica

HTML Algumas tags Importantes

XHTML Algumas Padronizaes

Errado: <p><div><a></div></p></a> Certo: <p><div><a></a></div></p>

completa das tags XHTML

interessantes ambientes para desenvolvimento em xhtml.

Netbeans Eclipse Aptana Notepad++ Dreamweaver

New > Web Project > Basic Template > Ok

o ttulo <h1> e um paragrafo qualquer <p>.

tambm utilizar tags como <b> e <i>, negrito e itlico respectivamente

{ background-color: red; font-size: 20px; }

mas qual a diferena entre class

<div class=quadrado> <p class=quadrado> <h1 class=quadrado>

Quem se tornar um quadrado realmente, p ou div?

Certo: font-size:20px Errado: font-size:20 px

ou fundo de tela, possuem vrios sub-atributos, mais importantes:

Background-color Background-image Background-repeat Background-position

possvel tambm a concatenao de valores (ex: direita e acima = right top)

bottom: abaixo right: direita left: esquerda top: acima

CSS Atributos importantes

CSS Atributos importantes

CSS Atributos importantes

user.name e name sero iguais??

no possuem muita diferena com outras linguagens, veja os exemplos:

tambm no diferem muito da linguagem Java:

o javascript, utilizado da seguinte forma:

Cria-se uma funo Utiliza-se a funo em eventos dos componentes

Ou para alterar propriedades do design.

sintaxe do jquery se organiza de forma simples.

Jquery Seletores e Eventos

Jquery Seletores e Eventos

Jquery Seletores e Eventos

Jquery Seletores e Eventos

Jquery Seletores e Eventos

Este para o caso de resetar todos os forms da pgina:

Jquery Seletores e Eventos

O Jquery tambm pode fazer buscas mais complexas como:

Jquery Seletores e Eventos

$('#faq').find('dd').hide().end().find('dt'). click(function() { $(this).next().slideToggle(); });

Conseguiram interpretar o cdigo?

Jquery Seletores e Eventos

Jquery Usando Ajax

Jquery Utilizando plugins

Jquery Utilizando plugins

Java Corporativo (RIAs) HTML, CSS e Javascript

Vous aimerez peut-être aussi