O documento aborda fundamentos da linguagem digital e as aulas de um curso de MBA em marketing digital coordenado por Giuliano Rodrigues de Souza, que inclui tópicos como padrões e tipos de licenças, a infraestrutura da internet e tecnologias web. Explora também conceitos de padrões abertos e fechados, open source e software livre, além de detalhar o funcionamento da web e protocolos de comunicação. A importância do W3C e dos processos de recomendação de padrões para a criação de conteúdos web também é discutida.

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

2. QUEM É GIULIANO RODRIGUES DE SOUZA?Nascido em 1980 = 31 anosDesenvolvedor Web desde 1999Licenciado em Filosofia em 2003Pós Graduado em Desenvolvimento de Aplicações para Web em 2006Sócio da NitrumComunicação e ConsultoriaCoordenador e professor do MBA em Marketing Digital e Gestão de Projetos Web da Faculdade Pitágoras de Londrinahttp://meadiciona.com/giulianoQUANDO SERÃO REALIZADAS AS AULAS?Primeiro módulo – 09 e 10/09

3. Segundo módulo – 23 e 24/09O QUE VEREMOS NO PRIMEIRO MÓDULO?PADRÕES E TIPOS DE LICENÇAS

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

9. TECNOLOGIAS PARA GAMES - UNITY, WEBGLQUAIS SERÃO OS CRITÉRIOS PARA AFERIR NOTA?25% - presença nas aulas

10. 75% - realização e entrega das atividades (individuais e em grupo) propostas pelo professor VAMOS AO CONTEÚDO!

11. PADRÕES e LICENÇAS

12. O QUE SÃO PADRÕES?Padrão é um documento aprovado por um organismo reconhecido que provê, pelo uso comum e repetitivo, regras, diretrizes ou características de produtos, processos ou serviços cuja obediência não é obrigatória.

13. Existem inúmeros exemplos de padrões em uso, cobrindo todas as áreas, desde a estabilidade térmica de fluidos hidráulicos até o tamanho de CDs ou DVDs.O que são Padrões?Padrão é um documento aprovado por um organismo reconhecido que provê, pelo uso comum e repetitivo, regras, diretrizes ou características de produtos, processos ou serviços cuja obediência não é obrigatória.

14. Existem inúmeros exemplos de padrões em uso, cobrindo todas as áreas, desde a estabilidade térmica de fluidos hidráulicos até o tamanho de CDs ou DVDs.Padrões AbertosNão há uma interpretação única para Padrões Abertos, mas em geral, costuma significar:Disponível publicamente para acesso e implementação;

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

16. Costumam ser definidos por ampla participação de empresas, instituições e profissionais do mercado.Padrões AbertosAlgumas especificações podem estar disponíveis sob alguns termos contratuais restritivas quanto ao seu uso, definidos pela organização que detêm os direitos autorais sobre elas.Neste caso, dizemos que o padrão é parcialmente aberto.Exemplos: JPEG, DDR SDRAM, H.264

17. Padrões AbertosExemplos de Padrões Abertos:Arquitetura da WWWhttp://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, PDFLinguagens 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

19. Padrões FechadosEncontra-se na literatura também os termos “Padrões Proprietários” ou “Sistemas Fechados”.

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

21. Podem ser formatos cujas especificações não estão publicamente disponíveis ou cobram royalties para implementação.Padrões FechadosSoftware licenciado sob direito exclusivo do detentor do copyright. Ao titular da licença é dado o direito de usar o software sob certas condições, mas restrito de outros usos, tais como a modificação, distribuição complementar, ou engenharia reversa.

22. Em geral são desenvolvidos por empresas privadas sem a participação da sociedade ou mercado.Padrões FechadosExemplos de Padrões FechadosSoftwares: Microsoft Windows, Adobe Flash Player, Apple iTunes, MacOS, WinRAR, MySQL, Skype protocol

23. Padrões FechadosiTunes Music Store da Apple tem sido um padrão de fatono 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, PythonSistemas Operacionais: Linux, FreeBSDAplicações para Web: Apache, Tomcat, MediaWiki, Drupal, Joomla, Wordpress, Moodle, Mozilla Firefox, OpenOffice.org, 7-ZIPContra-Exemplo: Symbianhttp://symbian.nokia.com/blog/2011/04/04/not-open-source-just-open-for-business/

26. E Open Source (Código Aberto)?Vantagem do open sourceFacilita 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 LivreLiberdade deexecutar 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 SourceTodo 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çasQuando 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:CopyrightGNUCopyleftCreativeCommons

33. Copyright ©Também denominado direito autoral ou direitos de autor.São termos que definem as restrições sobre acesso, uso e reprodução de obras literárias, artísticas ou científicas.

34. Além do documento específico aplica-se o disposto na legislação em vigor a respeito.CopyleftNo caso, a palavra "left" faz alusão a um contexto mais generoso: enquanto o copyright dá mais foco nas restrições, o copyleft se baseia nas permissões.Para entender os diversos tipos de copyleft, acesse:http://pt.wikipedia.org/wiki/CopyleftGNU Public License (GPL)Licença criada pela FSF baseada nas liberdades que ela defende. A GPL surgiu em 1989 e foi revisada em 1991 e 2007, estando atualmente na versão 3: http://www.gnu.org/licenses/gpl.html

35. Um programa não necessita obrigatoriamente de uma licença GPL para ser um software livre. É possível o uso de outras licenças, desde que compatível com as liberdades em questão. Creative CommonsIdealizadas para permitir a padronização de declarações de vontade no tocante ao licenciamento e distribuição de conteúdos culturais em geral (textos, músicas, imagens, filmes e outros), de modo a facilitar seu compartilhamento e recombinação.http://creativecommons.org/licenses/?lang=pt

36. Creative CommonsAs 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 01Acesse o exercício em http://vai.nitrum.com.br/mcm01

39. O W3C – WORLD WIDE WEB CONSORTIUM

40. W3C – www.w3c.orgO World Wide Web Consortium é um consórcio de empresas de tecnologia, atualmente com cerca de 500 membros.

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.

42. W3C – www.w3c.orgAs recomendações do W3C são desenvolvidas por grupos de trabalho formados por membros do Consórcio e experts convidados.

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.

44. Estas são então submetidas à apreciação dos membros do W3C e seu diretor para aprovação formal como uma Recomendação. W3C – Ciclo de VidaRecommendationProposed toRecommendationCandidate forRecommendationLastCall forWorking DraftWorking Drafthttp://www.w3.org/Consortium/Process/

45. W3C – Ciclo de VidaCria-se um WorkingGroup para discussão sobre um assunto.O grupo propõe uma recomendação, através de um Working DraftO 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

46. W3C – Ciclo de VidaApós todos darem suas últimas contribuições o documento é convertido para Candidate Recommendation. É uma versão estável do WD. Ela é proposta para a comunidade experimentar sua implementação e dar feedbacks.Aqui acontece o Call for Implementation, para apresentação das implementaçõesApós os feedbacks e experiência, o documento passa ao status de ProposedRecommendation e é submetido a um comitê consultivo para revisão.Após aprovação pelo comitê, finalmente, o documento é então publicado como Recommendation.

47. W3C – Outros DocsA 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 02Acesse o exercício em http://vai.nitrum.com.br/mcm02

49. Infraestrutura de internet e navegadores

50. Arquitetura Cliente/ServidorCliente-servidoré um modelo computacional que separa clientes e servidores, sendo interligados entre si geralmente utilizando-se uma rede de computadores.

51. Cada instância de um cliente pode enviar requisições de dados para algum dos servidores conectados e esperar pela resposta. Por sua vez, algum dos servidores disponíveis pode aceitar tais requisições, processá-las e retornar o resultado para o cliente. Características do ClienteQuem envia requisição é conhecido como cliente

52. Inicia requisições

53. Espera para receber respostas

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

55. Comumente Interage diretamente com usuário final usando uma interface gráficaCaracterísticas do ServidorQuem recebe requisições enviadas pelo cliente é conhecido como servidor

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

60. Comumente não interage diretamente com usuários finaisCliente-Servidor / Exemplos

61. Cliente-Servidor / Exemplos

62. Serviços de InternetWeb 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 InternetPROTOCOLOSÉ 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/IPservidorclientemensagemsegmentodatagramaquadro/frame

65. Como Funciona o TCP/IPCamada 4 – Protocolos de Aplicaçãooferecem 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 Transporterealiza 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/IPCamada 2 – Protocolos de Nível de Internetidentificam as máquinas e pacotes através de endereços IP de origem e destino. Camada 1 – Protocolos de Camada Rede/Físicainterfaceia e realiza a transmissão dos dados através da linha telefônica, placas e cabos de rede, etc.

67. Endereço de Internet (IP)O Protocolo IP (Internet Protocol) é um dos mais importantes no TCP/IP. Ele define a forma de endereçamento que permite a localização de um computador na Internet, através de um conjunto de dígitos chamado de endereço IP.

68. Qualquer máquina acessível através da Internet tem um endereço IP exclusivo, podendo ser temporário ou permanente. Endereço de Internet (IP)Computadores que hospedam páginas Web e que oferecem outros serviços de internet precisam de um endereço IP, para que você possa localizá-los a qualquer hora. O endereço IP do site da FAG (www.fag.edu.br) é 200.96.36.2O endereço IP do servidor que hospeda o site www.nitrum.com.br é 187.1.140.30.

69. Serviço de Nomes de Domínio (DNS)Para facilitar o acesso aos computadores da Internet e evitar a necessidade de se decorar números IP é que foi criado o DNS.

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.

71. Se esse serviço de nomes falhar, o navegador não conseguirá o número IP que precisa e assim não localizará a máquina correspondente. PortasUma mesma máquina pode oferecer vários serviços, desde que em portas diferentes, como um prédio de escritórios.

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.

73. Como são portas padronizadas, um cliente muitas vezes só precisa saber o nome ou endereço IP da máquina que tem determinado serviço. É o que ocorre com os navegadores.WebA World Wide Web é um serviço TCP/IP baseado no protocolo de nível de aplicação HTTP (HyperTextTransferProtocol – Protocolo de Transferência de Hipertexto). É o meio virtual formado pelos servidores HTTP (servidores web), clientes HTTP (navegadores) e protocolo HTTP (regras de comunicação entre cliente e servidor).

74. HipertextoÉ uma forma não-linear de publicação de informações onde palavras que aparecem no texto podem levar a outras seções de um documento, outros documentos ou até outros sistemas de informação, fugindo da estrutura linear original de um texto simples.

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

76. Para Web, escolheu-se como linguagem declarativa de hipertextos o HTML (HyperTextMarkupLanguage).Hipertexto

77. Servidor WebO 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/recursoExemplos:http://www.nitrum.com.br/emails/mbamktdigital/mbamktdigital.htmlhttp://intranet:8081/pedidosftp://usuario:senha@maquina.com/pub/arquivo.docmailto:giuliano@nitrum.com.br

79. Protocolo HTTP - códigosToda 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ódigosO 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ódigos100 - Continue 101 - Switching Protocols 200 - OK201 - Created202 - Accepted203 - Non-Authoritative Information 204 - No Content205 - Reset Content 206 - Partial Content 300 - Multiple Choices 301 - Moved Permanently302 - Found, Moved Temporarily303 - See Other 304 - Not Modified305 - Use Proxy 307 - Temporary Redirect 400 - Bad Request401 - Unauthorized402 - Payment Required 403 - Forbidden404 - Not Found405 - 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 satisfiable417 - Expectation Failed 500 - Internal Server Error501 - Not Implemented502 - Bad Gateway503 - Service Unavailable504 - Gateway Time-out 505 - HTTP Version not supported

82. Navegador (browser)É um programa que serve de interface universal a todos os serviços que podem ser oferecidos via Web.

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

84. Navegadores podem ser usados para abrir páginas armazenadas localmente no computador. Neste caso, não estão atuando como clientes HTTP e sim como interpretadores de arquivos hipertexto.Navegador (browser)Precisa interpretar vários tipos de arquivos que são enviados para ele pelo servidor web:arquivos em formato de texto, como HTML, XML, CSS, XSL, SVG, Javascript etc.; arquivos binários, como imagens GIF, JPG, PNG, e programas Java, Flash, dentre outros. Quando envia o arquivo o servidor web informa ao navegador o tipo MIME do arquivo.Código ASP, PHP, .net, Java, Python, ColdFusion não é interpretado pelo navegador.

85. Nestcape NavigatorInício: 15/dez/1994Dominou 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 ExplorerInício: ago/1995Domina atualmente o marketshare de navegadores. A última versão estável é a 9 (fev/2011).Atualmente a versão 10 está em desenvolvimento.

87. FirefoxInício: 9/nov/2004Baseado 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. OperaIní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. SafariInício: 23/jun/2003Baseado 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. ChromeIní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 Navegadoreshttp://gs.statcounter.com/#browser-ww-monthly-200812-201105

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

93. CAMADAS E TECNOLOGIAS DE CONTEÚDO PARA WEB

94. Desenvolvimento WebSERVIDORCLIENTECLIENTECLIENTECLIENTE

95. Desenvolvimento WebSistema OperacionalWindows, Linux, FreeBSDServidor WebIIS, Apache, TomcatBanco de DadosSQL Server, Oracle, MySQL, PostgreSQLLinguagem de ProgramaçãoPerl, ASP, ASP.NET, PHP, Java, Python, Ruby, Coldfusion

96. Sistema OperacionalPlataforma 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 livreWindows: software proprietário

97. Servidor WebServidor 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 LivreIIS (somente Windows), ProprietárioTomcat (Linux e Windows), Software Livre

98. Banco de DadosServiç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 LinuxPostgreSQL, Software Livre, Window s e LinuxMS SQL Server, proprietário, somente Windows

99. Linguagem de ProgramaçãoTecnologia 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 - livresC# (.net) – open sourceVBScript (ASP), Visual Basic.net - proprietárias

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

101. Desenvolvimento WebConteúdoHTML, XML, JSON, SVG, ..., Imagens (JPEG, GIF, PNG)ApresentaçãoCSS, Imagens (JPEG, GIF, PNG)ComportamentoJavascriptTudo em 1Flash, Silverlight, Java, Objective-C

102. Desenvolvimento Web

103. Desenvolvimento em CamadasConteúdoCamada responsável pela informação. A mais importante.Formatos: HTML, XML, SVG, MATHML, etc.ApresentaçãoCamada responsável por apresentar o conteúdo ao usuário, através do navegador, impressora ou leitor de tela.Formato: CSSComportamentoResponsá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 1Java (applets), Flash Movie, Silverlight, Objective-CPró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

105. Conteúdo para WebA camada de conteúdo É A MAIS IMPORTANTE!

106. A principal tecnologia utilizada na camada de conteúdo é a HTML, que estudaremos com maiores detalhes a seguir.HTML – HyperTEXTmarkuplanguageHTML é a linguagem para descrever a estrutura de páginas web. Possibilita aos autores:Publicar documentos on-line com títulos, texto, tabelas, listas, fotos, etc.Recuperar informação on-line através de links de hipertexto, com o clique de um botão.Criar formulários para a realização de transações com serviços remotos, para uso em busca de informações, fazer reservas, encomenda de produtos, etcIncluir planilhas, clips de vídeo, clips de som e outras aplicações diretamente em seus documentos.Com a HTML, os autores descrevem a estrutura das páginas usando a marcação. Os elementos da linguagem são rótulo de conteúdo, tais como “parágrafo", "lista", “tabela", e assim por diante.88

107. LinguagemMarcação versus ProgramaçãoCriada para transformar texto puro em um documento estruturado.

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

113. Versões da HTML para hoje!HTML 1 – criado entre 1990-1991, por Tim Berners Lee

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

122. Versões da HTML para hoje!HTML 1 – criado entre 1990-1991, por Tim Berners Lee

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 5Descontente 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 pluginsBanco de dados local

132. Os Players desta GuerraMicrosoft ($ 39 bi / 93 mil empregados)Detêm 60% do mercado de usuários de browsers com o Internet ExplorerPossui tecnologia proprietária, Silverlight, concorrente do FlashAtualmente apóia HTML5 e diz implementar no IE97% do mercado de smartphonesGoogle ($ 36 bi / 20 mil empregados)Parceiro no Webkit, no qual baseia-se o Chrome (7%)Apóia HTML 5 desde o início10% do mercado de smartphones

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

134. Os Players desta GuerraOpera ($ 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 GuerraNokia ($ 15 bi / 125 mil empregados)Celulares com Symbian e MAEMO (45% mercado)Nokia Browser baseado no WebKitRIM ($ 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 HTMLUm documento HTML 4 é composto por duas partes distintas:um cabeçalho com uma seção declarativaum corpo contendo o atual conteúdo do documentoOs 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 HTMLEis 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 HTMLAgora, 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

140. Alguns elementos da HTMLTítulos: <h1>, <h2>, ... <h6>

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>

145. Embutir mídia: <img>, <object>, <audio>, <video>, <canvas>, <svg>, <math>Exercício 03Vamos criar um documento HTML para entender a lógica de estruturação de uma linguagem de marcação.Tema: um currículo pessoal

146. ExercícioSeu Nome

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

148. Experiência Profissional

149. Formação Acadêmica

150. Capacitação/Atualização

151. ContatoXMLXML resumidamente é uma maneira de escrever documentos de marcação.A HTML pode seguir estas regras de sintaxe que a permite ser chamada de XHTML.Algumas outras linguagens seguem a sintaxe XML mas possuem propósito ligeiramente diferente da HTML:RSS, MathML, SVG, Sitemap, etc.

152. Filosofias da XMLSeparar conteúdo da formataçã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

157. Concentração na estrutura da informação, e não na sua aparênciaRegras de Sintaxe da XMLDeve possuir um único elemento raiz. Ou seja, a mesma tag deve iniciar e encerrar o documento.

158. O elemento raiz pode ser precedido por uma opcional declaração XML. <?xml version="1.0" encoding="UTF-8"?>Dentro do elemento raiz podem haver quantos elementos forem necessários.Regras de Sintaxe da XMLA sintaxe básica de um elemento é:<nome atributo=“valor”> Conteúdo </nome>Os valores de atributos devem estar entre aspas (simples ou duplas) e cada atributo deve aparecer somente uma vez num elemento.Os elementos na XML devem estar corretamente encaixado. Ou seja, o último elemento iniciado é o primeiro a ser fechado. Ex.:<pessoa><nome>Thiago</pessoa></nome><pessoa><nome>Thiago</nome></pessoa>

159. Regras de Sintaxe da XMLNomes 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 RSSRSS É 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 RSSO 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 RSSO 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.

163. Feeds RSSOs agregadores podem ser programas independentes, extensões de navegadores ou correio-eletrônicos ou ainda aplicações web.