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

1. Introdução aos Padrões Web e Tecnologias para o Ambiente Digital Thiago Prado de Campos Aula 2 28/maio/2011

2. Programa Padrões de Codificação e Programação de Interfaces Web Conceitos de Interface HTML5, CSS, EcmaScript e dialetos Java, Adobe Flash, Microsoft Silverlight, JavaFX Frameworks JavaScript – jQuery e YUI

3. CONCEITOS DE INTERFACE Introdução aos Padrões Web e Tecnologias para o Ambiente Digital

4. O que é uma interface do usuário? O termo interface é aplicado normalmente àquilo que interliga dois sistemas UI é um conjunto de características com as quais o usuário interage com uma máquina, dispositivo ou programa de computador. Permite que o usuário forneça entradas de informação e; Responde às informações fornecidas pelo usuário com ações ou efeitos na própria interface.

5. Interação É 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.

6. Interação Humano-Computador 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.

7. Design de Interação 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.

8. DI = IHC? São “quase” iguais... IHC é mais antigo e segue uma linha mais científica DI é mais recente e segue uma linha de abordagem mais ligada à prática e ao lado artístico. IHC atrai pesquisadores da área da Computação e DI da área do Design. http://www.id-book.com/ http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

9. Aspectos de uma boa UI Affordance Usabilidade Acessibilidade Comunicabilidade ...

10. Affordance 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. 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.

11. Usabilidade 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. Facilidade de Aprendizado, Facilidade de Uso, Satisfação, Flexibilidade, Produtividade, Segurança Saiba mais: http://www.thiagotpc.com/ux/metas-de-usabilidade-x-metas-de-experiencia-do-usuario/

12. Usabilidade Existe uma norma NBR/ISO específica sobre Usabilidade: ISO 9241 - Ergonomia da interação humano-sistema Parte 11 – Orientações sobre Usabilidade Parte 12 – Apresentação da Informação Parte 151 – Orientações para Interfaces de Usuários da World Wide Web http://www.abntcatalogo.com.br/normagrid.aspx

13. Acessibilidade Resumidamente significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web. 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. Acessibilidade pode servir a todos, não só aos deficientes.

14. Acessibilidade O W3C carrega também a bandeira da Acessibilidade com o grupo WAI (Web Accessibility Initiative) e as recomendações para: Conteúdo (WCAG) Ferramentas de Autoria (ATAG) Agentes de Usuário (UAAG) http://www.w3.org/WAI/intro/components.php

15. Comunicabilidade 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. 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.

16. Fundamentos para criadores de UI Ciência Cognitiva Semiótica Paradigmas/Modelos de Interação Ergonomia Arquitetura da Informação Design Universal UCD ...

17. Interfaces para Web 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. Esta natureza dúbia resulta em muita confusão.

18. Interfaces para Web Para facilitar o entendimento Garret, estabelece dois conceitos de funcionabilidade para a web: A web como interface de software orientado à tarefa A web como sistema de hipertexto orientado à informação

19. Web como Interface de Software Orientado à tarefa Foco: aplicações! Webmail Google Docs, Office Live Dropbox, SugarSync, Evernote Google Calendar

20. Web Sistema de Hipertexto Orientado à Informação Foco: conteúdo! Portal de Notícias Wikipedia Sites Institucionais Blogs

21. Web Híbrida (Software e Hipertexto) Orientado parte ou em determinado contexto à Informação e em outro à Tarefa Redes Sociais Comércio Eletrônico Intranets Flickr, Picasa, Youtube

22. Patterns Existem padrões de componentes de interfaces que é importante ser conhecido pelo designer de interfaces para correta aplicação em projetos web. http://ui-patterns.com/ http://patternry.com http://developer.yahoo.com/ypatterns/ http://www.uipatterns.net/ http://patterntap.com/

23. Cada tecnologia no lugar certo Ninguém compra uma Ferrari para fazer entregas de geladeira. Ninguém usa um Fiat 147 para disputar ralis no deserto; Executivos bem sucedidos de grandes empresas não costumam andar de Chevette ou Palio. Provavelmente andam num Fusion, Corolla, C4... Este professor usa um Classic por que é bem econômico e atende suas necessidades do dia-a-dia. Motos são meios eficientes de entrega de pizza ou outros fast-foods.

24. Cada tecnologia no lugar certo 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. 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.

25. Cada tecnologia no lugar certo O ideal é escolher aquela que melhor reúne os aspectos de uma boa interface (affordance, usabilidade, acessibilidade, comunicabilidade) em cada contexto e necessidade. Para isso, é necessário conhecer as tecnologias disponíveis. E para montar boas interfaces é imprescindível dominar os fundamentos necessários e que listamos anteriormente.

26. Exercício http://bit.ly/exercicio04

27. HTML, CSS, ECMASCRIPT“Padrões abertos” Introdução aos Padrões Web e Tecnologias para o Ambiente Digital

28. Desenvolvimento em Camadas

29. HTML para Espaço de Hipertexto Usando a HTML de maneira semanticamente correta estaremos propondo uma excelente solução para ambientes de hipertexto.

30. HTML para Espaço de Hipertexto O que é semanticamente correto? Usar os elementos para a finalidade adequada aos quais eles foram criados, sem forçar “efeitos” com elementos diferentes ou obsoletos. Exemplos: usar o elemento table (tabela) para desenho de layouts; usar o elemento b ou i para estilizar em itálico ou negrito. Usar elementos ou atributos de formatação já excluídos da linguagem, como CENTER, align, bgcolor, etc.

31. HTML para Espaço de Hipertexto Títulos: H1 ... H6 Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS Conteúdo de Frases: A, EM, STRONG, ABBR, CITE, Q Mídia Externa: IMG, OBJECT Listas: UL, OL, LI, DL, DD, DT Tabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP

32. HTML para Espaço de Hipertexto Títulos: H1 ... H6, HGROUP Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INS, HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV, FIGURE, FIGCAPTION Conteúdo de Frases: A, EM, STRONG, ABBR, CITE, Q, TIME Mídia Externa: IMG, OBJECT, AUDIO, VIDEO, TRACK, SOURCE, CANVAS Listas: UL, OL, LI, DL, DD, DT Tabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP

33. HTML para Aplicações 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.

34. HTML para Aplicações Formulários: Áreas: FORM, FIELDSET Controles: INPUT Text, Radio, checkbox, password, button SELECT/OPTION/OPTGROUP TEXTAREA BUTTON

35. HTML para Aplicações Formulários: Áreas: FORM, FIELDSET Controles: INPUT Text, Radio, checkbox, password, button, tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color METER, PROGRESS SELECT/OPTION/OPTGROUP/DATALIST TEXTAREA BUTTON OUTPUT Novos atributos de formulários!

36. HTML para Aplicações Novos Atributos de Formulário Autofocus, placeholder, required, pattern, autocomplete, max, min, multiple, ... Novas APIs e recursos! Controlar audio e video e de imagens 2D e 3D Prover aplicações offline com armazenamento local no navegador ou em sistema de arquivos Arrastar e soltar (drag and drop) Geolocalização Manipulação do histórico de navegação Comunicação entre páginas e com o servidor Acesso a dispositivos periféricos

37. Exercício Vamos criar juntos um formulário em HTML5 para simular o cadastro de um usuário num website.

38. CSS – Cascade Style Sheet CSS é uma linguagem de estilos criada com objetivo de apresentar o conteúdo de uma página web em diferentes mídias: Tela Projeção Impressão Áudio/Fala

39. Função da CSS 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. Um exemplo clássico desta possibilidade nos é apresentada pelo site CSS Zen Garden. Neste site, o autor disponibiliza um documento HTML e pede para que os designers enviem seu próprio arquivo CSS. Se o arquivo estiver escrito corretamente o autor publica no site como uma versão possível de apresentação do conteúdo. Original – Ex. 1 – Ex. 2 – Ex. 3 – Ex. 4 – Ex. 5 – Ex. 6 – Ex. 7 – Ex. 8 39

40. JavaScript JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades: Validação de formulários no lado cliente (programa navegador); Interação com a página. modificar dinamicamente os estilos dos elementos da página em HTML.

41. Javascript Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso. Resumindo: Javascript NÃO É Java; Javascript NÃO É uma sub-linguagem de Java; Javascript NÃO FOI criado pelos mesmos criadores do Java;

42. Surgimento do Javascript e do JScript Em março de 1996 a Netscape Communications Corporation lançou o Navegador Netscape 2.0, com suporte para JavaScript. 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.

43. De Javascript para ECMAScript 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. 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.

44. ECMAScript 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”. O ECMAScript, portanto, não é uma linguagem limitada ao ambiente dos navegadores web, podendo ser embutida em qualquer ambiente.

45. ECMAScript 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. O ECMA Script é seguido também, por exemplo, pela linguagem ActionScript da Adobe. Mundo ECMAScript

46. ECMAScript A versão atual da EcmaScript é a 5.0, publicada em dez/2009 http://www.ecma-international.org/publications/standards/Ecma-262.htm

47. Dialetos e Navegadores Javascript, ECMA 3ª/5ª Edição Chrome, Firefox, Opera, Safari Jscript, ECMA 3ª/5ª Edição Internet Explorer, Opera ActionScript, ECMA 4ª Edição Adobe Flash

48. Exercício Vamos estilizar um pouco o nosso currículo (criado na primeira aula) e fazer uma apresentação simples com ele combinando CSS e Javascript.

49. Exercício Com um pouco mais de esforço e criatividade poderíamos chegar em apresentações como esta: http://slides.html5rocks.com/

50. Adobe Flash® 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. Atualmente permite embutir bitmaps, vídeos e áudio. Utiliza-se o aplicativo Adobe Flash para criar e gerar o arquivo no formato Flash (extensão .swf) que é então publicado na Web.

51. Adobe Flash® Flash foi e ainda é muito utilizado para criação de Jogos, anúncios publicitários e animações em geral. A Adobe tem reposicionado sua ferramenta como geradora de Rich Internet Applications (RIA). É possível utilizar Flash como plataforma de aplicação porque seus “elementos” podem ser controlados pela linguagem ActionScript, um dialeto da EcmaScript.

52. Adobe Flash® O Adobe Flash gera: ShockWave Flash (SWF) Flash Video (FLV)

53. O problema do Flash® A natureza exclusiva do Flash tem sido uma preocupação para os defensores dos padrões abertos e software livre. 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. Flash Video também pode ser substituído pelo formato aberto Theora.

54. O problema do Flash® 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.

55. O problema do Flash® Executar um SWF necessita obrigatoriamente da instalação de um plugin no navegador. 97% dos usuários possuem este plugin instalado. SWF gerado para versões mais recente do plugin podem não funcionar em versões antigas, exigindo atualizações do usuário; O plugin sofre constante críticas associadas a baixo desempenho e confiabilidade (lentidão, consumo elevado de CPU e travamento).

56. Defesa do Flash Há quem defenda o uso de Flash para muitas aplicações atuais. 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. http://www.flashlab.com/html5/

57. Microsoft Silverlight® Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight. 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...)

58. Microsoft Silverlight® Para concorrer com o Flash, em 2007 a Microsoft lançou o Silverlight. 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...)

59. Microsoft Silverlight® O principal problema do Silverlight é que só é executável em navegadores sob plataforma Windows e MacOS pois só a plugin para estes sistemas operacionais. 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.

60. Microsoft Silverlight® Aplicações Silverlight são geradas com o Microsoft Visual Studio ou Microsoft Expression Blend, que são ferramentas proprietárias, comerciais.

61. JavaFX É uma plataforma para RIA desenvolvida pela Sun Microsystems tentando abocanhar uma fatia deste mercado. 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.

62. JavaFX Utiliza a JavaFX Script, que é uma linguagem de script declarativa e orientada a objetos, com sintaxe simplificada para desenvolvimento de UIs. É bem diferente do Java tradicional mas já possui plugins para Eclipse e Netbeans para facilitar o desenvolvimento

63. Silverlight x Flash http://www.shinedraw.com/

64. Exercício Pesquise na Internet algumas aplicações desktop ou sites inteiros desenvolvidos e publicados nos formados Flash, Silverlight e JavaFX. http://bit.ly/exercicios05

65. Frameworks Javascript Há alguns anos já é possível criar interfaces ricas de aplicações na web com o trio HTML+CSS +JS. 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.

66. JQuery e jQueryUI jQuery é um framework javascript que combinada com o jQueryUI proporciona uma boa quantidade de recursos para uma interface do usuário consistente e eficiente. É flexível e permite ampliar o framework com desenvolvimento de plugins. É o framework mais utilizado hoje na Web. http://www.jquery.com e http://www.jqueryui.com

67. Mootools Framework criado com objetivo de prover animações e outras facilidades aos desenvolvedores javascript. http://mootools.net/

68. YUI Library Biblioteca patrocinada e mantida pelo Yahoo! http://developer.yahoo.com/yui/

69. Google Web Toolkit Biblioteca mantida pelo Google com recursos que são utilizados nas suas mais populares aplicações, como AdWords, Orkut, Gmail, Calendar, etc. http://code.google.com/webtoolkit/ http://gwt.google.com/samples/Showcase/Showcase.html#!CwCheckBox

70. ExtJS 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. http://www.sencha.com/products/extjs/

71. Tecnologias para Games e etc. Cada vez mais a web está sendo usada como plataforma de jogos, sejam eles de entretenimento ou educativos. Além do Flash e Silverlight, que já vimos, duas alternativas que podem ser usadas para criação de jogos online são: Unity WebGL Estas soluções podem ser usadas para outras necessidades de 3D

72. Unity É uma engine proprietária para jogos criada pela Unity Technologies, similar ao Blender. 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 http://unity3d.com/gallery/live-demos/tropical-paradise

73. WebGL Fornece uma interface de programação de gráficos 3D usando o elemento canvas da HTML5. O gerenciamento automático de memória é fornecida como parte da linguagem Javascript. https://www.khronos.org/registry/webgl/specs/1.0/

74. Uma defesa aos Padrões Web É possível criar muitas aplicações ricas e jogos educativos e de entretenimento com o uso combinado de padrões abertos para web. A seguir listamos vários bons exemplos disto.

75. Impact Jogo com canvas http://www.phoboslab.org/ztype/

76. Audio e Desenho Audio, Canvas da HTML5 combinado com Transforms e Transitions da CSS3: http://daftpunk.themaninblue.com/

77. Damas Jogo de Damas com jQuery e OpenGL http://usuaris.tinet.cat/jmarine/dames/

78. HelloRacer™ WebGL Um teste de carro de corrida modelado usando WebGL e que pode ser controlado pelo teclado ou mouse. http://helloracer.com/webgl/

79. Enciclopédia de Anatomia Abandone a Barsa® e vasculhe o corpo humano direto do navegador. http://www.biodigitalhuman.com/

80. Google Body Abandone a Barsa® e vasculhe o corpo humano direto do navegador. http://bodybrowser.googlelabs.com/body.html

81. Atlas Mundial OpenGL http://www.webglearth.com

82. Tem até pros gatos... Jogos para iPAd e Android usando HTML5 e CSS3 http://olhardigital.uol.com.br/jovem/games/noticias/gatos_ganham_jogos_gratuitos_para_tablet http://gamesforcats.com/

83. Mais demos de HTML5,CSS3, etc... http://www.ro.me/ http://www.beautyoftheweb.com/ http://www.chromeexperiments.com/ https://demos.mozilla.org/pt/ http://developer.apple.com/safaridemos/

84. Referências 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. O conteúdo destes slides foram baseados em documentos publicados nos seguintes sites: http://wikipedia.com/ http://www.w3.org/