Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

Prefácio

Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScrip

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

Vídeo-aula 1. Apresentação.

Uma breve história da Internet

No princípio havia apenas alguns computadores. Eram grandes, estrondosos, barulhentos. Alguns ocupavam prédios inteiros. Realizavam poucos cálculos simples. Basicamente cálculos de balística de mísseis e decodificação de mensagens simples. Grande parte deles nada armazenava.

Com o tempo foram se tornando menores. Mais potentes. Nem um milionésimo da potência dos que existem hoje, mas mesmo naquela época já eram vitais. Processavam dados vitais. Armazenavam dados vitais. E um dos primeiros a verem isso foi o Departamento de Defesa dos Estados Unidos. Mas de que adiantava todo esse potencial, se as máquinas não pudessem se comunicar? Então criaram um meio de interligá-las. Perceberam que não poderiam concentrá-las em um único ponto. Seria uma vulnerabilidade. Era 1969, auge da guerra fria. Então, grandes cabos que passavam debaixo da terra, chamados backbones, interligaram as principais bases militares e centros de pesquisa dos Estados Unidos. Não havia um ponto central. Se qualquer base fosse atacada, outras poderiam continuar operacionais. Surgia assim, a ARPANET, a primeira rede remota entre computadores.

Anos depois, universidades obtiveram permissão para acessar a ARPANET. Além disso, com a adoção do protocolo TCP/IP, a ARPANET começou a crescer exponencialmente. Assim, ela foi dividida em MILNET, rede usada para assuntos militares, e INTERNET, rede de acesso público.

Mais tarde, Tim Berners-Lee, um cientista da computação e professor do MIT, apresentou o protocolo HTTP, que permitia a comunicação por meio da internet entre um cliente, que gerava solicitações, e um servidor, que processa e retornava novas informações. Berners-Lee também criou o HTML, que na época era apenas um conjunto de ferramentas para facilitar comunicação entre grupos de pesquisa. Em 1991, ele criou uma página que apresentava a chamada World Wide Web (WWW), ensinou como acessá-la e como disponibilizar dados. A World Wide Web permitia que uma página de hipertexto armazenada um computador remoto, chamado de servidor, poderia ser acessada por outros computadores, chamados de clientes, desde que esses obtivessem acesso a ela por meio de um endereço e de um software, chamado de navegador (browser). Esse foi o grande marco para popularização da Internet. Nos anos 2000, o acesso a Internet estourou. Hoje quase não é possível imaginar a vida sem ela.

Vídeo-aula 2. Bioinformática.

Por que Websites são importantes para Bioinformática?

Mas você deve estar se perguntando onde entra a Bioinformática nisso? Como discutimos nos livros anteriores, a Bioinformática é uma área de pesquisa que possui um braço na Ciência da Computação e outro nas Ciências Biológicas. Sua principal função é permitir que um grande volume de dados pudesse ser processado, fazendo com que padrões humanamente indetectáveis pudessem ser descobertos. Isso poderia, em tese, auxiliar na explicação de fenômenos biológicos, na descoberta de novos remédios, na descoberta do mecanismo de ação de doenças, o que poderia trazer novas curas.

Entretanto, para tudo isso seria necessário analisar as tais grandes bases de dados, àquelas mesmas obtidas pelos tais equipamentos de próxima-geração. Mas onde elas estão armazenadas? Em grandes centros de pesquisa é claro! E, como você, um simples aprendiz de pesquisador, talvez até mesmo um grande pesquisador, mas sem as credenciais ou verbas necessárias para encontrá-las fisicamente, poderia ter acesso a elas? Pela internet é claro!

A internet permite que qualquer pessoa do mundo possa ter acesso a grandes resultados de pesquisas, possa coletar os dados usados na pesquisa e reproduzi-la em sua própria casa (se os métodos forem bem redigidos é claro). A internet também permite que você construa seus próprios programas, faça suas análises e compartilhe seus resultados com o mundo. Assim, a internet e suas linguagens de construção de Websites se tornaram importantes ferramentas de divulgação científica.

Vídeo-aula 3. Por que programar para bioinformática?

As primeiras ferramentas para bioinformática foram construídas para serem executadas localmente. Ou seja, para usá-las, era necessário possuir o código-fonte e compreender como executá-lo. Só quando essas ferramentas passaram a ser hospedadas em grandes servidores é que todos realmente tiveram acesso simples e fácil. Várias ferramentas poderosas estão disponíveis na internet como por exemplo a ferramenta de alinhamento local de sequências, BLAST: https://blast.ncbi.nlm.nih.gov/Blast.cgi.

Como colocar um Website na Internet?

Aqui apresentaremos o chamado paradigma cliente-servidor. Creio que todos nós já ouvimos falar que a internet é como uma nuvem. Você se conecta a nuvem e tem acesso a todos os dados.

A internet é uma rede de computadores interligados por cabos e outras coisas (existem várias tecnologias para transmissão de dados, entretanto convém dizer que conexões cabeais são mais rápidas e confiáveis). Esses cabos levam às operadoras que possuem os chamados roteadores, equipamentos que definirão as rotas para acessar os computadores que possuem as informações que você necessita. Quanto aos chamados backbones, pense neles como rodovias que interligam a internet a outros países (há gigantescos cabos que passam no fundo do mar conectando todo o mundo).

Enfim, é importante dizer que um Website (ou simplesmente site) que você deseja acessar está em um computador em outra parte do mundo. Esse computador deve estar ligado o tempo todo, ou então, como você poderia acessar o site a hora que quisesse? Logo, pode-se dizer que esse computador deve manter um serviço de hospedagem de sites a qual você é o cliente que quer acessá-lo.

Como a internet funciona. Sites são armazenados em servidores que podem ser acessador por clientes.

Um cliente pode ser qualquer dispositivo que faça acesso a um serviço. E um servidor não precisa, necessariamente, ser um computador robusto, e sim, um simples computador que provê acesso a um serviço, como a hospedagem de páginas Web (um servidor Web). Você pode até mesmo fazer de seu computador um servidor Web (o que você realmente fará quando for testar suas páginas), entretanto não é nada legal ter que deixar seu computador ligado todo o tempo. Por isso precisamos pagar por serviços de hospedagem profissionais.

Para ter acesso a internet você precisa de um endereço, chamado endereço IP (Internet Protocol), como por exemplo 192.168.0.1 (isso é um endereço local), 127.0.0.1 (endereço que identifica a máquina local), ou 8.8.8.8 (endereço de um dos servidores do Google). Ter um endereço na internet custa um preço. Talvez você nunca tenha ouvido falar na necessidade de ter que comprar um endereço IP, mas você provavelmente paga as contas da sua operadora de internet. Ela te oferece um endereço IP dinâmico, ou seja, um endereço que muda a cada vez que você se conecta. É claro que a internet não seria viável se precisássemos digitar endereços para cada página, por isso criou-se um serviço que converte endereços de IP em nomes, o chamado DNS (Domain Name System). Assim, você não precisa digitar números e sim um domínio, como por exemplo: “http://google.com.br”. O http indica o protocolo usado na página, mas não se preocupe com ele, o navegador já o insere automaticamente.

Bom, então para se criar um site você precisa:

  • Primeiro desenvolver sua página (numa das linguagens que em breve lhe apresentaremos);
  • Conseguir um domínio para seu site (no Brasil, o órgão responsável por isso é o “registro.br”);
  • Conseguir um servidor de hospedagem (um computador que ficará ligado todo o tempo e permitirá que muitas pessoas possam acessar seu site ao mesmo tempo).

Com exceção do item 1, todos os outros itens são pagos. Mas não vamos nos preocupar com isso agora. Podemos simular um serviço de hospedagem instalando um servidor Web na sua máquina (usaremos o Apache). Apache possui um domínio para acesso de seus sites locais, chamado http://localhost. Mas atenção: seu site só ficará acessível na sua máquina.

Quando desenvolvemos um site na nossa máquina chamamos de ambiente de desenvolvimento. Ao transferir para um servidor na internet para que outros possam ter acesso chamamos isso de ambiente de produção. Neste livro abordaremos apenas o ambiente de desenvolvimento.

Como projetar um Website?

Para projetar um Website deve-se planejá-lo completamente. É importante discutir com uma equipe, ou um orientador(a), os objetivos do seu site. Se ele deve disponibilizar acesso a uma ferramenta, quanto de recurso os usuários externos terão direito de usar ou se seu Website tem o intuito apenas de divulgar resultados.

A projeção e planejamento de um Website deve ocorrer em três fases: (1) wireframe, onde são feitos os primeiros desenhos da interface; (2) mockup, onde é feito uma representação gráfica final do Website; e (3) protótipo, onde é feita uma representação funcional da ferramenta.

WireframeMockupProtótipo
Desenho do website. Geralmente feito em um pedaço de papel.Representação fiel do Website. Geralmente feito em uma ferramenta de design gráfico, como Photoshop.Versão funcional do Website. Deve apresentar elementos HTML navegáveis, entretanto nem todas as funcionalidades precisam estar disponíveis.

Versões de um site

O desenvolvimento de um Website deve passar por algumas versões antes de ser lançado oficialmente.

AlfaBetaFinal
Primeiras versões do site. Deve ser testada apenas pela a equipe de desenvolvedores do projeto. Versões alfa não devem ser liberadas para o público em geral, pois podem conter falhas gravíssimas que podem comprometer a credibilidade da ferramenta desenvolvida.Versão para testes. Deve ser testada apenas por um pequeno grupo de usuários. Pode-se realizar testes assistidos, a qual a equipe assiste aos usuários usarem a ferramenta, mas sem opinar; ou testes não assistidos, a qual os usuários testam a ferramenta a distância e enviam um feedback no final.Versão final do site. Deve-se garantir antes da liberação da versão final que bugs tenham sido resolvidos. Entretanto, inevitavelmente falhas novas poderão surgir. Falhas graves, geralmente que envolvem a segurança do sistema ou do usuário, devem ser corrigidas imediatamente. Enquanto falhas mais simples podem ser corrigidas em versões ocasionais.

O dogma central do desenvolvimento Web

Assim como a biologia molecular possui um dogma central, proponho aqui um dogma central para melhor explicar o desenvolvimento de sistemas para Web, que denominarei de Dogma Central do Desenvolvimento Web.

Dogma central do desenvolvimento Web.

O desenvolvimento Web é dividido em duas “frontes” de ação: back-end, linguagens que rodam diretamente no computador servidor; e front-end, linguagens executadas diretamente no computador do usuário.

No dogma central do desenvolvimento Web, as linguagens back-end (neste livro será utilizado a linguagem PHP) ficam responsáveis por controlar as requisições do usuário, gerar acesso aos bancos de dados e retornar as páginas HTML devidamente formatadas com folhas em cascata. Essas páginas podem interagir com o ambiente back-end por meio das requisições de páginas e dos envios de formulários. As páginas HTML podem ter seu comportamento alterado no front-end por scripts (aqui representados por arquivos JavaScript e suas bibliotecas, como jQuery). Apesar desses scripts serem carregados pelo servidor, eles podem interagir através de interações assíncronas (como AJAX).

Todas as interações entre front-end e back-end fazem funcionar o chamado dogma central do desenvolvimento web. Você pode não ter entendido por completo o funcionamento, mas durante o andamento deste livro apresentaremos melhor esses conceitos.

A quem se destina este livro?

O desenvolvimento Web é essencial para divulgação científica. Além disso, o desenvolvimento de ferramentas Web está em ascensão. Assim, este livro se destina a profissionais de diversas formações que aspiram se tornar bioinformatas, como biólogos, geneticistas, biomédicos, microbiologistas, físicos, químicos e até mesmo a profissionais de tecnologia da informação. Esse livro se destina a todo aquele que quer se aventurar no universo da Bioinformática e deseja ter um guia para seus primeiros passos na programação para Bioinformática utilizando linguagens web.

Assim, tentaremos explicar de maneira simples e didática os princípios básicos de programação através das linguagens PHP e JavaScript. Aprenderemos também a criar páginas HTML e a formatá-las usando folhas de estilo CSS.

Como este livro está organizado?

Na primeira parte apresentaremos a linguagem de marcação HTML e as folhas de estilo em cascata (CSS). Domínio dessas linguagens é importante para construção de páginas da internet. A seguir apresentamos a linguagem de programação server-side PHP. Por fim, apresentamos a linguagem client-side JavaScript.

Se você leu o primeiro livro da série, Introdução a programação para Bioinformática com Biopython, talvez já possa pular para o capítulo 1, mas caso este seja o primeiro livro da série que está lendo, veja a seguir alguns conceitos fundamentais.

Conceitos básicos

.Algoritmo: define-se como uma série de passos para que se possa resolver um problema computacionalmente tratável em tempo finito.

Código-fonte: é o código de uma página HTML, suas marcações, folhas de estilo e scripts. Diversos navegadores permitem a visualização do código-fonte (geralmente disponível no menu Exibr ou clicando com o botão direito e indo até Inspecionar elemento). O código PHP não pode ser acessado pelo navegador.

Hardware: é a parte física de um computador: placas, processadores e componentes eletrônicos em geral.

Software: é a parte lógica de um computador, um programa de computador que segue um determinado algoritmo, e que pode ser executável ou interpretável.

Script: conjunto de comandos organizados em um arquivo de texto e que será analisado por um interpretador ou por um compilador.

Função: como o próprio nome já diz é um trecho do código que tem uma função específica, podendo receber parâmetros e retornar informações processadas. Linguagens de programação já possuem funções nativas, o que permite que o programador execute ações sem ter que escrever o algoritmo básico. Entretanto, programadores podem construir suas próprias funções, o que auxilia na organização do código.

Interpretador: constitui num programa de computador que recebe um comando único ou script e os converte em linguagem de máquina para que possam sem processados pela CPU (unidade central de processamento, ou simplesmente processador).

Paradigmas: representação de um padrão; metodologia.

Iteração: sinônimo de repetição.

Indentação: estruturação e organização do código. Derivada do inglês indent.

Diretório: sinônimo a pasta.

Abstração: na computação pode-se compreender abstração como uma representação simples que explique um processo complexo.

Programação estruturada (PE): método de programação em que o código é estruturado de maneira simples em três partes: sequência, decisão e iteração. A PE pode ser vista como uma programação linear, uma vez que os códigos são executados sequencialmente.

Programação orientada a objetos (POO): na programação orientada a objetos, o código é organizado por classes, que instanciam objetos.

Bloco: define-se bloco como um trecho de código, quase sempre delimitado por chaves “{ }”, a qual todo conteúdo está vinculado ao comando inicial.

function exemplo_de_bloco( ) {

…. # Comandos que pertencem a uma função

}

Conseguindo um editor de textos/IDE: Se você leu o livro anterior desta série sabe que para programar precisará de uma IDE ou de pelo menos um editor de textos. Usuários do Linux podem utilizar o editor nativo (gedit), que apresenta bons recursos. Recomendamos o software

Sublime text por ser simples, robusto e leve. Se escolher esse editor, sugerimos que experimente o esquema de cores “monokai“. Esse padrão de cores permite que você programe por horas sem cansar sua visão. Sublime text é compatível com Windows, Linux e MacOS. Sublime text 2 foi utilizado para desenvolvimento dos scripts deste livro. Onde conseguir: http://www.sublimetext.com

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

Capítulo 1
Introdução ao HTML

Capítulo 2
Fundamentos do HTML

Capítulo 3
Estrutura de páginas

Capítulo 4
Folhas de Estilo em Cascata (CSS)

Capítulo 5
Bootstrap

Capítulo 6
Iniciando a construção de um Website

Capítulo 7
Introdução ao PHP

Capítulo 8
Fundamentos do PHP

Capítulo 9
Transformando um Website em dinâmico

Capítulo 10
Introdução ao JavaScript

Capítulo 11
Fundamentos do JavaScript

Capítulo 12
jQuery

Capítulo 13
Bootstrap JavaScript

Capítulo 14
D3.js

Capítulo 15
3Dmol

Capítulo 16
Projeto Final

Epílogo
Referências Bibliográficas

Cite:

MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.