Slides das aulas de Fundamentos da Linguagem Digital - Módulo 01 - ministrada na pós graduação de Mídias Digitais, Comunicação e Mercado da Faculdade Assis Gurgacz de Cascavel

1. FUNDAMENTOS DA LINGUAGEM DIGITALMÍDIAS DIGITAIS, COMUNICAÇÃO E MERCADOFACULDADE ASSIS GURGACZ

4. O W3C – WORLD WIDE WEB CONSORTIUM

5. INFRAESTRUTURA DE INTERNET E NAVEGADORES

6. CAMADAS E TECNOLOGIAS DE CONTEÚDO PARA WEB

7. ACESSIBILIDADE E INTERFACES PARA WEB

8. FRAMEWORKS JAVASCRIPT

11. PADRÕES e LICENÇAS

15. Não dependente de royalties ou quaisquer taxas;

17. Padrões Abertos Exemplos de Padrões Abertos: Arquitetura da WWW http://www.w3.org/TR/webarch/ Peripheral Component Interconnect (PCI) Especificação da Intel paraconexão de computadorestipo IBM-PC. Formato de Documentos: ODF, OOXML, PNG, PDF Linguagens de Programação: C#, ANSI C

18. Padrões Abertos “os padrões abertos são importantes para ajudar a criar soluções interoperáveis e acessíveis para todos. Eles também promovem concorrência sadia através do campo técnico ao nível de todos os players de mercado. Isto significa baixo custo para as empresas e, finalmente, para o consumidor.” ErkkiLiikanen, União Européia

20. Possui aceitação pública generalizada mas não cumpre os requisitos para ser aberto.

23. Padrões Fechados iTunes Music Store da Apple tem sido um padrão de fato no negócio da música online, ultrapassando em 2008 a Wal-Mart. É uma plataforma proprietária da Apple, em que baseia a sua oferta de meios de comunicação.

24. E Open Source (Código Aberto)? Descreve a prática de software desenvolvido de forma que permita que qualquer pessoa tenha acesso ao código do programa, mas seu desenvolvedor determina suas condições de uso. O acesso ao código fonte nem sempre significa que é permitido cópia, modificação e redistribuição.

25. E Open Source (Código Aberto)? Exemplos: Linguagens de Programação: PHP, Python Sistemas Operacionais: Linux, FreeBSD Aplicações para Web: Apache, Tomcat, MediaWiki, Drupal, Joomla, Wordpress, Moodle, Mozilla Firefox, OpenOffice.org, 7-ZIP Contra-Exemplo: Symbian http://symbian.nokia.com/blog/2011/04/04/not-open-source-just-open-for-business/

26. E Open Source (Código Aberto)? Vantagem do open source Facilita a compreensão do funcionamento do software e pode permitir contribuir com melhorias e correções.

27. E Software Livre? Software livre (free software) é um conceito de extrema importância no mundo da computação. Para estar nesta condição, o software precisa ter características atreladas a aspectos de liberdade. Pode-se dizer, portanto, que o software livre é um movimento social, que defende uma causa.

28. E Software Livre? A ideia começou a tomar forma em 1983, pelas mãos de Richard Stallman, que na época criou o GNU e, cerca de dois anos depois, fundou a Free Software Foundation (FSF).

29. Fundamentos do Software Livre Liberdade de executar o programa, para qualquer propósito; estudar como o programa funciona e adaptá-lo às suas necessidades (exige open source) distribuir cópias de forma que você possa ajudar ao seu próximo; liberdade de melhorar o programa e liberar os seus aperfeiçoamentos, de modo que toda a comunidade se beneficie (exige open source)

30. Software Livre vs. Open Source Todo Software Livre é open source. Nem todo programa open source é Software Livre. Exemplos: Mozilla Firefox é open source mas não é software livre. Ele usa a “Mozilla PublicLicense” que diz que se um software teve fonte alterado terá que ser distribuído com outro nome.

31. Freeware (Software Gratuito) É um software que é disponibilizado sem custo. Não necessariamente é open source ou software livre.

32. Licenças Quando um software é criado, o desenvolvedor o associa a um documento que determina quais ações o utilizador pode ou não executar. Esta é a licença de software. Licenças: Copyright GNU Copyleft CreativeCommons

36. Creative Commons As licenças são disponibilizadas em 3 camadas: licença jurídica, legível por humanos e legível por máquinas. Isto é, o conteúdo é o mesmo mas com público diferente em cada formato.

37. VÍDEO CREATIVE COMMONS

38. Exercício 01 Acesse o exercício em http://vai.nitrum.com.br/mcm01

39. O W3C – WORLD WIDE WEB CONSORTIUM

41. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.O W3C desenvolve padrões para a criação e a interpretação dos conteúdos para a Web.

43. Os grupos de trabalho criam esboços e propostas de recomendações , baseados em um consenso comum de companhias e organizações interessadas na criação de aplicações Web.

45. W3C – Ciclo de Vida Cria-se um WorkingGroup para discussão sobre um assunto. O grupo propõe uma recomendação, através de um Working Draft O Working Draft pode sofrer alterações conforme contribuições recebidas. Quando o grupo achar conveniente, publica um LastCall for Working Draft, como sendo última oportunidade de opinar sobre o rascunho

47. W3C – Outros Docs A W3C, através dos WorkingGroups e colaboradores também publica outros tipos de documentos: Artigos – podem ser do tipo QualityAssurance (ex.: My Web site is standard! And yours?), FAQs (Ex.: HTML and XHTML Frequently Answered Questions) ou informativos diversos. InterestGroup Note – tutoriais (Ex.: Tableless layout HOWTO), guias e diretrizes (Ex.: HTML 4.0 Guidelines for Mobile Access), etc.

48. EXERCÍCIO 02 Acesse o exercício em http://vai.nitrum.com.br/mcm02

49. Infraestrutura de internet e navegadores

52. Inicia requisições

53. Espera para receber respostas

54. Normalmente, conecta-se à um número pequeno de servidores ao mesmo tempo

56. É passivo (escravo)

57. Espera por requisições dos clientes

58. Após receber requisições, processa e então envia respostas

59. Normalmente aceita conexões de um grande número de clientes

61. Cliente-Servidor / Exemplos

62. Serviços de Internet Web não é Internet! A Internet possui diversos serviços. A World Wide Web (conhecido também como Web) é o nome do serviço mais popular da Internet. Por esse motivo, é freqüentemente confundida com a própria Internet. Internet é o nome dado ao conjunto de computadores, provedores de acesso, satélites, cabos e serviços que formam uma rede mundial baseada em uma coleção de protocolos de comunicação conhecidas como TCP/IP.

63. Serviços de Internet PROTOCOLOS É através de protocolos de comunicação que um computador pode se comunicar com outro através de uma linha telefônica ou placa de rede sem que o usuário precise se preocupar em saber qual o meio físico que está sendo utilizado. TCP/IP é um conjunto de protocolos padrão que foi adotado como ‘língua oficial’ da Internet.

64. Como Funciona o TCP/IP servidor cliente mensagem segmento datagrama quadro/frame

65. Como Funciona o TCP/IP Camada 4 – Protocolos de Aplicação oferecem serviços de acesso remoto (telnet), e-mail (POP e SMTP), transferência de arquivos (FTP), serviço de nomes (DNS), serviço web (HTTP), entre outros. Lidam com a comunicação aparente entre duas aplicações rodando em computadores diferentes. Camada 3 – Protocolos de Transporte realiza a transferência dos dados organizados em pacotes de uma máquina para outra. Pode ser confiável (TCP) ou não confiável (UDP).

66. Como Funciona o TCP/IP Camada 2 – Protocolos de Nível de Internet identificam as máquinas e pacotes através de endereços IP de origem e destino. Camada 1 – Protocolos de Camada Rede/Física interfaceia e realiza a transmissão dos dados através da linha telefônica, placas e cabos de rede, etc.

70. Este serviço guarda tabelas que associam o nome de uma máquina ou de uma rede à um endereço IP. Quando você digita o nome de uma máquina no seu navegador, o browser primeiro tenta localizá-lo consultando uma outra máquina (cujo IP o navegador já conhece) que oferece o serviço de nomes.

72. As portas são identificadas por números e para facilitar, várias portas para determinados serviços foram padronizadas. Para ter acesso a um serviço, é preciso que a aplicação cliente saiba conversar na língua de uma aplicação servidora.

75. O hipertexto baseia-se em ligações entre dois pontos, chamados de âncoras. As ligações entre as âncoras são chamadas de vínculos (links).

77. Servidor Web O serviço HTTP funciona de forma semelhante ao serviço FTP (File TransferProtocol – protocolo de transferência de arquivos), oferecendo aos seus clientes um conjunto de arquivos e recursos que podem ser transferidos para seus programas clientes que o interpretam e exibem ao usuário. Servidores Web mais comuns: APACHE (para Linux) e IIS (para Windows)

78. URI - UniformResourceIdentifier É um endereço que sintaticamente representa um recurso presente na Internet. Contém duas informações essenciais: COMO transferir o objeto (o protocolo) e ONDE encontrá-lo (máquina, porta e caminho virtual) Sintaxe: protocolo://maquina:porta/caminho/recurso Exemplos: http://www.nitrum.com.br/emails/mbamktdigital/mbamktdigital.html http://intranet:8081/pedidos ftp://usuario:senha@maquina.com/pub/arquivo.doc mailto:giuliano@nitrum.com.br

79. Protocolo HTTP - códigos Toda requisição HTTP recebe um cabeçalho de resposta, que contém um Código e uma Frase, pelo menos. O elemento Status-Code é um código de inteiro de 3 dígitos do resultado da tentativa do servidor em entender e processar a requisição (request). Estes códigos são definidos em detalhes na seção 10 da RFC 2616 (http://www.w3.org/Protocols/rfc2616/rfc2616.html). A Reason-Phrase visa fornecer uma breve descrição textual do Status-Code. O Status-Code é voltado para a interpretação automatizada (programa cliente) e a Reason-Phrase é voltada para o usuário humano. O cliente HTTP não precisa necessariamente examinar ou exibir a Reason-Phrase.

80. Protocolo HTTP - códigos O primeiro dígito do Status-Code define a classe da resposta. Os 2 dígitos finais definem um significado específico. 1xx: Informacional - Requisição recebida, processo continua; 2xx: Sucesso - recebida, compreendida e aceita com sucesso; 3xx: Redirecionamento (Transitório) - Deve haver ação consecutiva para que a requisição seja completada; 4xx: Erro Cliente - A requisição enviada pelo cliente contém sintaxe errada ou não pode ser atendida; 5xx: Erro Servidor - O servidor falhou em atender requisição aparentemente válida. Erros e exceções em programas (Java, .NET, PHP etc.) e servidores são casos típicos destes erros.

81. Protocolo HTTP - códigos 100 - Continue 101 - Switching Protocols 200 - OK 201 - Created 202 - Accepted 203 - Non-Authoritative Information 204 - No Content 205 - Reset Content 206 - Partial Content 300 - Multiple Choices 301 - Moved Permanently 302 - Found, Moved Temporarily 303 - See Other 304 - Not Modified 305 - Use Proxy 307 - Temporary Redirect 400 - Bad Request 401 - Unauthorized 402 - Payment Required 403 - Forbidden 404 - Not Found 405 - Method Not Allowed 406 - Not Acceptable 407 - Proxy Authentication Required 408 - Request Time-out 409 - Conflict 410 - Gone 411 - Length Required 412 - Precondition Failed 413 - Request Entity Too Large 414 - Request-URI Too Large 415 - Unsupported Media Type 416 - Requested range not satisfiable 417 - Expectation Failed 500 - Internal Server Error 501 - Not Implemented 502 - Bad Gateway 503 - Service Unavailable 504 - Gateway Time-out 505 - HTTP Version not supported

83. Ele é um cliente HTTP. A principal função do navegador é ler e exibir o conteúdo de uma página.

85. Nestcape Navigator Início: 15/dez/1994 Dominou o marketshare de navegadores nos anos 90 e praticamente sucumbiu em 2002. Sua última versão foi o Netscape Navigator 9, lançado em 2007. Em Dez/2007, foi anunciado o fim do projeto. O suporte ao navegador foi prestado pela AOL até Fev/2008.

86. Internet Explorer Início: ago/1995 Domina atualmente o marketshare de navegadores. A última versão estável é a 9 (fev/2011). Atualmente a versão 10 está em desenvolvimento.

87. Firefox Início: 9/nov/2004 Baseado no motor open-sourceGecko desenvolvido pela fundação Mozilla. Hoje tem a segunda colocação do marketshare de navegadores. A última versão estável é a 4.0.

88. Opera Início: 1996 É um dos navegadores mais aderentes aos padrões web e popular em dispositivos móveis (OperaMini). Proprietário. A última versão estável é a 11.1.

89. Safari Início: 23/jun/2003 Baseado no motor KHTML opensource, é desenvolvido pela Apple e tem grande uso no sistema operacional Mac, no iPad, iPod e iPhone. A última versão estável é a 5.0.

90. Chrome Início: Set/2008 É o navegador mantido pelo Google. O mais caçula dentre eles. Sua atual versão é a 11.0.

91. Market share de Navegadores http://gs.statcounter.com/#browser-ww-monthly-200812-201105

92. A EVOLUÇÃO DA INTERNET http://evolutionofweb.appspot.com

93. CAMADAS E TECNOLOGIAS DE CONTEÚDO PARA WEB

94. Desenvolvimento Web SERVIDOR CLIENTE CLIENTE CLIENTE CLIENTE

95. Desenvolvimento Web Sistema Operacional Windows, Linux, FreeBSD Servidor Web IIS, Apache, Tomcat Banco de Dados SQL Server, Oracle, MySQL, PostgreSQL Linguagem de Programação Perl, ASP, ASP.NET, PHP, Java, Python, Ruby, Coldfusion

96. Sistema Operacional Plataforma que será utilizada no servidor que hospedará o site. É ele que permite utilização do servidor web, de banco de dados e linguagem de programação. Opções: Linux: software livre Windows: software proprietário

97. Servidor Web Servidor que se comunicará com os clientes web (navegadores) atendendo as solicitações de páginas e envio de informações por formulários. Opções mais comum: Apache (para Linux e Windows), Software Livre IIS (somente Windows), Proprietário Tomcat (Linux e Windows), Software Livre

98. Banco de Dados Serviço que armazenará tabelas com registros de informações sobre o site, como usuários, produtos, pedidos, etc. Opções mais comuns: MySQL, opensource, Windows e Linux PostgreSQL, Software Livre, Window s e Linux MS SQL Server, proprietário, somente Windows

99. Linguagem de Programação Tecnologia que irá tratar as informações enviadas pelos navegadores podendo armazená-las ou recuperá-las do banco de dados, enviar e-mails, etc. Opções disponíveis: Java, PHP, Python, Ruby, Perl - livres C# (.net) – open source VBScript (ASP), Visual Basic.net - proprietárias

100. Linguagem de Programação Linguagens de programação mais populares e mais utilizadas no mundo: http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html http://langpop.com/

101. Desenvolvimento Web Conteúdo HTML, XML, JSON, SVG, ..., Imagens (JPEG, GIF, PNG) Apresentação CSS, Imagens (JPEG, GIF, PNG) Comportamento Javascript Tudo em 1 Flash, Silverlight, Java, Objective-C

102. Desenvolvimento Web

103. Desenvolvimento em Camadas Conteúdo Camada responsável pela informação. A mais importante. Formatos: HTML, XML, SVG, MATHML, etc. Apresentação Camada responsável por apresentar o conteúdo ao usuário, através do navegador, impressora ou leitor de tela. Formato: CSS Comportamento Responsável em controlar o comportamento do conteúdo e da apresentação conforme interação realizada pelo usuário. Formato: Ecmascript (javascript) HTML, CSS e EcmaScript são livres e interpretados por qualquer navegador. 85

104. Tudo em 1 Java (applets), Flash Movie, Silverlight, Objective-C Prós: Geralmente possuem um bom ambiente de desenvolvimento (IDE); Contra: Não são padrões livres; Não provém boa acessibilidade. Necessita de algo a mais no navegador. 86

108. Também pode ser usada para transformar dados em objetos estruturados, como imagens, músicas, espaços 3D, etc.

109. HTML, SVG, VRML, MathML, RTF, LaTex

110. Criada para expressar uma computação que pode ser executada por uma máquina, particularmente, um computador.

111. São usadas para criar programas que controlam o comportamento de uma máquina.

112. Python, PHP, Java, Javascript89

114. HTML 2 – lançada em 1995 pela IETF

115. HTML 3 – não foi aprovada

116. HTML 3.2 – lançada em 1997 pela W3C

117. HTML 4 – em 1999, pela W3C

118. XHTML 1 – em 2000, trata-se do HTML4 em XML

119. XHTML 1.1 – recomendação somente em nov/2010

120. XHTML 2 – abandonada em 2009

121. HTML 5 – em desenvolvimento desde 2007.90

123. HTML 2 – lançada em 1995 pela IETF

124. HTML 3 – não foi aprovada

125. HTML 3.2 – lançada em 1997 pela W3C

126. HTML 4 – em 1999, pela W3C

127. XHTML 1 – em 2000, trata-se do HTML4 em XML

128. XHTML 1.1 – recomendação somente em nov/2010

129. XHTML 2 – abandonada em 2009

130. HTML 5 – em desenvolvimento desde 2007.91

131. HTML 5 Descontente com o que estavam acompanhando no WorkingGroup do XHTML2, fabricantes de navegadores se reuniram em 2004 e fundaram a WHATWG (Apple, Mozilla, Opera). Adobe e Microsoft inicialmente ficaram de fora. O objetivo do HTML5 é tornar os navegadores capazes de rodar aplicativos sob plataforma web. Mas envolve também solução para outros problemas: Áudio e Vídeo sem necessidade de plugins Banco de dados local

132. Os Players desta Guerra Microsoft ($ 39 bi / 93 mil empregados) Detêm 60% do mercado de usuários de browsers com o Internet Explorer Possui tecnologia proprietária, Silverlight, concorrente do Flash Atualmente apóia HTML5 e diz implementar no IE9 7% do mercado de smartphones Google ($ 36 bi / 20 mil empregados) Parceiro no Webkit, no qual baseia-se o Chrome (7%) Apóia HTML 5 desde o início 10% do mercado de smartphones

133. Os Players desta Guerra Apple ($ 31 bi / 34 mil empregados) Parceira majoritária no Webkit, fonte para iPhone e Safari (5%). 15% do mercado de smartphones Apóia HTML5 por estar envolvida no Webkit Recentemente “ficou de mal” com a Adobe/Flash Adobe ($ 4 bi / 8.600 empregados) Não produz navegador, mas usa o WebKit para renderizarAdobeAIR Produz o Flash (fechado, proprietário), multiplataforma Mas que consome muitos recursos no MacOS

134. Os Players desta Guerra Opera ($ 1 bi / 750 empregados) Desenvolve o Opera Browser (3% - PCs + Mobile) Foco principal: browser para smartphones, compatível com Iphones, Android, Windows Mobile (mini), Symbian (44%) e Blackberry (19%) Mozilla Corporation (< $ 1bi / 250 empregados) Produz o Firefox (24%) Apóia HTML5 desde o início

135. Os Players desta Guerra Nokia ($ 15 bi / 125 mil empregados) Celulares com Symbian e MAEMO (45% mercado) Nokia Browser baseado no WebKit RIM ($ 7bi / 12 mil empregados) Produz os Blackberrys (19% do mercado de smartphones) com SO e navegador próprios.

136. Browsers e Versões da HTML

137. Documento HTML Um documento HTML 4 é composto por duas partes distintas: um cabeçalho com uma seção declarativa um corpo contendo o atual conteúdo do documento Os espaços em branco (espaços, mudanças de linha, tabulações e comentários) poderão aparecer antes ou depois de cada seção. As seções deverão ser delimitadas pelo elemento HTML.

138. Documento HTML Eis aqui o exemplo de um documento HTML simples: <html> <head> <title>O meu primeiro documento HTML</title> </head> <body> <p>Olá Mundo!</p> </body> </html>

139. Documento HTML Agora, informando qual versão do HTML queremos que o navegador interprete. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>O meu primeiro documento HTML</title> </head> <body> <p>Olá Mundo!</p> </body> </html> 100

141. Parágrafos e Texto: <p>, <strong>, <em>, <abbr>, <a>

142. Listas: <ul>, <li>, <ol>, <dl>, <dt>, <dd>

143. Contato: <address>

144. Estrutura da Página: <header>, <footer>, <article>, <aside>, <section>

147. Um parágrafo com uma breve biografia/apresentação

148. Experiência Profissional

149. Formação Acadêmica

150. Capacitação/Atualização

153. Simplicidade e Legibilidade, tanto para humanos quanto para computadores

154. Possibilidade de criação de tags sem limitação

155. Criação de arquivos para validação de estrutura (DTDs ou XML Schema)

156. Interligação de bancos de dados distintos

159. Regras de Sintaxe da XML Nomes de elementos são CASE-SENSITIVE. Ou seja: Nome é diferente de nome. Ex.: <nome> ... </nome><Nome> ... </nome><NOME> ... </nome>

160. Distribuição de Informação com RSS RSS É um formato de distribuição de informações (como notícias) pela Internet. Com ele você fica sabendo quando uma informação do seu interesse foi publicada, sem que você tenha de navegar até o site. A abreviatura do RSS é usada para se referir aos seguintes padrões: Rich Site Summary (RSS 0.91) RDF Site Summary (RSS 0.9 e 1.0) ReallySimpleSyndication (RSS 2.0) Também existe o formato Atom 1.0.

161. Distribuição de Informação com RSS O RSS é amplamente utilizado pela comunidade dos blogs para compartilhar as suas últimas novidades ou artigos completos e até mesmo arquivos multimídia. No ano 2000, o uso do RSS difundiu-se para as maiores empresas de notícias como a Reuters, CNN, e a BBC. Estas empresas permitiam que outros websites incorporassem suas notícias e resumos através de vários acordos de uso. O RSS é usado agora para muitos propósitos, incluindo marketing, bug-reports, e qualquer outra atividade que envolva atualização ou publicação constante de conteúdos.

162. Feeds RSS O termo Feed vem do verbo em inglês "alimentar“. Os feeds RSS oferecem conteúdo Web ou resumos de conteúdo juntamente com os links para as versões completas deste conteúdo e outros metadados. Esta informação é entregue como um arquivo XML. Um tipo de programa conhecido como "feedreader" ou agregador verifica periodicamente os documentos RSS publicados e informam os usuários se houverem atualizações.

167. Um arquivo de sitemap pode ter até 50 mil URLs e 10 MB.http://sitemaps.org/

168. Exemplo de Sitemap <urlsetxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.nitrum.com.br/</loc> <lastmod>2011-09-05T23:11:14+00:00</lastmod> <changefreq>daily</changefreq> <priority>1.0</priority> </url> <url> <loc>http://www.nitrum.com.br/o-que-fazemos/</loc> <lastmod>2011-09-08T00:50:13+00:00</lastmod> <changefreq>weekly</changefreq> <priority>0.6</priority> </url> (...) </urlset>

169. 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://www.infowester.com/ http://pt.wikipedia.com/ http://www.w3.org/ http://sitemaps.org/ http://cyber.law.harvard.edu/rss/rss.html

170. Acessibilidade e interfaces para web

171. 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.

172. Acessibilidade O W3C carrega também a bandeira da Acessibilidade com o grupo WAI (Web AccessibilityInitiative) 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

173. Acessibilidade na web – custo ou benefício?

174. 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.

175. 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.

176. 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

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

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

179. 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

181. http://patternry.com

182. http://developer.yahoo.com/ypatterns/

183. http://www.uipatterns.net/

185. Ninguém usa um Fiat 147 para disputar ralis no deserto;

186. Executivos bem sucedidos de grandes empresas não costumam andar de Chevette ou Palio. Provavelmente andam num Fusion, Corolla, C4...

187. Este professor veio de ônibus por ser mais seguro para quem não conhece a estrada de Londrina a Cascavel.

189. 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.

190. Exercício 05 Acesse o exercício em http://vai.nitrum.com.br/mcm05

191. 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/

192. 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...)

193. 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...)

194. 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.

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

196. 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.

197. 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

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

199. Exercício 06 Pesquise na Internet algumas aplicações desktop ou sites inteiros desenvolvidos e publicados nos formados Flash, Silverlight e JavaFX. Liste 10 sites e identifique em cada site a tecnologia utilizada. Coloque esta lista de sites e tecnologias utilizadas em http://vai.nitrum.com.br/mcm06

200. Frameworks Javascript

201. 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.

202. 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

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

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

205. 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

206. 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/

207. Tecnologias para Games

208. Tecnologias para Games 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

209. 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

210. 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/

211. 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.

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

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

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

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

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

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

218. 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/

219. 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/

220. 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/