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 ({ }) Propriedade Valor body { background-color: red; font-size: 20px; } Seletor Declaração Declaração
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.nome_da_classe Seletor 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 {...} 1..1 <div id= quadrado >.quadrado {...} 1..N <div class= quadrado > <p class= quadrado > <h1 class= 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
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: $("#orderedlist").addclass("red"); $("#orderedlist > l i " ). addclass("blue");
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: $("#orderedlist li:last").hover(function() { $(this).addclass("green"); },function(){ $(this).r e m o v e C l a s s ("green"); });
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) acima?
Jquery Seletores e Eventos O Jquery também pode fazer buscas mais complexas como: $ ( " l i " ). n o t ( " : h a s ( ul) " ). 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 on( ) { //f a ç a a l g o } ) ; Simples, não é?
Jquery Seletores e Eventos Criando um organizador de tópicos: $('#faq').find('dd').hide().end().find('dt'). click(function() { }); $(this).next().slidetoggle(); Conseguiram interpretar o código?
Jquery Seletores e Eventos 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 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(function(){ $(".stuff").hide('slow'); },function(){ }); $(".stuff").show('fast');
Jquery Animando Criando uma animação, exemplo: $("a").toggle( function(){ }); $(".stuff").animate({ height: ' hide', opacity: ' hide' }, 'slow'); }, function(){ $(".stuff").animate({ height: ' s h o w ', opacity: 'show' }, 'slow');
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: $("#large").tablesorter(); $("#large").tablesorter({ }); widgets: [ ' z e b r a ' ]
Java Corporativo (RIAs) HTML, CSS e Javascript Edson Koiti Kudo Yasojima