T abajo Fin de G ado
Escuela de Ingenie ía In o má ica
Uni e sidad de Las Palmas de G an Cana ia
Desa ollo de un sis ema de ideocon e encia
en HTML 5.0
Au o : José Albe o Jino ia Fe nández
Tu o : Ja ie Sánchez Pé ez
Las Palmas de G an Cana ia
Diciemb e 2013
T abajo Fin de G ado ealizado en la Escuela de Ingenie ía In o má ica de la Uni e sidad de Las
Palmas de G an Cana ia, pa a la consecución del í ulo de Ingenie o In o má ico.
Tí ulo: Desa ollo de un sis ema de ideocon e encia en HTML 5.0
Alumno: José Albe o Jino ia Fe nández
Tu o : Ja ie Sánchez Pé ez
Fecha: Diciemb e, 2013
Es e un p oyec o sin ánimo de luc o basado en la pla a o ma de so wa e lib e WebRTC y
HTML5.0.
Ag adecimien os
A mi amilia, po sabe me guia en la ida po el camino co ec o y habe se sac i icado mucho,
siemp e pensando en mi po eni .
A mis p o eso es, en especial a José Juan He nández y a mi u o Ja ie Sánchez po su ayuda
en mues a de o mación como p o esional.
A mis amigos, en especial a Da iel Rod íguez y Daniel Ocaña.
A la Uni e sidad de Las Palmas, po habe me acogido como es udian e y o mado has a la
culminación de mis es udios.

Índice gene al
P e acio ......................................................................................................................................... 8
1 In oducción .......................................................................................................................... 9
1.1 Mo i ación y obje i os .................................................................................................. 9
1.2 Obje o de es udio .......................................................................................................... 9
1.3 Campo de acción ........................................................................................................... 9
1.4 Hipó esis ...................................................................................................................... 10
1.5 Apo aciones ............................................................................................................... 10
1.6 O ganización del documen o ...................................................................................... 10
2 Es ado ac ual del a e .......................................................................................................... 12
2.1 WebRTC ....................................................................................................................... 12
2.1.1 His o ia ................................................................................................................ 12
2.1.2 De inición ............................................................................................................ 12
2.1.3 Diseño .................................................................................................................. 12
2.2 Sis emas de ideocon e encias más usados a ni el mundial ...................................... 13
2.2.1 Skype ................................................................................................................... 13
2.2.2 Google Hangou s ................................................................................................. 14
3 Recu sos u ilizados .............................................................................................................. 15
3.1 Recu sos so wa e ....................................................................................................... 15
3.1.1 He amien as ....................................................................................................... 15
3.1.2 Lenguajes de p og amación ................................................................................ 16
3.2 Recu sos ha dwa e ...................................................................................................... 16
3.2.1 Ha dwa e de los clien es ..................................................................................... 17
3.2.2 Ha dwa e de los se ido es ................................................................................. 17
4 Plani icación del abajo ...................................................................................................... 18
4.1 Me odología de desa ollo .......................................................................................... 18
4.2 Plani icación y empo ización ..................................................................................... 20
4.3 P esupues o ................................................................................................................ 21
4.3.1 Cos e del ha dwa e ............................................................................................. 21
4.3.2 Cos e del so wa e............................................................................................... 21
4.3.3 Cos e del pe sonal ............................................................................................... 22
4.3.4 P esupues o o al del p oyec o ........................................................................... 22
5 Desa ollo del abajo.......................................................................................................... 23
5.1 Modelo del dominio .................................................................................................... 23
5.2 Lis a de ca ac e ís icas ................................................................................................ 24
5.3 Requisi os del so wa e ............................................................................................... 28
5.3.1 Ac o es ................................................................................................................ 28
5.3.2 Modelo de casos de uso ...................................................................................... 28
5.3.3 Especi icación de casos de uso ............................................................................ 31
5.3.4 P o o ipos de in e az de usua io ........................................................................ 35
5.4 Modelo de análisis ...................................................................................................... 41
5.4.1 Diag ama de clases .............................................................................................. 41
5.4.2 Diag amas de colabo ación ................................................................................. 47
5.5 Modelo de diseño........................................................................................................ 53
5.5.1 A qui ec u a del sis ema ..................................................................................... 53
5.5.2 Diag amas de clases ............................................................................................ 54
5.5.3 Diag amas de secuencia ...................................................................................... 62
5.6 Implemen ación .......................................................................................................... 70
5.6.1 P ime os pasos con CMS Elgg.............................................................................. 70
5.6.2 Lo más impo an e es á po llega . WebRTC y HTML5 ....................................... 71
5.6.3 In eg a las dos aplicaciones pa a que pa ezcan una ......................................... 71
5.7 P uebas ........................................................................................................................ 72
6 Conclusiones y abajo u u o ............................................................................................. 74
Anexo I: Compe encias ................................................................................................................ 75
Anexo II: Legislación igen e ....................................................................................................... 77
Anexo III: Manual de usua io ...................................................................................................... 79
Anexo IV: En o no de Desa ollo ................................................................................................. 84
Bibliog a ía .................................................................................................................................. 91
8
P e acio
El documen o expone un abajo de in g ado de la ca e a G ado en Ingenie ía In o má ica, el
cual iene como obje i o desa olla un sis ema de ideocon e encias a a és de HTML5.0.
Con es e abajo se p e ende amplia el uso de la web 2.0, la democ a ización de las
comunicaciones, y log a que los usua ios puedan comunica se de una o ma comple amen e
lib e, sin necesidad de ins alación o ac ualización de so wa e de e ce os.
Basado en la me odología expues a en el P oceso Uni icado de Desa ollo de So wa e (PUD),
se siguen odos sus p ocesos y lujos de abajo, gene ando los p oduc os y u ilizando las
écnicas y he amien as que p opo ciona la misma.
Se escoge el CMS1 Elgg con el obje i o de log a el compo amien o de una ed social donde
los usua ios puedan in e ac ua en e sí, lib emen e y con mayo usabilidad.
También se mues a la con igu ación del se ido web Node.js y de uno de sus módulos,
socke .io, como he amien a de ayuda al na egado pa a log a la señalización.
Además se hace uso de las APIs2 de webRTC y de los elemen os que b inda HTML5 pa a
desa olla el sis ema de ideollamadas.
1 Sis ema de ges ión de con enidos.
2 In e az de p og amación de aplicaciones.
9
1 In oducción
Una ideocon e encia es una conexión mul imedia en e dos o más pe sonas que pueden
e se, oí se e in e cambia ecu sos aunque es én sepa adas geog á icamen e. Su uso
posibili a la ealización de euniones con g upos de pe sonas si uadas en luga es alejados
en e sí, pe mi iendo el in e cambio de in o mación g á ica, ans e encias de a chi os, de
ídeo, de oz, hace p esen aciones, se icio de a ención al clien e, e c.
Las ideocon e encias basan su eje ecnológico en la comp esión digi al de los lujos de audio y
ideo en iempo eal. Su uso o ece una solución accesible a la necesidad de comunicación. Los
sis emas ac uales pe mi en en ia y ecibi in o mación isual y sono a en e dos pun os que
se encuen an en zonas di e en es, e i ando así los gas os y pé dida de iempo que implica el
aslado ísico de la pe sona. (1)
Es as en ajas hacen a la ideocon e encia el segmen o de mayo c ecimien o en el á ea de
las elecomunicaciones.
1.1 Mo i ación y obje i os
En la ac ualidad, las limi aciones écnicas ales como el sonido de icien e, la mala calidad de las
imágenes, la poca iabilidad, la complejidad y el cos e han quedado a ás, dando luga a
ideocon e encias con al a calidad de audio, ideo, ans e encia de a chi os y con un cos e
accesible a la mayo ía de los in e esados. (2)
Con HTML5.0, apa ece la posibilidad de ealiza ideocon e encias sin la necesidad de
ins alación de so wa e. Es e lenguaje in oduce sopo e in eg ado pa a el con enido
mul imedia g acias a los elemen os de audio y ideo, o eciendo la posibilidad de inc us a
es e ipo de con enido en páginas HTML.
El obje i o p incipal del abajo es: desa olla una aplicación mul ipla a o ma de
ideocon e encias en HTML5.0. Pa iendo del mismo se aza on los siguien es obje i os
secunda ios:
 U iliza las ecnologías disponibles pa a el desa ollo de un sis ema de
comunicación en en o no web.
 Log a una comunicación P2P p i ada en e dos pe sonas.
 C ea una aplicación web que cen alice la ges ión de las comunicaciones en e los
usua ios.
1.2 Obje o de es udio
Pa a la ealización de es e abajo se plan ea como obje o de es udio:
 La u ilización de las APIs de WebRTC pa a el desa ollo de sis emas de
comunicación en iempo eal.
1.3 Campo de acción
Den o del obje o de es udio se de ine como campo de acción:
 El desa ollo de sis emas de comunicación con audio y ideo median e la
in eg ación de las APIs de WebRTC y HTML5.
16
3.1.2 Lenguajes de p og amación
 Ja asc ip
Ja asc ip (a eces ab e iado como JS) es un lenguaje lige o, in e p e ado y o ien ado
a obje os, más conocido como el lenguaje sc ip pa a páginas web. El es ánda de
Ja aSc ip es ECMASc ip . A pa i de 2012, odos los na egado es mode nos sopo an
comple amen e ECMASc ip 5.1. Los na egado es más an iguos sopo an al menos
ECMASc ip 3. Una sex a e isión del es ánda es á en p oceso. (12)
 HTML5
El lenguaje de ma cado de la Wo ld Wide Web ha sido siemp e HTML. Fue diseñado
p incipalmen e pa a desc ibi semán icamen e documen os cien í icos, sin emba go,
su diseño gene al y adap aciones en los úl imos años han pe mi ido que sea u ilizado
pa a ep esen a o os ipos de documen os. En 2006, el W3C mani es ó su in e és de
pa icipa en el desa ollo de HTML5 y en 2007 o mó un g upo de abajo pa a
desa olla la especi icación HTML5.0.
Apple, Mozilla y Ope a pe mi ie on que W3C publica a la especi icación bajo el
copy igh W3C, man eniendo una e sión con licencia menos es ic i a en el si io
WHATWG. Es a nue a especi icación inco po a in e esan es capacidades Ja asc ip ,
que aumen an la capacidad de almacenamien o en e a las cookies que dejaban
ecopila algunos kiloby es. Aho a se puede consegui un almacenamien o en e 5 y 10
megas, dependiendo de la pla a o ma. Además, HTML5 pe mi e múl iples Ja asc ip s
ejecu ándose en pa alelo en la misma página, hace posible la inse ción de audio y
ideo de o ma di ec a y la geolocalización del usua io. (13)
 CSS
Hojas de Es ilo en Cascada (Cascading S yle Shee s), es un mecanismo simple que
desc ibe cómo se a a mos a un documen o en la pan alla y la o ma en que se a a
imp imi . Es a o ma de desc ipción, o ece a los desa ollado es el con ol o al sob e
es ilo y o ma o de sus documen os. CSS se u iliza pa a da es ilo a
documen os HTML y XML, sepa ando el con enido de la p esen ación. Pe mi e a los
desa ollado es con ola el es ilo y el o ma o de múl iples páginas web
simul áneamen e. Cualquie cambio en el es ilo ma cado pa a un elemen o en la CSS,
a ec a á a odas las páginas inculadas a esa CSS en las que apa ezca ese elemen o.
(14)
 PHP
PHP (Hype ex P ep ocesso ) es un lenguaje de código abie o muy popula ,
especialmen e adecuado pa a el desa ollo web y que puede se inc us ado en HTML.
Las páginas web que usan PHP se a an igual que páginas HTML comunes y co ien es,
se pueden c ea y edi a de la misma mane a que no malmen e se c ean páginas
HTML. PHP es á en ocado p incipalmen e a la p og amación de sc ip s del lado del
se ido , po lo pueden ealiza se uncionalidades incluidas en o os lenguajes de
p og amación, como ecopila da os de o mula ios, gene a páginas con con enidos
dinámicos, en ia y ecibi cookies; aunque PHP puede hace mucho más. (15)
3.2 Recu sos ha dwa e
El p oyec o ue desa ollado desde un o denado pe sonal ma ca HP G62 con las siguien es
ca ac e ís icas:
 P ocesado In el Co e i5.
 Memo ia RAM 4 GB DDR2.
 Pan alla de 15,4 pulgadas.
 Sis ema Ope a i o: Windows 7 Home Edi ion.

17
3.2.1 Ha dwa e de los clien es
 O denado po á il con webcam y mic ó ono incluido.
 O denado de sob e mesa con cáma a web y mic ó ono inco po ado.
 Ta je a Wi i o Placa de Red E he ne compa ible.
 Conexión a in e ne a a és de ADSL o 3G.
 Disposi i o mó il con And oide 2.4 o e siones pos e io es y cáma a on al.
3.2.2 Ha dwa e de los se ido es
 P ocesado : Pen ium 4 o supe io .
 Memo ia RAM: 2 Gb.
 Disco Du o: 5GB disponibles.
 Placa de Red: E he ne compa ible.
 Velocidad de subida y bajada de da os supe io a 5mb.
 Red LAN que sopo e TCP/IP (en gene al, In e ne ).
18
4 Plani icación del abajo
En es e capí ulo se abo da la plani icación y empo ización del abajo. Se explica la
me odología u ilizada pa a ealiza el sis ema de ideocon e encias, la es imación del iempo
de ejecución de las a eas, así como un ap oximado del cos e pa a el desa ollo de la
aplicación.
4.1 Me odología de desa ollo
 P oceso Uni icado de Desa ollo (PUD)
Es una me odología de desa ollo de so wa e basada en componen es e in e aces
bien de inidas, que unida al Lenguaje Uni icado de Modelado (UML), cons i uye la
me odología es ánda más u ilizada pa a el análisis, implemen ación y documen ación
de sis emas o ien ados a obje os.
Es un p oceso que puede especializa se pa a una g an a iedad de sis emas de
so wa e en di e en es á eas de aplicación, dis in os ipos de o ganizaciones, a iados
ni eles de ap i ud y amaños de p oyec o.
RUP no es un sis ema con pasos i memen e es ablecidos, sino un conjun o de
me odologías adap ables al con ex o y necesidades de cada o ganización.
Es el esul ado de a ios años de desa ollo y uso p ác ico, en el que se han uni icado
écnicas de desa ollo a a és de UML y abajo de muchas me odologías u ilizadas
po los clien es. La e sión que se ha es anda izado io la luz en 1998 y se conoció en
sus inicios como P oceso Uni icado de Ra ional 5.0 (RUP), de ahí las siglas con las que
se iden i ica a es e p oceso de desa ollo. (16)
 Di igido po Casos de Uso
Un caso de uso es un agmen o de uncionalidad del sis ema que p opo ciona
un esul ado de alo pa a el usua io. Los casos de uso modelan los
eque imien os uncionales del sis ema. Todos los casos de uso jun os
cons i uyen el modelo de casos de uso.
Los casos de uso ambién guían el p oceso de desa ollo (diseño,
implemen ación y p ueba). Basándose en los casos de uso, los desa ollado es
c ean una se ie de modelos de diseño e implemen ación que lle an a cabo los
casos de uso. De es e modo, los casos de uso no solo inician el p oceso de
desa ollo, sino que le p opo cionan un hilo conduc o que a anza a a és de
una se ie de lujos de abajo que pa en de los casos de uso. (17)
 Cen ado en la A qui ec u a
La a qui ec u a de un sis ema so wa e se desc ibe median e di e en es is as
del sis ema en cons ucción. El concep o de a qui ec u a so wa e incluye los
aspec os es á icos y dinámicos más signi ica i os del sis ema. La a qui ec u a
es una is a del diseño comple o con las ca ac e ís icas más impo an es
esal adas, dejando los de alles a un lado.
Los casos de uso y la a qui ec u a es án p o undamen e elacionados. Los
casos de uso deben encaja en la a qui ec u a y a su ez la a qui ec u a debe
pe mi i el desa ollo de odos los casos de uso eque idos, ac ualmen e y en
el u u o (17).
 I e a i o e Inc emen al
Es p ác ico di idi el es ue zo de desa ollo de un p oyec o de so wa e en
pa es más pequeñas o mini p oyec os. Cada mini p oyec o es una i e ación
que esul a en un inc emen o. Las i e aciones hacen e e encia a pasos en el
lujo de abajo y los inc emen os a c ecimien os en el p oduc o. Las
i e aciones deben es a con oladas, es o signi ica que deben selecciona se y
ejecu a se de una o ma plani icada. Los desa ollado es basan la selección de
19
lo que implemen a án en cada i e ación en dos cosas: el conjun o de casos de
uso que amplían la uncionalidad y los iesgos más impo an es que deben
mi iga se.
En cada i e ación los desa ollado es iden i ican y especi ican los casos de uso
ele an es, c ean un diseño u ilizando la a qui ec u a seleccionada como guía
pa a implemen a dichos casos de uso. Si la i e ación cumple sus obje i os, se
con inúa con la p óxima, si no deben e isa se las decisiones p e ias y p oba
un nue o en oque. (17)
 Ciclo de Vida
El P oceso Uni icado se epi e a lo la go de una se ie de ciclos que cons i uyen la ida
de un sis ema. Cada ciclo cons i uye una e sión del sis ema.
 Fases
Cada ciclo cons as de cua o ases: Inicio, Elabo ación, Cons ucción y T ansición. Cada
ase se subdi ide en i e aciones. En cada i e ación se desa olla en secuencia un
conjun o de disciplinas o lujos de abajos.
 Disciplinas
Cada disciplina es un conjun o de ac i idades elacionadas ( lujos de abajo)
inculadas a un á ea especí ica den o del p oyec o o al. Las más impo an es son:
Reque imien os, Análisis, Diseño, Codi icación y P ueba. El ag upamien o de
ac i idades en disciplinas es p incipalmen e una ayuda pa a comp ende el p oyec o
desde la isión adicional en cascada (17)( e Ilus ación 6).
Ilus ación 6: Fases, i e aciones y disciplinas.
Cada disciplina es á asociada con un conjun o de modelos que se desa ollan. Es os
modelos es án compues os po a e ac os. Los a e ac os más impo an es son los
modelos que cada disciplina ealiza: Modelo de Casos de Uso, Modelo de Diseño,
Modelo de Implemen ación y Modelo de P ueba (17) ( e Ilus ación 7).
20
Ilus ación 7: Modelos po disciplinas.
4.2 Plani icación y empo ización
En es e apa ado se de allan las ho as empleadas pa a la ealización del abajo, siguiendo las
cua o ases que plan ea el P oceso Uni icado de Desa ollo de So wa e, así como las ho as
especí icas pa a cada lujo de abajo en cada ase( e Tabla 1).
FASES
HORAS
INICIO
60H
Reque imien os
10H
Análisis y Diseño
50H
Codi icación
0H
P uebas
0H
ELABORACIÓN
85H
Reque imien os
10H
Análisis y Diseño
45H
Codi icación
30H
P uebas
5H
CONSTRUCCIÓN
140H
Reque imien os
0H
Análisis y Diseño
25H
Codi icación
105H
21
P uebas
10H
TRANSICIÓN
45H
Reque imien os
5H
Análisis y Diseño
10H
Codi icación
25H
P uebas
5H
To al
335H
Tabla 1: Plani icación po ases y lujos.
4.3 P esupues o
A con inuación se de alla el p esupues o pa a e ec ua el p oyec o. Se des acan los elemen os
necesa ios pa a la ealización del mismo, así como el cos e es imado pa a cada uno de ellos.
 Cos e del ha dwa e
Es el cos e co espondien e a los equipos u ilizados.
 Cos e del so wa e
Gas os de i ados de la u ilización de las he amien as empleadas pa a la ealización
del p oyec o.
 Cos e del pe sonal
Gas os co espondien es a la emune ación de las pe sonas que desa ollan el
p oyec o.
4.3.1 Cos e del ha dwa e
Pa a es e p oyec o se ienen en cuen a los siguien es elemen os de ha dwa e pa a su
desa ollo ( e Tabla 2).
Elemen o
Cos e
O denado Po á il HP G62
450€
Se icio de In e ne ADSL
160€
Se ido es de hos ing
G a ui o
To al Ha dwa e
610€
Tabla 2: Desglose de los cos es de ha dwa e.
4.3.2 Cos e del so wa e
El cos e de los siguien es elemen os es el co espondien e a la licencia de los mismos ( e
Tabla 3).

22
Elemen o
Cos e
Windows 7 P o essional
160€
Mic oso O ice 2007
130€
To al So wa e
290€
Tabla 3: Desglose de los cos es de so wa e.
4.3.3 Cos e del pe sonal
En la siguien e abla se enume an los abajado es que in e ienen en el desa ollo del
p oyec o, así como el núme o de ho as es imadas pa a cada uno de ellos, el cos e po ho a y el
cos e o al ( e Tabla 4).
Pe sonal
Nº Ho as
Cos e / H
Cos e
Je e de p oyec o
20H
40€
800€
A qui ec o
65H
35€
2275€
Analis a
50H
20€
1000€
P og amado
150H
20€
3000€
Ingenie o de p uebas
15H
20€
300€
To al
300H
-
7375€
Tabla 4: Desglose de los cos es del pe sonal.
4.3.4 P esupues o o al del p oyec o
La siguien e abla mues a un desglose de los cos es calculados an e io men e y el cos e o al
que ep esen a el desa ollo del p oyec o ( e Tabla 5).
Elemen o
Cos e
Cos e del ha dwa e
610€
Cos e del so wa e
290€
Cos e del pe sonal
7375€
To al
8275€
Tabla 5: Desglose de los cos es.
23
5 Desa ollo del abajo
5.1 Modelo del dominio
Un modelo del dominio se u iliza como uen e pa a el diseño de los obje os so wa e y
co esponde a una en ada necesa ia pa a a ios a e ac os. El modelo del dominio mues a (a
los modelado es) clases concep uales signi ica i as en un dominio del p oblema, es el
a e ac o más impo an e que se c ea du an e el análisis o ien ado a obje os. Un modelo del
dominio es una ep esen ación de las clases concep uales del mundo eal, no de componen es
so wa e. No se a a de un conjun o de diag amas que desc iben clases u obje os so wa e
con esponsabilidades. (18)
 Webcam App
Webcam App es una aplicación que iene como p incipal obje i o social que las
pe sonas puedan ealiza ideocon e encias a a és de la web de una o ma g a ui a y
sencilla. Cuando un usua io se egis a en Webcam App acili a su nomb e, co eo
elec ónico, en e o os da os. También, el usua io puede añadi una o o de pe il
pa a que sus amigos puedan iden i ica lo ácilmen e en e los miemb os de la
aplicación. Una ez egis ado, el usua io puede p opo ciona o a in o mación
elacionada, po ejemplo su ciudad de esidencia, edes, ac i idades, in e eses y
luga es. También puede busca a sus amigos sólo con in oduci su nomb e y
ag ega los como amigos en Webcam App, con el in de pode comunica se y compa i
sus da os con ellos. O as de las inalidades p incipales del uso de Webcam App es
compa i con enido con los demás, po ejemplo ca ga o hace una o o, ca ga o
g aba un ideo, compa i un enlace, c ea un g upo, hace un comen a io, esc ibi
una no a o en ia un mensaje. Pa e del con enido que se compa e y de las acciones
que se lle an a cabo se mues an en la página de ac i idades. Además, se puede limi a
las pe sonas que pueden e los da os pe sonales desde la con igu ación de p i acidad
( e Ilus ación 8).
Ilus ación 8: Modelo del dominio.
Videocall
-calle
-callee
Use
-use name
-p o ile_pho o
-e-mail
-ci y
-skills
-in e es s
Video
-du a ion
Message
-con en
-sende
- ecipien
G oup
-membe s
make
1
1..*
send
1..*
1
con ain
*
*
send
1..*
1
Publica ions
Pho o Commen s
is a ype o is a ype o
publish
1..*
1
iendship
1
1..*
24
5.2 Lis a de ca ac e ís icas
En es a sección se de alla la lis a de ca ac e ís icas asociada a la aplicación Webcam App. La
misma es un a e ac o que se ob iene después de aplica la a ea de “Enume a los equisi os
candida os”, que se p opone en la me odología del PUD (P oceso Uni icado de Desa ollo),
pa a la cap u a de equisi os.
Es a lis a con iene las ideas de clien es, usua ios, analis as y desa ollado es sob e posibles
aspec os a inclui en la aplicación, que pos e io men e se pueden aduci en equisi os del
so wa e. Es as ideas se conside an equisi os candida os a desa olla en la e sión ac ual del
sis ema o se pueden pos e ga a e siones u u as.
 Tipos de Usua ios
La clasi icación de los usua ios es una p ime a ap oximación pa a iden i ica y asocia a
cada uno de los posibles usua ios, los ipos iden i icados no necesa iamen e ienen
que se los usua ios de ini i os.
 Anónimo: Es el usua io que no es á egis ado y a a u iliza las
uncionalidades básicas de na egación, como po ejemplo egis a se, sin
opción a modi ica el en o no.
 Regis ado: Es el usua io más común, además de las unciones del usua io
an e io puede accede a la mayo ía de las uncionalidades de la aplicación,
añadi amigo, en ia mensajes, hace ideollamadas, elimina amigo, ag ega
con enido, ges iona pe il, con igu a p i acidad, e c.
 Adminis ado : Es e usua io puede accede a odas las uncionalidades de la
aplicación, en e las suyas p opias es án: bloquea cuen as de usua ios,
elimina cuen as de usua io, hace a un usua io adminis ado , es ablece el
passwo d a los usua ios.
Pa a desc ibi las ca ac e ís icas, se u iliza una abla con los siguien es campos ( e Tabla6):
 Código: Es el iden i icado de la ca ac e ís ica. Se especi ica como LC + iden i icado
del usua io + núme o de la ca ac e ís ica.
 Iden i icado es pa a cada ipo de usua io de la aplicación
 R. Usua io Regis ado.
 A. Usua io Anónimo.
 AD. Usua io Adminis ado .
 Nomb e: Nomb e de la ca ac e ís ica.
 Desc ipción: B e e desc ipción de lo que comp ende la ca ac e ís ica.
 P io idad: Se asigna una p io idad a cada ca ac e ís ica con el in de de e mina el
o den en que se an a i desa ollando. Las p io idades que se usan es án de inidas po
un alo numé ico, que ep esen a el ni el de p io idad, donde 0 es la más baja y 100
la más al a, luego es án los angos que se mues an a con inuación:
 80-100 (Muy al a)
 60-80 (Al a)
 40-60 (Media)
 20-40 (Baja)
 0-20 (Muy baja)
 Es ado: Cada ca ac e ís ica iene un es ado asociado que a a iando a medida que
p og esa el sis ema. Los posibles es ados son:
 Acep ado: La ca ac e ís ica se desa olla á en es a e sión del p oduc o.
 Plani icada: La ca ac e ís ica ya ha sido plani icada y se empeza á a desa olla
en un plazo de iempo co o.
 En desa ollo: Ya se es á desa ollando.
 Finalizada: Se ha e minado de desa olla .
25
 Pos e gada: No se desa olla á has a una e sión u u a.
 Rechazada: P obablemen e no se desa olla á en ninguna e sión.
Código
Nomb e
Desc ipción
P io idad
Es ado
LC-A.1
Regis a
Usua io
La aplicación pe mi i á al
usua io in oduci sus
da os pe sonales pa a
egis a se.
99
Finalizada
LC-R.1
Busca Amigo
La aplicación pe mi i á a
cualquie usua io
in oduci el nomb e de
una pe sona y mos a á los
esul ados de la búsqueda.
97
Finalizada
LC-R.2
C ea Pe il
Un usua io que se ha
egis ado puede
in oduci o os da os
pe sonales especí icos que
pueden a ia como:
(di ección de co eo
elec ónico, localidad, e c.)
96
Finalizada
LC-R.3
Ges iona
Pe il
Un usua io egis ado
puede modi ica los da os
pe sonales in oducidos en
la in o mación del pe il.
96
Finalizada
LC-R.4
Hace Login
Se pe mi i á al usua io ya
egis ado in oduci su
di ección de co eo o
nomb e de usua io y
con aseña pa a
iden i ica se en la
aplicación.
99
Finalizada
LC-R.5
Añadi Amigo
Se pe mi i á al usua io
egis ado ag ega una
pe sona que es é
egis ada como amigo.
90
Finalizada
LC-R.6
Elimina
Amigo
Se pe mi i á al usua io
egis ado elimina una
pe sona de su lis a de
amigos.
90
Finalizada
LC-R.7
En ia
Mensajes
Un usua io egis ado
pod á en ia mensajes a
cualquie pe sona que es á
egis ada en la aplicación.
85
Finalizada
LC-R.8
Repo a
Un usua io egis ado
pod á epo a cualquie
75
Finalizada
32
con el nomb e in oducido.
Flujo no mal
1. El usua io in oduce el nomb e de la pe sona que desea encon a .
2. La aplicación mues a un lis ado de los con ac os que es án dados de
al a en Webcam App con ese nomb e.
3. Webcam App o ece la posibilidad de ag ega los como “Amigos”.
Flujo al e na i o
3.1. El usua io puede omi i la opción de en ia una in i ación de
amis ad a los usua ios encon ados.
Caso de Uso
Elimina Cuen a de Usua io
Ac o
Usua io Adminis ado
P econdición
1. Tiene que exis i una o a ias denuncias p e ias en con a del usua io
y que se haya comp obado po los adminis ado es de Webcam App
que in inge las no mas de uso de la aplicación.
Pos condición
1. Queda á eliminada pe manen emen e la cuen a de usua io.
2. Se elimina el usua io del lis ado de amigos y los g upos a los que la
cuen a es aba asociada.
Flujo no mal
1. Si exis en a ias denuncias sob e un mismo pe il de usua io de la
aplicación, el adminis ado puede decidi si el mismo es un posible
usua io a elimina , señalizando el nomb e del usua io y la di ección de
su pe il.
2. El adminis ado e isa los mo i os de la denuncia.
3. El adminis ado pasa a elimina la cuen a de usua io
pe manen emen e.
Flujo al e na i o
3.1. El adminis ado conside a que las causas de las denuncias no
p oceden pa a elimina la cuen a de usua io y de es a o ma
puede e i a la ale a gene ada.
Caso de Uso
Compa i Con enido
Ac o
Usua io Regis ado
P econdición
1. El usua io debe es a iden i icado en el sis ema.
Pos condición
1. El con enido queda almacenado y asociado al pe il del usua io.
2. El pe il del usua io queda ac ualizado.
Flujo no mal
1. El sis ema mues a el o mula io asociado pa a subi el con enido.
2. El usua io in oduce el con enido, así como un í ulo o una desc ipción
si así lo desea, además de elegi el ni el de segu idad que desea pa a
su con enido.

33
3. El usua io decide las pe sonas con las que desea compa i el
con enido.
4. El con enido queda publicado en la sección de a chi os.
5. El sis ema alida y econoce el ipo de con enido. La in o mación se
almacena en el se ido .
Flujo al e na i o
5.1. El sis ema de ec a que la cuo a lími e del usua io es á comple a y
echaza la pe ición de publica el con enido.
Caso de Uso
Elimina Con enido
Ac o
Usua io Regis ado
P econdición
1. El usua io debe es a iden i icado en el sis ema.
Pos condición
1. El con enido queda eliminado y des inculado al pe il del
usua io.
2. El pe il del usua io queda ac ualizado.
Flujo no mal
1. El usua io selecciona el con enido a elimina .
2. El sis ema e i ica que el con enido se quie e elimina
ealmen e.
3. El con enido se elimina del se ido .
Flujo al e na i o
2.1. El usua io no con i ma la eliminación del con enido.
3.1. El con enido se man iene alojado en el se ido .
Caso de Uso
Ges iona Pe il
Ac o
Usua io Regis ado
P econdición
1. El usua io debe es a iden i icado en el sis ema
Pos condición
1. Los da os del pe il del usua io de Webcam App quedan modi icados.
2. El pe il del usua io de Webcam App queda ac ualizado.
Flujo no mal
1. El sis ema mues a oda la in o mación elacionada con el pe il del
usua io.
2. El usua io selecciona la opción de modi ica los da os pe sonales.
3. El sis ema mues a un o mula io asociado a la in o mación de pe il
que se desea edi a .
4. El usua io edi a los campos de la in o mación que desea modi ica .
5. El sis ema alida que la nue a in o mación es co ec a.
6. El sis ema almacena la nue a in o mación en el se ido .
Flujo al e na i o
5.1 En el caso que algún campo obliga o io no sea ellenado, el
sis ema mos a á un e o y man end á el campo con el alo
34
an e io .
6.1 El sis ema no ac ualiza á la in o mación de dicho campo en el
se ido .
Caso de Uso
Realiza Videollamada
Ac o
Usua io Regis ado
P econdición
1. El usua io debe es a iden i icado en el sis ema.
Pos condición
1. La ideollamada queda á ealizada.
Flujo no mal
1. El usua io selecciona el amigo al cual desea hace le una ideollamada.
2. El usua io en ía la solici ud a su amigo pa a ambos ealiza una
ideollamada.
3. El sis ema mues a un cuad o de diálogo pa a que el usua io que es é
siendo llamado acep e la ideollamada.
4. El usua io acep a la solici ud de ideollamada.
5. La ideollamada queda es ablecida en e los dos usua ios.
Flujo al e na i o
4.1. El usua io amigo echaza la solici ud de ideollamda que le es án
ealizando.
5.1. La solici ud queda eliminada.
Caso de Uso
Login
Ac o
Usua io Regis ado
P econdición
1. El usua io debe habe se egis ado con an e io idad.
Pos condición
1. El usua io queda á iden i icado en el sis ema.
Flujo no mal
1. El sis ema mues a los campos pa a hace el Login en la aplicación.
2. El usua io ellena los campos con los da os que p opo cionó en el
egis o.
3. El sis ema alida los da os y mues a la página del pe il.
Flujo al e na i o
3.1. La aplicación pedi á al usua io que in en e in oduci sus da os
nue amen e si no ue on in oducidos co ec amen e.
35
5.3.4 P o o ipos de in e az de usua io
 Caso de Uso Regis a se
Pa a Regis a se el usua io debe in oduci in o mación básica con los campos que
apa ecen a con inuación, luego pod á amplia la in o mación si lo desea ( e
Ilus ación 15).
Ilus ación 15: In e az pa a egis a se.
 Caso de Uso Busca Amigo
Pa a el caso de uso Busca Amigo el usua io pod á localiza a sus amigos egis ados
en la aplicación a a és de su nomb e ( e Ilus ación 16).
Ilus ación 16: In e az de búsqueda de amigo.
Una ez in oducido el nomb e del amigo que se desea encon a , la aplicación
mos a á un lis ado con las pe sonas las cuales su nomb e coincide con el c i e io de
búsqueda, además la aplicación da á la opción de ag ega lo como amigo en Webcam
App ( e Ilus ación 17).
36
Ilus ación 17: In e az pa a ag ega un amigo.
 Caso de uso Elimina Cuen a de Usua io
Cuando el adminis ado ecibe una denuncia sob e el pe il de algún usua io, e isa
los mo i os del epo e. Si e dade amen e el usua io denunciado incumple las
no mas de uso del si io, el adminis ado puede elimina pe manen emen e su cuen a,
de o o modo si es un epo e inco ec o, puede elimina el epo e o simplemen e
a chi a lo ( e Ilus ación 18 y 19).
Ilus ación 18: In e az de epo e de in acción.
Ilus ación 19: In e az de elimina usua io.
37
 Caso de Uso Ag ega Con enido
Cuando el usua io decide compa i algún ipo de con enido, se mues a el siguien e
o mula io ( e Ilus ación 20).
Ilus ación 20: In e az pa a ag ega con enido.
Una ez seleccionado el con enido a publica , queda almacenado y asociado al pe il
del usua io que lo ag egó ( e Ilus ación 21).
Ilus ación 21: In e az del con enido ya ag egado.

38
 Caso de Uso Elimina Con enido
Ilus ación 22: In e az pa a elimina con enido.
Cuando el usua io decide elimina el con enido el sis ema mues a un mensaje de
con i mación ( e Ilus ación 23 y 24).
Ilus ación 23: In e az de mensaje de con i mación de eliminación de con enido.
Una ez con i mado, el con enido queda eliminado pe manen emen e.
Ilus ación 24: In e az que mues a el con enido ya eliminado.
 Caso de Uso Ges iona Pe il
Cuando el usua io decide ges iona su pe il, se mues a un o mula io con odos los
campos que iene acceso a modi ica , ales como su Nomb e, Localidad, Núme o de
Telé ono, e c. ( e Ilus ación 25 y 26).
39
Ilus ación 25: In e az del pe il del usua io c eado.
Ilus ación 26: In e az pa a edi a el pe il del usua io.
 Caso de Uso Login
Al isi a el si io, el sis ema mues a un o mula io pa a que el usua io pueda
iden i ica se en el mismo y de es a o ma accede a las p incipales uncionalidades de
la aplicación ( e Ilus ación 27).
Ilus ación 27: In e az de o mula io de Login.
40
 Caso de Uso Realiza Videollamada.
Pa a el caso de uso ealiza ideollamada, se han de inido dos p o o ipos de in e az
pa a ealiza la misma acción, el p ime p o o ipo se ía desde el pe il del usua io que
desea ealiza la ideollamada, desplega el menú de opciones que iene pa a cada
amigo de su lis ado ( e Ilus ación 28).
Ilus ación 28: In e az pa a ealiza ideollamada.
El segundo p o o ipo se ía isi ando el pe il del usua io que se le desea ealiza la
ideollamada y selecciona es a opción en el menú que apa ece debajo de su o o de
pe il ( e Ilus ación 29).
Ilus ación 29: In e az pa a ealiza ideollamada.
Pos e io men e de habe en iado la solici ud al usua io con el que se desea comunica , en su
aplicación apa ece á un cuad o de diálogo pa a que con i me o echace la solici ud de
ideollamada ( e Ilus ación 30).
Ilus ación 30: Cuad o de diálogo de no i icación de ideollamada.
41
5.4 Modelo de análisis
El modelo de análisis se u iliza como ayuda pa a e ina los equisi os. Analiza los equisi os en
la o ma de un modelo de análisis es impo an e po a ios mo i os:
 Un modelo de análisis o ece una especi icación más p ecisa de los equisi os que se
ob ienen como esul ado de la cap u a de equisi os, incluyendo al modelo de casos
de uso.
 Un modelo de análisis se desc ibe u ilizando el lenguaje de los desa ollado es, se
puede po an o in oduci un mayo o malismo y se u ilizado pa a azona sob e los
uncionamien os in e nos del sis ema.
 Un modelo de análisis es uc u a los equisi os de un modo que acili a su
comp ensión, su p epa ación, su modi icación y en gene al su man enimien o. Un
modelo de análisis puede conside a se como una p ime a ap oximación al modelo de
diseño (aunque es un modelo po sí mismo) y es po an o una en ada undamen al
pa a da le o ma al sis ema en el diseño y en la implemen ación. (17)
5.4.1 Diag ama de clases
 Caso de Uso Regis a se
Relación de azabilidad en e el caso de uso Regis a se del modelo de casos de uso y
la ealización del caso de uso Regis a se en el modelo de análisis ( e Ilus ación 31).
Ilus ación 31: Relación de azabilidad del caso de uso Regis a se.
Pa a el diag ama de clases del modelo de análisis se ienen las clases:
Con ol_Regis o, la cual se enca ga de in oca a la clase In e az_Regis o. La clase
In e az_Regis o, mues a un o mula io pa a que el usua io pueda in oduci sus
da os pe sonales y es os pasan a se alidados po la clase Valida _Regis o. La clase
Valida _Regis o es una clase que iene la unción de comp oba que los da os
inse ados en el egis o son co ec os. Se iden i ica ambién Con ol_Usua io, la cual
es una clase de con ol que ecibe odos los da os del egis o y se enca ga de c ea el
usua io co espondien e. Po úl imo, la clase Cuen a_Usua io, la cual es una en idad y
ep esen a al usua io en cues ión ( e Ilus ación 32).
Regis a se Regis a se
<< ace>>
48
Ilus ación 50: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Busca Amigo.
 Caso de Uso Compa i Con enido
Ilus ación 51: Diag ama de colabo ación pa a el lujo no mal del caso de uso Compa i Con enido.
Ilus ación 52: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Publica Con enido.
: Panel_Busqueda
<<bounda y>>
: Lis ado_Resul ados
<<bounda y>>
: Con ol_Busqueda
<<con ol>> : Amigo
<<en i y>>
: Lis a_Resul ados
<<en i y>>
: Con ol_Amigos
<<con ol>>
: Usua io Regis ado
1 : mos a ()
2 : in oduci Nomb e()
3 : gene a ()
4 : mos a ()
: Con enido_Publicado
<<bounda y>>
: Ag ega _Con enido
<<bounda y>>
: Publica _Con enido
<<con ol>>
: Valida _Con enido
<<con ol>>
: Cuen a_Usua io
<<en i y>>
: Usua io Regis ado
1 : mos a ()
2 : ca ga Con enido()
3 : alida ()
4 : ac ualiza ()
5 : mos a ()
: Con enido_Publicado
<<bounda y>>
: Ag ega _Con enido
<<bounda y>>
: Publica _Con enido
<<con ol>>
: Valida _Con enido
<<con ol>>
: Cuen a_Usua io
<<en i y>>
: Usua io Regis ado
1 : mos a ()
2 : ca ga Con enido()
3 : alida ()
4 : e o Cuo aLimi eSupe ada()
5 : mos a ()
6 : ca ga E o ()

49
 Caso de Uso Elimina Con enido
Ilus ación 53: Diag ama de colabo ación pa a el lujo no mal del caso de uso Elimina Con enido.
Ilus ación 54: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Elimina Con enido.
 Caso de Uso Elimina Cuen a Usua io
Ilus ación 55: Diag ama de colabo ación pa a el lujo no mal del caso de uso Elimina Cuen a Usua io.
: Cuen a_Usua io
<<en i y>>
: Con enido_Eliminado
<<bounda y>>
: Con i macion_Eliminacion
<<bounda y>>
: Eliminado _Con enido_Con ol
<<con ol>>
: Usua io Regis ado
1 : mos a ()
2 : con i maEliminacion()
3 : ac ualiza ()
4 : mos a ()
: Cuen a_Usua io
<<en i y>>
: Con enido_Eliminado
<<bounda y>>
: Con i macion_Eliminacion
<<bounda y>>
: Eliminado _Con enido_Con ol
<<con ol>>
: Usua io Regis ado
1 : mos a ()
2 : noCon i maEliminacion()
: Usua io Adminis ado
: Lis a_Ale as
<<bounda y>>
: Ges o _Ale as
<<con ol>>
: Ges o Usua ios
<<con ol>>
: Lis ado_Ale as
<<en i y>>
: Cuen a_ Usua io
<<en i y>>
1 : gene a ()
2 : en ia ()
3 : mos a ()
4 : elimina ()
50
Ilus ación 56: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Elimina Cuen a
Usua io.
 Caso de Uso Login
Ilus ación 57: Diag ama de colabo ación pa a el lujo no mal del caso de uso Login.
Ilus ación 58: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Login.
: Usua io Adminis ado
: Lis a_Ale as
<<bounda y>>
: Ges o _Ale as
<<con ol>>
: Ges o Usua ios
<<con ol>>
: Lis ado_Ale as
<<en i y>>
: Cuen a_ Usua io
<<en i y>>
1 : gene a ()
2 : en ia ()
3 : mos a ()
4 : elimina Ale as()
: Usua io Regis ado
: Ges o _Login
<<con ol>>
: Fo mula io_Login
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
: Validado _Login
<<con ol>>
1 : mos a ()
2 : in oduci Da os()
3 : alida Da os() 4 : en ia Da os()
5 : accede Cuen a()
: Usua io Regis ado
: Ges o _Login
<<con ol>>
: Fo mula io_Login
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
: Validado _Login
<<con ol>>
1 : mos a ()
2 : in oduci Da os()
3 : alida Da os()
4 : de uel eE o Da os()
5 : in o ma E o Da os()
51
 Caso de Uso Realiza Videollamada
Ilus ación 59: Diag ama de colabo ación pa a el lujo no mal del caso de uso Realiza Videollamada.
Ilus ación 60: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Realiza
Videollamada.
: Se ido _He oku
: Usua io Regis ado
: Usua io Regis ado
: Ven ana_Videollamada
<<bounda y>>
: Panel_Videollamada
<<bounda y>>
: Ges ion_Videollamada
<<con ol>>
: Ven ana_Dialogo
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
1 : mos a ()
2 : en ia Solici udVideollamada()
3 : gene a ()
4 : inicia Conexion()
5 : mos a Video()
6 : consul a ()
7 : mues aSolici udConexion()
8 : conec a se()
: Se ido _He oku
: Usua io Regis ado
: Usua io Regis ado
: Ven ana_Videollamada
<<bounda y>>
: Panel_Videollamada
<<bounda y>>
: Ges ion_Videollamada
<<con ol>>
: Ven ana_Dialogo
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
1 : mos a ()
2 : en ia Solici udVideollamada()
3 : gene a ()
4 : inicia Conexion()
5 : mos a Video()
6 : consul a ()
7 : mues aSolici udConexion() 8 : echaza ()
52
 Caso de Ges iona Pe il
Ilus ación 61: Diag ama de colabo ación pa a el lujo no mal del caso de uso Ges iona Pe il.
Ilus ación 62: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Ges iona Pe il.
: Usua io Regis ado
: Ges ion_Usua io
<<con ol>>
: Fo mula io_Da os_Pe il
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
: Valida _Da os
<<con ol>>
1 : ob ene Da os()
2 : mos a ()
3 : in oduci Da os()
4 : alida Da os() 5 : ac ualzia ()
: Usua io Regis ado
: Ges ion_Usua io
<<con ol>>
: Fo mula io_Da os_Pe il
<<bounda y>>
: Cuen a_ Usua io
<<en i y>>
: Valida _Da os
<<con ol>>
1 : ob ene Da os()
2 : mos a ()
3 : in oduci Da os()
4 : alida Da os()
5 : de ol e E o Da os()
6 : in o ma E o ()
53
5.5 Modelo de diseño
El diseño iene el p opósi o de o mula los modelos que se cen an en los equisi os no
uncionales y en el dominio de la solución. P epa a pa a la implemen ación y las p uebas del
sis ema. P e ende c ea un plano del modelo de implemen ación, po lo que el g ueso del
es ue zo es á en las úl imas i e aciones de elabo ación y las p ime as de cons ucción.
El modelo de diseño es á muy ce cano al de implemen ación, lo que es na u al pa a gua da y
man ene el modelo de diseño a a és del ciclo de ida comple o del so wa e. En el diseño se
modela el sis ema y se encuen a su o ma (incluida la a qui ec u a) pa a que sopo e odos
los equisi os, incluyendo los no uncionales y las es icciones. Una en ada esencial en el
diseño es el esul ado del análisis, o sea el modelo de análisis, que p opo ciona una
comp ensión de allada de los equisi os.
La Disciplina de Diseño iene en e sus p opósi os:
 Adqui i una comp ensión de los aspec os elacionados con los equisi os no
uncionales y es icciones elacionadas con los lenguajes de p og amación,
componen es eu ilizables, sis emas ope a i os, ecnologías de dis ibución y
concu encia y de in e az de usua io.
 C ea una en ada ap opiada y un pun o de pa ida pa a ac i idades de
implemen ación, cap u ando los equisi os o subsis emas indi iduales, in e aces y
clases.
 Descompone los abajos de implemen ación en pa es más manejables que puedan
se lle adas a cabo po di e en es equipos de desa ollo.
 Cap u a las in e aces en e los subsis emas an es en el ciclo de ida del so wa e, lo
cual es muy ú il cuando se u ilizan in e aces como elemen os de sinc onización en e
di e en es equipos de desa ollo.
5.5.1 A qui ec u a del sis ema
Pa a sopo a el modelo de despliegue del sis ema se de inen los siguien es elemen os:
 Dos balanceado es de ca ga con Apache Web Se e 2
Las pe iciones a los mismos se ha á de o ma al e nada a a és del Se ido DNS, que
dis ibui á las pe iciones a cada balanceado . Cada balanceado dis ibui á las
conexiones a cada uno de los clús e es de Apache Tomca y así es os se conec an a los
se ido es de DB. El obje i o de los dos balanceado es es no sob eca ga un solo
Apache y en caso que deje de p es a se icio uno de ellos, los se icios no deja án de
unciona . Los Apache Tomca clús e es se conec a án a los sis emas ex e nos,
se ido es de aplicaciones que sopo an la ecnología de Node.js ( e Ilus ación 63).

54
Ilus ación 63: Modelo de despliegue.
5.5.2 Diag amas de clases
 Caso de Uso Regis a se
Una ealización de caso de uso del diseño Regis a se p opo ciona una aza di ec a a
una ealización de caso de uso de análisis Regis a se en el modelo de análisis ( e
Ilus ación 64).
Ilus ación 64: Relación de azabilidad del caso de uso Regis a se.
En el diag ama de clases del modelo de diseño se iden i ican las siguien es clases:
Fo mula io, clase gené ica la cual puede ep esen a cualquie o mula io, en es e
caso con el a ibu o Da os y el mé odo en ia Da os (), pa a en ia al con ol los da os
ellenados po el usua io. También encon amos la clase UIFo mula io_Regis o que
he eda de la clase o mula io. La clase Con olado a_Usua ios se enca ga de c ea la
cuen a de usua io co espondien e y almacena la en la base de da os del sis ema
median e el mé odo c ea ().
Cuen a_Usua io es una clase en idad pa a ep esen a a un usua io conc e o, con un
a ibu o da os que ep esen a in o mación ace ca del usua io en cues ión. Además, la
clase Con olado a_Regis o se enca ga de mos a el o mula io de egis o y ecibi
los da os del mismo. La clase Validado comp ueba los da os ecibidos de la clase
UIFo mula io_Regis o, pa a e i ica que e ec i amen e los da os in oducidos son
co ec os ( e Ilus ación 65).
clien e DNS Balance
Apache2 Load Balance Apache2 Load Balance
Apache Tomca clus e 4 Apache Tomca clus e 4 Apache Tomca clus e 4 Apache Tomca clus e 4
DB Balance
MySQL clus e 3
MySQL clus e 3
MySQL clus e 3
Se ido Node.js Se ido Node.js
Usua io
Regis a seRegis a se
<< ace>>
55
Ilus ación 65: Diag ama de clases del diseño pa a caso de uso Regis a se.
 Caso de Uso Busca Amigos
Una ealización de caso de uso del diseño Busca Amigo p opo ciona una aza di ec a
a una ealización de caso de uso de análisis Busca Amigo en el modelo de análisis ( e
Ilus ación 66).
Ilus ación 66: Relación de azabilidad pa a el caso de uso Busca Amigo.
En el modelo de clases de diseño del caso de uso Busca Amigo, se iden i ica la clase
Con ol_Amigos en la cual se encuen a el mé odo busca Amigo (), dicho mé odo
localiza a los usua ios con el nomb e in oducido en el o mula io de búsqueda. Se
iden i ica la clase Lis a_Amigos a la cual se le añaden los amigos que el usua io haya
que ido ag ega , de ahí se gene a la clase Amigo con sus da os, po ejemplo Nomb e.
Se iene la clase Lis a_Resul ados, la cual con iene un lis ado con los con ac os dados
de al a en Webcam App que poseen el nomb e del usua io que se desea encon a .
También po úl imo la clase UIBuscado _Amigos que es la clase is a que se u iliza
pa a mos a los da os al usua io ( e Ilus ación 67).
Fo mula io
-Da os
+en ia Da os()
UIFo mula io_Regis o
Con olado a_Regis o
+gene a ()
+ ecibi ()
Con olado a_Usua ios
+c ea ()
Validado
+ alida ()
Cuen a_Usua io
-Da os
Busca AmigoBusca Amigo
<< ace>>
56
Ilus ación 67: Diag ama de clases del diseño pa a el caso de uso Busca Amigo.
 Caso de Uso Compa i Con enido
Una ealización de caso de uso del diseño Compa i Con enido p opo ciona una aza
di ec a a una ealización de caso de uso de análisis Compa i Con enido en el modelo
de análisis ( e Ilus ación 68).
Ilus ación 68: Relación de azabilidad pa a caso de uso Compa i Con enido.
En el modelo de diseño es á p esen e la clase Ges o _Con enido, que con iene los
mé odos almacena (), con el cual se almacena el con enido en la cuen a de usua io y
el mé odo ac ualiza (), que ac ualiza los a chi os del usua io después de ag ega el
con enido. La clase Ges o _Con enido iene elación con las clases Cuen a_Usua io y
Validado . La clase Cuen a_Usua io con iene los da os pe sonales de la cuen a del
usua io y sus a chi os. La clase Validado con iene el mé odo de alida (), que
comp ueba que el usua io puede compa i el con enido. La clase
UIFo mula io_Con enido con iene el mé odo ca ga Con enido (), dicha clase en ía los
da os a la clase Validado ( e Ilus ación 69).
UIBuscado _Amigos
Lis a_Amigos
+añadi ()
Amigo
-Nomb e
Con ol_Amigos
+busca Amigo()
Lis a_Resul ados
Compa i Con enido
Compa i Con enido << ace>>
57
Ilus ación 69: Diag ama de clases del diseño pa a el caso de uso Compa i Con enido.
 Caso de Uso Elimina Con enido
Una ealización de caso de uso del diseño Elimina Con enido p opo ciona una aza
di ec a a una ealización de caso de uso de análisis Elimina Con enido en el modelo
de análisis ( e Ilus ación 70).
Ilus ación 70: Relación de azabilidad pa a el caso de uso Elimina Amigo.
En el modelo de diseño del caso de uso Elimina Con enido es á la clase
Ges o _Con enido que con iene el mé odo elimina (), dicho mé odo sup ime el
con enido de la cuen a de usua io y el mé odo ac ualiza () que ac ualiza los a chi os
del usua io después de elimina el con enido. La clase Ges o _Con enido iene
elación con las clases Cuen a_Usua io y Mensaje_Con i mación. La clase
Cuen a_Usua io con iene los da os pe sonales de la cuen a del usua io y sus a chi os.
La clase Mensaje_Con i mación con iene el mé odo no i ica (), dicha clase le mues a
al usua io un mensaje pa a que el usua io con i me la eliminación ( e Ilus ación 71).
Validado
+ alida ()
Ges o _Con enido
+almacena ()
+ac ualiza ()
Cuen a_Usua io
-Da os
+A chi os
UIFo mula io_Con enido
+ca ga Con enido()
Elimina Con enidoElimina Con enido
<< ace>>
64
 Caso de Uso Compa i Con enido
Ilus ación 84: Diag ama de secuencia pa a el lujo no mal del caso de uso Compa i Con enido.
Ilus ación 85: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Compa i Con enido.
: Ges o _Con enido : UIFo mula io_Con enido : Validado
: Usua io Regis ado
: Cuen a_Usua io
1 : mues a()
2 : ca ga()
3 : en ia()
4 : de uel e()
5 : almacena()
: Ges o _Con enido : UIFo mula io_Con enido : Validado
: Usua io Regis ado
: Cuen a_Usua io
1 : mues a()
2 : ca ga()
3 : en ia()
4 : de uel e()
5 : ca gaE o ()

65
 Caso de Uso Elimina Con enido
Ilus ación 86: Diag ama de secuencia pa a el lujo no mal del caso de uso Elimina Con enido.
Ilus ación 87: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Elimina Con enido.
: Mensaje_Con i macion : UIFo mula io_Con enido : Ges o _Con enido : Cuen a_Usua io
: Usua io Regis ado 1 : mos a ()
2 : slecciona ()
3 : mos a ()
4 : acep aEliminacion()
5 : eliminaCon enido()
: Mensaje_Con i macion : UIFo mula io_Con enido : Ges o _Con enido : Cuen a_Usua io
: Usua io Regis ado 1 : mos a ()
2 : slecciona ()
3 : mos a ()
4 : cancelaEliminacion()
66
 Caso de Uso Elimina Cuen a Usua io
Ilus ación 88: Diag ama de secuencia pa a el lujo no mal del caso de uso Elimina Cuen a Usua io.
Ilus ación 89: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Elimina Cuen a
Usua io.
: Ges o _Ale as : Lis a_Ale as_Usua ios : UIRepo e_Ale as : Ges o _Usua ios : Cuen a_Usua io
: Usua io Adminis ado
1 : gene a()
2 : en ia()
3 : mues a()
4 : seleccionaElimina Usua io() 5 : eliminaCuen aUsua io()
: Ges o _Ale as : Lis a_Ale as_Usua ios : UIRepo e_Ale as : Ges o _Usua ios : Cuen a_Usua io
: Usua io Adminis ado
1 : gene a()
2 : en ia()
3 : mues a()
4 : seleccionaElimina Ale a() 5 : eliminaAle a()
67
 Caso de Uso Login
Ilus ación 90: Diag ama de secuencia pa a el lujo no mal del caso de uso Login.
Ilus ación 91: Diag ama de secuencia pa a el lujo no mal del caso de uso Login.
: UIFo mula io_Login : Ges o _Login : Cuen a_Usua io
: Validado
: Usua io Regis ado
1 : mues a()
2 : in oduceDa os()
3 : en ia()
4 : de uel e()
5 : accede()
: UIFo mula io_Login : Ges o _Login : Cuen a_Usua io : Validado
: Usua io Regis ado
1 : mues a()
2 : in oduceDa os()
3 : en ia()
4 : ca gaE o ()
68
 Caso de Uso Realiza Videollamada
Ilus ación 92: Diag ama de secuencia pa a el lujo no mal del caso de uso Realiza Videollamadas.
Ilus ación 93: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Realiza Videollamada.
: Ges ion_Videollamada : Ven ana_Videollamada : Panel_Videollamada : Ven ana_Dialogo : Cuen a_Usua io
: Usua io Regis ado : Usua io Regis ado
subsis ema : Se ido _Aplicaciones_He oku
1 : gene a ()
2 : en iaSolici ud() 3 : gene a()
4 : c ea Conexion()
5 : mos a Video() 6 : consul a ()
7 : genea ()
8 : no i ica()
9 : acep aSolici ud()
10 : edi ecciona()
: Ges ion_Videollamada : Ven ana_Videollamada : Panel_Videollamada : Ven ana_Dialogo : Cuen a_Usua io
: Usua io Regis ado : Usua io Regis ado
subsis ema : Se ido _Aplicaciones_He oku
1 : gene a ()
2 : en iaSolici ud() 3 : gene a()
4 : c ea Conexion()
5 : mos a Video() 6 : consul a ()
7 : genea ()
8 : no i ica()
9 : cancelaSolici ud()
69
 Caso de Uso Ges iona Pe il
Ilus ación 94: Diag ama de secuencia pa a el lujo no mal del caso de uso Ges iona Pe il.
Ilus ación 95: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Ges iona Pe il.
: UIFo mula io_Da os_Pe il : Ges o _Usua io : Validado : Cuen a_Usua io
: Usua io Regis ado 1 : ecibe()
2 : mues a()
3 : selecciona()
4 : en ia()
5 : de uel e()
6 : ac ualiza()
: UIFo mula io_Da os_Pe il : Ges o _Usua io : Validado : Cuen a_Usua io
: Usua io Regis ado 1 : ecibe()
2 : mues a()
3 : selecciona()
4 : en ia()
5 : ca gaE o ()

70
5.6 Implemen ación
5.6.1 P ime os pasos con CMS Elgg
Con el obje i o de desa olla una aplicación que además de ealiza ideollamadas, ue a
po en e en uncionalidades como la ges ión de usua ios, ges ión de con enidos, ges ión de
amigos, en e o as, se eligió Elgg, que p o ee uncionalidades especí icas pa a es os
eque imien os.
 ¿Po qué elegi lo?
Elgg es un manejado de con enidos de código abie o, con plugins de g an u ilidad, los
cuales de mane a muy po en e pe mi en c ea una ed social. Se pueden desa olla
plugins que cumplan con los eque imien os de los usua ios del si io web e
inco po a los de o ma muy sencilla. Es una he amien a bas an e segu a ya que
odos los obje os con enidos en el si io de Elgg ienen un ni el de con ol de acceso
con igu able.
 Modi icaciones en el CMS Elgg
Una ez cubie as es as uncionalidades, se necesi a desa olla un plugin pa a que el
usua io desde Elgg pueda ealiza ideollamadas a sus amigos. Pa a el desa ollo de
es a uncionalidad se modi icó el CMS Elgg. U ilizando unciones de jQue y, c eando
una nue a base de da os y a a és de uso de Ajax, se desa olla un plugin que
pe mi e:
 En el momen o en que un usua io decide ealiza una ideollamada a
alguno de sus amigos online, se esc ibe la pe ición en la base de da os.
 Después de esc i a la pe ición en la base de da os, con una unción que se
ejecu a cada 5 segundos y desde el clien e de los usua ios que se
encuen an conec ados, lee la base de da os y de ec a si algún usua io ha
hecho alguna pe ición de ideollamada.
 Una ez que lo an e io es de ec ado, el sis ema isualiza un cuad o de
diálogo desa ollado con jQue y, que simula al que mues an o os
sis emas de ideollamadas, pa a que el usua io que es á siendo llamado
con es e o echace la solici ud de ideollamada.
Elgg como o os manejado es de con enido, as su ins alación ac i a algunos plugins
que ienen en el núcleo del CMS. Pa a log a una mejo apa iencia y mejo a algunas
uncionalidades, se equi ió la ins alación de algunos plugins desca gados del si io web
o icial de Elgg, los cuales se nomb an a con inuación:
 In i e F iends
Plugin que pe mi e que las solici udes de amis ad se manejen ipo Facebook,
es deci , que un usua io en íe una solici ud a o o y pa a que puedan se
amigos en la aplicación el o o debe acep a dicha in i ación. De o o modo no
end án una elación de amis ad y solo se pod á accede a los da os que los
usua ios compa an como público y a las uncionalidades gene ales en e
usua ios.
 GalliS a us
El CMS a pesa de in o ma nos cuales son los usua ios que es án en línea, no lo
hace como o as edes sociales, po lo que el plugin GalliS a us pe mi e sabe
el es ado en el que se encuen a el usua io en la aplicación, en línea o
desconec ado, mos ando un icono e de sob e las o os de pe il de los
usua ios.
71
 Pea l P emium Theme
Plugin que pe mi e modi ica la apa iencia del si io. Tema que hace más
ag adable la p esen ación de los da os con el buen diseño que plan ea y con
ca ac e ís icas de las aplicaciones adicionales.
5.6.2 Lo más impo an e es á po llega . WebRTC y HTML5
Es necesa io desa olla un sis ema que pueda conec a a dos usua ios a a és de sus
espec i as webcams. Pa a es o se necesi a implemen a una pequeña aplicación en
Ja aSc ip y HTML5, que pe mi a u iliza los elemen os que b inda HTML5 pa a da
sopo e al audio y el ideo. Además, es necesa io u iliza las lib e ías de webRTC:
MediaS eam y RTCPee Connec ion, que son undamen ales pa a la c eación de un
sis ema de ideocon e encias. Aho a bien, un sis ema de ideocon e encias necesi a
un se ido como p o eedo de comunicación en iempo eal, lo cual es muy limi ado
si se usa Apache, es a pa e de la aplicación se ha desa ollado en ocada a o o
se ido , Node.js.
 ¿Po qué Node.js?
Apache c ea un nue o hilo po cada conexión clien e-se ido . Es o unciona bien pa a
pocas conexiones, pe o c ea nue os hilos es algo cos oso, así como los cambios de
con ex o. Apache unciona bien pe o no es el mejo se ido pa a log a máxima
concu encia. Uno de los pun os ue es de Node.js es su capacidad de man ene
muchas conexiones abie as y espe ando, po lo que su uso es ideal pa a que miles de
usua ios es én en iando pe iciones de ideollamadas. Además de lo explicado
an e io men e, pa a un sis ema de ideollamadas sob e HTML5 se necesi a un se ido
de señalización, el cual se puede cons ui con el módulo Socke s.io de Node.js po que
las APIs de webRTC no p o een de es e mecanismo.
5.6.3 In eg a las dos aplicaciones pa a que pa ezcan una
Tan o el usua io que ealiza la solici ud de ideollamada como el usua io que acep a la
ideollamada, son edi igidos al se ido de aplicaciones He oku, es deci , los usua ios
no deben usa las dos aplicaciones po sepa ado, cada usua io puede usa los
po enciales que o ece Elgg y en el momen o que desee ealiza una ideollamada el
mismo CMS lo ayuda á a conec a se al se ido He oku de o ma anspa en e.
72
5.7 P uebas
Es necesa io ealiza p uebas pa a con los esul ados ob enidos de las mismas pode e i ica si
el sis ema cumple o no con los eque imien os plan eados en el inicio del desa ollo. Las
p uebas ealizadas se basan en el uncionamien o de las APIs de WebRTC, HTML5 y Node.js.
También, son ejecu adas con el obje i o de comp oba que la señalización se lle a a cabo
co ec amen e y que dos usua ios con es e se ido pueden in e cambia en e sí audio y
ideo en iempo eal.
Luego de desca ga el Node.js del si io web o icial www.nodejs.o g, el p óximo paso es ealiza
la ins alación. Una ez ins alado, debe con igu a se el a chi o se e .js o app.js.
Pos e io men e, se in oducen los iche os Ja asc ip , HTML y CSS que con ienen el código de
la aplicación desa ollada, den o de la ca pe a del se ido Node.js. Una ez ealizada oda la
con igu ación pe inen e, se inicia el se ido , lo cual se ealiza de la siguien e mane a ( e
Ilus ación 96).
Ilus ación 96: CMD de Windows pa a ac i a se ido de Node.js.
Ya ac i ado el se ido Node.js, solo es a ab i el na egado . Se in oduce la di ección, el
pue o y los pa áme os eque idos ( e Ilus ación 97).
Ilus ación 97: Cap u ando ideo desde la webcam a a és de las APIs de WebRTC y HTML5 con
Node.js como se ido de aplicaciones.
Una ez llegado a es e pun o y pa a comp oba que dos usua ios pueden in e cambia
in o mación, es a esc ibi exac amen e la misma URL que se colocó an e io men e en o a
en ana del na egado , lo cual simula que es o o usua io que es á in en ado conec a se con el
p ime usua io que c eó la conexión.
73
Como se ha podido comp oba , el se ido unciona co ec amen e ya que ambos usua ios
in e cambian sus ideos a a és de las APIs de webRTC, usando los elemen os de HTML5 pa a
el manejo de mul imedia, odo es o u ilizando el se ido Node.js ( e Ilus ación 98).
Ilus ación 98: Realizando ideollamada en el se ido local sa is ac o iamen e.
80
 Email Add ess: es la di ección de co eo elec ónico con la cual se desea egis a se en
el si io y donde se en ia án las no i icaciones del mismo.
 Passwo d: en es e campo se debe in oduci la con aseña con la cual se accede á a la
cuen a que se c ea á as habe inalizado el egis o.
 Passwo d (again o e i ica ion): es e es un campo de e i icación, pa a comp oba
que se ha in oducido co ec amen e la con aseña que se desea ( e Ilus ación 101).
Ilus ación 101: Página de egis o.
Cuando el egis o es é inalizado, se puede empeza a hace uso de odas las uncionalidades
que b inda Webcam App, en e las cuales es á la de localiza a los amigos que es án
egis ados en el si io. Pa a ello, se accede a la opción del menú Membe s, donde se mues a
un lis ado con los miemb os que es án dados de al a en el si io ( e Ilus ación 102 y 103).

81
Ilus ación 102: Lis ado de usua ios egis ados.
Ilus ación 103: Panel de búsqueda.
Es necesa io in oduci el nomb e del amigo que se desea busca en el campo de ex o y
p esiona el bo ón Sea ch. La aplicación mos a á un lis ado con las usua ios encon ados con
el nomb e in oducido, dando la opción de añadi lo como amigo en Webcam App a a és del
bo ón Add F iend ( e Ilus ación 104).
Ilus ación 104: Resul ados de la búsqueda de usua ios
Mien as la pe sona que desea llama no acep e su solici ud de amis ad, no se pod á ealiza
ideollamadas con dicha pe sona ( e Ilus ación 105).
82
Ilus ación 105: Pe il de un usua io que no ha acep ado la solici ud de amis ad.
Una ez que el usua io acep e su solici ud de amis ad, se end á disponible odas las
uncionalidades incluida la de en ia le una solici ud de ideollamada ( e Ilus ación 106).
Ilus ación 106: Pe il de un usua io que acep ó la solici ud de amis ad
Po úl imo, queda en ia la solici ud de ideollamada y espe a que el usua io la acep e pa a
pode comunica se e in e cambia los ideos ob enidos desde la webcam ( e Ilus ación 107).
Ilus ación 107: Ven ana de diálogo que se mues a a los usua ios cuando eciben una solici ud de
ideollamadas.
83
Una ez que el usua io amigo acep e la solici ud la ideollamada queda es ablecida ( e
Ilus ación108).
Ilus ación 108: Videollamada es ablecida en e dos usua ios a a és de la aplicación Webcam App.
84
Anexo IV: En o no de Desa ollo
 Ins alación de Elgg
Pa a la ins alación de Elgg es necesa io dos componen es esenciales, el p ime o es el
CMS Elgg en sí, el cual se puede desca ga del si io web o icial www.elgg.o g y como
cualquie o o CMS necesi a un en o no de desa ollo web, en e los más u ilizados
pa a Windows se iene el Wamp y pa a Linux el Xamp. En es e caso se u iliza Wamp.
 ¿Qué acilidades b inda Wamp?
Wamp p o ee de los cua o elemen os esenciales a la ho a de cons ui un si io web:
un sis ema ope a i o (Windows), un manejado de base de da os (MySQL), un
so wa e pa a se ido web (Apache) y el sopo e a un lenguaje de p og amación del
lado del se ido (eje PHP).
Luego de ene ins alado el Wamp en el o denado , se con inúa con la ins alación del Elgg. Lo
p ime o que se debe hace es copia la ca pe a de Elgg pa a el se ido Wamp, den o de la
ca pe a /www y a a de accede al se ido a a és del na egado con la di ección
h p://localhos :pue o, en es e caso el se ido web es á con igu ado pa a que escuche en el
pue o 88 ( e Ilus ación 109 y 110).
Ilus ación 109: Página de inicio del se ido Wamp.
Ilus ación 110: Página de ins alación de Elgg.
85
Como los demás CMS, Elgg necesi a la c eación de una base de da os, la cual se c ea con el
ges o de base da os MySQL, que b inda Wamp. La base de da os se c ea de la siguien e
mane a: se accede al se ido a a és del na egado y se selecciona la opción phpmyadmin,
ubicada en la pa e in e io de la página de inicio del Wamp ( e Ilus ación 111).
Ilus ación 111: Acceso a phpmyadmin a a és de la página de inicio de Wamp.
De es a mane a se accede a phpMyAdmin, que no es más que una página en php pa a
ges iona la base de da os a a és del na egado ( e ilus ación 112).
Ilus ación 112: C eación de base de da os en phpMyAdmin.
De es a mane a se c ea la base de da os, aho a solo es a c ea un usua io con odos los
p i ilegios sob e ella.
Du an e el p oceso de ins alación de Elgg, solici a p opo ciona el nomb e de la base de da os
y el nomb e de usua io con odos los p i ilegios, pa a que al comple a la ins alación se
puedan gene a odas las ablas y da os que ae consigo Elgg.
Pa a da le las uncionalidades adecuadas a la aplicación Webcam App, se u ilizan algunos
plugins especí icos. Es os plugins ayudan a que el usua io alcance un al o ni el de usabilidad,
pues apo an unciones simila es a las que ienen o as edes sociales conocidas a escala
mundial, la más des acada en e ellas es Facebook.
Pa a ins ala un plugin en la aplicación, debe copia se el plugin den o de la ca pe a /mod del
di ec o io aíz del CMS y luego accede al panel de adminis ación del si io web en el apa ado
Plugins y selecciona la opción Ac i a e (Ve Ilus ación 113 y 114).

86
Ilus ación 113: Acceso al panel de adminis ación de plugins
Ilus ación 114: P oceso de ac i ación de un plugin.
 Publicación de la aplicación en un se ido de hos ing en In e ne
Luego de habe ins alado el CMS co ec amen e, ac i ados y con igu ados los plugins
necesa ios, se p ocede a la publicación del si io web en un se ido de hos ing en
in e ne . Pa a es o se escoge 000webhos , el cual es un se ido de hos ing g a ui o y
ácil de usa .
Lo p ime o es c ea se una cuen a en la página web www.000webhos .com, luego
accede al panel de con ol del si io web. Una ez allí, se c ea una base da os de igual
mane a que se hizo pa a el si io que se c ea en local, se expo a la base de da os que
se encuen a en el o denado y se impo a a la base de da os del se ido de hos ing.
Una ez hecho es o, queda indica le al si io web los da os de la nue a base da os,
pues o que ya no es a á local, aho a debe encon a se en el se ido 000webhos ,
como en odos los CMS, se localiza el a chi o se ings.php, que es el que con iene
en e o as cosas los da os pa a la conexión a la base de da os y se modi ican los
alo es po los nue os pa áme os.
Pa a inaliza la publicación del si io, se copia a a és de un clien e p o a a és del
que b inda 000webhos en su página web odos los a chi os del si io local a la ca pe a
public_h ml en el se ido de hos ing.
Aho a bien, el si io web es á publicado en un se ido de hos ing en in e ne pe o aún
no se puede na ega po él, pues es necesa io un nomb e de dominio. Pa a es o el
usua io debe di igi se al si io www.do . k, en el cual se egis a y puede ob ene un
nomb e de dominio de o ma g a ui a si es á disponible (ejemplo:
www.webcamapp. k). Luego de habe ob enido el nomb e de dominio, solo es a
en a al panel de con igu ación e indica le la di ección de Hos Name que b inda
000webhos ( e Ilus ación 115).
87
Ilus ación 115: Panel de adminis ación del dominio en do .TK
Llegado a es e pun o, el si io web se encuen a publicado en un se ido de hos ing y
con un nomb e de dominio a a és del cual se puede accede a él. Se coloca el
nomb e de dominio c eado en el na egado y se puede en a ácilmen e ( e
Ilus ación 116).
Ilus ación 116: Webcam App desplegado en el se ido de hos ing
 Con igu ación de Node.js del lado del se ido
Node.js no es como o os se ido es web, necesi a una con igu ación manual del
iche o Ja aSc ip que se ejecu a en el se ido llamado app.js ó se e .js. Algo
llama i o puede se que si exis e o o se ido web, po ejemplo el Apache
escuchando en el pue o 88, se debe in oduci un pue o di e en e pa a que escuche
el Node.js (ejemplo 8888) ( e Ilus ación 117).
88
Ilus ación 117: Con igu ación del iche o se e .js en el se ido .
En es e caso se a a abaja con el módulo Socke s.io po lo que es necesa ia la
con igu ación del mismo.
Con las salas ( ooms) de Socke s.io, se puede en ia mensajes a un g upo de usua ios
de e minados, que se ían los clien es que es án conec ados a ellas. Con el siguien e
agmen o de código, se de ine con quien se á el in e cambio de mensajes. Con la
unción b oadcas , se puede especi ica quien se desea que eciba los mensajes que el
clien e en íe, pa a es e caso los mensajes se en ían y se eciben po los usua ios que
es én conec ados a la misma sala ( oom), aunque bien pod ía con igu a se pa a odas
las salas de la aplicación. Si se quisie a manda un mensaje de mul idi usión a odos
los usua ios, pa a eso se u iliza socke .b oadcas .emi (‘message’, message) ( e
Ilus ación 118).
Ilus ación 118: De inición de des ina a io de los mensajes.
 Con igu ación del lado del clien e
Una ez con igu ado el se ido , es necesa ia una con igu ación en el clien e pa a que
pueda comunica se con el mismo y pode in e cambia los mensajes, una sencilla
con igu ación pod ía se es a ( e Ilus ación 119).
Ilus ación 119: Con igu ación en el clien e.
Una ez que ambos usua ios es én conec ados a la misma sala ( oom), es donde en a
la API de webRTC, RTCPee Connec ion. Pa a log a que ambos log en in e cambia el
ideo que ob ienen desde su webcam, hay que incula es as unciones con socke .io,
el cual se enca ga del en ío de mensajes. Con la siguien e unción, dos usua ios
pueden es ablece sus emo eDesc ip ion con la desc ip ion que eciban del o o
usua io y así pos e io men e pode in e cambia sus ideos ob enidos desde la
webcam. Con la API MediaS eam, a a és de la unción que es á ac ualmen e
disponible en Google Ch ome, Mozilla Fi e ox y Ope a, de inida como ge Use Media(),
de una o ma muy sencilla se puede ob ene mul imedia e inc us a la en el elemen o
ideo de HTML5.
89
Pa a aplicaciones publicadas en in e ne o pa a la comunicación con usua ios que
es én ue a de una ed local, es necesa io añadi se ido es que pe mi en que un hos
inal pueda descub i la di ección IP pública si se encuen a de ás de un NAT, du an e
la implemen ación del API RTCPee Connec ion ( e Ilus ación 120 y 121).
Ilus ación 120: Añadiendo se ido es.
Ilus ación 121: C eación de una Pee Connec ion.
 APIs de webRTC u ilizadas en la aplicación.
 MediaS eam (ge Use Media): La cual se u iliza pa a accede a los da os de los
usua ios (ejemplo: el ideo o el audio ob enidos desde la webcam).
 RTCPee Connec ion: Es a API pe mi e que a dos pe sonas comunica se
di ec amen e a a és del na egado , usando un canal de señalización, el cual
no es á especi icado en es a API.
 Po encialidades de HTML5
En la ac ualidad, la mayo ía de los na egado es mues an ideos a a és de un plugin
(ejemplo lash), cla amen e no es una solución que esuel a odos los p oblemas, ya
que los na egado es pueden ene di e en es plugins, lo cual conlle a a que los ideos
inc us ados en la web no es én siemp e disponibles pa a odos los usua ios. Con la
apa ición de HTML5, se de ine un nue o elemen o que especi ica un mé odo es ánda
pa a inc us a un ídeo / película en una página web: el elemen o < ideo>. A
con inuación se mues an los na egado es que sopo an HTML5 ( e Ilus ación 122).
Ilus ación 122: Na egado es que sopo an HTML5