Clique aqui para imprimir

Como funciona um site?

Enviado em 2015-04-04 00:08:28

Entenda a estrutura básica de um site

Trabalho com internet há 8 anos e a utilizo desde 1999. Uma grande falha minha nesse tempo todo foi nunca ter criado um blog qualquer para expôr as inúmeras situações as quais consegui resolver por conta, que foram aparecendo ao longo desse tempo todo, e foram realmente muitas. Algumas ao ponto de ficar 2, 3 dias inteiramente dedicado a resolvê-las, já que com excessão do único ano - 2003 - em que trabalhei em escritório, desde sempre segui essa saga do web-designer solitário ;)

Pretendo compartilhar algumas dessas coisas aqui neste blog. Uma delas não é nenhuma solução para algum problema escabroso, e sim um gráfico que tenho há alguns anos guardado aqui, feito no Corel, e que não servirá para você web-designer veterano. Ao contrário, será de grande utilidade ao web-designer iniciante, para fins de entender a estrutura conceitual sobre a qual um site - seja o tipo que for - funciona.

O Banco de Dados

Internet significa, dentre várias definições, tráfego de informações. Essas informações tem que ficar guardadas em algum lugar, certo? Pois então, na internet e também em sistemas locais, a informação fica guardada em BANCO DE DADOS, ou Base de Dados, como também é chamada, do inglês Database. Então sempre que encontrar as iniciais BD, ou DB, estará encontrando uma referência ao armazenamento de informações de seu site ou sistema. Este segmento da internet está representado no gráfico acima através do retângulo cinza-escuro. Há vários sistemas de banco de dados, e o mais popular é o MySQL, por ser gratuíto e de fácil aprendizagem. O MSSQL é um "mysql" criado pela Microsoft para operar o seu SQLServer, sistema pago, como todos os produtos da empresa. A Oracle é uma empresa de programação que oferece, assim como a Microsoft, uma linguagem própria para lidar com seu banco de dados, a PL/SQL. O PostGRE é um sistema de banco de dados de código aberto semelhante ao MySQL, porém mais avançado, segundo alguns desenvolvedores.



O banco de dados armazena registros, seja do que for. Por exemplo: inventário de produtos de uma loja, lista de clientes, noticias, etc. Esses registros vão sendo gravados em linhas de uma tabela na medida em que vão sendo acrescentadas ao sistema. As informações vão sendo divididas por colunas, como se observa na imagem ao lado. Essas linhas podem também ser editadas e excluídas. Num curso básico qualquer de MySQL você vai entender perfeitamente como esses conceitos funcionam na prática.

As Linguagens de Programação

Nenhum navegador de internet como o Internet Explorer ou Firefox tem acesso direto a um banco de dados. Normalmente o navegador envia uma requisição ao SERVIDOR, este "pega" alguma informação do BD se necessário, e a envia ao navegador do visitante, que vai mostrar então a lista de produtos, de clientes ou noticias. Para o Servidor operar, precisa de uma linguagem de programação com a qual ele vai seguir as instruções. A linguagem PHP é de longe a mais popular da internet, por ser de código aberto, ou seja, gratuíta, e de fácil aprendizagem. O PHP é oferecido em servidores com sistema operacional Linux, também gratuíto, e com servidor UNIX/Apache.

Já a linguagem ASP é da Microsoft e foi criada para ser oferecida junto aos pacotes da empresa. Ou seja, se você contratar um servidor com sistema operacional Windows terá que utilizar o SQLServer como servidor, o MSSQL como banco de dados, e o ASP como linguagem de programação. A linguagem JSP é oferecida num servidor de algum sistema Java. Ou seja, se você tem todo um sistema empresarial programado em Java, e este sistema deve possuir uma exposição dos dados na internet, irá usar naturalmente o servidor TomCat (mais popular) e a linguagem de programação JSP. Tempos atrás um servidor TomCat poderia utilizar um banco de dados MySQL, porém após a compra da Sun Microsystens - responsável pelo Java - pela Oracle, aos sistemas Java é oferecido naturalmente o banco de dados Oracle.

Ainda há outras linguagens de programação menos populares porém muito utilizadas em sites e sistemas específicos como a Ruby, Perl.

O seu Navegador

O banco de dados e o servidor dizem respeito ao que os desenvolvedores chamam de server-side, ou seja, o "lado de lá" da internet, normalmente hospedados bem longe da sua casa. O Navegador onde você acessa os sites é o client-side, ou seja, o "lado de cá" da internet, onde você tem acesso a ela. Atualmente os três navegadores mais populares são o Internet Explorer, o Firefox e o Chrome. Veja que nenhum navegador "processa" linguagens de programação como PHP ou ASP. Não! O servidor envia até o seu navegador APENAS informação pura, estruturada em HTML, que não é uma linguagem de programação, e sim, uma linguagem de marcação. O HTML "marca" assim: "Este texto é um título. Este aqui é um parágrafo. Estes campos aqui são do formulário. Estas informações aqui são da barra lateral do site. Estas outras aqui são do menu de navegação." E assim os "renderiza" na sua tela. HTML é ESTRUTURA da informação. Quando ouvir falar em semântica na internet, entenda que é o significado que uma certa informação tem. O tipo de informação que ela é. O que ela é? Um parágrafo <p>? Uma lista <ul><li>? Um título <h1> ou sub-título <h2>?

Como sistemas de busca como o Google só "entendem a informação" de acordo com a marcação que lhes foi dada, só mostrará em seus resultados o que ele entender melhor. Como todos queremos aparecer em seus resultados para o maior número possível de pessoas, devemos estruturar as informações das nossas páginas o mais corretamente possível, utilizando as tags corretas para cada tipo de texto, imagem ou vídeo. Veja aqui um modelo visual de uma página de internet bem otimizada.

O HTML está atualmente chegando em sua versão 5 depois da tentativa não muito bem sucedida do XHTML tentando substituí-lo. Se quiser aprender corretamente, informe-se sobre as novas funcionalidades do HTML5. O site Tableless é uma ótima opção para isso. Os caras são muito bons.

Por fim, nessa nossa jornada pelos conceitos básicos do funcionamento dos sites da internet, chegamos ao CSS e ao Javascript. Se o HTML provê a estrutura adequada às informações da página, o CSS provê o seu estilo, ou seja, cores de fundo, dos textos, dos elementos gráficos. Indica onde haverão bordas, margens externas e internas aos elementos. Aponta ainda o tamanho das fontes, quais fontes serão utilizadas no site e seus estilos. O CSS é a maquiagem das páginas.

O Javascript é uma linguagem client-site, ou seja, funciona somente no seu navegador e possui forte ligação com o HTML e seus elementos (tags) - o que chamamos de DOM - Document Object Model. O Javascript permite completa manipulação programada de quaisquer elementos da página, ou seja, ele controla o comportamento da página. Frameworks como JQuery, Scriptaculous, MooTools, entre várias e várias outras, lhe facilitam a tarefa de criar eventos e manipulações na página. Porém você deve tomar o cuidado de não exagerar e só prover esses eventos quando realmente forem facilitar a experiência e navegação do usuário, para não cair no grande erro que foi o Flash.

O Flash

Quando iniciei o desenvolvimento de sites, o Flash era o queridinho das agências de internet como o grande diferencial para se conseguir vendas, pois permitia a criação de grandes peripécias visuais que serviam de atrativo aos desatentos clientes. O problema do flash era que ele permitia demais, dessa forma os desenvolvedores se concentravam mais nos efeitinhos visuais do que no conteúdo propriamente. Mas então apareceu o Google com seu apetite voraz por conteúdo e fez com que aqueles sites que o deixassem mais acessível ganhassem os primeiros resultados das buscas. Dessa forma logo o Flash foi perdendo espaço.

Ainda hoje é possível encontrar um ou outro site desenvolvido em Flash, mas normalmente são pesados demais, com aquele pré-loader irritante e inacabável, e normalmente são de difícil navegação - daquele tipo que você tem que adivinhar como navegar. Particularmente não tenho paciência pra nenhum desses dois grandes problemas dos sites em Flash e fecho a página logo que detecto um. O Flash continua muito popular ainda na criação de peças publicitárias online. Porém com o advento das bibliotecas (frameworks) Javascript como as citadas anteriormente, isso pode vir a mudar.

Conclusão

O que foi passado aqui foi um traço geral sobre os principais segmentos que um desenvolvedor ou web-designer precisa saber. Você pode escolher, como em tudo na vida, saber tudo de um pouco, ou um pouco de tudo. O meu caso é  segundo. Sei de tudo isso um pouco - e muitos outros segmentos do ramo online - e sempre consegui resolver praticamente todos os problemas e dificuldades que me surgiram ao tentar pôr uma funcionalidade qualquer em algum site.

Contudo, o fundamental para um web-designer se manter na profissão é a postura curiosa e persistente. Você não deve se concentrar em memorizar todo e qualquer método de desenvolvimento. Não! Se concentre em "saber que dá pra fazer". Dessa forma, quando precisar fazer qualquer coisa, saberá que é possível e vai pesquisar e "fuçar" os programas e funcionalidades ATÉ CONSEGUIR! Esse é o caminho. E boa sorte!!!

Ronaud Pereira

Publicado em www.ronaud.com/internet/como-funciona-um-site/