Série WEB (Intro)
Autor: Lauro Moraes | Publicado: 2014-06-25T05:33:00-03:00














Pois bem já faz algum tempo que estou para postar uma série que trará o mundo do desenvolvimento WEB aqui para o blogue...para todos aqueles que assim como Eu tem uma "enorme" curiosidade sobre esse fascinante mundo de letrinhas rsrsrsrsrs ;)

Segurem as pontas ai pois neste primeiro post irei fazer uma breve apresentação das linguagens de programação WEB "Cliente-Side" que nós comumente vemos através do navegador e também "Server-Side" para as funções que ficam responsáveis por fazer a mágica do lado do servidor.

Como toda boa história começa por "...era uma vez..." vamos partir do principio ok.

História da WEB


Internet&nbsp;é um sistema global de&nbsp;redes de computadores&nbsp;interligadas que utilizam o conjunto de protocolos padrão da internet (TCP/IP) para servir vários bilhões de usuários no mundo inteiro. É uma rede de várias outras redes, que consiste de milhões de empresas privadas, públicas, acadêmicas e de governo, com alcance local e global e que está ligada por uma ampla variedade de tecnologias de rede eletrônica, sem fio e ópticas. A internet traz uma extensa gama de recursos de informação e serviços, tais como os documentos inter-relacionados de&nbsp;hipertextos&nbsp;da&nbsp;World Wide Web&nbsp;(WWW), redes&nbsp;peer-to-peer&nbsp;e infraestrutura de apoio a&nbsp;e-mails.

O texto acima é uma parte (introdutória) do conceito de internet expresso na Wikipédia, vale a pena conferir o artigo então segue esse link.

Segundo "reza a lenda" os primeiros modelos funcionais de computadores surgiram no inicio da década de 40 e como era de se esperar os Americanos saíram na frente (America, sempre a America ¬¬).
Suas funções eram básicas uma montanha de componentes para guardar e processar informações más é claro naquela época não havia sistema e todo processamento era meramente o resultado de instruções inseridas pelo homem.
Nesta mesma década surgiu a criação dos primeiros protocolos de troca de informações entre dispositivos conectados más não vou entrar neste mérito pois isto esta mais ligado na parte de estrutura da telecomunicação do que de fato na rede WEB, embora ambas coincidam na sua linha histórica.
No final da década de 50 surgiram os "primeiros sistemas" que propunham protocolos para troca de informações entre redes distintas mais conectadas pelos mesmos nós da rede telecom.
Já na década de 60 instituições de pesquisa e desenvolvimento, empresas privadas e assim como governos (o Americano e Europeus) já possuíam redes interligadas com sistemas próprios interpretando os dados trafegados de um ponto ao outro entre as redes interconectadas.
Entre as décadas de 60 e até o final da década de 80 houve uma descentralização da rede que até então estava só entre governo, instituições privadas e institutos de pesquisa que estavam diretamente ligados ou a um ou ao outro (ou ambos), neste processo instituições de ensino, faculdades entre outros grupos passaram a integrar a rede de forma colaborativa afomentando o desenvolvimento e a expansão da mesma.
Mas o grande marco da rede só veio no final da década de 80 quando o físico britânico&nbsp;Timothy John Berners-Lee&nbsp;com a ajuda de&nbsp;Robert Cailliau&nbsp;apresentou como proposta de organização da rede um servidor http que integrava protocolos, a linguagem de marcação html, um interpretador (navegador) e o próprio documento (página html) na qual seu primeiro conteúdo era a própria auto-explicação do sistema.
Visando criar de forma prática uma maneira aonde várias pessoas espalhadas pelo mundo inteiro poderiam compartilhar informação e tudo na mesma linguagem até então unica/universal o html a linguagem de marcação.


O pai da rede como a conhecemos Tim Berners Lee em 2005



Com a aceitação e difusão do modelo proposto por Tim Berners Lee na década de 90 iniciou-se então a grande revolução da troca informações, da comunicação, da mídia (áudio e visual) como a conhecíamos e da própria corrida rumo ao desenvolvimento tecnológico visto que a partir dai o sentido seria a busca pela intercomunicação usando da própria rede que ali (e até hoje) estava (esta) em alta expansão!
Bom, sei que este resumo é "muito básico" más o objetivo aqui não é despejar em voçê tudo o que aconteceu em 50 anos (todo o processo) até chegar no nascimento da rede e por isso termino aqui minha citação a incomensurável contribuição de Tim Berners a humanidade hehehehe :)

HTML

Deixando Berners de lado vamos lembrar que o html foi a primeira linguagem da WEB, a primeira difundida e em consenso utilizada como única forma de apresentar textos, imagens, e documentos de servidores assim como estruturar a apresentação de um layout para ser renderizado em um navegador e vista por qualquer um em qualquer canto do mundo que fosse capaz de se conectar a rede.
E como nos primórdios nem a roda era "redonda" o html também não era.
Ele era todo quadradão e se organizava da seguinte maneira:
Entre chaves &lt; e &gt; indicavam-se suas instruções de linguagem de marcação;
As chaves &lt;&gt; abrem as tags enquanto as chaves &lt;/&gt; fecham as mesmas;
O documento é interpretado/renderizado (lido) pelo navegador de cima para baixo por isso a tag &lt;html&gt; define o inicio do documento e diz ao navegador que todo o conteúdo dentro dela deva ser tratado como um código em série (uma após a outra);
A tag &lt;/html&gt; indica o fim do documento e diz ao navegador que o documento terminou ali;

Dentro do documento outras duas tags são de suma importancia:

A tag &lt;head&gt; que contém informações como titulo da página, codificação de caracteres entre outras;

E a tag &lt;body&gt;, nesta (dentro desta) é que estarão presentes todas as tags de marcação do html que serão renderizadas pelo navegador e apresentadas para o internauta formando assim a struturação do layout, headers, tabelas, formulários, colunas, importação de imagens, links, textos, etc...

Deixo abaixo um exemplo da estrutura básica do html e de como ela é renderizada no navegador.



Documento escrito com HTML



O Mesmo documento acima renderizado no navegador!


Bem o documento acima foi bem básico, ao mesmo estilo dos primórdios nem fiz questão de criar colunas laterais ou algum tipo de menu más, creio que deu pra sacar como era no começo não é mesmo.
Seguindo o raciocínio em seguida temos as duas faces da WEB o "client-side" e o "server-side".
Abaixo deixo uma pequena referencia (sem fonte, catei por ai ha algum tempo).



A interação funciona da seguinte forma:&nbsp;Servidor ← → Cliente ← → Usuário

O&nbsp;servidor&nbsp;fornece para o&nbsp;cliente&nbsp;uma&nbsp;saída: ele serve a página desejada ou arquivos (download).
O&nbsp;servidor&nbsp;interpreta a&nbsp;entrada&nbsp;do&nbsp;cliente: o cliente envia informações (formulário) para o servidor e arquivos (upload).
O&nbsp;cliente&nbsp;fornece para o&nbsp;usuário&nbsp;uma&nbsp;saída: a página renderizada que ele obteve do servidor (html).
O&nbsp;cliente&nbsp;interpreta a&nbsp;entrada&nbsp;do&nbsp;usuário: o usuário entra com diferentes dados no cliente (e este eventualmente envia-os ao servidor).


Exemplo:

Usuário → Cliente: O usuário entra com o endereço&nbsp;http://www.google.com.br&nbsp;em seu web browser.
Cliente → Servidor: Então o cliente realiza a requisação da página ao servidor de google.com.
Servidor → Cliente: O servidor recebe a requisição, obtém a página e envia ao cliente.
Cliente → Usuário: O cliente renderiza a página (HTML) recebida pelo servidor e exibe ao usuário.
Usuário → Cliente: O usuário entra com uma pesquisa no campo de pesquisas da página e clica em "Pesquisar".
Cliente → Servidor: O cliente envia a requisição com o termo de busca informado pelo usuário.
Servidor → Cliente: O servidor monta a página com os resultados da pesquisa e envia para o cliente.
Cliente → Usuário: O cliente, ao receber do servidor a página com os resultados da pesquisa, renderiza a nova página e exibe para o usuário.


E assim em diante...

A grosso modo a figura abaixo expressa de maneira simplista o que cada parte é de modo bem resumido.



Client-Side e Server-Side


Se ninguém dormiu no ponto até aqui deu pra ver que funciona esse "mundico"...o programador escreve o código, o client interpreta e envia requisições ao servidor que por sua vez analisa os protocolos e devolve instruções para o client renderizar e assim o usuário internauta visualiza tudo isso via monitor (ou qualquer outro periférico de acesso que suporte).
Más nem só de html se "alimenta" a WEB. E por falar nisto saiba que o html esta em constante aperfeiçoamento e atualmente espera (ou esta no estágio) de ser lançado sua versão 5.0 oficialmente pela W3C (Word Wide Web Consortium) o órgão máximo que mantém e organiza a padronização da linguagem de marcação html.
No mundo WEB muitas outras linguagens compõem a rede sejam linguagens propriamente ditas sejam bibliotecas complementares pois hoje, tudo anda lado-a-lado.

Existem inúmeras linguagens que são usadas tanto para o lado client quanto para o servidor más por Eu não ter propriedade de conhecimento para falar de linguagens como Ruby, C, C++, Pearl entre inúmeras mais as quais não domino e nem se quer estudei com enfase não entrarei no mérito de apresentá-las vou me ater aqui a estilização do conteúdo vindo do html e também as funções server-side ou seja, css e php que são as linguagens de minha área de estudo ;)

CSS (Cascading Style Sheetss)

Folhas de estilo em cascata ou simplesmente css é uma linguagem utilizada para estilizar a visualização de documentos estruturados como o html entre outras linguagens também. Nos dias de hoje isto é normal más no início dos anos 90 as coisas não eram bem assim...
Bom, não vou remontar a história da estilização más ela já se apresentava de meados da década de 70 más foram tentativas falhas principalmente por naquela época não haver uma padronização e todo ou qualquer grupo ou desenvolvedor solo buscava algo como "eu faço a minha que vai virar modinha"...pode parecer que o que Eu acabei de dizer não condiz com os esforços da época para desenvolver a WEB más não se engane, era exatamente assim.
Com o aumento dos nós da rede com a difusão da tecnologia que a compunha e aumentando os envolvidos no estudo logo surgiram inúmeras outras linguagens e muitos interpretadores (navegadores) então imagine que numa época aonde não havia padrão era muito difícil ter uma linguagem de estilização comum todos tentavam a sorte e o conflito para renderizar tantas versões diferentes era inevitável.
Com a padronização que o html trouxe logo em seguida surgiram as primeiras linguagens para padronizar a renderização de layout e torná-lo "menos quadradão".
Foi então que em 1994 Hakon Wium Lie&nbsp;que trabalhava com Tim Berners e Robert Cailliau na Organização Europeia para Pesquisa Nuclear (CERN)&nbsp;convidou Bert Bos a desenvolver uma linguagem para estilização da linguagem de marcação html que serviria para padronizar a tipografia e a estética do conteúdo presentes nas estruturas do html.
EM 1995 eles propuseram a W3C que recém acabara nascer esta linguagem para servir como padronização e assim em 96 houve a primeira recomendação oficial pela W3C do css level1 (CSS 1).
Hoje atualmente o css esta na versão 2.1 e assim como o html esta esperando os últimos ajustes para o lançamento oficial de sua mais recente versão o css3 embora atualmente os principais navegadores já incorporem muitas das especificações previstas para o css3 mesmo esta não tendo sida oficialmente lançada ainda.
Hoje em dia quando voçê visualiza um site e vê uma caixa com cantos arredondados saiba que isto é graças a versão mais atual do css pois o css1 não tinha esta função, para arredondar cantos era necessário um verdadeiro malabarismo.
Era preciso criar uma imagem e fazer a ligação acomodando a imagem a cada canto a ser renderizado para fazer o efeito de canto redondo e isso dava um #$%@ trabalhão...falo sério, Eu dou graças de ter iniciado já na crista da onda certa vez cheguei a testar este tipo de "guambiarra" só pra ver como era e me arrependo até hoje rsrsrsrs.
_!!!Não faça isso em casa !!!_

O css não é nenhum bixo de sete cabeças, pelo contrário é até divertido lidar com ele.
A sintaxe do css é a seguinte:

Seletores:&nbsp;Os seletores especificam quais elementos devem ser influenciados pela regra de estilo. Como tal, seletores ligam a estrutura do documento às regras estilísticas nas folhas de estilo.

Propriedades:&nbsp;Todas as linguagens de folhas de estilo têm algum conceito de propriedade que dá valores para alterar um aspecto de apresentação de um elemento.

Valores e Unidades:&nbsp;As propriedades mudam a apresentação de um elemento ao lhe&nbsp;atribuir&nbsp;um determinado&nbsp;valor. O valor pode ser uma seqüência, uma palavra-chave, um número, ou um número com um identificador da unidade. Além disso, os valores podem ser listas ou expressões envolvendo vários dos valores acima mencionados.

Seletores são por exemplos os elementos de marcação do html &lt;p&gt;, &lt;spam&gt;, &lt;h1&gt;, &lt;a&gt;, etc...assim como seletores especiais&nbsp;específicos&nbsp;do css como "class" ou "id" de uma div que&nbsp;estarão&nbsp;a circundar um&nbsp;elemento&nbsp;de marcação ou um elemento dentro de uma marcação...logo mais trarei o exemplo de código comentado.

Propriedades são formatações do css especificas para os seletores designados, elas tem a função de estilizar (ou definir) um elemento selecionado...esta também mostrarei comentada no exemplo.

Valores e unidades são responsáveis por de fato agregar mudança no elemento elas por exemplo definem se&nbsp;haverá&nbsp;borda, qual sera a largura, qual o espaçamento do elemento selecionado, a cor, o&nbsp;comprimento, cor fundo, estado, animação, etc...

O css possui um&nbsp;mecanismo&nbsp;de propagação de valor.&nbsp;Para evitar ter que especificar explicitamente todos os valores para todas as propriedades de todos os elementos, as linguagens de folhas de estilo têm mecanismos para propagar os valores automaticamente. O principal benefício da propagação de valor é tornar as folhas de estilo menos extensa.
Por exemplo. Se no css voçê&nbsp;adicionar&nbsp;a tag &lt;h3&gt; como seletor todas as tags &lt;h3&gt; do documento html serão&nbsp;renderizadas com um&nbsp;único&nbsp;conjunto de regras que voçê tenha setado no css como font-family, cor do&nbsp;texto, alinhamento dentro do elemento, etc...

As regras de estilo do css podem ser incorporadas no documento html de duas maneiras&nbsp;convencionais&nbsp;(não entrarei&nbsp;no mérito de aplicar regras css com Java ou derivados):
Abrindo as tags &lt;style type="text/css"&gt; dentro da tag &lt;head&gt; de cabeçalho do html ou então ainda importando uma folha de estilho.&nbsp;
A importação também deve ocorrer dentro da tag &lt;head&gt; mas através da tag&nbsp;&lt;link rel="stylesheet" type="text/css" href="nome-da-folha-de-estilo.css"&gt;.

Note que no exemplo acima coloquei "nome-da-folha-de-estilo.css" más se a folha estiver em uma pasta no mesmo diretório (ou acima ou abaixo) deve-se colocar também o caminho para ela, feito isto as regras css já estarão incorporadas ao seu documento html.

Abaixo deixo o prometido exemplo, primeiro o fluxograma da sintaxe depois os códigos e a renderização por ultimo.



Estrutura das regras CSS (básico)






Documento html com link para folha css e divs class e id

Notem que este é o mesmo documento html de exemplo mais acima a diferença é que neste agora chamei a folha de estilo css através de link dentro da tag &lt;head&gt; assim como adicionei um identificador "class" as linhas &lt;tr&gt; de dentro da tabela e adicionei também um identificador "id" ao elemento &lt;a&gt; do link.
Os identificadores "class" e "ide" se comportam de maneiras parecidas más não iguais...uma explanação sobre esta diferença fica para um outro post.




Folha de estilo css em destaque os identificadores "class" e "id" !!!

Vale ressaltar que na folha de estilo o identificador "class" vem precedido de ponto enquanto "id" de um sustenido e ambos devem trazer o nome que voçê dá a eles no documento html.
As tags comuns do html não necessitam serem precedidas por nenhum caractere em especial simplesmente seu nome basta.




Folha de estilo css (comentada/detalhada)

O css possui muitas funcionalidades, hierarquias e herança entre os elementos como não é o objetivo deste primeiro post trataremos das minucias do css num futuro próximo ok ;)


Hora de mostrar como ficou o layout após inserirmos estes pequenos códigos em css confere ai o/ !!!




Documento html após alguns trechos de css...é o mesmo que o quadradão la´de cima !!!

Bom hehehe isto não foi nenhuma transformação radical do tipo que vá merecer um Grammy isto foi só para ilustrar que meados de 90 não tinha estilização e o jeito era aquele estilo "retro" de quadradinhos mesmo, más tudo isto mudou graças a implementação do css e já que estou encerrando esta pequena parte que fala a respeito do css saiba voçê também que se não fosse o css hoje não teríamos sites responsivos ou aplicativos mobile que rodam em praticamente qualquer tipo de resolução...pois é toda esta magica é graças ao css :)




Hora de falar um pouquinho da linguagem utilizada do lado do servidor (Server-Side), a linguagem mais utilizada no mundo todo...pois é estou falando do PHP.




PHP (Hipertext Preprocessor)




Pois bem Eu sempre gosto de expressar minha opinião e minhas experiencias com as coisas más desta vez creio deva trazer a explanação de outra fonte.

Abaixo deixo a descrição e a história segundo a Wikpédia.





PHP&nbsp;(um&nbsp;acrônimo recursivo&nbsp;para&nbsp;"PHP:&nbsp;Hypertext&nbsp;Preprocessor", originalmente&nbsp;Personal&nbsp;Home&nbsp;Page) é uma&nbsp;linguagem interpretada&nbsp;livre, usada originalmente apenas para o desenvolvimento de aplicações presentes e atuantes no&nbsp;lado do servidor, capazes de gerar conteúdo dinâmico na&nbsp;World Wide Web.2&nbsp;Figura entre as primeiras linguagens passíveis de inserção em documentos&nbsp;HTML, dispensando em muitos casos o uso de arquivos externos para eventuais processamentos de dados. O código é interpretado no lado do servidor pelo módulo PHP, que também gera a página web a ser visualizada no&nbsp;lado do cliente. A linguagem evoluiu, passou a oferecer funcionalidades em linha de comando, e além disso, ganhou características adicionais, que possibilitaram usos adicionais do PHP, não relacionados a web sites. É possível instalar o PHP na maioria dos sistemas operacionais, gratuitamente. Concorrente direto da tecnologia&nbsp;ASP&nbsp;pertencente à Microsoft, o PHP é utilizado em aplicações como o&nbsp;MediaWiki,&nbsp;Facebook,&nbsp;Drupal,&nbsp;Joomla,&nbsp;WordPress,&nbsp;Magento&nbsp;e o&nbsp;Oscommerce.

Criado por&nbsp;Rasmus Lerdorf&nbsp;em 1995, o PHP tem a produção de sua implementação principal — referência formal da linguagem, mantida por uma organização chamada The PHP Group. O PHP é software livre, licenciado sob a PHP License, uma licença incompatível com a GNU General Public License (GPL) devido a restrições no uso do termo PHP.


História do PHP&nbsp;





A linguagem surgiu em meados de&nbsp;1994, como um pacote de programas&nbsp;CGI&nbsp;criados por&nbsp;Rasmus Lerdorf, com o nome&nbsp;Personal Home Page Tools, para substituir um conjunto de scripts&nbsp;Perl&nbsp;que ele usava no desenvolvimento de sua página pessoal. Em&nbsp;1997&nbsp;foi lançado o novo pacote da linguagem com o nome de PHP/FI, trazendo a ferramenta&nbsp;Forms Interpreter, um&nbsp;interpretador de comandos&nbsp;SQL. Mais tarde,&nbsp;Zeev Suraski&nbsp;desenvolveu o analisador do PHP 3 que contava com o primeiro recurso de orientação a objetos, que dava poder de alcançar alguns pacotes, tinha&nbsp;herança&nbsp;e dava aos desenvolvedores somente a possibilidade de implementar propriedades e métodos.3&nbsp;4&nbsp;Pouco depois, Zeev e&nbsp;Andi Gutmans, escreveram o PHP 4, abandonando por completo o PHP 3, dando mais poder à máquina da linguagem e maior número de recursos de&nbsp;orientação a objetos. O problema sério que apresentou o PHP 4 foi a criação de cópias de objetos, pois a linguagem ainda não trabalhava com&nbsp;apontadores&nbsp;ou&nbsp;handlers, como são as linguagens&nbsp;Java,&nbsp;Ruby&nbsp;e outras. O problema fora resolvido na versão atual do PHP, a versão 5, que já trabalha com&nbsp;handlers. Caso se copie um objeto, na verdade copiaremos um apontador, pois, caso haja alguma mudança na versão original do objeto, todas as outras também sofrem a alteração, o que não acontecia na PHP 4.5

Trata-se de uma linguagem extremamente&nbsp;modularizada, o que a torna ideal para instalação e uso em&nbsp;servidores web. Diversos módulos são criados no repositório de extensões&nbsp;PECL&nbsp;(PHP Extension Community Library) e alguns destes módulos são introduzidos como padrão em novas versões da linguagem. É muito parecida, em&nbsp;tipos de dados, sintaxe e mesmo funções, com a linguagem&nbsp;C&nbsp;e com a&nbsp;C++. Pode ser, dependendo da configuração do servidor, embarcada no código&nbsp;HTML. Existem versões do PHP disponíveis para os seguintes sistemas operacionais:&nbsp;Windows,&nbsp;Linux,&nbsp;FreeBSD,Mac OS,&nbsp;OS/2,&nbsp;AS/400,&nbsp;Novell Netware,&nbsp;RISC OS,&nbsp;AIX,&nbsp;IRIX&nbsp;e&nbsp;Solaris.

Construir uma página dinâmica baseada em bases de dados é simples com PHP, (em parte, vale lembrar), este provê suporte a um grande número de&nbsp;bases de dados:&nbsp;Oracle,&nbsp;Sybase,&nbsp;PostgreSQL,&nbsp;InterBase,&nbsp;MySQL,&nbsp;SQLite,&nbsp;MSSQL,Firebird, etc., podendo abstrair o banco com a biblioteca&nbsp;ADOdb, entre outras. A Wikipédia funciona sobre um software inteiramente escrito em PHP, usando bases de dados&nbsp;MySQL: o&nbsp;MediaWiki.5

PHP tem suporte aos protocolos:&nbsp;IMAP,&nbsp;SNMP,&nbsp;NNTP,&nbsp;POP3,&nbsp;HTTP,&nbsp;LDAP,&nbsp;XML-RPC,&nbsp;SOAP. É possível abrir&nbsp;sockets&nbsp;e interagir com outros&nbsp;protocolos. E as&nbsp;bibliotecas&nbsp;de terceiros expandem ainda mais estas funcionalidades. Existem iniciativas para utilizar o PHP como linguagem de programação de sistemas fixos. A mais notável é a&nbsp;PHP-GTK. Trata-se de um conjunto do PHP com a biblioteca&nbsp;GTK, portada do&nbsp;C++, fazendo assim softwares inter-operacionais entre&nbsp;Windows&nbsp;e&nbsp;Linux.



Bom, depois de tudo isso só resta ressaltar que atual versão do php esta em 5.5.0 e a próxima e tão esperada versão será a 6.0 depois de muitos atrasos e percalço...

O PHP possuí também uma vasta biblioteca de plugins (extensões) que dão a ele uma extrema diversidade de funcionalidades.

Com PHP e as linguagens Client-Side é possível fazer aplicações WEB extremamente "poderosas" e não estou sendo exagerado ou falando apenas de formulários e funções básicas, com PHP é possível criar portais, redes, scripts de auto fluxo diferentemente (bem diferente diga-se) do HTML que é estruturado o PHP é dinâmico capaz de receber, enviar e buscar requisições o uso de conexões aos bancos de dados possibilita a criação de comunidades, sites de compras, blogues, redes (internas ou externas) e uma infinidade mais. não vou abordar aqui, pelo menos não agora, as tags do PHP pois são muito numerosas e suas funcionalidades só podem ser vistas realmente na prática.

Deixo pra critérios de desencargo o link para o manual do PHP vale a pena dar uma olhada não é totalmente referenciado em português mas tem muita coisa lá PHP.NET&nbsp;.Sem muitas delongas me despeço desta introdução a série de posts WEB que vem por ai...más antes deixo aqui o&nbsp;Preview do próximo post:

# Introdução a Lógica de Programação







# Preparativos para montar um Servidor Local






# E mais... aguardem ;)





Pra quem quiser trocar uma ideia comigo ou fazer uma colaboração no blogue segue ai \o/ !!!





Twitter &nbsp; &nbsp; Facebook &nbsp; &nbsp;Instagram &nbsp; Google Plus &nbsp;



Cola lá na comunidade que criei no Face Projeto Open e a gente se fala no Watts do grupo.