SISTEMA DE ENSINO PRESENCIAL CONECTADO

TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

XXXXXXXXXXXXXXXXXXXXXXX

“ESTUDO DE CASO - TELECINE MOZER”

XXXXXXXXXXXXXX
2014
 XXXXXXXXXXXXXXXXXXXXXX

“ESTUDO DE CASO - TELECINE MOZER”

Trabalho apresentado ao Curso Superior de Tecnologia

em Análise de Desenvolvimento de Sistemas da
UNOPAR – Universidade Norte do Paraná, para as
disciplinas Tópicos em desenvolvimentos de Sistemas;
Lógica e Técnicas de Programação; Metodologia
Científica; Processo de Negócio e Software.

Professores: Merris Mozer; Reinaldo Nishikawa; Marco

Hisatomi; Anderson Macedo.

XXXXXXXXXXXXXX
2014
 SUMÁRIO

1 INTRODUÇÃO...................................................................................................3
2 OBJETIVOS.......................................................................................................4
3 DESENVOLVIMENTO........................................................................................5
3.1 DOCUMENTO HTML.........................................................................................5
3.2 APARÊNCIA DO DOCUMENTO HTML.............................................................6
3.3 INSERINDO VÍDEO NO DOCUMENTO............................................................9
3.4 CONSTRUÇÃO DE TABELAS.........................................................................10
3.5 INSERINDO LINKS NO DOCUMENTO HTML................................................11
3.6 FUNÇÕES – C# (SHARP)...............................................................................12
3.7 ORGANOGRAMA TELECINE MOZER...........................................................15
4 CONCLUSÃO...................................................................................................16
REFERÊNCIAS...........................................................................................................17
 3

1 INTRODUÇÃO

As empresas sempre estão sempre buscando evoluir para atrair

mais clientes. Com o avanço da tecnologia, ter um Web Site passou a ser
necessário, pois as pessoas precisam de agilidade e comodidade, poder fazer
compras, locação de livros e filmes sem sair de casa, é essencial, além de facilitar a
vida do cliente também aumenta a possibilidade de ter mais lucro. Um site pode ser
visto em qualquer lugar do mundo através da internet. Esse investimento é algo a
ser considerado, pois existe um retorno muito grande. Podendo divulgar o nome da
empresa, mostrar sua historia, simplesmente mostrar para o cliente o conceito da
organização.
 4

2 OBJETIVOS

O trabalho apresentará alguns conceitos básicos e alguns comandos

usados na linguagem de programação HTML (Hypertext Markup Language) tão
importante em nosso cotidiano utilizando qualquer editor de texto. e os dados
primitivos da linguagem C# (SHARP), a influência do mundo virtual com o homem e
a forma de organizações dos dados manipulados.
 5

3 DESENVOLVIMENTO

3.1 DOCUMENTO HTML

HTML – abreviação de HiperText Markup Language é a linguagem

de programação usada para criar uma página Web, que por sua vez será composta
de textos e comandos especiais que são chamados de Tags. Tem como finalidade
básica formatar o texto e imagens exibidos e criar ligações entre páginas Web,
criando assim documentos com o conceito de Hipertexto.
Os comandos em HTML são chamados de tags, e eles irão dizer ao
browser como o texto, a informação e as imagens serão exibidas. Além de
formatação de texto um tag também pode dizer que na verdade um determinado
pedaço do texto é um endereço para outra página Web, que será acessado ao dar
um click no endereço. Tag é um código usado para marcar o início e, onde for
requerido, o fim de um elemento HTML. Uma tag de abertura é representada por
sinal de menor ( < ), um nome de elemento HTML, e um sinal de maior ( > ) (ex.
<p>) e deve ser colocada imediatamente antes do início do conteúdo do elemento.
Uma tag de fechamento se diferencia de uma tag de abertura apenas por um a barra
( / ) antes do nome do elemento (ex. </ p>) e deve ser colocada após o fim do
conteúdo do elemento.
Os Atributos servem para definir uma propriedade de um elemento
HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo
após o nome do elemento, precedido de um espaço e é composto de um nome de
atributo, um sinal de igual ( = ) e um valor de atributo, cercado por aspas duplas ( " ).
Uma página HTML é dividida em duas partes, a cabeça e o corpo.
Na cabeça (ou cabeçalho) são definidos os atributos principais do documento, como
o título e as palavras-chave. O corpo contém a parte visível do documento.
A estrutura de um documento HTML é:
<html>
<head>
<title>

</title>
</head>
</html>
 6

3.2 APARÊNCIA DO DOCUMENTO HTML

3.2.1 CABEÇALHO

O cabeçalho serve para dividir seções de texto. O HTML define seis

níveis de cabeçalho. É necessário utilizar um comando específico; no cabeçalho, o
tag responsável é: <h>.....</h>, porém o comando “h” necessita que seja especifico
o tamanho de apresentação do texto que compõe o cabeçalho.
O número apresentado com a letra “h” é o número que determina o
tamanho da linha para que se destaque com relação ao texto do documento. Quanto
maior o número apresentado, menor será o tamanho da linha apresentada.
Exemplo:
<h1> Texto cabeçalho</h1>
<h2> Texto cabeçalho</h2>
<h3> Texto cabeçalho</h3>
<h4> Texto cabeçalho</h4>
<h5> Texto cabeçalho</h5>
<h6> Texto cabeçalho</h6>

3.2.2 PARÁGRAFO

Os parágrafos são definidos com a tag <p>. è utilizado no final da

linha, para indicar o final do parágrafo ou onde deseja-se que seja feita uma quebra
de lina.
Para formatação do texto utilizamos alguns atributos:

<p align=“left”> Alinha o texto à esquerda

<p align=“right”> Alinha o texto à direita
<p align=“center”> Alinha o texto centralizado
<p align=“justify”> Alinha o texto justificado

3.2.3 FORMATANDO DOCUMENTO HTML

A linguagem HTML define vários elementos para se formatar um

 7

texto, como por exemplo, escrever em negrito, itálico, sublinhado dentre outras
formatações. Exemplo:

<b> Define o texto em negrito

<big> Define o texto grande
<i> Define o texto em itálico
<u> Define o texto em sublinhado
<small> Define o texto pequeno
<strong> Define o texto forte
<sub> Define o texto subscrito (ex: 52 )
<sup> Define o texto sobrescrito (ex: 52)
<ins> Define texto inserido
<del> Define texto apagado

3.2.4 FORMATANDO FONTE

A tag <font> é usada para definir o estilo todo de um texto, mesmo

que ele tenha diferentes aspectos em diversos trechos. Dentro da tag podemos
colocar todos os parâmetros para o estilo do texto, como estilo de letra, tamanho da
fonte, cor, etc.
O tamanho padrão utilizado em documentos da web é de número 3,
mas o desenvolvedor pode atribuir o que melhor convier, desde que o size encontra-
se entre 1 e 7.

<Font color="cor do texto">Texto</font> - Mudar a cor de um

texto
<Font size=#>Texto</font> - Mudar o tamanho da fonte
<Font face="estilo">Texto</font> - Mudar o estilo da fonte

3.2.5 INSERINDO IMAGENS NO DOCUMENTO HTML

Quando navegamos necessitamos de imagens coloridas, belas para

que as páginas não se tornem monótonas e consigam transmitir a mensagem
desejada ao usuário. Os formatos de arquivos mais comuns para web são o GIF e o
 8

JPG ou JPEG.
Para se colocar imagens em uma página HTML. Usa-se o marcador
<IMG> dentro das delimitações do <BODY>. Sintaxe:

<img src="nome da figura.extensão" >

Atributos do tag imagem

<IMG> - tag que determina a inserção de uma imagem;

SRC - este atributo diz onde está a imagem.
ALT - este atributo permite colocar um texto alternativo na imagem.
BORDER - este atributo configura uma borda (moldura) na imagem.
Seus valores variam de 0 (sem borda) a infinito. Se não for especificado, o seu valor
será 1.
WIDTH - especifica a largura da imagem. Seu valor é medido em
pixels. Se não for especificado a imagem aparece com seu tamanho original.
HEIGHT - especifica a altura da imagem. Seu valor é medido em
pixels. Se não for especificado a imagem aparece com seu tamanho original.
ALIGN - atribui valores para o alinhamento horizontal (à esquerda,
ao centro, à direita - left, center e right); ou valores para o alinhamento vertical (top,
midlle, baseline e bottom). Outros valores também são aceitos: texttop, absmidlle,
absbottom.
ALIGN=LEFT - a imagem fica à esquerda,
ALIGN=RIGHT - a imagem fica à direita,
ALIGN=CENTER - a imagem fica no centro,
ALIGN=TOP - alinha o topo da imagem com o topo do elemento
mais alto da linha, que pode ser uma outra imagem,
ALIGN=MIDDLE - alinha a base do texto com o centro da imagem,
ALIGN=BOTTOM - alinha a imagem com a base dos outros
elementos da linha.
ALIGN=TEXTTOP - alinha o topo da imagem com o topo do texto,
ALIGN=ABSMIDDLE - alinha o centro do texto com o centro da
imagem.
ALIGN=BASELINE e ALIGN=ABSBOTTOM - alinham a imagem
 9

com a base dos outros elementos da linha;

VSPACE - especifica o espaço acima e abaixo da imagem. Seu
valor é medido em pixels.
HSPACE - especifica o espaço a direita e esquerda da imagem. Seu
valor é medido em pixels.

Imagens como link

Para utilizar uma imagem como link acrescenta a tag IMG entre as
tag <a></a>. Quando se usa uma imagem como link, é preciso definir o atributo
BORDER=0, pois alguns navegadores exibem uma borda azul ao redor da imagem,
prejudicando a aparência da página. Sintaxe:

<a href=”URL”><img src=“imagem do arquivo.extensão”></a>

3.3 INSERINDO VÍDEO NO DOCUMENTO

Para inserir vídeo no documento HTML utiliza-se a tag <EMBED>. O

atributo src define qual arquivo de vídeo para incorporar a página. Sintaxe:

<embed src=“nome do vídeo.extensão” />

Os principais atributos do tag <EMBED> são:

WIDTH E HEIGHT: definem respectivamente a largura e a altura do
vídeo em pixels.
AUTOSTART: serve para escolher se o vídeo vai começar a
reproduzir quando a página for carregada (AUTOSTART=”TRUE”) ou quando o
usuário clicar no botão Executar (AUTOSTART=”FALSE”).
LOOP: serve para especificar se o vídeo vai fica repetindo ou não.
TRUE faz com que o vídeo reproduza infinitamente, FALSE faz com que o vídeo só
seja reproduzido uma vez e depois se o usuário quiser rever o vídeo ele vai ter que
pressionar o botão Executar.
Para inserir um vídeo de alguma página da internet, é só copiar o
endereço do vídeo. Sintaxe:
 10

<embed src=“URL do vídeo” />

3.4 CONSTRUÇÃO DE TABELAS

As tabelas são importantes para organizar e apresentar dados de

forma prática. É possível inserir texto, imagens ou links em tabelas, distribuindo
melhor as informações em um documento HTML. Praticamente todas as páginas
web utilizam recursos de tabela para diagramar seus elementos.
Uma tabela é delimitada com os marcadores <TABLE></TABLE>,
sendo que dentro
destes marcadores são colocadas as linhas e as colunas da tabela.
Exemplo:
<TABLE>
<TR> Indica o início de uma nova linha na tabela
<TD> Indica uma coluna na tabela
</TD> Indica o final daquela coluna na tabela
</TR> Indica o final da linha na tabela
</TABLE>

É possível definir alguns atributos para tabelas, como bordas,

alinhamento do conteúdo, espaçamento entre as células, espaçamento entre os
dados e a próxima célula, largura de tabela, etc...

BORDER=“nº”: espessura da borda em pixels.

WIDTH=“nº%”: largura da tabela em relação ao browser, pixels ou
%;
HEIGHT=“nº%”: altura da tabela em relação ao browser, em pixels
ou %;
CELLSPACING=“nº”: espaço entre uma célula e outra, em pixels;
CELLADDING=“nº”: espaço entre os dados e a borda da tabela,
pixels;
BGCOLOR=“nome da cor”: cor de fundo das células da tabela.

Para mesclar a célula em uma mesma linha usa-se o atributo

 11

COLSPAN na tag TD e para mescla a célula em uma mesma coluna usa-se o

atributo ROWSPAN na tag TD.

COLSPAN=“nº”: é o número de colunas que a célula ocupará;

ROWSPAN=“nº”: é o número de linhas que a célula ocupará;

3.5 INSERINDO LINKS NO DOCUMENTO HTML

Um site é composto de várias páginas web e para vincular uma

página a outra é preciso criar links. Para criar um link em uma página HTML, deve-
se usar a tag <a></a>. A tag <a> costuma ser chamada de tag âncora.
Âncora é uma referência dentro da página. Quando criamos um link
para uma âncora, é como se criássemos um link, interno ao próprio documento.
Os links podem ser agrupados da seguinte forma:
Links internos: aqueles que indicam outras partes da mesma página;
Links locais: aqueles que indicam outras páginas no mesmo site;
Links remotos: aqueles que indicam outras páginas de outros sites;
Links com endereços de correio: para criar uma mensagem de
correio.
Sintaxe da tag link:

<a href=“URL da página”> Descrição do link</a>

Para criar um link para um e-mail é preciso informar o endereço

eletrônico na tag de link. Sintaxe:

<a
href=”mailto:suário@dominio.com.br”>usuário@dominio.com.br /a>

3.6 FUNÇÕES – C# (SHARP)

3.6.1 VARIÁVEIS LOCAIS

As variáveis locais são aquelas declaradas dentro de uma função.

 12

Elas passam a existir quando do início da execução do bloco de comandos ou

função onde foram definidas e são destruídas ao final da execução do bloco.
Uma variável local só pode ser referenciada, ou seja, usada, dentro
das funções onde foram declaradas. Outro ponto muito importante é que como as
variáveis locais deixam de existir ao final da execução da função, elas são invisíveis
para outras funções do mesmo programa. O código que define uma função e os
seus dados são particulares a função.
No programa potencia.C podemos ver alguns exemplos de variáveis
locais. A função main tem cinco variáveis locais: numero, potencia, continua, para,
linha. A função eleva possui somente a variável res, enquanto que para Maiúsculas
não possui nenhuma variável local. A única variável nesta função e c que é um
parâmetro.

#include<iostream> #include<cstdlib> using namespace std;

float eleva (float, int); char paraMaiuscula (char ); int
main()

{ float numero; int potencia; char continua; do

{ cout<<"Entre com um numero: "; cin>>numero; cout<<"Entre com

a potencia: "; cin>>potencia; cout<<numero<<" elevado a
"<<potencia; cout<<" e igual a "<<eleva(numero,
potencia)<<endl; cout<<"Continua? [S]im ou [N]ao? ";
cin>>continua; } while (paraMaiuscula(continua) == 'S'); float
eleva(float a, int b)

{ float res = 1.0; for ( ; b>0; b--) res *= a; return res;

char paraMaiuscula ( char c )

{ if ('a' <= c && c <= 'z') c = c - 'a' + 'A'; return c;

Um bloco de comandos se inicia em um "{" e termina em um "}". O

bloco de comandos mais usado para definir uma variável é a função. Todas as
variáveis que serão usadas dentro de um bloco de comandos precisam ser
 13

declaradas antes do primeiro comando do bloco. Declarações de variáveis, incluindo

sua inicialização, podem vir logo após o abre chaves que inicia um bloco de
comandos, não somente o que começa uma função. O exemplo (c7exdec.c) abaixo
ilustra este tipo de declaração:

#include<iostream> #include<cstdlib> using namespace std; int

main()

{ int i; for (i=0; i<10; i++)

{ int t; cin>>t; cout<<i*t; }

3.6.2 VARIÁVEIS GLOBAIS

As variáveis globais são definidas fora de qualquer função e são,

portanto, disponíveis para qualquer função. Este tipo de variável pode servir como
um canal de comunicação entre funções, uma maneira de transferir valores entre
elas.
Por exemplo, se duas funções tem de partilhar dados mais uma não
chama a outra, uma variável global tem de ser usada.

3.6.3 PARÂMETROS DA FUNÇÃO

As variáveis que aparecem na lista de parâmetros da função são

chamadas de parâmetros formais da função. Eles são criados no início da execução
da função e destruídos no final.
Parâmetros são valores que as funções recebem da função que a
chamou. Portanto, os parâmetros permitem que uma função passe valores para
outra. Normalmente os parâmetros são inicializados durante a chamada da função,
pois para isto que foram criadas. No entanto, as variáveis que atuam como
parâmetros são iguais a todas as outras e podem ser modificadas, operadas, etc,
sem nenhuma restrição.
 14

3.6.4 PASSAGEM DE PARÂMETROS POR REFERÊNCIA

Na passagem por referência o que é passado para a função é o

endereço do parâmetro e portanto a função que recebe pode através do endereço
modificar o valor do argumento na função que chamou,
Para a passagem de parâmetros por referência é necessário o uso
de ponteiros. Este assunto será discutido no próximo capítulo e portanto neste
capítulo estaremos usando somente funções com passagem por valor.

3.6.5 PASSAGEM DE PARÂMETROS POR VALOR

Parâmetros podem ser passados para funções de duas maneiras:

passagem por valor ou passagem por referência.
Na passagem por valor uma cópia do valor do argumento é passado
para a função. Neste caso a função que recebe este valor ao fazer modificações no
parâmetro não estará alterando o valor original que somente existe na função que
chamou.

3.7 ORGANOGRAMA TELECINE MOZER

15
 16

4 CONCLUSÃO

São muitas as vantagens em se dedicar ao conhecimento na área

de desenvolvimento web, percebe-se o quanto é necessário o conhecimento sobre
linguagem HTML, embora seja o código mais básico para programação web, é
necessária até às páginas com o mais alto nível de programação.
A linguagem C# (Sharp) é utilizada na criação de sistemas que
agilizam os processos e facilitam a execução de tarefas complexas, tornando
importante o aprendizado desta linguagem.
 17

REFERÊNCIAS

Apostila de Introdução à Linguagem C. Disponível em:

<http://www.ufjf.br/petcivil/files/2009/02/Apostila-de-Introdu%C3%A7%C3%A3o-
%C3%A0-Linguagem-C.pdf> Acessado em novembro de 2014.

Escopo de variáveis. Disponível em:

<http://www.las.pucpr.br/roveredo/aulas/a7.pdf> Acessado em novembro de 2014.

HTML Básico. Disponível em: <http://www.linhadecodigo.com.br/artigo/81/html-

basico.aspx>. Acesso em: novembro de 2014.

INTRODUÇÃO À LINGUAGEM C. Disponível em:

<ftp://ftp.unicamp.br/pub/apoio/treinamentos/linguagens/c.pdf> Acessado em:
novembro de 2014.

Lemay, Laura. Aprenda a Criar Páginas Web com Html e Xhtml. São Paulo.
MAKRON BOOKS. 2002.

MOZER, Merris; APARECIDA, Adriane; AUGUSTO, Danilo. UNOPAR: Sistema

Web. Londrina. Editora e Distribuidora Educacional S.A., 2014.