Formação Profissional em Computação - Padrões importantes da Web, HTML5, CSS3, JSON

[MÚSICA] [MÚSICA] >> [ALESSANDRA] OLÁ, PESSOAL! SEJAM TODOS BEM-VINDOS À SEMANA QUATRO DA DISCIPLINA FORMAÇÃO PROFISSIONAL EM COMPUTAÇÃO. NESSA SEMANA, NÓS IREMOS FALAR SOBRE PADRÕES CLÁSSICOS DA WEB, FRAMEWORKS, QUE SÃO UTILIZADOS PARA A GENTE TRABALHAR E INTERAGIR NA WEB.

ENTÃO, NESSAS SEMANAS, VOCÊS VÃO SE RECORDAR DE ALGUNS FATOS HISTÓRICOS DA INTERNET E ALGUNS PADRÕES QUE VOCÊS CONHECERAM, OUTROS QUE VOCÊS VÃO CONHECER, QUE SÃO IMPORTANTES E INDISPENSÁVEIS PARA O DESENVOLVIMENTO DAS APLICAÇÕES MODERNAS. SERÃO APRESENTADOS TAMBÉM, NA PRÓXIMA SEMANA, CONCEITOS DE BIBLIOTECA E FRAMEWORKS QUE VISAM FACILITAR A SUA EXPERIÊNCIA NA IMPLEMENTAÇÃO DOS SEUS APLICATIVOS. NO FINAL DESSA SEMANA, A GENTE ESPERA QUE VOCÊS SEJAM CAPAZES DE IDENTIFICAR CARACTERÍSTICAS DESSES FRAMEWORKS DE DESENVOLVIMENTO, DE MODO QUE VOCÊS POSSAM FAZER ESCOLHAS DE FERRAMENTAS ADEQUADAS PARA O DESENVOLVIMENTO DE SOLUÇÕES WEB.

ENTÃO, VAMOS LÁ, PESSOAL. INICIANDO A QUESTÃO DA HISTÓRIA, O PRIMEIRO NOME QUE A GENTE OUVE FALAR NA HISTÓRIA É DE VANNEVAR BUSH. O VANNEVAR, EM 1945, JÁ DEFINIU ALGUMA COISA QUE FOI CHAMADA DE HIPERTEXTO.

O MEMEX TINHA UMA IDEIA DE IMITAR A FORMA COMO NÓS, HUMANOS, FAZEMOS RECUPERAÇÃO DE INFORMAÇÃO, ENTÃO ELE PENSAVA QUE A GENTE ASSOCIAVA A INFORMAÇÃO E RECUPERAVA. E OS DOCUMENTOS CONVENCIONAIS CORRESPONDEM AÍ, NA VERDADE, A VERSÃO LINEAR DESSAS INFORMAÇÕES, A ASSOCIAÇÃO DESSES DOCUMENTOS É LINEAR. ESSE TRECHO DO BUSH MOSTRA BEM ESSA IDEIA.

>> [ALESSANDRA] ENTÃO, VOCÊS VEJAM ISSO QUE INTERESSANTE. A GENTE PENSA DE MANEIRA ASSOCIATIVA E, NA MAIORIA DAS VEZES, A GENTE ESCREVE DE MANEIRA LINEAR. ENTÃO, BUSH JÁ ESTAVA TENTANDO PENSAR NESSA MANEIRA DE ASSOCIAR AS INFORMAÇÕES.

EM 1965, O TED NELSON CRIOU O TERMO. ENTÃO, O BUSH É CONSIDERADO O INVENTOR DA ALMA DO HIPERTEXTO, DA IDEIA, E O NELSON CRIOU O TERMO HIPERTEXTO E ELE PROPÔS ISSO NO SISTEMA XANADU, QUE DEVERIA SUPORTAR O ACESSO DO ARMAZENAMENTO DOS HIPERDOCUMENTOS, QUE ARMAZENAVAM ESSES HIPERTEXTOS EM TODO O MUNDO DE FORMA TRANSPARENTE, PENSANDO HOJE O QUE SERIA SIMILAR AÍ A "WWW", QUE A GENTE VEIO A CONHECER DEPOIS DO TIM BERNERS-LEE. SEGUINDO NESSA HISTÓRIA, EM 68, A GENTE TEM UM OUTRO MARCO IMPORTANTE NESSE DESENVOLVIMENTO DA WEB, QUE FOI FEITO PELO DOUGLAS ENGELBART.

SE VOCÊS ENTRAREM NESSE LINK QUE APARECE AÍ NA TELA DE VOCÊS, É AQUELA PRIMEIRA CONEXÃO QUE HOUVE ENTRE A UNIVERSIDADE DA CALIFÓRNIA E DA FLÓRIDA, ONDE ELES ESTAVAM FAZENDO UM SINCRONISMO, ELES ESTAVAM NUM EDITOR DE TEXTO, MOSTRANDO A CONEXÃO AO VIVO ENTRE AS DUAS UNIVERSIDADES, ONDE ELES MANIPULAVAM JUNTOS ESSA FIGURA. E SE VOCÊS FICAREM ATENTOS, VOCÊS VÃO VER QUE TEM UM PONTINHO LÁ, QUE ERA, NA VERDADE, NÃO ERA O DESTAQUE DA APRESENTAÇÃO, MAS QUE JÁ ERA O MOUSE. ENTÃO, POR ISSO, O DOUGLAS ENGELBART É CONSIDERADO O PAI DA COMPUTAÇÃO INTERATIVA, PORQUE ELE FOI O INVENTOR DO MOUSE.

ENTÃO VALE A PENA, QUANDO VOCÊS TIVEREM UM TEMPO, ENTREM AÍ NESSE LINK E VEJAM ESSA TRANSMISSÃO, QUE É FANTÁSTICA, É UM FATO HISTÓRICO BASTANTE RELEVANTE. SEGUINDO NA HISTÓRIA, AGORA UMA HISTÓRIA MAIS ATUAL, NÓS PULAMOS PARA 1989 E NÃO PODEMOS DEIXAR DE CITAR TIM BERNERS-LEE. ELE APRESENTA, JUNTO AO CERN, ONDE ELE TRABALHAVA, A PROPOSTA DE UM SISTEMA CHAMADO MESH.

A IDEIA ERA QUE O MESH SUPORTASSE UMA ARQUITETURA CLIENTE-SERVIDOR QUE DEVERIA PROVER UMA INTERFACE PARA O CLIENTE, UMA INTERFACE QUE PERMITIU ACESSO À INFORMAÇÃO INDEPENDENTE DO AMBIENTE COMPUTACIONAL, INDEPENDENTE DO SERVIDOR NA QUAL ESSA INFORMAÇÃO TIVESSE ARMAZENADA. NESSE CONTEXTO, VOCÊ TINHA DIVERSOS TIPOS DE DOCUMENTOS ATRAVÉS DE DIVERSOS PROTOCOLOS, INCLUINDO OS VÁRIOS EXISTENTES NAQUELA ÉPOCA. E TAMBÉM O MESH CONSIDERAVA UM SISTEMA DE ENDEREÇAMENTO UNIVERSAL E PERMITIA QUALQUER USUÁRIO ACESSO À INFORMAÇÃO.

SEGUINDO A HISTÓRIA DO TEMPO, PENSANDO NO TIM BERNERS-LEE, EM 1990, QUER DIZER, UM POUCO DEPOIS DE 89, DEPOIS DE ELE FALAR DO MESH, ELE APRESENTA O PROTÓTIPO DE UM SERVIDOR QUE IMPLEMENTAVA AQUELA PROPOSTA QUE ELE TINHA FEITO EM 89 E AÍ ELE PASSOU A CHAMAR ESSE AMBIENTE, ESSA PROPOSTA, DE "WORLD WIDE WEB". EM 91, O SERVIDOR, ENTÃO, IMPLEMENTANDO ISSO, ERA COLOCADO LÁ NO CERN. E EM 92 JÁ TINHA INTERFACES CLIENTE-SERVIDOR PUBLICADAS E O BERNERS-LEE, ENTÃO, FAZ A PRODUÇÃO DA PRIMEIRA FORMALIZAÇÃO DO "HTML".

É BASTANTE INTERESSANTE DE VOCÊ VER QUE, EM 90, O TIM BERNERS-LEE APRESENTOU UM PROTÓTIPO DE UM SERVIDOR QUE IMPLEMENTAVA A SUA PROPOSTA E DEIXOU ESSE RASTRO DA HISTÓRIA DO COMEÇO DA WEB NOS ANOS 90. É BASTANTE INTERESSANTE E ESSA FORMALIZAÇÃO TAMBÉM DO "HTML" DOIS ANOS DEPOIS, QUE JÁ TINHA DENTRO DO "HTML" ELEMENTOS QUE PERMITIAM ALGUMAS FUNCIONALIDADES, LÓGICO QUE AINDA ERA MÍNIMA E TRABALHAVA COM DOCUMENTOS ESTÁTICOS. DE 92 PARA FRENTE, COMEÇA AÍ UMA CORRIDA.

POR EXEMPLO, EM 93, TINHA UM TOTAL DE 50 SERVIDORES INSTALADOS. ATÉ ENTÃO TODO O DESENVOLVIMENTO TINHA SIDO FEITO DENTRO DO CERN. EM 93, JULHO, OCORREU O WORKSHOP SOBRE O "WWW" E EM SEGUIDA COMEÇA A SER DISCUTIDA A PROPOSTA JÁ DE EVOLUÇÃO DO "HTML", O "HTML+", QUE INCLUIU ELEMENTOS PARA LIGAÇÕES COM OUTRAS MÍDIAS, PENSANDO AÍ EM IMAGENS E VÍDEOS.

E PARA O ENVIO DE DADOS JÁ, PENSANDO AÍ NO ENVIO DE DADOS VIA FORMULÁRIO. EM SETEMBRO DE 93, SURGE O MOSAIC, QUE ERA UMA INTERFACE GRÁFICA QUE IMPLEMENTAVA INTERAÇÃO DO TIPO "POINT AND CLICK", PARA OS SERVIDORES QUE AÍ ESTAVAM NO CERN COM O "WWW". E AÍ É DIVULGADO DENTRO DO "NATIONAL CENTER FOR SUPERCOMPUTER APPLICATION", NOS ESTADOS UNIDOS.

OS CLIENTES DO MOSAIC, NA ÉPOCA, ERAM O XWINDOW, O MACINTOSH E MESMO O MICROSOFT WINDOWS. O INTERESSE PELA WEB, ENTÃO, PELO "WWW", QUE AÍ FICOU CONHECIDO NESSES NOMES, WEB OU "WWW", COMEÇA A CRESCER CADA VEZ MAIS TANTO ENTRE OS USUÁRIOS E A COMUNIDADE CIENTÍFICA. EM DEZEMBRO DE 93, JÁ ERAM 500 SERVIDORES INSTALADOS E, UM ANO DEPOIS, EM MAIO DE 94, NA VERDADE, SEIS MESES DEPOIS, OCORRE A PRIMEIRA CONFERÊNCIA SOBRE A "WWW", EM GENEBRA.

E JÁ TINHA UM NÚMERO DE SERVIDORES PARA MAIS DE 1. 500. ENTÃO, DÁ PARA VER O CRESCENTE INTERESSE.

EM 94 MESMO, LOGO APÓS, ALI DENTRO DA PRIMEIRA CONFERÊNCIA, SURGE ENTÃO O "WORLD WIDE WEB CONSORTIUM". É UM CONSÓRCIO CHAMADO "W3C". ELE É FORMADO POR UNIVERSIDADES, CENTROS DE PESQUISAS, INDÚSTRIAS E EMPRESAS QUE PROMOVEM A CRIAÇÃO DE PADRÕES PARA UM DIRECIONAMENTO MAIS ESTÁVEL DO DESENVOLVIMENTO DA WEB.

LÓGICO, O "W3C" FOI DIRIGIDO E AINDA É DIRIGIDO POR TIM BERNERS-LEE, LOCALIZADO NO MIT, TENDO COMO REPRESENTANTE NA EUROPA, O INRIA, NA FRANÇA E NO JAPÃO, UMA UNIVERSIDADE JAPONESA COM APOIO DO DARPA AMERICANO E DA COMISSÃO EUROPEIA. AINDA SEGUINDO A HISTÓRIA, EM 2002, A GENTE VÊ SURGIR O QUE A GENTE CHAMA DE "RICH INTERNET APPLICATION", "RIA", QUE SÃO APLICAÇÕES WEB COM CARACTERÍSTICAS E FUNCIONALIDADES DE SOFTWARE PARA DESKTOP. A IDEIA É TRANSFERIR O PROCESSAMENTO DAS INTERFACES PARA OS NAVEGADORES NO LADO DO CLIENTE E O CONTEÚDO FICA MANTIDO NO LADO DO SERVIDOR.

NESSA FIGURA VOCÊS VEEM AQUI NO EIXO "X" A QUESTÃO DA WEB, VOCÊ PASSA DE UM MAINFRAME PARA APLICAÇÕES WEB GLOBAIS, ENTÃO VOCÊ PASSA DO ACESSO LOCAL PARA ACESSO GLOBAL E, NESSE EIXO "Y" AQUI, A GENTE VAI VER A EXPERIÊNCIA DO USUÁRIO, QUE TEM UMA QUESTÃO MUITO MAIS TEXTUAL AQUI EMBAIXO E LÁ EM CIMA UMA QUESTÃO MUITO MAIS RICA, MAIS GRÁFICA. NO INÍCIO, VOCÊ TINHA O MAINFRAME, AÍ VOCÊ, A PARTIR DE 92, VOCÊ PASSA A TER CLIENTE-SERVIDOR, ONDE VOCÊ CONSEGUE INTERAÇÕES GRÁFICAS BEM INTERESSANTES, COMO, POR EXEMPLO, QUANDO SURGIU AS INTERAÇÕES DO WINDOWS, AS JANELAS E A POSSIBILIDADE DE VOCÊ COLOCAR ÍCONES, CLICAR E ARRASTAR. A PARTIR DA WEB, ESSA QUESTÃO MUDA.

A INTERAÇÃO COM CLIENTE EM APLICAÇÕES WEB PASSA A SER UMA INTERAÇÃO BASTANTE SIMPLES, PÁGINAS BASICAMENTE COM TEXTOS, LINKS, ALGUMAS FIGURINHAS, MAS A PARTIR DE 2005 ISSO MUDA COM A INSERÇÃO E A IDEIA DO "RIA". AQUI DÁ UM EXEMPLO, ILUSTRA BEM ISSO. AQUI VOCÊ TEM NESSE CANTO AQUI, DO CANTO ESQUERDO DA TELA, VOCÊ TEM TRÊS INTERFACES AQUI, TRÊS SITES WEB, DO INÍCIO DA WEB, AQUELE DA PARTE DE BAIXO ALI DO NOSSO GRÁFICO ANTERIOR, ONDE VOCÊ VÊ A QUESTÃO DOS TEXTOS, POUCAS IMAGENS E OS LINKS.

E ATUALIDADE HOJE, ONDE VOCÊ TEM UM USUÁRIO QUE CONSEGUE INTERAGIR COM A INTERFACE, CLICAR E VER AÍ AS DIFERENTES MÍDIAS E INTERAGIR COM ESSAS DIFERENTES MÍDIAS NUMA MESMA INTERFACE. ENTÃO, ISSO HOJE ESTÁ MUITO SUPORTADO PELOS PADRÕES WEB. ENTÃO, O QUE É UM PADRÃO WEB?

SÃO DOCUMENTOS DEFINIDOS PELO "W3C", QUE DEFINEM O REGULAMENTO, COMO FUNCIONAM AS TECNOLOGIAS EM USO DA WEB. O OBJETIVO É INFORMAR PARA NÓS, DESENVOLVEDORES DE APLICAÇÕES WEB, AS MELHORES PRÁTICAS PARA CRIAR SITES E SISTEMAS GARANTINDO QUE OS USUÁRIOS TENHAM EXPERIÊNCIAS BOAS, RICAS COM ACESSIBILIDADE, COMPATIBILIDADE. AS ESPECIFICAÇÕES E GUIAS TÉCNICOS FICAM SOB A RESPONSABILIDADE DA "W3C", QUE FAZ APROVAÇÕES E EVOLUÇÕES DESSES PADRÕES.

PARA QUE, ENTÃO, SERVE ESSES PADRÕES? ESSES PADRÕES SÃO CRIADOS COM ESSAS IDEIAS, COM ESSES ASPECTOS DE PROMOVER MELHOR INTERAÇÃO DOS PRÓPRIOS USUÁRIOS, ACESSIBILIDADE, PRIVACIDADE, E ELES REFLETEM, NA VERDADE, AS VISÕES DE DIFERENTES INDÚSTRIAS E DIFERENTES INTERESSADOS NO SETOR AO REDOR DO MUNDO, TENTANDO EQUILIBRAR A VELOCIDADE E AS QUESTÕES DE REQUISITOS. OS PADRÕES SÃO REVISADOS, SÃO TESTADOS EXTENSIVAMENTE POR GRUPOS DE COLABORADORES DO "W3C" E SÃO DISPONIBILIZADOS GRATUITAMENTE SOBRE LICENÇAS LIVRES DE ROYALTIES.

QUANDO OS PADRÕES SÃO SEGUIDOS, ELES PERMITEM QUE OS BENEFÍCIOS DA WEB SEJAM DISPONÍVEIS PARA TODOS, INDEPENDENTE DO SISTEMA OU DOS DISPOSITIVOS QUE ESTEJAM UTILIZANDO A INFRAESTRUTURA DE REDE, OU MESMO IDIOMA, CULTURA, OU LIMITAÇÕES FÍSICAS E COGNITIVAS. É A IDEIA DO ACESSO PARA TODOS, LÓGICO QUE PENSANDO NA PRIVACIDADE E NA SEGURANÇA. DENTRO DESSE CONTEXTO DOS PADRÕES WEB, A GENTE VAI OUVIR ALGUNS NOMES BASTANTE CONHECIDOS DE VOCÊS, ALGUNS, NÉ?

"HTML", POR EXEMPLO, PARA CONSTRUIR PÁGINAS, OS SITES WEB, É UMA TECNOLOGIA FUNDAMENTAL, ELA AJUDA A GENTE A DEFINIR A ESTRUTURA DAS NOSSAS PÁGINAS. "HTML" É USADO, ENTÃO, PARA ESPECIFICAR SE O CONTEÚDO DA PÁGINA DEVE SER RECONHECIDO COMO UM PARÁGRAFO, COMO UMA LISTA, ELE ORGANIZA UM LINK, UMA IMAGEM, UM REPRODUTOR DE MÍDIA, OU FORMULÁRIOS QUE VOCÊ ESTEJA IMPLEMENTANDO AÍ DENTRO DAS SUAS PÁGINAS. ALÉM DO "HTML", OUTRO BASTANTE DIFUNDIDO É O "CASCADING STYLE SHEETS", OU "CSS", QUE É A PRIMEIRA TECNOLOGIA QUE VOCÊ DEVE COMEÇAR A PENSAR E APRENDER DEPOIS DE CONHECER O "HTML".

ENQUANTO O "HTML" É USADO PARA ESTRUTURAR, FAZER A ESTRUTURA E A SEMÂNTICA DE UM CONTEÚDO, O "CSS" É USADO PARA DAR UM ESTILO E DEFINIR. POR EXEMPLO, SE VOCÊ USAR "CSS" PARA ALTERAR A FONTE OU COR, TAMANHO E ESPAÇAMENTO DO SEU CONTEÚDO E DIVIDI-LO EM VÁRIAS COLUNAS, OU AINDA MESMO ADICIONAR ALGUNS RECURSOS, VOCÊ VAI TER PÁGINAS MUITO MAIS. .

. COM MAIOR ESTILO PARA APRESENTAÇÃO. MAS A FORÇA DA PLATAFORMA WEB NÃO SE BASEIA SÓ EM "HTML" E "CSS".

HÁ VÁRIAS OUTRAS TECNOLOGIAS QUE O "W3C" E SEUS PARCEIROS ESTÃO CRIANDO, E ALGUMAS TECNOLOGIAS QUE ESTÃO FORA AÍ DOS PADRÕES DA "W3C". A GENTE TEM OUTRAS TECNOLOGIAS, COMO ESTÃO AÍ NESSES SLIDES, A GENTE TEM O "JAVASCRIPT", QUE É UMA LINGUAGEM DE PROGRAMAÇÃO QUE VAI PERMITIR VOCÊ IMPLEMENTAR. ALGUNS JÁ FAZEM ISSO, JÁ IMPLEMENTAM COISAS SIMPLES, OU MESMO COISAS MAIS COMPLEXAS EM PÁGINAS WEB.

CADA VEZ QUE UMA PÁGINA FAZ MAIS DO QUE APENAS FICAR LÁ E EXIBIR INFORMAÇÕES ESTÁTICAS, VOCÊ PENSA AÍ QUE VOCÊ PODE USAR "HTML" PARA EXIBIR ESSAS ATUALIZAÇÕES, ESSES MAPAS INTERATIVOS, GRÁFICOS E ETC. O "AJAX" É UM USO MAIS METODOLÓGICO DE TECNOLOGIAS, "JAVASCRIPT" E "XML", QUE SÃO PROVIDAS POR NAVEGADORES PARA TORNAR UMA PÁGINA WEB MAIS INTERATIVA COM O USUÁRIO, UTILIZANDO SOLICITAÇÕES ASSÍNCRONAS DE INFORMAÇÕES. O "XML" TRABALHA JUNTO DO CONTEXTO DO "W3C".

O "XML" TRABALHA NA GERAÇÃO DE MARCAÇÃO PARA ALGUMAS NECESSIDADES, PROPÓSITOS DE SEMÂNTICA. O PROPÓSITO PRINCIPAL É COMPARTILHAR INFORMAÇÕES POR MEIO DE INTERNET. E FINALMENTE O "JSON" OU "JAVASCRIPT OBJECT NOTATION", QUE É UMA ANOTAÇÃO DE OBJETOS PARA "JAVASCRIPT", É UMA FORMATAÇÃO PARA TROCA DE DADOS.

PARA OS SERES HUMANOS É FÁCIL LER E ESCREVER, MAS PARA AS MÁQUINAS ISSO É DIFÍCIL DE INTERPRETAR E GERAR. ESTÁ BASEADA NORMALMENTE NUM SUBCONJUNTO, O "AJAX" DA LINGUAGEM DE PROGRAMAÇÃO "JAVASCRIPT". O "JSON" É EM FORMATO TEXTO E, CONSEQUENTEMENTE, É INDEPENDENTE DA LINGUAGEM, POIS USA AÍ CONVENÇÕES QUE SÃO FAMILIARES TAMBÉM A OUTRAS LINGUAGENS COMO "C", "C++", "C SHARP", "JAVA", "PAIR", "PYTHON" E MUITAS OUTRAS.

ESSAS PROPRIEDADES FAZEM COM QUE O "JSON" SEJA UM FORMATO IDEAL PARA TROCA DE DADOS. ENTÃO, EU ACREDITO QUE ALGUMAS DESSAS TECNOLOGIAS VOCÊS JÁ CONHECEM E OUTRAS EU CONVIDO VOCÊS A CONHECEREM. BOM, PESSOAL, COM ESSAS TECNOLOGIAS "HTML", "CSS", "XML", AJAX, "JSON", EU ENCERRO A AULA HOJE, A PRIMEIRA AULA DA SEMANA QUATRO.

ESPERO VOCÊS NA PRÓXIMA AULA. ATÉ MAIS, PESSOAL. UM ABRAÇO.