SISTEMA DE ENSINO PRESENCIAL CONECTADO

ANLISE E DESENVOLVIMENTO DE SISTEMAS

FULANO DE SOUZA

TRABALHO INTERDISCIPLINAR INDIVIDUAL:

Telecine Mozer

Manaus
2014

FULANO DE SOUZA

TRABALHO INTERDISCIPLINAR INDIVIDUAL:

Telecine Mozer

Trabalho de Anlise e Desenvolvimento de Sistemas

apresentado

Universidade

Norte

do

Paran

UNOPAR, como requisito parcial para a obteno de

mdia

Semestral

nas

disciplinas

de

Tpicos

em

desenvolvimento de sistemas; Metodologia cientfica;

Processo de negcios e Software; Lgica e tcnicas de
programao.
Orientador: Professores.
Merris Mozer
Reinaldo Nishikawa
Marco Hisatomi
Anderson Macedo

Manaus

2014

SUMRIO

1 INTRODUCAO..........................................................................................................3
1.1 OBJETIVO.............................................................................................................3
2 TELECINE MOZER.................................................................................................3
2.1 DOCUMENTO HTML.............................................................................................4
2.2 COMANDOS HTML...............................................................................................4
2.3 APARNCIA DE UM DOCUMENTO HTML..........................................................5
2.4 INSERIR IMAGENS E LINKS................................................................................6
2.5 INSERIR TABELAS...............................................................................................6
2.6 INSERIR VDEOS..................................................................................................7
2.7 VARIVEIS LOCAIS E GLOBAIS..........................................................................7
2.8 PARMETROS POR REFERNCIA E POR VALOR............................................8
2.9 ORGANOGRAMA................................................................................................10
3 CONCLUSO.........................................................................................................11
REFERNCIAS..........................................................................................................12

3
1 INTRODUO
Sero apresentados conceitos bsicos para o desenvolvimento de pginas
web com a utilizao da Linguagem de formatao de textos. Bem, para desenvolver
uma pgina HTML necessrio um editor de texto simples, como exemplo pode ser
usado o Bloco de Notas. Em toda linguagem, o documento em html possui
comandos chamados de Tags, comandos estes que em sua maioria devem ser
abertos e fechados, ou seja, so escritos em Pares, para que os comandos
funcionem corretamente, sendo que o fechamento o prprio comando repetido
mas

precedido

de

uma

barra.

1.1 OBJETIVO
A meta conhecer como desenvolver um documento em HTML (Linguagem
de formatao de texto), desenvolvimento esse que inclui os principais comandos
usados para criao de sites bem elaborados e principalmente funcionais.

2 TELECINE MOZER
O Telecine Mozer uma empresa do grupo Todos, onde o negcio dela
locao de filmes disponveis, alm dos canais que j se paga a assinatura de TV a
cabo. Os valores da locao variam de R$ 2,50 R$ 4,00, onde o servio abrange
todo Brasil.
A maioria das locaes no necessita de uma reserva antecipada, e a
escolha dos filmes feita pelo site. O pagamento feito no boleto da mensalidade.
O site possui um cadastro de seus clientes e est sendo implementado no novo site
de ofertas para os clientes fies, que so amostras antecipadas dos filmes
disponveis.
Existem algumas restries no site onde s poder ser acessado pelo

4
assinante que recebe uma senha junto com seu boleto mensal. Sem essa senha no
possvel fazer compras pelo site. A senha alterada mediante o pagamento.
Para que o site Telecine Mozer funcione corretamente, com todos os
requisitos apresentado, necessrio que se tenha conhecimento dos conceitos
bsicos para o desenvolvimento da pgina web do site.
Ento vamos lembrar os conceitos de HTML que sero aplicados no
desenvolvimento do site Telecine Mozer.

2.1 DOCUMENTO HTML

um documento que possui a extenso HTML ou HTM, onde esse formato
padro em html utilizado para o texto e layouts de criao de pginas web (ou
seja, para criar sites), onde uma linguagem de marcao de hipertexto. HTML a
abreviatura de Hypertext Mark-up Languare. HTML uma linguagem que
possibilita apresentar informaes (documentao de pesquisas cientficas) na
internet, ou seja, aquilo que vemos quando abrirmos uma pgina na internet nada
mais do que a interpretao que o navegador (browser) faz do HTML. Para
desenvolver um documento HTML necessrio um editor de texto simples, podendo
ser usado o Bloco de Notas.
2.2 COMANDOS HTML
Assim como em outras linguagens de programao, os comandos possuem
uma sintaxe prpria, que so chamados de Tags. A base de um documento HTML
um TAG.
TAG tudo que comea com o sinal de menor < e o sinal de maior >
ficando <>. Os Tags so etiquetas ou marcas padres para fazer indicaes a um
determinado browser, e que normalmente so usadas em pares.
O TAG principal do documento HTML este: <HTML> e todo TAG se abre a
se fecha com /, onde pode ser acrescentado o atributo Lang, cuja finalidade
identificar a lngua na qual o documento ser escrito. Fica desta maneira: Abre
<HTML>, fecha </HTML>
Existem os TAGs <head> que serve para criar o cabealho no visveis da

5
pgina, mas na aba da pgina; e o TAG <body> que serve para criar o corpo do
documento, onde ser inserido o contedo da pgina. Fica desta maneira: (abre
<head>, fecha </head>); (abre <body>, fecha <body>).
Dentro do TAG <head> existe o TAG <title> onde se encontra o ttulo da
pgina.

2.3 APARNCIA DE UM DOCUMENTO HTML

Existem inmeros TAGs usados para melhorar a Aparncia de um documento
HTML, nos quais seguem abaixo:
a)

CABEALHO: TAG <h1></h1> usado para definir o

cabealho, onde a numerao que acompanha a letra h indica o tamanho das

fontes. medida que o nmero cresce o tamanho das fontes diminui, podendo
utilizar at o h6.
b)

PARGRAFO E QUEBRA DE LINHAS: TAG <p></p> Usado

para quebra de linha ao final do pargrafo, sendo aceito o parmetro (align=) .

Mas, quando necesitar somente de uma quebra de linha sem dar espao entre
linhas pode ser utilizado o TAG <br>, sendo que ese TAG no requer seu
fechamento assim como os demais.
c)

ESTILOS DE TEXTOS: TAGs <b> -Negrito; <i> -Itlico; <u> -

Sublinhado; <sup> -Sobrescrito; <sub> -Subscrito; <tt> -Letras com o mesmo

espao (largura); <big> -Letras grandes; <small> -Letras pequenas; <blink> -Piscar
fonte (Firefox); <pr> -Textos pr-formatados (respeitando o final de linha originado
pela tecla enter).
d) FORMATAO DE FONTE: TAG <font></font>, Parmetros:
(Size- Tamanho; Face- Nome da fonte; Color- Cor da fonte).
e) FORMATAO DE FUNDO: Parmetro (bgcolor=), dentro do
TAG <body>.
2.4 INSERIR IMAGENS E LINKS PARA NAVEGAO
IMAGEM: O primeiro passo criar uma pasta com o nome imagens dentro
da pasta que est o documento HTML, pois padro os desenvolvedores criarem

6
pastas separadas para armazenar as imagens, fazendo com isso seus documentos
organizados. A incluso de imagem feita dentro do TAG <body>.
Para fazer essa incluso necessrio criar um novo pargrafo utilizando o
TAG <img src=nome da figura.extenso>, onde img significa imagem e o
atributo src significa (source= origem) onde aponta para o endereo da imagem.
LINKS: A palavra Link vem do ingls e significa ligao ou caminho, pois
atravs dos links possvel navegar entre pginas, a partir de palavras ou imagens.
Links so ligaes dinmicas entre os documentos, pois quando o usurio clica
sobre um link, ele levado para uma outra parte ou para um outro documento dentro
da rede.

2.5 INSERIR TABELAS

Para criao de tabelas, necessrio a utilizao do TAG <table></table>,
pois tudo o que for inserido dentro deste TAG far parte da tabela. A tabela no html
composta por linhas e colunas. Para cada linha que se deseja inserir usa-se os
TAGs <tr></tr>, e os TAGs que define uma coluna so os <td></td> e sempre deve
estar entre os TAGs <tr></tr>.
Para espao entre clulas utiliza-se o parmetro cellspacing que medido
em pixels, e para espao dentro da clula utiliza-se o parmetro cellpadding. Para
mesclar linhas e colunas de tabelas deve-se incluir uma nova linha para identificar o
ttulo da tabela, e utilizar o comando rowspan que a expanso de linhas
acompanhada do nmero que indica o nmero de linhas a serem mescladas.

2.6 INSERIR VDEOS

Na verso HTML 5 to simples quanto usar um tag<img>, pois preciso
apenas ter o vdeo disponvel em uma pasta do site e colocar no documento o
TAG<vdeo> apontando para ele.
Segue os principais atributos do tagvideo: Width e Height Onde definem a
largura e a altura do vdeo em pixels; Controls Define que para mostrar os
controles ao usurio, como play/pause e volume; Autoplay Define que o vdeo

7
deve iniciar a sua reproduo assim que for carregado na pgina.
Dentro do tagvideo deve ter um ou mais tags <source>, onde cada tag
representa um arquivo de vdeo em determinado formato. O padro HTML 5 suporta
apenas os formatos de vdeo MP4, WebM e Ogg.

2.7 VARIVEIS LOCAIS E GLOBAIS

Variveis locais: Para facilitar o entendimento do conceito de variveis locais,
imagine um grande programa (com vrios procedimentos) escrito simultaneamente
por diversos programadores. Cada programador no precisa preocupar-se com os
nomes das variveis que outro esteja utilizando para desenvolver o seu
procedimento. Cada varivel s vale dentro do seu respectivo procedimento e deve
ser declarada cada vez que se fizer presente. Os valores contidos em variveis
locais perdem-se aps a execuo do procedimento.
Variveis Globais: Estas variveis valem para qualquer parte do programa,
exceto no caso de ser novamente declarada como varivel local dentro de um
procedimento. Toda declarao de variveis feita no incio do programa.

2.8 PARMETROS POR REFERNCIA E POR VALOR

Na maioria das vezes precisamos passar argumentos (informaes) do
programa principal para uma funo(para saber mais sobre funes clique aqui),
para tanto utilizamos parmetros, que nada mais so do que os valores de entrada
de uma funo. Os parmetros so definidos no cabealho da funo e podemos
passar quantos parmetros forem necessrios. Existem duas maneiras de se passar
os argumentos por valor e/ou por referncia.
Qual a diferena entre um argumento passado por valor e por referncia?
Quando passamos um parmetro por valor funo recebe uma cpia do
argumento que est sendo enviado, enquanto que quando passamos o valor por
referncia, passamos na verdade a referncia do argumento, ou seja, seu endereo
na memria. Na prtica, quando passamos o argumento por valor, mesmo que haja

8
uma alterao do argumento dentro da funo, essa alterao no reflete na varivel
externa, enquanto que na referncia quando existe uma alterao dentro do
argumento da funo ela refletir diretamente na varivel externa, alterando seu
valor.
Passagem por valor:
1 function NomeDaFuncao(Parmetro1: Tipo; ParmetroN: Tipo): Tipo de retorno;
2 var
3 {declarao de variveis locais, quando necessrias}
4 Begin
5
6 {bloco de instrues}
7
8 end;
Passagem por referncia:
Em pascal para passarmos um parmetro por referncia devemos preced-lo da
palavra reservada var.
function NomeDaFuncao(var Parmetro1: Tipo; var ParmetroN: Tipo): Tipo de
retorno;
var
{declarao de variveis locais, quando necessrias}
Begin
{bloco de instrues}
end;

9
2.9 ORGANOGRAMA

Ruth

Gerente
de
Vendas

Venda
s

Assistente
de Vendas
Jonas

Paladin
o

Jander
son

Gerente
de
Locao
de Filmes
Design em
Marketing

Programa
dor Web

Caio

Moiss

Assistente
de
Programa
o

10
3 CONCLUSO
A realizao do trabalho de pesquisa referente ao exemplo de estudo
Telecine Mozer possibilitou o aprendizado terico envolvendo vrios conceitos para
o desenvolvimento de pginas web, criando documentos com extenso em HTML e
utilizando seus inmeros comandos chamados de TAGs. Usando como exemplo o
estudo de caso Telecine Mozer, esse site ter grande oportunidade de sucesso no
mercado de locao de filmes na internet, sendo que utilizando e aplicando o
conhecimento aprendido sobre os conceitos de HTML, podemos tanto desenvolver
um site funcional bem como melhorar a aparncia dele por acrescentar cores nas
fontes e fundos, criar links para navegao, inserir imagens, vdeos e tabelas que o
tornaro atraente para os clientes navegarem em suas pginas.
Portanto, esses conceitos de HTML nos ajudaro a criar e a desenvolver
excelentes pginas web.

11
REFERNCIAS