ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Juupi.com

•Download as PPT, PDF•
•
Javi Pérez Cantero
Javi Pérez Cantero
Convert to study materialsBETA

Transform any presentation into ready-made study material—select from outputs like summaries, definitions, and practice questions.

1 of 38
Download to read offline
Juupi.com
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
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.
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.
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.
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.
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.
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.
Desenvolupament d’una xarxa social 2.0 Llenguatges de programació web 7
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.
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.
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.
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
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.
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
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
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.
Desenvolupament d’una xarxa social 2.0 Caos: Disseny, maquetació i programació 16
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Juupi.com

More Related Content

Juupi.com

  • 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.
  • 9. Desenvolupament d’una xarxa social 2.0 Llenguatges de programació web 7
  • 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.
  • 18. Desenvolupament d’una xarxa social 2.0 Caos: Disseny, maquetació i programació 16
  • 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