revisão fapesp

40
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 ı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 deInicia¸c˜ ao Cient´ ıfica no per´ ıodo de Julho de 2012 a novembro de 2012. Presidente Prudente, Novembro de 2012

Upload: lenon-fachiano

Post on 20-Jun-2015

234 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Revisão fapesp

UNIVERSIDADE ESTADUAL PAULISTA

JULIO DE MESQUITA FILHO

Faculdade de Ciencias e Tecnologia

Presidente Prudente - Sao Paulowww.fct.unesp.br

REVISAO BIBLIOGRAFICA - FAPESP

Tıtulo: Plataforma Web para auxılio ao ensino de processamento de

imagens

Bolsista: Lenon Fachiano Silva

Orientador: Prof. Dr. Celso Olivete Junior

Colaborador: Prof. Dr. Rogerio Eduardo Garcia

Orgao Financiador: FAPESP

Processo: 2012/06844-3

Vigencia: 01/07/2012 a 30/04/2013

Relatorio Cientıfico Parcial referente as atividades realizadas pelo bolsista

de Iniciacao Cientıfica no perıodo de Julho de 2012 a novembro de 2012.

Presidente Prudente,

Novembro de 2012

Page 2: Revisão fapesp

Sumario

1 Introducao 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

Page 3: Revisão fapesp

Lista de Figuras

1 Exemplo de pagina HTML basica . . . . . . . . . . . . . . . . . 3

2 Partes de uma regra CSS . . . . . . . . . . . . . . . . . . . . . 6

3 Exemplo de seletores CSS . . . . . . . . . . . . . . . . . . . . . 7

4 Exemplo de script no HTML . . . . . . . . . . . . . . . . . . . 12

5 Exemplo de variavel JavaScript . . . . . . . . . . . . . . . . . 13

6 Linha de comando do MySQL . . . . . . . . . . . . . . . . . . 18

7 MySQL Workbench . . . . . . . . . . . . . . . . . . . . . . . . . 19

8 PHPMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

9 Conexao com Banco de Dados . . . . . . . . . . . . . . . . . . 22

10 Insercao em uma Tabela . . . . . . . . . . . . . . . . . . . . . 25

11 Metodo GET . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

12 Metodo POST . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

13 Lena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

14 Redimensionamento . . . . . . . . . . . . . . . . . . . . . . . . 29

15 Imagem em tons de cinza . . . . . . . . . . . . . . . . . . . . . 30

16 Modelo Classico vs AJAX . . . . . . . . . . . . . . . . . . . . 31

17 Sincronismo vs Assincronismo . . . . . . . . . . . . . . . . . . 32

18 Criacao do objeto XMLHttpRequest . . . . . . . . . . . . . . . . 34

ii

Page 4: Revisão fapesp

Lista de Siglas e Abreviaturas

AJAX - Asynchronous JavaScript and XML

ANSI - American National Standards Institute

CERN - Laboratorio 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- Extensoes Multifuncao 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

Page 5: Revisão fapesp

1 Introducao

O presente documento tem por objetivo apresentar uma revisao das tecnolo-

gias utilizadas no desenvolvimento da plataforma web.

1

Page 6: Revisão fapesp

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 Laboratorio 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 ja estava na internet publica.[3]

Neste contexto, surgia o HTML(HyperText Markup Language) original,

derivado dos padroes 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 nao foi desenvolvido para hipertexto, mas ofere-

ce uma maneira de transformar documentos em hiper-objetos e descrever

ligacoest.[4]

De uma maneira geral, o HTML permite a representacao grafica de in-

formacoes na Internet[6]. Para tal, sao utilizadas tags, tambem chamadas de

rotulos.

Esses elementos podem ser identificados atraves de ”〈”,”〉”e os caraceteres

entre estes sımbolos. As tags sao utilizadas para a marcacao e permitem re-

alizar a exibicao de paginas 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 ficara em negrito(b refere-se a bold). Neste

caso, a saıda seria Negrito[6].

Algumas tags, excecoes a regra, nao necessitam de uma tag especıfica

para o fechamento. Estas tags representam comandos isolados, isto e, nao

2

Page 7: Revisão fapesp

necessitam de conteudo para ser processado. Nesse caso, o fechamento se da

na propria 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 basico.

Figura 1: Exemplo de pagina HTML basica

O primeiro par, <html></html>, especifica o inıcio e o fim de uma pagina.

Estes sao o primeiro e o ultimo comandos de um codigo HTML. Entre estas

tags, todo o conteudo da pagina devera ser descrito.

3

Page 8: Revisão fapesp

O segundo par, <head></head>, corresponde a delimitacao do cabecalho

de programacao e e o primeiro comando que aparece apos o <html>. Trata

de assuntos sobre a pagina[7]. No cabecalho de programacao, sao descritas

informacoes como tıtulo, nome do autor, versao da linguagem, base de en-

derecamento e metavariaveis, que ficam em tags especıficas.

Dentro desse cabecalho, devem aparecer os elementos <title>, entre os

quais sera especificado o tıtulo da pagina. Outros elementos pertencentes

ao cabecalho que podem aparecer nas paginas sao: <link>, que liga a uma

outra pagina; <style>, que inclui folhas de estilo; <script>, para incluir

scripts a pagina; e <meta>, para inclusao de informacoes sobre a pagina.[7]

O terceiro grande bloco da HTML, <body></body>, aparece apos a tag

de fechamento do cabecalho e refere-se ao corpo da pagina. Estre essas tags

estarao os elementos que serao mostrados na pagina Web[6]. Praticamente

todos os tipos de atributo(como id ou class) podem aparecer no corpo da

pagina.

O primeiro elemento que pode-se destacar no corpo da pagina e a <div>.

Esse elemento nao afeta diretamente o que sera exibido no navegador, porem

sao de grande utilidade uma vez que dividem a pagina em secoes e subsecoes[7].

Desta maneira, ocorre uma divisao da pagina em camadas, destacando que

cada camada agrupa um conteudo 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 conteudo sera formatado

segundo esta especificacao.

Ainda no corpo, tres atributos merecem ser destacados: id,class e style.

O primeiro, id, permite identificar de forma unica cada elemento da

pagina. 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, numeros, hıfens, sublinhados, ponto e vısrgula e

pontos[7].

O segundo atributo, class, refere-se a qual ou quais classe ou classses

4

Page 9: Revisão fapesp

o elementos, identidificado pelo id pertence. Sua sintaxe segue o seguinte:

<class = "Classe">, porem, caso o elemento possua mais de um tipo de

classe, estas sao indicadas por espaco 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 especificacoes, elas sao separedas por espacos.

Todavia, e interessante que as cada parte do texto, mesmo dentro de uma

camada especıfica, possa ter, caso necessario, sua propria formatacao. Para

tal, algumas tags sao utilizadas.

As primeiras tags de destaque sao <p></p>, que formatam o texto como

um paragrafo.

Em seguida, tem-se os elementos hn. Estes elementos permitem a criacao

de cabecalhos e subcabecalhos 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 responsavel por isso. Tres valores podem ser atribuıdos a

align: left, center e right. O primeiro, adotado como padrao quando align

nao e requisitado, exibe o texto a esquerda da janela, o segundo exibe o texto

no centro e o terceiro, a direita.[7]

Porem, muitos destes atributos caıram em desuso. Um exemplo claro

disso e o align, que nao descreve a estrutura mas pagina, mas sim para afetar

o resultado visual[7]. Neste caso, o mais correto a se adotar sao as CSS.

5

Page 10: Revisão fapesp

3 CSS

CSS e uma sigla para cascading style sheets, folha de estilo em cascata,

em portugues. A W3C(World Wide Web Consortium, principal orgao de

padronizacao 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 marcacao nao deveriam utilizar

elementos que definissem a aparencia da documento. Desta forma, surgiu o

CSS, cabendo a este o trabalho de controlar a aparencia das paginas[7].

CSS trabalha atribuindo regras aos elementos do documento. Essas re-

gras definem como os elementos aos quais estao associados devem ser exi-

bidos. A juncao desas regras em um unico documento define a folha de

estilos.[7]Cada regra de CSS possui duas partes: um seletor e uma declaracao,

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 ha mais de um elemento a que se aplica a regra, os seletores sao

separados por vırgulas[7]. Como exemplo de seletores tem-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 receberao as regras do CSS. Por exemplo, se utiliza-se body como sele-

tor, todo o corpo da pagina recebera as regras[10].

Ja no caso da utilizacao de uma classe, torna-se possıvel a aplicacao das

regras em qualquer elemento do HTML. Para tal, o nome do seletor deve ser

6

Page 11: Revisão fapesp

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 receberao 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 declaracao, propriedade refere-se a caracterıstica que sera afe-

tada e valor e a especificacao 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, porem seu uso e aconselhavel[10].

7

Page 12: Revisão fapesp

Um recurso importante das CSS e a heranca. Quando uma regra e apli-

cada a um a um elemento, seus filhos a herdam. Porem, caso surja uma regra

mais especıfica, a anterior e sobreposta. Um exemplo disso seria a atribuicao

da fonte arial para o elemento body; caso se queira atribuir fonte verdana

para determinada div atraves de uma outra regra, esta mais espacıfica e a

que estara ativa[7].

Apesar de ser adicionar regras CSS dentro do proprio HTML por meio

do elemento style, a utilizacao de style sheets em documentacao externa pro-

porciona uma serie de vantagens. Algumas destas vantagens, conforme es-

pecificado em [7], estao destacadas abaixo:

• Reuso: A mesma folha de estilo pode ser usada em varias paginas

diferentes. Com isso, torna-se desenecessaria a marcacao de estilo em

cada pagina individualmente.

• Menor demanda sobre o servidor: Como os estilos estao declarados

em um unico documento, as paginas ficam menores. Logo, e necessario

baixar as folhas de estilo apenas uma vez e as demais paginas exigiram

menos do servidor, por serem menores.

• Praticidade: A utilizacao de um documento externo para CSS torna

possıvel alterar a aparencia de diversas paginas com uma pequena mu-

danca na folha de estilo. Isto e muito mais pratico que fazer a alatercao

em cada documento HTML.

Para tal utilizacao, 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 ligacao com a folha de estilos; rel es-

pecifica o tipo de relacionamento entre o documento que recebe a conexao e

aquele a que sera conectado; type informa o tipo de MIME (Extensoes Multi

funcao para Mensagens de Internet) do documento a que se esta conectando,

8

Page 13: Revisão fapesp

no caso text/css ; e href a URL do documento a que sera conectado.

Com a utilizacao de HTML e CSS, e possivel produzir paginas que trans-

mitam informacao de uma forma mais clara. Porem, estas paginas ainda

sao estaticas, o que pode tornar a navegacao um tanto quanto cansativa e

monotona. Neste contexto surge a linguagem JavaScript.

9

Page 14: Revisão fapesp

4 JavaScript e jQuery

O JavaScript e uma tecnologia empregada para melhoria da web. A uti-

lizacao desta linguagem permite a criacao de paginas que possibilitam uma

experiencia com conteudos 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]. Porem, esta

mudanca gerou alguns problemas.

Apesar de a sintaxe do JavaScript ser muito semelhante a do Java, que

por sua vez deriva do C/C++, as semelhancas nao vao muito alem disso. En-

tre outras diferencas, enquanto o Java possui um vocabulario de linguagem

de programacao completo, o JavaScript possuia um pequeno vocabulario e

um modelo de programacao mais facil de compreender. O JavaScript nao

surgiu para isolado, mas sim ser uma linguagem integrada ao HTML.[11]

Logo que o JavaScript comecou a ser suportado pelo Netscape Navigator

2.0(primeiro navegador a suporta-lo), a Microsoft viu o quao util poderia ser e

lancou o JScript, sua propria variante[12], ainda que preferisse que populari-

zacao do VisualBasicScript[11]. A primeira versao do JScript era compatıvel

com JavaScript, sendo possıvel, naa maioria dos casos, que o codigo escrito

para um dos navegadores (Microsoft Internet Explorer ou Netscape Naviga-

tor) funcionasse no outro. Porem, com o passar do tempo, nem todas as

caracterısticas adicionadas a uma das linguagens eram incluıdas na outra,

comecando assim a haver incompatibilidade entre os navegadores[12].

Em 1996, a Netscape, que, visando popularizacao, ja havia tornada publica

a definicao do JavaScript [12], se reuniu com outras empresas, incluindo a Mi-

crosoft, para a criacao um padrao basico para a linguagem. A essa reuniao

deu-se o nome de European Computer Manufacturer’s Association(ECMA).

Em 1997, a primeira especificacao foi publicada sob o nome ECMAScript.

Esse denominacao deveu-se as questoes de licenciamento do nome JavaScript [11].

10

Page 15: Revisão fapesp

Ao ser lancado o padrao, os navegadores ja haviam avancado. O EC-

MAScript, que era basicamente o JavaScript 1.1 por essencia, passou a ser

aceito por ambos navegadores. Com o passar do tempo, esse padrao evolui e

encorpora caracterısticas do JavaScript 1.3 e 1.5. Apesar do padrao, algumas

diferencas ainda podem ser detectadas entre navegadores[11].

E se a diferenca quanto a linguagem JavaScript basica parece sutil, a

diferenca quanto ao modelo de objeto de documento(DOM) causa grandes

problemas. Durante a evolucao dos navegadores, nunca chegou-se a um con-

senso sobre o modelo a ser seguido. Apesar de um padrao ter sido negociado,

os principais navegadores nao adotam todas as especificacoes. Desta maneira,

torna-se complicado criar um script compatıvel com todos os browsers [11].

Mas, enfim, a diferenca entre um script e um programa muitas vezes nao

e claro. Tecnicamente, script e uma sequencia de instrucoes que sao interpre-

tadas ou executadas por um outro programa. Isso significa que, ao contrario

de um programa comum, o processador nao e o responsavel por executar o

script. Desta maneira, para executar um script nao e necessario um compi-

lador, como e o caso da linguagem C, que e estruturada e compilada[12].

Uma vez que ha necessidade de um outro programa que execute as in-

strucoes JavaScript, um par de tags especıfico torna-se necessario para in-

clusao do script no HTML. Este par, como ja dito anteriormente e

<script>...</script>

Este bloco, que indica ao navegador que o conteudo do bloco e script, e

colocado em qualquer lugar entre as <head> e </head>. Colocando o script

no cabecalho, ele sera primeiramente carregado, porem isso nao impede a

inclusao no corpo do documento[12].

Porem, ainda e necessario dizer qual o tipo de scrip sera 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

declaracao ficaria da seguinte forma[12]:

11

Page 16: Revisão fapesp

<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 omissao 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. Porem, e aconselhavel sua utilizacao[12].

Declarada a linguagem utilizada, a programacao pode ser iniciada. Uma

caracterıstica interessante da linguagem JavaScript e que para declarar uma

12

Page 17: Revisão fapesp

variavel e necessario apenas o comando var. Diferente de linguagens como

Java ou C/C++, o tipo da variavel nao e declarado. O tipo e associado

de acordo com o valor associado. Isso pode ser obsevado na Figura 5. Os

comentario em JavaScript sao como nas demais linguagens citadas[12].

Figura 5: Exemplo de variavel JavaScript. O tipo da variavel muda de acordocom o valor que e atribuıdo.

A inclusao de scripts diretamente no HTML realiza o esperado, porem

traz os mesmos problemas que a utilizacao de CSS no HTML. Logo, uma

solucao para isso e a utilizacao das chamadas ”bibliotecas de script libraries”.

As bilbiotecas correspondem a arquivos que nao possuem nada mais que

codigo JavaScript. A utilizacao dessas bibliotecas evita a duplicacao de

codigo e todos os trantornos que isto acarreta, como a elimanacao de proble-

mas no codigo, que tera que ser feita em todos os arquivos em que o codigo

foi copiado[11].

Para que um arquivo externo, sem tags HTML, possa ser carregado,

primeiramente ele estar salvo com a extensao .js. Em seguida, para que

o navegador encontre o arquivo externo criado, a tag script deve ser escrita

13

Page 18: Revisão fapesp

da seguinte maneira[11]:

<script type="text/JavaScript" src="arquivo.js"></script>

Neste tipo de chamada, nao ha nada entre as tags de abertura e fechamento,

porem elas sao obrigatorias. O atributo SRC fica responsavel por indicar a

url da biblioteca.

Essa e uma maneira de melhor organizar os scripts criados pelo desen-

volvedor ou ate 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 proprio criador, possui a

simplicidade como foco principal. Foi criada para poupar os desenvolvedores

de terem que escrever codigos longos e complexos. A sintaxe jQuery permite

que os efeitos criados com varias palavras em JavaScript sejam reduzidas a

algumas poucas[13].

Essa foi justamente a motivacao de John Resig. Insatisfeito com a maneira

como eram escritos os codigos JavaScript, em seu blog ele publicou sua frus-

tracao e uma possıvel solucao. O autor do jQuery propunha a utilizacao de

seletores, como em CSS, para tornar a mais simples a programacao. Com a

utilizacao destes seletores, tornou-se possıvel o acesso direto a cada elemento

do DOM, sem a necessidade de lacos, como no JavaScript [13].

A partir desse conceito, foi desenvolvida uma biblioteca que acrescenta

maior dinamismo as paginas web. Com jQuery, e possıvel, como descrito pelo

autor em [13]:

• Acrescentar efeitos visuais que tornam a nevegacao uma experiencia

mais agradavel ao usuario;

• Acessar e manipular o DOM;

• Prover interatividade;

14

Page 19: Revisão fapesp

• Alterar conteudos;

• Simplificar tarefas especıficas do JavaScript

Para utilizar jQuery, e necessaria a inclusao no documento HTML do .js

correspondente:

<script type="text/javascript" src="../jquery-1.2.6.js"></script>

A url passada corresponde a versao do jQuery presente no computador

do desenvolvedor. A inclusao deste documento torna-se necessaria sempre

que se quiser utilizar a biblioteca.

Uma vez que a biblioteca esta incluıda, ja e possıvel utilizar as funcoes

criadas com jQuery. Para tal, deve-se utilizar um contrutor para iniciar a

programacao. O construtor jQuery e identificado por jQuery() ou simples-

mente $()[13].

O acesso aos elementos se da da seguinte maneira: $(’div’). Com isso,

acessa-se todos os elementos div de um HTML. Porem, 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>

identificacao 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 metodos. Isso torna possıvel o encadea-

mento de metodos. Um exemplo disto e:

$(’div’).children(’p’).fadeOut().addClass(’xpto’)

15

Page 20: Revisão fapesp

Esse exemplo, retirado de [13], diz ao construtor que encontre os paragrados

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 ha como produzir um experiencia interessante ao usuario,

torna-se necessario utilizar uma maneira de armazenar aquilo que foi pro-

duzido e o conteudo que sera apresentado. Para tal, e utilizado um banco de

dados.

16

Page 21: Revisão fapesp

5 MySQL

Os bancos de dados correspondem a uma maneira de tornar o conteudo de

uma aplicacao web disponıvel para o usuario. Para administrar os bancos

de dados, sao 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 cenario. 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 estavel;

• Documentacao excelente;

• Suporte

Porem, a grande vantagem da utilizacao 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 versoes, o MySQL

nao necessita de nenhuma licenca ou compra[14].

O padrao SQL-92 e quase totalmente seguido pelo MySQL, o que facilita

a migracao[14]. A SQL, Structures Query Language, e uma linguagem de

programacao padrao para acesso e manipulacao de dados vindos de bancos

de dados relacionais. SQL e um padrao ANSI e ISO.[16]

Porem, algumas caracterısticas podem impedir esta migracao para outro

SGBD que utilize o padrao 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

Page 22: Revisão fapesp

comando do MySQL). Outra maneira e por meio de uma interface grafica.

Para este ultimo metodo existem diversas ferramentas, porem, dois destaques

sao o MySQL WorkBench e o PHPMyAdmin[14].

Na Figura 6 e possıvel visualizar a interface de linha de comando. Quanto

a interface grafica, 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 aplicacao web tem seus dados guardados no banco de da-

dos, torna-se necessaria 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

Page 23: Revisão fapesp

Figura 7: MySQL Workbench

Figura 8: PHPMyAdmin

19

Page 24: Revisão fapesp

6 PHP

O PHP, trabalhando do lado servidor, permite a geracao de conteudo dinami-

camente. O servidor lida de forma diferente com esta linguagem. Enquanto

com paginas HTML o servidor le a requisicao do navegador, encontra a pagina

no servidor e envia a pagina de volta pela rede, com paginas PHP acontece

o seguinte[16]:

• O servidor le a requisicao do navegador

• Encontra a pagina

• Realiza as instrucoes do codigo, modificando a pagina

• 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 paginas dinanimicas

e vistoriar as visitas feitas ao seu currıculo na internet[15].

Tao logo as pessoas foram se interessando pelos scripts de Rasmus, foi

lancado 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 analise de entradas vindas

de formularios HTML. A esta ferramenta foi dado o nome de Form Inter-

preter(Interpretador de Formularios), 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-

demicos se juntaram a Rasmus Lerdorf para aperfeicoar a linguagem. Com

o apoio dos jovens, Andi Gutmns e Zeev Suraski, surgiu o PHP 3. Esta

consistia em uma reescrita de todo o codigo-fonte do PHP/FI, acrescentando

extensibilidade, possibilidade de conexao com varios bancos de dados, uma

sintaxe mais consistente, suporte a orientacao a objetos e uma nova API.

20

Page 25: Revisão fapesp

Neste momento PHP passou a significar Hypertext Preprocessor [15].

No ano seguinte, Zeev e Andi comecaram a reescrever o nucleo do PHP a

fim de melhorar sua performance. Essas alteracoes, 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 necessario desenvolver um codigo que o faca.

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 contem codigo PHP devem possuir a extensao .php. Ha possibilidade de

utilizar instrucoes de um arquivo .php em outro, para tal utiliza-se a seguinte

linha no codigo:

require("arquivo.php");

ou entao

require_once("arquivo.php");

em que a unica diferenca entre os comando e que o segundo e executado

apenas uma vez, enquanto no primeiro isso nao e assegurado.[15]

Um codigo em PHP sempre vem entre dois delimitadores[15]:

<?php

?>

entre eles sao desenvolvidos os comandos.

Um codigo para conectar com o banco de dados seria semelhante ao visto

na Figura 9.

No codigo visto na Figura 9, pode-se observr elementos precedidos por $.

Estes elementos sao as variaveis do PHP [15].

As variaveis em PHP, de forma semalhante ao que ao que ocorre com

21

Page 26: Revisão fapesp

Figura 9: Exemplo de codigo para conexao com banco de dados

JavaScript, tem seus tipos determinados de acordo com o valor que lhes e

atribuıdo[15].

Algumas vezes, torna-se necessario alterar o nome das variaveis. Nestes

casos, utiliza-se $$, como no exemplo retirado de [15]:

<?php

$variavel = ’nome’; //define o nome da variavel

$$variavel= ’maria’; //cria uma variavel identificada pelo conteudo de $variavel

echo $nome; //este comando exibe o valor de $nome na tela. Resultado = maria

?>

Para que ambas variaveis passem ter o mesmo valor na memoria, deve-se

utilizar &$, de tal forma que, em:

22

Page 27: Revisão fapesp

<?php

$a = 5;

$b = &$a;

?>

o valor atribuıdo tanto a $a ou $b, alterara o valor da memoria, e ambos

passarao a exibir o mesmo conteudo[15].

Logo, no codigo visto na Figura 9, $dbhost, $dbuser, $dbpass e $dbname

sao variaveis que possuem o endereco do servidor, nome do usuario, a senha

e o nome da base de dados, respectivamente.

Na linha seguinte do codigo que realiza conexao, tem-se a funcao my-

sql connect. Aqui ve-se uma das grandes vantagens do PHP : o grande numero

de funcoes predefinidadas[14].

mysql connect realiza a conexao com o servidor, passando o nome do

servidor, nome do usuario e a senha. O comando or die, que segue o co-

mando anterior, retorna uma mensagem de erro caso a conexao nao tenha

sido estabelecida[14].

Uma vez que a conexao ja esta estabelecida, o PHP possui funcoes que po-

dem substituir funcoes do MySQL para tornar mais simples as operacoes[16].

Um exemplo disso e mysql select db, que realiza a selecao do banco de dados

ativo[16].

Outros exemplos de funcoes 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 devera ser excluıdo;

• mysql close: Encerra uma conexao com o banco de dados;

23

Page 28: Revisão fapesp

• mysql errno: Retorna o numero do erro da ultima operacao;

• mysql error: Retorna a mensagem de erro da ultima operacao;

• mysql query: Envia um comando SQL para ser executado pelo servi-

dor MySQL.

A utilizacao de mysql query permite o envio de instrucoes SQL como

CREATE, ALTER, DROP, DELETE, INSERT, UPDATE e SELECT. As

tres primeiros retornam um identificador de sucesso ou falha. Os tres seguintes

podem ser associados a mysql affected rows, que retorna a quantidade de li-

nhas afetadas. Ja o ultimo retorna um ponteiro para o resultado; este pon-

teiro pode ser utilizado para recuperar os resultados da consulta atraves da

funcao mysql fetch assoc ou mysql fetch row.[16] [14]

Na Figura 10 e possıvel observar um exemplo de codigo de insercao em

tabela denominada tabela. Porem, normalmente os valores a serem inseridos

provem de formularios HTML. Nestes casos e preciso utilizar um metodo

especıfico de tranferencia.

Existem dois metodos que permitem enviar formularios para processa-

mento: POST e GET. Estes dois metodos diferenciam-se pela maneira como

os dados sao 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 usuario enquanto os passados

por POST, nao[15].

A sintaxe para um formulario HTML a ser processado pelo metodo GET

seria como o seguinte

<form method="GET">

<input type="text" size="30" name="Nome" >

<input type="submit" value="Nome">

</form>

24

Page 29: Revisão fapesp

Figura 10: Exemplo de codigo 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 codigo para processar formulario pelo metodo GET

25

Page 30: Revisão fapesp

Ja para utilizar o metodo POST, o formulario 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 parametro action guarda o caminho para o arquivo que processara o

formulario.

Figura 12: Exemplo de codigo para processar formulario pelo metodo POST

Mas o PHP tem um poder de processmento muito grande e sua capaci-

dade vai muito alem de consultas e insercoes em bancos de dados. Essa

linguagem possui capacidade inclusive para processar imagem. Esse poder

deriva de uma grande quantidade de funcoes para representar figuras geome-

tricas regulares, modificacao de imagens e manipulacao 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

Page 31: Revisão fapesp

graficas bidimensionais. Quando instalada com o PHP, ela permite criacao,

exclusao e redimensionamento de imagens, desenho de figuras geomatricas

basicas e manipulacao 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 , porem 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-

lizacao dela para comparacao de algoritmos e testes de ferramentas que ne-

cessitem desse processamento. Abaixo pode-se observar a codificao 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 variavel

27

Page 32: Revisão fapesp

$origem = imageCreateFromJPEG("lena.jpg");

//procedimento para criac~ao na memoria de uma imagem de

//200px por 250px

$saida = ImageCreateTrueColor(200,250);

//altera a dimens~ao

/*

$saida abrigara 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 porc~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 variavel 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

Page 33: Revisão fapesp

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

Page 34: Revisão fapesp

$image = grayscale( imagecreatefromjpeg( ’lena.jpg’ ), 10 );

imagejpeg($image, "lena_gray.jpg", 100);

?>

Figura 15: Imagem em tons de cinza.Metodo da biblioteca GD

Com a utilizacao de scripts que trabalham no servidor e outras que fun-

cionam na maquina cliente, obtem-se um bom dinamismo. Porem, ainda ha

problema essencial: ao solicitar uma pagina ao servidor, este busca a nova

pagina e envia o cliente, tornando canssativa e desgastante para o usuario

visualizar essa troca de paginas inteiras. Muitas vezes, existe necessidade de

trocar apenas parte do que esta sendo exibido e nao todo conteudo. Para

solucionar este problema, surgiram as tecnicas de AJAX.[19]

30

Page 35: Revisão fapesp

7 AJAX

AJAX e uma sigla para Asynchronous JavaScript and XML, JavaScript e

XML assıncronos, em portugues. Trata-se de uma tecnica que permite car-

regar algo em uma pagina da web sem que toda a pagina seja alterada. Para

tal, utiliza JavaScript e XML ou outra linguagem de marcacao que possa

ser recuperada do servidor. O desenvolvimento foi iniciado por Jesse James

Garret, porem, posteriormente, diversos grupos deram continuidade.[17]

As tecnicas de AJAX permitem uma fuga do modelo classico da web,

funcionando como uma ferramenta intermediaria. O modelo classico con-

siste em requerer uma pagina inteira e exibi-la. Com a utilizacao do AJAX,

uma codificacao JavaScript fica responsavel por alterar a interface vista pelo

usuario. Na Figura 16 observa-se uma comparacao entre o modelo classico

de uma aplicacao web(a esquerda) e com a utilizacao de tecnicas AJAX [20]

Figura 16: Modelo Classico vs AJAX. A esquerda tem-se uma exemplicacao domodelo classico de aplicacao web; a direita com a utilizacao de tecnicas de AJAX.Fonte:[20]

O codigo em JavaScript permite que a interacao com o usuario aconteca

31

Page 36: Revisão fapesp

de forma assıncrona. Esse assincronismo faz com que o usuario nao veja, por

exemplo, uma tela branca enquanto se espera a resposta do servidor. Na

Figura 17 pode-se observar uma comparacao entre os padroes de aplicacao

web sıncrono e assıncrono, com a utilizacao de AJAX [20]

Figura 17: Sincronismo vs Assincronismo. Na imagem superior e possıvel obser-var uma interacao sıncrona de aplicacoes web, enquanto na inferior e visto umainteracao assıncrona com AJAX Fonte:[20]

A transmissao assıncrona entre pagina e servidor se da atraves do XML-

HttpRequest. Este foi criado para o Internet Explorer 5, sob o nome de

32

Page 37: Revisão fapesp

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, porem 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();

Ja no Internet Explorer, existe uma distincao. Nos navegadores mais antigos,

a sintaxe reconhecida e a seguinte:

var objAjax = new ActiveXObject("Microsoft.XMLHTTP");

Porem, nos navegadores mais recentes, muda ha uma alteracao:[17]

var objAjax = new ActiveXObject("Msxml2.XMLHTTP");

Gracas a esses detalhes, um bom exemplo JavaScript para a criacao do objeto

XMLHttpRequest esta na Figura 16, conforme visto em [17]:

Logo, com a utilizacao 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 ofereca

uma experiencia dinamica e agradavel ao usuario.

33

Page 38: Revisão fapesp

Figura 18: Criacao do objeto XMLHttpRequest

Referencias

[1] HTML 4.01 Specification. Disponıvel em: http://www.w3.org/TR/

html401/. Acesso em: 23-10-2012.

[2] Apostila PHP. Fabio B Salvador. Disponıvel em: http://omalho.

34

Page 39: Revisão fapesp

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] Introducao 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. Sao Paulo:

MAKRON Books, 2000.

[7] Duckett, Jon Introducao a Programacao Web com HTML, XHTML e

CSS. 2a Edicao. Rio de Janeiro: Editora Ciencia 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. Sao

Paulo : Novatec Editora, 2008.

[11] JavaScript, a Bıblia. Goodman, Danny. Rio de Janeiro: Elsevier,

2001.

[12] Iniciando em JavaScript 1.5 - Exemplos Praticos. Kingsley-

Hughes, Adrian e Kingsley-Hughes, Kathie. Sao Paulo: MAKRON

Books Ltda, 2001.

[13] jQuery, a biblioteca do programador JavaScript. Silva, Maurıcio

Samy. Sao Paulo : Novatec Editora, 2010.

35

Page 40: Revisão fapesp

[14] MySQL, a Bıblia. Steve Suehring. Rio de Janeiro: Campus, 2002.

[15] PHP: programando com orientacao a objetos. Dall’Oglio, Pablo.

Novatec Editora, 2009.

[16] Profissional PHP - Programando. Castagnetto, Jesus; Rawat, Har-

ish; Schumann, Sascha; Scollo, Chris; Veliath, Deepak. Sao Paulo:

MAKRON books, 2001.

[17] Ajax com jQuery: requisicoes ajax com a simplicidade de

jQuery. Silva, Maurıcio Samy. Sao Paulo: Novatec Editora, 2009.

[18] Ajax nao 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] Utilizacao de AJAX no desenvolvimento de sistemas Web.

Monografia. Limeira, Jose 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