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

experiências ao usuário, tanto web como

desktop.

Web 2.0

Animações, Interação, Produtividade,

Marketing

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

Tecnologias: atualmente estas possuem a detenção de mais de 50% do mercado atual das RIAs:

Adobe Flash

HTML 5 (Scridb e Youtube)

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 desejáveis:

Javascript (Jquery, Scriptaculous, etc.)

Actionscript (Adobe)

C# (Microsoft)

JavaEE (Vários frameworks de RIA para

Hiper Text Markup Language

Linguagem de marcação

<a></a>

Utiliza Tags para interpretar e processar

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

HTML - Sintaxe

Uma sempre inicia e se fecha dentro da

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

Os <iframe> permitem que você abra

outras páginas dentro da sua página

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

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

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

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

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.

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:

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).

Testem isso:

Vai funcionar??

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

Veja um exemplo a seguir..

Exemplo

Resultado?

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:

user.name e name serão iguais??

Condicionais não possuem muita

diferença com outras linguagens, veja os

exemplos:

Loops também não diferem muito da

linguagem Java:

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”

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.

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 " ) ;

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 " ) ;

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 ) ;

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

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?

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 é?

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?

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

java corporativo - html css javascript

Documents

html,xml,javascript n css

html css javascript basics

html css javascript php

html, css & javascript teilmenge - gibmbh.de · html, css &...

html,css,javascript in iphone

html, css e javascript -...

4. html css javascript basics

o client (html / css / javascript )

javascript +css

html css and javascript

css i javascript

html javascript and css

css js css javascript components

css & javascript

caelum html-css-javascript-php

html, javascript, xhtml & css

advanced css and javascript

html, css y javascript

1.html/css/javascript 先睹为快 2.html 3.css 4.javascript

html,javascript & css