Java Corporativo - HTML CSS Javascript

Download Java Corporativo - HTML CSS Javascript

Post on 08-Aug-2015

43 views

Category:

Documents

6 download

Embed Size (px)

TRANSCRIPT

Java Corporativo (RIAs) HTML, CSS e JavascriptEdson 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

Rich Internet Application (RIA)

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:

Rich Internet Application (RIA) 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/

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

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


Utiliza

texto

Tags para interpretar e processar

HTML Estrutura bsica

HTML Algumas tags Importantes

- Definem e encapsulam estruturas. , , - Definem a construo de tabelas. - Criam hiperlinks. - Utilizada para carregar imagens - Definem formulrios e - 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: Certo: Errado: Certo: Errado:
Certo:
Errado: Certo:

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 e um paragrafo qualquer .

HTML - Prtica Experimente

tambm utilizar tags como e , negrito e itlico respectivamenteHTML - Prtica Utilizandoa tag , pode-se direcionar o usurio para outras pginas ou para sees dentro da prpria pgina.HTML - PrticaPara carregar imagens utiliza-se a tag , 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 - PrticaOutro atributo importante a pra construo de tabelas. Esta tag utiliza outras duas tags e para organizar as linhas e colunas.HTML - Prtica Formulrios so bastante utilizados em HTML para coletar dados. Dentro de cada formulrio, pode haver vrias tags 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 - PrticaHTML - Prtica Os 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 - PrticaCSS - Introduo CascateStyle 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 - OrganizaoA utilizao de um CSS se d por um arquivo separado ou por um bloco de comandos em parte da pgina atravs da tag .CSS - Organizao Lembrandoque 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 CSS - SintaxeAsintaxe do CSS bastante simples, basicamente as so constitudas de seletores e declaraes entre chaves ({ })Propriedade body Valor{ background-color: red; font-size: 20px; }SeletorDeclaraoDeclaraoCSS - Sintaxe Exemplo:estilo.csspagina.htmlCSS - SintaxeOCSS 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_classeSeletorSeletorCSS - Sintaxe ATENO!! Noescrever 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 ExemploCSS - Sintaxe Beleza,e id?mas qual a diferena entre classAmbos 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 = XCSS - Sintaxe#quadrado {...}1..1.quadrado {...}1..N CSS - Sintaxepossvel 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!! Nocoloque espao em valores que precisem especificar a unidade. Incompatibilidade de Browsers... Exemplo:Certo: font-size:20px Errado: font-size:20 pxCSS - Background Backgroundsou fundo de tela, possuem vrios sub-atributos, mais importantes: Background-color Background-image Background-repeat Background-positionCSS - 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!! Quantoao uso de cores, sempre recomendvel o uso de cores seguras para web, evitando erros na renderizao de alguns browsers. Listade 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-BackgroundCSS-Background Casoa imagem seja menor que a rea do elemento, ela ir se repetir at preencher toda a extenso do elemento.Imagem inicialCSS-BackgroundPara 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 Exemplono-repeat:repeat-x:repeat-y:CSS-BackgroundCaso 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: acimaCSS-TextosTexto 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 Exemplotudo-em-um:CSS - Fontes Fontesso 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 pixelsCSS - Fontes ATENO!!! Aoescolher 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.htmlCSS - Fontes Exemplocompleto:CSS - LinksLinks 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 ativoCSS Atributos importantesExistem 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: contedoCSS Atributos importantes EsquemaCSS Atributos importantes ExemploCSS - Outros Existemvrios 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 Linguagemfracamente tipificada Paradigmas funcional e OO MUITO diferente de Java Utiliza conceitos de prototipagemJavascript - Sintaxe ExemploJavascript - SintaxeOJavascript 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.Javascript - Sintaxe ExemploJavascript - SintaxeO 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 para chama-lo dentro da pgina. Exemplo:Javascript - Sintaxe Comono 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).Javascript - Sintaxe Testemisso:Vai funcionar??Javascript - Sintaxe Entendamfunes 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..Javascript - Sintaxe ExemploResultado?Javascript - SintaxeOJavascript 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:Javascript - Sintaxeuser.name e name sero iguais??Javascript - Sintaxe Condicionaisno possuem muita diferena com outras linguagens, veja os exemplos:Javascript - Sintaxe Loopstambm no diferem muito da linguagem Java:Javascript - Sintaxe Basicamenteo 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 == blablablaJavascript - Sintaxe Almdisso 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.Javascript - SintaxeMostrar exemplo ajaxJavascript - Problemas Linguagemdifcil 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 browsersJquery - Instalao Parainstalar o jquery, basta fazer o download da biblioteca e adicion-la na pgina web com a tag Jquery - SintaxeAsintaxe do jquery se organiza de forma simples.$(div).addClass(meuCSS).show(slow);Objeto JQuery Chamada de mtodos concatenadosJquery Seletores e Eventos UtilizandoJquery 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");Jquery Seletores e Eventos Sequisermos 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"); });Jquery Seletores e Eventos Casoa 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 ); });Jquery Seletores e Eventos Casoo 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 formJquery Seletores e EventosEste 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?Jquery Seletores e EventosO 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 ?Jquery Seletores e Eventos Criandoum organizador de tpicos:$('#faq').find('dd').hide().end().find('dt'). click(function() { $(this).next().slideToggle(); });Conseguiram interpretar o cdigo?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 Vamosao exemplo prtico!Jquery Animando Jqueryfornece 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").toggl...