SMARIO

1. CONCEITO DE PGINA WEB .................................................................................... 3

2. TIPOS DE PGINA WEB .............................................................................................. 3
1. Pgina web esttica...................................................................................................... 3
2. Pagina web dinmica ................................................................................................... 3
3. LINGUAGENS DE DESENVOLVIMENTO WEB ....................................................... 3
1. PHP (Hypertext Preprocessor) ................................................................................... 3
3. MVC (Model-View-Controller)................................................................................... 7
1. ASP (Active Server Pages) .......................................................................................... 8
1.4. TECNOLOGIAS DE DESENVOLVIMENTO WEB ..................................................... 9
1.4.1. JQuerry ...................................................................................................................... 9
1.4.2. Css (cascading style sheet) ......................................................................................... 9
1.4.3. JavaScript ................................................................................................................ 10
1. Conceitos
 1. CONCEITO DE PGINA WEB
Pgina web definida como um documento geralmente desenvolvido no formato
HTML, dispostos na World Wide Web (WWW), acedidos por intermedio de browsers.
A mesma possui ligaes a fim de facilitar a navegao entre os seus contedos. Ao seu
conjunto chamamos website. 1 Conceito .de (2013)

2. TIPOS DE PGINA WEB

1. Pgina web esttica
Pgina web esttica, baseado em Alvarez (2004)2, so pginas contrudas na
linguagem HTML, apresentadas sem grandes efeitos ou funcionalidades alm dos links,
por sua vez no disponibiliza interao com usurios. Estas so pginas fceis de criar,
porm desvantajosas tanto para os programadores como para os visitantes, j que s
podem apresentar textos planos acompanhados de imagem, no mximo contedos
multimdias como vdeos ou udios e no permitem a interao com usurio.

2. Pagina web dinmica

Ainda citado pelo mesmo site, Alvarez (2004), pgina web dinmica so aquelas
que incluem efeitos especiais ou funcionalidades e para isso necessrio utilizar outras
linguagens de programao, parte do simples HTML, permitindo interagir com o
visitante.

3. LINGUAGENS DE DESENVOLVIMENTO WEB

um padro usado para expressar instrues, a fim de que um equipamento
computacional as execute.

1. PHP (Hypertext Preprocessor)

PHP (Hypertext Preprocessor) uma linguagem que permite criar sites web
dinmico, possibilitando uma interao com usurios atravs de formulrios, parmetro
da url e links. O seu cdigo executado diretamente no servidor, desta maneira possvel
interagir com o banco de dados e aplicao existentes no servidor, sem expor o cdigo
fonte aos clientes. Cake Php(2014)

1 Conceito .de (2013)

2 Alvarez (2004)
 Sintaxe PHP:

<?php

//instrues

?>

1. Funes PHP

Funo em PHP um trecho de cdigo que pode ser chamado (invocado) de

qualquer parte do cdigo para executar uma tarefa qualquer e retornar algum valor. Este
valor pode ser uma array.

A funo quando chamada, ela faz com que o cdigo PHP que a chama, seja
parado. Ou seja, o cdigo para, e espera o retorno da funo para dar prosseguimento
novamente ao seu invocador.

Sintaxe de uma funo PHP:

function nome_funcao($par1, $par2, $par3...$parN)

//instrues

A sintaxe da funo : Inicia com a palavra function, seguida de espao, depois o

nome da funo (pode se usar maisculas, minsculas, underline), depois abertura de
parnteses, se tiver parmetro a funo, define-se o nome da varivel que vai ser passada
por parmetro e fechamento de parnteses. Depois o cdigo da funo deve estar entre
chaves.

Parmetro de uma funo

Parmetro o valor atribudo pelo utilizador atravs de uma funo especfica. O

parmetro introduzido ou definido com o objetivo de fazer a modificao ou
ajustamento de um determinado comando. Em muitos casos, quando um parmetro no
definido pelo utilizador, o programa escolhe um.
 Array

Um array uma estrutura de dados que armazena uma coleo de elementos de

tal forma que cada um dos elementos possa ser identificado por, pelo menos, um ndice
ou uma chave. Essa estrutura de dados tambm conhecida como varivel indexada,
vetor (para arranjos unidimensionais) e matriz (para arranjos bidimensionais). Os
arranjos mantm uma srie de elementos de dados, geralmente do mesmo tamanho e tipo
de dados.

Sintaxe:

array(

chave => valor,

chave2 => valor2,

chave3 => valor3,

...

2. HTML (HYPERTEXT MARKUP LANGUAGE)

HTML (Hypertext Markup Language)3 uma linguagem de formatao de

hipertexto utilizada para a produo de pginas na web, podendo inserir contedos
multimdias.

HTML a resultante da unio dos padres Hypertime e SGML.

Hypertime: padro para apresentao estruturada de hipermdia e informao

baseada no tempo.

SGML (standard generalized markup language): padro de formatao de

textos.

3 Apostila Desenvolvimento WEB com HTML, Css e JavaScript (2014,cap.1,pag 2e3)

 DTD (data type defition): define as regras de formatao para uma dada classe
de documentos.

Os comandos de formatao html so designados por tags <e>.

Exemplo: <tag>...</tag>.

Sintaxe html:

<html>

<head> <title> Ttulo da pgina </title> </head>

<body> Corpo da pagina </body>

</html>

De modo a facilitar o acto da programao, o html tem sofrido certas

metamorfoses, com vista a melhorar as suas ferramentas e tags, situao visvel a cada
nova verso sua. A ferramenta desenvolvida por Tim Bernes-Lee destaca-se pelas suas
verses:

1. HTML 4.01

Verso mais utilizada do html e tem as seguintes variantes.

HTML 4.01 Strict: o mais utilizado, onde podem ser utilizadas tags do HTML
4.01, s que no so permitidas tags obsoletas.

HTML 4.01 Transitional: esse permite utilizar tags de todas as verses HTML,
mas no muito recomendado.

HTML 4.01 Frameset: tem suporte a frames, um modelo muito antiquado.

2. HTML 5
Esta nova verso traz consigo importantes mudanas quanto ao papel do HTML
no mundo da Web, atravs de novas funcionalidades como semntica e acessibilidade.
Possibilita o uso de novos recursos antes possveis apenas com a aplicao de outras
tecnologias. Sua essncia tem sido melhorar a linguagem com o suporte para as mais
recentes multimdias, enquanto a mantm facilmente legvel por seres humanos e
consistentemente compreendida por computadores e outros dispositivos. O HTML5 ser
o novo padro para HTML, XHTML, e HTML DOM. Atualmente, est em fase de
esboo, porm diversos navegadores j implementam algumas de suas funcionalidades.

Em particular, HTML5 adiciona vrias novas funes sintticas. Elas incluem as tags
de<video>, <audio>, <header> e elementos <canvas>, assim como a integrao de
contedos SVG que substituem o uso de tags<object> genricas. Estas funes so
projetadas para tornar mais fcil a incluso e a manipulao de contedo grfico e
multimdia na web sem ter de recorrer a plugins proprietrios e APIs. Outros novos
elementos, como <section>, <article>, <header> e <nav>, so projetados para enriquecer
o contedo semntico dos documentos. Novos atributos tm sido introduzidos com o
mesmo propsito, enquanto alguns elementos e atributos tm sido removidos. Alguns
elementos, como<a>, e<menu> tm sido mudados, redefinidos ou padronizados. As APIs
e os modelos de objetos de documentos (DOM) no so mais pensamentos retrgrados,
mas so partes fundamentais da especificao do HTML5. HTML5 tambm define com
algum detalhe o processamento necessrio para que erros de sintaxe de documentos
invlidos sejam tratados uniformemente por todos os browsers e outros agentes de
usurios em conformidade com o HTML5.

3. MVC (Model-View-Controller)
4
MVC (Model-view-controller), modelo-viso-controlador, um padro de
arquitectura de software que separa a informao (e as suas regras de negcio) da
interface com a qual o usurio interage.

uma forma de estruturar o seu projecto de forma que a interface de interao (View)
esteja separada do controle da informao em si (models), separao esta que
intermediada por uma outra camada controladora (controllers).

Model a camada que representa os seus dados, provendo meios de acesso (leitura
e escrita) esses dados.

Contoller d-te mtodos pblicos que so chamados de actions, cada action

responsvel por uma pgina do seu site ou sistema.

O controller responsvel por decidir:

4 Jonh Dooley (2011)

1. Qual model usar;
2. Quais pedidos efetuar para o model;
3. Qual combinao de views devemos usar.
View onde o sistema interage com o usurio. Tudo que ele pode visualizar
(HTML/XML) deve ser gerado e exibido atravs desta camada. A view por sua vez tem
como responsabilidade:

1. Manipular os dados para exibio;

2. Exibir dados.
1. ASP (Active Server Pages)
5
ASP (Active Server Pages) uma tecnologia que tem como objectivo principal
criar aplicaes WEB dinmicas e interativas usando um ambiente de programao de
scripts que roda do lado do servidor.

Os arquivos Asp so identificados pela extenso .asp eles contm cdigo HTML e
pequenos programas (os scripts) que iram rodar no servidor usando os seguintes recursos:

1. Linguagem de scripts como JavaScript que actuam no servidor e navegador;

2. HTML linguagem na qual so escritas as paginas localizadas no servidor;
3. Acesso a base de dados que suportam OBDC (Open Database Connectivity),
suporte a ADO (Active Data Objects).
Quando os scripts rodam no navegador, o mesmo deve ser compatvel com a
linguagem usada. Nos dias de hoje o internet explorer compatvel com as demais
linguagens existentes.

O processamento das pginas com scripts executado no servidor, sem depender do

navegador, respondendo o cliente no formato HTML.

Vantagens

O ASP nos proporciona as seguintes vantagens:

1. Administrao do estado- atravs da ASP pode-se controlar o estado do aplicativo.

2. Segurana no cdigo fonte- o cliente ter acesso somente ao resultado do trabalho
realizado no formato HTML.

5 (Ana Ascencio e Edilene Campos, 2010, 50-55)

3. Acesso a base de dados- o ASP possui um mecanismo de fcil visualizao,
actualizao e utilizao das informaes de bases de dados OBDC e servidores
SQL.

1.4. TECNOLOGIAS DE DESENVOLVIMENTO WEB

1.4.1. JQuerry
6
JQuerry uma biblioteca JavaScript cross-browser desenvolvida para
simplificar os scripts client-side que interagem com HTML.

A sintaxe JQuerry foi desenvolvida sob o mantra escreva menos e faa mais,
isto porque o seu objectivo tornar mais simples a navegao do documento HTML, criar
animaes, implementao segura de recursos CSS e manipular eventos. Com este leque
de facilidades permitem aos desenvolvedores criarem camadas de abstrao para
interaes de mais baixo nvel, simplificando o desenvolvimento de aplicaes web
dinmicas de grande complexidade.

Todo editor de cdigo suporta HTML, porm precisamos antes atribuir uma classe
JQuerry especifica.

1.4.2. Css (cascading style sheet)

7
CSS (Cascading Style Sheet) em portugus, folhas de estilo em cascata, um
mecanismo simples para adicionar estilos em pginas da internet que adotam para o seu
desenvolvimento linguagens de marcao como o HTML.

O CSS tem como finalidade fornecer aos usurios informaes sobre apresentao
da nossa pgina. Por exemplo: cores de fontes, tamanho de texto, posicionamentos e todos
os aspectos visuais do nosso documento. Resumindo a sua maior finalidade usar os seus
elementos para aperfeioar a apresentao da nossa webpage. deste conceito que
derivou a frase: HTML para estruturar e CSS para apresentar.

A regra CSS nos possibilita gerar estilizaes utilizando pequenas pores de cdigos.
Uma regra CSS composta por duas partes: seletor e declarao.

6 Campos Edilene (2012)

7 Apostila Desenvolvimento WEB com HTML, Css e JavaScript (2014,cap.5)

1. Seletor: o alvo da regra CSS.
2. Declarao: determina os parmetros de estilo, compreende a propriedade e o
valor.
-Propriedade: determina qual ser a caracterstica do seletor a ser utilizado.

-Valor: a qualificao ou quantificao da propriedade.

Sintaxe CSS:

Seletor {propriedade: valor;}

1.4.3. JavaScript
8
JavaScript uma linguagem de programao interpretada (baseada em script) e
padronizada pela ECMA Internacional (associao especializada na padronizao de
sistemas de informao).

Criada por Brendan Eich, actualmente a principal linguagem client-side em

navegadores web, sendo originalmente implementada como parte dos navegadores web
para que os scripts pudessem ser executados visivelmente aos clientes e interagissem com
o usurio sem a necessidade deste script passar pelo servidor. Portanto esta uma
linguagem dinmica e orientada a objectos.

implementada nas pginas web, pois escrevem funes includas em HTML,

que por sua vez interagem com o Modelo de Objecto de Documentos (DOM).

Em JavaScript as variveis so declaradas da seguinte forma:

Var i;

Var sum;

8 Apostila Desenvolvimento WEB com HTML, Css e JavaScript (2014,cap.11)

 1. JSON (Javascipt Object Notation)

JSON (JavaScript Object Notation Notaao de objectos JavaScript) uma

formatao leve de troca de dados. Para seres humanos, fcil de ler e escrever. Para
mquinas fcil de interpretar e gerar. Esta baseada em um subconjunto da linguagem de
programao JavaScript.

JSON em formato de texto completamente independente de linguagens, pois usa

concees que so familiares as linguagens C, JavaScript, JAVA e outras. Estas
propriedades fazem com que JSON seja um formato ideal de troca de dados.

JSON esta constitudo em duas estruturas:

1. Uma coleo de pares nome/valor. Em vrias linguagens isto caracterizado

como um object, struct, dicionrio ou arrays associativas.
2. Uma lista ordenada de valores. Na maioria das linguagens caracterizado como
um array, vector, lista ou sequncia.
Estas so estruturas de dados universais. Virtualmente todas as linguagens de
programao modernas as suportam.
 1. BANCO DE DADOS

9Banco de dados uma coleco de dados relacionados, definidos numa estrutura

pr-determinada referente a um domnio especfico. Os bancos de dados podem ser:
hierrquicos, relacionais e dimensionais, sendo o relacional o mais utilizado.

Um banco de dados tem as seguintes propriedades:

1. uma coleo logica coerente de dados com um significado inerente.

2. Uma disposio desordenada de dados no pode ser referenciado como um banco
de dados.
3. Um banco de dados projetado com um domnio especfico.
4. Um banco de dados possui um conjunto pr-definido de usurios e aplicaes.
5. Um banco de dados representa algum objecto do mudo real.
6. Um banco de dados pode ser criado e mantido por um SGBD (Sistema de
gerenciamento do banco de dados).
1.5.1. Componentes de um banco de dados

Para o seu funcionamento correcto um banco de dados possui os seguintes

componentes:

1. Gerenciador de acesso ao disco: o SGBD utiliza o sistema operacional para

acessar os dados armazenados em disco.
2. O compilador DDL (Data definition laguange): processa as definies de esquema
do banco de dados, acessando quando necessrio o dicionrio de dados.

9 (Navathe e Elmasri, 2011, 45-55)

3. Dicionrio de dados: contm o esquema do banco de dados, suas tabelas, ndices,
formas de acesso e relacionamentos.
4. Processador do banco de dados: manipula as requisies ao BD em tempo de
execuo. tambm responsvel pela sua integridade e actualizao.
5. Processador de pesquisas: analisa as solicitaes e estas consistentes, aciona o
processador do BD para acesso efetivo aos dados.

1. SGBD

10SGBD (Sistema de gerenciamento de banco de dados) um software com

recursos especficos para facilitar a manipulao de informaes dos bancos de dados e o
desenvolvimento de programas aplicativos. Um SGBD evolve quatro componentes:
hardware, software, dados e usurios.

1.6.1. Regras gerais de um SGBD

Para a manipulao de um sistema deve se considerar algumas regras bsicas e claras.

Caso o nosso candidato no possuir uma das caractersticas a baixo citadas, este pode no
ser considerado um SGBD. Estas regras so:

Autoconteno: um SGBD no contem apenas os dados em si, armazena tambm

toda a descrio de dados, seja relacionamentos e formas de acesso.

Independncia dos dados: d-se quando as aplicaes so imunes a mudanas na

estrutura de armazenamentos.

Abstraco de dados: fornece ao usurio somente uma representao conceitual dos

dados, o que no inclui muitos detalhes sobre a sua forma de armazenamento real.

Vises: um SGBD deve permitir que cada usurio visualize os dados de forma
diferente da proveniente do banco de dados.

10 (Navathe e Elmasri, 2011, 72-93)

 Transaes: um SGBD deve gerenciar completamente a integridade referencial
defenida em seu esquema, sem precisar em tempo algum do programa aplicativo.

1.6.2. Caractersticas de um SGBD

Controle de redundncias: a redundncia consiste no armazenamento de uma

mesma informao em locais diferentes, provocando inconsistncias.

Compartilhamento de dados: o SGBD deve incluir software de controle de

concorrncia ao acesso de dados, garantindo em quaisquer tipo de situao a escrita de
leitura de dados e sem erros.

Controle de acesso: o SGBD deve dispor de recursos que possibilitam selecionar a

autoridade de cada usurio.

Interfaceamento: um banco de dados devera disponibilizar formas de acesso grfico

em linguagem natural em SQL ou ainda via menus de acesso.

Esquematizao: um banco de dados devera fornecer mecanismos que facilitam que

possibilitam a compreenso do relacionamento entre as tabelas para a sua eventual
manuteno.

Controle de integridade: um SGBD devera impedir que aplicaes ou acessos pela

interface possam comprometer a integridade dos dados.

Backups: um sistema devera apresentar facilidades no processo de recuperao de

falhas de hardware e software.

1.6.3.Objectivo de um SGBD

Dada a necessidade de implementao de um SGBD teremos em conta os seguintes

objectivos:

1. Isolar os usurios dos detalhes mais internos do banco de dados (abstraco de

dados).
2. Prover independncia dos dados as aplicaes (estrutura fsica de
armazenamento) e a estratgia de acesso.
1.6.1. Nveis de abstracao no SGBD

Um SGBD dispe dos seguintes nveis:

 Nvel fsico: nvel mais baixo de abstracao. Descreve como os dados so realmente
armazenados, englobando estruturas complexas de baixo nvel.

Nvel conceitual: descreve quais dados esto armazenados e seus relacionamentos.

Nvel de viso do usurio (lgico): descreve a parte do banco de dados de acordo

com a necessidade de cada usurio, individualmente.

de frisar tambm que o nvel de abstrao divide-se em: baseados a objecto e

baseados a registos.

1. MODELO RELACIONAL

Neste projecto usaremos o modelo relacional, sendo que este armazena todos os dados
do BD em tabelas simples, mas as informaes com mais de um arquivo podem ser
extradas e combinadas com facilidade.

O modelo relacional representado pelo modelo entidade-relacionamento (MER).

definido como entidade o conjunto de objectos da realidade modelada sobre os

quais se deseja manter uma informao no banco de dados. Caso queiramos referir um
objecto particular da entidade, podemos afirmar que estamos perante uma ocorrncia.11

11 Navathe e Elmasri, 2011, 150)

3. APLICAO PRTICA
 2.1. OBJECTO DE ESTUDO

Legacy Auto um stand de automveis, fictcia, situada em Angola na cidade de

Luanda. Nos ltimos anos esta empresa tem apresentado debilidades no fornecimento dos
seus servios, diminuindo assim o nmero de clientes e o seu rendimento financeiro. Dada
esta situao efectuamos um estudo a nvel nacional e conclumos que o mercado
automvel adoptou tcnicas evolutivas para expandir e melhorar os seus servios, porm
a empresa em questo no evoluiu neste aspecto. Desta feita decidimos implementar um
sistema informtico para uma melhor prestao de servios e expanso publicitria
massiva dos nossos produtos. Ainda dentro do estudo de campo constatamos que h uma
certa dificuldade nacional na adeso de acessrios auto, desta feita, incrementamos no
nosso sistema uma sesso de comercializao de acessrios, estes so disponibilizados
por intermedio de anncios efetuados pelos usurios do website. Para o culminar desta
aplicao usamos a plataforma de desenvolvimento Netbeans com o auxilio de algumas
linguagens de programao, todo este processo, assim como as reparties do sistema
sero devidamente detalhadas no desenrolar deste capitulo.