Sei sulla pagina 1di 29

Escola Secundária de Barcelos

Curso Tecnológico de Informática

Por Teotónio Ricardo Miranda Leiras

Relatório de Projecto Tecnológico


submetido para prestação de
Prova de Aptidão Tecnológico
Agradecimentos

Gostaria de deixar aqui presente o agradecimento a todos os intervenientes que me


ajudaram no desenvolvimento do projecto, tanto a nível de produção do mesmo, como a nível de
feedback que me possibilitou melhorar e corrigir problemas existentes.

Agradeço a toda a comunidade opensource que me possibilitou o uso de ferramentas


gratuitas e que possibilita aumentar os meus horizontes a nível de conhecimento.

Agradeço em especial ao professor Luís Silva que acompanhou o projecto e que sempre que
possível tentou ajudar-me para o aumento de ideias que podiam ser desenvolvidas em redor do
projecto.

Agradeço também aqueles que tiveram o papel de “beta testers”, explorando o sistema e
reportando problemas.

i
Resumo

A Web 2.0 vem introduzir uma internet mais acessível, mais dinâmica e mais interactiva com
o utilizador, passando a multimédia a ser a principal característica de procura na Web.

Quando a Web começou, era apenas possível a leitura de páginas de texto, pouco ou nada
dinâmicas. Hoje em dia, com o desenvolvimento das tecnologias, é possível ver imagens e vídeos de
alta qualidade através da Internet, sendo apenas necessária uma velocidade de ligação à Internet
com características para tal.

Feito isto, o YouTuga foi um projecto que nasceu a ideia de pegar em algo já existente e
utilizar as suas potencialidades para criar uma comunidade. YouTuga, é portanto uma comunidade
no em que se baseia na partilha de vídeos, tal como o YouTube, no entanto o objectivo é juntar
vídeos de todas as outras redes sociais de partilha de vídeos, numa só.

iii
Conteúdo
Agradecimentos ........................................................................................................................................i
Resumo.................................................................................................................................................... iii
Índice de Ilustrações............................................................................................................................... vii
Introdução ............................................................................................................................................... 1
Tema do projecto ................................................................................................................................ 2
Objectivo do Projecto.......................................................................................................................... 3
Esquema da Base de dados ................................................................................................................. 3
Tecnologias utilizadas ............................................................................................................................. 5
HTML ................................................................................................................................................... 5
O que é? .......................................................................................................................................... 5
HTML no projecto… ......................................................................................................................... 5
CSS ....................................................................................................................................................... 5
O que é? .......................................................................................................................................... 5
CSS no Projecto…............................................................................................................................. 5
PHP ...................................................................................................................................................... 6
O que é? .......................................................................................................................................... 6
PHP no Projecto… ............................................................................................................................ 6
MySql................................................................................................................................................... 6
O que é? .......................................................................................................................................... 6
MySql no Projecto… ........................................................................................................................ 6
JavaScript............................................................................................................................................. 7
O que é? .......................................................................................................................................... 7
JavaScript no Projecto… .................................................................................................................. 7
XML...................................................................................................................................................... 7
O que é? .......................................................................................................................................... 7
XML no Projecto… ........................................................................................................................... 7
Ferramentas Utilizadas............................................................................................................................ 9
Xampp ................................................................................................................................................. 9
Apache ............................................................................................................................................. 9
PHP .................................................................................................................................................. 9
MySql ............................................................................................................................................... 9
Phpmyadmin ....................................................................................................................................... 9

v
Photoshop ........................................................................................................................................... 9
Dreamweaver .................................................................................................................................... 10
Estrutura do site .................................................................................................................................... 11
Cabeçalho / header ........................................................................................................................... 11
Menus ................................................................................................................................................ 12
Home ............................................................................................................................................. 12
Videos ............................................................................................................................................ 12
Comunidade .................................................................................................................................. 14
Categorias ...................................................................................................................................... 15
Pesquisar ....................................................................................................................................... 15
Estatísticas ..................................................................................................................................... 16
API .................................................................................................................................................. 16
Ajuda .............................................................................................................................................. 16
Perfil............................................................................................................................................... 17
Conclusão .............................................................................................................................................. 19

vi
Índice de Ilustrações

Ilustração 1 - Aspecto do site .................................................................................................................. 2


Ilustração 2 - Base de Dados ................................................................................................................... 3
Ilustração 3 - Formulário de login ......................................................................................................... 11
Ilustração 4 - Caixa de informação de sessão ....................................................................................... 11
Ilustração 5 - Menu Principal ................................................................................................................ 11
Ilustração 6 - Opções de filtragem e ordenação ................................................................................... 12
Ilustração 7 - Detalhes do vídeo ............................................................................................................ 12
Ilustração 8 - Reprodutor do vídeo ....................................................................................................... 13
Ilustração 9 - Exemplo de comentário .................................................................................................. 13
Ilustração 10 - Formulário de comentários ........................................................................................... 13
Ilustração 11 - Detalhes do utilizador ................................................................................................... 14
Ilustração 12 - Página do perfil de utilizador ........................................................................................ 14
Ilustração 13 - Listagem das categorias ................................................................................................ 15
Ilustração 14 - Menu Pesquisar ............................................................................................................. 15
Ilustração 15 - Caixa de Estatísticas ...................................................................................................... 16
Ilustração 16 - Editar Perfil .................................................................................................................... 17
Ilustração 17 - Inserir vídeo ................................................................................................................... 17
Ilustração 18 - Gestão de vídeos ........................................................................................................... 18

vii
Introdução

O projecto desenvolvido tem o nome de YouTuga e o principal objectivo é a criação de uma


comunidade de partilha de vídeos e conhecimento.

Dentro do site, os visitantes poderão registar-se e efectuar várias acções, como por exemplo
adicionar vídeos ao site, que poderão ser links do YouTube ou enviados para o servidor e convertidos
no mesmo, adicionar comentários aos vídeos, dás uma pontuação aos vídeos, enviar mensagens
privadas aos restantes membros da comunidade, etc.

Todo o website é dinâmico, com conteúdo extraído da base de dados, o que permite uma
fácil gestão de todo o site, sem a necessidade de editar ficheiros para adicionar novo conteúdo ao
site.

O projecto usa várias ferramentas 3rd party, bem como APIs de ferramentas web 2.0, como
são o exemplo do Gravatar, que permite associar uma imagem ao nosso e-mail ou ainda o
reCAPTCHA, que permite proteger o registo no site de BOTS (robots automáticos) que possam a vir
criar um mau aspecto dentro da comunidade, criando spam, submetendo vídeos inapropriados, etc.

O site é constituído por várias linguagens, tanto de sintaxe como de programação, das quais
fazem parte as seguintes:

HTML
CSS
JavaScript
PHP
MySql
XML

O relatório está organizado da seguinte forma:

1. Introdução ao projecto: descrição do tema e objectivos do projecto;


2. Análise do projecto
3. Enquadramento: ferramentas utilizadas;
4. Descrição do projecto: apresentação mais detalhada das funcionalidades do projecto,
bem como do estado actual em que se encontra o projecto.
5. Considerações: conclusão, opinião pessoal acerca das funcionalidades do projecto e
motivos que levaram à escolha deste tipo de projecto para elaboração.

1
Tema do projecto

Todo o projecto tem o simples objectivo de ser uma rede social de partilha de vídeos, onde
os utilizadores possam não só inserir os seus vídeos, mas também interagir com os outros membros
da comunidade.

Existirão 3 níveis de utilizador, sendo o administrador o que mais poderes tem no site, o
intermédio é o membro registado e o visitante é o utilizador com menos poderes, podendo apenas
comentar e ver os vídeos do site.

Os vídeos estão divididos por categorias, o que tornará facilmente aos utilizadores encontrar
conteúdo que esteja dentro da sua área de interesse. Para além das categorias, ao submeter o vídeo,
os membros poderão associar palavras-chave ( tags/keywords ) ao seu vídeo, de forma a que estes
possam ser facilmente encontrados por uma pesquisa ou filtrados.

O YouTuga apresenta uma pequena API que permite aos desenvolvedores externos, criar por
exemplo uma ferramenta de pesquisa de vídeos que use como base o YouTuga.

Essa API é disponibilizada em formato de RSS feed e permite não só aos programadores
desenvolver aplicações com o YouTuga, mas também aos utilizadores subscreverem vídeos com
conteúdo relevante no seu leitor/agregador de RSS.

O site terá esta estrutura:

Ilustração 1 - Aspecto do site

2
Objectivo do Projecto

 Incentivar à partilha de informação em formato vídeo através da Web;


 Reunir um directório de vídeos;
 Permitir aos utilizadores verificar vídeos de interesse relevante;
 Permitir aos desenvolvedores criar aplicações que usem a API do YouTuga;

Esquema da Base de dados

Ilustração 2 - Base de Dados

3
Tecnologias utilizadas

HTML

O que é?

HTML é a linguagem de sintaxe padronizada para a Web, que permite a criação de páginas
Web simples.

HTML no projecto…

A base do projecto resume-se a HTML, pois o que o browser vai mostrar ao utilizador comum
é o output em html, no entanto o resultado desse output foi gerado dinamicamente no servidor
através de PHP e MySql.

Todos os formulários, imagens, cabeçalhos e os restantes elementos da página, são gerados


em HTML.

CSS
O que é?

CSS ( Cascade Style Spreadsheets ) são folhas de estilo que contem classes e ids que nos
permitem formatar os objectos do HTML duma forma generalizada, sem a necessidade de adicionar
uma formatação especifica para cada um, sempre que criamos um novo elemento.

CSS no Projecto…

O CSS permitiu-me no projecto, melhorar o aspecto das páginas e dos elementos destas,
como por exemplo a cor do texto dos parágrafos, tamanho dos cabeçalhos, cor dos links, estrutura
das listas, cor dos campos dos formulários, espaçamento do texto em relação às extremidades das
DIVs, etc.

5
PHP

O que é?

PHP é uma linguagem de programação orientada para a Web, server-side, que permite a
criação de páginas dinâmicas.

A linguagem permite, entre outras coisas, o tratamento de dados do lado do servidor e a


interacção com bases de dados MySql.

PHP no Projecto…

Ao longo de todo o projecto, o PHP foi usado no projecto para validar os dados inseridos nos
formulários e para mostrar informação extraída da base de dados MySql.

MySql

O que é?

MySql é um sistema de gestão de base de dados relacional, recentemente comprado pela


Sun Microsystems, que utiliza como base a linguagem SQL.

O MySql é opensource e é usado por milhares empresas ou entidades importantes, como é o


caso das Forças Armadas dos Estados Unidos da America ( US Army ), da Cisco Systems, da NASA,
Nokia, HP e muitas outras…

MySql no Projecto…

O papel do MySql no projecto desenvolvido, é o armazenamento e a disponibilização da


informação contida na base de dados, permitindo assim, através do PHP, fazer pesquisas filtradas
dentro da base de dados.

6
JavaScript

O que é?

A linguagem de programação JavaScript, permite interagir com o utilizador, mas ao contrário


do PHP, o JavaScript é uma linguagem client-side, ou seja, o conteúdo é tratado do lado do
cliente/browser do cliente.

JavaScript no Projecto…

O JavaScript foi usado apenas duas vezes ao longo do projecto. Uma delas é no sistema de
abas da barra lateral do site, em que usando DOM, oculto ou mostro elementos do HTML, neste caso
DIVs.

Utilizei também o JavaScript, com a biblioteca SWFObject.js no reprodutor dos vídeos ( flash
player ), que me permite em vez de adicionar o ficheiro flash na página da forma tradicional e
adicionar as variáveis usando a tag <object> , utilizar o JavaScript para fazer isso. Dessa forma a
página fica valida segundo as normas da W3C.

XML

O que é?

XML ou eXtensible Markup Language é uma linguagem que nos permite armazenar
informações estruturadas por itens com campos que podem ser extraídos usando várias linguagens
de programação.

Hoje em dia o XML é usado em vários casos para exportar informações das bases de dados,
como por exemplo o novo sistema de facturação SAFT-PT que extrai as informações dos produtos,
clientes e vendas em formato XML.

XML no Projecto…

O XML no projecto foi utilizado para a criação de uma RSS, que também poderá ser usada
como API.

Através da RSS, os utilizadores do YouTuga podem subscrever os vídeos do site, filtrando-os


por categoria ou por uma determinada palavra e os programadores podem extrair informação do site
e usá-la nas suas aplicações.

7
Ferramentas Utilizadas

Xampp

O Xampp é uma aplicação opensource desenvolvida pela comunidade Apache Friends que facilita a
instalação de um serviço Apache com Mysql e PHP e Perl já configurado.

Apache
O Apache é um servidor Web multi-plataforma que permite em poucos segundos ter um
servidor com suporte a páginas HTML.

PHP
Para que o Apache interprete a linguagem dinâmica PHP, é necessário fazer algumas
alterações ao Apache. Com o Xampp não existe a necessidade de fazer tais alterações, pois este já
vem configurado de raiz.

MySql
Para que os scripts desenvolvidos em PHP possam conectar e obter informação das bases de
dados MySql, é necessário um servidor para base de dados MySql.

Phpmyadmin

Apesar do MySql ser um gestor de base de dados, este não contem um interface intuitivo, portanto
decidi instalar o phpmyadmin que é um gestor de MySql com interface para a Web, o que me
facilitou bastante na execução de testes durante o desenvolvimento do projecto.

Photoshop

Apesar da maior parte do design do site ter sido obtida através de elementos HTML e de CSS, foi
necessário a criação de um logótipo e de alguns elementos em gráficos para as páginas. Para isso
escolhi o Photoshop como opção, visto que é a ferramenta com o qual me sinto mais à vontade para
desenvolver gráficos para Web 2.0.

9
Dreamweaver

Quando a quantidade de código utilizado nas funções para o projecto começou a ser bastante, tive a
necessidade de obter uma ferramenta que fizesse o highlight colorido do código PHP, desta forma foi
mais fácil perceber quais os problemas de sintaxe.

10
Estrutura do site

O site apresenta uma estrutura simples, contendo um topo (header) e um conteúdo (content). Para
além destes elementos da estrutura do site, poderia ter adicionado um rodapé ( footer ), onde
colocaria informação como por exemplo os copyrights do site e o autor do mesmo.

O cabeçalho ou header é semelhante em todas as páginas, ao contrário do conteúdo que altera a


cada página visitada.

Cabeçalho / header

O header é constituído por duas caixas principais, nas quais nos é demonstrado o logótipo e
uma caixa de login e os menus principais do site.

Consoante o utilizador estiver ou não com sessão iniciada, aparecerá uma das seguintes
caixas:

Ilustração 3 - Formulário de login

Ilustração 4 - Caixa de informação de sessão

O menu principal não altera em nenhuma das situações, podendo classificar-se como uma
parte estática da página.

Ilustração 5 - Menu Principal

O logótipo presente no topo é sempre o mesmo:

11
Menus

Home

nos até ao Índice da página. Aqui é-nos


O menu “Home” leva-nos é nos apresentado num texto breve o
que consta naquele site.

Videos

O menu “Videos” leva-nos a uma listagem de todos os vídeos presentes no site, com alguns
detalhes dos mesmos. Esta listagem poderá ser ordenada pela data ou pelo número de visualizações
que cada vídeo tem.

Ilustração 6 - Opções de filtragem e ordenação

Nos detalhes de cada vídeo podemos encontrar informações como o Nome do vídeo, o nome
do autor, o nick, a data em que foi adicionado, o número de visualizações e ainda o número de
comentários.

Ilustração 7 - Detalhes do vídeo

Ao clicar no título do vídeo, somos redireccionados para uma página onde podemos ver o
vídeo na sua integra, bem como os comentários.

12
Ilustração 8 - Reprodutor do vídeo

Ilustração 9 - Exemplo de comentário

Ilustração 10 - Formulário de comentários

13
Comunidade

A página com o nome de “Comunidade” é uma listagem de todos os membros da rede social
YouTuga.

Nela podemos encontrar todos os utilizadores que dela fazem parte e ainda alguma informação
acerca dos mesmos, como o nome, nick e número de vídeos.

Ilustração 11 - Detalhes do utilizador

Ao clicar no nome do utilizador, somos levados até uma página pessoal com a descrição do utilizador
e com um vídeo aleatório adicionado pelo mesmo.

Caso esse utilizador não tenha nenhum vídeo inserido, não será mostrado qualquer vídeo na página.

Ilustração 12 - Página do perfil de utilizador

14
Categorias

Ao clicar no menu “Categorias”, aparece uma caixa com a listagem de todas as categorias e sub-
categorias, que contem hiperligações para uma página onde é apresentada a listagem de vídeos
filtrada por categorias. Tal como no menu “Vídeos” mas com filtragem por categoria.

Ilustração 13 - Listagem das categorias

Pesquisar

Ao clicar em “Pesquisar”, acontece exactamente a mesma coisa que no menu “Categorias”, no


entanto aqui é já possível filtrar os resultados por “palavras”.

Ilustração 14 - Menu Pesquisar

15
Estatísticas

Ao clicar em “Estatísticas”, conseguimos verificar uma caixa com informações relativas a comunidade
em global, como o número de vídeos inseridos, o número de membros e o número total de
comentários.

Ilustração 15 - Caixa de Estatísticas

API

O menu “API” descreve informações acerca das ferramentas que o YouTuga disponibiliza para os
programadores, como é o exemplo da RSS feed com resultados filtrados.

Ajuda

A página de “Ajuda” contem informações acerca do projecto YouTuga, e da comunidade, como são o
exemplo de algumas questões acerca de como se muda o “avatar” e do autor do projecto.

16
Perfil

É no menu “Perfil” que se encontram os dados relativos ao utilizador com a sessão iniciada.

Aqui, o utilizador poderá alterar os seus dados, como o Nome, e-mail, password e Bio. No entanto, é
também aqui que o autor pode inserir e gerir os seus vídeos na comunidade.

Ficam aqui algumas imagens desta área de utilizador:

Ilustração 16 - Editar Perfil

Ilustração 17 - Inserir vídeo

17
Ilustração 18 - Gestão de vídeos

18
Conclusão

Na minha opinião, eu como estudante, só tenho a ganhar com este tipo de projectos, pois
estimula a minha vontade para a criação de projectos.

Existiam ainda mais algumas ferramentas que poderiam ser implementadas no YouTuga,
como a partilha de vídeos por e-mail, a criação de um sistema de mensagens privadas ou ainda a
possibilidade de adicionar os vídeos aos favoritos pessoais.

O YouTuga irá ser disponibilizado na Internet sob a licença GNU GPL, o que possibilitará a
continuidade do projecto, mesmo que não seja por mim.

Vai ser também mais um projecto para adicionar e enriquecer o meu portfolio.

19

Potrebbero piacerti anche