O documento discute padrões e tecnologias web, abordando conceitos de interfaces de usuário, interação humano-computador, usabilidade, acessibilidade e design de interação. Destaca a importância de usar tecnologias adequadas para diferentes contextos na criação de interfaces e a evolução de linguagens como HTML, CSS e JavaScript, além de mencionar frameworks e ferramentas como jQuery e Flash. O texto enfatiza a necessidade de um conhecimento aprofundado dos fundamentos para um bom design de interfaces eficazes e inclusivas.

1. Introdução aos Padrões Web e Tecnologias para o Ambiente DigitalThiago Prado de CamposAula 228/maio/2011

2. ProgramaPadrões de Codificação e Programação de Interfaces WebConceitos de InterfaceHTML5, CSS, EcmaScript e dialetosJava, Adobe Flash, Microsoft Silverlight, JavaFXFrameworks JavaScript – jQuery e YUI

3. CONCEITOS DE INTERFACEIntroduçã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 sistemasUI é 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-ComputadorIHC é 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çãoDI é 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íficaDI é 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 UIAffordanceUsabilidadeAcessibilidadeComunicabilidade...

10. AffordanceAffordance é 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. UsabilidadeA 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çaSaiba mais:http://www.thiagotpc.com/ux/metas-de-usabilidade-x-metas-de-experiencia-do-usuario/

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

13. AcessibilidadeResumidamente 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. AcessibilidadeO 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. ComunicabilidadeA 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 UICiência CognitivaSemióticaParadigmas/Modelos de InteraçãoErgonomiaArquitetura da InformaçãoDesign UniversalUCD...

17. Interfaces para WebSegundo 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 WebPara facilitar o entendimento Garret, estabelece dois conceitos de funcionabilidade para a web:A web como interface de software orientado à tarefaA web como sistema de hipertexto orientado à informação

19. Web como Interface de SoftwareOrientado à tarefaFoco: aplicações!WebmailGoogle Docs, Office LiveDropbox, SugarSync, EvernoteGoogle Calendar

20. Web Sistema de HipertextoOrientado à InformaçãoFoco: conteúdo!Portal de NotíciasWikipediaSites InstitucionaisBlogs

21. Web Híbrida (Software e Hipertexto)Orientado parte ou em determinado contexto à Informação e em outro à TarefaRedes SociaisComércio EletrônicoIntranetsFlickr, Picasa, Youtube

22. PatternsExistem 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.comhttp://developer.yahoo.com/ypatterns/http://www.uipatterns.net/http://patterntap.com/

23. Cada tecnologia no lugar certoNingué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 certoExistem 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 certoO 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íciohttp://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 HipertextoUsando a HTML de maneira semanticamente correta estaremos propondo uma excelente solução para ambientes de hipertexto.

30. HTML para Espaço de HipertextoO 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 HipertextoTítulos: H1 ... H6Blocos: P, ADDRESS, BLOCKQUOTE, DEL, INSConteúdo de Frases: A, EM, STRONG, ABBR, CITE, QMídia Externa: IMG, OBJECTListas: UL, OL, LI, DL, DD, DTTabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP

32. HTML para Espaço de HipertextoTítulos: H1 ... H6, HGROUPBlocos: P, ADDRESS, BLOCKQUOTE, DEL, INS, HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV, FIGURE, FIGCAPTIONConteúdo de Frases: A, EM, STRONG, ABBR, CITE, Q, TIMEMídia Externa: IMG, OBJECT, AUDIO, VIDEO, TRACK, SOURCE, CANVASListas: UL, OL, LI, DL, DD, DTTabelas: TABLE, THEAD, TBODY, TFOOT, CAPTION, COL, COLGROUP

33. HTML para AplicaçõesPara 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çõesFormulários: Áreas: FORM, FIELDSETControles:INPUTText, Radio, checkbox, password, buttonSELECT/OPTION/OPTGROUPTEXTAREABUTTON

35. HTML para AplicaçõesFormulários: Áreas: FORM, FIELDSETControles:INPUTText, Radio, checkbox, password, button, tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, colorMETER, PROGRESSSELECT/OPTION/OPTGROUP/DATALISTTEXTAREABUTTONOUTPUTNovos atributos de formulários!

36. HTML para AplicaçõesNovos Atributos de FormulárioAutofocus, placeholder, required, pattern, autocomplete, max, min, multiple, ...Novas APIs e recursos!Controlar audio e video e de imagens 2D e 3DProver aplicações offline com armazenamento local no navegador ou em sistema de arquivosArrastar e soltar (drag and drop)GeolocalizaçãoManipulação do histórico de navegaçãoComunicação entre páginas e com o servidorAcesso a dispositivos periféricos

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

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

39. Função da CSSA 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. 839

40. JavaScriptJavaScript é 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. JavascriptJavascript 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 JScriptEm 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 ECMAScriptA 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. ECMAScriptA 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. ECMAScriptApesar 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. ECMAScriptA versão atual da EcmaScript é a 5.0, publicada em dez/2009http://www.ecma-international.org/publications/standards/Ecma-262.htm

47. Dialetos e NavegadoresJavascript, ECMA 3ª/5ª EdiçãoChrome, Firefox, Opera, SafariJscript, ECMA 3ª/5ª EdiçãoInternet Explorer, OperaActionScript, ECMA 4ª EdiçãoAdobe Flash

48. ExercícioVamos 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ícioCom 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 FlashHá 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. JavaFXUtiliza 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 Flashhttp://www.shinedraw.com/

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

65. Frameworks JavascriptHá 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 jQueryUIjQuery é 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. MootoolsFramework criado com objetivo de prover animações e outras facilidades aos desenvolvedores javascript.http://mootools.net/

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

69. Google Web ToolkitBiblioteca 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. ExtJSUma 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:UnityWebGLEstas 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: Wikipediahttp://unity3d.com/gallery/live-demos/tropical-paradise

73. WebGLFornece 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. ImpactJogo com canvashttp://www.phoboslab.org/ztype/

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

77. DamasJogo de Damas com jQuery e OpenGLhttp://usuaris.tinet.cat/jmarine/dames/

78. HelloRacer™ WebGLUm 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 AnatomiaAbandone a Barsa® e vasculhe o corpo humano direto do navegador.http://www.biodigitalhuman.com/

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

81. Atlas MundialOpenGLhttp://www.webglearth.com

82. Tem até pros gatos...Jogos para iPAd e Android usando HTML5 e CSS3http://olhardigital.uol.com.br/jovem/games/noticias/gatos_ganham_jogos_gratuitos_para_tablethttp://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ênciasEsta 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/