ForceQuitGet social… or Quit TryinGet social… or Quit Tryin

Maria João Pinheiro – 27442 | Marília Bajouca – 52461 | Mónica Ribeiro – 61030 | Nuno Simaria – 23652 | Renato Costa – 41805

Desafio

Rede social para grupos da disciplina de TDI

ConceitoConceito

Rede social profissional

- Partilha de dados pessoais, profissionais e académicos

- Partilha de curriculum vitae

- Divulgação de Portfolio

Estado da Arte

Redes sociais / Redes sociais profissionaisRedes sociais / Redes sociais profissionais

Layout

Princípios do DesignPrincípios do Design

WireframesPágina de Login Página de Registo Homepage

Página de Perfil Página de Membro

Wireframes

Página de edição de perfil Página de edição de interesses Página de edição de CV

Estudos de Cor

- Cores sóbrias: rede profissional

- Verde: Universidade de Aveiro

Logótipo

Iconografia

Layout

http://tdi.ua.labs.sapo.pt/g/tdi2010g5/www/

Arquitectura de Informação

Diagrama de classes

1 – people

2 – users

3 – group

9 – jobs

10 – jobsXuser

11 – activity

Arquitectura de Informação

Estrutura de Base de Dados

3 – group

4 – usersXgroup

5 – privacy

6 – presences

7 – interests

8 – interestsXuser

11 – activity

12 – posts

13 – content

14 – metaXcontent

15 - dump

http://tdi.ua.labs.sapo.pt/phpmyadmin/

Arquitectura de Informação

Estrutura do códigoEstrutura do código

INDEX.PHP

• Ficheiro base que inclui outros:

- init.php

-header.php

- user/loged.php (utilizador logado)- user/detail.php (utilizador logado)- user/detail.php (utilizador logado)- post/create.php (utilizador logado)- activity/listFile.php (utilizador logado)- user/group.php (utilizador logado)- user/login.php (utilizador nãologado)- person/list.php (utilizador não logado)- activity/list.php

- footer.phpSKEL TEMPLATES

SKEL TEMPLATES FILE FONTS IMAGES

• header,php• footer.php

• uploading.php Ficheiros de fontes (.ttf e .eot)

Ficheiros de Imagem (.png e .jpg)

PERSON POST SCRIPTS STYLES USER

ACTIVITY FILE INTERESTS PERSON POST SITE USER

Ficheiros de perfil

• creating.php Ficheiros Javascript (.js)

• layout.css• main.css

Ficheiros de longin e utilizador

Layout

Implementação em HTML, CSS e JavascriptImplementação em HTML, CSS e Javascript

CSS3

- Drop-down -> caixa de login;

-> border-radius:12px;-> transition: all 0.5s ease-in-out;

utilização da pseudo-classe :hover

- Separadores -> perfil;

-> transition: all 0.5s ease-in-out;

utilização da pseudo-classe :hover

Javascript -> jQuery

- Selecção de tabs -> perfil

Ex:$('#tabProfissionalGreen').css("display","block");$('#tabProfissionalGrey').css("display","none");

manipulação de atributos css.

- Logs

Ex:document.getElementById('logBox_').style.display='none';"

Javascript -> jQuery

- Scrolls

jScrollPane -> jQuery;

- Tooltips

Layout

Implementação em PHPImplementação em PHP

- Exemplo de activação de conta:

<?php$hash = System::param ("hash");$login = System::param ("login");$u = new User ();$u->login = $login;$users = $u->find ();if (($users == null) || (count ($users) == 0)){Site::error ("we don't know you. register please.");}}else

{$user = $users [0];$ok = $user->activate ($hash);

if ($ok){$user->login ($user->password);Site::log ("parabéns! A sua conta foi activada com sucesso!");}

elseSite::error ("ocorreu um erro. Por favor registe-se novamente!");}

Site::redirect (Site::home ()); ?>

- Exemplo de tratamento de erros:

$ok = Site::user ()->logout ();

if ($ok)Site::log ("Logout concluido com sucesso! <br />Até à próxima!");elseSite::error ("Ocorreu um problema. Por favor tente novamente mais tarde.");

Site::redirect (Site::home());Site::redirect (Site::home());

http://tdi.ua.labs.sapo.pt/g/tdi2010g5/www/

Funcionalidades Finais1. Página Inicial / Login

- Login de utilizador- Últimos utilizadores registados- Log de actividade recente (mensagens da rede e últimos estados do twitter)

- Ficheiros públicos

2. Página de recuperação de password

4. Página Home

- Actualização do estado (publicação de novas mensagens)- Log de actividade recente- Upload de ficheiros- Membros dos grupos

5. Página de Perfil

http://tdi.ua.labs.sapo.pt/g/tdi2010g5/www/

2. Página de recuperação de password

- Envio de e-mail para recuperação de password- Validação de dados de formulário

3. Página de registo

- Políticas de privacidade- Registo de novo utilizador- Validação de dados de formulário- Validação de registo através de e-mail.

5. Página de Perfil

- Visualização da informação (Social, Profissional e Pessoal)- Actualização do estado- Log de actividade recente- Ficheiros pessoais

6. Páginas de edição de Perfil

- Inserção e actualização de dados do perfil (Social, Profissional e Pessoal)