Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />Thiago Prado de Campos<br />Aula 2<br />28/maio/2011...
Programa<br />Padrões de Codificação e Programação de Interfaces Web<br />Conceitos de Interface<br />HTML5, CSS, EcmaScri...
CONCEITOS DE INTERFACE<br />Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />
O que é uma interface do usuário?<br />O termo interface é aplicado normalmente àquilo que interliga dois sistemas<br />UI...
Interação<br />É o processo que engloba as ações do usuário sobre a interface de um sistema, e suas interpretações sobre a...
Interação Humano-Computador<br />IHC é a área da Computação que estuda as interações do ser humano com o computador e o pr...
Design de Interação<br />DI é a área do Design que estuda as interações do ser humano com o computador e o projeto e desen...
DI = IHC?<br />São “quase” iguais...<br />IHC é mais antigo e segue uma linha mais científica<br />DI é mais recente e seg...
Aspectos de uma boa UI<br />Affordance<br />Usabilidade<br />Acessibilidade<br />Comunicabilidade<br />...<br />
Affordance<br />Affordance é um termo que se refere às propriedades percebidas e reais de um artefato, em particular as pr...
Usabilidade<br />A usabilidade de um sistema é um conceito que se refere à qualidade da interação de sistemas com os usuár...
Usabilidade<br />Existe uma norma NBR/ISO específica sobre Usabilidade:<br />ISO 9241 - Ergonomia da interação humano-sist...
Acessibilidade<br />Resumidamente significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web. ...
Acessibilidade<br />O W3C carrega também a bandeira da Acessibilidade com o grupo WAI (Web Accessibility Initiative) e as ...
Comunicabilidade<br />A comunicabilidade de um sistema é a sua propriedade de transmitir ao usuário de forma eficaz e efic...
Fundamentos para criadores de UI<br />Ciência Cognitiva<br />Semiótica<br />Paradigmas/Modelos de Interação<br />Ergonomia...
Interfaces para Web<br />Segundo James Jesse Garret, a web foi originalmente concebida como um espaço de troca de informaç...
Interfaces para Web<br />Para facilitar o entendimento Garret, estabelece dois conceitos de funcionabilidade para a web:<b...
Web como Interface de Software<br />Orientado à tarefa<br />Foco: aplicações!<br />Webmail<br />Google Docs, Office Live<b...
Web Sistema de Hipertexto<br />Orientado à Informação<br />Foco: conteúdo!<br />Portal de Notícias<br />Wikipedia<br />Sit...
Web Híbrida (Software e Hipertexto)<br />Orientado parte ou em determinado contexto à Informação e em outro à Tarefa<br />...
Patterns<br />Existem padrões de componentes de interfaces que é importante ser conhecido pelo designer de interfaces para...
Cada tecnologia no lugar certo<br />Ninguém compra uma Ferrari para fazer entregas de geladeira.<br />Ninguém usa um Fiat ...
Cada tecnologia no lugar certo<br />Existem tecnologias projetadas para atender as necessidades de conteúdo da Web; tecnol...
Cada tecnologia no lugar certo<br />O ideal é escolher aquela que melhor reúne os aspectos de uma boa interface (affordanc...
Exercício<br />http://bit.ly/exercicio04<br />
HTML, CSS, ECMASCRIPT“Padrões abertos”<br />Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />
Desenvolvimento em Camadas<br />
HTML para Espaço de Hipertexto<br />Usando a HTML de maneira semanticamente correta estaremos propondo uma excelente soluç...
HTML para Espaço de Hipertexto<br />O que é semanticamente correto?<br />Usar os elementos para a finalidade adequada aos ...
HTML para Espaço de Hipertexto<br />Títulos: H1 ... H6<br />Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS<br />Conteúdo de Fras...
HTML para Espaço de Hipertexto<br />Títulos: H1 ... H6, HGROUP<br />Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS, HEADER, FOOT...
HTML para Aplicações<br />Para aplicações, até a versão 4, o principal recurso da HTML eram os elementos de formulários e ...
HTML para Aplicações<br />Formulários: <br />Áreas: FORM, FIELDSET<br />Controles:<br />INPUT<br />Text, Radio, checkbox, ...
HTML para Aplicações<br />Formulários: <br />Áreas: FORM, FIELDSET<br />Controles:<br />INPUT<br />Text, Radio, checkbox, ...
HTML para Aplicações<br />Novos Atributos de Formulário<br />Autofocus, placeholder, required, pattern, autocomplete, max,...
Exercício<br />Vamos criar juntos um formulário em HTML5 para simular o cadastro de um usuário num website.<br />
CSS – Cascade Style Sheet<br />CSS é uma linguagem de estilos criada com objetivo de apresentar o conteúdo de uma página w...
Função da CSS<br />A principal função do CSS é separar apresentação de conteúdo, é possível, mantendo-se o mesmo conteúdo,...
JavaScript<br />JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScr...
Javascript<br />Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.<br />Resumin...
Surgimento do Javascript e do JScript<br />Em março de 1996 a Netscape Communications Corporation lançou o Navegador Netsc...
De Javascript para ECMAScript<br />A Netscape submeteu as especificações do JavaScript para padronização pela EcmaInternat...
ECMAScript<br />A ECMA (European Computer Manufactures Association), em sua especificação 262, descreve a linguagem ECMASc...
ECMAScript<br />Apesar do JavaScript ter surgido antes, hoje ele deve ser visto como uma das implementações (derivações/di...
ECMAScript<br />A versão atual da EcmaScript é a 5.0, publicada em  dez/2009<br />http://www.ecma-international.org/public...
Dialetos e Navegadores<br />Javascript, ECMA 3ª/5ª  Edição<br />Chrome, Firefox, Opera, Safari<br />Jscript, ECMA 3ª/5ª Ed...
Exercício<br />Vamos estilizar um pouco o nosso currículo (criado na primeira aula) e fazer uma apresentação simples com e...
Exercício<br />Com um pouco mais de esforço e criatividade poderíamos chegar em apresentações como esta:<br />http://slide...
Adobe Flash®<br />Flash é um formato proprietário desenvolvido pela Macromedia em 1996 (depois comprada pela Adobe System)...
Adobe Flash®<br />Flash foi e ainda é muito utilizado para criação de Jogos, anúncios publicitários e animações em geral.<...
Adobe Flash®<br />O Adobe Flash gera:<br />ShockWave Flash (SWF)<br />Flash Video (FLV)<br />
O problema do Flash®<br />A natureza exclusiva do Flash tem sido uma preocupação para os defensores dos padrões abertos e ...
O problema do Flash®<br />O conteúdo dentro do arquivo SWF é como uma “caixa-preta” para os leitores de tela e para muitas...
O problema do Flash®<br />Executar um SWF necessita obrigatoriamente da instalação de um plugin no navegador.<br />97% dos...
Defesa do Flash<br />Há quem defenda o uso de Flash para muitas aplicações atuais.<br />O principal argumento é que HTML5 ...
Microsoft Silverlight®<br />Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight.<br />A grande vantagem d...
Microsoft Silverlight®<br />Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight.<br />A grande vantagem d...
Microsoft Silverlight®<br />O principal problema do Silverlight é que só é executável em navegadores sob plataforma Window...
Microsoft Silverlight®<br />Aplicações Silverlight são geradas com o Microsoft Visual Studio ou Microsoft Expression Blend...
JavaFX<br />É uma plataforma para RIA desenvolvida pela Sun Microsystems tentando abocanhar uma fatia deste mercado. <br /...
JavaFX<br />Utiliza a JavaFX Script, que é uma linguagem de script declarativa e orientada a objetos, com sintaxe simplifi...
Silverlight x Flash<br />http://www.shinedraw.com/<br />
Exercício<br />Pesquise na Internet algumas aplicações desktop ou sites inteiros desenvolvidos e publicados nos formados F...
Frameworks Javascript<br />Há alguns anos já é possível criar interfaces ricas de aplicações na web com o trio HTML+CSS +J...
JQuery e jQueryUI<br />jQuery é um framework javascript que combinada com o jQueryUI proporciona uma boa quantidade de rec...
Mootools<br />Framework criado com objetivo de prover animações e outras facilidades aos desenvolvedores javascript.<br />...
YUI Library<br />Biblioteca patrocinada e mantida pelo Yahoo! http://developer.yahoo.com/yui/<br />
Google Web Toolkit<br />Biblioteca mantida pelo Google com recursos que são utilizados nas suas mais populares aplicações,...
ExtJS<br />Uma biblioteca muito bem desenvolvida e mantida por uma empresa privada, a Sencha. O extJS tem um amplo número ...
Tecnologias para Games e etc.<br />Cada vez mais a web está sendo usada como plataforma de jogos, sejam eles de entretenim...
Unity<br />É uma engine proprietária para jogos criada pela Unity Technologies, similar ao Blender.<br />O Unity possui du...
WebGL<br />Fornece uma interface de programação de gráficos 3D usando o elemento canvas da HTML5.<br />O gerenciamento aut...
Uma defesa aos Padrões Web<br />É possível criar muitas aplicações ricas e jogos educativos e de entretenimento com o uso ...
Impact<br />Jogo com canvas<br />http://www.phoboslab.org/ztype/<br />
Audio e Desenho<br />Audio, Canvas da HTML5 combinado com Transforms e Transitions da CSS3:<br />http://daftpunk.themaninb...
Damas<br />Jogo de Damas com jQuery e OpenGL<br />http://usuaris.tinet.cat/jmarine/dames/<br />
HelloRacer™ WebGL<br />Um teste de carro de corrida modelado usando WebGL e que pode ser controlado pelo teclado ou mouse....
Enciclopédia de Anatomia<br />Abandone a Barsa® e vasculhe o corpo humano direto do navegador.<br />http://www.biodigitalh...
Google Body<br />Abandone a Barsa® e vasculhe o corpo humano direto do navegador.<br />http://bodybrowser.googlelabs.com/b...
Atlas Mundial<br />OpenGL<br />http://www.webglearth.com<br />
Tem até pros gatos...<br />Jogos para iPAd e Android usando HTML5 e CSS3<br />http://olhardigital.uol.com.br/jovem/games/n...
Mais demos de HTML5,CSS3, etc...<br />http://www.ro.me/<br />http://www.beautyoftheweb.com/<br />http://www.chromeexperime...
Referências<br />Esta apresentação contém citação de marcas, imagens de logomarcas que podem possuir direitos de proprieda...
Próximos SlideShares
Carregando em…5
×

Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - 28-05-2011

1.510 visualizações

Publicada em

Slide da disciplina de Introdução aos Padrões Web e Tecnologias para o Ambiente Digital, ministrada pelo professor Thiago Prado Campos - Aula 02 - 28/05/2011

Publicada em: Educação, Tecnologia, Negócios
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.510
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - 28-05-2011

  1. 1. Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />Thiago Prado de Campos<br />Aula 2<br />28/maio/2011<br />
  2. 2. Programa<br />Padrões de Codificação e Programação de Interfaces Web<br />Conceitos de Interface<br />HTML5, CSS, EcmaScript e dialetos<br />Java, Adobe Flash, Microsoft Silverlight, JavaFX<br />Frameworks JavaScript – jQuery e YUI<br />
  3. 3. CONCEITOS DE INTERFACE<br />Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />
  4. 4. O que é uma interface do usuário?<br />O termo interface é aplicado normalmente àquilo que interliga dois sistemas<br />UI é um conjunto de características com as quais o usuário interage com uma máquina, dispositivo ou programa de computador.<br />Permite que o usuário forneça entradas de informação e;<br />Responde às informações fornecidas pelo usuário com ações ou efeitos na própria interface.<br />
  5. 5. Interação<br />É o processo que engloba as ações do usuário sobre a interface de um sistema, e suas interpretações sobre as respostas reveladas por esta interface.<br />
  6. 6. Interação Humano-Computador<br />IHC é a área da Computação que estuda as interações do ser humano com o computador e o projeto e desenvolvimento de interfaces do usuário.<br />
  7. 7. Design de Interação<br />DI é a área do Design que estuda as interações do ser humano com o computador e o projeto e desenvolvimento de interfaces do usuário.<br />
  8. 8. DI = IHC?<br />São “quase” iguais...<br />IHC é mais antigo e segue uma linha mais científica<br />DI é mais recente e segue uma linha de abordagem mais ligada à prática e ao lado artístico.<br />IHC atrai pesquisadores da área da Computação e DI da área do Design.<br />http://www.id-book.com/<br />http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html<br />
  9. 9. Aspectos de uma boa UI<br />Affordance<br />Usabilidade<br />Acessibilidade<br />Comunicabilidade<br />...<br />
  10. 10. Affordance<br />Affordance é um termo que se refere às propriedades percebidas e reais de um artefato, em particular as propriedades fundamentais que determinam como este artefato pode ser utilizado.<br />Fornecem fortes pistas ou indicações quanto à operação de artefatos; e quando se tira proveito delas, o usuário sabe exatamente o que fazer só olhando para o artefato.<br />
  11. 11. Usabilidade<br />A usabilidade de um sistema é um conceito que se refere à qualidade da interação de sistemas com os usuários e depende de vários aspectos.<br />Facilidade de Aprendizado, Facilidade de Uso, Satisfação, Flexibilidade, Produtividade, Segurança<br />Saiba mais:<br />http://www.thiagotpc.com/ux/metas-de-usabilidade-x-metas-de-experiencia-do-usuario/<br />
  12. 12. Usabilidade<br />Existe uma norma NBR/ISO específica sobre Usabilidade:<br />ISO 9241 - Ergonomia da interação humano-sistema <br />Parte 11 – Orientações sobre Usabilidade<br />Parte 12 – Apresentação da Informação<br />Parte 151 – Orientações para Interfaces de Usuários da World Wide Web<br />http://www.abntcatalogo.com.br/normagrid.aspx<br />
  13. 13. Acessibilidade<br />Resumidamente significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web. <br />Mais concretamente, significa uma Web projetada de modo a que estas pessoas possam perceber, entender, navegar e interagir de uma maneira efetiva com a Web, bem como criar e contribuir com conteúdos para a Web.<br />Acessibilidade pode servir a todos, não só aos deficientes.<br />
  14. 14. Acessibilidade<br />O W3C carrega também a bandeira da Acessibilidade com o grupo WAI (Web Accessibility Initiative) e as recomendações para:<br />Conteúdo (WCAG)<br />Ferramentas de Autoria (ATAG)<br />Agentes de Usuário (UAAG)<br />http://www.w3.org/WAI/intro/components.php<br />
  15. 15. Comunicabilidade<br />A comunicabilidade de um sistema é a sua propriedade de transmitir ao usuário de forma eficaz e eficiente as intenções e princípios de interação que guiaram o seu design.<br />através da sua interação com a aplicação, o usuário deve ser capaz de compreender as premissas, intenções e decisões tomadas pelo projetista durante o processo de design.<br />
  16. 16. Fundamentos para criadores de UI<br />Ciência Cognitiva<br />Semiótica<br />Paradigmas/Modelos de Interação<br />Ergonomia<br />Arquitetura da Informação<br />Design Universal<br />UCD<br />...<br />
  17. 17. Interfaces para Web<br />Segundo James Jesse Garret, a web foi originalmente concebida como um espaço de troca de informações hipertextuais, porém o desenvolvimento crescente da tecnologia digital propiciou o uso como uma interface de software remoto. <br />Esta natureza dúbia resulta em muita confusão.<br />
  18. 18. Interfaces para Web<br />Para facilitar o entendimento Garret, estabelece dois conceitos de funcionabilidade para a web:<br />A web como interface de software orientado à tarefa<br />A web como sistema de hipertexto orientado à informação<br />
  19. 19. Web como Interface de Software<br />Orientado à tarefa<br />Foco: aplicações!<br />Webmail<br />Google Docs, Office Live<br />Dropbox, SugarSync, Evernote<br />Google Calendar<br />
  20. 20. Web Sistema de Hipertexto<br />Orientado à Informação<br />Foco: conteúdo!<br />Portal de Notícias<br />Wikipedia<br />Sites Institucionais<br />Blogs<br />
  21. 21. Web Híbrida (Software e Hipertexto)<br />Orientado parte ou em determinado contexto à Informação e em outro à Tarefa<br />Redes Sociais<br />Comércio Eletrônico<br />Intranets<br />Flickr, Picasa, Youtube<br />
  22. 22. Patterns<br />Existem padrões de componentes de interfaces que é importante ser conhecido pelo designer de interfaces para correta aplicação em projetos web.<br />http://ui-patterns.com/<br />http://patternry.com<br />http://developer.yahoo.com/ypatterns/<br />http://www.uipatterns.net/<br />http://patterntap.com/<br />
  23. 23. Cada tecnologia no lugar certo<br />Ninguém compra uma Ferrari para fazer entregas de geladeira.<br />Ninguém usa um Fiat 147 para disputar ralis no deserto;<br />Executivos bem sucedidos de grandes empresas não costumam andar de Chevette ou Palio. Provavelmente andam num Fusion, Corolla, C4...<br />Este professor usa um Classic por que é bem econômico e atende suas necessidades do dia-a-dia.<br />Motos são meios eficientes de entrega de pizza ou outros fast-foods.<br />
  24. 24. Cada tecnologia no lugar certo<br />Existem tecnologias projetadas para atender as necessidades de conteúdo da Web; tecnologias para melhorar a apresentação destes conteúdos e outras para prover experiências incríveis aos usuários.<br />Algumas são excelentes para espaços de hipertexto, outras para servir como interface de software e algumas podem ser útil em ambientes que combinam os dois aspectos.<br />
  25. 25. Cada tecnologia no lugar certo<br />O ideal é escolher aquela que melhor reúne os aspectos de uma boa interface (affordance, usabilidade, acessibilidade, comunicabilidade) em cada contexto e necessidade.<br />Para isso, é necessário conhecer as tecnologias disponíveis.<br />E para montar boas interfaces é imprescindível dominar os fundamentos necessários e que listamos anteriormente.<br />
  26. 26. Exercício<br />http://bit.ly/exercicio04<br />
  27. 27. HTML, CSS, ECMASCRIPT“Padrões abertos”<br />Introdução aos Padrões Web e Tecnologias para o Ambiente Digital<br />
  28. 28. Desenvolvimento em Camadas<br />
  29. 29. HTML para Espaço de Hipertexto<br />Usando a HTML de maneira semanticamente correta estaremos propondo uma excelente solução para ambientes de hipertexto.<br />
  30. 30. HTML para Espaço de Hipertexto<br />O que é semanticamente correto?<br />Usar os elementos para a finalidade adequada aos quais eles foram criados, sem forçar “efeitos” com elementos diferentes ou obsoletos. Exemplos: <br />usar o elemento table (tabela) para desenho de layouts; <br />usar o elemento b ou i para estilizar em itálico ou negrito.<br />Usar elementos ou atributos de formatação já excluídos da linguagem, como CENTER, align, bgcolor, etc.<br />
  31. 31. HTML para Espaço de Hipertexto<br />Títulos: H1 ... H6<br />Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS<br />Conteúdo de Frases: A, EM, STRONG, ABBR, CITE, Q<br />Mídia Externa: IMG, OBJECT<br />Listas: UL, OL, LI, DL, DD, DT<br />Tabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP<br />
  32. 32. HTML para Espaço de Hipertexto<br />Títulos: H1 ... H6, HGROUP<br />Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS, HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV, FIGURE, FIGCAPTION<br />Conteúdo de Frases: A, EM, STRONG, ABBR, CITE, Q, TIME<br />Mídia Externa: IMG, OBJECT, AUDIO, VIDEO, TRACK, SOURCE, CANVAS<br />Listas: UL, OL, LI, DL, DD, DT<br />Tabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP<br />
  33. 33. HTML para Aplicações<br />Para aplicações, até a versão 4, o principal recurso da HTML eram os elementos de formulários e a possibilidade de embutir linhas de código de scripts para tentar promover um pouco mais de controle sobre estes elementos da página.<br />
  34. 34. HTML para Aplicações<br />Formulários: <br />Áreas: FORM, FIELDSET<br />Controles:<br />INPUT<br />Text, Radio, checkbox, password, button<br />SELECT/OPTION/OPTGROUP<br />TEXTAREA<br />BUTTON<br />
  35. 35. HTML para Aplicações<br />Formulários: <br />Áreas: FORM, FIELDSET<br />Controles:<br />INPUT<br />Text, Radio, checkbox, password, button, tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color<br />METER, PROGRESS<br />SELECT/OPTION/OPTGROUP/DATALIST<br />TEXTAREA<br />BUTTON<br />OUTPUT<br />Novos atributos de formulários!<br />
  36. 36. HTML para Aplicações<br />Novos Atributos de Formulário<br />Autofocus, placeholder, required, pattern, autocomplete, max, min, multiple, ...<br />Novas APIs e recursos!<br />Controlar audio e video e de imagens 2D e 3D<br />Prover aplicações offline com armazenamento local no navegador ou em sistema de arquivos<br />Arrastar e soltar (drag and drop)<br />Geolocalização<br />Manipulação do histórico de navegação<br />Comunicação entre páginas e com o servidor<br />Acesso a dispositivos periféricos<br />
  37. 37. Exercício<br />Vamos criar juntos um formulário em HTML5 para simular o cadastro de um usuário num website.<br />
  38. 38. CSS – Cascade Style Sheet<br />CSS é uma linguagem de estilos criada com objetivo de apresentar o conteúdo de uma página web em diferentes mídias:<br />Tela<br />Projeção<br />Impressão<br />Áudio/Fala<br />
  39. 39. Função da CSS<br />A principal função do CSS é separar apresentação de conteúdo, é possível, mantendo-se o mesmo conteúdo, obter apresentações diferentes, bastando para isso utilizar de regras de CSS diferentes para os mesmo elementos do documento HTML.<br />Um exemplo clássico desta possibilidade nos é apresentada pelo site CSS Zen Garden. <br />Neste site, o autor disponibiliza um documento HTML e pede para que os designers enviem seu próprio arquivo CSS. <br />Se o arquivo estiver escrito corretamente o autor publica no site como uma versão possível de apresentação do conteúdo.<br />Original – Ex. 1 – Ex. 2 – Ex. 3 – Ex. 4 – Ex. 5 – Ex. 6 – Ex. 7 – Ex. 8<br />39<br />
  40. 40. JavaScript<br />JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:<br />Validação de formulários no lado cliente (programa navegador);<br />Interação com a página. <br />modificar dinamicamente os estilos dos elementos da página em HTML.<br />
  41. 41. Javascript<br />Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.<br />Resumindo: <br />Javascript NÃO É Java;<br />Javascript NÃO É uma sub-linguagem de Java;<br />Javascript NÃO FOI criado pelos mesmos criadores do Java;<br />
  42. 42. Surgimento do Javascript e do JScript<br />Em março de 1996 a Netscape Communications Corporation lançou o Navegador Netscape 2.0, com suporte para JavaScript. <br />Com o sucesso do JavaScript como linguagem de scripting para o desenvolvimento de páginas web, a Microsoft, por sua vez, desenvolveu uma linguagem bastante próxima batizada de JScript, incluída mais tarde no Internet Explorer 3.0, lançado em agosto de 1996.<br />
  43. 43. De Javascript para ECMAScript<br />A Netscape submeteu as especificações do JavaScript para padronização pela EcmaInternational; o trabalho na especificação, ECMA-262, começou em novembro de 1996. A primeira edição do ECMA-262 foi adaptada pela ECMA General Assembly em junho de 1997.<br />ECMAScript é a linguagem de scripts padronizada pelo ECMA-262. Tanto a tecnologia JavaScript quanto a JScript são compatíveis com ECMAScript, porém cada um provê recursos adicionais não descritos na especificação ECMA.<br />
  44. 44. ECMAScript<br />A ECMA (European Computer Manufactures Association), em sua especificação 262, descreve a linguagem ECMAScript como “uma linguagem de programação multiplataforma de propósitos gerais”. <br />O ECMAScript, portanto, não é uma linguagem limitada ao ambiente dos navegadores web, podendo ser embutida em qualquer ambiente.<br />
  45. 45. ECMAScript<br />Apesar do JavaScript ter surgido antes, hoje ele deve ser visto como uma das implementações (derivações/dialetos) existentes do padrão ECMA-262, que é o código de especificação da linguagem ECMAScript.<br />O ECMA Script é seguido também, por exemplo, pela linguagem ActionScript da Adobe.<br />Mundo ECMAScript<br />
  46. 46. ECMAScript<br />A versão atual da EcmaScript é a 5.0, publicada em dez/2009<br />http://www.ecma-international.org/publications/standards/Ecma-262.htm<br />
  47. 47. Dialetos e Navegadores<br />Javascript, ECMA 3ª/5ª Edição<br />Chrome, Firefox, Opera, Safari<br />Jscript, ECMA 3ª/5ª Edição<br />Internet Explorer, Opera<br />ActionScript, ECMA 4ª Edição<br />Adobe Flash<br />
  48. 48. Exercício<br />Vamos estilizar um pouco o nosso currículo (criado na primeira aula) e fazer uma apresentação simples com ele combinando CSS e Javascript.<br />
  49. 49. Exercício<br />Com um pouco mais de esforço e criatividade poderíamos chegar em apresentações como esta:<br />http://slides.html5rocks.com/<br />
  50. 50. Adobe Flash®<br />Flash é um formato proprietário desenvolvido pela Macromedia em 1996 (depois comprada pela Adobe System) com objetivo inicial de trabalhar com animações de gráficos vetoriais.<br />Atualmente permite embutir bitmaps, vídeos e áudio.<br />Utiliza-se o aplicativo Adobe Flash para criar e gerar o arquivo no formato Flash (extensão .swf) que é então publicado na Web.<br />
  51. 51. Adobe Flash®<br />Flash foi e ainda é muito utilizado para criação de Jogos, anúncios publicitários e animações em geral.<br />A Adobe tem reposicionado sua ferramenta como geradora de Rich Internet Applications (RIA).<br />É possível utilizar Flash como plataforma de aplicação porque seus “elementos” podem ser controlados pela linguagem ActionScript, um dialeto da EcmaScript.<br />
  52. 52. Adobe Flash®<br />O Adobe Flash gera:<br />ShockWave Flash (SWF)<br />Flash Video (FLV)<br />
  53. 53. O problema do Flash®<br />A natureza exclusiva do Flash tem sido uma preocupação para os defensores dos padrões abertos e software livre. <br />Os desenhos vetoriais e as animações criadas em Flash hoje já começam a ser possíveis com as APIs Canvas, com SVG e com novas propriedades da CSS3.<br />Flash Video também pode ser substituído pelo formato aberto Theora.<br />
  54. 54. O problema do Flash®<br />O conteúdo dentro do arquivo SWF é como uma “caixa-preta” para os leitores de tela e para muitas aplicações externas. Isto corresponde a um grave obstáculo à Acessibilidade, que estudaremos na próxima aula.<br />
  55. 55. O problema do Flash®<br />Executar um SWF necessita obrigatoriamente da instalação de um plugin no navegador.<br />97% dos usuários possuem este plugin instalado.<br />SWF gerado para versões mais recente do plugin podem não funcionar em versões antigas, exigindo atualizações do usuário;<br />O plugin sofre constante críticas associadas a baixo desempenho e confiabilidade (lentidão, consumo elevado de CPU e travamento).<br />
  56. 56. Defesa do Flash<br />Há quem defenda o uso de Flash para muitas aplicações atuais.<br />O principal argumento é que HTML5 ainda não está maduro e alguns recursos como fullscreen não são suportados pelos navegadores para vídeos por exemplo.<br />http://www.flashlab.com/html5/<br />
  57. 57. Microsoft Silverlight®<br />Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight.<br />A grande vantagem da ferramenta da Microsoft é que ela herda muita das características e recursos presentes no Windows Presentation Foundation, que é a plataforma de interface do sistema Windows E por permitir uso de várias linguagens de programação (JS, C#, Python, Visual Basic...)<br />
  58. 58. Microsoft Silverlight®<br />Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight.<br />A grande vantagem da ferramenta da Microsoft é que ela herda muita das características e recursos presentes no Windows Presentation Foundation, que é a plataforma de interface do sistema Windows E por permitir uso de várias linguagens de programação (JS, C#, Python, Visual Basic...)<br />
  59. 59. Microsoft Silverlight®<br />O principal problema do Silverlight é que só é executável em navegadores sob plataforma Windows e MacOS pois só a plugin para estes sistemas operacionais.<br />Silverlight é um poquinho mais acessível que o Flash porque seu conteúdo textual fica dentro de arquivo XML-like que compõe o pacote final do projeto que é em formato ZIP.<br />
  60. 60. Microsoft Silverlight®<br />Aplicações Silverlight são geradas com o Microsoft Visual Studio ou Microsoft Expression Blend, que são ferramentas proprietárias, comerciais.<br />
  61. 61. JavaFX<br />É uma plataforma para RIA desenvolvida pela Sun Microsystems tentando abocanhar uma fatia deste mercado. <br />O foco principal não é tanto os desktops ou a web, mas os são dispositivos que vem com Java Runtime Envirounment embutidos como TVs, celulares, etc.<br />
  62. 62. JavaFX<br />Utiliza a JavaFX Script, que é uma linguagem de script declarativa e orientada a objetos, com sintaxe simplificada para desenvolvimento de UIs. <br />É bem diferente do Java tradicional mas já possui plugins para Eclipse e Netbeans para facilitar o desenvolvimento<br />
  63. 63. Silverlight x Flash<br />http://www.shinedraw.com/<br />
  64. 64. Exercício<br />Pesquise na Internet algumas aplicações desktop ou sites inteiros desenvolvidos e publicados nos formados Flash, Silverlight e JavaFX.<br />http://bit.ly/exercicios05 <br />
  65. 65. Frameworks Javascript<br />Há alguns anos já é possível criar interfaces ricas de aplicações na web com o trio HTML+CSS +JS.<br />Isto é viável com a ajuda de frameworks (plataformas) que são bibliotecas de recursos desenvolvidos em html+css+js que podem ser incorporados aos sites e customizados com poucas linhas de código.<br />
  66. 66. JQuery e jQueryUI<br />jQuery é um framework javascript que combinada com o jQueryUI proporciona uma boa quantidade de recursos para uma interface do usuário consistente e eficiente.<br />É flexível e permite ampliar o framework com desenvolvimento de plugins. É o framework mais utilizado hoje na Web.<br />http://www.jquery.com e http://www.jqueryui.com<br />
  67. 67. Mootools<br />Framework criado com objetivo de prover animações e outras facilidades aos desenvolvedores javascript.<br />http://mootools.net/<br />
  68. 68. YUI Library<br />Biblioteca patrocinada e mantida pelo Yahoo! http://developer.yahoo.com/yui/<br />
  69. 69. Google Web Toolkit<br />Biblioteca mantida pelo Google com recursos que são utilizados nas suas mais populares aplicações, como AdWords, Orkut, Gmail, Calendar, etc.<br />http://code.google.com/webtoolkit/<br />http://gwt.google.com/samples/Showcase/Showcase.html#!CwCheckBox<br />
  70. 70. ExtJS<br />Uma biblioteca muito bem desenvolvida e mantida por uma empresa privada, a Sencha. O extJS tem um amplo número de usuários e possui licença para uso comercial e licença open source.<br />http://www.sencha.com/products/extjs/<br />
  71. 71. Tecnologias para Games e etc.<br />Cada vez mais a web está sendo usada como plataforma de jogos, sejam eles de entretenimento ou educativos.<br />Além do Flash e Silverlight, que já vimos, duas alternativas que podem ser usadas para criação de jogos online são:<br />Unity<br />WebGL<br />Estas soluções podem ser usadas para outras necessidades de 3D<br />
  72. 72. Unity<br />É uma engine proprietária para jogos criada pela Unity Technologies, similar ao Blender.<br />O Unity possui duas versões principais: Unity Pro, que custa US$ 1.500,00, e a versão gratuita, simplesmente chamada Unity, que pode ser usada tanto para fins educacionais, quanto para fins comerciais. Há uma restrição, entretanto, que diz que companhias que tiveram lucro acima de US$ 100.000,00 em seu último ano fiscal, devem usar o Unity Pro. Fonte: Wikipedia<br />http://unity3d.com/gallery/live-demos/tropical-paradise<br />
  73. 73. WebGL<br />Fornece uma interface de programação de gráficos 3D usando o elemento canvas da HTML5.<br />O gerenciamento automático de memória é fornecida como parte da linguagem Javascript.<br />https://www.khronos.org/registry/webgl/specs/1.0/<br />
  74. 74. Uma defesa aos Padrões Web<br />É possível criar muitas aplicações ricas e jogos educativos e de entretenimento com o uso combinado de padrões abertos para web.<br />A seguir listamos vários bons exemplos disto.<br />
  75. 75. Impact<br />Jogo com canvas<br />http://www.phoboslab.org/ztype/<br />
  76. 76. Audio e Desenho<br />Audio, Canvas da HTML5 combinado com Transforms e Transitions da CSS3:<br />http://daftpunk.themaninblue.com/<br />
  77. 77. Damas<br />Jogo de Damas com jQuery e OpenGL<br />http://usuaris.tinet.cat/jmarine/dames/<br />
  78. 78. HelloRacer™ WebGL<br />Um teste de carro de corrida modelado usando WebGL e que pode ser controlado pelo teclado ou mouse.<br />http://helloracer.com/webgl/<br />
  79. 79. Enciclopédia de Anatomia<br />Abandone a Barsa® e vasculhe o corpo humano direto do navegador.<br />http://www.biodigitalhuman.com/<br />
  80. 80. Google Body<br />Abandone a Barsa® e vasculhe o corpo humano direto do navegador.<br />http://bodybrowser.googlelabs.com/body.html<br />
  81. 81. Atlas Mundial<br />OpenGL<br />http://www.webglearth.com<br />
  82. 82. Tem até pros gatos...<br />Jogos para iPAd e Android usando HTML5 e CSS3<br />http://olhardigital.uol.com.br/jovem/games/noticias/gatos_ganham_jogos_gratuitos_para_tablet<br />http://gamesforcats.com/<br />
  83. 83. Mais demos de HTML5,CSS3, etc...<br />http://www.ro.me/<br />http://www.beautyoftheweb.com/<br />http://www.chromeexperiments.com/<br />https://demos.mozilla.org/pt/<br />http://developer.apple.com/safaridemos/<br />
  84. 84. Referências<br />Esta apresentação contém citação de marcas, imagens de logomarcas que podem possuir direitos de propriedade. Aqui foram usados unicamente para fins didáticos.<br />O conteúdo destes slides foram baseados em documentos publicados nos seguintes sites:<br />http://wikipedia.com/<br />http://www.w3.org/<br />

×