1. ForceQuit
Get social… or Quit Tryin
Maria João Pinheiro – 27442 | Marília Bajouca – 52461 | Mónica Ribeiro – 61030 | Nuno Simaria – 23652 | Renato Costa – 41805

2. Desafio
Rede social para grupos da disciplina de TDI
Conceito
Rede social profissional
- Partilha de dados pessoais, profissionais e académicos
- Partilha de curriculum vitae
- Divulgação de Portfolio

3. Estado da Arte
Redes sociais / Redes sociais profissionais

5. Layout
Princípios do Design

6. Wireframes
Página de Login Página de Registo Homepage
Página de Perfil Página de Membro

7. Wireframes
Página de edição de perfil Página de edição de interesses Página de edição de CV

8. Estudos de Cor
- Cores sóbrias: rede profissional
- Verde: Universidade de Aveiro
Logótipo

9. Iconografia

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

11. Arquitectura de Informação
Diagrama de classes

13. Arquitectura de Informação
Estrutura de Base de Dados
1 – people 9 – jobs
2 – users 10 – jobsXuser
3 – group 11 – activity
4 – usersXgroup 12 – posts
5 – privacy 13 – content
6 – presences 14 – metaXcontent
7 – interests 15 - dump
8 – interestsXuser

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

15. Arquitectura de Informação
Estrutura do código

16. • Ficheiro base que inclui outros:
- init.php
INDEX.PHP
-header.php
- user/loged.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
SKEL - footer.php TEMPLATES

17. SKEL TEMPLATES FILE FONTS IMAGES
• header,php • uploading.php Ficheiros de Ficheiros de
• footer.php fontes (.ttf e Imagem
.eot) (.png e .jpg)
ACTIVITY FILE INTERESTS PERSON POST SITE USER
PERSON POST SCRIPTS STYLES USER
Ficheiros de • creating.php Ficheiros • layout.css Ficheiros de longin e
perfil Javascript (.js) • main.css utilizador

18. Layout
Implementação em HTML, CSS e Javascript

19. 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

20. 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';"

21. Javascript -> jQuery
- Scrolls
jScrollPane -> jQuery;
- Tooltips

22. Layout
Implementação em PHP

23. - 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!");
}
else
Site::error ("ocorreu um erro. Por favor registe-se novamente!");
}
Site::redirect (Site::home ());
?>

24. - Exemplo de tratamento de erros:
$ok = Site::user ()->logout ();
if ($ok)
Site::log ("Logout concluido com sucesso! <br />Até à próxima!");
else
Site::error ("Ocorreu um problema. Por favor tente novamente mais tarde.");
Site::redirect (Site::home());
http://tdi.ua.labs.sapo.pt/g/tdi2010g5/www/

25. Funcionalidades Finais
1. Página Inicial / Login 4. Página Home
- Login de utilizador - Actualização do estado (publicação de novas
- Últimos utilizadores registados mensagens)
- Log de actividade recente (mensagens da rede - Log de actividade recente
e últimos estados do twitter) - Upload de ficheiros
- Ficheiros públicos - Membros dos grupos
2. Página de recuperação de password 5. Página de Perfil
- Envio de e-mail para recuperação de password - Visualização da informação (Social,
- Validação de dados de formulário Profissional e Pessoal)
- Actualização do estado
3. Página de registo - Log de actividade recente
- Políticas de privacidade - Ficheiros pessoais
- Registo de novo utilizador
- Validação de dados de formulário 6. Páginas de edição de Perfil
- Validação de registo através de e-mail. - Inserção e actualização de dados do perfil
(Social, Profissional e Pessoal)
http://tdi.ua.labs.sapo.pt/g/tdi2010g5/www/