Pat Youtuga

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