Revisão fapesp
Upcoming SlideShare
Loading in...5
×
 

Revisão fapesp

on

  • 381 views

 

Statistics

Views

Total Views
381
Views on SlideShare
381
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Revisão fapesp Revisão fapesp Document Transcript

    • UNIVERSIDADE ESTADUAL PAULISTA J´ULIO DE MESQUITA FILHO Faculdade de Ciˆencias e Tecnologia Presidente Prudente - S˜ao Paulo www.fct.unesp.br REVIS˜AO BIBLIOGR´AFICA - FAPESP T´ıtulo: Plataforma Web para aux´ılio ao ensino de processamento de imagens Bolsista: Lenon Fachiano Silva Orientador: Prof. Dr. Celso Olivete J´unior Colaborador: Prof. Dr. Rog´erio Eduardo Garcia ´Org˜ao Financiador: FAPESP Processo: 2012/06844-3 Vigˆencia: 01/07/2012 a 30/04/2013 Relat´orio Cient´ıfico Parcial referente `as atividades realizadas pelo bolsista de Inicia¸c˜ao Cient´ıfica no per´ıodo de Julho de 2012 a novembro de 2012. Presidente Prudente, Novembro de 2012
    • Sum´ario 1 Introdu¸c˜ao 1 2 World Wide Web e HTML 2 3 CSS 6 4 JavaScript e jQuery 10 5 MySQL 17 6 PHP 20 7 AJAX 31 i
    • Lista de Figuras 1 Exemplo de p´agina HTML b´asica . . . . . . . . . . . . . . . . . 3 2 Partes de uma regra CSS . . . . . . . . . . . . . . . . . . . . . 6 3 Exemplo de seletores CSS . . . . . . . . . . . . . . . . . . . . . 7 4 Exemplo de script no HTML . . . . . . . . . . . . . . . . . . . 12 5 Exemplo de vari´avel JavaScript . . . . . . . . . . . . . . . . . 13 6 Linha de comando do MySQL . . . . . . . . . . . . . . . . . . 18 7 MySQL Workbench . . . . . . . . . . . . . . . . . . . . . . . . . 19 8 PHPMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 9 Conex˜ao com Banco de Dados . . . . . . . . . . . . . . . . . . 22 10 Inser¸c˜ao em uma Tabela . . . . . . . . . . . . . . . . . . . . . 25 11 M´etodo GET . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 12 M´etodo POST . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 13 Lena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 14 Redimensionamento . . . . . . . . . . . . . . . . . . . . . . . . 29 15 Imagem em tons de cinza . . . . . . . . . . . . . . . . . . . . . 30 16 Modelo Cl´assico vs AJAX . . . . . . . . . . . . . . . . . . . . 31 17 Sincronismo vs Assincronismo . . . . . . . . . . . . . . . . . . 32 18 Cria¸c˜ao do objeto XMLHttpRequest . . . . . . . . . . . . . . . . 34 ii
    • Lista de Siglas e Abreviaturas AJAX - Asynchronous JavaScript and XML ANSI - American National Standards Institute CERN - Laborat´orio Europeu de Part´ıculas CSS- Cascading Style Sheets DOM - Modelo de Objeto de Documento ECMA - European Computer Manufacturer’s Association FI - Form Interpreter GPL - General Public License de GNU HTML - HyperText Markup Language HyTime - Hypermedia/Time-based Document Structuring Language ISO - International Organization for Standardization LGPL - GNU Lesser General Public License MIME- Extens˜oes Multifun¸c˜ao para Mensagens de Internet PHP - Hypertext Preprocessor SGBD - Sistema Gerenciador de Banco de Dados SGML - Standard Generalized Markup Language SQL - Structured Query Language TCO - Custo Total de Propriedade URL - Uniform Resource Locator W3C - World Wide Web Consortium Web - World Wide Web WWW - World Wide Web XML - Extensible Markup Language iii
    • 1 Introdu¸c˜ao O presente documento tem por objetivo apresentar uma revis˜ao das tecnolo- gias utilizadas no desenvolvimento da plataforma web. 1
    • 2 World Wide Web e HTML A World Wide Web surgiu de uma proposta de Tim Bernes-Lee (Sir Timothy John Berners-Lee), enquanto trabalhava no Laborat´orio Europeu de F´ısica de Part´ıculas(CERN), na Su´ı¸ca. Tim Bernes-Lee pretendia reunir o conhecimento adquirido pelo seu grupo de colegas em uma rede de hipertexto. Disponibi- lizado no CERN em 1990, em 1991 j´a estava na internet p´ublica.[3] Neste contexto, surgia o HTML(HyperText Markup Language) original, derivado dos padr˜oes HyTime(Hypermedia/Time-based Document Structu- ring Language) e SGML(Standard Generalized Markup Language).O primeiro fornece a base para o desenvolvimento de sistemas hipertexto padronizados, enquanto o segundo, que n˜ao foi desenvolvido para hipertexto, mas ofere- ce uma maneira de transformar documentos em hiper-objetos e descrever liga¸c˜oest.[4] De uma maneira geral, o HTML permite a representa¸c˜ao gr´afica de in- forma¸c˜oes na Internet[6]. Para tal, s˜ao utilizadas tags, tamb´em chamadas de r´otulos. Esses elementos podem ser identificados atrav´es de ” ”,” ”e os caraceteres entre estes s´ımbolos. As tags s˜ao utilizadas para a marca¸c˜ao e permitem re- alizar a exibi¸c˜ao de p´aginas nos navegadores como se fosse um texto comum formatado e exibido em um editor[7]. Em geral, as tags promovem seus efeitos em duplas. Existem tags de abertura e tags de fechamento, diferenciando-se apenas por um ”/”na tag de fechamento. Como exemplo, pode-se citar <b>Negrito</b> em que o vier entre as tags ficar´a em negrito(b refere-se a bold). Neste caso, a sa´ıda seria Negrito[6]. Algumas tags, exce¸c˜oes `a regra, n˜ao necessitam de uma tag espec´ıfica para o fechamento. Estas tags representam comandos isolados, isto ´e, n˜ao 2
    • necessitam de conte´udo para ser processado. Nesse caso, o fechamento se d´a na pr´opria tag de abertura. Um exemplo ´e o comando <br /> em que ocorre uma quebra de linha. Na estrutura de um documento HTML, destacam-se os seguintes pares de tags: <html></html>, <head></head> e <body></body>. Na Figura 1, ´e poss´ıvel ver um documento HTML b´asico. Figura 1: Exemplo de p´agina HTML b´asica O primeiro par, <html></html>, especifica o in´ıcio e o fim de uma p´agina. Estes s˜ao o primeiro e o ´ultimo comandos de um c´odigo HTML. Entre estas tags, todo o conte´udo da p´agina dever´a ser descrito. 3
    • O segundo par, <head></head>, corresponde a delimita¸c˜ao do cabe¸calho de programa¸c˜ao e ´e o primeiro comando que aparece ap´os o <html>. Trata de assuntos sobre a p´agina[7]. No cabe¸calho de programa¸c˜ao, s˜ao descritas informa¸c˜oes como t´ıtulo, nome do autor, vers˜ao da linguagem, base de en- dere¸camento e metavari´aveis, que ficam em tags espec´ıficas. Dentro desse cabe¸calho, devem aparecer os elementos <title>, entre os quais ser´a especificado o t´ıtulo da p´agina. Outros elementos pertencentes ao cabe¸calho que podem aparecer nas p´aginas s˜ao: <link>, que liga a uma outra p´agina; <style>, que inclui folhas de estilo; <script>, para incluir scripts `a p´agina; e <meta>, para inclus˜ao de informa¸c˜oes sobre a p´agina.[7] O terceiro grande bloco da HTML, <body></body>, aparece ap´os a tag de fechamento do cabe¸calho e refere-se ao corpo da p´agina. Estre essas tags estar˜ao os elementos que ser˜ao mostrados na p´agina Web[6]. Praticamente todos os tipos de atributo(como id ou class) podem aparecer no corpo da p´agina. O primeiro elemento que pode-se destacar no corpo da p´agina ´e a <div>. Esse elemento n˜ao afeta diretamente o que ser´a exibido no navegador, por´em s˜ao de grande utilidade uma vez que dividem a p´agina em se¸c˜oes e subse¸c˜oes[7]. Desta maneira, ocorre uma divis˜ao da p´agina em camadas, destacando que cada camada agrupa um conte´udo relacionado. Um exemplo disso seria agru- par as notas em uma ´unica div: quando uma caracter´ıstica, como cor ou tamanho da fonte, for associada a esta div, todo o conte´udo ser´a formatado segundo esta especifica¸c˜ao. Ainda no corpo, trˆes atributos merecem ser destacados: id,class e style. O primeiro, id, permite identificar de forma ´unica cada elemento da p´agina. Sua sintaxe segue o seguinte: id = "identificador", em que iden- tificador refere-se ´e um valor ´unico, iniciado por letra e seguido por qual- quer quantidade de letras, n´umeros, h´ıfens, sublinhados, ponto e v´ısrgula e pontos[7]. O segundo atributo, class, refere-se a qual ou quais classe ou classses 4
    • o elementos, identidificado pelo id pertence. Sua sintaxe segue o seguinte: <class = "Classe">, por´em, caso o elemento possua mais de um tipo de classe, estas s˜ao indicadas por espa¸co entre os nomes de cada: class = "Classe0 Classe1 Classe2"[7]. Por fim, style permite acrescentar regras de CSS ao elemento. Sua sin- taxe segue o seguinte: style="font-family:arial;"[7]. Assim como em class, caso haja mais especifica¸c˜oes, elas s˜ao separedas por espa¸cos. Todavia, ´e interessante que as cada parte do texto, mesmo dentro de uma camada espec´ıfica, possa ter, caso necess´ario, sua pr´opria formata¸c˜ao. Para tal, algumas tags s˜ao utilizadas. As primeiras tags de destaque s˜ao <p></p>, que formatam o texto como um par´agrafo. Em seguida, tˆem-se os elementos hn. Estes elementos permitem a cria¸c˜ao de cabe¸calhos e subcabe¸calhos em 6 n´ıveis diferentes, sendo que o n repre- senta o n´ıvel. A sintaxe para tal ´e a seguinte: <h1></h1>. Quando utiliza- dos valores maiores de n (<h2></h2>,...,<h6></h6>), uma fonte menor ´e adotada.[7] Quanto ao alinhamento do texto (`a esquerda, `a direita ou centralizado), o atributo align ´e respons´avel por isso. Trˆes valores podem ser atribu´ıdos `a align: left, center e right. O primeiro, adotado como padr˜ao quando align n˜ao ´e requisitado, exibe o texto `a esquerda da janela, o segundo exibe o texto no centro e o terceiro, `a direita.[7] Por´em, muitos destes atributos ca´ıram em desuso. Um exemplo claro disso ´e o align, que n˜ao descreve a estrutura mas p´agina, mas sim para afetar o resultado visual[7]. Neste caso, o mais correto a se adotar s˜ao as CSS. 5
    • 3 CSS CSS ´e uma sigla para cascading style sheets, folha de estilo em cascata, em portuguˆes. A W3C(World Wide Web Consortium, principal ´org˜ao de padroniza¸c˜ao da World Wide Web) define CSS como um simples mecanismo para adicionar estilos aos documentos web[8]. De fato, a W3C definiu que linguagens de marca¸c˜ao n˜ao deveriam utilizar elementos que definissem a aparˆencia da documento. Desta forma, surgiu o CSS, cabendo a este o trabalho de controlar a aparˆencia das p´aginas[7]. CSS trabalha atribuindo regras aos elementos do documento. Essas re- gras definem como os elementos aos quais est˜ao associados devem ser exi- bidos. A jun¸c˜ao desas regras em um ´unico documento define a folha de estilos.[7]Cada regra de CSS possui duas partes: um seletor e uma declara¸c˜ao, sendo que o segundo se divide em propriedade e valor (ver Figura 2).[9] Figura 2: Partes de uma regra CSS O seletor determina a qual ou quais elementos a regra vai ser aplicada. Quando h´a mais de um elemento a que se aplica a regra, os seletores s˜ao separados por v´ırgulas[7]. Como exemplo de seletores tˆem-se elementos do HTML, uma classe ou um id. Na Figura 3 ´e poss´ıvel observar um exemplo do emprego de cada um destes tipos de seletor. Ao utilizar um elemento do HTML como seletor, todos os elementos deste tipo receber˜ao as regras do CSS. Por exemplo, se utiliza-se body como sele- tor, todo o corpo da p´agina receber´a as regras[10]. J´a no caso da utiliza¸c˜ao de uma classe, torna-se poss´ıvel a aplica¸c˜ao das regras em qualquer elemento do HTML. Para tal, o nome do seletor deve ser 6
    • Figura 3: Exemplo de seletores CSS iniciada com um ponto. Para atribuir a classe CSS a um elemento do HTML, deve-se utilizar o atributo class: <div class="exemplo">...</div>. Desta forma, somente os elementos que possu´ırem esta classe receber˜ao as carac- ter´ısticas da regra[10].. Quando id ´e utilizado como seletor, um elemento espec´ıfico recebe a regra. Desta maneira, apenas um elemento do HTML pode ter esta regra associada a ele. Para tal, o seletor deve ser precedido por #[10].. Quanto `a declara¸c˜ao, propriedade refere-se a caracter´ıstica que ser´a afe- tada e valor ´e a especifica¸c˜ao que a propriedade recebe[7]. Cada par propriedade- valor ´e separado por ponto-e-v´ırgula. Caso haja apenas um par, o emprego de ponto-e-v´ırgula ´e facultativo, por´em seu uso ´e aconselh´avel[10]. 7
    • Um recurso importante das CSS ´e a heran¸ca. Quando uma regra ´e apli- cada a um a um elemento, seus filhos a herdam. Por´em, caso surja uma regra mais espec´ıfica, a anterior ´e sobreposta. Um exemplo disso seria a atribui¸c˜ao da fonte arial para o elemento body; caso se queira atribuir fonte verdana para determinada div atrav´es de uma outra regra, esta mais espac´ıfica ´e a que estar´a ativa[7]. Apesar de ser adicionar regras CSS dentro do pr´oprio HTML por meio do elemento style, a utiliza¸c˜ao de style sheets em documenta¸c˜ao externa pro- porciona uma s´erie de vantagens. Algumas destas vantagens, conforme es- pecificado em [7], est˜ao destacadas abaixo: • Reuso: A mesma folha de estilo pode ser usada em v´arias p´aginas diferentes. Com isso, torna-se desenecess´aria a marca¸c˜ao de estilo em cada p´agina individualmente. • Menor demanda sobre o servidor: Como os estilos est˜ao declarados em um ´unico documento, as p´aginas ficam menores. Logo, ´e necess´ario baixar as folhas de estilo apenas uma vez e as demais p´aginas exigiram menos do servidor, por serem menores. • Praticidade: A utiliza¸c˜ao de um documento externo para CSS torna poss´ıvel alterar a aparˆencia de diversas p´aginas com uma pequena mu- dan¸ca na folha de estilo. Isto ´e muito mais pr´atico que fazer a alater¸c˜ao em cada documento HTML. Para tal utiliza¸c˜ao, seguinte sintaxe deve ser seguida e adiciona ao head: <link rel="stylesheet" type="text/css" href="caminho/sua.css"> link ´e o elemento utilizado para gerar liga¸c˜ao com a folha de estilos; rel es- pecifica o tipo de relacionamento entre o documento que recebe a conex˜ao e aquele a que ser´a conectado; type informa o tipo de MIME (Extens˜oes Multi fun¸c˜ao para Mensagens de Internet) do documento a que se est´a conectando, 8
    • no caso text/css; e href a URL do documento a que ser´a conectado. Com a utiliza¸c˜ao de HTML e CSS, ´e possivel produzir p´aginas que trans- mitam informa¸c˜ao de uma forma mais clara. Por´em, estas p´aginas ainda s˜ao est´aticas, o que pode tornar a navega¸c˜ao um tanto quanto cansativa e mon´otona. Neste contexto surge a linguagem JavaScript. 9
    • 4 JavaScript e jQuery O JavaScript ´e uma tecnologia empregada para melhoria da web. A uti- liza¸c˜ao desta linguagem permite a cria¸c˜ao de p´aginas que possibilitam uma experiˆencia com conte´udos mais atraentes, interativos e inteligentes quando empregada no computador cliente[11]. Inicialmente chamado de Livescript, o JavaScript foi criado por Brendan Eich, da Netscape Communications. Seu nome foi alterado no momento em que Java se tornou um termo poupular e muito atraente[12]. Por´em, esta mudan¸ca gerou alguns problemas. Apesar de a sintaxe do JavaScript ser muito semelhante a do Java, que por sua vez deriva do C/C++, as semelhan¸cas n˜ao v˜ao muito al´em disso. En- tre outras diferen¸cas, enquanto o Java possui um vocabul´ario de linguagem de programa¸c˜ao completo, o JavaScript possuia um pequeno vocabul´ario e um modelo de programa¸c˜ao mais f´acil de compreender. O JavaScript n˜ao surgiu para isolado, mas sim ser uma linguagem integrada ao HTML.[11] Logo que o JavaScript come¸cou a ser suportado pelo Netscape Navigator 2.0(primeiro navegador a suport´a-lo), a Microsoft viu o qu˜ao ´util poderia ser e lan¸cou o JScript, sua pr´opria variante[12], ainda que preferisse que populari- za¸c˜ao do VisualBasicScript[11]. A primeira vers˜ao do JScript era compat´ıvel com JavaScript, sendo poss´ıvel, naa maioria dos casos, que o c´odigo escrito para um dos navegadores (Microsoft Internet Explorer ou Netscape Naviga- tor) funcionasse no outro. Por´em, com o passar do tempo, nem todas as caracter´ısticas adicionadas a uma das linguagens eram inclu´ıdas na outra, come¸cando assim a haver incompatibilidade entre os navegadores[12]. Em 1996, a Netscape, que, visando populariza¸c˜ao, j´a havia tornada p´ublica a defini¸c˜ao do JavaScript[12], se reuniu com outras empresas, incluindo a Mi- crosoft, para a cria¸c˜ao um padr˜ao b´asico para a linguagem. A essa reuni˜ao deu-se o nome de European Computer Manufacturer’s Association(ECMA). Em 1997, a primeira especifica¸c˜ao foi publicada sob o nome ECMAScript. Esse denomina¸c˜ao deveu-se as quest˜oes de licenciamento do nome JavaScript[11]. 10
    • Ao ser lan¸cado o padr˜ao, os navegadores j´a haviam avan¸cado. O EC- MAScript, que era basicamente o JavaScript 1.1 por essˆencia, passou a ser aceito por ambos navegadores. Com o passar do tempo, esse padr˜ao evolui e encorpora caracter´ısticas do JavaScript 1.3 e 1.5. Apesar do padr˜ao, algumas diferen¸cas ainda podem ser detectadas entre navegadores[11]. E se a diferen¸ca quanto a linguagem JavaScript b´asica parece sutil, a diferen¸ca quanto ao modelo de objeto de documento(DOM) causa grandes problemas. Durante a evolu¸c˜ao dos navegadores, nunca chegou-se a um con- senso sobre o modelo a ser seguido. Apesar de um padr˜ao ter sido negociado, os principais navegadores n˜ao adotam todas as especifica¸c˜oes. Desta maneira, torna-se complicado criar um script compat´ıvel com todos os browsers[11]. Mas, enfim, a diferen¸ca entre um script e um programa muitas vezes n˜ao ´e claro. Tecnicamente, script ´e uma sequˆencia de instru¸c˜oes que s˜ao interpre- tadas ou executadas por um outro programa. Isso significa que, ao contr´ario de um programa comum, o processador n˜ao ´e o respons´avel por executar o script. Desta maneira, para executar um script n˜ao ´e necess´ario um compi- lador, como ´e o caso da linguagem C, que ´e estruturada e compilada[12]. Uma vez que h´a necessidade de um outro programa que execute as in- stru¸c˜oes JavaScript, um par de tags espec´ıfico torna-se necess´ario para in- clus˜ao do script no HTML. Este par, como j´a dito anteriormente ´e <script>...</script> Este bloco, que indica ao navegador que o conte´udo do bloco ´e script, ´e colocado em qualquer lugar entre as <head> e </head>. Colocando o script no cabe¸calho, ele ser´a primeiramente carregado, por´em isso n˜ao impede a inclus˜ao no corpo do documento[12]. Por´em, ainda ´e necess´ario dizer qual o tipo de scrip ser´a usado. Para tal, ´e utilizado language. A linguagem ´e especificada entre aspas. Uma outra linguagem script podeira ser utilizada, por exemplo VBScript, sendo que a declara¸c˜ao ficaria da seguinte forma[12]: 11
    • <script language="vbscript"> Um exemplo disto pode ser visto na Figura 4. Figura 4: Exemplo de script no HTML. Destaque para language. Fonte:[12] A omiss˜ao de language faz com que o navegador interprete o script como JavaScript. Isto deve-se ao fato de essa ter sido a primeira linguagem de scripting surgida. Por´em, ´e aconselh´avel sua utiliza¸c˜ao[12]. Declarada a linguagem utilizada, a programa¸c˜ao pode ser iniciada. Uma caracter´ıstica interessante da linguagem JavaScript ´e que para declarar uma 12
    • vari´avel ´e necess´ario apenas o comando var. Diferente de linguagens como Java ou C/C++, o tipo da vari´avel n˜ao ´e declarado. O tipo ´e associado de acordo com o valor associado. Isso pode ser obsevado na Figura 5. Os coment´ario em JavaScript s˜ao como nas demais linguagens citadas[12]. Figura 5: Exemplo de vari´avel JavaScript. O tipo da vari´avel muda de acordo com o valor que ´e atribu´ıdo. A inclus˜ao de scripts diretamente no HTML realiza o esperado, por´em traz os mesmos problemas que a utiliza¸c˜ao de CSS no HTML. Logo, uma solu¸c˜ao para isso ´e a utiliza¸c˜ao das chamadas ”bibliotecas de script libraries”. As bilbiotecas correspondem a arquivos que n˜ao possuem nada mais que c´odigo JavaScript. A utiliza¸c˜ao dessas bibliotecas evita a duplica¸c˜ao de c´odigo e todos os trantornos que isto acarreta, como a elimana¸c˜ao de proble- mas no c´odigo, que ter´a que ser feita em todos os arquivos em que o c´odigo foi copiado[11]. Para que um arquivo externo, sem tags HTML, possa ser carregado, primeiramente ele estar salvo com a extens˜ao .js. Em seguida, para que o navegador encontre o arquivo externo criado, a tag script deve ser escrita 13
    • da seguinte maneira[11]: <script type="text/JavaScript" src="arquivo.js"></script> Neste tipo de chamada, n˜ao h´a nada entre as tags de abertura e fechamento, por´em elas s˜ao obrigat´orias. O atributo SRC fica respons´avel por indicar a url da biblioteca. Essa ´e uma maneira de melhor organizar os scripts criados pelo desen- volvedor ou at´e mesmo bibliotecas criadas por terceiros que contenham fun- cionalidades interessantes. Este ´e o caso da bilbioteca jQuery. jQuery ´e um biblioteca JavaScript disponibilizada como software livre e aberto. Foi criada por John Resig e, nas palavras do pr´oprio criador, possui a simplicidade como foco principal. Foi criada para poupar os desenvolvedores de terem que escrever c´odigos longos e complexos. A sintaxe jQuery permite que os efeitos criados com v´arias palavras em JavaScript sejam reduzidas a algumas poucas[13]. Essa foi justamente a motiva¸c˜ao de John Resig. Insatisfeito com a maneira como eram escritos os c´odigos JavaScript, em seu blog ele publicou sua frus- tra¸c˜ao e uma poss´ıvel solu¸c˜ao. O autor do jQuery propunha a utiliza¸c˜ao de seletores, como em CSS, para tornar a mais simples a programa¸c˜ao. Com a utiliza¸c˜ao destes seletores, tornou-se poss´ıvel o acesso direto a cada elemento do DOM, sem a necessidade de la¸cos, como no JavaScript[13]. A partir desse conceito, foi desenvolvida uma biblioteca que acrescenta maior dinamismo `as p´aginas web. Com jQuery, ´e poss´ıvel, como descrito pelo autor em [13]: • Acrescentar efeitos visuais que tornam a nevega¸c˜ao uma experiˆencia mais agrad´avel ao usu´ario; • Acessar e manipular o DOM; • Prover interatividade; 14
    • • Alterar conte´udos; • Simplificar tarefas espec´ıficas do JavaScript Para utilizar jQuery, ´e necess´aria a inclus˜ao no documento HTML do .js correspondente: <script type="text/javascript" src="../jquery-1.2.6.js"></script> A url passada corresponde a vers˜ao do jQuery presente no computador do desenvolvedor. A inclus˜ao deste documento torna-se necess´aria sempre que se quiser utilizar a biblioteca. Uma vez que a biblioteca est´a inclu´ıda, j´a ´e poss´ıvel utilizar as fun¸c˜oes criadas com jQuery. Para tal, deve-se utilizar um contrutor para iniciar a programa¸c˜ao. O construtor jQuery ´e identificado por jQuery() ou simples- mente $()[13]. O acesso aos elementos se d´a da seguinte maneira: $(’div’). Com isso, acessa-se todos os elementos div de um HTML. Por´em, uma div espec´ıfica pode ser acessada diretamente por meio de seu id[13]. Abaixo tem-se um exemplo disso: elemento HTML <div id="myId"><div> identifica¸c˜ao do jQuery $(’#myId’) Isso, como se pode observar, ocorre de forma muito semelhante ao CSS. Outro ponto que o jQuery difere do JavaScript convencional ´e a capaci- dade de retornar objetos por seus m´etodos. Isso torna poss´ıvel o encadea- mento de m´etodos. Um exemplo disto ´e: $(’div’).children(’p’).fadeOut().addClass(’xpto’) 15
    • Esse exemplo, retirado de [13], diz ao construtor que encontre os par´agrados que sejam filho de div e neles aplique o efeito fadeOut e adicione a classe xpto. O desenvolvimento deste processo utilizando apenas JavaScript puro seria trabalho e exigiria um certo tempo. Bem diferente do que ´e observado com jQuery[13]. Uma vez que h´a como produzir um experiˆencia interessante ao usu´ario, torna-se necess´ario utilizar uma maneira de armazenar aquilo que foi pro- duzido e o conte´udo que ser´a apresentado. Para tal, ´e utilizado um banco de dados. 16
    • 5 MySQL Os bancos de dados correspondem a uma maneira de tornar o conte´udo de uma aplica¸c˜ao web dispon´ıvel para o usu´ario. Para administrar os bancos de dados, s˜ao utilizados os Sistemas Gerenciadores de Bancos de Dados (SGBDs). O mercado oferece diversos Sistemas Gerenciadores de Bancos de Dados. Cada um traz suas vantagens e desvantagens. Entre eles, o MySQL se destaca oferecendo o melhor cen´ario. Este SGBD possui, entre outras caracter´ısticas, os seguintes destaques[14]: • Pode ser executado em muitas plataformas; • Oferece um baixo TCO(Custo Total de Propriedade); • ´E est´avel; • Documenta¸c˜ao excelente; • Suporte Por´em, a grande vantagem da utiliza¸c˜ao do MySQL ´e o fato se seguir a General Public License de GNU(GPL) e a GNU Lesser General Public License(LGPL). Isso significa que, para a maioria de suas vers˜oes, o MySQL n˜ao necessita de nenhuma licen¸ca ou compra[14]. O padr˜ao SQL-92 ´e quase totalmente seguido pelo MySQL, o que facilita a migra¸c˜ao[14]. A SQL, Structures Query Language, ´e uma linguagem de programa¸c˜ao padr˜ao para acesso e manipula¸c˜ao de dados vindos de bancos de dados relacionais. SQL ´e um padr˜ao ANSI e ISO.[16] Por´em, algumas caracter´ısticas podem impedir esta migra¸c˜ao para outro SGBD que utilize o padr˜ao SQL[14]. O gerenciamento do servidor de banco de dados pode se dar de duas maneiras. A forma tradicional ´e por Command-Line Interface (linha de 17
    • comando do MySQL). Outra maneira ´e por meio de uma interface gr´afica. Para este ´ultimo m´etodo existem diversas ferramentas, por´em, dois destaques s˜ao o MySQL WorkBench e o PHPMyAdmin[14]. Na Figura 6 ´e poss´ıvel visualizar a interface de linha de comando. Quanto a interface gr´afica, pode-se observar exemplos nas Figuras 7 e 8. Figura 6: Linha de comando do MySQL. Fonte: http://www.aprendendodjango. com/preparando-um-servidor-com-windows/ Agora que aplica¸c˜ao web tem seus dados guardados no banco de da- dos, torna-se necess´aria uma maneira de interagir com o MySQL. Para isso, utiliza-se uma outra linguagem. E um bom exemplo de linguagem para ser utilizada ´e o PHP. 18
    • Figura 7: MySQL Workbench Figura 8: PHPMyAdmin 19
    • 6 PHP O PHP, trabalhando do lado servidor, permite a gera¸c˜ao de conte´udo dinami- camente. O servidor lida de forma diferente com esta linguagem. Enquanto com p´aginas HTML o servidor lˆe a requisi¸c˜ao do navegador, encontra a p´agina no servidor e envia a p´agina de volta pela rede, com p´aginas PHP acontece o seguinte[16]: • O servidor lˆe a requisi¸c˜ao do navegador • Encontra a p´agina • Realiza as instru¸c˜oes do c´odigo, modificando a p´agina • Envia de volta pela rede O PHP foi criado em 1994 por Rasmus Lerdorf. No in´ıcio consistia em um punhado de scripts utilizados pelo autor para gerar p´aginas dinˆanimicas e vistoriar as visitas feitas ao seu curr´ıculo na internet[15]. T˜ao logo as pessoas foram se interessando pelos scripts de Rasmus, foi lan¸cado um pacote de ferramentas denominado ”Personal Home Page”, o primeiro significado de PHP[16]. Com o interesse pela ferramenta aumentando, foi feito um sistema de processamento de scripts e uma ferramenta para an´alise de entradas vindas de formul´arios HTML. A esta ferramenta foi dado o nome de Form Inter- preter(Interpretador de Formul´arios), ou simplesmente, FI. Assim surgia a variante do PHP denominada PHP/FI [16]. Em 1997, dois estudantes que utilizavam o PHP em seus trabalhos aca- dˆemicos se juntaram a Rasmus Lerdorf para aperfei¸coar a linguagem. Com o apoio dos jovens, Andi Gutmns e Zeev Suraski, surgiu o PHP 3. Esta consistia em uma reescrita de todo o c´odigo-fonte do PHP/FI, acrescentando extensibilidade, possibilidade de conex˜ao com v´arios bancos de dados, uma sintaxe mais consistente, suporte `a orienta¸c˜ao a objetos e uma nova API. 20
    • Neste momento PHP passou a significar Hypertext Preprocessor[15]. No ano seguinte, Zeev e Andi come¸caram a reescrever o n´ucleo do PHP a fim de melhorar sua performance. Essas altera¸c˜oes, que geraram o chamado Zend Engine, trouxeram melhorias e novos recursos, como o suporte a diver- sos servidores. O PHP utilizando esse mecanismo foi denominado PHP4[15]. Agora que tem-se uma ferramenta capaz de se comunicar com o banco de dados, ´e necess´ario desenvolver um c´odigo que o fa¸ca. Assim como ocorre com as folhas de estilo e JavaScript, os comandos PHP podem vir dentro do HTML ou em um arquivo separado. Os arquivos que contˆem c´odigo PHP devem possuir a extens˜ao .php. H´a possibilidade de utilizar instru¸c˜oes de um arquivo .php em outro, para tal utiliza-se a seguinte linha no c´odigo: require("arquivo.php"); ou ent˜ao require_once("arquivo.php"); em que a ´unica diferen¸ca entre os comando ´e que o segundo ´e executado apenas uma vez, enquanto no primeiro isso n˜ao ´e assegurado.[15] Um c´odigo em PHP sempre vem entre dois delimitadores[15]: <?php ?> entre eles s˜ao desenvolvidos os comandos. Um c´odigo para conectar com o banco de dados seria semelhante ao visto na Figura 9. No c´odigo visto na Figura 9, pode-se observr elementos precedidos por $. Estes elementos s˜ao as vari´aveis do PHP[15]. As vari´aveis em PHP, de forma semalhante ao que ao que ocorre com 21
    • Figura 9: Exemplo de c´odigo para conex˜ao com banco de dados JavaScript, tˆem seus tipos determinados de acordo com o valor que lhes ´e atribu´ıdo[15]. Algumas vezes, torna-se necess´ario alterar o nome das vari´aveis. Nestes casos, utiliza-se $$, como no exemplo retirado de [15]: <?php $variavel = ’nome’; //define o nome da vari´avel $$variavel= ’maria’; //cria uma vari´avel identificada pelo conte´udo de $variavel echo $nome; //este comando exibe o valor de $nome na tela. Resultado = maria ?> Para que ambas vari´aveis passem ter o mesmo valor na mem´oria, deve-se utilizar &$, de tal forma que, em: 22
    • <?php $a = 5; $b = &$a; ?> o valor atribu´ıdo tanto a $a ou $b, alterar´a o valor da mem´oria, e ambos passar˜ao a exibir o mesmo conte´udo[15]. Logo, no c´odigo visto na Figura 9, $dbhost, $dbuser, $dbpass e $dbname s˜ao vari´aveis que possuem o endere¸co do servidor, nome do usu´ario, a senha e o nome da base de dados, respectivamente. Na linha seguinte do c´odigo que realiza conex˜ao, tem-se a fun¸c˜ao my- sql connect. Aqui vˆe-se uma das grandes vantagens do PHP: o grande n´umero de fun¸c˜oes predefinidadas[14]. mysql connect realiza a conex˜ao com o servidor, passando o nome do servidor, nome do usu´ario e a senha. O comando or die, que segue o co- mando anterior, retorna uma mensagem de erro caso a conex˜ao n˜ao tenha sido estabelecida[14]. Uma vez que a conex˜ao j´a est´a estabelecida, o PHP possui fun¸c˜oes que po- dem substituir fun¸c˜oes do MySQL para tornar mais simples as opera¸c˜oes[16]. Um exemplo disso ´e mysql select db, que realiza a sele¸c˜ao do banco de dados ativo[16]. Outros exemplos de fun¸c˜oes PHP que substituem comandos SQL podem ser observados abaixo[16]: • mysql create db: Cria um novo banco de dados passando uma string para nomear o banco; • mysql drop db: Exclui um banco de dados passando uma string que se refere ao nome do banco que dever´a ser exclu´ıdo; • mysql close: Encerra uma conex˜ao com o banco de dados; 23
    • • mysql errno: Retorna o n´umero do erro da ´ultima opera¸c˜ao; • mysql error: Retorna a mensagem de erro da ´ultima opera¸c˜ao; • mysql query: Envia um comando SQL para ser executado pelo servi- dor MySQL. A utiliza¸c˜ao de mysql query permite o envio de instru¸c˜oes SQL como CREATE, ALTER, DROP, DELETE, INSERT, UPDATE e SELECT. As trˆes primeiros retornam um identificador de sucesso ou falha. Os trˆes seguintes podem ser associados a mysql affected rows, que retorna a quantidade de li- nhas afetadas. J´a o ´ultimo retorna um ponteiro para o resultado; este pon- teiro pode ser utilizado para recuperar os resultados da consulta atrav´es da fun¸c˜ao mysql fetch assoc ou mysql fetch row.[16] [14] Na Figura 10 ´e poss´ıvel observar um exemplo de c´odigo de inser¸c˜ao em tabela denominada tabela. Por´em, normalmente os valores a serem inseridos provˆem de formul´arios HTML. Nestes casos ´e preciso utilizar um m´etodo espec´ıfico de tranferˆencia. Existem dois m´etodos que permitem enviar formul´arios para processa- mento: POST e GET. Estes dois m´etodos diferenciam-se pela maneira como os dados s˜ao transferidos: enquanto GET envia mensagem por url, POST envia encapsulado no corpo da mensagem. Esta caracter´ıstica faz com que os dados passados por GET sejam vis´ıveis para o usu´ario enquanto os passados por POST, n˜ao[15]. A sintaxe para um formul´ario HTML a ser processado pelo m´etodo GET seria como o seguinte <form method="GET"> <input type="text" size="30" name="Nome" > <input type="submit" value="Nome"> </form> 24
    • Figura 10: Exemplo de c´odigo para insercao em uma tabela enquanto o valor seria recebido pelo arquivo PHP correspondente da maneira como ´e observado na Figura 11. Figura 11: Exemplo de c´odigo para processar formul´ario pelo m´etodo GET 25
    • J´a para utilizar o m´etodo POST, o formul´ario HTML deveria ser a seguinte <form method="POST" enctype="multipart/form-data" action=" exempPOST.php"> <input type="text" size="30" name="Nome" > <input type="submit" value="Nome"> </form> e o modo como o valor deve ser recebido pelo PHP, o visto na Figura 12. O parˆametro action guarda o caminho para o arquivo que processar´a o formul´ario. Figura 12: Exemplo de c´odigo para processar formul´ario pelo m´etodo POST Mas o PHP tem um poder de processmento muito grande e sua capaci- dade vai muito al´em de consultas e inser¸c˜oes em bancos de dados. Essa linguagem possui capacidade inclusive para processar imagem. Esse poder deriva de uma grande quantidade de fun¸c˜oes para representar figuras geom´e- tricas regulares, modifica¸c˜ao de imagens e manipula¸c˜ao de texto.[16] Para a maioria dos processamentos de imagens, o PHP utiliza uma bi- blioteca espec´ıfica: a GD Library, uma biblioteca criada para gerar imagens 26
    • gr´aficas bidimensionais. Quando instalada com o PHP, ela permite cria¸c˜ao, exclus˜ao e redimensionamento de imagens, desenho de figuras geom´atricas b´asicas e manipula¸c˜ao de textos.[16] Pode-se destacar a velocidade de processamento wdesta biblioteca, que tabalha com os formatos .png e .jpg. Essa biblioteca criada por Thomas Boutell inicialmente processava o formato .gif, por´em foi retirado por conter um trecho de algoritmo registrado por um empresa.[2] Os bons resultados obtidos com o uso dessa biblioteca permitem a uti- liza¸c˜ao dela para compara¸c˜ao de algoritmos e testes de ferramentas que ne- cessitem desse processamento. Abaixo pode-se observar a codifi¸c˜ao de alguns procedimentos que utilizam a GD. Nas Figuras 14 e 15 observa-se os resul- tados obtidos com o uso dessa biblioteca, aplicados na Figura 13. Figura 13: Lena. Imagem original. Fonte: http://www.kitware.com/blog/ home/post/246.Acesso em 7-11-2012 <?php //carrega imagem para vari´avel 27
    • $origem = imageCreateFromJPEG("lena.jpg"); //procedimento para cria¸c~ao na mem´oria de uma imagem de //200px por 250px $saida = ImageCreateTrueColor(200,250); //altera a dimens~ao /* $saida abrigar´a a imagem $origem ´e a imagem original 0,0,0,0 representam as bordas 200,250 a dimens~ao da imagem resultante 380,380 a dimens~ao da por¸c~ao capturada da imagem original */ ImageCopyResampled($saida, $origem, 0,0,0,0,200,250,380,380); //cria uma imagem a partir de uma variavel /* $saida ´e a vari´avel que guarda a imagem "lena_red.jpg" o nome da imagem gerada 100 ´e a qualidade da imagem obtida */ imagejpeg($saida, "lena_red.jpg", 100); ?> 28
    • Figura 14: Imagem redimensionada por meio da biblioteca GD <?php //converte para tons de cinza function grayscale( $image ) { imagefilter( $image, IMG_FILTER_GRAYSCALE ); return $image; } 29
    • $image = grayscale( imagecreatefromjpeg( ’lena.jpg’ ), 10 ); imagejpeg($image, "lena_gray.jpg", 100); ?> Figura 15: Imagem em tons de cinza.M´etodo da biblioteca GD Com a utiliza¸c˜ao de scripts que trabalham no servidor e outras que fun- cionam na m´aquina cliente, obt´em-se um bom dinamismo. Por´em, ainda h´a problema essencial: ao solicitar uma p´agina ao servidor, este busca a nova p´agina e envia o cliente, tornando canssativa e desgastante para o usu´ario visualizar essa troca de p´aginas inteiras. Muitas vezes, existe necessidade de trocar apenas parte do que est´a sendo exibido e n˜ao todo conte´udo. Para solucionar este problema, surgiram as t´ecnicas de AJAX.[19] 30
    • 7 AJAX AJAX ´e uma sigla para Asynchronous JavaScript and XML, JavaScript e XML ass´ıncronos, em portuguˆes. Trata-se de uma t´ecnica que permite car- regar algo em uma p´agina da web sem que toda a p´agina seja alterada. Para tal, utiliza JavaScript e XML ou outra linguagem de marca¸c˜ao que possa ser recuperada do servidor. O desenvolvimento foi iniciado por Jess´e James Garret, por´em, posteriormente, diversos grupos deram continuidade.[17] As t´ecnicas de AJAX permitem uma fuga do modelo cl´assico da web, funcionando como uma ferramenta intermedi´aria. O modelo cl´assico con- siste em requerer uma p´agina inteira e exibi-la. Com a utiliza¸c˜ao do AJAX, uma codifica¸c˜ao JavaScript fica respons´avel por alterar a interface vista pelo usu´ario. Na Figura 16 observa-se uma compara¸c˜ao entre o modelo cl´assico de uma aplica¸c˜ao web(`a esquerda) e com a utiliza¸c˜ao de t´ecnicas AJAX [20] Figura 16: Modelo Cl´assico vs AJAX. `A esquerda tem-se uma exemplica¸c˜ao do modelo cl´assico de aplica¸c˜ao web; `a direita com a utiliza¸c˜ao de t´ecnicas de AJAX. Fonte:[20] O c´odigo em JavaScript permite que a intera¸c˜ao com o usu´ario aconte¸ca 31
    • de forma ass´ıncrona. Esse assincronismo faz com que o usu´ario n˜ao veja, por exemplo, uma tela branca enquanto se espera a resposta do servidor. Na Figura 17 pode-se observar uma compara¸c˜ao entre os padr˜oes de aplica¸c˜ao web s´ıncrono e ass´ıncrono, com a utiliza¸c˜ao de AJAX [20] Figura 17: Sincronismo vs Assincronismo. Na imagem superior ´e poss´ıvel obser- var uma intera¸c˜ao s´ıncrona de aplica¸c˜oes web, enquanto na inferior ´e visto uma intera¸c˜ao ass´ıncrona com AJAX Fonte:[20] A transmiss˜ao ass´ıncrona entre p´agina e servidor se da atrav´es do XML- HttpRequest. Este foi criado para o Internet Explorer 5, sob o nome de 32
    • XMLHTTP, como objeto do ActiveX, sendo posteriormente implementado nativamente no Mozilla Firefox 1.0.[17] Hoje a maioria dos navegadores uti- liza o XMLHttpRequest como um objeto JavaScript, por´em o Internet Ex- plorer ainda o utiliza como ActiveX.[19] Para criar um objeto XMLHttpRequest nos navegadores em geral, a sin- taxe ´e a seguinte[17]: var objAjax = new XMLHttpRequest(); J´a no Internet Explorer, existe uma distin¸c˜ao. Nos navegadores mais antigos, a sintaxe reconhecida ´e a seguinte: var objAjax = new ActiveXObject("Microsoft.XMLHTTP"); Por´em, nos navegadores mais recentes, muda h´a uma altera¸c˜ao:[17] var objAjax = new ActiveXObject("Msxml2.XMLHTTP"); Gra¸cas a esses detalhes, um bom exemplo JavaScript para a cria¸c˜ao do objeto XMLHttpRequest est´a na Figura 16, conforme visto em [17]: Logo, com a utiliza¸c˜ao dessas linguagens e tecnologias, torna-se poss´ıvel o desenvolvimento de um projeto para plataforma Web que seja capaz de realizar bons processamentos, tanto de texto quanto imagem, e que ofere¸ca uma experiˆencia dinˆamica e agrad´avel ao usu´ario. 33
    • Figura 18: Cria¸c˜ao do objeto XMLHttpRequest Referˆencias [1] HTML 4.01 Specification. Dispon´ıvel em: http://www.w3.org/TR/ html401/. Acesso em: 23-10-2012. [2] Apostila PHP. F´abio B Salvador. Dispon´ıvel em: http://omalho. 34
    • blog.br/apostilas/apostilaphp.pdf. Acesso em: 05-11-2012. [3] Longer Biography. Dispon´ıvel em: http://www.w3.org/People/ Berners-Lee/Longer.html. Acesso em: 23-10-2012. [4] Introdu¸c˜ao `a Linguagem HTML. Dispon´ıvel em: http://www. icmc.usp.br/ensino/material/html/intro.html. Acesso em: 23-10- 2012. [5] A history of HTML. Dispon´ıvel em: http://www.w3.org/People/ Raggett/book4/ch02.html. Acesso em: 23-10-2012. [6] Mazzetti, Gerardo e Mink, Carlos. HTML 4 com XML. S˜ao Paulo: MAKRON Books, 2000. [7] Duckett, Jon Introdu¸c˜ao `a Programa¸c˜ao Web com HTML, XHTML e CSS. 2a Edi¸c˜ao. Rio de Janeiro: Editora Ciˆencia Moderna Ltda. 2010. [8] Cascading Style Sheets. Dispon´ıvel em: http://www.w3.org/ Style/CSS/. Acesso em: 30-10-2012. [9] Cascading Style Sheets, level 2 CSS2 Specification W3C Recom- mendation 12-May-1998. [10] Construindo Sites com CSS e XHTML. Silva, Maur´ıcio Samy. S˜ao Paulo : Novatec Editora, 2008. [11] JavaScript, a B´ıblia. Goodman, Danny. Rio de Janeiro: Elsevier, 2001. [12] Iniciando em JavaScript 1.5 - Exemplos Pr´aticos. Kingsley- Hughes, Adrian e Kingsley-Hughes, Kathie. S˜ao Paulo: MAKRON Books Ltda, 2001. [13] jQuery, a biblioteca do programador JavaScript. Silva, Maur´ıcio Samy. S˜ao Paulo : Novatec Editora, 2010. 35
    • [14] MySQL, a B´ıblia. Steve Suehring. Rio de Janeiro: Campus, 2002. [15] PHP: programando com orienta¸c˜ao a objetos. Dall’Oglio, Pablo. Novatec Editora, 2009. [16] Profissional PHP - Programando. Castagnetto, Jesus; Rawat, Har- ish; Schumann, Sascha; Scollo, Chris; Veliath, Deepak. S˜ao Paulo: MAKRON books, 2001. [17] Ajax com jQuery: requisi¸c˜oes ajax com a simplicidade de jQuery. Silva, Maur´ıcio Samy. S˜ao Paulo: Novatec Editora, 2009. [18] Ajax n˜ao ´e uma tecnologia, ´e um jeito. Gilberto Alves Jr. Dispon´ıvel em: http://webinsider.uol.com.br/2005/11/01/ ajax-nao-e-uma-tecnologia-e-um-jeito/. Acesso em: 07-11-2012. [19] Utiliza¸c˜ao de AJAX no desenvolvimento de sistemas Web. Monografia. Limeira, Jos´e Luiz Silveira. Dispon´ıvel em: http://www. limeira.eti.br/monografia_ajax.pdf. Acesso em: 07-11-2012. [20] Ajax: A New Approach to Web Applications. Dispon´ıvel em: http://www.adaptivepath.com/ideas/ ajax-new-approach-web-applications. Acesso em: 07-11-2012. 36