2. Index
1- Evolució del web fins al 2.0
2- Llenguatges de programació web
3- CodeIgniter: Un framework PHP
4- Primers passos de l’aplicació: Idea i modelació
5- Programant l’aplicació web
6- Caos: Maquetació i disseny
7- Demostració de l’aplicació web
8- Suport d’escriptori: Aplicació .NET
9- Plans de futur i conclusions
Desenvolupament d’una xarxa social 2.0
3. Evolució de la web fins al 2.0
Desenvolupament d’una xarxa social 2.0
1
La història de la web moderna es remonta a 1989, en el CERN, i és creada
per Tim Berners-Lee. És un sistema d’hipertext per compartir informació a
través de Internet. Va ser una mica més tard quan es va crear el
llenguatge d’intercanvi HTML i el protocol HTTP.
4. Evolució del web fins al 2.0
Desenvolupament d’una xarxa social 2.0
2
La web d’abans consistia en una
recerca d’informació, on hi havia
la figura clau del webmaster com
a creador de continguts.
El primer vestigi de
sociabilització van ser els
forums, encara que no
permetien totes les possibilitats
que els usuaris necesitaven per
poder comunicarse.
A partir d’aquí, comencen a
sorgir noves eines de
comunicació i etiquetatge.
5. Evolució del web fins al 2.0
Desenvolupament d’una xarxa social 2.0
3
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
TAGs
Els usuaris tenen la tendència
de deixar-se emportar per la
moda.
Amb aquesta filosofia neixen
els tags.
Aporten un valor visual d’una
tendencia.
6. Evolució del web fins al 2.0
Desenvolupament d’una xarxa social 2.0
4
Qui no a preguntat a un amic la seva
opinió abans de comprar-se alguna
cosa?
L’opinió és un dels pilars fonamentals del
web 2.0.
S’estableix un nou tipus de vincles
socials entre els navegants totalment
inexsistents en la realitat social i
totalment necessaris.
7. Evolució del web fins al 2.0
Desenvolupament d’una xarxa social 2.0
5
La necessitat de crear un flux de
comunicació i compartició ha existit
desde sempre.
Aquest és un altre dels pilars de la web
2.0, la comunicació i l’intercanvi de dades
a través d’un canal diferent als
tradicionals, fent-la més cómoda i rapida.
8. Evolució del web fins al 2.0
Desenvolupament d’una xarxa social 2.0
6
Per tant, podem afirmar que la tendència d’evolució de la web té un
caràcter humà i social.
10. Desenvolupament d’una xarxa social 2.0
CodeIgniter: Un framework PHP
8
- Un framework o “marc de treball” és
una estructura conceptual i tecnològica
de suport.
- Té implementat el model de
desenvolupament MVC (Model-Vista-
Controlador)
- El model MVC esta preparat per ser
òptim en el desenvolupament orientat a
objectes.
- PHP és un llenguatge interpretat, i
requereix de seguretat extra per part del
programador. Els frameworks PHP
porten mesures de seguretat casi
automatizades.
11. Desenvolupament d’una xarxa social 2.0
CodeIgniter: Un framework PHP
9
El patró de desenvolupament MVC és bastant complex en la seva forma
teòrica, pero a grans trets, i d’una forma sencilla podem veure com funciona
en el següent gràfic.
12. Desenvolupament d’una xarxa social 2.0
CodeIgniter: Un framework PHP
10
Codeigniter fa una implementació del MVC afegint paràmetres especifics
per la programació web.
13. Idea
Des del principi teníem clar que volíem realitzar un projecte en PHP i una
petita aplicació d’escriptori realitzada en .NET per donar suport a
l’aplicació web.
La idea consisteix en la creació d’una xarxa social que, a la vegada,
englobarà tres conceptes diferents en un de sol: linksharing,
microblogging i blog, és a dir, que agafarem de cada un d’ells les parts
més útils per fer una xarxa social ben completa.
Desenvolupament d’una xarxa social 2.0
Primers passos de l’aplicació: Idea i modelació
11
14. Modelació web
Desenvolupament d’una xarxa social 2.0
Primers passos de l’aplicació: Idea i modelació
12
Per a modelar la web
hem tingut en compte
els següents conceptes:
linksharing per agafar
idees del facebook,
microblogging per al
twitter i blog per al
blogger.
15. Modelació de l’aplicació .NET
Hem decidit crear una petita aplicació d’escriptori desenvolupada en
VB.NET en la qual podràs veure les últimes actualitzacions i inserir
micropublicacions sense necessitat d’entrar a l’aplicació web.
Desenvolupament d’una xarxa social 2.0
Primers passos de l’aplicació: Idea i modelació
13
16. Per a poder programar l’aplicació web hem tingut algunes dificultats a
l’hora de començar a desenvolupar-la perquè hem escollit el framework
de PHP, CodeIgniter. Aquesta dificultat ha estat deguda a què
desconeixíem CodeIgniter i, fins que no hem agafat el ritme, no hem
pogut avançar el projecte.
Hem escollit aquest mètode de desenvolupament perquè, la manera de
programar és molt més senzilla perquè queda diferenciada el que són les
parts de disseny, programació i consultes a bases de dades.
Desenvolupament d’una xarxa social 2.0
Programant l’aplicació web
14
17. Desenvolupament d’una xarxa social 2.0
Caos: Disseny i maquetació
15
La figura del webmaster com a tal, s’ha segmentat. L’evolució de la
web i dels llenguatges de programació han fet que siguin mes
complexos, i es necesiten de diferents especialistes per portar a
terme un desenvolupament.
19. Desenvolupament d’una xarxa social 2.0
Demostració de l’aplicació web
Registre i login
Per poder entrar a la nostra aplicació, el primer pas és registrar-
se, en cas de no estar-ho i, a continuació, fer login.
17
20. Panell d’usuari
Una vegada fet el login a la nostra aplicació, arribarem al panell de l’usuari,
que es la pàgina principal on ens podem moure per la nostra aplicació.
Desenvolupament d’una xarxa social 2.0
18
21. Convidar amics
Al accedir a la opció de convidar amics del panell d’usuari, anem
directament a un altre pàgina on podrem convidar a usuaris a ser amics
nostres.
Desenvolupament d’una xarxa social 2.0
19
22. Invitacions
Al accedir a l’opció de les invitacions del panell de l’usuari, s’obrirà una nova
pàgina on sortiran totes les invitacions pendents que té l’usuari, tant de grups,
com d’amics.
Desenvolupament d’una xarxa social 2.0
20
23. Galeria d’imatges
Al seleccionar l’opció de la galeria del panell de l’usuari, accedirem a un
altre pàgina on podrem veure les nostres fotos i on també podrem pujar
fotos a la nostra galeria.
Desenvolupament d’una xarxa social 2.0
21
24. Grups
Al seleccionar l’opció grups del panell de l’usuari, accedirem a un altre
pàgina on podrem veure els grups als que hi participem. A la dreta hi ha un
link que ens permetrà crear un grup.
Desenvolupament d’una xarxa social 2.0
22
25. Desenvolupament d’una xarxa social 2.0
El resultat de la creació d’un grup, teu o d’un altre usuari, és poder
accedir a la imatge següent on podem observar el contingut d’aquest i
les persones que hi participen.
23
26. Informació personal
Al seleccionar la opció de informació personal,
accedirem a una altre pàgina on se’ns mostrarà
la informació del usuari on també es podrà
modificar.
Desenvolupament d’una xarxa social 2.0
24
27. Bloc
Al seleccionar l’opció d’entrades, accedirem a un altre pàgina on se’ns
mostrarà el nostre bloc amb les diferents publicacions que conté i les
categories d’aquestes en la primera opció del menú de l’esquerra.
Desenvolupament d’una xarxa social 2.0
25
28. Entrades al bloc
Al accedir a una entrada en concret anirem a un altre pàgina on només
estarà l’entrada en qüestió i on també es mostrarà tots els comentaris que
se li hagin fet. L’usuari tindrà l’opció de poder comentar l’entrada al bloc.
Desenvolupament d’una xarxa social 2.0
26
29. Desenvolupament d’una xarxa social 2.0
Perfil d’Amic
Aquesta pàgina és semblant al
panell principal del usuari que ha
fet login on ens mostra dades
personals del amic, entrades
realitzades, publicacions, grups i
estadístiques.
27
30. Desenvolupament d’una xarxa social 2.0
Establir avatar
Al seleccionar la opció de canviar la imatge, accedirem a una
nova pàgina on a través de la webcam es farà una foto del usuari
i la guardarà a la galeria d’imatges per a poder posar-la de perfil.
28
31. Desenvolupament d’una xarxa social 2.0
Imatge de perfil
Al seleccionar la opció de canviar la imatge, accedirem a una
nova pàgina on a través del contingut d’aquesta, es mostraran
totes les nostres imatges per a seleccionar la desitgada que,
inmediatament es col·locarà com a imatge del nostre perfil.
29
32. Desenvolupament d’una xarxa social 2.0
Llistes d’amics
Al seleccionar l’opció de llistes
d’amics accedirem a una altre
pàgina on se’ns mostrarà les
nostres llistes que haurem creat
per desprès anar col·locant els
nostres amics, eliminar-les o
modificar els noms.
30
33. Per a poder començar a utilitzar l’aplicació d’escriptori de Juupi caldrà,
prèviament, instalar-la a la nostra màquina.
Desenvolupament d’una xarxa social 2.0
Suport d’escriptori: Aplicació .NET
31
34. Desenvolupament d’una xarxa social 2.0
Per a poder accedir a l’aplicació d’escriptori, es tindrà que introduir al menú
de login el correu electrònic i la contrasenya, tenint en compte, que és
imprescindible estar registrat a la web de Juupi.com.
32
35. La finalitat de l’aplicació es poder introduir micropublicacions en el
nostre perfil d’usuari sense tenir que estar connectat a la web i
consultar les diferents actualitzacions teves i dels teus amics.
Desenvolupament d’una xarxa social 2.0
33
36. Plans de futur
Podrien existir tres tipus d’alternatives com a plans de futur:
1- Desenvolupar la web com pròpia
2- Aprofitar el software com a base d’aplicacions a tercers
3- Distribuir lliurement (open source) l’aplicació
Desenvolupament d’una xarxa social 2.0
Plans de futur i conclusions
34
37. Conclusions
• De la idea a la realitat
• Capacitat de fer un projecte amb eines desconegudes fent servir la
documentació
• Treball en equip
• Problemes de la planificació
• Resolució de problemes per mitjans propis
• Autogestió del temps i treball
Desenvolupament d’una xarxa social 2.0
Plans de futur i conclusions
35
