Universidad del Azuay

Facultad de Ciencias de la Administracin

Escuela de Ingeniera de Sistemas

Desarrollo de aplicaciones web mediante HTML5 y la base de datos NoSQL MONGO DB.

Tesis previo a la obtencin del ttulo de Ingeniero en Sistemas.

Autor: Henry Daniel Campoverde Borja

Director: Ing. Pablo Esquivel Len

Cuenca, Ecuador 2012

DEDICATORIA:

A mis padres: Hernn y Ana, a mis hermanos: Hernn, Viviana, por su

Geovanny e Ismael

sacrificio y apoyo incondicional, a mis sobrinos: Pal, Valeria y Sofa por darme la fuerza para seguir cada da adelante, y a toda la gente que ha sido parte de mi vida estudiantil durante todo el tiempo.

ii

AGRADECIMIENTO:

Expreso mi agradecimiento a la Universidad del Azuay, a la Escuela de Ingeniera de Sistemas, a todos los colaboradores y cordiales amigos; de manera especial a mi director el Ing. Pablo Esquivel Len, por su apoyo en el transcurso de mi formacin acadmica, y por brindarme su amistad desinteresada.

iii

RESUMEN

HTML desde su primera versin descrita tiempo atrs, ha ido evolucionando hasta llegar a su actual versin HTML5. Este proyecto de tesis est basado en aquella nueva versin, desarrollando as una aplicacin web orientada a redes sociales, con el objetivo de exponer los cambios y mejoras que han surgido en HTML5, agregando funcionalidades de JavaScript que han surgido a la par con HTML5 y aadiendo una nueva alternativa para el almacenamiento de datos como lo es MongoDB, una base de datos NoSQL, que intenta solventar limitaciones del modelo relacional al momento de trabajar con una cantidad masiva de datos.

iv

NDICE DE CONTENIDOS

Dedicatoria .............................................................................................................. ii Agradecimiento ....................................................................................................... iii Resumen .................................................................................................................. iv Abstract ................................................................................................................... v ndice de contenidos ................................................................................................ 1 ndice de ilustraciones ............................................................................................. 7 ndice de tablas ........................................................................................................ 16 Introduccin ............................................................................................................ 18 CAPTULO 1 HTML5 ......................................................................................... 20 1.1 Introduccin.................................................................................................. 20 1.2 Qu es html5? ............................................................................................. 20 1.3 Compatibilidad en los navegadores .............................................................. 21 1.3.1 Navegadores ms comunes de escritorio .............................................. 22 1.3.2 Navegadores ms comunes en tabletas (tablets) ................................... 22 1.3.3 Navegadores ms comunes en mviles (mobiles) ................................ 23 1.3.4 Navegadores ms comunes en juegos (gaming) ................................... 23 1.3.5 Navegadores ms comunes en televisiones .......................................... 24 1.4 Sintaxis html5 .............................................................................................. 24 1.4.1 La declaracin del tipo de documento (doctype) .................................. 24 1.4.2 Qu es un elemento? ........................................................................... 25 1.4.3 Qu son los atributos? ......................................................................... 27 1.4.3.1 Atributos globales ......................................................................... 28 1.4.3.1.1 Atributos esenciales............................................................... 28 1.4.3.1.2 Atributos de eventos .............................................................. 29 1.5 Elementos html5. .......................................................................................... 32 1.5.1 El elemento raz .................................................................................... 33 1.5.1.1 Html .............................................................................................. 33 1.5.2 Documento de metadatos ...................................................................... 34 1.5.2.1 Head .............................................................................................. 34 1.5.2.2 Title ............................................................................................... 35 1.5.2.3 Base ............................................................................................... 36 1.5.2.4 Link ............................................................................................... 37 1.5.2.5 Meta .............................................................................................. 38 1.5.2.6 Style .............................................................................................. 39 1.5.3 Scripting................................................................................................ 41 1.5.3.1 Script ............................................................................................. 41 1.5.3.2 Noscript ........................................................................................ 42 1.5.4 Secciones ............................................................................................. 43 1.5.4.1 Body ............................................................................................. 43 1.5.4.2 Article .......................................................................................... 46 1.5.4.3 Section.......................................................................................... 47 1.5.4.4 Nav ............................................................................................... 49 1.5.4.5 Aside ............................................................................................ 50 1.5.4.6 H1, h2, h3, h4, h5, h6................................................................... 51 1

1.5.4.7 Hgroup ......................................................................................... 52 1.5.4.8 Header .......................................................................................... 53 1.5.4.9 Footer ........................................................................................... 54 1.5.4.10 Address ...................................................................................... 55 1.5.5 Agrupacin de contenido ..................................................................... 56 1.5.5.1 P ................................................................................................... 56 1.5.5.2 Hr ................................................................................................. 57 1.5.5.3 Pre ................................................................................................ 58 1.5.5.4 Blockquote ................................................................................... 59 1.5.5.5 Ol.................................................................................................. 60 1.5.5.6 Ul.................................................................................................. 61 1.5.5.7 Li .................................................................................................. 62 1.5.5.8 Dl.................................................................................................. 62 1.5.5.9 Dt.................................................................................................. 63 1.5.5.10 Dd ............................................................................................... 64 1.5.5.11 Figure ......................................................................................... 65 1.5.5.12 Figcaption .................................................................................. 66 1.5.5.13 Div.............................................................................................. 66 1.5.6 Semntica nivel-texto .......................................................................... 67 1.5.6.1 A.................................................................................................... 67 1.5.6.2 Em ................................................................................................ 69 1.5.6.3 Strong ........................................................................................... 70 1.5.6.4 Small ............................................................................................ 70 1.5.6.5 S ................................................................................................... 71 1.5.6.6 Cite ............................................................................................... 72 1.5.6.7 Q................................................................................................... 72 1.5.6.8 Dfn ............................................................................................... 73 1.5.6.9 Abbr ............................................................................................. 74 1.5.6.10 Time ........................................................................................... 75 1.5.6.11 Code ........................................................................................... 75 1.5.6.12 Var.............................................................................................. 76 1.5.6.13 Samp .......................................................................................... 77 1.5.6.14 Kbd............................................................................................. 77 1.5.6.15 Sub ............................................................................................. 78 1.5.6.16 Sup ............................................................................................. 79 1.5.6.17 I .................................................................................................. 79 1.5.6.18 B ................................................................................................. 80 1.5.6.19 U................................................................................................. 81 1.5.6.20 Mark ........................................................................................... 81 1.5.6.21 Ruby ........................................................................................... 82 1.5.6.22 Rt ................................................................................................ 83 1.5.6.23 Rp ............................................................................................... 83 1.5.6.24 Bdi .............................................................................................. 84 1.5.6.25 Bdo ............................................................................................. 85 1.5.6.26 Span............................................................................................ 85 1.5.6.27 Br................................................................................................ 86 1.5.6.28 Wbr ............................................................................................ 86 1.5.7 Ediciones.............................................................................................. 87 1.5.7.1 Ins ................................................................................................. 87 1.5.7.2 Del ................................................................................................ 88 2

1.5.8 Contenido incrustado (embebido)........................................................ 89 1.5.8.1 Img ............................................................................................... 89 1.5.8.2 Iframe ........................................................................................... 91 1.5.8.3 Embed .......................................................................................... 92 1.5.8.4 Object ........................................................................................... 93 1.5.8.5 Param ........................................................................................... 95 1.5.8.6 Video ............................................................................................ 96 1.5.8.7 Audio............................................................................................ 98 1.5.8.8 Source .......................................................................................... 100 1.5.8.9 Track ............................................................................................ 101 1.5.8.10 Canvas ........................................................................................ 102 1.5.8.11 Map ............................................................................................ 103 1.5.8.12 Area ............................................................................................ 104 1.5.9 Datos tabulares..................................................................................... 107 1.5.9.1 Table ............................................................................................ 107 1.5.9.2 Caption ......................................................................................... 108 1.5.9.3 Colgroup ...................................................................................... 109 1.5.9.4 Col ................................................................................................ 110 1.5.9.5 Tbody ........................................................................................... 111 1.5.9.6 Thead............................................................................................ 112 1.5.9.7 Tfoot ............................................................................................. 113 1.5.9.8 Tr .................................................................................................. 113 1.5.9.9 Td ................................................................................................. 114 1.5.9.10 Th ............................................................................................... 115 1.5.10 Formularios ........................................................................................ 116 1.5.10.1 Form ........................................................................................... 116 1.5.10.2 Fieldset ....................................................................................... 118 1.5.10.3 Legend........................................................................................ 119 1.5.10.4 Label .......................................................................................... 120 1.5.10.5 Input ........................................................................................... 121 1.5.10.5.1 Input (type=hidden) ............................................................. 125 1.5.10.5.2 Input (type=text).................................................................. 126 1.5.10.5.3 Input (type=search) ............................................................. 127 1.5.10.5.4 Input (type=tel).................................................................... 128 1.5.10.5.5 Input (type=url) ................................................................... 129 1.5.10.5.6 Input (type=email) ............................................................... 129 1.5.10.5.7 Input (type=password) ........................................................ 130 1.5.10.5.8 Input (type=datetime) .......................................................... 131 1.5.10.5.9 Input (type=date) ................................................................. 132 1.5.10.5.10 Input (type=month) ........................................................... 133 1.5.10.5.11 Input (type=week) ............................................................. 134 1.5.10.5.12 Input (type=time) .............................................................. 134 1.5.10.5.13 Input (type=datetime-local) ............................................... 135 1.5.10.5.14 Input (type=number) ......................................................... 136 1.5.10.5.15 Input (type=range) ............................................................. 137 1.5.10.5.16 Input (type=color) ............................................................. 138 1.5.10.5.17 Input (type=checkbox) ...................................................... 138 1.5.10.5.18 Input (type=radio) ............................................................. 139 1.5.10.5.19 Input (type=file) ................................................................ 140 1.5.10.5.20 Input (type=submit) ........................................................... 140 3

1.5.10.5.21 Input (type=image) ............................................................ 141 1.5.10.5.22 Input (type=reset) .............................................................. 142 1.5.10.5.23 Input (type=button) ........................................................... 142 1.5.10.6 Button ......................................................................................... 143 1.5.10.7 Select .......................................................................................... 144 1.5.10.8 Datalist ....................................................................................... 146 1.5.10.9 Optgroup .................................................................................... 147 1.5.10.10 Option ..................................................................................... 148 1.5.10.11 Textarea.................................................................................... 149 1.5.10.12 Keygen .................................................................................... 151 1.5.10.13 Output ..................................................................................... 152 1.5.10.14 Progress ................................................................................... 153 1.5.10.15 Meter ....................................................................................... 154 1.5.11 Elementos interactivos ....................................................................... 155 1.5.11.1 Details ...................................................................................... 155 1.5.11.2 Summary.................................................................................. 156 1.5.11.3 Command ................................................................................ 156 1.5.11.4 Menu ........................................................................................ 158 CAPTULO 2 MONGODB .................................................................................. 160 2.1 Introduccin................................................................................................. 160 2.2 Qu es Nosql? ............................................................................................ 160 2.3 Qu es Mongodb? ...................................................................................... 161 2.4 Instalacin de Mongodb .............................................................................. 166 2.4.1 Instalacin en Windows ....................................................................... 166 2.4.2 Instalacin en Linux ............................................................................ 172 2.5 Php con Mongodb ....................................................................................... 175 2.5.1 Instalacin del controlador .................................................................. 175 2.5.1.1 Instalacin en Windows ............................................................... 175 2.5.1.2 Instalacin en Linux ..................................................................... 176 2.5.2 Conexin .............................................................................................. 176 2.5.3 Seleccionar una base de datos y una coleccin. .................................. 178 2.5.4 Operaciones de escritura ...................................................................... 178 2.5.4.1 Insertar documentos ..................................................................... 179 2.5.4.2 Actualizar documentos................................................................. 181 2.5.4.2.1 Actualizaciones de modificacin ......................................... 182 2.5.4.2.2 Actualizaciones de reemplazo .............................................. 189 2.5.4.3 Eliminar documentos ................................................................... 190 2.5.4.4 Eliminar coleccin ....................................................................... 191 2.5.4.5 Eliminar base de datos ................................................................. 191 2.5.5 Consultas ............................................................................................. 191 2.5.6 Manejo de archivos .............................................................................. 198 2.5.7 Seguridad ............................................................................................. 202 2.5.7.1 Ataques de inyeccin de cdigo .................................................. 202 2.5.7.2 Operaciones seguras..................................................................... 203 CAPTULO 3 HERRAMIENTAS UTILIZADAS EN LA APLICACIN ..... 204 3.1 Introduccin................................................................................................. 204 3.2 Libreras Javascript...................................................................................... 204 3.2.1 Jquery................................................................................................... 204 3.2.2 Jquery UI ............................................................................................. 206 3.2.3 Tablesorter ........................................................................................... 206 4

3.2.4 Printarea ............................................................................................... 207 3.2.5 Keyboard.............................................................................................. 207 3.3 Bootstrap ..................................................................................................... 208 3.4 API's Javascript ........................................................................................... 210 3.4.1 Audio y video ....................................................................................... 211 3.4.2 Canvas................................................................................................... 212 3.4.3 Geolocation ........................................................................................... 222 3.4.4 Web storage .......................................................................................... 224 3.4.5 Web sql database .................................................................................. 226 3.4.6 Drag and drop ....................................................................................... 230 3.4.7 Web workers ......................................................................................... 235 3.4.8 Webnotifications ................................................................................... 236 3.5 Nodejs ........................................................................................................... 240 CAPTULO 4 MANUAL DE USO DE LA APLICACIN WEB .................... 242 4.1 Introduccin.................................................................................................. 242 4.2 Descripcin de la aplicacin......................................................................... 242 4.3 Manual para usuarios.................................................................................... 243 4.3.1 Pgina de inicio..................................................................................... 243 4.3.1.1 Registrarse..................................................................................... 244 4.3.1.2 Informacin sobre la aplicacin .................................................... 246 4.3.1.3 Iniciar sesin ................................................................................. 248 4.3.2 Pgina principal de usuarios ................................................................. 250 4.3.2.1 Contenidos .................................................................................... 250 4.3.2.2 Men superior ............................................................................... 252 4.3.2.2.1 Botn nombre de usuario ...................................................... 252 4.3.2.2.2 Botn Ver mi perfil ............................................................... 252 4.3.2.2.3 Buscador de usuarios personas ........................................... 253 4.3.2.2.4 Botn inicio ........................................................................... 255 4.3.2.2.5 Botn cerrar sesin ................................................................ 255 4.3.2.3 Men izquierdo ............................................................................. 255 4.3.2.3.1 Foto de perfil ......................................................................... 257 4.3.2.3.2 Funcin Noticias ................................................................... 258 4.3.2.3.3 Funcin Mi cuenta ................................................................. 259 4.3.2.3.4 Funcin Personalizacin ....................................................... 264 4.3.2.3.5 Funcin Servicios .................................................................. 266 4.3.2.3.6 Funcin Fotos ........................................................................ 268 4.3.2.3.7 Funcin Contactos ................................................................. 272 4.3.2.3.8 Funcin Mensajes .................................................................. 273 4.3.2.3.9 Funcin Ubicacin ................................................................ 274 4.3.2.3.11 Funcin Entretenimiento ..................................................... 285 4.3.2.4 Barra de informacin .................................................................... 286 4.3.2.5 Herramienta de chat ...................................................................... 287 4.3.3 Perfil visible a los dems usuarios ........................................................ 291 4.3.3.1 Botn agregar/eliminar contacto: .................................................. 291 4.3.3.2 Foto de perfil: ................................................................................ 292 4.3.3.3 Contenido: ..................................................................................... 292 4.3.3.4 Men de navegacin: .................................................................... 293 4.4 Manual para administrador ........................................................................... 296 4.4.1 Pgina de inicio..................................................................................... 296 4.4.1.1 Identificarse................................................................................... 296 5

4.4.2 Pgina principal .................................................................................... 298 4.4.2.1 Tabla de reportes generada ........................................................... 298 4.4.2.2 Tipos de reportes ........................................................................... 298 4.4.2.2.1 Reporte por usuario ............................................................... 299 4.4.2.2.2 Reporte por fecha especfica ................................................. 300 4.4.2.2.3 Reporte por mes y ao especfico ......................................... 301 4.4.2.2.4 Reporte total .......................................................................... 302 4.4.2.3 Cantidad de usuarios registrados .................................................. 303 4.4.2.4 Salir del administrador .................................................................. 304 Conclusiones ........................................................................................................... 305 Recomendaciones .................................................................................................... 306 Bibliografa ............................................................................................................. 307 Referencias electrnicas: .................................................................................... 307

NDICE DE ILUSTRACIONES

Imagen 1. Doctype html5 ........................................................................................ 25 Imagen 2. rbol DOM HTML5 .............................................................................. 25 Imagen 3. Estructura de los Elementos HTML....................................................... 28 Imagen 4. Ejemplo elemento html. ......................................................................... 34 Imagen 5. Ejemplo elemento head. ......................................................................... 35 Imagen 6. Ejemplo elemento title. .......................................................................... 36 Imagen 7. Ejemplo elemento base. ......................................................................... 37 Imagen 8. Ejemplo elemento link. .......................................................................... 38 Imagen 9. Ejemplo elemento meta. ......................................................................... 39 Imagen 10. Ejemplo elemento style. ....................................................................... 40 Imagen 11. Ejemplo elemento script. ...................................................................... 42 Imagen 12. Ejemplo elemento noscript. .................................................................. 43 Imagen 13. Ejemplo elemento body........................................................................ 45 Imagen 14. Ejemplo elemento article...................................................................... 47 Imagen 15. Ejemplo elemento section. ................................................................... 48 Imagen 16. Ejemplo elemento nav. ......................................................................... 49 Imagen 17. Ejemplo elemento aside. ...................................................................... 51 Imagen 18. Ejemplo elementos h1, h2, h3, h4, h5, h6. ........................................... 52 Imagen 19. Ejemplo elemento hgroup. ................................................................... 53 Imagen 20. Ejemplo elemento header. .................................................................... 54 Imagen 21. Ejemplo elemento footer. ..................................................................... 55 Imagen 22. Ejemplo elemento address.................................................................... 56 Imagen 23. Ejemplo elemento p.............................................................................. 57 Imagen 24. Ejemplo elemento hr. ........................................................................... 58 Imagen 25. Ejemplo elemento pre. ......................................................................... 59 Imagen 26. Ejemplo elemento blockquote. ............................................................. 60 Imagen 27. Ejemplo elemento ol. ........................................................................... 61 Imagen 28. Ejemplo elemento ul. ........................................................................... 61 Imagen 29. Ejemplo elemento li. ............................................................................ 62 Imagen 30. Ejemplo elemento dl. ........................................................................... 63 Imagen 31. Ejemplo elemento dt. ........................................................................... 64 Imagen 32. Ejemplo elemento dd............................................................................ 65 Imagen 33. Ejemplo elemento figure. ..................................................................... 66 Imagen 34. Ejemplo elemento div. ......................................................................... 67 Imagen 35. Ejemplo elemento a. ............................................................................. 69 Imagen 36. Ejemplo elemento em. .......................................................................... 69 Imagen 37. Ejemplo elemento strong...................................................................... 70 Imagen 38. Ejemplo elemento small. ...................................................................... 71 Imagen 39. Ejemplo elemento s. ............................................................................. 71 Imagen 40. Ejemplo elemento cite. ......................................................................... 72 Imagen 41. Ejemplo elemento q.............................................................................. 73 Imagen 42. Ejemplo elemento dfn. ......................................................................... 74 Imagen 43. Ejemplo elemento abbr. ....................................................................... 74 Imagen 44. Ejemplo elemento time. ....................................................................... 75 7

Imagen 45. Ejemplo elemento code. ....................................................................... 76 Imagen 46. Ejemplo elemento var. ......................................................................... 77 Imagen 47. Ejemplo elemento samp. ...................................................................... 77 Imagen 48. Ejemplo elemento kbd.......................................................................... 78 Imagen 49. Ejemplo elemento sub. ......................................................................... 78 Imagen 50. Ejemplo elemento sup. ......................................................................... 79 Imagen 51. Ejemplo elemento i. ............................................................................. 80 Imagen 52. Ejemplo elemento b.............................................................................. 81 Imagen 53. Ejemplo elemento u.............................................................................. 81 Imagen 54. Ejemplo elemento mark. ...................................................................... 82 Imagen 55. Ejemplo elemento ruby. ....................................................................... 83 Imagen 56. Ejemplo elemento rp. ........................................................................... 84 Imagen 57. Ejemplo elemento bdi. ......................................................................... 84 Imagen 58. Ejemplo elemento bdo.......................................................................... 85 Imagen 59. Ejemplo elemento span. ....................................................................... 86 Imagen 60. Ejemplo elemento br. ........................................................................... 86 Imagen 61. Ejemplo elemento wbr. ........................................................................ 87 Imagen 62. Ejemplo elemento ins. .......................................................................... 88 Imagen 63. Ejemplo elemento del. .......................................................................... 89 Imagen 64. Ejemplo elemento img. ........................................................................ 91 Imagen 65. Ejemplo elemento iframe. .................................................................... 92 Imagen 66. Ejemplo elemento embed. .................................................................... 93 Imagen 67. Ejemplo elemento object. ..................................................................... 95 Imagen 68. Ejemplo elemento param...................................................................... 96 Imagen 69. Ejemplo elemento video. ...................................................................... 98 Imagen 70. Ejemplo elemento audio. ...................................................................... 100 Imagen 71. Ejemplo elemento source. .................................................................... 101 Imagen 72. Ejemplo elemento track........................................................................ 102 Imagen 73. Ejemplo elemento canvas. .................................................................... 103 Imagen 74. Ejemplo elemento map. ........................................................................ 104 Imagen 75. Ejemplo elemento area. ........................................................................ 106 Imagen 76. Ejemplo elemento table. ....................................................................... 108 Imagen 77. Ejemplo elemento caption. ................................................................... 109 Imagen 78. Ejemplo elemento colgroup. ................................................................ 110 Imagen 79. Ejemplo elemento tbody. ..................................................................... 111 Imagen 80. Ejemplo elemento thead. ...................................................................... 112 Imagen 81. Ejemplo elemento tr. ............................................................................ 114 Imagen 82. Ejemplo elemento td. ........................................................................... 115 Imagen 83. Ejemplo elemento th. ........................................................................... 116 Imagen 84. Ejemplo elemento form. ....................................................................... 118 Imagen 85. Ejemplo elemento fieldset. ................................................................... 119 Imagen 86. Ejemplo elemento legend. .................................................................... 119 Imagen 87. Ejemplo elemento label. ....................................................................... 121 Imagen 88. Ejemplo elemento input tipo hidden. ................................................... 126 Imagen 89. Ejemplo elemento input tipo text. ........................................................ 127 Imagen 90. Ejemplo elemento input tipo search. .................................................... 128 Imagen 91. Ejemplo elemento input tipo tel. .......................................................... 128 Imagen 92. Ejemplo elemento input tipo url. .......................................................... 129 Imagen 93. Ejemplo elemento input tipo email. ..................................................... 130 Imagen 94. Ejemplo elemento input tipo password. ............................................... 131 8

Imagen 95. Ejemplo elemento input tipo datetime. ................................................ 132 Imagen 96. Ejemplo elemento input tipo date. ....................................................... 133 Imagen 97. Ejemplo elemento input tipo month. .................................................... 133 Imagen 98. Ejemplo elemento tipo week. ............................................................... 134 Imagen 99. Ejemplo elemento input tipo time. ....................................................... 135 Imagen 100. Ejemplo elemento input datetime-local. ............................................ 136 Imagen 101. Ejemplo elemento input tipo number. ................................................ 137 Imagen 102. Ejemplo elemento input tipo range. ................................................... 137 Imagen 103. Ejemplo elemento input tipo color. .................................................... 138 Imagen 104. Ejemplo elemento tipo checkbox. ...................................................... 139 Imagen 105. Ejemplo elemento input tipo radio. .................................................... 139 Imagen 106. Ejemplo elemento tipo file. ................................................................ 140 Imagen 107. Ejemplo elemento input tipo submit. ................................................. 141 Imagen 108. Ejemplo elemento input tipo image. .................................................. 142 Imagen 109. Ejemplo elemento input tipo reset...................................................... 142 Imagen 110. Ejemplo elemento input tipo button. .................................................. 143 Imagen 111. Ejemplo elemento button. .................................................................. 144 Imagen 112. Ejemplo elemento select. ................................................................... 146 Imagen 113. Ejemplo elemento datalist. ................................................................. 147 Imagen 114. Ejemplo elemento optgroup. .............................................................. 148 Imagen 115. Ejemplo elemento option. .................................................................. 149 Imagen 116. Ejemplo elemento textarea. ................................................................ 151 Imagen 117. Ejemplo elemento keygen. ................................................................. 152 Imagen 118. Ejemplo elemento output. .................................................................. 153 Imagen 119. Ejemplo elemento progress. ............................................................... 153 Imagen 120. Ejemplo elemento meter. ................................................................... 155 Imagen 121. Ejemplo elemento details. .................................................................. 156 Imagen 122. Ejemplo elemento command. ............................................................. 158 Imagen 123. Ejemplo elemento menu. .................................................................... 159 Imagen 124. Documento ejemplo de un producto en MongoDB. .......................... 163 Imagen 125. Comparacin de un documento MongoDB frente a un modelo relacional. ................................................................................................................ 164 Imagen 126. Documento de MongoDB con documentos o arrays dentro. ............. 165 Imagen 127. Ubicacin de carpeta extrada de MongoDB en Windows. ............... 167 Imagen 128. Moviendo la carpeta extrada de MongoDB a otra ubicacin en Windows. ................................................................................................................ 167 Imagen 129. Creando la carpeta para almacenar los archivos de MongoDB en Windows. ................................................................................................................ 168 Imagen 130. Cambiar a otra ruta alternativa la ubicacin para almacenar los archivos de MongoDB en Windows. ..................................................................................... 168 Imagen 131. Iniciar MongoDB en Windows. ......................................................... 168 Imagen 132. Conectar con MongoDB en Windows. .............................................. 169 Imagen 133. Guardar y consultar un documento en la base de datos por defecto test........................................................................................................................ 169 Imagen 134. Creacin de un directorio para archivos de registro de MongoDB en Windows. ................................................................................................................ 170 Imagen 135. Creacin de un archivo de configuracin para el logpath en Windows. ................................................................................................................................. 170 Imagen 136. Instalar el servicio de MongoDB en Windows. ................................. 171 Imagen 137. Ejecutar el servicio de MongoDB en Windows. ................................ 171 9

Imagen 138. Detener el servicio de MongoDB en Windows.................................. 171 Imagen 139. Quitar el servicio de MongoDB en Windows. ................................... 171 Imagen 140. Descarga de MongoDB para Linux 64-bits. ...................................... 172 Imagen 141. Descarga de MongoDB para Linux 32-bits. ...................................... 172 Imagen 142. Extraccin de los archivos descargados de MongoDB en Linux. ...... 172 Imagen 143. Creacin de directorio para guardar los datos de MongoDB en Linux. ................................................................................................................................. 173 Imagen 144. Cambiar de propietario del de directorio donde se guardarn los datos de MongoDB en Linux. .......................................................................................... 173 Imagen 145. Iniciar mongod de MongoDB en Linux. ........................................ 173 Imagen 146. Conectarse a la instancia de MongoDB en Linux. ............................. 174 Imagen 147. Conexin MongoDB simple en PHP. ................................................ 176 Imagen 148. Conexin MongoDB a un host remoto en PHP. ............................... 177 Imagen 149. Conexin MongoDB a un host remoto con puerto determinado en PHP ................................................................................................................................. 177 Imagen 150. Conexin MongoDB a un host remoto con puerto determinado y autentificacin en PHP. ........................................................................................... 177 Imagen 151. Seleccionando una base de datos en MongoDB desde PHP. ............. 178 Imagen 152. Seleccionando una coleccin de una base de datos en MongoDB desde PHP. ........................................................................................................................ 178 Imagen 153. Insertar un documento en una base de datos en MongoDB desde PHP. ................................................................................................................................. 179 Imagen 154. Documento insertado en MongoDB................................................... 179 Imagen 155. Insertar un documento con ID especfica, en una base de datos en MongoDB desde PHP. ............................................................................................ 180 Imagen 157. Insertar un documento en una base de datos en MongoDB con documentos o arrays anidados desde PHP. ............................................................. 180 Imagen 156. Documento insertado en MongoDB con una ID especfico. .............. 180 Imagen 158. Documento insertado en MongoDB con documentos anidados. ....... 181 Imagen 159. Actualizar un documento con el operador $inc en MongoDB. .......... 182 Imagen 160. Actualizar un documento con el operador $inc, consultando por el Objeto ID de MongoDB. ......................................................................................... 183 Imagen 161. Actualizar un documento con el operador $inc, en documentos anidados de MongoDB. .......................................................................................................... 183 Imagen 162. Explicacin de un documento anidado de MongoDB........................ 184 Imagen 163. Actualizar un documento anidado sin conocer la posicin index de MongoDB. ............................................................................................................... 184 Imagen 164. Documento ejemplo para actualizarlo con $set en MongoDB........... 185 Imagen 165. Actualizar documento con el operador $set en MongoDB. ............... 185 Imagen 166. Documento ejemplo para agregar un campo con $set en MongoDB. 186 Imagen 167. Actualizar un documento agregando un nuevo campo con $set en MongoDB. ............................................................................................................... 186 Imagen 168. Documento despus de agregarse un campo nuevo con $set en MongoDB. ............................................................................................................... 186 Imagen 169. Documento para borrar un campo con $unset en MongoDB. ............ 187 Imagen 170. Ejemplo para Borrar un campo con $unset en MongoDB. ................ 187 Imagen 171. Documento despus de haber borrado un campo con $unset en MongoDB. ............................................................................................................... 187 Imagen 172. Documento ejemplo para aadir un elemento a un array con $push en MongoDB. ............................................................................................................... 187 10

Imagen 173. Actualizar un documento con $push en MongoDB. .......................... 188 Imagen 174. Resultado de un documento actualizado con $push en MongoDB. ... 188 Imagen 175. Actualizar un documento con $pull en MongoDB. ........................... 189 Imagen 176. Resultado de actualizar un documento con $pull en MongoDB. ....... 189 Imagen 177. Documento para actualizar mediante actualizaciones de reemplazo en MongoDB. ............................................................................................................... 189 Imagen 178. Actualizar un documento mediante actualizaciones de reemplazo en MongoDB. ............................................................................................................... 190 Imagen 179. Documento actualizado mediante actualizaciones de reemplazo en MongoDB. ............................................................................................................... 190 Imagen 180. Eliminar un documento en MongoDB. .............................................. 190 Imagen 181. Eliminar una coleccin en MongoDB. ............................................... 191 Imagen 182. Eliminar una base de datos en MongoDB. ......................................... 191 Imagen 183. Documentos para realizar ejemplos de consultas en MongoDB. ....... 192 Imagen 184. Consultar un solo documento en MongoDB. ..................................... 192 Imagen 185. Mostrar datos resultantes de una consulta con findOne() en MongoDB. ................................................................................................................................. 193 Imagen 186. Consultar datos de todos los documentos de una coleccin en MongoDB. ............................................................................................................... 193 Imagen 187. Mostrar datos resultantes de una consulta con find() en MongoDB. . 194 Imagen 188. Mostrar datos resultantes de una consulta con find() con una condicin en MongoDB. .......................................................................................................... 195 Imagen 189. Mostrar datos resultantes de una consulta con find(), sacando un campo determinado en MongoDB. ..................................................................................... 196 Imagen 190. Consulta de datos con find(), sacando varios campos determinados en MongoDB. ............................................................................................................... 196 Imagen 191. Almacenando un archivo en MongoDB. ............................................ 198 Imagen 192. Consultando un archivo por el ID en MongoDB. .............................. 199 Imagen 193. Documento HTML5 para escoger una foto y almacenarla en MongoDB. ................................................................................................................................. 200 Imagen 194. Seleccionar una foto para almacenarla en MongoDB. ....................... 200 Imagen 195. Almacenar y mostrar en pantalla una foto en MongoDB. ................. 201 Imagen 196. Foto almacenada en la base de datos y mostrada en pantalla en MongoDB. ............................................................................................................... 201 Imagen 197. Actualizar un documento de manera segura con safe en MongoDB. ................................................................................................................................. 203 Imagen 198. Ejemplo de inicio de jquery. .............................................................. 205 Imagen 199. Ejemplo de interaccin con Jquery. ................................................... 205 Imagen 200. Ejemplo de animacin simple Jquery. ............................................... 205 Imagen 201. Ejemplo de efecto con Jquery UI. ...................................................... 206 Imagen 202. Ejemplo ordenamiento de una tabla con TableSorter. ....................... 206 Imagen 203. Ejemplo de uso para imprimir un DIV con PrintArea. ...................... 207 Imagen 204. Resultado en el navegador de la librera Keyboard. .......................... 208 Imagen 205. Ejemplo crear un botn grande en BootStrap. ................................... 209 Imagen 206. Ejemplo crear carrusel con BootStrap................................................ 210 Imagen 207. Ejemplo de manejo de carrusel de BootStrap desde JavaScript. ....... 210 Imagen 208. Ejemplo API Audio y Video. ............................................................. 211 Imagen 209. Ejemplo elemento canvas para dibujar con el API Canvas................ 212 Imagen 210. Codificacin inicial con el API Canvas. ............................................ 212 Imagen 211. Obtener contexto para dibujar con API Canvas. ................................ 213 11

Imagen 212. Dibujar un rectngulo o cuadrado con API Canvas. .......................... 213 Imagen 213. Resultado de la creacin de 2 rectngulos con sus medidas mediante la API Canvas. ............................................................................................................ 214 Imagen 214. Dibujar rectngulos con color de relleno en la Api Canvas. .............. 215 Imagen 215. Resultado en el navegador de la creacin de 2 rectngulos con relleno en el API Canvas. .................................................................................................... 215 Imagen 216. Dibujar 2 rombos con caminos en el API Canvas. ............................ 217 Imagen 217. Resultado de dibujar 2 rombos en el navegador con el API Canvas. 218 Imagen 218. Creacin de una animacin de movimiento de un rectngulo con el API Canvas. Parte 1. ....................................................................................................... 219 Imagen 219. Creacin de una animacin de movimiento de un rectngulo con el API Canvas. Parte 2. ....................................................................................................... 220 Imagen 220. Resultado en el navegador de la animacin de movimiento de un rectngulo con el API Canvas. ................................................................................ 221 Imagen 221. Sintaxis para obtener la ubicacin (Latitud y Longitud) de navegacin mediante la API Geolocation. ................................................................................. 222 Imagen 222. Seguridad del navegador para conceder el permiso de mostrar la ubicacin, mediante Geolocalizacin...................................................................... 223 Imagen 223. Sintaxis para generar un mapa con las coordenadas obtenidas de la API Geolocation, mediante Google Maps. ..................................................................... 223 Imagen 224. Resultado en el navegador de la generacin de un mapa con Google Maps. ....................................................................................................................... 224 Imagen 225. Sintaxis para almacenar datos con LocalStorage. .............................. 225 Imagen 226. Sintaxis para obtener los datos almacenados con LocalStorage. ....... 225 Imagen 227. Sintaxis para eliminar una Llave/Valor, almacenada con LocalStorage. ................................................................................................................................. 226 Imagen 228. Sintaxis para abrir o crear una base de datos local con el API Web SQL Database. ................................................................................................................. 226 Imagen 229. Sintaxis de la funcin de transaccin de una base de datos local con la API Web SQL Database.......................................................................................... 227 Imagen 230. Sintaxis para crear una tabla de una base de datos local con la API Web SQL Database.......................................................................................................... 227 Imagen 231. Sintaxis para insertar un registro en una tabla de una base de datos local con la API Web SQL Database. .............................................................................. 228 Imagen 232. Sintaxis para consultar registros en una tabla de una base de datos local con la API Web SQL Database. .............................................................................. 228 Imagen 233. Sintaxis para modificar registros en una tabla con la API Web SQL Database. ................................................................................................................. 229 Imagen 234. Sintaxis para eliminar registros en una tabla de una base de datos local con la API Web SQL Database. .............................................................................. 230 Imagen 235. Sintaxis para que un elemento HTML sea draggable. ....................... 230 Imagen 236. Sintaxis para comenzar a arrastrar un elemento HTML con Drag and Drop. ....................................................................................................................... 231 Imagen 237. Funcin en JavaScript para comenzar a arrastrar un elemento HTML con Drag and Drop. ................................................................................................. 231 Imagen 238. Elemento destino donde un elemento se arrastrar con Drag and Drop. ................................................................................................................................. 232 Imagen 239. Elemento destino con sus atributos, para poder soltar los elementos arrastrados con Drag and Drop. .............................................................................. 232

12

Imagen 240. Funcin en JavaScript para obtener el elemento arrastrado con Drag and Drop. ....................................................................................................................... 233 Imagen 241. Ejemplo de cmo arrastrar una foto desde la PC al navegador mediante Drag and Drop. ........................................................................................................ 234 Imagen 242. Sintaxis para crear un Web Worker. .................................................. 235 Imagen 243. Sintaxis para enviar un mensaje a un Web Worker. .......................... 236 Imagen 244. Sintaxis para enviar un mensaje desde un Web Worker. ................... 236 Imagen 245. Sintaxis para recibir un mensaje de un Web Worker. ........................ 236 Imagen 246. Sintaxis para recibir un mensaje en el Web Worker. ......................... 236 Imagen 247. Sintaxis para pedir permiso al usuario de mostrar las Notificaciones con la API Web Notifications. ....................................................................................... 237 Imagen 248. Seguridad del navegador para conceder el permiso de mostrar Notificaciones con la API Web Notifications. ........................................................ 238 Imagen 249. Sintaxis para crear Notificaciones con la API Web Notifications. .... 239 Imagen 250. Resultado en la PC de una Notificacin con la API Web Notifications ................................................................................................................................. 240 Imagen 251. Ejemplo de un servidor http con NodeJS. .......................................... 241 Imagen 252. Pgina principal de la aplicacin web. ............................................... 243 Imagen 253. Seccin Registrarse en la aplicacin web. ......................................... 244 Imagen 254. Mensaje de finalizacin de registro en la aplicacin web. ................. 246 Imagen 255. Seccin Informacin sobre la aplicacin. .......................................... 247 Imagen 256. Descripcin breve de las caractersticas de la aplicacin web. .......... 247 Imagen 257. Video de demostracin de utilizacin de la aplicacin web. ............. 248 Imagen 258. Seccin Iniciar sesin. ........................................................................ 249 Imagen 259. Pgina principal de usuarios de la aplicacin web. ............................ 250 Imagen 260. Seccin Contenidos de la aplicacin web. ......................................... 251 Imagen 261. Men superior de la aplicacin web................................................... 252 Imagen 262. Ejemplo de usuario "Juan" al revisar su perfil en la aplicacin web. 253 Imagen 263. Ejemplo de utilizacin del Buscador de usuarios en la aplicacin web. ................................................................................................................................. 253 Imagen 264. Ejemplo de bsqueda de usuarios, mostrando el cuadro de descripcin del usuario en la aplicacin web. ............................................................................ 254 Imagen 265. Ejemplo para revisar el perfil de un usuario encontrado con el Buscador de usuarios en la aplicacin web. ............................................................................ 255 Imagen 266. Men Izquierdo de la aplicacin web. ............................................... 256 Imagen 267. Foto de perfil actual inicial de la aplicacin web. .............................. 257 Imagen 268. Funcin Noticias de la aplicacin web............................................... 258 Imagen 269. Funcin Mi cuenta, seccin Datos personales de la aplicacin web.. 259 Imagen 270. Ejemplo de modificacin de un campo en la funcin Mi cuenta, seccin Datos personales de la aplicacin web. ................................................................... 260 Imagen 271. Funcin Mi cuenta, seccin Configuracin de la aplicacin web. ..... 260 Imagen 272. Habilitar/Deshabilitar notificaciones de escritorio en la aplicacin web. ................................................................................................................................. 261 Imagen 273. Permiso para notificaciones de escritorio en la aplicacin web. ........ 261 Imagen 274. Acceso a cambiar contrasea de usuario de la aplicacin web. ......... 261 Imagen 275. Ventana para cambiar la contrasea del usuario de la aplicacin web. ................................................................................................................................. 262 Imagen 276. Acceso a eliminar cuenta de usuario de la aplicacin web. ............... 262 Imagen 277. Ventana para eliminar cuenta del usuario de la aplicacin web. ....... 263 Imagen 278. Funcin Personalizacin de la aplicacin web................................... 264 13

Imagen 279. Funcin Personalizacin, tema personalizado de la aplicacin web.. 265 Imagen 280. Funcin Servicios de la aplicacin web. ............................................ 266 Imagen 281. Ejemplo de agregar un servicio con la opcin de eliminarlo en la aplicacin web. ........................................................................................................ 267 Imagen 282. Funcin Fotos de la aplicacin web. .................................................. 268 Imagen 283. Ejemplo de elegir una foto para agregar a la lista de fotos de un usuario en la aplicacin web. ............................................................................................... 269 Imagen 284. Ejemplo del progreso de subida de una foto en la aplicacin web. ... 269 Imagen 285. Ejemplo de foto ya agregada en la lista de fotos del usuario en la aplicacin web. ........................................................................................................ 270 Imagen 286. Ejemplo de 2 fotos agregadas en la lista de fotos del usuario en la aplicacin web. ........................................................................................................ 270 Imagen 287. Ejemplo de cmo cambiar la foto de perfil en la aplicacin web. ..... 271 Imagen 288. Ejemplo de cmo se cambi una foto de perfil del usuario en la aplicacin web. ........................................................................................................ 271 Imagen 289. Funcin Contactos de la aplicacin web. ........................................... 272 Imagen 290. Funcin Mensajes de la aplicacin web. ............................................ 273 Imagen 291. Ejemplo de revisin de mensajes del usuario en la aplicacin web. .. 273 Imagen 292. Funcin Ubicacin de la aplicacin web. .......................................... 274 Imagen 293. Seguridad en el navegador al momento de Actualizar la ubicacin del usuario en la aplicacin web. .................................................................................. 274 Imagen 294. Ejemplo al momento de actualizar la ubicacin del usuario en la aplicacin web. ........................................................................................................ 275 Imagen 295. Permiso para que todos los usuarios vean la ubicacin geogrfica del usuario en la aplicacin web. .................................................................................. 275 Imagen 296. Funcin Currculum de la aplicacin web. ........................................ 276 Imagen 297. Seccin Datos personales del currculum del usuario en la aplicacin web. ......................................................................................................................... 277 Imagen 298. Seccin Estudios del currculum del usuario en la aplicacin web. .. 278 Imagen 299. Seccin Educacin primaria del currculum del usuario en la aplicacin web. ......................................................................................................................... 278 Imagen 300. Seccin Educacin secundaria del currculum del usuario en la aplicacin web. ........................................................................................................ 279 Imagen 301. Seccin Educacin superior del currculum del usuario en la aplicacin web. ......................................................................................................................... 280 Imagen 302. Seccin Postgrados del currculum del usuario en la aplicacin web. ................................................................................................................................. 281 Imagen 303. Seccin Mritos del currculum del usuario en la aplicacin web. .... 282 Imagen 304. Seccin Experiencia del currculum del usuario en la aplicacin web. ................................................................................................................................. 282 Imagen 305. Seccin Adjuntos del currculum en la aplicacin web. .................... 283 Imagen 306. Seccin Mis archivos adjuntos del currculum en la aplicacin web. 283 Imagen 307. Ejemplo de los archivos del usuario en el currculum de la aplicacin web. ......................................................................................................................... 284 Imagen 308. Seccin Agregar ms archivos del currculum del usuario en la aplicacin web. ........................................................................................................ 284 Imagen 309. Ejemplo de 2 archivos listos para agregar al currculum del usuario en la aplicacin web. ........................................................................................................ 285 Imagen 310. Funcin Entretenimiento del usuario en la aplicacin web. .............. 286 Imagen 311. Barra de informacin de la aplicacin web. ....................................... 286 14

Imagen 312. Ejemplo de la barra de informacin cuando el usuario edite su telfono en la aplicacin web. ............................................................................................... 287 Imagen 313. Ejemplo de la barra de informacin cuando el usuario reciba notificaciones en la aplicacin web......................................................................... 287 Imagen 314. Herramienta de chat del usuario en la aplicacin web ....................... 287 Imagen 315. Ejemplo de un contacto desconectado en la aplicacin web............. 288 Imagen 316. Ejemplo de un contacto conectado en la aplicacin web. ................. 288 Imagen 317. Ejemplo para elegir un contacto y enviarle un mensaje de chat en la aplicacin web. ........................................................................................................ 289 Imagen 318. Ejemplo de envo de un mensaje de chat a un contacto en la aplicacin web. ......................................................................................................................... 289 Imagen 319. Ejemplo de aviso cuando al usuario le llegue un mensaje de chat en la aplicacin web. ........................................................................................................ 290 Imagen 320. Ejemplo de cmo leer un mensaje que le ha llegado al usuario en la aplicacin web. ........................................................................................................ 290 Imagen 321. Ejemplo de notificacin de escritorio en la aplicacin web. .............. 290 Imagen 322. Perfil visible a los dems usuarios en la aplicacin web. .................. 291 Imagen 323. Botn eliminar contacto en la aplicacin web. .................................. 292 Imagen 324. Botn agregar contacto en la aplicacin web. .................................... 292 Imagen 325. Foto de perfil en el perfil del usuario en la aplicacin web. .............. 292 Imagen 326. Perfil del usuario, seccin Perfil de la aplicacin web....................... 293 Imagen 327. Perfil del usuario, seccin Ubicacin de la aplicacin web. .............. 294 Imagen 328. Perfil del usuario, seccin Fotos de la aplicacin web....................... 294 Imagen 329. Perfil del usuario, seccin Currculum de la aplicacin web. ............ 295 Imagen 330. Men del currculum dl usuario en la aplicacin web. ...................... 295 Imagen 331. Pgina de inicio del administrador de la aplicacin web. .................. 296 Imagen 332. Zona de identificacin del administrador de la aplicacin web. ........ 297 Imagen 333. Identificacin del administrador con el teclado virtual en la aplicacin web. ......................................................................................................................... 297 Imagen 334. Pgina principal del administrador de la aplicacin web. .................. 298 Imagen 335. Seccin para escoger el tipo de reporte que generar el administrador de la aplicacin web. .................................................................................................... 299 Imagen 336. Reporte por usuario para el administrador en la aplicacin web. ...... 299 Imagen 337. Ejemplo de reporte generado por el administrador de las actividades de un usuario en especfico en la aplicacin web. ....................................................... 300 Imagen 338. Reporte por fecha especfica de usuarios para el administrador en la aplicacin web. ........................................................................................................ 300 Imagen 339. Ejemplo de reporte generado por el administrador de las actividades de usuarios en una fecha especfica en la aplicacin web. .......................................... 301 Imagen 340. Reporte por mes y ao especfico de usuarios para el administrador en la aplicacin web. .................................................................................................... 301 Imagen 341. Ejemplo de reporte generado por el administrador de las actividades de usuarios en un mes y ao especfico en la aplicacin web. .................................... 302 Imagen 342. Reporte total de usuarios para el administrador en la aplicacin web. ................................................................................................................................. 302 Imagen 343. Ejemplo de reporte generado por el administrador de todas las actividades de usuarios en la aplicacin web. ......................................................... 303 Imagen 344. Seccin Cantidad de usuarios registrados en el administrador de la aplicacin web. ........................................................................................................ 303 Imagen 345. Botn para salir del administrador en la aplicacin web. .................. 304 15

NDICE DE TABLAS

Tabla 1. Compatibilidad HTML5 en navegadores de escritorio. ............................ 22 Tabla 2. Compatibilidad HTML5 de navegadores en tabletas. ............................... 22 Tabla 3. Compatibilidad HTML5 de navegadores en mviles. .............................. 23 Tabla 4. Compatibilidad HTML5 de navegadores en juegos. ................................ 23 Tabla 5. Compatibilidad HTML5 de navegadores en televisiones. ........................ 24 Tabla 6. Atributos globales HTML5 ....................................................................... 29 Tabla 7. Atributos de eventos globales HTML5 ..................................................... 32 Tabla 8. Simbologa de compatibilidad de los navegadores para cada elemento HTML5. .................................................................................................................. 33 Tabla 9. Atributos elemento html............................................................................ 33 Tabla 10. Atributos elemento base. ......................................................................... 36 Tabla 11. Atributos elemento link........................................................................... 38 Tabla 12. Atributos elemento meta. ........................................................................ 39 Tabla 13. Atributos elemento style. ........................................................................ 40 Tabla 14. Atributos etiqueta script. ......................................................................... 41 Tabla 15. Atributos elemento body. ........................................................................ 45 Tabla 16. Atributos elemento blockquote. .............................................................. 59 Tabla 17. Atributos elemento ol. ............................................................................. 60 Tabla 19. Atributos elemento a. .............................................................................. 68 Tabla 20. Atributos elemento q. .............................................................................. 73 Tabla 21. Atributos elemento time. ......................................................................... 75 Tabla 22. Atributos elemento ins. ........................................................................... 88 Tabla 23. Atributos elemento del. ........................................................................... 89 Tabla 24. Atributos elemento img. .......................................................................... 90 Tabla 25. Atributos elemento iframe. ..................................................................... 92 Tabla 26. Atributos elemento embed. ..................................................................... 93 Tabla 27. Atributos elemento object. ...................................................................... 94 Tabla 28. Atributos elemento param. ...................................................................... 95 Tabla 29. Atributos elemento video. ....................................................................... 98 Tabla 30. Atributos elemento audio. ....................................................................... 100 Tabla 31. Atributos elemento source. ..................................................................... 100 Tabla 32. Atributos elemento track. ........................................................................ 102 Tabla 33. Atributos elemento canvas. ..................................................................... 103 Tabla 34. Atributos elemento map. ......................................................................... 104 Tabla 35. Atributos elemento area. ......................................................................... 106 Tabla 36. Atributos elemento table. ........................................................................ 107 Tabla 37. Atributos elemento colgroup. .................................................................. 109 Tabla 38. Atributos elemento col. ........................................................................... 110 Tabla 39. Atributos elemento td. ............................................................................. 114 Tabla 40. Atributos elemento th. ............................................................................. 115 Tabla 41. Atributos elemento form. ........................................................................ 117 Tabla 42. Atributos elemento fieldset. .................................................................... 118 Tabla 43. Atributos elemento label. ........................................................................ 120 Tabla 44. Atributos elemento input......................................................................... 125 16

Tabla 45. Atributos elemento button....................................................................... 144 Tabla 46. Atributos elemento select. ....................................................................... 145 Tabla 47. Atributos elemento optgroup. ................................................................. 147 Tabla 48. Atributos elemento option....................................................................... 148 Tabla 49. Atributos elemento textarea. ................................................................... 150 Tabla 50. Atributos elemento keygen. .................................................................... 151 Tabla 51. Atributos elemento output....................................................................... 152 Tabla 52. Atributos elemento progress. .................................................................. 153 Tabla 53. Atributos elemento meter. ....................................................................... 154 Tabla 54. Atributos elemento details. ..................................................................... 155 Tabla 55. Atributos elemento command. ................................................................ 157 Tabla 56. Atributos elemento menu. ....................................................................... 158 Tabla 57. Lista de archivos o extensiones .dll para instalar el controlador de PHP para mongodb. ......................................................................................................... 175 Tabla 58. Correlacin entre sentencias de consulta SQL y mongodb..................... 197 Tabla 59. Diferentes tipos de botones en bootstrap. ............................................... 209 Tabla 60. Resultado de un registro agregado en una tabla SQL desde la API Web SQL Database.......................................................................................................... 229

17

INTRODUCCIN

En la actualidad, con el paso de los das el uso que se le daba al internet hizo que surgieran nuevos retos, la web ya era simplemente documentos de texto, las personas la utilizan en la actualidad para enviar mensajes de correo electrnico, chatear, jugar y hasta para ver televisin.

HTML ha ido actualizndose cada vez, llegando a su ms reciente versin HTML5 que interacta de una manera excelente entre pginas web y contenido media, de igual manera facilita la codificacin en cuanto al diseo. Esta nueva versin de HTML resulta eficiente, por ejemplo mediante el uso del nuevo reproductor de video, que no requiere Flash o Adobe Player para reproducirse, simplemente requiere una etiqueta <video>.

Esta nueva versin es ms ligera, sencilla y simple en su cdigo, lo que permite que las pginas escritas en este lenguaje carguen ms rpido en el navegador. Por tales motivos descritos anteriormente ste proyecto de tesis se basar en el lenguaje HTML5. Desde algn tiempo atrs, MySQL, una de las bases de datos ms utilizadas, se ha venido dejando de un lado, en favor de una nueva alternativa como lo es NoSQL, porque las ventajas han sido grandes y resulta difcil no tomarlas en cuenta.1

NoSQL es nueva alternativa de manipulacin de datos, que intentan mejorar las limitaciones del modelo relacional al momento de almacenar grandes cantidades de datos.

DosIdeas. Leonardo De Seta. 9 de Julio de 2009. 25 de Mayo de 2012. < http://www.dosideas.com/noticias/base-de-datos/657-nosql-el-movimiento-en-contra-de-las-basesde-datos.html>.

18

El uso de las aplicaciones web es variado, existen aplicaciones para manejo de correo electrnico, ventas online, foros de discusin, juegos, redes sociales. Las redes sociales en internet se dedican a interactuar con varios usuarios, como es el caso de las redes de bsqueda de amistad o de compartir intereses, y muchas ms.

Facebook una red social tan concurrente en la actualidad cre su almacn de datos NoSQL para llevar al cabo bsquedas en su sitio web, en vez de usar su base de datos MySQL existente. De acuerdo al ingeniero de Facebook Avinash Lakshman, esa base de datos NoSQL puede escribir hasta 50GB de datos en disco en tan slo 0.12 milisegundos, 2500 veces ms rpido que MySQL.2

El objetivo principal de este proyecto de tesis ha sido desarrollar una aplicacin web sobre redes sociales, por lo que se ha utilizado MongoDB, una base de datos NoSQL que en comparacin de las base de datos relacionales, resulta gil, debido a que es orientada a documentos, que se almacenan en un formato BSON (versin modificada del JSON).

Static.last.fm. Lakshman, Avinash. 11 de Junio de 2009. 29 de Abril de 2012 <http://static.last.fm/johan/nosql-20090611/cassandra_nosql.ppt>.

19

CAPTULO 1 HTML 5 1.1 Introduccin En este captulo se desarrollar un manual de la nueva versin HTML5, tratando as sus nuevas etiquetas y su nueva estructura de un documento web.

W3C (World Wide Web Consortium) es el consorcio encargado del progreso de la especificacin HTML.

1.2 Qu es HTML5? HTML5 es la actualizacin o la quinta revisin del lenguaje de hipertexto de la World Wide Web (WWW), HTML, el lenguaje en el que son creadas las pginas web.

HMTL5 aade a sus etiquetas semntica, etiquetas que permiten describir cual es el significado, importancia o finalidad del contenido, pero que no producen ningn aspecto especial en la visualizacin, si no que a ms de darle sentido a las etiquetas, estn orientadas a buscadores web.

El lenguaje HTML, permaneci sin cambios desde su ltima revisin en el ao 1999, quedando obsoleto en muchos aspectos. Entonces, por el ao 2004, los principales desarrolladores de navegadores (Apple, Opera, Mozilla, entre otros) iniciaron un grupo, el cual estaba interesado en la evolucin de la web, denominado WHATWG (Grupo de Trabajo de Tecnologas de Aplicaciones Web de Hipertexto). Como no poda ser de otra manera el W3C (World Wide Web) se uni a la iniciativa en 2006 y en el 2009 nace por fin HTML5.

Aprender HTML5 no es complicado, la manera de trabajar es la misma que con anteriores versiones, el uso de las etiquetas y atributos es idntico, y muchas de las etiquetas se mantienen. Para sacarle el mximo provecho se podra manejar tanto 20

HTML5 con CSS3 y las APIs de JavaScript, tres tecnologas que asocindolas, darn como resultado una aplicacin web muy atractiva.

1.3 Compatibilidad en los navegadores Pueden existir problemas de compatibilidad con los navegadores que no soportan an el 100% de HTML5, por lo tanto, antes de decidir implementar algo, es aconsejable informarse de la compatibilidad en los navegadores. Es cuestin de tiempo que HTML5 se convierta en un estndar y los navegadores permitan la utilizacin de todas sus etiquetas y funcionalidades que se pueden lograr en conjunto con las APIs de JavaScript y CSS3, como tambin los usuarios deben saber que mantener sus navegadores actualizados es primordial para disfrutar de HTML5.

Existen pginas web en donde se puede consultar de manera actualizada la compatibilidad de cada uno de los navegadores o browsers, ya sean de escritorio, tabletas, mviles, juegos o televisin. Una de las pginas ms interesantes es www.html5test.com, en donde se puede consultar la compatibilidad de los navegadores actuales e inclusive compararlos con otros. Si un navegador pasa todas las pruebas, HTML5Test dar una puntuacin mxima de 500 puntos, caso contrario dar los puntos correspondientes a su compatibilidad de funcionalidades HTML5 actuales.

A continuacin se muestran tablas de los navegadores con las puntuaciones dadas por HTML5Test actualmente (Noviembre del 2012), siendo 500 la puntuacin mxima:

21

1.3.1

Navegadores ms comunes de Escritorio

Nombre
Maxthon 3.4.5 Chrome 22 Opera 12.00 Safari 6.0 Firefox 16 Internet Explorer 10

Puntos /500
457 434 389 378 372 320

Tabla 1. Compatibilidad HTML5 en navegadores de escritorio. Fuente: THE HTML5 TEST. [Disponible en: www.html5test.com/results/desktop.html]

1.3.2

Navegadores ms comunes en Tabletas (Tablets)

Nombre
RIM Tablet OS 2.1 Opera Mobile 12.10 Chrome Firefox Mobile 16 iOs 6.0 Silk 2.2 Internet Explorer 10 Android 4.0 webOS 3.0

Puntos /500
411 406 390 388 386 358 320 297 224

Tabla 2. Compatibilidad HTML5 de navegadores en tabletas. Fuente: THE HTML5 TEST. [Disponible en: www.html5test.com/results/tablet.html]

22

1.3.3

Navegadores ms comunes en Mviles (Mobiles)

Nombre
Opera Mobile 12.10 Chrome Firefox Mobile 16 iOs 6.0 Windows Phone 8 Android 4.0 BlackBerry OS 7 Bada 2.0 Nokia Belle FP 1 Android 2.3

Puntos /500
406 390 388 386 320 297 288 283 252 200

Tabla 3. Compatibilidad HTML5 de navegadores en mviles. Fuente: THE HTML5 TEST. [Disponible en: www.html5test.com/results/mobile.html]

1.3.4

Navegadores ms comunes en Juegos (Gaming)

Nombre del Juego

Nombre del navegador

Puntos /500

Xbox 360 Nintendo 3DS Nintendo Wii Nintendo DSi Sony Play Station Vita

Internet Explorer 9 NetFront Opera Opera NetFront

120 109 94 94 58

Tabla 4. Compatibilidad HTML5 de navegadores en juegos. Fuente: THE HTML5 TEST. [Disponible en: www.html5test.com/results/gaming.html]

23

1.3.5

Navegadores ms comunes en Televisiones

Nombre
Sony Internet TV Google TV LG NetCast 2012 Panasonic Smart Viera Boxee

Puntos /500
342 341 338 240 222

Tabla 5. Compatibilidad HTML5 de navegadores en televisiones. Fuente: THE HTML5 TEST. [Disponible en: www.html5test.com/results/television.html]

En la aplicacin web desarrollada en este proyecto de tesis se ha utilizado el navegador Google Chrome 22 de escritorio, pues es uno de los navegadores con mayor compatibilidad y comn en el medio, adems es capaz de demostrar la mayora de novedades de HTML con su nueva versin 5.

1.4 Sintaxis HTML5 1.4.1 La Declaracin del tipo de documento (DOCTYPE)

Un DOCTYPE es un prembulo necesario.

Los DOCTYPEs en los documentos HTML5 son necesarios por razones de compatibilidad. Cuando se omite, los navegadores tienden a utilizar un modo de representacin distinta que sera incompatible con algunas especificaciones.

Incluyendo el DOCTYPE en un documento asegura que el navegador se rija a seguir las especificaciones pertinentes.

Un DOCTYPE normal debe constar de los siguientes componentes, en este orden: Una cadena <!DOCTYPE. Uno o ms espacios. Una cadena html. 24

Opcionalmente, uno o ms espacios. Un carcter >.

En otras palabras, el siguiente ejemplo muestra un DOCTYPE:

Imagen 1. DOCTYPE HTML5

Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/markup/syntax.html#doctype-syntax]

A continuacin se muestra una representacin de un documento basado en el DOM (Modelo de Objetos del Documento) de la W3C, en el que se muestra un rbol que incluye los elementos: html, head y body, que se utilizaban normalmente en versiones anteriores de HTML5 y que se mantienen en su forma, donde sus etiquetas de inicio y fin se encuentran de manera implcita en el documento:

Imagen 2. rbol DOM HTML5 Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/markup/documents.html#language-and-syntax]

1.4.2

Qu es un elemento?

Los elementos son la estructura bsica de HTML, tienen dos propiedades bsicas: atributos y contenido. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre25

de-elemento>). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido est ubicado entre las dos etiquetas (por ejemplo, <nombre-deelemento atributo="valor">Contenido</nombre-de-elemento>).

El contenido de un elemento son algunos elementos, datos de caracteres, y comentarios que contenga. Los atributos y sus valores no son considerados como el "contenido" de un elemento.

Un elemento vaco (void) es un elemento que no tiene contenido bajo ninguna circunstancia. Los elementos vacos pueden tener atributos.

La siguiente es una lista completa de los elementos vacos en HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, para m, source, track, wbr.

En la siguiente lista se describen las reglas de sintaxis de los elementos.

Las etiquetas se utilizan para delimitar el inicio y el final de los elementos en el marcado. Los elementos tienen una etiqueta de inicio para indicar dnde comenzar. Los elementos vacos (void) no tienen una etiqueta de cierre para indicar dnde terminan.

Los nombres de etiquetas se utilizan en las etiquetas de inicio y fin del elemento para indicar el nombre del elemento. Los elementos HTML tienen nombres que solamente usan caracteres en el rango de 0-9, a-z, y A-Z.

Las etiquetas de inicio estn compuestas de las siguientes partes, exactamente en el siguiente orden: o Un smbolo "<". o El nombre de etiqueta del elemento. o Opcionalmente, uno o ms atributos, cada uno de los cuales debe ser precedido por uno o ms caracteres de espacio. o Opcionalmente, uno o ms caracteres de espacio.

26

o Opcionalmente, un carcter "/", que puede estar presente slo si el elemento es un elemento vaco (void). o Un carcter ">".

Las etiquetas finales estn compuestas de las siguientes partes, exactamente en el siguiente orden: o Un smbolo "<". o A "/" carcter o El nombre de etiqueta del elemento. o Opcionalmente, uno o ms caracteres de espacio. o Un carcter ">".

Los elementos vacos (void) slo tienen una etiqueta de inicio, las etiquetas de cierre no debe especificarse para los elementos vacos.

1.4.3

Qu son los atributos?

Los atributos son parte de un elemento y se expresan dentro de la etiqueta inicial del elemento. Los atributos tienen un nombre y un valor.

Nunca debe haber dos o ms atributos con el mismo nombre en la misma etiqueta de inicio, cuyos nombres son insensibles a mayscula y minsculas.

Los nombres de los atributos deben constar de uno o ms caracteres distintos de los caracteres de espacio, U +0000 NULL, """, "", ">","/","=", los caracteres de control, y cualquier carcter que no sea definido por Unicode.

A continuacin una imagen en resumen de una estructura de los elementos HTML, con sus etiquetas de inicio y final, su contenido y sus atributos:

27

Imagen 3. Estructura de los Elementos HTML Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/markup/documents.html#language-and-syntax]

1.4.3.1 Atributos globales A continuacin se muestra una lista de los atributos globales, es decir, que son considerados comunes a todos los elementos en el lenguaje HTML. Se dividen en 2 grupos: Atributos esenciales y Atributos de controlador de eventos

1.4.3.1.1

Atributos esenciales

accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title, translate.

Atributo accesskey Class contenteditable

Descripcin Especifica una tecla de acceso directo para activar/hacer focus en un elemento. Especifica uno o ms nombres de las clases de un elemento (se refiere a una clase en una hoja de estilo). Especifica si el contenido de un elemento es editable o no.

Valores Algn carcter Nombre de clase true, false, inherit

Especifica un men contextual para un elemento. El men contextual aparece ID del elemento <menu> contextmenu cuando un usuario hace clic en el elemento. Dir draggable Especifica la direccin del texto para el contenido de un elemento. Especifica si un elemento es arrastrable o no. ltr, rtl, auto true, false, auto

28

dropzone

Especifica si los datos arrastrados son copiados, movidos o vinculados, cuando se dejan caer sobre un elemento. Especifica que un elemento no es visible an, o no es, relevante. Especifica un nico 'id' a un elemento. Especifica el idioma del contenido del elemento. Especifica si el elemento debe tener su ortografa y gramtica comprobada o no. Especifica una lnea de estilo CSS para un elemento. Especifica el orden de tabulacin de un elemento. Especifica informacin adicional acerca de un elemento. Se utiliza para especificar si los valores de un elemento y los valores de sus nodos hijos de texto se traducen cuando la pgina est traducindose, o si se dejan sin cambios.

copy, move, link Cadena vaca, sin valor, hidden Nombre ID Cdigo de lenguaje ISO true, false Una o ms propiedades de CSS Un nmero Cadena de texto

hidden Id Lang spellcheck Style Tabindex Title

Translate

yes, no

Tabla 6. Atributos globales HTML5 Fuente: W3Schools [Disponible en: http://www.w3schools.com/tags/ref_standardattributes.asp]

1.4.3.1.2

Atributos de eventos

onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,

ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting.

29

Atributo evento Onabort Onblur Oncanplay oncanplaythrough Onchange Onclick Oncontextmenu Oncuechange Ondblclick Ondrag Ondragend Ondragenter Ondragleave Ondragover Ondragstart Ondrop ondurationchange Onemptied Onended Onerror Onfocus Oninput Oninvalid Onkeydown

Se ejecuta cuando el usuario detiene la obtencin de datos media en descarga. Pero no debido a un error. la ventana pierde el enfoque (focus). un archivo est listo para reproducirse (cuando tenga suficiente almacenamiento temporal para empezar) un archivo puede reproducirse todo su camino hasta el final, sin pausas para el almacenamiento temporal. un elemento cambia. se da click en el ratn sobre un elemento. un men contextual se activa. cambia una pista (cue) de un elemento media. se da doble click sobre un elemento. un elemento se arrastra. finaliza una operacin de arrastre sobre un elemento. un elemento ha sido arrastrado a un destino vlido. un elemento deja un destino vlido. un elemento est siendo arrastrado sobre un destino vlido. se inicia en un elemento la operacin de arrastre. un elemento arrastrado y soltado en un destino vlido. la longitud de los elementos media cambia. algo malo sucede en los elementos media y su archivo de repente no est disponible (se pierde la conexin inesperadamente). el archivo del elemento media llega a su final (evento til para mostrar mensajes como Gracias por escucharme). se produce un error cuando el archivo media est siendo cargado. un elemento recibe el enfoque (focus). un elemento recibe datos introducidos por el usuario. un elemento es invlido. un usuario mantiene presionada una tecla.

30

Onkeypress Onkeyup Onload Onloadeddata onloadedmetadata Onloadstart Onmousedown Onmousemove Onmouseout Onmouseover Onmouseup Onmousewheel Onpause Onplay Onplaying Onprogress Onratechange Onreset Onscroll Onseeked Onseeking Onselect onstalled

un usuario pulsa una tecla. un usuario suelta una tecla. termina de cargarse completamente una pgina web. se carga la informacin o datos de un elemento media. los metadatos (como dimensiones y duracin) de un elemento media se cargan. el archivo del elemento media empieza a cargarse, antes de que algo est actualmente cargado. el botn del ratn se presiona hacia abajo sobre un elemento. el puntero del ratn se mueve sobre un elemento. el puntero de ratn se mueve fuera de un elemento. el puntero del ratn se sita sobre un elemento. el botn del mouse se suelta cuando est sobre un elemento. la rueda del ratn est girando. cuando un elemento media est en pausa, ya sea provocado por el usuario o mediante programacin. un elemento media est listo para empezar a reproducirse. un elemento media actualmente han comenzado a reproducirse. el navegador est en proceso de obtencin de los datos media. se cambia cada vez la velocidad de reproduccin de un elemento media. se hace click sobre el botn tipo reset de un formulario. la barra de desplazamiento de un elemento se est desplazando o en movimiento. se completa una operacin de bsqueda en un elemento media. comienza una operacin de bsqueda en un elemento media. un usuario selecciona texto de un campo de texto cualquiera. el navegador no es capaz de recuperar los datos media de 31

un elemento media, por alguna razn. Onsubmit Onsuspend se enva un formulario. la bsqueda de datos media en un elemento media se detiene antes de que est completamente cargado, por cualquier razn. la posicin de reproduccin de un elemento media cambia (como cuando un usuario avanza rpidamente hacia un punto diferente en datos media). se cambia el volumen de un elemento media (incluye tambin el ajuste de volumen a mute). un elemento media ha detenido su reproduccin, pero espera que se reanude.
Tabla 7. Atributos de eventos globales HTML5

Ontimeupdate onvolumechange Onwaiting

Cabe recalcar que los atributos de la tabla 7, se aplican a todos los elementos, pero no son tiles en todos los elementos, por ejemplo solo los elementos media recibirn un evento onvolumechange por el usuario.

1.5 Elementos HTML5. A continuacin se detallan cada unos de los elementos que contiene HTML5, con sus respectivos atributos, no hay que olvidar que la mayora de los elementos de versiones anteriores se mantienen.

Es importante mencionar que aparecen nuevos elementos para HTML5 y cada uno de estos difiere en compatibilidad con los navegadores web que existen, para ello se ha tomado como referencia cinco de los navegadores ms comunes (Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari) para mostrar en cada elemento HTML5 su existencia de compatibilidad o no.

A continuacin se puede observar la nomenclatura que se usar para descubrir si un elemento HTML5 es compatible o no con los navegadores:

32

Nombre del navegador Internet Explorer 9

Simbologa Compatible

Simbologa No Compatible

Mozilla Firefox 17.0

Opera 12.11

Google Chrome 22

Safari 5.34 Tabla 8. Simbologa de compatibilidad de los navegadores para cada elemento HTML5.

1.5.1

El elemento raz

1.5.1.1 Html

Definicin: El elemento html representa la raz de un documento HTML. Los autores pueden especificar el atributo lang en el elemento raz html, dando el idioma del documento.

Atributos: Atributos globales

Nombre Manifest Descripcin El atributo manifest da la direccin de manifiesto del documento de solicitud de cach, si es que existe Tabla 9. Atributos elemento html. Valores URL

Compatible en los navegadores:

33

Ejemplo:

Imagen 4. Ejemplo elemento html. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thehtml-element]

1.5.2

Documento de metadatos

1.5.2.1 Head

Definicin: El elemento head representa una coleccin de metadatos para el documento.

La coleccin de metadatos en un elemento head puede ser grande o pequea.

Atributos: Atributos globales

Compatible en los navegadores:

34

Ejemplo:

Imagen 5. Ejemplo elemento head. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thehead-element]

1.5.2.2 Title

Definicin: El elemento de ttulo representa el ttulo del documento o el nombre. Los autores deberan utilizar ttulos que identifican sus documentos, incluso cuando se utilizan fuera de contexto.

No debe haber ms de un elemento de ttulo por documento.

Atributos: Atributos globales

Compatible en los navegadores:

35

Ejemplo:

Imagen 6. Ejemplo elemento title. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thetitle-element]

1.5.2.3 Base

Definicin: Define una URL base para todos los enlaces en una pgina

Atributos: Atributos globales

Nombre Href Descripcin Especifica la URL base para todas las URL relativa en la pgina Target Especifica el destino predeterminado para todos los hipervnculos y formularios en la pgina _blank, _parent, _self, _top, Nombre de frame. Tabla 10. Atributos elemento base. Valores URL

Compatible en los navegadores:

36

Ejemplo:

Imagen 7. Ejemplo elemento base. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thebase-element]

1.5.2.4 Link

Definicin: El elemento de enlace permite a los autores vincular su documento a otros recursos.

Atributos: Atributos globales

Nombre Href Descripcin Especifica la ubicacin del documento vinculado Rel Obligatorio. Especifica la relacin entre el documento actual y el documento vinculado alternate archives author bookmark external first help icon last license next nofollow noreferrer Valores URL

37

pingback prefetch prev search sidebar stylesheet tag up Media Especifica con qu dispositivo el documento vinculado se mostrar. Hreflang Especifica el idioma del texto del documento vinculado Cdigo de lenguaje (lenguaje_code). Type Especifica el tipo MIME del documento vinculado Sizes Especifica el tamao del recurso vinculado. Slo para rel = "icon" Tabla 11. Atributos elemento link. Tipo MIME (MIME_Type). Algn alto x ancho. (media_query)

Compatible en los navegadores:

Ejemplo:

Imagen 8. Ejemplo elemento link. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thelink-element]

1.5.2.5 Meta

Definicin: El elemento meta representa varios tipos de metadatos que no se pueden expresar con los elementos: title, base, link, style, y script.

38

Atributos: Atributos globales

Nombre Name Descripcin Especifica un nombre para los metadatos. Valores applicationname, autor, description, generator, keywords. http-equiv Proporciona una cabecera HTTP de la informacin/valor del atributo content. Content Da el valor asociado con el atributo http-equiv o el atributo name. Charset Especifica la codificacin de caracteres del documento HTML codificacin de caracteres (character_set) Tabla 12. Atributos elemento meta. content-type, default-style, refresh. Texto

Compatible en los navegadores:

Ejemplo:

Imagen 9. Ejemplo elemento meta. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#themeta-element]

1.5.2.6 Style

Definicin: El elemento style permite a los autores insertar informacin de estilo en sus documentos. El elemento style es una de varias entradas en el modelo de procesamiento de estilo. El elemento no representa contenido para el usuario. 39

Atributos: Atributos globales

Nombre Media Descripcin Especifica qu medio/dispositivo del recurso multimedia est optimizado para aquello. scoped Especifica que los estilos se aplican nicamente al elemento padre de este elemento y los elementos de ese elemento hijo. Type Especifica el tipo MIME de la hoja de estilo Tabla 13. Atributos elemento style. text/css Scoped (media_query). Valores

Compatible en los navegadores:

Ejemplo:

Imagen 10. Ejemplo elemento style. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thestyle-element]

40

1.5.3

Scripting

1.5.3.1 Script

Definicin: El elemento de script permite a los autores incluir secuencias de comandos dinmicos y bloques de datos en sus documentos. El elemento no representa contenido para el usuario.

Cuando se usa para incluir scripts dinmicos, las secuencias de comandos o bien pueden ser embebidos en lnea o se pueden importar desde un archivo externo mediante el atributo src. Si el lenguaje no es "text/javascript", entonces el atributo type debe estar presente. Sea cual sea el lenguaje utilizado, el contenido del elemento script debe cumplir con los requisitos de la especificacin de lenguaje.

Atributos: Atributos globales

Nombre Src Descripcin Especifica la direccin URL de un archivo de script externo Async Especifica que el script se ejecuta de forma asncrona (slo para los scripts externos) Defer Especifica que el script se ejecuta cuando la pgina ha terminado de analizar (slo para los scripts externos) Type Especifica el tipo MIME de la secuencia de comandos (script) Tipo de MIME (MIME_type) charset Especifica la codificacin de caracteres utilizado en un archivo de script externo Tabla 14. Atributos etiqueta script. Codificacin de caracteres (charset). Defer Async Valores URL

41

Compatible en los navegadores:

Ejemplo:

Imagen 11. Ejemplo elemento script. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thescript-element]

1.5.3.2 Noscript

Definicin: Elemento que define una seccin sin scripts. El elemento no representa nada si el scripting est habilitado, pero si no est habilitado muestra su contenido.

Atributos: Atributos globales

Compatible en los navegadores:

42

Ejemplo:

Imagen 12. Ejemplo elemento noscript. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thenoscript-element]

1.5.4

Secciones

1.5.4.1 Body

Definicin: El elemento body representa el contenido principal del documento.

Conforme a los documentos, slo hay un elemento body.

Atributos: Atributos globales

43

Nombre Onafterprint

Descripcin Evento que se ejecuta despus de que el documento haya acabado de imprimirse

Valores Script

onbeforeprint

Evento que se ejecuta antes de que el documento haya empezado a imprimirse

Script

Onbeforeunload

Evento que se ejecuta antes de que el usuario abandone el documento (la pgina se descarga).

Script

Onblur

Evento que se ejecuta cuando la ventana del navegador pierde el foco o enfoque (focus).

Script

Onerror

Evento que se ejecuta cuando el documento no se ha cargado correctamente.

Script

Onfocus

Evento que se ejecuta cuando la ventana del navegador queda seleccionada, recibe el foco.

Script

Onhashchange

Evento que se ejecuta cuando el usuario navega a una pgina anterior en el historial de navegacin.

Script

Onload

Evento que se ejecuta cuando se carga el documento en la ventana del navegador.

Script

Onmessage

Evento que se ejecuta cuando se muestra un mensaje.

Script

Onoffline

Evento que se ejecuta cuando la pgina se desconecta.

Script

Ononline

Evento que se ejecuta cuando la pgina se pone en lnea.

Script

Onpagehide

Evento que se ejecuta cuando el navegador deja una pgina almacenada en el historial de navegacin.

Script

Onpageshow

Evento que se ejecuta cuando el

Script

44

navegador entra en una pgina almacenada en el historial de navegacin. Onpopstate Evento que se ejecuta cuando cambia el historial de la ventana del navegador. Onresize Evento que se ejecuta cuando la ventana cambia de tamao. Onscroll Evento que se ejecuta cuando un documento en la ventana del navegador se est desplazando. Onstorage Evento que se ejecuta cuando el almacenamiento se activa. Onunload Evento que se ejecuta cuando un usuario abandona la pgina. Tabla 15. Atributos elemento body. Script Script Script Script Script

Compatible en los navegadores:

Ejemplo:

Imagen 13. Ejemplo elemento body. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thebody-element]

45

1.5.4.2 Article

Definicin: El elemento article representa una composicin auto-contenido en un documento, pgina, aplicacin, o en el sitio y esto es, en principio, independientemente distribuible o reutilizable, por ejemplo podra ser un mensaje en el foro, un artculo de una revista o de un peridico, una entrada de blog, un comentario enviado por el usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

Cuando los elementos del artculo estn anidados, los elementos del artculo interiores representan artculos que estn en principio en relacin con el contenido del artculo exterior. Por ejemplo, una entrada de blog en un sitio que acepta el envo de comentarios de usuarios, podran representar los comentarios los elementos del artculo anidados en el elemento de artculo para la entrada de blog.

Atributos: Atributos globales

Compatible en los navegadores:

46

Ejemplo:

Imagen 14. Ejemplo elemento article. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thearticle-element]

1.5.4.3 Section

Definicin: El elemento de seccin representa una seccin genrica de un documento o aplicacin. Una seccin, en este contexto, es una agrupacin temtica de los contenidos, por lo general con un ttulo.

Ejemplos de secciones sera captulos, las diferentes pginas con fichas en un cuadro de dilogo con fichas, o las secciones numeradas de una tesis. Un sitio Web en su pgina de inicio se puede dividir en secciones para una introduccin, noticias e informacin de contacto.

47

Los autores pueden usar el elemento article en lugar del elemento section cuando tenga sentido sindicar el contenido del elemento.

El elemento section no es un elemento contenedor genrico. Cuando un elemento es necesario slo para fines de estilo (styling) o para los scripts, a los autores se les aconseja utilizar el elemento div en su lugar. Una regla general es que el elemento section es apropiado slo si los contenidos del elemento se enumeran explcitamente en el esquema del documento.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 15. Ejemplo elemento section. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesection-element]

48

1.5.4.4 Nav

Definicin: El elemento nav representa una seccin de una pgina que enlaza a otras pginas o a partes dentro de la pgina: una seccin con enlaces de navegacin.

No todos los grupos de enlaces en una pgina necesita estar en un elemento nav. El elemento est destinado principalmente para las secciones que constan de bloques de navegacin principales.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 16. Ejemplo elemento nav. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thenav-element]

49

1.5.4.5 Aside

Definicin: El elemento aside representa una seccin de una pgina que consta de contenido tangencialmente relacionado con el contenido alrededor del elemento aside, y que podra ser considerado por separado de ese contenido. Estas secciones se representan a menudo como barras laterales en la tipografa impresa.

El elemento puede ser utilizado para efectos tipogrficos barras laterales, para la publicidad, para grupos de elementos de navegacin, as como para otros contenidos que se considera por separado del contenido principal de la pgina.

Atributos: Atributos globales

Compatible en los navegadores:

50

Ejemplo:

Imagen 17. Ejemplo elemento aside. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theaside-element]

1.5.4.6 H1, h2, h3, h4, h5, h6

Definicin: Estos elementos representan el encabezado correspondiente a sus secciones.

Estos elementos tienen un rango determinado por el nmero de su nombre. El elemento h1 se dice que tiene el rango ms alto, el elemento h6 tiene el rango ms bajo, y dos elementos con el mismo nombre tienen el mismo valor.

51

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 18. Ejemplo elementos h1, h2, h3, h4, h5, h6. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theh1,-h2,-h3,-h4,-h5,-and-h6-elements]

1.5.4.7 Hgroup

Definicin: El elemento hgroup representa el encabezado de una seccin. El elemento se utiliza para agrupar un conjunto de elementos h1, h2, h3, h4, h5 y h6 cuando el ttulo tiene varios niveles, tales como subttulos, ttulos alternativos.

Atributos: Atributos globales

Compatible en los navegadores:

52

Ejemplo:

Imagen 19. Ejemplo elemento hgroup. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thehgroup-element]

1.5.4.8 Header

Definicin: El elemento header representa a un grupo de introduccin o de ayudas navegacin.

Un elemento header est destinado a contener por lo general la seccin de encabezado (un elemento h1, h2, h3, h4, h5, h6 o un elemento hgroup), pero esto no es necesario. El elemento header tambin puede ser utilizado para envolver una seccin de tabla de contenidos, un formulario de bsqueda, o cualquier logotipo pertinente.

Atributos: Atributos globales

Compatible en los navegadores:

53

Ejemplo:

Imagen 20. Ejemplo elemento header. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theheader-element]

1.5.4.9 Footer

Definicin: El elemento footer representa un pie de pgina de su antecesor ms prximo o seccionamiento contenido del elemento raz. El elemento footer suele contener informacin sobre su seccin, como quin la escribi, enlaces a documentos relacionados, datos de derechos de autor y similares.

Cuando el elemento de pie de pgina contiene secciones enteras, representan apndices, ndices, colofones largos, detallados acuerdos de licencia, y el contenido de este tipo.

Footer no necesariamente tiene que aparecer al final de una seccin, aunque por lo general se lo hace.

Atributos: Atributos globales

54

Compatible en los navegadores:

Ejemplo:

Imagen 21. Ejemplo elemento footer. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thefooter-element]

1.5.4.10

Address

Definicin: El elemento address representa la informacin de contacto de su ms cercano elemento article o body. Si ese es el elemento body, a continuacin, la informacin de contacto se aplica al documento como un todo.

Atributos: Atributos globales

55

Compatible en los navegadores:

Ejemplo:

Imagen 22. Ejemplo elemento address. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theaddress-element]

1.5.5

Agrupacin de contenido

1.5.5.1 P

Definicin: El elemento p representa un prrafo.

Atributos: Atributos globales

Compatible en los navegadores:

56

Ejemplo:

Imagen 23. Ejemplo elemento p. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thep-element]

1.5.5.2 Hr

Definicin: El elemento hr representa un salto de prrafo de nivel temtico, por ejemplo, un cambio de escena en una historia, o una transicin a otro tema dentro de una seccin de un libro de referencia.

Atributos: Atributos globales

Compatible en los navegadores:

57

Ejemplo:

Imagen 24. Ejemplo elemento hr. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thehr-element]

1.5.5.3 Pre

Definicin: El elemento pre representa un bloque de texto con formato previo, en el que la estructura est representada por convenciones tipogrficas en lugar de por los elementos.

Atributos: Atributos globales

Compatible en los navegadores:

58

Ejemplo:

Imagen 25. Ejemplo elemento pre. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thepre-element]

1.5.5.4 Blockquote

Definicin: El elemento blockquote representa una seccin en la que se cita de otra fuente.

El contenido dentro de un blockquote debe ser citado de otra fuente, cuya direccin, si tiene uno, puede ser citado en el atributo cite.

Si el atributo cite est presente, debe ser un URL vlido potencialmente rodeado por espacios. Para obtener el enlace citacin correspondiente, el valor del atributo se debe resolver con respecto al elemento.

Atributos: Atributos globales

Nombre Cite Descripcin Especifica la URL (fuente de la cita) Tabla 16. Atributos elemento blockquote. Valores URL

Compatible en los navegadores:

59

Ejemplo:

Imagen 26. Ejemplo elemento blockquote. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thebase-element]

1.5.5.5 Ol

Definicin: El elemento ol representa una lista de tems, donde los tems han sido intencionalmente ordenados, de tal manera que cambiando el orden cambiara el significado del documento.

Los tems de la lista son los nodos de elementos li secundarios del elemento ol, con el rbol ordenado.

Atributos: Atributos globales

Nombre Reversed Start Type Descripcin Especifica que el orden de la lista debe ser descendente (9,8,7 ...). Especifica el valor inicial de una lista ordenada Especifica el tipo de marcador a utilizar en la lista Valores Reversed Un nmero 1, A, a, I, i.

Tabla 17. Atributos elemento ol.

Compatible en los navegadores:

60

Ejemplo:

Imagen 27. Ejemplo elemento ol. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theol-element]

1.5.5.6 Ul

Definicin: El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante, es decir, donde el cambio del orden no cambiara materialmente el significado del documento.

Los elementos de la lista son los nodos de elementos li secundarios del elemento ul.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 28. Ejemplo elemento ul. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theul-element]

61

1.5.5.7 Li

Definicin: El elemento li representa un tem de una lista. Si su padre es un elemento ul, ol, o un elemento menu, entonces el elemento es un tem de la lista del elemento padre, tal como se define por los elementos. De lo contrario, el tem de la lista no ha definido la lista relacionada con relacin a cualquier otro elemento li.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 29. Ejemplo elemento li. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theli-element]

1.5.5.8 Dl

Definicin: El elemento dl representa una lista de asociacin, consta de cero o ms grupos de nombre-valor (una lista descripcin). Cada grupo debe constar de uno o ms nombres (elementos dt) seguido por uno o ms valores (elementos dd). Dentro de un solo elemento dl, no debe haber ms de un elemento dt para cada nombre. 62

Los grupos nombre-valor pueden ser trminos y definiciones, temas y valores de metadatos, preguntas y respuestas, o cualquier otro grupo de datos de nombre-valor.

Los valores dentro de un grupo son alternativas; varios prrafos que forman parte del mismo valor donde todo debe estar dentro del mismo elemento dd.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 30. Ejemplo elemento dl. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedl-element]

1.5.5.9 Dt

Definicin: El elemento dt representa el trmino o nombre, que forma parte de un grupo trminodescripcin en una lista de descripciones (elemento dl).

El elemento dt en s mismo, cuando se utiliza en un elemento dl, no indica que su contenido es un trmino que se define, pero esto se puede indicar mediante el elemento dfn.

63

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 31. Ejemplo elemento dt. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedt-element]

1.5.5.10

Dd

Definicin: El elemento dd representa la descripcin, la definicin, o valor, parte de un grupo trmino-descripcin en una lista de descripcin (elemento dl).

Atributos: Atributos globales

Compatible en los navegadores:

64

Ejemplo:

Imagen 32. Ejemplo elemento dd. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedd-element]

1.5.5.11

Figure

Definicin: El elemento figure representa un cierto contenido de flujo, opcionalmente con un ttulo o leyenda, que es autnomo y tpicamente se hace referencia como una sola unidad del flujo principal del documento.

El elemento puede as ser utilizado para anotar ilustraciones, diagramas, fotografas, los listados de cdigo, etc, que se refiere a partir del contenido principal del documento, pero que podra, sin afectar el flujo del documento, ser alejado de dicho contenido principal , por ejemplo, a un lado de la pgina, a pginas dedicadas, o a un apndice.

Atributos: Atributos globales

Compatible en los navegadores:

65

Ejemplo:

Imagen 33. Ejemplo elemento figure. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thefigure-element]

1.5.5.12

Figcaption

Definicin: El elemento figcaption representa un subttulo o leyenda para el resto de contenido del padre del elemento figcaption, el elemento figure.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo: El ejemplo se puede observar en la imagen anterior (Imagen 33).

1.5.5.13

Div

Definicin: El elemento div no tiene un significado especial. Se puede utilizar con los atributos class, lang, y title para marcar semntica comn a un grupo de elementos consecutivos.

A los autores se les recomienda ver el elemento div como un elemento de ltimo recurso, ya cuando ningn otro elemento es adecuado. El uso de elementos ms 66

apropiados en lugar del elemento div conduce a una mejor accesibilidad para los lectores y ms fcil mantenimiento para los autores.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 34. Ejemplo elemento div. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thediv-element]

1.5.6

Semntica Nivel-Texto

1.5.6.1 A

Definicin: Si el elemento tiene un atributo href, entonces representa un hipervnculo (un ancla de hipertexto) marcada por su contenido.

67

Los atributos target, rel, media, hreflang, y type deben ser omitidos si el atributo href no est presente.

Atributos: Atributos globales

Nombre Href Descripcin Especifica la direccin URL de la pgina a donde el enlace va. Target Especifica dnde abrir el documento vinculado _blank, _parent, _self, _top, Nombre de frame. Rel Especifica la relacin entre el documento actual y el documento vinculado alternate, autor, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag. Media Especifica con qu dispositivo el documento vinculado se mostrar. Hreflang Especifica el idioma del texto del documento vinculado Cdigo de lenguaje (lenguaje_code). Type Especifica el tipo MIME del documento vinculado Tabla 18. Atributos elemento a. Tipo MIME (MIME_Type). (media_query) Valores URL

68

Compatible en los navegadores:

Ejemplo:

Imagen 35. Ejemplo elemento a. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thea-element]

1.5.6.2 Em

Definicin: El elemento em representa nfasis de su contenido.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 36. Ejemplo elemento em. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theem-element]

69

1.5.6.3 Strong

Definicin: El elemento strong representa una gran importancia para su contenido.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 37. Ejemplo elemento strong. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thestrong-element]

1.5.6.4 Small

Definicin: El elemento small representa comentarios adversos como letra pequea.

Small tpicamente incluye avisos legales, advertencias, restricciones legales o derechos de autor. El elemento small a veces tambin se usa para la atribucin o para satisfacer los requisitos de licencia.

Atributos: Atributos globales

70

Compatible en los navegadores:

Ejemplo:

Imagen 38. Ejemplo elemento small. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesmall-element]

1.5.6.5 S

Definicin: El elemento s representa el texto que ya no es correcto, exacto o pertinente.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 39. Ejemplo elemento s. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thes-element]

71

1.5.6.6 Cite

Definicin: El elemento cite representa el ttulo de una obra (por ejemplo, un libro, un artculo, un ensayo, un poema, una partitura, una cancin, un guin, una pelcula, un programa de televisin, un juego, una escultura, una pintura, una obra de teatro, una pera, un musical, una exposicin, un caso legal, etc.). Esto puede ser un trabajo que se cita o se hace referencia en detalle (es decir, una cita), o simplemente puede ser una obra que se menciona de pasada.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 40. Ejemplo elemento cite. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thecite-element]

1.5.6.7 Q

Definicin: El elemento q representa algunos contenidos de fraseo citados de otra fuente.

El uso de elementos q para marcar citas es completamente opcional; utilizando puntuaciones como las comillas sin elementos q, es tan correcto de igual manera.

72

Atributos: Atributos globales

Nombre Cite Descripcin Especifica la direccin URL de origen de la cita Tabla 19. Atributos elemento q. Valores URL

Compatible en los navegadores:

Ejemplo:

Imagen 41. Ejemplo elemento q. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theq-element]

1.5.6.8 Dfn

Definicin: El elemento dfn representa la instancia de definicin de un trmino.

Atributos: Atributos globales

Compatible en los navegadores:

73

Ejemplo:

Imagen 42. Ejemplo elemento dfn. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedfn-element]

1.5.6.9 Abbr

Definicin: El elemento abbr representa una abreviatura o sigla, opcionalmente con su expansin. El atributo title puede ser utilizado para proporcionar una expansin de la abreviatura. El atributo, si se especifica, debe contener la expansin de la abreviatura, y nada ms.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 43. Ejemplo elemento abbr. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theabbr-element]

74

1.5.6.10

Time

Definicin: El elemento time representa su contenido, junto con una forma legible por la mquina de los contenidos en el atributo datetime. El tipo de contenido se limita a los diversos tipos de fechas, horas, compensaciones horarias y duraciones.

Atributos: Atributos globales

Nombre datetime Descripcin Da la fecha/hora que se especifica. De lo contrario, la fecha/hora est dada por los contenidos del elemento Tabla 20. Atributos elemento time. Valores Formato de fecha/hora (datetime)

Compatible en los navegadores:

Ejemplo:

Imagen 44. Ejemplo elemento time. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thetime-element]

1.5.6.11

Code

Definicin: El elemento code representa un fragmento de cdigo informtico. Esto podra ser un nombre de elemento XML, un nombre de archivo, un programa informtico, o cualquier otra cadena que una computadora podra reconocer.

75

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 45. Ejemplo elemento code. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thecode-element]

1.5.6.12

Var

Definicin: El elemento var representa una variable. Esta podra ser una variable real en una expresin matemtica o contexto de la programacin, un identificador que representa una constante, un smbolo que indique una cantidad fsica, un parmetro de funcin, o simplemente ser un trmino que se utiliza como un marcador de posicin.

Atributos: Atributos globales

Compatible en los navegadores:

76

Ejemplo:

Imagen 46. Ejemplo elemento var. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thevar-element]

1.5.6.13

Samp

Definicin: El elemento samp representa (muestra) la salida (output) de un programa o sistema informtico.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 47. Ejemplo elemento samp. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesamp-element]

1.5.6.14

Kbd

Definicin: El elemento kbd representa la entrada del usuario (tpicamente la entrada de teclado, aunque tambin puede ser utilizado para representar otra entrada, tales como comandos de voz).

77

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 48. Ejemplo elemento kbd. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thekbd-element]

1.5.6.15

Sub

Definicin: El elemento sub define texto subndice. El texto de subndice aparece por debajo de la lnea de base. El texto de subndice se puede utilizar para las frmulas qumicas, como H2O.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 49. Ejemplo elemento sub. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesub-and-sup-elements]

78

1.5.6.16

Sup

Definicin: El elemento sup define el texto de superndice. El texto superndice aparece por encima de la lnea de base. Superndice texto puede ser utilizado para notas al pie, como WWW [1].

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 50. Ejemplo elemento sup. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesub-and-sup-elements]

1.5.6.17

Definicin: El elemento i define una parte de texto en una voz alternativa o estado de nimo. El contenido del elemento normalmente se muestra en cursiva.

Este elemento se puede utilizar para indicar un trmino tcnico, una frase de otra lengua, un pensamiento, o un nombre de barco, etc.

Atributos: Atributos globales

79

Compatible en los navegadores:

Ejemplo:

Imagen 51. Ejemplo elemento i. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thei-element]

1.5.6.18

Definicin: El elemento b representa un fragmento de texto al que se llama la atencin con fines utilitarios sin transmitir ninguna importancia extra y sin que ello implique una voz alternativa o estado de nimo, tales como palabras clave en un resumen del documento, los nombres de productos en sus revisiones, palabras recurribles en texto interactivo impulsado por software.

Se debe utilizar como ltimo recurso, cuando no hay otra etiqueta que sea la ms apropiada.

El contenido del elemento normalmente se muestra en negrita.

Atributos: Atributos globales

Compatible en los navegadores:

80

Ejemplo:

Imagen 52. Ejemplo elemento b. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theb-element]

1.5.6.19

Definicin: El elemento u representa un texto que debe ser estilsticamente diferente de texto normal, tales como palabras mal escritas o nombres propios en chino.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 53. Ejemplo elemento u. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_u.asp]

1.5.6.20

Mark

Definicin: El elemento mark representa un texto marcado o resaltado.

Atributos: Atributos globales

81

Compatible en los navegadores:

Ejemplo:

Imagen 54. Ejemplo elemento mark. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#themark-element]

1.5.6.21

Ruby

Definicin: El elemento ruby representa una anotacin ruby. Las anotaciones ruby se utilizan para la tipografa en el Este de Asia, para mostrar la pronunciacin de los caracteres de Asia oriental.

Utilizar el elemento ruby junto con el tr y/o elementos rp: El elemento ruby consta de uno o ms caracteres que necesitan una explicacin/pronunciacin, y un elemento rt que da esa informacin, y un elemento opcional rp que define lo que deben mostrar los navegadores que no soportan anotaciones ruby.

Atributos: Atributos globales

Compatible en los navegadores:

82

Ejemplo:

Imagen 55. Ejemplo elemento ruby. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theruby-element]

1.5.6.22

Rt

Definicin: El elemento rt define una explicacin o la pronunciacin de caracteres (para la tipografa del Este de Asia) en una anotacin de ruby.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo: El ejemplo se puede observar en la imagen anterior (imagen 55).

1.5.6.23

Rp

Definicin: El elemento rp define lo que se mostrar si un navegador no es compatible con las anotaciones de ruby.

Atributos: Atributos globales

Compatible en los navegadores:

83

Ejemplo:

Imagen 56. Ejemplo elemento rp. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#therp-element]

1.5.6.24

Bdi

Definicin: El elemento bdi representa un fragmento de texto que va a ser aislado de su entorno para los fines de formato de texto bidireccional.

BDI representa Bi-direccional aislamiento. El atributo global dir est predeterminado en auto en este elemento.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 57. Ejemplo elemento bdi. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thebdi-element]

84

1.5.6.25

Bdo

Definicin: El elemento bdo representa direccionalidad explcita de control de formato de texto para sus hijos. Esto permite a los autores anular el algoritmo bidireccional de Unicode (BDI) especificando explcitamente una direccin.

Los autores deben especificar el atributo dir en este elemento, con el valor ltr para especificar una redefinicin de izquierda a derecha y con el valor rtl para especificar una redefinicin de derecha a izquierda.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 58. Ejemplo elemento bdo. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_bdo.asp]

1.5.6.26

Span

Definicin: El elemento span no significa nada por s mismo, pero puede ser til cuando se utiliza junto con los atributos globales, por ejemplo, class, lang, o dir. Esto representa a sus hijos.

Atributos: Atributos globales 85

Compatible en los navegadores:

Ejemplo:

Imagen 59. Ejemplo elemento span. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_span.asp]

1.5.6.27

Br

Definicin: El elemento br representa un salto de lnea.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 60. Ejemplo elemento br. Fuente: W3 Schools [Disponible en: http://dev.w3.org/html5/spec/single-page.html#the-brelement]

1.5.6.28

Wbr

Definicin: La oportunidad de salto de palabras (wbr) especifica donde, en un texto debera agregarse un salto de lnea. 86

Consejo: Cuando una palabra es demasiado larga, o se tiene miedo de que el navegador rompa las lneas en el lugar equivocado, se puede utilizar el elemento wbr para agregar palabras de oportunidades de quiebre (WBR).

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 61. Ejemplo elemento wbr. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_wbr.asp]

1.5.7

Ediciones

1.5.7.1 Ins

Definicin: El elemento ins representa una adicin al documento una insercin de un texto en un documento.

Los navegadores por lo general trazan una lnea como de subrayado cuando se inserta un texto con el elemento ins.

Atributos: Atributos globales

87

Nombre Cite

Descripcin Especifica una URL a un documento que explica la razn por la que el texto ha sido insertado/cambiado

Valores URL

datetime

Especifica la fecha y hora en que se insert/cambi el texto. Tabla 21. Atributos elemento ins.

YYYY-MMDDThh:mm:ssTZD

Compatible en los navegadores:

Ejemplo:

Imagen 62. Ejemplo elemento ins. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theins-element]

1.5.7.2 Del

Definicin: El elemento del representa un texto que ha sido borrado de un documento.

Atributos: Atributos globales

88

Nombre Cite

Descripcin Especifica una URL a un documento que explica la razn por la que el texto ha sido insertado/cambiado

Valores URL

datetime

Especifica la fecha y hora en que se insert/cambi el texto. Tabla 22. Atributos elemento del.

YYYY-MMDDThh:mm:ssTZD

Compatible en los navegadores:

Ejemplo:

Imagen 63. Ejemplo elemento del. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedel-element]

1.5.8

Contenido incrustado (embebido)

1.5.8.1 Img

Definicin: Un elemento img representa una imagen.

La imagen dada por los atributos src es el contenido incrustado, el valor del atributo alt proporciona contenido equivalente para aquellos que no pueden procesar las imgenes o que han deshabilitado la carga de imgenes.

89

El atributo src debe estar presente, y debe contener una direccin URL vlida que no est vaca, potencialmente rodeado de espacios hacen referencia recursos nointeractivos.

Los requisitos anteriores implican que las imgenes pueden ser mapas de bits estticos (por ejemplo, los archivos PNG GIF, JPEG), documentos vectoriales de una sola pgina (archivos PDF de una sola pgina, los archivos XML con un elemento raz SVG), mapas de bits animados (APNGs, GIFs animados), vector de dibujos animados grficos (XML archivos con un elemento raz SVG que utilizan animacin SMIL declarativa), y as sucesivamente. Sin embargo, estas definiciones excluyen archivos SVG con scripts, archivos de multipgina PDF, archivos interactivos MNG, documentos HTML, documentos de texto sin formato, etc.

Atributos: Atributos globales

Nombre Alt Descripcin Especifica un texto alternativo para una imagen Src Especifica la direccin URL de una imagen Crossorigin Su propsito es permitir que las imgenes de los sitios de terceros Anonymous, useURL Valores texto

permitan acceso a orgenes mltiples credentials. (cross-origin), para usar con canvas. Usemap Especifica una imagen como un mapa de imagen del lado del cliente. Nombre del mapa (#mapname) Ismap Especifica una imagen como un mapa de imagen del lado del servidor. Width Especifica el ancho de una imagen Tamao en Pixeles Height Especifica el alto de una imagen Tamao en Pixeles Tabla 23. Atributos elemento img. ismap

90

Compatible en los navegadores:

Ejemplo:

Imagen 64. Ejemplo elemento img. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theimg-element]

1.5.8.2 Iframe

Definicin: El elemento iframe representa un contexto de navegacin anidada.

Especifica un marco flotante, un marco flotante se utiliza para insertar otro documento dentro del documento HTML actual.

Atributos: Atributos globales

Nombre Src Descripcin Especifica la direccin del documento para insertar en el <iframe> Srcdoc Especifica el contenido HTML de la pgina para mostrar en el <iframe> Name Especifica el nombre de un <iframe> Sandbox Permite un conjunto de restricciones adicionales para el contenido en el <iframe> "", allow-forms, allow-sameorigin, allow-scripts, Un nombre Cdigo HTML Valores URL

91

allow-topnavigation. Seamless Especifica que el <iframe> debe parecer que es una parte del documento que contiene. Width Especifica el ancho de un <iframe> Tamao en pixeles Height Especifica el alto de un <iframe> Tamao en pixeles Tabla 24. Atributos elemento iframe. Seamless

Compatible en los navegadores:

Ejemplo:

Imagen 65. Ejemplo elemento iframe. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theiframe-element]

1.5.8.3 Embed

Definicin: El elemento embed representa un punto de integracin para una aplicacin externa (normalmente no HTML) o contenido interactivo.

Atributos: Atributos globales

92

Nombre Height

Descripcin Especifica la altura del contenido integrado (<embed>)

Valores Tamao en pixeles URL

Src

Especifica la direccin del archivo externo para empotrar

Type

Especifica el tipo MIME del contenido integrado

Tipo de MIME (MIME_type)

Width

Especifica el ancho del contenido integrado (<embed>) Tabla 25. Atributos elemento embed.

Tamao en pixeles

Compatible en los navegadores:

Ejemplo:

Imagen 66. Ejemplo elemento embed. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theembed-element]

1.5.8.4 Object

Definicin: El elemento object puede representar un recurso externo, que, dependiendo del tipo de recurso, tanto ser tratado como una imagen, como un contexto de navegacin anidada, o un recurso externo a ser procesados por un plugin.

Atributos: Atributos globales

93

Nombre Data

Descripcin Especifica la direccin URL del recurso a ser utilizado por el objeto

Valores URL

Type

Especifica el tipo MIME de los datos especificados en el atributo data

Tipo de MIME (MIME_type)

typemustmatch

Indica que el recurso especificado por el atributo data es slo para ser usado si el valor del atributo type y el tipo de contenido del recurso mencionado antes coinciden o son iguales. El atributo typemustmatch no debe especificarse a menos que el atributo date y el atributo type estn presentes.

typemustmatch

Name Usemap

Especifica el nombre del objeto Especifica el nombre de un mapa de imagen del lado del cliente para ser utilizado con el objeto

Un nombre Nombre del mapa (#mapname) ID del form (form_id) Tamao en pixeles

Form

Especifica uno o ms forms al que pertenece el objeto.

Width

Especifica el ancho del objeto

Height

Especifica el alto del objeto

Tamao en pixeles

Tabla 26. Atributos elemento object.

Compatible en los navegadores:

94

Ejemplo:

Imagen 67. Ejemplo elemento object. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theobject-element]

1.5.8.5 Param

Definicin: El elemento param define los parmetros para plugins invocados por elementos objeto. No representa nada en s mismo.

Atributos: Atributos globales

Nombre Name Descripcin Especifica el nombre del parmetro (param) Value Especifica el valor del parmetro Tabla 27. Atributos elemento param. Un valor Valores Un nombre

Compatible en los navegadores:

95

Ejemplo:

Imagen 68. Ejemplo elemento param. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theparam-element]

1.5.8.6 Video

Definicin: Un elemento video se utiliza para la reproduccin de vdeos o pelculas y archivos de audio con subttulos.

El contenido puede ser proporcionado dentro del elemento de vdeo. El navegador no muestra ese contenido para el usuario, sino que est pensado para los navegadores web ms antiguos que no soportan vdeo, por lo que los plugins de vdeo antiguos puede intentar reproducirse, o para mostrar texto a los usuarios de estos navegadores antiguos informndoles de cmo acceder a el contenido de vdeo.

Subttulos pueden ser proporcionados, ya sean incrustados en la secuencia de vdeo o como archivos externos usando el elemento de pista (track).

Atributos: Atributos globales

96

Nombre Src

Descripcin Especifica la direccin URL del archivo de vdeo

Valores URL

Crossorigin

Es un atributo de ajustes de CORS. CORS es sinnimo de intercambio de recursos de orgenes mltiples. El propsito del atributo crossorigin es que le permite configurar las peticiones CORS de datos obtenidos del elemento.

Anonymous, Usecredentials.

Poster

Especifica una imagen que se muestra mientras el vdeo se carga, o hasta que el usuario pulse el botn de reproduccin.

URL

Preload

Especifica si y cmo el autor piensa que el video debe ser cargado cuando se carga la pgina.

Auto, Metadata, None. autoplay

Autoplay

Especifica que el vdeo comenzar a reproducirse tan pronto como est listo.

Mediagroup

Para sincronizar la reproduccin de vdeos (o elementos multimedia). Permite especificar los elementos media para enlazar. El valor es una cadena de texto, por ejemplo: mediagroup=movie. Elementos videos/media con el mismo valor que enlaza automticamente el navegador. Un ejemplo de donde el atributo MediaGroup se podra utilizar es donde usted necesita para superponer una pista intrprete de lenguaje de un archivo de pelcula en la parte superior de otro.

Cadena de texto

Loop

Especifica que el vdeo comenzar

Loop

97

otra vez, cada vez que se termin Muted Especifica que la salida de audio del video debera ser silenciado Controls Especifica los controles de vdeo que se debe mostrar (como botn de reproduccin/pausa, etc). Width Establece el ancho del reproductor de vdeo Height Establece el alto del reproductor de vdeo Tabla 28. Atributos elemento video. Tamao en pixeles Tamao en pixeles Controls Muted

Compatible en los navegadores:

Ejemplo:

Imagen 69. Ejemplo elemento video. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thevideo-element]

1.5.8.7 Audio

Definicin: Un elemento audio representa un flujo de sonido o de audio.

El contenido puede ser proporcionado en el interior del elemento audio. Los navegadores no muestran ese contenido para el usuario, sino que est pensado para los navegadores web antiguos que no son compatibles con audio, por lo que los plugins de audio que se ponga dentro del elemento audio pueden intentar reproducirse, o para mostrar texto a los usuarios de estos navegadores antiguos informndoles de cmo acceder a el contenido de audio.

98

Atributos: Atributos globales

Nombre Src

Descripcin Especifica la direccin URL del archivo de sonido

Valores URL

Crossorigin

Es un atributo de ajustes de CORS. CORS es sinnimo de intercambio de recursos de orgenes mltiples. El propsito del atributo crossorigin es que le permite configurar las peticiones CORS de datos obtenidos del elemento.

Anonymous, Usecredentials.

Preload

Especifica si y cmo el autor piensa que el audio debe ser cargado cuando se carga la pgina.

Auto, Metadata, None. autoplay

Autoplay

Especifica que el audio comenzar a reproducirse tan pronto como est listo.

Mediagroup

Para sincronizar la reproduccin de audios (o elementos multimedia). Permite especificar los elementos media para enlazar. El valor es una cadena de texto, por ejemplo: mediagroup=movie. Elementos videos/media con el mismo valor que enlaza automticamente el navegador. Un ejemplo de donde el atributo MediaGroup se podra utilizar es donde usted necesita para superponer una pista intrprete de lenguaje de un archivo de pelcula en la parte superior de otro.

Cadena de texto

Loop

Especifica que el vdeo comenzar otra vez, cada vez que se termin

Loop

99

Muted

Especifica que la salida de audio del video debera ser silenciado

Muted

Controls

Especifica los controles de vdeo que se debe mostrar (como botn de reproduccin/pausa, etc). Tabla 29. Atributos elemento audio.

Controls

Compatible en los navegadores:

Ejemplo:

Imagen 70. Ejemplo elemento audio. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_audio.asp]

1.5.8.8 Source

Definicin: El elemento source permite a los autores especificar mltiples alternativas de recursos para elementos media. No representa nada en s mismo.

Atributos: Atributos globales

Nombre Src Type Descripcin Especifica la direccin URL del archivo multimedia. Especifica el tipo MIME del recurso multimedia Especifica el tipo de recurso multimedia Tabla 30. Atributos elemento source. Valores URL Tipo de MIME (MIME_type) (media_query)

media

100

Compatible en los navegadores:

Ejemplo:

Imagen 71. Ejemplo elemento source. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thesource-element]

1.5.8.9 Track

Definicin: El elemento track permite a los autores especificar explcitamente externas programadas pistas de texto para los elementos media. No representa nada en s mismo.

Atributos: Atributos globales

Nombre Kind Descripcin Especifica el tipo de pista de texto Valores captions, chapters, descriptions, metadata, subtitles. Src Obligatorio. Especifica la direccin URL del archivo de pista Srclang Especifica el lenguaje de los datos de la pista de texto (necesario si kind = "subtitles"). El valor debe ser una direccin vlida etiqueta de lenguaje BCP47. Cdigo de lenguaje (language_code) URL

101

Label

Especifica el ttulo de la pista de texto

texto

Default

Especifica que la pista est habilitado si las preferencias de los usuarios no indican que otra pista sera ms apropiado. Tabla 31. Atributos elemento track.

default

Compatible en los navegadores:

Ejemplo:

Imagen 72. Ejemplo elemento track. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thetrack-element]

1.5.8.10

Canvas

Definicin: El elemento canvas se utiliza para dibujar grficos, grficos de juego, arte, u otras imgenes visuales, sobre la marcha, a travs de secuencias de comandos (normalmente JavaScript).

El elemento canvas es slo un contenedor de grficos, se debe utilizar un script para extraer realmente los grficos.

Atributos: Atributos globales

102

Nombre Width

Descripcin Especifica el ancho del canvas.

Valores Tamao en pixeles

Height

Especifica el alto del canvas.

Tamao en pixeles

Tabla 32. Atributos elemento canvas.

Compatible en los navegadores:

Ejemplo:

Imagen 73. Ejemplo elemento canvas. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_canvas.asp]

1.5.8.11

Map

Definicin: El elemento map, junto con algn elemento area, define un mapa de imagen. El elemento representa a sus hijos.

El atributo name del elemento es requerido y se asocia con el atributo usemap del elemento img y crea una relacin entre la imagen y el mapa. El elemento map contiene una serie de elementos area, que define las reas seleccionables en el mapa de imgenes.

Atributos: Atributos globales 103

Nombre Name

Descripcin Obligatorio. Especifica el nombre de una imagen de mapa.

Valores Nombre del mapa (mapname)

Tabla 33. Atributos elemento map.

Compatible en los navegadores:

Ejemplo:

Imagen 74. Ejemplo elemento map. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#themap-element]

1.5.8.12

Area

Definicin: El elemento area define un rea dentro de una imagen de mapa (una imagen del mapa es una imagen con reas seleccionables).

El elemento area siempre est anidado dentro de un elemento map. 104

Atributos: Atributos globales

Nombre Alt Descripcin Especifica un texto alternativo para la zona. Requerido si el atributo href est presente Coords Especifica las coordenadas del rea Segn el shape: rect: left, top, right, bottom. circle: center-x, centery, radius. poly: x1, y1, x2, y2, ... Valores Texto

shape

Especifica la forma (shape) del rea.

Default, Rect, Circle, Poly.

Href

Especifica el destino del hipervnculo para el rea

URL

target

Especifica dnde abrir la direccin URL de destino

_blank, _parent, _self, _top, Nombre de un frame.

Rel

Especifica la relacin entre el documento actual y la URL de destino

alternate, autor, bookmark, help, license, next, nofollow,

105

noreferrer, prefetch, prev, search, tag. media Especifica qu medio/dispositivo del recurso multimedia est optimizado para aquello. hreflang Especifica el idioma o lenguaje de la URL de destino Cdigo de lenguaje o idioma (language_code) Type Especifica el tipo MIME de la direccin URL de destino Tabla 34. Atributos elemento area. Tipo de MIME (MIME_type) (media_query).

Compatible en los navegadores:

Ejemplo:

Imagen 75. Ejemplo elemento area. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thearea-element]

106

1.5.9

Datos tabulares

1.5.9.1 Table

Definicin: El elemento table representa los datos con ms de una dimensin, en la forma de una tabla.

El elemento table participa en el modelo de tabla. Las tablas tienen filas, columnas y celdas dadas por sus descendientes. Las filas y columnas formar una rejilla; celdas de una tabla que debe cubrir completamente la red sin solapamiento.

Atributos: Atributos globales

Nombre Border Descripcin Especifica si las celdas de la tabla debe tener un borde o no. Tabla 35. Atributos elemento table. Valores 1

Compatible en los navegadores:

107

Ejemplo:

Imagen 76. Ejemplo elemento table. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thetable-element]

1.5.9.2 Caption

Definicin: El elemento caption representa el ttulo de la tabla que es su padre, si tiene un padre y ese es un elemento table.

El elemento caption participa en el modelo de tabla.

Debe insertarse inmediatamente despus de del elemento table.

Atributos: Atributos globales

Compatible en los navegadores:

108

Ejemplo:

Imagen 77. Ejemplo elemento caption. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_caption.asp]

1.5.9.3 Colgroup

Definicin: El elemento colgroup representa un grupo de una o ms columnas de la tabla que es su padre, si tiene un padre y ese es un elemento table.

Si el elemento colgroup no contiene elementos col, entonces el elemento debera tener el atributo span, cuyo valor vlido debe ser un nmero entero no negativo mayor que cero.

El elemento colgroup y su atributo span participan en el modelo de tabla.

Atributos: Atributos globales

Nombre Span Descripcin Especifica el nmero de columnas que debera abarcar un grupo de columnas. Tabla 36. Atributos elemento colgroup. Valores Un nmero.

Compatible en los navegadores:

109

Ejemplo:

Imagen 78. Ejemplo elemento colgroup. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_colgroup.asp]

1.5.9.4 Col

Definicin: Si un elemento col tuviera un padre y ese fuera un elemento colgroup y este ltimo fuera hijo de un elemento padre table, entonces el elemento col representa una o ms columnas del grupo de columnas representadas por colgroup.

Atributos: Atributos globales

Nombre Span Descripcin Especifica el nmero de columnas que debera abarcar un grupo de columnas. Tabla 37. Atributos elemento col. Valores Un nmero.

Compatible en los navegadores:

110

Ejemplo: El ejemplo se puede observar en la imagen anterior (imagen 78).

1.5.9.5 Tbody

Definicin: El elemento tbody representa un bloque de filas que se componen de un cuerpo de datos para un elemento table padre, si el elemento tbody tuviera un padre y sea un table.

El elemento tbody participa en el modelo de tabla.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 79. Ejemplo elemento tbody. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_tbody.asp]

111

1.5.9.6 Thead

Definicin: El elemento thead representa el bloque de filas que se componen de las etiquetas (labels) de columna (cabeceras) para el elemento table padre, si el elemento thead tuviera un padre y este sea un elemento table.

El elemento thead participa en el modelo de tabla.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 80. Ejemplo elemento thead. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_thead.asp]

112

1.5.9.7 Tfoot

Definicin: El elemento tfoot representa un bloque de filas que se componen de los sumarios de columna (pies de pgina) para el elemento table padre, si el elemento tfoot tuviera un padre y un elemento table.

El elemento tfoot participa en el modelo de tabla.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo: El ejemplo se puede observar en la imagen anterior (imagen 80).

1.5.9.8 Tr

Definicin: El elemento tr representa una fila de celdas en una tabla.

El elemento tr participa en el modelo de tabla.

Atributos: Atributos globales

Compatible en los navegadores:

113

Ejemplo:

Imagen 81. Ejemplo elemento tr. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_tr.asp]

1.5.9.9 Td

Definicin: El elemento td representa una celda de datos en una tabla.

El elemento td y sus atributos colspan, rowspan y headers participan en el modelo de tabla.

Atributos: Atributos globales

Nombre Colspan Descripcin Especifica el nmero de columnas que una celda debe abarcar Rowspan Establece el nmero de filas que una celda debe abarcar Headers Especifica una lista separada por espacios de celdas de encabezado que contienen informacin acerca de esta celda. El valor debe coincidir con el identificador de la celda de cabecera (que se establece mediante el atributo id). Este atributo es til para navegadores no visuales. Tabla 38. Atributos elemento td. Id de celda de encabezado (header_id) Un nmero Valores Un nmero.

114

Compatible en los navegadores:

Ejemplo:

Imagen 82. Ejemplo elemento td. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_td.asp]

1.5.9.10

Th

Definicin: El elemento th representa una celda de encabezado en una tabla.

Atributos: Atributos globales

Nombre Colspan Descripcin Especifica el nmero de columnas que una celda de encabezado debe abarcar Especifica el nmero de filas que una celda de encabezado debe abarcar Especifica una lista separada por espacios de celdas de encabezado que contienen informacin acerca de esta celda. El valor debe coincidir con el identificador de la celda de cabecera (que se establece mediante el atributo id). Este atributo es til para navegadores no visuales. Especifica si una celda de encabezado es un encabezado de una columna, fila o grupo de columnas o filas. Especifica una versin abreviada del contenido de una celda de encabezado Tabla 39. Atributos elemento th. Valores Un nmero

rowspan

Un nmero

Headers

Id de celda de encabezado (header_id)

Scope

Abbr

Col, colgroup, row, rowgroup. Texto

115

Compatible en los navegadores:

Ejemplo:

Imagen 83. Ejemplo elemento th. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theth-element]

1.5.10 Formularios

1.5.10.1

Form

Definicin: El elemento form representa una coleccin de elementos asociados a formularios, algunos de los cuales pueden representar valores editables que se pueden enviar a un servidor para su procesamiento.

Atributos: Atributos globales

116

Nombre Accept-charset

Descripcin Especifica la codificacin de caracteres que se van a utilizar para el envo del formulario

Valores codificacin de caracteres (character_set) URL

Action

Especifica dnde enviar el formulario de datos (form-data) cuando se enva un formulario

Autocomplete

Especifica si un formulario debe tener autocompletar activado o desactivado.

On, off.

Enctype

Especifica cmo se codificar la los datos del formulario (form-data) cuando se enva al servidor (slo para method = "post")

application/xwww-formurlencoded, multipart/formdata, text/plain.

Method

Especifica el mtodo HTTP a utilizar al enviar los datos de un formulario (form-data)

Get, post.

Name

Especifica el nombre de un formulario

Texto

Novalidate

Especifica que el formulario no debe ser validado cuando se trate de enviar el formulario (submitted)

Novalidate

Target

Especifica dnde se debe mostrar la respuesta que se recibe despus de enviar el formulario

_blank, _self, _parent, _top.

Tabla 40. Atributos elemento form.

Compatible en los navegadores:

117

Ejemplo:

Imagen 84. Ejemplo elemento form. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theform-element]

1.5.10.2

Fieldset

Definicin: El elemento fieldset representa un conjunto de controles de formulario opcionalmente agrupados bajo un nombre comn.

El nombre del grupo est dado por el primer elemento legend que es un hijo del elemento fieldset.

Atributos: Atributos globales

Nombre Disabled Descripcin Especifica que un grupo de elementos de formulario relacionados deben ser desactivados Form Especifica uno o ms formularios al que pertenece el fieldset. ID del formulario (form_id) Name Especifica el nombre del fieldset Tabla 41. Atributos elemento fieldset. Texto Valores Disabled

Compatible en los navegadores:

118

Ejemplo:

Imagen 85. Ejemplo elemento fieldset. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thefieldset-element]

1.5.10.3

Legend

Definicin: El elemento legend representa un ttulo o leyenda para los elementos fieldset.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo:

Imagen 86. Ejemplo elemento legend. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_legend.asp]

119

1.5.10.4

Label

Definicin: El elemento label define una etiqueta o ttulo para un control de formulario. El ttulo debe estar asociado a ese control del formulario.

El elemento label no hace nada especial para el usuario. Sin embargo, proporciona una mejora de uso del ratn para los usuarios, ya que si el usuario hace clic en el texto dentro del elemento label, cambia o se alterna con el control asociado.

El atributo for del elemento label debe ser igual al atributo id del control relacionado para atarlos o asociarlos juntos.

Atributos: Atributos globales

Nombre Form

Descripcin Especifica uno o ms formularios al que pertenece el label.

Valores ID del formulario (form_id)

For

Especifica el control de formulario a la que este elemento pertenece. Este valor debe ser el mismo que el valor del ID del control asociado.

ID del elemento o control de formulario asociado (element_id)

Tabla 42. Atributos elemento label.

Compatible en los navegadores:

120

Ejemplo:

Imagen 87. Ejemplo elemento label. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_label.asp]

1.5.10.5

Input

Definicin: El elemento input representa un tipo de campo de datos, por lo general con un control de formulario (form), para permitir que el usuario edite los datos.

Atributos: Atributos globales

Nombre Accept Descripcin Especifica los tipos de archivo que el servidor acepta (solo para type=file) Valores Audio/*, Video/*, Image/*, Tipo MIME (MIME_type). Alt Especifica un texto alternativo para las imgenes (slo para type = "image") Autocomplete Evita que el navegador de el uso de "autocompletar" en este control. Puede ser til para los datos confidenciales, como datos bancarios, etc Autofocus Especifica que un elemento <input> automticamente debe recibir el foco cuando se carga la pgina autofocus On, off. Texto

121

Checked

Especifica que un elemento <input> debe ser pre-seleccionado cuando se cargue la pgina (para type = "checkbox" o type = "radio")

Checked

Dirname

Determina la direccin del texto presentado en el campo de entrada.

El valor de este atributo puede ser una cadena de texto, como un nombre para el campo. Por ejemplo, si se especifica el atributo como dirname = "text_dir", una vez que el formulario ha sido enviado, los datos podran tener este aspecto: text_dir = ltr.

Disabled

Especifica que un elemento <input> deben ser desactivados

Disabled

Form

Especifica uno o ms formularios al que pertenece el input.

ID del formulario (form_id)

Formaction

Especifica la direccin URL del archivo que va a procesar el control de entrada cuando se enva el formulario (para type = "submit" y tipo "image" =)

URL

Formenctype

Especifica cmo el formulario de datos se debera codificar antes de enviarlo a un servidor. Slo para type = "submit" y type =

application/xwww-formurlencoded, multipart/form-

122

image

data, text/plain.

Formmethod

Define el mtodo HTTP para enviar datos a la URL de la accin (para type = "submit" y type = "image")

Get, post

Formnovalidate

Define que los elementos del formulario no deben ser validados cuando se intente enviar los datos al servidor (submitted)

Formnovalidate

Formtarget

Especifica dnde se debe mostrar la respuesta que se recibe despus de enviar el formulario (para type = "submit" y type = "image")

_blank, _selft, _parent, _top, Nombre de un frame (frame_name)

Height

Especifica el alto de un elemento <input> (slo para type = "image")

Tamao en pixeles ID de un elemento datalist (datalist_id) Una vlida cadena de fecha (date), Un nmero.

List

Se refiere a un elemento de <datalist> que contiene opciones predefinidas para un elemento <input>

Max

Especifica el valor mximo para un elemento <input>

Maxlenght

Especifica el nmero mximo de caracteres permitido en un elemento <input>

Un nmero

Min

Especifica el valor mnimo para un elemento <input>

Una vlida cadena de fecha (date), Un nmero.

Multiple

Especifica que el usuario puede introducir ms de un valor en un elemento <input>

Multiple

123

Name

Especifica el nombre de un elemento <input>

Un nombre

Pattern

Especifica una expresin regular con la que el valor de un elemento <input> es chequeado o comprobado su validez (checked)

Expresin regular (regexp)

Placeholder

Especifica una pista corta que describe el valor esperado de un elemento <input>

Texto

Readonly

Especifica que un campo de entrada (input) es de slo lectura

Readonly

Required

Especifica que un campo de entrada (input) debe ser completado antes de enviar el formulario.

Required

Size

Especifica el ancho, en caracteres, de un elemento <input>

Un nmero

Src

Especifica la direccin URL de la imagen que desea utilizar como un botn de envo (slo para type = "image")

URL

Step

Especifica los intervalos de nmeros legales (permitidos) para un campo de entrada.

Un nmero

Type

Especifica el tipo de elemento <input> para mostrar.

Hidden, Text, Search, Tel, url, email, password, datetime, date, month, week, time, datetime-local,

124

number, range, color, checkbox, radio, file, submit, image, reset, button. Value Especifica el valor de un elemento <input> Width Especifica el ancho de un elemento <input> (slo para type = "image") Tabla 43. Atributos elemento input. Tamao en pixeles. Texto

Como se observa en la tabla anterior, existe el atributo type que controla el tipo de datos del elemento. Dependiendo del tipo de datos del elemento se podr o no utilizar algunos atributos para poder controlar el elemento.

No todos los principales navegadores soportan todos los tipos de input nuevos. Sin embargo, se puede usar esos inputs en los que si son compatibles, y si no lo son, se comportarn como campos de texto normales.

A continuacin se detalla cada tipo de datos del elemento input, con los atributos que se puede utilizar dependiendo de su tipo:

1.5.10.5.1 Input (type=hidden)

Definicin: Define un campo oculto (no visible para un usuario). Un campo oculto suele almacenar un valor predeterminado, o puede obtener su valor por un script.

125

Atributos Atributos globales Value

Compatibilidad en los navegadores

Ejemplo:

Imagen 88. Ejemplo elemento input tipo hidden. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.2 Input (type=text)

Definicin: Default. Define un campo de entrada texto de una sola lnea (ancho predeterminado es de 20 caracteres).

Atributos Atributos globales Value Autocomplete Dirname List Maxlength Pattern Placeholder Readonly Required Size

126

Compatibilidad en los navegadores

Ejemplo:

Imagen 89. Ejemplo elemento input tipo text. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.3 Input (type=search)

Definicin: El tipo search se utiliza para campos de bsqueda (un campo de bsqueda se comporta como un campo de texto normal).

Atributos Atributos globales Value Autocomplete Dirname List Maxlength Pattern Placeholder Readonly Required Size

Compatibilidad en los navegadores

127

Ejemplo:

Imagen 90. Ejemplo elemento input tipo search. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.4 Input (type=tel)

Definicin: Define un campo para introducir un nmero de telfono.

Atributos Atributos globales Value Autocomplete List Maxlength Pattern Placeholder Readonly Required Size

Compatibilidad en los navegadores

Ejemplo:

Imagen 91. Ejemplo elemento input tipo tel. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

128

1.5.10.5.5 Input (type=url)

Definicin: Define un campo para introducir una URL.

Atributos Atributos globales Value Autocomplete List Maxlength Pattern Placeholder Readonly Required Size

Compatibilidad en los navegadores

Ejemplo:

Imagen 92. Ejemplo elemento input tipo url. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.6 Input (type=email)

Definicin: Define un campo para una direccin de e-mail.

129

Atributos Atributos globales Value Autocomplete List Maxlength Multiple Pattern Placeholder Readonly Required Size

Compatibilidad en los navegadores

Ejemplo:

Imagen 93. Ejemplo elemento input tipo email. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.7 Input (type=password)

Definicin: Define un campo de contrasea (caracteres se enmascaran).

Atributos Atributos globales Value Autocomplete List

130

 Maxlength Pattern Placeholder Readonly Required Size

Compatibilidad en los navegadores

Ejemplo:

Imagen 94. Ejemplo elemento input tipo password. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.8 Input (type=datetime)

Definicin: Define un control de fecha y hora (ao, mes, da, hora, minuto, segundo y fraccin de segundo, basado en la zona horaria UTC).

Atributos Atributos globales Value Autocomplete List Max Min Readonly Required Step

131

Compatibilidad en los navegadores

Ejemplo:

Imagen 95. Ejemplo elemento input tipo datetime. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.9 input (type=date)

Definicin: Define un control de fecha (ao, mes y da (no hay tiempo)).

Atributos Atributos globales Value Autocomplete List Max Min Readonly Required Step

Compatibilidad en los navegadores

132

Ejemplo:

Imagen 96. Ejemplo elemento input tipo date. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.10 input (type=month)

Definicin: Define un control de un mes y un ao (sin zona horaria).

Atributos Atributos globales Value Autocomplete List Max Min Readonly Required Step

Compatibilidad en los navegadores

Ejemplo:

Imagen 97. Ejemplo elemento input tipo month. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

133

1.5.10.5.11 input (type=week)

Definicin: Define un control de una semana y un ao (no zona horaria).

Atributos Atributos globales Value Autocomplete List Max Min Readonly Required Step

Compatibilidad en los navegadores

Ejemplo:

Imagen 98. Ejemplo elemento tipo week. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.12 input (type=time)

Definicin: Define un control para ingresar una hora (sin zona horaria)

Atributos Atributos globales 134

 Value Autocomplete List Max Min Readonly Required Step

Compatibilidad en los navegadores

Ejemplo:

Imagen 99. Ejemplo elemento input tipo time. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.13 input (type=datetime-local)

Definicin: Define un control de fecha y hora (ao, mes, da, hora, minuto, segundo y fracciones de segundo (sin zona horaria).

Atributos Atributos globales Value Autocomplete List Max Min Readonly 135

 Required Step

Compatibilidad en los navegadores

Ejemplo:

Imagen 100. Ejemplo elemento input datetime-local. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.14 input (type=number)

Definicin: Define un control para introducir un nmero.

Atributos Atributos globales Value Autocomplete List Max Min Placeholder Readonly Required Step

Compatibilidad en los navegadores

136

Ejemplo:

Imagen 101. Ejemplo elemento input tipo number. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.15 input (type=range)

Definicin: Define un control para introducir un nmero cuyo valor exacto no es importante (como un control deslizante).

Atributos Atributos globales Value Autocomplete List Max Min Step

Compatibilidad en los navegadores

Ejemplo:

Imagen 102. Ejemplo elemento input tipo range. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

137

1.5.10.5.16 input (type=color)

Definicin: Define un control de selector de colores.

Atributos Atributos globales Value Autocomplete List

Compatibilidad en los navegadores

Ejemplo:

Imagen 103. Ejemplo elemento input tipo color. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/html/html5_form_input_types.asp]

1.5.10.5.17 input (type=checkbox)

Definicin: Define una casilla de verificacin.

Atributos Atributos globales Value Checked Required

138

Compatibilidad en los navegadores

Ejemplo:

Imagen 104. Ejemplo elemento tipo checkbox. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.18 input (type=radio)

Definicin: Define un botn de opcin (radio button).

Atributos Atributos globales Value Checked Required

Compatibilidad en los navegadores

Ejemplo:

Imagen 105. Ejemplo elemento input tipo radio. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

139

1.5.10.5.19 input (type=file)

Definicin: Define un campo de seleccin de archivos y un botn "Examinar" (para la carga de archivos).

Atributos Atributos globales Value Accept Multiple Required

Compatibilidad en los navegadores

Ejemplo:

Imagen 106. Ejemplo elemento tipo file. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.20 input (type=submit)

Definicin: Define un botn de envo (para enviar los datos de un formulario al servidor).

Atributos Atributos globales Value Formaction Formenctype Formmethod 140

 Formnovalidate Formtarget

Compatibilidad en los navegadores

Ejemplo:

Imagen 107. Ejemplo elemento input tipo submit. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.21 input (type=image)

Definicin: Define una imagen como botn submit. (input type=submit).

Atributos Atributos globales Value Alt Formaction Formenctype Formmethod Formnovalidate Formtarget Height Src Width

Compatibilidad en los navegadores

141

Ejemplo:

Imagen 108. Ejemplo elemento input tipo image. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.22 input (type=reset)

Definicin: Define un botn de reinicio (restablece todos los valores del formulario a valores por defecto)

Atributos Atributos globales Value

Compatibilidad en los navegadores

Ejemplo:

Imagen 109. Ejemplo elemento input tipo reset. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.5.23 input (type=button)

Definicin: Define un botn para pulsarlo (en su mayora se utiliza con un JavaScript para activar una secuencia de comandos).

142

Atributos Atributos globales Value

Compatibilidad en los navegadores

Ejemplo:

Imagen 110. Ejemplo elemento input tipo button. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/att_input_type.asp]

1.5.10.6

button

Definicin: El elemento button representa un botn etiquetado por su contenido. El elemento es un botn.

Atributos: Atributos globales

Nombre Autofocus

Disabled Form

Descripcin Especifica que un botn automticamente obtendr el foco (focus) cuando se carga la pgina. Especifica que un botn se debe desactivar Especifica uno o ms formularios al que pertenece el button. Especifica dnde enviar el formulario de datos cuando se trata de enviar un formulario. Slo para type = "submit" Especifica cmo el formulario de datos se debera codificar antes de enviarlo a un servidor.

Valores Autofocus

Disabled ID del formulario (form_id) URL

Formaction

Formenctype

application/xwww-formurlencoded,

143

Slo para type = "submit"

Formmethod

Formnovalidate

Formtarget

Especifica cmo enviar el formulario de datos (el mtodo HTTP a utilizar). Slo para type= "submit". Especifica que el tipo de datos no debe ser validado en el intento de enviar un formulario al servidor. Slo para type= "submit". Especifica dnde se debe mostrar la respuesta despus de enviar el formulario. Slo para type= "submit".

multipart/formdata, text/plain. Get, post

Formnovalidate

Name Type

Especifica un nombre para el botn. Especifica el tipo de botn.

Value

Especifica un valor inicial para el button. Tabla 44. Atributos elemento button.

_blank, _selft, _parent, _top, Nombre de un frame (frame_name) Un nombre Button, Reset, Submit. Texto

Compatible en los navegadores:

Ejemplo:

Imagen 111. Ejemplo elemento button. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thebutton-element]

1.5.10.7

Select

Definicin: El elemento select representa un control para seleccionar entre un conjunto de opciones. 144

Atributos: Atributos globales

Nombre Autofocus Descripcin Especifica que la lista desplegable automticamente debe recibir el foco (focus) cuando se carga la pgina. Disabled Especifica que una lista desplegable se debe desactivar. Form Especifica uno o ms formularios al que pertenece el select. ID de formulario (form_id) Multiple Especifica que las opciones se pueden seleccionar varias a la vez Name Define un nombre para la lista desplegable Required El usuario deber seleccionar un valor antes de enviar el formulario. Size Define el nmero de opciones visibles en una lista desplegable Tabla 45. Atributos elemento select. Un nmero Required Un nombre Multiple Disabled Valores Autofocus

Compatible en los navegadores:

145

Ejemplo:

Imagen 112. Ejemplo elemento select. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#theselect-element]

1.5.10.8

Datalist

Definicin: El elemento datalist representa una lista de opciones predefinidas, compuestas por un elemento option para un elemento input.

El elemento datalist se utiliza para proporcionar un "autocompletar" en funcin de los elementos input. Los usuarios podrn ver una lista desplegable de opciones predefinidas como entrada de datos.

Atributos: Atributos globales

Compatible en los navegadores:

146

Ejemplo:

Imagen 113. Ejemplo elemento datalist. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_datalist.asp]

1.5.10.9

Optgroup

Definicin: El elemento optgroup representa un grupo de elementos option con una etiqueta comn.

El elemento de grupo de elementos option se compone de los elementos option que son hijos del elemento optgroup.

Atributos: Atributos globales

Nombre Disabled Descripcin Especifica que una opcin de grupo (option-group) debe ser desactivado Label Especifica una etiqueta para una opcin de grupo (option-group) Tabla 46. Atributos elemento optgroup. Texto Valores Disabled

Compatible en los navegadores:

147

Ejemplo:

Imagen 114. Ejemplo elemento optgroup. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_optgroup.asp]

1.5.10.10

Option

Definicin: El elemento option representa una opcin en un elemento select o como parte de una lista de sugerencias en un elemento datalist.

Atributos: Atributos globales

Nombre Disabled Descripcin Especifica que un option se desactivar Label Especifica una etiqueta corta para un option Selected Especifica que el option debe ser pre-seleccionado cuando se cargue la pgina. Value Especifica el valor que se enva a un servidor. Tabla 47. Atributos elemento option. value Selected texto Valores disabled

Compatible en los navegadores:

148

Ejemplo:

Imagen 115. Ejemplo elemento option. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_option.asp]

1.5.10.11

Textarea

Definicin: El elemento textarea representa un control de texto de varias lneas de entrada.

Un rea de texto (textarea) puede contener un nmero ilimitado de caracteres.

El tamao de un textarea puede ser especificado por los atributos cols y rows, o mejor an, a travs de CSS y propiedades de ancho.

Atributos: Atributos globales

Nombre Autofocus

Descripcin Especifica que un rea de texto (textarea) debera automticamente obtener el foco (focus) cuando se carga la pgina

Valores Autofocus

Cols

Especifica el ancho visible de un rea de texto.

Un nmero

Dirname

Especifica el nombre de un campo de entrada (input) que contiene la direccin del texto del rea de texto.

Nombre de un campo de entrada (nombre de

El valor del campo de entrada (input) que contiene la direccin del

input)

149

texto debe ser "ltr" o "rtl". Disabled Especifica que un rea de texto debe ser desactivada o deshabilitada. Form Especifica uno o ms formularios al que pertenece el textarea. ID de formulario (form_id) Maxlength Especifica el nmero mximo de caracteres permitidos en el rea de texto Name Especifica el nombre de un rea de texto Placeholder Especifica una pista corta que describe el valor esperado de un rea de texto Readonly Especifica que un rea de texto debe ser de slo lectura Required Especifica que un rea de texto se necesita o debe ser llenado obligatoriamente. Rows Especifica el nmero de lneas visibles en un rea de texto Wrap Especifica cmo el texto del textarea debe envolver a la lnea siguiente. Tabla 48. Atributos elemento textarea. Hard, soft Un nmero Required Readonly Texto Texto Un nmero Disabled

Compatible en los navegadores:

150

Ejemplo:

Imagen 116. Ejemplo elemento textarea. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_textarea.asp]

1.5.10.12

Keygen

Definicin: El elemento keygen representa un control de generador de par de claves (key-pair). Cuando el control en un formulario es enviado, una clave privada se almacena en el almacn de claves local, y la clave pblica se empaqueta y se enva al servidor.

Atributos: Atributos globales

Nombre Autofocus Descripcin Especifica que un elemento keygen automticamente se enfoque (focus) cuando se carga la pgina. Challenge Especifica que el valor del elemento keygen debe ser cambiado cuando se trate de enviar el formulario (submitted). Disabled Especifica que un elemento keygen debe ser desactivado. Form Especifica uno o ms formularios al que pertenece el keygen. ID de formulario (form_id) Keytype Especifica el algoritmo de seguridad de la clave Name Especifica el nombre del elemento keygen. Tabla 49. Atributos elemento keygen. Un nombre Rsa, dsa, ec. Disabled Challenge Valores Autofocus

151

Compatible en los navegadores:

Ejemplo:

Imagen 117. Ejemplo elemento keygen. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thekeygen-element]

1.5.10.13

Output

Definicin: El elemento output representa el resultado de un clculo.

Atributos: Atributos globales

Nombre For

Descripcin Especifica la relacin entre el resultado del clculo, y los elementos utilizados en el clculo

Valores ID del elemento/s relacionado (element_id)

Form

Especifica uno o ms formularios al que pertenece el output.

ID de formulario (form_id)

Name

Especifica el nombre del elemento output. Tabla 50. Atributos elemento output.

Compatible en los navegadores:

152

Ejemplo:

Imagen 118. Ejemplo elemento output. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_output.asp]

1.5.10.14

Progress

Definicin: El elemento progress representa el progreso finalizacin de una tarea. El progreso puede ser o no indeterminado, lo que indica que se estn haciendo progresos, pero no est claro cunto todava queda por hacer antes de que se complete la tarea.

Atributos: Atributos globales

Nombre Value Descripcin Especifica cunto de la tarea se ha completado. Max Especifica la cantidad de trabajo que la tarea requiere en total Tabla 51. Atributos elemento progress. Un nmero Valores Un nmero

Compatible en los navegadores:

Ejemplo:

Imagen 119. Ejemplo elemento progress. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_progress.asp]

153

1.5.10.15

Meter

Definicin: El elemento meter representa una medida escalar dentro de un rango conocido, o un valor fraccionario, por ejemplo de uso de disco, la relevancia del resultado de una consulta, o la fraccin de poblacin votante que ha seleccionado a un candidato en particular, etc.

Atributos: Atributos globales

Nombre Value Descripcin Obligatorio. Especifica el valor actual de la medicin (meter) Min Especifica el valor mnimo del rango. Max Especifica el valor mximo del rango. Low Especifica el rango que se considera que es un valor bajo High Especifica el rango que se considera que es un valor alto Optimum Especifica qu valor es el valor ptimo para el indicador o medicin. Tabla 52. Atributos elemento meter. Un nmero Un nmero Un nmero Un nmero Un nmero Valores Un nmero

Compatible en los navegadores:

154

Ejemplo:

Imagen 120. Ejemplo elemento meter. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#themeter-element]

1.5.11 Elementos interactivos

1.5.11.1

Details

Definicin: El elemento details representa detalles, que el usuario puede ver u ocultar.

Puede ser utilizado en conjunto con el elemento summary para proporcionar un encabezamiento que se puede hacer clic para expandir/contraer los detalles segn se requiera.

Atributos: Atributos globales

Nombre Open Descripcin Especifica que los datos deben ser visibles (abierto) al usuario Tabla 53. Atributos elemento details. Valores open

Compatible en los navegadores:

155

Ejemplo:

Imagen 121. Ejemplo elemento details. Fuente: Consorcio W3C [Disponible en: http://dev.w3.org/html5/spec/single-page.html#thedetails-element]

1.5.11.2

Summary

Definicin: El elemento summary define un ttulo visible para el elemento details. En el ttulo se puede hacer clic para ver/ocultar los detalles.

Atributos: Atributos globales

Compatible en los navegadores:

Ejemplo: El ejemplo se puede observar en la imagen anterior (imagen 121).

1.5.11.3

Command

Definicin: El elemento command representa un comando que el usuario puede invocar.

El elemento command define un comando (un radiobutton, checkbox o un botn de comando) que el usuario puede invocar.

156

Un comando puede ser parte de un men contextual o la barra de herramientas, utilizando el elemento menu, o se puede poner en cualquier otro lugar de la pgina, para definir un atajo de teclado.

Atributos: Atributos globales

Nombre Type Descripcin Especifica el tipo de comando Valores Checkbox, Command, Radio. Label Obligatorio. Especifica el nombre de el command, como se muestra al usuario. Icon Especifica una imagen que representa el comando Disabled Especifica que el command debe estar desactivado o deshabilitado. Checked Especifica que command debe estar marcado (checked) cuando se carga la pgina. Slo para type = "radio" o type = "checkbox" Radiogroup Especifica el nombre del grupo de comandos que ser activadas cuando el propio comando se activa. Slo para type = "radio" Tabla 54. Atributos elemento command. Nombre del grupo (group_name) checked disabled URL Texto

Compatible en los navegadores:

157

Ejemplo:

Imagen 122. Ejemplo elemento command. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_command.asp]

1.5.11.4

Menu

Definicin: El elemento menu define una lista/men de comandos.

Se utiliza para los mens contextuales, barras de herramientas y los controles de formulario de lista y los comandos.

Atributos: Atributos globales

Nombre Type Descripcin Especifica el tipo de men para mostrar. El valor por defecto es "list" Label Especifica una etiqueta o ttulo visible para el men Tabla 55. Atributos elemento menu. Valores Context, toolbar, list. Texto

Compatible en los navegadores:

158

Ejemplo:

Imagen 123. Ejemplo elemento menu. Fuente: W3 Schools [Disponible en: http://www.w3schools.com/tags/tag_menu.asp]

159

CAPTULO 2 MONGODB 2.1 Introduccin En este captulo lo que se trata de desarrollar es un manual para poder manejar la base de datos NoSQL denominada MongoDB. El objetivo no es aprender MongoDB desde su propia consola de comandos, sino algo mucho ms prctico como lo es incluir MongoDB en un lenguaje de programacin, en este caso se aprender a utilizar esta base de datos en el lenguaje PHP.

Al igual que el captulo anterior, todo lo que se vaya explicando se detallar con ejemplos claros. Ejemplos con imgenes de cmo codificar consultas a la base de datos desde el lenguaje de programacin antes mencionado, PHP.

2.2 Qu es NoSQL? Como se mencion anteriormente MongoDB es una base de datos NoSQL, antes de comenzar a definir detalladamente de que se trata MongoDB, se esclarecer un poco ms el trmino NoSQL.

Cuando se habla de NoSQL, no es solo referirse a un tipo de base de datos, sino a varios tipos o mtodos para almacenar datos, dichos mtodos no cumplen con el esquema tpico entidad-relacin, y no imponen una estructura de datos fija en forma de tablas o relaciones. Estos tipos de base de datos permiten almacenar los datos en diferentes formatos como: llave-valor, documentos, xml, grafos, columnas, entre otros.

La principal caracterstica de NoSQL, es que su sistema de almacenamiento de datos est pensado para el manejo de grandes cantidades de informacin de una manera muy gil, escalando de manera horizontal, aumentando el rendimiento cuando se necesite crecer, y no como las base de datos relacionales que escalan o crecen de

160

manera vertical, es decir, aadiendo ms memoria o un disco duro con mayor velocidad cuando se necesite crecer en almacenamiento de datos.

NoSQL no garantiza las caractersticas ACID (Aislamiento, Consistencia/Integridad, Atomicidad, Durabilidad) ya que ningn tipo de sus base de datos implementa transacciones (conjunto de operaciones que se ejecutan en forma indivisible, sus operaciones no finalizan en un estado intermedio, manteniendo la integridad de los datos), por lo tanto los cambios no se pueden volver a atrs. La consistencia de los datos es eventual (por ejemplo: a veces 2 clientes no ven los mismos datos), esto se conoce como BASE (Consistencia Eventual Flexible Bsicamente Disponible), donde NoSQL le pone ms atencin a la disponibilidad de sus datos.

Ninguna base de datos NoSQL implementa aislamiento de datos, pero son tolerantes a fallos y redundancia en sus datos. Mejoran el rendimiento al no realizar una traduccin SQL de cada sentencia para ser ejecutadas.

2.3 Qu es MONGODB? MongoDB es un sistema de base de datos NoSQL(No solo SQL, no relacional), ste trmino NoSQL como se mencion anteriormente, indica diferentes tipos de base de datos, que se diferencian del tpico modelo relacional de las bases de datos SQL, ya que la mayora de estas bases de datos, por no decir todas, usan otros mtodos para reemplazar a las sentencias SQL, y adems los datos almacenados ya no necesitan estructuras fijas (tablas), ahora su estructura puede variar en cualquier momento, como es el caso de MongoDB, que utiliza colecciones (equivalente a tablas) y sus documentos (equivale a registros) pueden variar dinmicamente.

MongoDB es un sistema de base de datos orientada a documentos, esto significa que cada registro puede tener un esquema de datos diferente uno de otro. Est escrito en el lenguaje de C++, de cdigo abierto y funciona tranquilamente en sistemas operativos como Windows, Linux, OS X.

MongoDB fue creado por Dwight Merriman y Eliot Horowitz, quienes se basaron en sus experiencias de construccin a gran escala y alta disponibilidad. MongoDB mantiene muchas de las caractersticas de una base de datos relacional. 161

MongoDB fue creado por el ex fundador y director de tecnologa de DoubleClick Dwight Merriman y el ex DoubleClick ingeniero y fundador y CTO ShopWiki Eliot Horowitz. Se bas en sus experiencias construccin a gran escala, alta disponibilidad, sistemas robustos para crear un nuevo tipo de base de datos. MongoDB mantiene muchas de las grandes caractersticas de una base de datos relacional - como ndices y consultas dinmicas. Pero al cambiar el modelo de datos relacional a partir documento orientado a obtener muchas ventajas, como una mayor agilidad a travs de esquemas flexibles y fciles de escalabilidad horizontal. Caractersticas importantes en MongoDB son su velocidad, el sencillo manejo de consultas (manejabilidad), el libre esquema de datos, escalamiento horizontal sin afectar el rendimiento, sin aadir recursos. MongoDB puede correr como una aplicacin de 32bits 64 bits, se recomienda correr como una aplicacin de 64 ya que Mongo cuando corre en 32 bits se limita a una base de datos alrededor de 2GB (Giga Bytes).3 El objetivo de MongoDB es tener la mayor funcionalidad posible pero sin perder la escalabilidad.4

Para tener una idea clara sobre cmo interpretar MongoDB, se puede decir que un equivalente a un registro de base de datos SQL en MongoDB se denomina documento, la agrupacin de documentos se conoce con el nombre de coleccin, que en base de datos SQL se las conoce como tabla.

Ahora teniendo una idea de lo que es un documento y una coleccin se puede decir que: o Un sistema Mongo contiene un conjunto de base de datos. o Una base de datos contiene un conjunto de colecciones. o Una coleccin contiene un conjunto de documentos.
3

mongoDB. Hannan, Tony. 15 de Septiembre de 2011. 15 de Noviembre de 2012 <http://es.wiki.mongodb.org/display/DOCS/Introduction>.

4

La compaa MongoDB 10gen. Stam, Robert. 13 de Septiembre de 2012. 15 de Noviembre de 2012 <http://www.10gen.com/events/webinar/Introduccion-al-NoSQL-y-MongoDB>.

162

o Un documento es un conjunto de campos. o Un campo es un par clave/valor. o Una clave es un nombre (cadena). o Un valor es: o Un tipo cadena, entero, binario, etc. o Un documento o un vector de valores.

Los documentos mencionados anteriormente se almacenan en la base de datos como un formato BSON (Binary JSON), que es una versin modificada de JSON (Notacin de Objetos JavaScript para intercambio de datos). Aunque los datos se guardarn en formato BSON, en la prctica no se trabajar como un formato BSON, simplemente se mostrar como JSON.

Un ejemplo de un documento en MongoDB, sera el siguiente:

Imagen 124. Documento ejemplo de un producto en MongoDB.

Como se observa en la imagen anterior, es un tpico documento en formato JSON, tambin se pude ver de la imagen que existe un id (_id), que puede tener un formato como se desee, pero en caso de no escribir un _id se generar automticamente y de forma aleatoria un _id con un formato especial que posee MongoDB.

Ahora para mostrar una comparacin entre el modelo relacional comn y un documento MongoDB, a continuacin una imagen:

163

Imagen 125. Comparacin de un documento MongoDB frente a un modelo relacional.

Como se observa en la imagen anterior, existe un modelo relacional tpico con dos tablas, una llamada Categoria y otra llamada Producto que obviamente estn relacionadas con una llave fornea (idcategoria). Por otro lado existe tambin en la imagen un equivalente a estas tablas, pero en un sistema de MongoDB que se nota la sencillez de su uso en formato JSON, en vez de crear otro documento para relacionarlo, simplemente existe en el documento un campo llamado categora, el cual contendr un arreglo con todas las categoras que pertenezcan al producto.

164

Como se puede apreciar existe una notable diferencia y mejora en cuanto a espacio fsico en MongoDB, ya que sus campos no necesitan reservar un espacio fijo para sus valores, si no que tendrn de longitud el espacio que ocupen y ste podr ir variando segn las necesidades. MongoDB no se hace problema en cuanto a relaciones, ya que en un documento podra existir un campo que contenga otro documento y dentro de ste puede desarrollarse una larga secuencia de documentos o arreglos (arrays). A continuacin un ejemplo:

Imagen 126. Documento de MongoDB con documentos o arrays dentro.

Se puede observar en la imagen anterior que se ha creado un documento, el cual interpreta un blog donde usuarios pueden hacer comentarios sobre ste. Existe un campo comentarios, el cual tiene asignado un array que posee 3 documentos, donde se guardan el nombre del usuario que ha comentado y de igual manera el comentario correspondiente. Resulta importante notar que en la imagen anterior, los 2 usuarios juan y pedro han comentado pero no han puntuado al blog, ms si el usuario mara que ha dado al blog una puntuacin de 6. Con esto se puede decir que los documentos tienen un esquema libre y entre cada uno de ellos pueden variar, en este caso varan el nmero de campos que poseen.

165

2.4 Instalacin de MongoDB

2.4.1

Instalacin en Windows

1) Descargar la versin ms reciente de MongoDB desde la pgina de descargas (http://www.mongodb.org/downloads).

Hay tres tipos de MongoDB para Windows: o MongoDB para Windows Server 2008 R2, que se ejecuta en Windows Server 2008 R2, Windows 7 64-bit, y en las nuevas versiones de Windows. Esta construccin se aprovecha de las mejoras recientes de la plataforma Windows y no puede funcionar en versiones anteriores de Windows. o MongoDB para Windows de 64 bits, que se ejecuta en cualquier versin de 64 bits de Windows ms reciente de Windows XP, Windows Server 2008 R2 y Windows 7 64-bit. o MongoDB para Windows de 32 bits, que se ejecuta en cualquier versin de 32 bits de Windows XP y versiones de Windows ms recientes. Versiones de MongoDB de 32-bit son solamente para los sistemas ms antiguos y para uso de pruebas.

Se recomienda utilizar una versin ms reciente de Windows, para poder utilizar versiones ms recientes de MongoDB.

Hay que tener en cuenta que versiones de MongoDB de 32-bits son adecuados slo para fines de prueba y evaluacin, y slo admiten bases de datos de menos de 2GB.

Para conocer la arquitectura de su versin de Windows se puede utilizar el comando siguiente en el smbolo del sistema (sin las comillas por supuesto): wmic os get osarchitecture.

166

En el Explorador de Windows, buscar el archivo donde se descarg MongoDB. Extraer los archivos en C:\ haciendo clic derecho sobre el archivo comprimido y seleccionando Extraer todo y navegar a C:\.

La carpeta extrada se ver de la siguiente manera:

Imagen 127. Ubicacin de carpeta extrada de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Donde la palabra version de la imagen anterior se reemplazar por la versin de la cual se ha descargado.

2) Configurar el entorno

Iniciar el smbolo del sistema, (Men Inicio > Todos los programas > Accesorios, luego hacer click derecho en Smbolo del sistema y seleccionar Ejecutar como administrador. En el smbolo del sistema, ejecutar los siguientes comandos:

Imagen 128. Moviendo la carpeta extrada de MongoDB a otra ubicacin en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Lo que se muestra en la imagen anterior simplemente es una sugerencia de donde ubicar la carpeta de MongoDB (en este caso sera en C:\mongodb), pero se puede colocar en cualquier lugar de las carpetas de Windows. 167

MongoDB requiere una carpeta de datos para almacenar sus archivos. La ubicacin predeterminada para el directorio de datos MongoDB es C:\data\db. Por lo tanto hay que crear esta carpeta ya sea manualmente o mediante el smbolo del sistema, como se muestra a continuacin la secuencia de comandos:

Imagen 129. Creando la carpeta para almacenar los archivos de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Hay como especificar una ruta alternativa a la ubicacin predeterminada C:\data\db, con el ajuste dbpath de mongod.exe (es el demonio o daemon que corre el servicio de MongoDB), como a continuacin se indica:

Imagen 130. Cambiar a otra ruta alternativa la ubicacin para almacenar los archivos de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

3) Iniciar MongoDB Para iniciar MongoDB, desde el smbolo del sistema ejecute lo siguiente:

Imagen 131. Iniciar MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Eso iniciar el proceso de MongoDB de la base de datos principal.

168

Ahora para conectar con MongoDB para poder comenzar ya a utilizar los comandos de Mongo, se necesita abrir otra ventana de smbolo del sistema y ejecutar el siguiente comando:

Imagen 132. Conectar con MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

El comando de la imagen anterior (mongo.exe), iniciar automticamente la consola de mongo.exe en la ventana del smbolo del sistema. La consola se conectar a mongod.exe, corriendo en Localhost en el puerto 27017 por default. Ahora ya se puede manipular las bases de datos, colecciones y documentos de MongoDB con sus respectivos comandos. Existe la posibilidad de autentificarse con un nombre de usuario (administrador) y contrasea para seguridad, para crear un usuario y autentificarse se har lo siguiente: db.addUser(admin,password); db.auth(admin,password); En MongoDB por defecto viene una base de datos llamada test, a continuacin un ejemplo de cmo guardar (.save()) un documento ({a : 1}) en una coleccin test, en esa base de datos por defecto (test), y despus de ello se consultar (.find()) los datos :

Imagen 133. Guardar y consultar un documento en la base de datos por defecto test. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

169

4) MongoDB como un servicio de windows MongoDB se instala como un servicio de Windows, por lo que la base de datos se iniciar automticamente en cada reinicio.

Configurar el sistema Se debe especificar dos opciones al ejecutar MongoDB como un servicio de Windows: Una ruta para salida del registro (es decir, un logpath) y un archivo de configuracin. o

Crear un directorio especfico para los archivos de registro de MongoDB desde el smbolo del sistema:

Imagen 134. Creacin de un directorio para archivos de registro de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Crear un archivo de configuracin para el logpath desde el smbolo del sistema:

Imagen 135. Creacin de un archivo de configuracin para el logpath en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Si bien estos pasos son opcionales, la creacin de un lugar especfico para los archivos de registro y el uso del archivo de configuracin son recomendables.

170

Instalar y ejecutar el servicio de MongoDB Hay que ejecutar los siguientes comandos en el smbolo del sistema con privilegios de administrador. o

Para instalar el servicio de MongoDB:

Imagen 136. Instalar el servicio de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Para ejecutar el servicio de MongoDB:

Imagen 137. Ejecutar el servicio de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Detener y quitar el servicio de MongoDB o

Para detener el servicio de MongoDB:

Imagen 138. Detener el servicio de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

Para quitar el servicio de MongoDB:

Imagen 139. Quitar el servicio de MongoDB en Windows. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/]

171

2.4.2

Instalacin en Linux

1.

Descargar MongoDB

Se debe colocar los archivos descargados de MongoDB en una ubicacin central en el sistema de archivos que sea fcil de acceder y controlar. Considere la posibilidad en: /opt usr/local/bin.

En una terminal, comience la descarga de la ltima versin, en la mayora de los casos se deber descargar la versin de 64-bits de MongoDB.

Imagen 140. Descarga de MongoDB para Linux 64-bits. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

En caso que se desee descargar la versin para 32-bits de MongoDB, se deber utilizar el siguiente comando:

Imagen 141. Descarga de MongoDB para Linux 32-bits. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

Una vez descargado, hay que extraer los archivos con el siguiente comando:

Imagen 142. Extraccin de los archivos descargados de MongoDB en Linux. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

El binario mongod y los dems servicios asociados a MongoDB se encuentran en el directorio /bin, dentro del directorio extrado.

172

2.

Usando MongoDB

Para comenzar a utilizar mongod por primera vez, hay que crear el directorio para guardar los datos de MongoDB. De manera predeterminada los datos se guardan en el directorio /data/db/. Para crear ese directorio, realizar lo siguiente:

Imagen 143. Creacin de directorio para guardar los datos de MongoDB en Linux. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

Hay que asegurarse de que la cuenta del sistema en que correr el proceso mongod tenga permisos de lectura y escritura para el directorio. Si por ejemplo mongod se ejecuta bajo la cuenta de usuario Usuario, hay que ejecutar el siguiente comando para cambiar el propietario de la carpeta.

Imagen 144. Cambiar de propietario del de directorio donde se guardarn los datos de MongoDB en Linux. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

Se puede especificar y crear una ruta alternativa mediante la opcin -dbpath de mongod y el comando anterior. Para iniciar un proceso mongod, se lo puede hacer en la terminal, de la siguiente manera:

Imagen 145. Iniciar mongod de MongoDB en Linux. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

El comando que se muestra en la imagen anterior supone que el binario mongod ha creado un archivo de configuracin por defecto, localizado en /etc/mongod.conf. 173

Entre las herramientas incluidas en esta distribucin MongoDB, est la consola mongo. Se utiliza esa consola para conectarse a la instancia de MongoDB, de la siguiente manera:

Imagen 146. Conectarse a la instancia de MongoDB en Linux. Fuente: Documentacin del proyecto MongoDB. [Disponible en: http://docs.mongodb.org/manual/tutorial/install-mongodb-on-linux/]

El comando anterior ./bin/mongo asume que el binario mongo se encuentra en el subdirectorio bin/ del directorio actual. Este es el directorio en el que se extrajo el archivo .tgz.

Esto conectar a la base de datos corriendo en la interfaz localhost por defecto.

De igual manera se puede autentificar o con un nombre de usuario y contrasea, a continuacin por ejemplo se muestra cmo se ha agregado un usuario (admin) con su contrasea (password) para autentificarse: db.addUser(admin,password); db.auth(admin,password); En la consola mongo se puede emitir los comandos de la imagen 133, para insertar o guardar un documento ({a : 1}) en la coleccin test de la base de datos predeterminada (test), para despus consultar lo agregado.

174

2.5 PHP con MongoDB Lo que se tratar en este apartado del captulo, ser cmo usar MongoDB especficamente sobre el manejo del controlador para PHP.

2.5.1

Instalacin del controlador

2.5.1.1 Instalacin en Windows Instalar el controlador o driver de MongoDB para Php es muy sencillo, lo primero que hay que hacer es descargar un archivo o extensin .dll, dependiendo de la versin de PHP que se tenga instalado, a continuacin una tabla con la lista de los archivos para descargar, con la versin de PHP respectiva:

Versin de PHP
PHP 5.2 VC6 Non Thread Safe PHP 5.2 VC6 Thread Safe PHP 5.3 VC6 Non Thread Safe PHP 5.3 VC6 Thread Safe PHP 5.3 VC8 Non Thread Safe PHP 5.3 VC8 Thread Safe PHP 5.3 VC9 Non Thread Safe PHP 5.3 VC9 Thread Safe

URL para descargar

http://downloads.mongodb.org/mongo-latest-php5.2vc6.zip

http://downloads.mongodb.org/mongo-latest-php5.2vc6ts.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc6.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc6ts.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc8.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc8ts.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc9.zip

http://downloads.mongodb.org/mongo-latest-php5.3vc9ts.zip

Tabla 56. Lista de archivos o extensiones .dll para instalar el controlador de PHP para MongoDB. Fuente: Web PHP. [Disponible en: http://www.php.net/manual/es/mongo.installation.php#mongo.installation.windows]

175

Se descargarn 2 archivos, un .txt que contendr informacin de la versin del controlador y otro archivo que ser el .dll llamado, php_mongo.dll. El archivo .dll hay que copiarlo en la carpeta de extensiones ext donde se tiene instalado PHP, y despus aadir una lnea en el archivo php.ini de sta forma:

extension=php_mongo.dll

Con esto ya se puede comenzar a progamar en php con MongoDB.

2.5.1.2 Instalacin en Linux Para instalar en Linux es igual de sencillo, simplemente descargamos la extensin de MongoDB para PHP. En Linux se lo puede descargar mediante repositorios PECL, con los siguientes comandos:

sudo pecl install mongo

Aquello har que se descargue la extensin o mdulo para Linux, llamada mongo.so. Lo que resta es agregar al archivo php.ini la siguiente lnea:

extension=mongo.so

Restaurando los servicios, ya se puede ocupar el controlador, para poder usar MongoDB en PHP.

A continuacin se comenzar a explicar lo que ms interesa en ste captulo, que es el cdigo de php en s, para manipular la base de datos MongoDB.

2.5.2

Conexin

Conectarse a MongoDB es muy fcil. La manera ms sencilla es cuando se desea conectar a localhost en el puerto predeterminado 27017, de la siguiente manera:

Imagen 147. Conexin MongoDB simple en PHP.

176

Ahora si se quiere conectar a un host remoto, con el puerto por defecto 27017, se har de la siguiente forma:

Imagen 148. Conexin MongoDB a un host remoto en PHP.

Otro caso es cuando se desea conectar a un host remoto, pero con un puerto determinado, entonces se deber escribir lo siguiente:

Imagen 149. Conexin MongoDB a un host remoto con puerto determinado en PHP

A veces desde MongoDB se autentifica con un nombre de usuario y contrasea, pues entonces si se ha producido esa autentificacin, en PHP se deber conectar con los datos de usuario y contrasea. A continuacin un ejemplo de cmo conectarse a un host remoto con puerto 54321 con autentificacin:

Imagen 150. Conexin MongoDB a un host remoto con puerto determinado y autentificacin en PHP.

En el caso del ejemplo de la imagen anterior, se ha conectado a un host ejemplo.com con puerto 54321, autentificndose con el usuario admin y contrasea password. Ntese que al principio se pondr mongodb://. Con la variable $conexion de los ejemplos anteriores, quedar establecida la conexin y con aquella variable se podr acceder a las base de datos, colecciones y documentos.

Algo que cabe mencionar es que no es necesario desconectar explcitamente de la base de datos, es decir con cdigo, porque cuando $conexion queda fuera de mbito, la conexin se cierra automticamente.

177

2.5.3

Seleccionar una base de datos y una coleccin.

Para seleccionar una base de datos es tan simple como esto:

Imagen 151. Seleccionando una base de datos en MongoDB desde PHP.

Como se observa en la imagen anterior, con la conexin ya creada ($conexion), se selecciona una base de datos llamada BaseEjemplo, la cual se podr acceder a sus colecciones mediante la variale $db a la cual se le asigna la conexin ($conexion) y se apunta a BaseEjemplo con este signo ->. No es necesario que la base de datos exista, con seleccionar de esa manera se crear automticamente.

Y ahora para seleccionar una coleccin de una base de datos se har de la siguiente manera:

Imagen 152. Seleccionando una coleccin de una base de datos en MongoDB desde PHP.

Como se puede observar ahora para seleccionar una coleccin ColeccionEjemplo, se ha creado una variable $coleccion a la cual se le asigna la variable $db que est apuntando a la base de datos BaseEjemplo y sta apuntar y seleccionar la coleccin denominada ColeccionEjemplo. Con la variable $coleccion se podr acceder a los documentos, para realizar operaciones de escritura y consultas.

2.5.4

Operaciones de escritura

Para los siguientes ejemplos se tomar como base el ejemplo de la imagen 152, para realizar las operaciones sobre la base de datos BaseEjemplo y la coleccin ColeccionEjemplo.

178

2.5.4.1 Insertar documentos Para insertar documentos en una coleccin, es tan simple como esto:

Imagen 153. Insertar un documento en una base de datos en MongoDB desde PHP.

En el ejemplo de la imagen anterior se puede observar de qu manera se ha creado un documento, que es igual a crear un array y se le asigna a una variable ($documento), para despus mediante la propiedad insert(), agregar a la coleccin de la base de datos.

En la base de datos MongoDB se guardar el documento de la siguiente forma:

Imagen 154. Documento insertado en MongoDB.

El documento que se muestra en la imagen anterior, es el que se ha insertado y de esa manera se observar en la base de datos de MongoDB, se puede apreciar que se ha generado un ID automticamente, que es un Objeto Id de MongoDB, que siempre se generar automticamente a no ser que se especifique un _id especficamente.

A continuacin se puede apreciar ms inserciones de diferentes documentos, que como se mencion anteriormente se los puede comparar como un array de PHP.

Ahora se insertar un documento un poco ms complejo, en cuanto a la estructura, con una ID especfica:

179

Imagen 155. Insertar un documento con ID especfica, en una base de datos en MongoDB desde PHP.

Como se puede observar en la imagen anterior, ahora se ha especificado una _id (123), por lo tanto MongoDB ya no generar un Objeto ID automticamente. Tambin se puede notar de la imagen ejemplo, que existe un campo o llave denominada hijos, la cual contiene un arreglo, obviamente con el nombre de los hijos de esa persona (pedro). En la siguiente imagen se muestra, cmo se visualizar el documento en la base de datos:

Imagen 156. Documento insertado en MongoDB con una ID especfico.

Tambin se puede ir anidando dentro de cada array ms y ms arrays para insertar en la base de datos, por ejemplo:

Imagen 157. Insertar un documento en una base de datos en MongoDB con documentos o arrays anidados desde PHP.

180

En la base de datos se mostrar el registro agregado de la siguiente manera o estructura:

Imagen 158. Documento insertado en MongoDB con documentos anidados.

Como se observa en la imagen anterior, ahora se ha insertado un documento en el cual se tiene un campo o llave denominado hijos, ste campo contiene un arreglo (array) con ms documentos dentro. Si se deseara poner ms arrays dentro pues no existira ningn inconveniente. Es importante notar que si el valor de un campo (llave) tiene el carcter de tilde, entonces MongoDB guardar esa tilde como un carcter o caracteres especiales no entendibles, pero que al momento de consultar esos datos se mostrarn con la tilde normalmente.

Algo que se puede notar en todos los ejemplos anteriormente explicados de insercin de documentos, es que se estn agregando a una coleccin (ColeccionEjemplo), y tienen cada uno de ellos una estructura diferente.

2.5.4.2 Actualizar documentos Las actualizaciones en MongoDB combinan una consulta (que se ver detalladamente ms adelante) y una accin (modificacin), modificando documentos que cumplan con un criterio establecido.

181

Existen dos tipos de actualizaciones: De modificacin y de reemplazo.

2.5.4.2.1

Actualizaciones de modificacin:

Este tipo de actualizaciones contienen un operador $, y cambian los campos de los documentos, tambin pueden incrementar contadores, agregar y eliminar elementos a un array o simplemente modificar el dato (valor) de un campo (llave). Lo nombrado anteriormente se puede llevar a cabo gracias a los operadores de modificacin siguientes: $inc, $set, $unset, $push, $pull.

$inc Sirve para aumentar o disminuir un valor numrico.

Por ejemplo, en base al documento de la imagen 158, en el cual existe un campo edad con el valor de 62, si se desea aumentar la edad a 63 se har lo siguiente:

Imagen 159. Actualizar un documento con el operador $inc en MongoDB.

En el ejemplo de la imagen anterior se est utilizando update para actualizar el documento, en la primera parte agregamos un array y le indicamos la condicin para actualizar el documento, en el ejemplo anterior la condicin sera: Actualizar un documento que tenga el campo nombre = manuel y el campo apellido = lopez. En la segunda parte igualmente agregamos un array ahora con el operador $inc (tener en cuenta que el operador va entre comillas simples) y despus el array con el campo (edad) que incrementar, y el valor con que incrementar (en ese caso el 1), eso har que cambie el campo edad a 63. Si lo que se desea es disminuir el valor se pondr un valor negativo.

Tambin se puede modificar el mismo documento de la imagen 158, consultando por el Objeto ID de MongoDB. Por ejemplo:

182

Imagen 160. Actualizar un documento con el operador $inc, consultando por el Objeto ID de MongoDB.

Ahora la condicin ser: Actualizar el documento que tenga un _id = Un Objeto ID de MongoDB (50a86a3a00565b8c10000000).

Pero ahora si lo que se quiere es actualizar la edad de algn campo que est contenido en un array (documentos anidados). Por ejemplo y en base nuevamente en la imagen 158, si se desea disminuir 2 aos la edad de un hijo de manuel lopez, por ejemplo de roco, se har de la siguiente manera: Como se observa en la imagen anterior se est disminuyendo 2 aos la edad de roco.

Imagen 161. Actualizar un documento con el operador $inc, en documentos anidados de MongoDB.

Con la expresin hijos.2.edad se seala al hijo roco de manuel lopez. Se debe tener presente que para llegar al campo de un documento anidado, se debe hacer de una manera jerrquica.

A continuacin se muestra una imagen que muestra el por qu la expresin hijos.2.edad seala a roco:

183

Imagen 162. Explicacin de un documento anidado de MongoDB.

Como se puede observar en la imagen anterior el campo hijos contiene todo lo que est entre dentro del recuadro de color amarillo (array), y a su vez ese recuadro contiene 3 recuadros verdes (documentos) donde cada uno de ellos tienen el index de posicin respectivo. Entonces si se quiere sealar la edad de roco para modificarla, se debe acceder al campo hijos, en su documento con index 2 y en su campo edad que resultara la expresin: hijos.2.edad.

Cabe mencionar que dentro de un campo pueden existir muchos documentos y ser difcil conocer su index de posicin, por lo tanto se puede reemplazar ese nmero de index por un signo $. A continuacin se muestra cmo modificar la edad ahora del hijo mara de manuel lopez, sin conocer su posicin de index:

Imagen 163. Actualizar un documento anidado sin conocer la posicin index de MongoDB.

Como se observa en la imagen anterior, ahora a ms de las condiciones de nombre = manuel y apellido = lopez, aparece otra condicin que es hijos.nombre = 184

roco, en la que indicamos que seale dentro del campo hijos, el campo nombre que sea igual a roco, para despus con hijos.$.edad modificar el documento.

$set Sirve para cambiar el valor de un campo (llave), si el campo no existiera pues entonces se crear.

Por ejemplo, si se tuviera este documento:

Imagen 164. Documento ejemplo para actualizarlo con $set en MongoDB.

Y ahora se quisiera modificar o actualizar el campo telefono pues es tan simple como esto:

Imagen 165. Actualizar documento con el operador $set en MongoDB.

Eso actualizar el campo telefono de 09888810 a 09999910. Tambin se puede actualizar documentos anidados.

Como se manifest antes, si es que se quiere modificar un campo que no existiera, el operador de modificacin $set agregar ese campo. Por ejemplo si se tuviera un documento de esta manera:

185

Imagen 166. Documento ejemplo para agregar un campo con $set en MongoDB.

Como se observa en el documento de la imagen anterior, se ha logrado hacer como un listado de materias de un estudiante, en ese caso de un estudiante llamado henry campoverde, con el telfono 0998765432 y con las materias de matematicas, geografia y dibujo. Ahora si por ejemplo se quiere aadir una calificacin de 9 a la materia geografia, se har de la siguiente manera:

Imagen 167. Actualizar un documento agregando un nuevo campo con $set en MongoDB.

Ahora el documento quedar de la siguiente forma:

Imagen 168. Documento despus de agregarse un campo nuevo con $set en MongoDB.

$unset Sirve para eliminar un campo (llave) de un documento, por ejemplo si se tuviera el siguiente documento:

186

Imagen 169. Documento para borrar un campo con $unset en MongoDB.

Y ahora si se quisiera eliminar el campo descripcion2, se hara de la siguiente manera:

Imagen 170. Ejemplo para Borrar un campo con $unset en MongoDB.

Con esa sintaxis (descripcion2 => 1) se borrar el campo descripcion2.

Ahora el documento quedar de la siguiente manera:

Imagen 171. Documento despus de haber borrado un campo con $unset en MongoDB.

$push Sirve para aadir un elemento al final de un array. Por ejemplo en base al siguiente documento:

Imagen 172. Documento ejemplo para aadir un elemento a un array con $push en MongoDB.

187

Como se puede observar en el documento ejemplo de la imagen anterior, existe un campo telefonos, el cual contiene un array con 2 nmeros de telfono, si se quisiera aadir otro nmero de telfono en ese array, por ejemplo el nmero 2888990, se har de la siguiente manera:

Imagen 173. Actualizar un documento con $push en MongoDB.

El documento ahora quedar de la siguiente forma:

Imagen 174. Resultado de un documento actualizado con $push en MongoDB.

Se puede observar que se ha agregado el nuevo elemento al array 288990. En caso de que el elemento ya existiera en el array, simplemente el elemento se repetir, y si lo que de desea es no repetir un elemento que ya exista en el array, se deber utilizar envs del operador $push el operador $ne, el cual agregar un elemento al array siempre y cuando no exista ya dentro del array.

$pull Es el opuesto del operador $push, ya que $pull sirve para eliminar un elemento de un array. Por ejemplo, y en base al documento de la imagen 174, si ahora se quisiera eliminar el telfono 2871717, entonces se codificara de la siguiente manera:

188

Imagen 175. Actualizar un documento con $pull en MongoDB.

Con eso se ha eliminado un elemento del array del campo telefonos, el resultado de esa actualizacin quedar de la siguiente manera:

Imagen 176. Resultado de actualizar un documento con $pull en MongoDB.

Cabe mencionar que todos los operadores de modificacin se puede utilizar para modificar o actualizar documentos anidados, solo es cuestin de aplicar los conceptos de jerarqua que se explic anteriormente. Tambin se pueden realizar condiciones o consultas ms complejas, como por ejemplo: -Actualizar un documento donde el campo sea mayor o igual a un nmero determinado-. Consultas que ms adelante se explicarn con ejemplos simples y claros.

2.5.4.2.2

Actualizaciones de reemplazo:

Estas actualizaciones no utilizan los operadores de modificacin y sirven para cambiar la estructura completamente de un documento sealado. Por ejemplo, teniendo el siguiente documento:

Imagen 177. Documento para actualizar mediante actualizaciones de reemplazo en MongoDB.

189

Si se quisiera cambiar la estructura del documento de la imagen anterior, se podra hacer de la siguiente manera:

Imagen 178. Actualizar un documento mediante actualizaciones de reemplazo en MongoDB.

Con la actualizacin que se puede observar en la imagen anterior ya no se utiliza operadores de modificacin ($inc, $set, $unset, $push, $pull), el documento cambia su estructura, y quedara de la siguiente forma:

Imagen 179. Documento actualizado mediante actualizaciones de reemplazo en MongoDB.

2.5.4.3 Eliminar documentos El eliminar documentos es muy sencillo, ahora se utiliza el mtodo remove(), acompaada de una condicin o consulta para obtener el documento que se quiera borrar, por ejemplo si se quisiera borrar el documento que est en la imagen anterior, se hara de la siguiente manera:

Imagen 180. Eliminar un documento en MongoDB.

Con la sintaxis de la imagen anterior se eliminar el documento que tenga por nombre marco y apellido jaramillo.

190

2.5.4.4 Eliminar coleccin La eliminacin de una coleccin es tan simple como esto:

Imagen 181. Eliminar una coleccin en MongoDB.

Lo que se hace para eliminar una coleccin crear una variable, en este caso se ha creado una variable llamada $eliminar, a la cual se le asigna la coleccin que se quiere eliminar y sta apuntar a un mtodo llamado drop().

2.5.4.5 Eliminar base de datos Eliminar una base de datos es igual que eliminar una coleccin, con la diferencia que obviamente se tendr que asignar a una variable, el nombre de la base de datos a eliminar, como se muestra a continuacin:

Imagen 182. Eliminar una base de datos en MongoDB.

En el caso de la imagen 181 y 182 las variables $coleccion y $db respectivamente deberan antes haberse asignado el nombre y la base a la cual pertenece, como se puede observar en el ejemplo de la imagen 152 anteriormente explicada.

2.5.5

Consultas

Las consultas se hacen para obtener documentos y as poder visualizar sus datos. En las actualizaciones explicadas anteriormente se pona una condicin para encontrar los documentos que se queran modificar, pues esas condiciones se puede inclur en las consultas, ya que poniendo esa condicin se obtendrn los documentos que se requieren. Se utilizar como base los documentos de la imagen que a continuacin se muestra para realizar consultas y mostrarlas en pantalla:

191

Imagen 183. Documentos para realizar ejemplos de consultas en MongoDB.

Todos los documentos que se observan en la imagen anterior, pertenecen a la coleccin llamada ColeccionEjemplo y a la base de datos BaseEjemplo. Por ejemplo si se desea consultar los datos de la persona diana perez, se lo har de la siguiente manera:

Imagen 184. Consultar un solo documento en MongoDB.

192

Como se puede observar en la imagen anterior, se utiliza para realizar la consulta el mtodo findOne(), el cual sirve para consultar 1 solo documento en una coleccin, por tanto lo que contendr la variable $consulta (variable que recibe los resultados de consulta en forma de array), ser solo los datos de diana perez. Ahora ya con los datos de consulta obtenidos se los puede mostrar en pantalla de la siguiente manera:

Imagen 185. Mostrar datos resultantes de una consulta con findOne() en MongoDB.

Como se puede observar en la imagen anterior, de la variable que contendr el resultado de la consulta ($consulta), se obtiene los campos del documento consultado, simplemente poniendo entre corchetes el nombre del campo y asignndole a una variable para poder mostrar en pantalla, en ese caso se muestra los datos con un echo. Cabe recalcar que cuando se obtiene el campo telefonos que contiene un array, se muestra entre corchetes el nmero 0, que es la posicin del telfono en el array.

Ahora si lo que se desea es consultar por ejemplo los nombres de todos los usuarios almacenados en los documentos de la coleccin, bastar con hacer esto:

Imagen 186. Consultar datos de todos los documentos de una coleccin en MongoDB.

Se puede observar que ahora se utiliza el mtodo find(), el cual recibe 2 parmetros, el primero es una condicin (array) para consultar los documentos y el segundo parmetro es los campos que se desean sacar (si no se pone nada se sacaran 193

todos los campos). El mtodo find() devolver todos los documentos de la coleccin, entonces para poder mostrar el nombre de los usuarios en pantalla se har de la siguiente forma:

Imagen 187. Mostrar datos resultantes de una consulta con find() en MongoDB.

Ahora como ya no se est consultando con findOne(), se deber obtener los datos con un foreach() ya que existen varios documentos como resultado de la consulta. Dentro de la sintaxis del foreach() se pondr la variable a la que se asign la consulta ($consulta) y en cada iteracin del bucle se obtendr cada documento que se asignar a la variable $valores, dentro del foreach() se podr obtener cada campo de cada uno de los documentos, poniendo entre corchetes el nombre del campo a obtener, en el caso de la imagen 187 se est obteniendo el campo nombres de los documentos resultantes de la consulta y se muestra en pantalla con echo.

Como se observ en los ejemplos anteriores de las actualizaciones, se inclua condiciones para encontrar el documento a modificar, pues en las consultas tambin se puede poner condiciones para encontrar los documentos y as poder listarlos o mostrarlos en pantalla.

Por ejemplo, y basndonos nuevamente en los documentos de la imagen 183, si se desea por ejemplo obtener o consultar los datos de documentos que coincidan con el campo nombres igual a rebeca montero, se har de la siguiente manera:

194

Imagen 188. Mostrar datos resultantes de una consulta con find() con una condicin en MongoDB.

Como se observa ahora se tiene dentro del mtodo find(), la condicin de que busque documentos que tengan por campo (nombres) el valor de rebeca montero. Dentro del foreach() se obtendrn los datos y campos de los documentos que cumplan con esa condicin.

Una observacin que se puede hacer sobre la imagen anterior, es que cuando existen campos que contienen documentos (documentos anidados), se puede realizar los foreach() necesarios, uno dentro de otro, como es el caso de la imagen anterior (188), donde se ocupan 2 foreach() uno para sacar los documentos que cumplan la condicin y otro foreach() para sacar los documentos estn contenidos en el campo hijos. Otra cosa que hay que notar de la imagen, es que para obtener el campo telefonos, el cual contiene elementos en un array, se lo hace con un bucle for. Se debe tener presente que hay que conocer el lenguaje PHP y sus funciones, para poder mezclarlos con las funciones o mtodos de MongoDB.

195

Como se puede notar en las consultas realizadas hasta ahora, se han sacado todos los datos de los documentos cuando se hace una consulta, obviamente se puede mostrar en pantalla solo los que se necesite, pero se tiene guardado en memoria todos los datos de los documentos consultados y sera ms factible sacar solo los campos que se necesiten. Por tal motivo se puede sacar solo campos determinados, por ejemplo si se desea sacar solo el campo edad del documento que tenga la llave o campo nombres igual a marco jaramillo, se hara de la siguiente manera:

Imagen 189. Mostrar datos resultantes de una consulta con find(), sacando un campo determinado en MongoDB.

Se puede observar que ahora el mtodo find(), tiene dos parmetros, el primero es la condicin de consulta que ya se ha explicado (array(nombres) => marco jaramillo), y el segundo parmetro (array(edad) => 1) es el campo que se desea sacar. Se puede sacar los campos que se desee, simplemente hay que separarlos por una coma. Ejemplo:

Imagen 190. Consulta de datos con find(), sacando varios campos determinados en MongoDB.

Existen varias condiciones que se pueden incluir en las consultas de MongoDB, a continuacin se muestra una tabla de correlacin entre las consultas de MongoDB y las consultas del lenguaje de sentencias SQL:

196

Correlacin de consultas entre MongoDB y SQL en PHP

Sentencias con SQL

Sentencias con MongoDB

SELECT a,b FROM Users SELECT * FROM Users WHERE age=33 SELECT a,b FROM Users WHERE age=33 SELECT a,b FROM Users WHERE age=33 ORDER BY name SELECT * FROM Users WHERE age>33 SELECT * FROM Users WHERE age<33 SELECT * FROM Users WHERE name LIKE "%Joe%" SELECT * FROM Users WHERE name LIKE "Joe%" SELECT * FROM Users WHERE age>33 AND age<=40 SELECT * FROM Users ORDER BY name DESC SELECT * FROM Users WHERE a=1 or b=2 SELECT * FROM Users LIMIT 10 SKIP 20 SELECT DISTINCT last_name FROM Users SELECT COUNT(*y) FROM Users SELECT COUNT(*y) FROM Users where AGE > 30 SELECT COUNT(AGE) from Users

$ColeccionUsers -> find(array(), array("a" => 1, "b" => 1)); $ColeccionUsers -> find(array("age" => 33)); $ColeccionUsers -> find(array("age" => 33), array("a" => 1, "b" => 1)); $ColeccionUsers -> find(array("age" => 33), array("a" => 1, "b" => 1)) -> sort(array("name" => 1)); $ColeccionUsers -> find(array("age" => array('$gt' => 33))); $ColeccionUsers -> find(array("age" => array('$lt' => 33))); $ColeccionUsers -> find(array("name" => new MongoRegex("/Joe/"))); $ColeccionUsers -> find(array("name" => new MongoRegex("/^Joe/"))); $ColeccionUsers -> find(array("age" => array('$gt' => 33, '$lte' => 40))); $ColeccionUsers -> find() -> sort(array("name" => -1)); $ColeccionUsers -> find(array('$or' => array(array("a" => 1), array("b" => 2)))); $ColeccionUsers -> find() -> limit(10) -> skip(20); $db -> command(array("distinct" => "Users", "key" => "last_name")); $ColeccionUsers -> count(); ColeccionUsers -> find(array("age" => array('$gt' => 30))) -> count(); ColeccionUsers -> find(array("age" => array('$exists' => true))) -> count();

Tabla 57. Correlacin entre sentencias de consulta SQL y MongoDB. Fuente: Web PHP. [Disponible en: http://www.php.net/manual/es/mongo.sqltomongo.php]

Todas estas sentencias de consulta se pueden realizar en PHP, solo es cuestin de ir jugando con cada una de ellas y claro el lenguaje PHP y lograr obtener los datos o documentos que se deseen.

197

Como se pudo observar en la tabla 58, en las consultas tambin existen operadores, como tambin lo hay en las actualizaciones, a continuacin se muestran los operadores para describir criterios de bsqueda:

$gt = Mayor que (>). $lt = Menor que (<). $gte = Menor o igual que (). $lte = Mayor o igual que (). $ne = Diferente de (). $or = Operador lgico O (or).

2.5.6

Manejo de Archivos

MongoDB utiliza una especificacin para el almacenamiento y extraccin de archivos desde la base de datos. Esta especificacin define 2 colecciones: files, para los metadatos del archivo, y chunks para el contenido del fichero.

Cada documento de la coleccin de archivos contiene el nombre del archivo, fecha de subida, y un cdigo. Tambin contiene un campo nico _id, que se puede utilizar para consultar el contenido del archivo en la coleccin de bloques. Cada documento de la coleccin de bloques contiene un bloque de datos binarios, un campo files_id que corresponde con el _id del archivo.

Para almacenar cualquier archivo en MongoDB, teniendo el nombre del archivo, se hara de la siguiente manera:

Imagen 191. Almacenando un archivo en MongoDB.

198

Como se observa en la imagen anterior, se obtiene el nombre del archivo que se est queriendo almacenar en la base de datos (en este caso, por ejemplo, se supone que se obtiene el nombre de un archivo de un input tipo file llamado archivo) y se almacena en una variable ($nombreArchivo), ya con la conexin a la base de datos realizada, se obtiene las colecciones para almacenar el archivo mediante el mtodo getGridFS() que se almacenaran en la variable $grid. Ahora solo queda aplicar un mtodo llamado soreUpload(), el cual recibe 2 parmetros: el primero es el nombre del input tipo file, y el segundo es el nombre del archivo, esto har que se almacene el archivo y se asigne en una variable ($id) un ObjectID generado automticamente por MongoDB, sobre la cual se podr consultar sus datos. Por ejemplo para consultar el archivo mediante el ID generado se har de la siguiente manera:

Imagen 192. Consultando un archivo por el ID en MongoDB.

Como se observa, ya con el $id obtenido anteriormente, se realiza una simple consulta en la coleccin $grid, mediante el ID objeto de MongoDB (new MongoId($id)).

Para realizar un ejemplo prctico, a continuacin se almacenar en la base de datos BaseEjemplo una foto, para despus consultarla mediante el ID, y mostrar esa foto en pantalla. Primeramente se crear un documento HTML5 con un input tipo file para escoger una foto, y tambin se crear un botn tipo submit para mandar el nombre del input (file) a un archivo de PHP, que recoger el nombre de la foto y la almacenar en la base de datos, para despus mostrarla en pantalla.

A continuacin se muestra el cdigo para crear el documento HTML5:

199

Imagen 193. Documento HTML5 para escoger una foto y almacenarla en MongoDB.

Como se observa en la imagen anterior al momento de escoger una foto y dar click en el botn tipo submit (Subir y mostrar), se pasar al archivo subirFoto.php el input tipo file que por nombre lleva imagen. Por ejemplo si se escoge una foto llamada imagen.jpg:

Imagen 194. Seleccionar una foto para almacenarla en MongoDB.

Como se mencion anteriormente, al dar click sobre el botn submit se pasar el nombre del input file, ahora solo queda obtener el input file en el archivo PHP

200

(subirFoto.php), almacenar en la base de datos BaseEjemplo y mostrar en pantalla, como se muestra a continuacin:

Imagen 195. Almacenar y mostrar en pantalla una foto en MongoDB.

En la pantalla del navegador, se mostrar la imagen almacenada:

Imagen 196. Foto almacenada en la base de datos y mostrada en pantalla en MongoDB.

201

2.5.7

Seguridad

Para protegerse de ataques maliciosos a la base de datos, es necesario tomar en cuenta ataques de inyeccin de cdigo que se pueden ejecutar:

2.5.7.1 Ataques de inyeccin de cdigo Cuando se pasa parmetros con $_GET para consultar en la base de datos, hay que asegurarse de que esos parmetros se han convertido en strings, ya que por ejemplo un usuario (malicioso) puede insertar un array en una peticin GET, provocando as consultas no deseadas.

Por ejemplo, si se buscara informacin o datos de un usuario con una peticin http://www.ejemplo.com?nombreusuario=juan. En el archivo PHP se llevar a cabo la consulta: $coleccion -> find(array(nombreusuario => $_GET[nombreusuario]));

Entonces

alguien

podra

alterar

aquello,

realizando

una

peticin:

http://www.ejemplo.com?nombreusuario[$ne]=foo, con lo que PHP convertir automticamente los parmetros a un array, creando una consulta as: $coleccion -> find(array(nombreusuario => array($ne => foo))); Aquella consulta devolver todos los usuarios con nombre distinto de foo, que probablemente sern todos. Es sencillo defenderse de un ataque como el antes explicado, pues simplemente hay que asegurarse de que los parmetros $_GET, sean del tipo esperado antes de enviarlos a la base de datos, en este caso hay que asegurarse de convertirlos a string. Para convertir a string simplemente se puede colocar (string) antes de la variable que se desee realizar la conversin.

Cabe mencionar que este tipo de ataque se puede realizar en actualizaciones, consultas con modificacin y eliminaciones en la base de datos.

202

2.5.7.2 Operaciones seguras El controlador de PHP para MongoDB no espera a que la base de datos responda para realizar escrituras (inserciones, actualizaciones, eliminaciones). Esto quiere decir que las escrituras se llevan a cabo de una manera extremadamente rpida, pero no se sabe si realmente han tenido xito o no.

Hay muchas razones para que una escritura pueda fallar, entre ellas:

Problemas de Red Cada del servidor Escritura invlida (Ej: Escribir en una coleccin invlida).

Pero existe una opcin para obtener una respuesta de la base de datos, se denomina safe, que est disponible en todos los tipos de escritura. Esta opcin asegura de que la base de datos realiza la escritura antes de notificar su xito. Si la escritura fallara, entonces emitir una excepcin de Mongo, explicando el fallo. A continuacin un ejemplo de uso:

Imagen 197. Actualizar un documento de manera segura con safe en MongoDB.

Como se observa en el ejemplo de la imagen anterior, aparte de realizar la condicin de bsqueda para actualizar, y de poner el operador $set para actualizar un documento, tambin ahora se pone al final un array (safe => true), para asegurar que la operacin de escritura, en este caso actualizacin, se realice con xito. 203

CAPTULO 3 HERRAMIENTAS UTILIZADAS EN LA APLICACIN 3.1 Introduccin En este captulo se mostrarn las herramientas utilizadas en la aplicacin web que se ha desarrollado, herramientas que se complementarn con el lenguaje HTML5 y la base de datos MongoDB explicados ya en los captulos anteriores.

Todas las herramientas que se explicarn a continuacin estn basadas en el lenguaje de programacin JavaScript, tanto libreras, APIs y NodeJs.

3.2 Libreras JavaScript Existen varias libreras o tambin llamadas bibliotecas, que facilitan la programacin de un lenguaje y dan una gran cantidad de funcionalidades, en este caso las libreras que se ocuparon para el desarrollo de la aplicacin web son enfocadas al lenguaje de programacin JavaScript, que a continuacin se explicarn.

3.2.1

Jquery

Jquery es una librera o biblioteca que cambia la forma en que se codifica JavaScript. JQuery es una biblioteca de JavaScript que simplifica el recorrido de un documento HTML, el manejo de eventos, animacin, y las interacciones Ajax para el desarrollo web rpido5.

JQuery es una librera de software libre y de cdigo abierto.

Se puede descargar la versin ms actual desde la pgina oficial: http://jquery.com/

jQuery. Septiembre de 2009. 2 de Diciembre de 2012. <http://jquery.com/>

204

Ejemplos bsicos: Para iniciar jquery se har de la siguiente manera:

Imagen 198. Ejemplo de inicio de jquery. Fuente: La Enciclopedia Libre Wikipedia. [Disponible en: http://es.wikipedia.org/wiki/JQuery]

La manera de interactuar con los documentos HTML es mediante una funcin $() que recibe parmetros como: una expresin CSS o un nombre (Id, Class) de un elemento HTML, y devuelve todos los elementos que concuerden con la expresin solicitada, por ejemplo:

Imagen 199. Ejemplo de interaccin con Jquery. Fuente: La Enciclopedia Libre Wikipedia. [Disponible en: http://es.wikipedia.org/wiki/JQuery]

Se puede realizar animaciones simples a los elementos del documento HTML, como por ejemplo una animacin con el mtodo slideToggle:

Imagen 200. Ejemplo de animacin simple Jquery. Fuente: La Enciclopedia Libre Wikipedia. [Disponible en: http://es.wikipedia.org/wiki/JQuery]

Existen varias funciones y formas de interactuar con Jquery, para minimizar el uso de cdigo extenso y lograr resultandos excelentes en JavaScript.

205

3.2.2

Jquery UI

Jquery UI es una librera o biblioteca de componentes creada a partir de la librera Jquery, permitiendo interactuar con la interfaz de usuario, crear efectos, crear widgets, entre otras cosas muy interactivas mejorando el aspecto visual y haciendo muy sencillo la codificacin.

Jquery UI se puede descargar desde su pgina oficial: http://jqueryui.com/

Ejemplo bsico: Si por ejemplo se desea realizar un efecto que al hacer click en un botn se muestre un elemento HTML div, se podra hacer de la siguiente manera:

Imagen 201. Ejemplo de efecto con Jquery UI. Fuente: Documentacin Jquery UI. [Disponible en: http://api.jqueryui.com/]

3.2.3

TableSorter

Es una librera de JavaScript con el objetivo de ordenar tablas a partir de una tabla estndar creada desde HTML.

Resulta sencillo el manejo de TableSorter ya que lo nico que se necesita es asignarle a la tabla que se desea ordenar, la clase tablesorter y desde JavaScript iniciar el ordenamiento mediante el mtodo .talesorter() como se muestra a continuacin:

Imagen 202. Ejemplo ordenamiento de una tabla con TableSorter. Fuente: Documentacin TableSorter. [Disponible en: http://tablesorter.com/docs/]

206

La

librera

se

puede

descargar

desde

su

pgina

oficial:

http://tablesorter.com/docs/#Download

Es importante mencionar el uso obligatorio de la librera JQuery para el funcionamiento de TableSorter.

3.2.4

PrintArea

Es una librera de JavaScript creada a partir de Jquery y su objetivo primordial es el de imprimir un elemento de HTML determinado, con solo indicar el ID del elemento a imprimir y desde JavaScript activando la opcin de imprimir mediante el mtodo printArea(). A continuacin un ejemplo de modo de uso para imprimir un elemento div:

Imagen 203. Ejemplo de uso para imprimir un DIV con PrintArea. Fuente: Jquery Plugins. [Disponible en: http://archive.plugins.jquery.com/project/PrintArea]

Se

puede

descargar

sta

librera

desde

la

pgina

de

Jquery:

http://archive.plugins.jquery.com/node/3874/release

3.2.5

Keyboard

Esta librera de JavaScript es de cdigo abierto y su objetivo es la adicin de una interfaz de teclado grfico para campos de texto, campos de contrasea y reas de texto para que puedan ser llenados con el ratn solamente.

Cuenta con 92 teclados de acuerdo a los idiomas.

207

Para

comenzar

utilizar

se

debe

descargar

un

archivo

javascript

(http://www.greywyvern.com/code/javascript/keyboard.js), as como tambin su hoja de estilos CSS (http://www.greywyvern.com/code/javascript/keyboard.css) y

tambin el cono que se mostrar junto al campo que se desea poner esta interfaz grfica (http://www.greywyvern.com/code/javascript/keyboard.png).

Descargado lo anteriormente mencionado, lo nico que resta por hacer es asignarle a un campo de texto cualquiera la clase keyboardInput y con esto se podr observar en el navegador lo siguiente:

Imagen 204. Resultado en el navegador de la librera Keyboard.

3.3 BootStrap BootStrap es una coleccin de herramientas para la creacin de aplicaciones web, tiene la posibilidad de disear plantillas (templates) con HTML y CSS (con clases predefinidas), formularios, botones, grficos, e inclusive la posibilidad de manejar JavaScript para manipular componentes como: carrusel de imgenes, mens interactivos, transiciones, entre otros.

BootStrap es de cdigo abierto, y se puede descargar ltima versin desde la pgina oficial: http://twitter.github.com/bootstrap/

Ejemplos bsicos: Para crear por ejemplo un botn grande con un estilo predeterminado, se lo puede realizar de la siguiente manera:

208

Imagen 205. Ejemplo crear un botn grande en BootStrap. Fuente: Documentacin BootStrap. [Disponible en: http://twitter.github.com/bootstrap/basecss.html#buttons]

Como se observa en la imagen anterior, simplemente se crea un elemento button y se le asigna las clases: btn (para aplicar al elemento un estilo predefinido de un botn) y btn-large (para aplicar al elemento un estilo predefinido de un botn grande).

Se puede crear botones de diferentes tipos, con tan solo indicar el nombre o nombres de las clases correspondientes, como se muestra en la siguiente tabla:

Botn Default Primario Informativo xito

Class = btn btn btn-primary btn btn-info btn btn-success

Descripcin Botn gris estndar con gradiente Proporciona peso visual adicional e identifica la accin principal en un conjunto de botones Usado como una alternativa a los estilos predeterminados. Indica una accin positiva o exitosa

Indica que se debe tener cuidado con esta accin btn btn-danger Indica una accin peligrosa o potencialmente Peligro negativo btn btn-inverse Alterna el botn gris oscuro, no atado a una Inverso accin semntica o uso. btn btn-link Restarle importancia a un botn, haciendo que Link parezca un enlace, manteniendo el comportamiento del botn Tabla 58. Diferentes tipos de botones en BootStrap. Fuente: Documentacin BootStrap. [Disponible en: http://twitter.github.com/bootstrap/basecss.html#buttons]

Advertencia btn btn-warning

Se puede dar estilo a varios elementos de HTML, como tambin se pueden crear controles para trabajar junto con JavaScript, por ejemplo para crear un carrusel en el que pueden ir elementos, imgenes, y lo que se quiera introducir en un carrusel. Un ejemplo podra hacer el siguiente:

209

Imagen 206. Ejemplo crear carrusel con BootStrap. Fuente: Documentacin BootStrap. [Disponible en: http://twitter.github.com/bootstrap/javascript.html#carousel]

Se puede controlar el carrusel desde JavaScript y con la ayuda de Jquery, como por ejemplo, indicndole al carrusel que gire en un intervalo de tiempo de 2 segundos:

Imagen 207. Ejemplo de manejo de carrusel de BootStrap desde JavaScript. Fuente: Documentacin BootStrap. [Disponible en: http://twitter.github.com/bootstrap/javascript.html#carousel]

Existen muchas ms opciones, estilos, controles que se puede aadir, por ejemplo: alertas de aviso, ventanas modales, varios tipos de tabulaciones (tabs), contenedor de imgenes, tablas con estilos, formularios (forms) y varios controles ms.

3.4 API's JavaScript Una API es un conjunto de funciones y procedimientos o mtodos para poder ser utilizado por un software, en este caso por JavaScript, a continuacin se listarn las API's utilizadas en la aplicacin de este proyecto de tesis, se dar un concepto simple de cada una y ejemplos de uso.

210

3.4.1

Audio y Video

Las API's de Audio y Video describen un alto nivel de API de JavaScript para el procesamiento y sntesis de audio en aplicaciones web. Se conectan una serie de objetos juntos para definir la representacin de audio o video.

Para manipular el audio o video que se ha colocado en una web mediante los elementos de HTML5 audio y video, se lo puede hacer mediante varios mtodos que surgen de esta API ya sea de video o audio.

Ejemplo: Por ejemplo mediante los mtodos de play(), pause() o volumen, se puede manipular ya sea el audio o el video, como se muestra en el ejemplo siguiente:

Imagen 208. Ejemplo API Audio y Video.

Los mtodos utilizados en el ejemplo de la imagen anterior, podrn ser utilizados tanto para audio como para video. 211

3.4.2

Canvas

Como se explic en el captulo 1, existe un elemento HTML5 llamado canvas, el cual se utiliza para dibujar sobre l: grficos, grficos de juego, arte, u otras imgenes visuales, es ah donde el API Canvas de JavaScript se hace presente para con los mtodos que agrega, poder dibujar sobre ese elemento HTML5 canvas.

Ejemplos: A continuacin se mostrarn ejemplos de cmo dibujar con del API Canvas algunos grficos y tambin cmo realizar una animacin simple:

Se necesitara un elemento canvas para poder dibujar sobre l, como por ejemplo:

Imagen 209. Ejemplo elemento canvas para dibujar con el API Canvas.

Para comenzar ya a codificar el API Canvas de JavaScript se har lo siguiente:

Imagen 210. Codificacin inicial con el API Canvas.

Como se observa en el codificado de la imagen anterior, lo primero que se hace es declarar una variable y obtener el elemento CANVAS mediante el ID y despus mediante una condicin IF aseguramos que si canvas.getContext (obtiene el 212

contexto en el que CANVAS va a dibujar) es verdadero, se pueda continuar a programar el CANVAS, caso contrario se indicar al navegador que no es compatible la etiqueta ya que canvas.getContext devolver falso en la condicin. Como ya se mencion canvas.getContext obtiene el contexto en el que CANVAS va a dibujar, habiendo la posibilidad de contexto en 2 dimensiones (2D) y con ayuda de otras tecnologas o libreras hasta 3 dimensiones (3D) (como lo es por ejemplo el proyecto Three.js).

Para comenzar a dibujar en 2D simplemente se declara una variable y se le asigna el elemento CANVAS con la funcin o mtodo getContext y entre parntesis se escribe: 2d, de la siguiente manera:

Imagen 211. Obtener contexto para dibujar con API Canvas.

Mediante la variable que se ha definido como lo es contexto, podemos partir de ella para empezar con el primer dibujo que a continuacin se comenzar a explicar.

Algo muy sencillo de dibujar es un rectngulo o a su vez un cuadrado, como se ve en el siguiente ejemplo:

Imagen 212. Dibujar un rectngulo o cuadrado con API Canvas.

Como se observa en la imagen anterior, se utiliza el mtodo fillRect para dibujar un rectngulo con un relleno y strokeRect para hacerlo sin relleno y solo con borde. Estos mtodos reciben 4 parmetros, el primero es el origen en X donde comenzar a trazarse el rectngulo (medido en pixeles), el segundo es el origen en Y 213

(medido en pixeles), el tercer y cuarto parmetro es el ancho y alto respectivamente que tendr el rectngulo (medido en pixeles). El origen en X y Y se asimila como un plano cartesiano con sus ejes.

En el CANVAS se empieza a medir el origen X desde la esquina superior izquierda del lienzo con direccin hacia la derecha y obviamente el origen Y desde la parte superior izquierda con direccin hacia abajo.

A continuacin una imagen la cual nos muestra el resultado de los rectngulos antes codificados y con las acotaciones de las medidas colocadas en los mtodos fillRect y strokeRect:

Imagen 213. Resultado de la creacin de 2 rectngulos con sus medidas mediante la API Canvas.

Como vemos en la imagen anterior se muestran las figuras dibujadas (rectngulo con relleno negro y cuadrado sin relleno con borde color plomo), que obtienen colores por defecto, aunque hay la posibilidad de cambiar esos colores con otros 2 mtodos, expuestos a continuacin:

214

Imagen 214. Dibujar rectngulos con color de relleno en la Api Canvas.

Los mtodos utilizados para dar color a un rectngulo creado con el mtodo fillRect y strokeRect, son fillStyle y strokeStyle respectivamente, asignndoles una cadena con el color; ya sea con el nombre del color, con el valor en hexadecimal o con la funcin RGB.

En el navegador el resultado de lo programado anteriormente, se visualizara de la siguiente forma:

Imagen 215. Resultado en el navegador de la creacin de 2 rectngulos con relleno en el API Canvas.

En la programacin de CANVAS existe un mtodo o en realidad varios mtodos para poder dibujar a placer, trazando lo que se denomina caminos. Esto consiste en situarse primeramente en un punto del lienzo e ir colocando los puntos por donde se trazar el dibujo o el camino, para despus ir dando forma al trazado con relleno o simplemente con borde.

215

Para lograr el objetivo de dibujar caminos se necesita de algunas funciones o mtodos que se explicar a continuacin:

BeginPath(): Este mtodo se utiliza para indicarle al contexto del canvas que se empezar a dibujar un camino, no se le asigna ningn parmetro.

Moveto(): Este mtodo indica un punto imaginario de donde se partir para dibujar el camino. Es un punto imaginario ya que no se dibuja, ni se muestra nada en el CANVAS, simplemente se indica un punto inicial con los parmetros de posicin (x,y).

Lineto(): Esta funcin o mtodo de CANVAS dibuja una lnea recta, desde la posicin actual hasta un punto (x,y) que se le indica como parmetro en la funcin. La posicin actual de camino es la que se indic en la funcin anterior (moveto()), tambin puede ser la posicin donde haya terminado el dibujo de una lnea anterior.

Closepath(): Esta funcin cierra el trazado de un camino, volviendo a su punto inicial de dibujo. Este mtodo o funcin no recibe ningn parmetro.

Fill(): Se utiliza esta funcin para rellenar de color un rea resultante del trazado de puntos que han dibujado un camino.

Stroke(): Es similar al mtodo fill(), con la diferencia que ahora no rellena de color un rea resultante dibujada por el camino, si no que ahora pinta la silueta, borde o para entender mejor, pinta el camino mismo.

Para entender mejor el uso de las funciones descritas anteriormente, a continuacin se muestra un ejemplo de cmo dibujar 2 rombos, con y sin relleno:

216

Imagen 216. Dibujar 2 rombos con caminos en el API Canvas.

Como se observa en la imagen anterior se comienza indicndole al contexto de CANVAS que se empezar a dibujar un camino, con la funcin BEGINPATH() se le hace saber. Despus con MOVETO() se seala el punto de inicio con las coordenadas (x,y), y para ir trazando las lneas e ir dndole forma al rombo, se utiliza LINETO() que une todos los puntos que se irn pasando como parmetros en la funcin. Para indicar que se cierre el camino, como se observa en la imagen 29, se utiliza CLOSEPATH(). Aqu tambin se puede ir utilizando las funciones antes vistas para darle un color personal tanto al relleno como al borde, para eso estn las funciones FILLSTYLE() y STROKESTYLE() antes explicadas. Por ltimo con las funciones FILL() y STROKE() le indicamos al contexto del CANVAS si es que el camino tendr o no relleno.

El resultado en el navegador se visualizar de la siguiente manera:

217

Imagen 217. Resultado de dibujar 2 rombos en el navegador con el API Canvas.

Con los caminos de CANVAS se puede dibujar de una forma libre, con lneas rectas y se puede manipular y pintar con colores que se desee.

No hay que olvidar que se est programando en JavaScript y por lo tanto se puede ir codificando con todas las funciones natas de este lenguaje, como por ejemplo: setTimeOut, setInterval, math, y dems, que podrn ir mezclando con los mtodos del API Canvas y generando un sinfn de resultados grandiosos.

Otras de las cosas interesantes en CANVAS son las animaciones de las cuales podemos valernos para hacer juegos, entre otras cosas. A continuacin se explicar una animacin bsica para a partir de ello, tener una visin clara para poder lograr animaciones mucho ms complejas.

Lo primero que se debe tener claro para una animacin, es conocer el concepto de frames, que no es ms que secuencias de imgenes, en este caso en diferentes posiciones, que darn a la vista la sensacin de movimiento. En JavaScript existe una funcin que deriva del objeto window, sta cumple el rol de los frames, denominada Request Animation Frame, y con esta ya se puede comenzar a codificar la animacin bsica, expuesta a continuacin:

218

Imagen 218. Creacin de una animacin de movimiento de un rectngulo con el API Canvas. Parte 1.

Como se muestra en la imagen anterior, lo primero que se hace es declarar una variable contextoGeneral que obtendr el contexto en 2D del CANVAS. Luego se declara una variable tipo clase denominada ElementoRectangulo, la cual tendr sus atributos (ancho, alto, x, y), para poder ir dibujando un rectngulo en diferentes posiciones y dando la impresin de movimiento. De igual manera la variable tipo clase tendr un mtodo llamado dibujar, el cul como su nombre lo indica dibujar, en este caso un rectngulo con los atributos que se hayan indicado en la clase ElementoRectangulo. El mtodo dibujar tendr una variable que se recoger como parmetro, denominada contexto, la cual se obtiene como un contexto nuevo cada vez que se dibuje un nuevo rectngulo, dibujando ste con la funcin fillRect(), a la cual le pasamos los cuatro parmetros (x, y, ancho, alto).

219

Imagen 219. Creacin de una animacin de movimiento de un rectngulo con el API Canvas. Parte 2.

Ahora se declara una variable Rectangulo para instanciar o construir desde la clase ElementoRectangulo un objeto, de igual manera se declara una variable (direccion) que ser la encargada de decidir si el rectngulo se mover para abajo o para arriba.

Para proceder a simular el movimiento del rectngulo agregamos una funcin BucleFrames con la ayuda de Request Animation Frame. En este ejemplo como se utiliza un motor de renderizado de Chrome llamado Webkit, el cual es el que toma el contenido HTML y lo interpreta de manera visual.

Con

WebKit

la

funcin

para

lograr

el

efecto

de

frames

es

webkitRequestAnimationFrame(), que recibe por parmetro una funcin la cual ser BucleFrames que se repetir en un intervalo de tiempo ya predeterminado por la funcin antes mencionada de Webkit.

Al momento de ir dibujando un nuevo rectngulo, se necesita borrar o limpiar el CANVAS para que surja efecto el movimiento, para esto se utiliza la funcin clearRect() la cual recibe cuatro parmetros, es igual a la antes explicada funcin fillRect(), con la diferencia de que ahora ya no dibuja si no limpia un rea definida por los parmetros que recibe (x, y, un ancho, y un alto). 220

De acuerdo con la variable direccion, la cual tendr 2 valores: bajar y subir, el atributo y del objeto Rectangulo aumentar en 1 si es que la variable direccion tiene el valor de bajar, caso contrario el atributo y disminuir en 1, dando as la sensacin de movimiento para arriba o para abajo.

A continuacin para que la imagen rectngulo no salga de los lmites del CANVAS, se pone dos condicionantes, los cuales permiten establecer que si la posicin y del rectngulo es igual al alto del CANVAS (canvas.height) menos el alto del propio rectngulo dibujado (Rectangulo.alto), entonces la direccin de movimiento del rectngulo ser para arriba, y si el rectngulo en la posicin y es igual a 0 la direccin ser para abajo. Por ltimo dentro de la funcin BucleFrames, se invocar al mtodo de dibujar del objeto Rectangulo y se le pasar el parmetro del contexto del CANVAS donde dibujar (Rectangulo.dibujar(contextoGeneral)). Para que todo lo mencionado y explicado antes funcione, obviamente se deber llamar a la funcin BucleFrames().

En el navegador se mostrar un CANVAS con el rectngulo en movimiento de arriba para abajo y viceversa.

Imagen 220. Resultado en el navegador de la animacin de movimiento de un rectngulo con el API Canvas.

En la imagen anterior se puede observar cmo se mostrar en el navegador el movimiento continuo del rectngulo (las flechas mostradas en la imagen son para indicar que el rectngulo est en movimiento).

221

3.4.3

Geolocation

Esta API de JavaScript permite que el navegador acceda a los datos de la posicin (coordenadas de latitud y longitud) del dispositivo desde el que se est accediendo a la web, en este caso puede ser un navegador web.

Ejemplo: Con el siguiente ejemplo se obtendr los valores de Latitud y Longitud de ubicacin de un dispositivo, mediante los cuales se puede por ejemplo, enviar a la API de Google Maps y mostrar la ubicacin en un mapa:

Imagen 221. Sintaxis para obtener la ubicacin (Latitud y Longitud) de navegacin mediante la API Geolocation.

En la imagen anterior se puede observar que mediante el objeto de la API Geolocation de JavaScript navigator, se puede tener acceso a sus propiedades y obtener la posicin.

Lo primero que se puede observar es que se le pregunta al navegador si soporta la obtencin de localizacin, mediante un If (navigator.geolocation), si es que el navegador devuelve true entonces significa que si soporta o si hay como trabajar con la API Geolocation. Ahora mediante la propiedad getCurrentPosition se obtendr un objeto que contiene las coordenadas de Longitud y Latitud.

222

Algo muy importante que mencionar de la API Geolocation es que por seguridad el navegador pregunta al usuario si es que desea mostrar su ubicacin a la pgina web, el navegador mostrar lo siguiente:

Imagen 222. Seguridad del navegador para conceder el permiso de mostrar la ubicacin, mediante Geolocalizacin.

As es que si el usuario no permite mostrar la ubicacin, no se podr acceder a las coordenadas.

Ahora para aprovechar la obtencin de las coordenadas (Latitud y Longitud) se las puede incluir en algn generador de mapas, como Google Maps u OpenStreet Maps.

A continuacin se muestra un cdigo para que de las coordenadas que se obtengan con la API Geolocation de JavaScript, se genere un mapa con la API de Google Maps:

Imagen 223. Sintaxis para generar un mapa con las coordenadas obtenidas de la API Geolocation, mediante Google Maps.

223

El cdigo de la imagen anterior lo que hace es obtener la Latitud y Longitud mediante la API Geolocation y enviarle a un vnculo de Google Maps para que muestre el mapa sobre un elemento IMG. A continuacin se muestra el resultado:

Imagen 224. Resultado en el navegador de la generacin de un mapa con Google Maps.

3.4.4

Web Storage

Web Storage es una API de JavaScript que introduce dos mecanismos relacionados, de forma similar a la cookies, para el almacenamiento de datos del lado del cliente.

Normalmente los datos se guardan en pares de datos Llave/Valor (ej. Llave: nombre, Valor: Juan), para manipularlos en el navegador.

Los dos mecanismos de almacenamiento que propone esta API, son: Session Storage y Local Storage. La nica diferencia entre estos dos mecanismos es su manera de permanecer almacenado, ya que Local Storage se mantiene almacenado hasta que el usuario elimine el contenido de almacenamiento, y Session Storage se mantiene almacenado hasta que se termine la sesin de un usuario, es decir, cuando un usuario cierre de ventana del navegador donde se encuentra almacenados los datos.

224

Para utilizar los mecanismos de almacenaje, mencionados anteriormente, existen dos objetos de la API Web Storage, el uno denominado LocalStorage para almacenamiento local, y SessionStorage para almacenamiento de sesin.

Ejemplos: A continuacin se explicar cmo guardar, obtener y eliminar los datos para utilizarlos en una aplicacin web. Se mostrarn ejemplos solo con LocalStorage, ya que la manera de codificar es la misma, con la nica diferencia que se deber cambiar LocalStorage por SessionStorage.

Almacenar datos Para almacenar los datos se utiliza el mtodo setItem, como ya se mencion antes la manera de guardar los datos es Llave/Valor, por lo tanto para guardar un dato se especificar la llave, y si ya existiera almacenada esa llave pues el dato a guardar se reemplazar. A continuacin un ejemplo de cmo guardar:

Imagen 225. Sintaxis para almacenar datos con LocalStorage.

Se observa en la imagen anterior que se est almacenando la llave nombre con su valor Juan, de igual manera la llave contrasena con su valor 12345.

Obtener los datos almacenados Para obtener los datos que ya estn almacenados, se utiliza el mtodo getItem. Por ejemplo para recuperar los datos guardados anteriormente se har lo siguiente:

Imagen 226. Sintaxis para obtener los datos almacenados con LocalStorage.

Como se observa en la imagen anterior, se est obteniendo los datos de la llave nombre y de la llave contrasena. Ahora la variable declarada nombre tomar el valor Juan y la variable contrasena tomar el valor 12345. 225

Eliminar una Llave/Valor Para poder eliminar una Llave/Valor determinada, se utiliza el mtodo removeItem. Por ejemplo si se quisiera eliminar la Llave contrasena, se lo puede hacer de la siguiente forma:

Imagen 227. Sintaxis para eliminar una Llave/Valor, almacenada con LocalStorage.

Ahora si se quiere eliminar todo lo que est almacenado con LocalStorage o de igual manera todo lo que est almacenado con SessionStorage se deber utilizar el mtodo clear().

3.4.5

Web SQL Database

Esta API de JavaScript permite almacenar datos en el PC de cada usuario, de una manera estructural relacional SQL. Teniendo un nombre de la base de datos, tablas, campos y relaciones.

Ejemplo: Para ver cmo funciona esta API, se ir detallando a continuacin cmo crear una base de datos, una tabla, de igual manera las operaciones de agregacin, modificacin y consultas.

Para abrir o crear una nueva base de datos se har lo siguiente:

Imagen 228. Sintaxis para abrir o crear una base de datos local con el API Web SQL Database.

Como se observa en la imagen anterior, se asigna a una variable (db) una funcin openDatabase(), la cual abrir una base de datos si estuviera ya creada, caso contrario primero crear la base de datos y abrir la misma para poder realizar operaciones sobre ella. Se puede apreciar tambin en la imagen anterior, que a la funcin openDatabase() se pasan cuatro parmetros, esos parmetros (en su orden) son: nombre 226

(BaseDeDatosEjemplo), versin (1.0), descripcin (Descripcin) y tamao (2 * 1024 * 1024) de la base de datos. El tamao de la base de datos viene dado en bytes.

Hay que tener en cuenta que la base de datos web es transaccional, as que todas las operaciones o sentencias SQL se harn dentro de una transaccin, por lo tanto mientras se est ejecutando alguna transaccin la base de datos se bloquear hasta finalizar dicha transaccin.

Ahora hay que crear la funcin de transaccin donde irn las operaciones de agregacin, modificacin y consulta.

Imagen 229. Sintaxis de la funcin de transaccin de una base de datos local con la API Web SQL Database.

Como se muestra en la imagen anterior (se supone que la base de datos ya est creada) con la variable db (que contiene la creacin de la base de datos) se acceder al mtodo transaction para ejecutar una funcin, la cual crear un objeto (tx), el cual se encargar de realizar las operaciones SQL. Ejemplo a continuacin, donde se crear una tabla en la base de datos:

Imagen 230. Sintaxis para crear una tabla de una base de datos local con la API Web SQL Database.

Ahora con el objeto creado tx, se puede ejecutar una sentencia SQL, gracias al mtodo executeSql(), el cual recibe una cadena de texto en la que se escribe la sentencia. En el caso de la imagen anterior, se est creando una tabla llamada usuario, con los campos userid, que es la llave primaria de tipo entero y es de autoincremento, y el campo nombre de tipo texto. 227

Por motivos de espacio, en la imagen anterior se muestra la sentencia de creacin de la tabla usuario con saltos de lnea, pero en realidad deber ir en una sola lnea junto al mtodo executeSql() para su correcto funcionamiento. Ya creada la tabla usuario, se puede ir agregando o insertando registros, de la siguiente manera:

Imagen 231. Sintaxis para insertar un registro en una tabla de una base de datos local con la API Web SQL Database.

Como se puede ver en la imagen anterior, se est insertando un registro a la tabla usuario, el registro que se est agregando es el nombre Juan en el campo nombre.

Para consultar los registros que se hayan insertado, se lo puede hacer como en el siguiente ejemplo que se muestra a continuacin:

Imagen 232. Sintaxis para consultar registros en una tabla de una base de datos local con la API Web SQL Database.

Como se muestra en la imagen anterior, ahora con el mtodo executeSql() se realiza una consulta SQL, sacando todos los datos de la tabla usuario. 228

Cabe recalcar la diferencia entre sta sentencia (SELECT) y la antes vista INSERT, donde se ocupaba 2 parmetros en el mtodo executeSql(),el segundo parmetro era un array donde se ingresa los valores que se insertarn al nuevo registro. Ahora con SELECT ya no se va a insertar nada, por lo tanto ahora el segundo parmetro ser un array vaco ([]) como se puede apreciar en la imagen anterior, pero ahora existir un tercer parmetro que ser una funcin, la cual sacar el resultado de la consulta SQL y mediante un bucle FOR se podr ir mostrando los registros que existieran.

Ahora bien si se quiere modificar algn registro, simplemente se tendr que cambiar la sentencia SQL. Por ejemplo en la base de datos (BaseDeDatosEjemplo) que se ha creado durante toda esta la explicacin, se cre igualmente una tabla llamada usuario y se agreg un registro en el campo nombre y qued de la siguiente manera: usuarioid nombre
1 Juan

Tabla 59. Resultado de un registro agregado en una tabla SQL desde la API Web SQL Database.

Si lo que se desea es, por ejemplo, modificar el nombre Juan por Pedro, la sentencia SQL quedara de la siguiente manera:

Imagen 233. Sintaxis para modificar registros en una tabla con la API Web SQL Database.

229

No hay que olvidar que por cuestiones de espacio, se puede observar de la imagen anterior, que la sentencia de modificado (UPDATE) est con un salto de lnea, para su correcto funcionamiento se deber poner en una sola lnea.

Por ltimo, si se desea eliminar un registro, por ejemplo en este caso, el registro de la tabla usuario que tenga el nombre de Pedro, entonces quedara la sentencia de la siguiente manera:

Imagen 234. Sintaxis para eliminar registros en una tabla de una base de datos local con la API Web SQL Database.

3.4.6

Drag and Drop

Esta API de JavaScript, permite arrastrar y soltar elementos HTML5 de un origen a un destino. Para lograr el arrastre se necesita de los eventos nuevos de HTML5, para poder mover elementos de una posicin a otra con el ratn (mouse).

JavaScript incluye esta API para con los eventos de HTML5 producir un proceso de arrastre y no valerse de plugins para cumplir con esa funcin.

Ejemplo: Primeramente se deber elegir el elemento al cual se le permitir arrastrarse de un lugar a otro, para ello se le agrega, a dicho elemento, un atributo llamado draggable que tendr el valor de true. Con esto se le indica al navegador que sin ningn problema este elemento podr moverse a cualquier lugar. En la siguiente imagen se puede ver un ejemplo:

Imagen 235. Sintaxis para que un elemento HTML sea draggable.

230

Como se puede observa en la imagen anterior se ha creado un prrafo (<p></p>) con ID parrafo, el cual tiene un atributo llamado draggable con su valor en true, dando as el permiso de movilidad del elemento.

Con el permiso para mover del elemento prrafo (p), hay que poner en marcha la secuencia Drag and Drop, para ello existe un atributo (evento) que lograr aquello y se denomina ondragstart, al cual se le asigna una funcin con dos parmetros para poder establecer el contenido del objeto que se arrastrar. Como se muestra en la siguiente imagen:

Imagen 236. Sintaxis para comenzar a arrastrar un elemento HTML con Drag and Drop.

En la imagen anterior se observa que al atributo o evento ondragstart se le asigna una funcin llamada drag(), la cual tiene dos parmetros, el uno (this) para pasar a la funcin el elemento mismo, y el otro (event) para indicarle al navegador el evento que est ocurriendo. La funcin en JavaScript se muestra a continuacin:

Imagen 237. Funcin en JavaScript para comenzar a arrastrar un elemento HTML con Drag and Drop.

Se observa en la imagen anterior la funcin drag(), que recoge en las variables parrafo y evento, los parmetros antes enviados. Con la variable evento se obtiene el evento mismo que est ocurriendo ese preciso momento, el cual con la propiedad dataTransfer.setData del API Drag and Drop, se establece el contenido del elemento para transmitir la carga de datos, y despus obtener el contenido en otra posicin. 231

Para indicarle al navegador el destino del elemento que se est arrastrando, se deber crear un espacio en el cual pueda soltarse el elemento.

En la siguiente imagen se crea una etiqueta DIV donde el objeto o elemento podr moverse:

Imagen 238. Elemento destino donde un elemento se arrastrar con Drag and Drop.

Por ltimo se agregaran unos atributos (eventos) al contenedor destino donde se soltarn los elementos que sern arrastrados. En la siguiente imagen se puede observar los atributos:

Imagen 239. Elemento destino con sus atributos, para poder soltar los elementos arrastrados con Drag and Drop.

Como se observa en la imagen anterior existe un atributo o evento (ondrop), que permitir llamar a la funcin drop para obtener el contenido del elemento que se est arrastrando una vez que el elemento haya sido soltado sobre el contenedor, se pasarn 2 parmetros, uno el elemento mismo, y el otro es el evento que est ocurriendo en el instante de arrastre. De igual manera existen 2 atributos (eventos) ms, uno llamado ondragenter que se activa cuando el usuario arrastra el puntero del Mouse sobre el rea vlida de destino (contenedor), y otro denominado ondragover, el cual se activa continuamente cuando el cursor se encuentra sobre el rea de destino (contenedor). Esos atributos o eventos mencionados retornarn un valor de false para impedir la accin del navegador por defecto.

232

A continuacin se muestra la funcin drop() la cual obtendr el contenido del elemento que se arrastrar:

Imagen 240. Funcin en JavaScript para obtener el elemento arrastrado con Drag and Drop. Como se observa en la imagen anterior se recogen los dos parmetros, enviados anteriormente, y con la propiedad dataTransfer.getData del evento, se obtendr el ID del elemento que se est arrastrando y se agregar al contenedor con la funcin appendChlid(). Con la API Drag and Drop y la ayuda de otra API de JavaScript para manejo de archivos (API File) existe la posibilidad de arrastrar archivos desde una ubicacin de la PC, hasta el navegador. Para lograr esto se debe realizar lo mismo que se explic anteriormente, con la diferencia de que ahora en el evento ondrop en lugar de utilizar dataTransfer.getData() se utilizar dataTransfer.files, para con esto acceder a los archivos.

A continuacin un ejemplo con el cdigo completo para subir una foto desde el PC al navegador, y poder mostrarla en un elemento DIV:

233

Imagen 241. Ejemplo de cmo arrastrar una foto desde la PC al navegador mediante Drag and Drop.

Como se observa en la imagen anterior, existe un DIV con ID destino, en el cual se mostrar la foto que ser arrastrada desde la PC, este DIV tiene el evento ondrop el cual se activar cuando se suelte un elemento sobre l, en este caso se soltar una foto. Igualmente existen los eventos ondragover y ondragenter, explicados ya anteriormente. Cuando se produce el evento ondrop se realizar una funcin llamada drop(), donde se pasa el parmetro event. Dentro de la funcin drop() se obtiene mediante la variable evento el parmetro pasado anteriormente, para poder realizar un evento.preventDefault() el cual evita el comportamiento por defecto del navegador, en el caso de no poner el preventDefault() el navegador lo que har es abrir la foto que estemos soltando sobre ella como un archivo normal y no sobre el contenedor (destino). Con la variable evento tambin se acceder a los archivos, en este caso a la foto, mediante la propiedad dataTransfer.files que estar asignada en 234

una

variable

archivos.

Despus

se

llamar

una

funcin

llamada

procesarArchivos() pasando el parmetro del archivo al que se acceder y se soltar en el contenedor destino. Dentro de la funcin procesarArchivos() se podr leer el archivo (foto) y obtener la URL para mostrar como background en el DIV con ID destino. Igualmente se leer el archivo mediante la instancia de un objeto llamado FileReader, cuando finaliza de leer el archivo, se activa el evento onload del lector y se puede utilizar su atributo result para acceder a los datos del archivo, en este caso se acceder para obtener la URL mediante una propiedad de FileReader llamada readAsDataUrl y con esta darle un background al DIV con la URL de la foto.

3.4.7

Web Workers

Esta API de JavaScript da la capacidad de ejecutar tareas en segundo plano, con el fin de no embrutecer, es decir, no volver lento las interacciones del usuario con la pgina web. De esta manera operaciones que necesiten gran cantidad de tiempo para procesamiento, pueden ejecutarse en segundo plano, o ms bien dicho pueden ejecutarse en otro archivo .js. En un primer archivo JavaScript se instanciar el WebWorker con su ubicacin y en otro JavaScript estarn las operaciones que se realizarn en segundo plano, es decir en el WebWorker mismo.

Existir una comunicacin bidireccional entre el WebWorker y el archivo principal desde donde fue creado el trabajador.

Ejemplo: Para crear el WebWorker se har lo siguiente:

Imagen 242. Sintaxis para crear un Web Worker.

235

Como se observa en la imagen anterior se crea un objeto worker dndole un nombre del archivo que va a ejecutar el trabajador, en ese caso se llama worker.js, con esto ya se tiene creado un worker listo para que ejecute un script. Para enviar un mensaje al worker:

Imagen 243. Sintaxis para enviar un mensaje a un Web Worker.

Para enviar un mensaje desde el worker:

Imagen 244. Sintaxis para enviar un mensaje desde un Web Worker.

Para recibir un mensaje en el archivo principal:

Imagen 245. Sintaxis para recibir un mensaje de un Web Worker.

Para recibir un mensaje en el worker:

Imagen 246. Sintaxis para recibir un mensaje en el Web Worker.

3.4.8

WebNotifications

Esta API de JavaScript sirve para mostrar notificaciones o avisos a los usuarios sobre eventos que ocurran en la web, pero fuera del contexto de la pgina web en que el usuario est navegando.

Se mostrar como una pequea ventana, algo parecido como ocurre con el programa Windows Live Messenger, que al recibir un mensaje aparece un cuadro pequeo de aviso en la parte inferior derecha. 236

Para que las notificaciones se muestren, de igual manera como en la API Geolocation vista anteriormente, se necesita permiso del usuario caso contrario no se mostrarn absolutamente nada.

Cabe recalcar que sta API como la mayora de nuevas herramientas de JavaScript no son compatibles en todos los navegadores y en los ejemplos que se mostrarn de notificaciones se basarn en el navegador Google Chrome.

Ejemplo: A continuacin se muestra cmo preguntar al usuario si concede el permiso de mostrar notificaciones web:

Imagen 247. Sintaxis para pedir permiso al usuario de mostrar las Notificaciones con la API Web Notifications.

En la imagen anterior se puede observar que se ha creado un INPUT de tipo botn para que cuando se haga click sobre este se dispare una funcin llamada notificacin(), en esa funcin se pregunta al usuario lo siguiente:

if (window.webkitNotifications.ckeckPermission == 0)

Esto significa que si el objeto window con la propiedad de webkitNotifications tiene el permiso para mostrar las notificaciones (chechPermission == 0), pues entonces se 237

proceder a crear la notificacin (el nmero 0 significa que se tiene permiso), caso contrario si no se tiene el permiso entonces se agregar la siguiente lnea de cdigo para preguntarle al usuario si concede el permiso, esto se hace con la siguiente lnea de cdigo:

window.webkitNotifications.requestPermission();

En el navegador se mostrar lo siguiente:

Imagen 248. Seguridad del navegador para conceder el permiso de mostrar Notificaciones con la API Web Notifications.

As el navegador dar la opcin al usuario si quiere mostrar notificaciones web en su navegador.

A continuacin se muestra cmo crear y mostrar la notificacin, al igual que algunos eventos del objeto window.webkitNotifications:

238

Imagen 249. Sintaxis para crear Notificaciones con la API Web Notifications.

Como se observa en la imagen anterior al momento de conocer que el navegador tiene el permiso necesario para mostrar las notificaciones se empieza a crear la notificacin misma, para aquello se declara una variable notificacion a la cual retornar el resultado de una funcin llamada crearNotificacion(), sta funcin es la encargada de crear el objeto en s de la notificacin con window.webkitNotifications.createNotification(), donde se pasarn 3 parmetros para la creacin, el primer parmetro es el nombre de una foto, el segundo es el ttulo y el tercero un contenido o descripcin, los cuales se mostrarn en la notificacin. Con esto ya se ha creado la notificacin y no queda ms que mostrarla, y para ello simplemente se har con un mtodo denominado show(), por lo tanto con la variable notificacion que contiene la instancia de la notificacin se escribir notificacin.show(), y esto har que se muestre en pantalla la notificacin web.

239

Tambin se puede observar en la imagen anterior una funcin que se realizar cuando el usuario de click sobre la notificacin (notificacin.onclick), en esa funcin se muestra un notificacin.cancel(), eso har que se oculte la notificacin al dar click en la notificacin.

El resultado en el navegador cuando se muestre la notificacin ser como la imagen siguiente:

Imagen 250. Resultado en la PC de una Notificacin con la API Web Notifications

3.5 Nodejs Es una plataforma construida en JavaScript para la construccin de aplicaciones rpidas y escalables, ideal para aplicaciones en tiempo real.

NodeJs al contrario que la mayora de cdigo JavaScript, no se ejecuta en un navegador web, si no que ahora se ejecuta en el lado del servidor escuchando un determinado puerto.

Es como una librera, orientada a eventos, con la posibilidad de crear aplicaciones web complejas desarrolladas completamente en JavaScript.

Posee varios mdulos que se pueden agregar, mdulos para diferentes fines como: manejo de sockets web, manejo de base de datos, entre otras.

240

Ejemplo:

Para crear un servidor http en nodejs:

Imagen 251. Ejemplo de un servidor http con NodeJS. Fuente: Enciclopedia Libre Wikipedia. [Disponible en: http://es.wikipedia.org/wiki/Nodejs]

El ejemplo anterior, imprimir en pantalla un Hello World (Hola Mundo), aunque antes se debe haber instalado NodeJs e iniciado el servidor node.

Para instalar nodejs, se lo puede descargar desde su pgina oficial: http://nodejs.org/

241

CAPTULO 4 MANUAL DE USO DE LA APLICACIN WEB 4.1 Introduccin En este captulo se proporcionar un manual de uso de la aplicacin web desarrollada en este proyecto de tesis, un manual tanto para el usuario como para el administrador de la web.

Primeramente se dar una descripcin de la finalidad de la aplicacin web, para despus ir detallando el uso cada seccin de la misma.

4.2 Descripcin de la aplicacin La aplicacin web que se ha desarrollado en este proyecto de tesis, trata sobre una red social orientada a compartir y ofrecer servicios que puedan prestar los usuarios registrados en sta.

sta aplicacin se la ha denominado con el nombre de PreServi.

Al momento de registrarse en PreServi, se podr buscar personas que ofrezcan servicios, de inters para cada usuario y de igual forma se podr publicar los servicios que cada usuario ofrezca y as generar una comunicacin con cada uno de los usuarios que formarn parte de los contactos.

Cada usuario registrado recibir notificaciones, noticias online de las actividades ms importantes que realicen sus contactos o usuarios de inters, adems habr la posibilidad de que los usuario registrados tengan un perfil personalizado, pudiendo as mejorar el aspecto de su perfil.

242

4.3 Manual para usuarios

4.3.1

Pgina de inicio

A continuacin se puede observar la pgina de inicio de la aplicacin, con sus secciones principales de contenido, marcadas en recuadros de color rojo:

Imagen 252. Pgina principal de la aplicacin web.

En la imagen anterior se puede observar la pgina inicial cuando se ingrese a la aplicacin web denominada PreServi. Se puede notar que existen 3 secciones principales, que se han marcado en recuadros de color rojo:

Registrarse Informacin sobre la aplicacin Iniciar sesin

Ms adelante se explicar cmo utilizar cada una de esas secciones.

243

4.3.1.1 Registrarse En la pgina de inicio de PreServi existe la seccin de Registrarse, en la que se proceder a llenar los campos de datos para formar parte de esta aplicacin, como se muestra a continuacin:

Imagen 253. Seccin Registrarse en la aplicacin web.

Como se puede observar en la imagen anterior, existen 8 campos de datos que se deben llenar para poder registrarse en PreServi y poder iniciar sesin y acceder a las herramientas que ofrece esta aplicacin, al igual que existe un botn para presionar una vez completado el ingreso de todos los campos.

Cada campo de datos que se debe completar o llenar es obligatorio y tiene ciertas condiciones o validaciones de ingreso, a continuacin se explicar las condiciones de cada campo:

Campo nombres En este campo el usuario deber ingresar sus dos nombres obligatoriamente, separados por un espacio. 244

Campo apellidos En este campo el usuario deber ingresar sus dos apellidos obligatoriamente, separados por un espacio.

Campo email En este campo el usuario deber ingresar su correo electrnico (email), debe ser un correo electrnico vlido.

El email ingresado servir para iniciar sesin en la aplicacin web.

Campo email de confirmacin En este campo el usuario deber ingresar nuevamente el correo electrnico que escribi antes, es una manera de seguridad para que el usuario confirme si el correo est escrito correctamente.

Campo contrasea En este campo el usuario deber ingresar una contrasea para dar una seguridad a su cuenta, ya que con esta contrasea podr iniciar sesin en la aplicacin web.

La contrasea que el usuario ingrese deber cumplir con las siguientes condiciones:

Se debe ingresar entre 8 y 10 caracteres Entre los caracteres debe existir por lo menos un dgito (nmero) y un alfanumrico (letra) No debe ingresar caracteres especiales ($%{#!.)

Campo contrasea de confirmacin En este campo el usuario deber ingresar nuevamente la contrasea que escribi antes, es una manera de seguridad para que el usuario confirme si la contrasea est escrita correctamente.

245

Campo telfono En este campo el usuario deber ingresar su nmero de telfono. En este campo no existe ninguna condicin especial, a excepcin de que debe ser llenado obligatoriamente.

Campo direccin En este campo el usuario deber ingresar su direccin de domicilio. En este campo no existe ninguna condicin especial, a excepcin de que debe ser llenado obligatoriamente.

Una vez llenado todos los campos y cumpliendo con las condiciones antes mencionadas, se podr finalizar el registro de usuario haciendo click en el botn para completar el registro denominado Registrarme (color azul).

La aplicacin web guardar sus datos y mostrar en pantalla el siguiente mensaje de finalizacin:

Imagen 254. Mensaje de finalizacin de registro en la aplicacin web.

4.3.1.2 Informacin sobre la aplicacin En la pgina de inicio de PreServi existe la seccin de Informacin sobre la aplicacin, que consta de dos botones, uno para leer la descripcin sobre la aplicacin y el otro botn para ver un video de demostracin de la aplicacin web, a continuacin se mostrar la seccin:

246

Imagen 255. Seccin Informacin sobre la aplicacin.

Como se mencion anteriormente existen 2 botones: Botn leer ms y Botn ver un video, los cuales darn acceso a informacin y una demostracin de la aplicacin.

Botn leer ms Al hacer click sobre este botn se mostrar una ventana con una descripcin breve sobre las caractersticas de PreServi, como se muestra a continuacin:

Imagen 256. Descripcin breve de las caractersticas de la aplicacin web.

247

En la imagen anterior se muestra la ventana de descripcin de la aplicacin, en la que se muestra las caractersticas de PreServi y de igual manera una foto del autor de la aplicacin.

Botn Ver un video Al hacer click sobre este botn se mostrar una ventana con un video de demostracin de PreServi, como se muestra a continuacin:

Imagen 257. Video de demostracin de utilizacin de la aplicacin web.

4.3.1.3 Iniciar sesin En la pgina de inicio de PreServi existe la seccin de Iniciar sesin, para as comenzar a utilizar la aplicacin web y todas sus caractersticas, siempre y cuando el usuario se haya registrado anteriormente.

Se podr iniciar sesin con el email y la contrasea que el usuario se registr.

A continuacin se muestra una imagen de la seccin de Iniciar sesin:

248

Imagen 258. Seccin Iniciar sesin.

La seccin de Iniciar sesin como se observa en la imagen anterior, tiene dos campos de datos, el uno para ingresar (escribir) el email (correo electrnico) y el otro para ingresar la contrasea, y un botn para iniciar la aplicacin con la cuenta del usuario.

Campo email Se debe ingresar el correo electrnico con el que el usuario se ha registrado en PreServi.

Campo contrasea Se debe ingresar la contrasea con el que el usuario se ha registrado en PreServi.

Botn iniciar Cuando se hayan ingresado los campos anteriores, y si los datos son los correctos, la aplicacin iniciar con la cuenta del usuario y se mostrar la Pgina principal de usuarios.

249

4.3.2

Pgina principal de usuarios

Cuando el usuario ha iniciado sesin la pgina que se mostrar es la principal de usuarios.

A continuacin se puede observar la pgina principal de usuarios, con sus secciones principales de contenido, marcadas en recuadros de color rojo:

Imagen 259. Pgina principal de usuarios de la aplicacin web.

La pgina principal de usuarios de PreServi se divide en 5 secciones principales: Contenidos, Men Superior, Men Izquierdo, Barra de Informacin y Herramienta de chat. A continuacin se explicar cada seccin:

4.3.2.1 Contenidos Esta seccin de Contenidos es donde se mostrar el contenido de cada una de las funciones del Men Izquierdo, por ejemplo en la imagen anterior se puede observar el contenido de la funcin Noticias, a continuacin se muestra una imagen de sta seccin:

250

Imagen 260. Seccin Contenidos de la aplicacin web.

En la imagen anterior se puede observar la seccin Contenidos, el cual posee 3 partes:

Un ttulo de contenido: El ttulo del contenido, es decir el ttulo del contenido de la funcin que se visualizar, por ejemplo en la imagen anterior se muestra el ttulo de la funcin Noticias (Noticias de tus contactos).

Botones de contenido: Son botones de manipulacin del contenido.

Contenido: Es el contenido en s de la funcin que se ha seleccionado.

Es importante mencionar que los Botones de contenido solo se encuentran disponibles para las funciones de: Noticias, Mensajes y Ubicacin.

251

4.3.2.2 Men superior El men superior es un men que se compone de 4 botones: Botn Nombre de usuario, Botn Ver mi perfil, Botn Inicio, Botn Cerrar sesin, y un Buscador de usuarios o personas.

El men superior, es un men que siempre estar a la vista del usuario, por lo tanto se podr acceder a l en cualquier momento.

A continuacin se muestra el men, remarcadas en cuadros de color rojo sus diferentes composiciones:

Imagen 261. Men superior de la aplicacin web.

4.3.2.2.1

Botn Nombre de usuario

Este botn contiene el primer nombre del usuario que inici sesin, yal hacer click sobre este botn inmediatamente la aplicacin acceder a la Pgina principal de usuarios, explicada anteriormente.

4.3.2.2.2

Botn Ver mi perfil

Es botn como su nombre lo indica, muestra el perfil del usuario que ha iniciado su sesin. ste perfil es la pgina que los dems usuarios mirarn, es el perfil pblico de cada usuario. Por ejemplo si el usuario de nombre Juan da click en el Botn Ver mi perfil para revisar cmo los dems observarn su perfil, se mostrar lo siguiente:

252

Imagen 262. Ejemplo de usuario "Juan" al revisar su perfil en la aplicacin web.

La imagen que se muestra es el perfil del usuario Juan, es el perfil que ser visto por los dems usuarios, el contenido de este perfil se explicar ms adelante.

4.3.2.2.3

Buscador de usuarios personas

Es un campo de datos, donde se puede ingresar el nombre, servicio o correo electrnico de la persona que se desee buscar, y enseguida la aplicacin buscar al usuario/s que cumplan con lo solicitado y mostrar una lista de ellos. Por ejemplo si se desea buscar una persona por nombre juan, se mostrar algo as:

Imagen 263. Ejemplo de utilizacin del Buscador de usuarios en la aplicacin web.

Como se observa en la imagen anterior al momento de escribir el nombre juan, aparecen los usuarios que coincidan con el nombre juan.

253

De igual manera si el usuario est buscando personas que ofrezcan o busquen un servicio cualquiera, como por ejemplo, un Ingeniero de Sistemas pues entonces deber ingresar Ingeniero de Sistemas en el campo de datos y se listarn las coincidencias.

Tambin se puede buscar a un usuario, por el correo electrnico.

Al momento de que se listan los usuarios que coincidan con lo que se est buscando, al pasar con el ratn (mouse) sobre cada usuario, se mostrar un cuadro con el nombre y servicios que busca y ofrece dicho usuario, como se muestra a continuacin:

Imagen 264. Ejemplo de bsqueda de usuarios, mostrando el cuadro de descripcin del usuario en la aplicacin web.

Como se muestra en la imagen anterior, se muestra un cuadro de descripcin de color plomo del usuario al cual se le seale con el mouse.

Ahora si se quiere revisar el perfil completo del usuario, simplemente se debe dar click sobre l. Por ejemplo si se quiere revisar el perfil de Henry, se buscar en el Buscador de usuarios y se dar click sobre l, entonces aparecer el perfil de ese usuario:

254

Imagen 265. Ejemplo para revisar el perfil de un usuario encontrado con el Buscador de usuarios en la aplicacin web.

Como se observa en la imagen anterior, se puede notar el perfil del usuario Henry, donde se muestra sus datos personales, los servicios que ofrece y busca, entre otras cosas que se explicar en el tema: Perfil visible a los dems usuarios.

Tambin se puede observar que existe un botn de color verde en la parte superior izquierda, haciendo click en ese botn se eliminar/agregar ese usuario (en este caso el usuario Henry) al contenido de la funcin Contactos y a la Herramienta de chat.

4.3.2.2.4

Botn inicio:

Al hacer click sobre este botn, al igual que el Botn Nombre de Usuario, la aplicacin acceder a la Pgina principal de usuarios, explicada anteriormente.

4.3.2.2.5

Botn Cerrar sesin

Este botn sirve para cerrar sesin del usuario que est conectado (que haya iniciado sesin), al hacer click sobre este botn se cerrar la sesin y la aplicacin acceder o mostrar la Pgina de inicio, explicada anteriormente.

4.3.2.3 Men izquierdo El Men izquierdo es un men de navegacin desde el cual se podr acceder a las funciones para los usuarios de PreServi como: Noticias, Mi Cuenta, Personalizacin, Servicios, Fotos, Contactos, Mensajes, Ubicacin, Currculum, Entretenimiento, y adems existe la Foto de perfil actual de los usuarios. 255

Cuando se accede a cada una de las funciones del Men Izquierdo, su contenido se visualizar en la seccin Contenidos (ubicado en la mitad de la pgina).

Cabe recalcar que al iniciar sesin la primera funcin que se mostrar es la de Noticias, como se puede observar en la imagen anterior.

A continuacin se puede observar la seccin de Men izquierdo con cada una de sus funciones y la Foto de perfil de los usuarios:

Imagen 266. Men Izquierdo de la aplicacin web.

Como se indic anteriormente, la funcin Noticias siempre se mostrar cuando se inicie la aplicacin, por ese motivo se puede observar en la imagen anterior que la 256

funcin Noticias est de un color diferente (blanco) que las dems, indicando con esto que la funcin est sealada y se visualizar en la seccin Contenidos. A continuacin se explicar cada una de las funciones y la foto de perfil:

4.3.2.3.1

Foto de perfil

Imagen 267. Foto de perfil actual inicial de la aplicacin web.

Se asignar a cada usuario la foto de perfil que se muestra en la imagen anterior, hasta que el usuario cambie a su foto preferida.

La foto de perfil ser con la que otros usuarios se reconocern al momento de buscar a otros usuarios.

257

4.3.2.3.2

Funcin Noticias

Imagen 268. Funcin Noticias de la aplicacin web.

Esta funcin recibe Noticias en tiempo real (online), noticias de las actividades ms importantes de los contactos que el usuario haya agregado, y que aparecern en la Herramienta de chat y en la funcin Contactos (que se explicarn ms adelante).

En esta funcin Noticias existen los Botones de contenido para manipular las noticias, como son:

Botn Principio: Se dirige al principio de las noticias. Botn flecha para abajo (): Se desplaza la pgina en direccin hacia abajo, para revisar las noticias ms antiguas.

Es importante mencionar que si se tiene muchas noticias, no se mostrarn todas a la vez, mientras se vaya desplazando hacia abajo aparecern de a poco las noticias.

258

Botn flecha para arriba (): Se desplaza la pgina en direccin hacia arriba, para revisar las noticias ms actuales.

Botn Eliminar: Elimina todas las noticias que tenga el usuario (Mensaje de confirmacin al momento de intentar eliminar las noticias).

4.3.2.3.3

Mi cuenta

Esta funcin se utiliza para modificar la cuenta de cada usuario, se divide en 2 secciones:

Datos Personales: Para editar o cambiar los datos personales del usuario.

Configuracin: Para configurar la cuenta del usuario, como: habilitar/deshabilitar notificaciones de escritorio, cambiar contrasea y eliminar cuenta del usuario.

4.3.2.3.3.1 Datos Personales

Imagen 269. Funcin Mi cuenta, seccin Datos personales de la aplicacin web.

En sta seccin se puede modificar los datos personales del usuario, con tan solo dar click sobre el campo de dato, editar y despus dar click sobre un botn que aparecer 259

automticamente para guardar lo modificado. Por ejemplo para editar la direccin del usuario:

Imagen 270. Ejemplo de modificacin de un campo en la funcin Mi cuenta, seccin Datos personales de la aplicacin web.

Es importante mencionar que el campo de dato email (correo electrnico), no se puede modificar.

4.3.2.3.3.2 Configuracin

Imagen 271. Funcin Mi cuenta, seccin Configuracin de la aplicacin web.

En sta seccin el usuario puede configurar su cuenta, permitiendo habilitar o deshabilitar las notificaciones de escritorio, cambiar la contrasea con la cual se registr, y por ltimo el usuario puede eliminar su cuenta en PreServi.

260

Notificaciones de escritorio Las notificaciones de escritorio son avisos que aparecern como una ventana pequea cuando le lleguen mensajes a los usuarios, as no estn navegando en la pgina de PreServi.

Por defecto PreServi deshabilita las notificaciones de escritorio, aunque se puede habilitar con tan solo dar click en Habilitadas o deshabilitar dando click en Deshabilitadas, como se muestra en la imagen siguiente:

Imagen 272. Habilitar/Deshabilitar notificaciones de escritorio en la aplicacin web.

Por razones de seguridad el navegador web (Google Chrome) pide una autorizacin al usuario para mostrar las notificaciones, as que el usuario deber dar accedo al navegador a que muestre o no las notificaciones:

Imagen 273. Permiso para notificaciones de escritorio en la aplicacin web.

Cambiar contrasea

Imagen 274. Acceso a cambiar contrasea de usuario de la aplicacin web.

Para cambiar la contrasea del usuario simplemente haciendo click sobre el botn Cambiar, se acceder a una ventana como la siguiente: 261

Imagen 275. Ventana para cambiar la contrasea del usuario de la aplicacin web.

En la imagen anterior se observa la ventana para cambiar la contrasea del usuario, la aplicacin por seguridad pide al usuario ingresar 3 campos de datos: La contrasea anterior, la nueva contrasea, y la reiteracin de la nueva contrasea para asegurarse de que est bien escrita. Una vez ingresado los datos en los campos simplemente con un click en el botn Cambiar la contrasea ser cambiada de inmediato.

Eliminar cuenta de la aplicacin

Imagen 276. Acceso a eliminar cuenta de usuario de la aplicacin web.

Para eliminar la cuenta de PreServi simplemente haciendo click sobre el botn Eliminar, se acceder a una ventana como la siguiente:

262

Imagen 277. Ventana para eliminar cuenta del usuario de la aplicacin web.

En la imagen anterior se observa la ventana para eliminar la cuenta del usuario, la aplicacin por seguridad pide al usuario ingresar un campo de dato: La contrasea de la cuenta del usuario, haciendo click en el botn Eliminar mi cuenta se perdern todos los datos del usuario y no habr forma de recuperarlos.

263

4.3.2.3.4

Funcin Personalizacin

Imagen 278. Funcin Personalizacin de la aplicacin web.

Esta funcin sirve para cambiar el aspecto del perfil del usuario, como se observa en la imagen anterior existen 3 partes importantes como son: La Seleccin de tema, Vista previa del tema y un Botn guardar.

Seleccin de tema: Aqu se podr elegir el tema del perfil del usuario, existen 4 temas:

Predeterminado: Este tema muestra un fondo negro de tablas con su formato predeterminado por la aplicacin web, es el que se le asigna por defecto a todos los perfiles de los usuarios de PreServi.

Cuadrcula: Este tema muestra un fondo de cuadrculas azules con su formato (tamao de letra, color de letra, etc) predeterminado por la aplicacin web.

264

Cielo: Este tema muestra un fondo de cielo con su formato (tamao de letra, color de letra, etc.) predeterminado por la aplicacin web.

Personalizado: Este tema es el ms importante ya que permite dar una personalizacin del fondo de perfil del usuario, al igual que personaliza su formato (tamao letra, color letra, etc.).

Al momento de elegir este tema se mostrar lo siguiente:

Imagen 279. Funcin Personalizacin, tema personalizado de la aplicacin web.

Como se observa en la imagen anterior, al momento de escoger el tema Personalizado, se mostrarn opciones como: cambiar el tamao de letra, tipo de letra, color de letra, y algunas opciones ms personalizadas del perfil del usuario. 265

Para guardar o realizar los cambios que se han realizado solo hay que hacer click en el botn Guardar cambios.

Vista previa del tema: Aqu se mostrar una foto de vista previa del tema que se escoja.

Botn guardar: Haciendo click en este botn se guardar el tema que se haya escogido, y se modificar en el perfil del usuario.

4.3.2.3.5

Funcin Servicios

Imagen 280. Funcin Servicios de la aplicacin web.

El objetivo de sta funcin es agregar los servicios que el usuario busca y ofrece, para que esos servicios puedan ser publicados su perfil y pueda ser encontrado con esos servicios por otros usuarios.

Como se observa en la imagen anterior, el contenido de la Funcin Servicios, est compuesta por 4 partes:

266

4.3.2.3.5.1 Agregar un servicio para ofrecer: En esta parte del contenido, existe un campo de datos en el cual se puede ingresar un servicio que el usuario ofrezca a los dems usuarios, por ejemplo: Carpintero, Ingeniero Civil, Zapatero, etc, y ya despus de haber ingresado el servicio se puede dar click en el botn + Publicar para que se muestre o publique en el perfil del usuario y as poder ser encontrado por otros usuarios.

Lista de servicios para ofrecer: Aqu se mostrar una lista de los servicios para ofrecer que hayas agregado, y en cada servicio se mostrar un signo X para poder eliminar si es que se desea. Por ejemplo si se ha agregado un servicio CARPINTERO, y por alguna razn se desea eliminar, pues solo se deber hacer click sobre el signo X, como se muestra a continuacin:

Imagen 281. Ejemplo de agregar un servicio con la opcin de eliminarlo en la aplicacin web.

Como se puede observar en la imagen anterior, se ha agregado un servicio CARPINTERO y si se desea eliminarlo, simplemente se deber dar click en el signo X.

4.3.2.3.5.2 Agregar un servicio que se busca: En esta parte del contenido, existe un campo de datos en el cual se puede ingresar un servicio que el usuario necesita o busca, por ejemplo: Carpintero, Ingeniero Civil, Zapatero, etc, y ya despus de haber ingresado el servicio se puede dar click en el botn + Publicar para que se muestre o publique en el perfil del usuario y as poder ser encontrado por otros usuarios.

267

Lista de servicios que se busca: Aqu se mostrar una lista de los servicios que el usuario busca o necesita, y en cada servicio se mostrar un signo X para poder eliminar si es que se desea. Por ejemplo si se ha agregado un servicio CARPINTERO, y por alguna razn se desea eliminar, pues solo se deber hacer click sobre el signo X.

4.3.2.3.6

Funcin Fotos

Imagen 282. Funcin Fotos de la aplicacin web.

Esta funcin lo que realiza es agregar fotos para el usuario, y tenerlas en una lista para poder elegir una y colocarla como foto de perfil.

De sta funcin se destacan 3 principales cosas: Botn agregar, Lista de fotos y el Cambio de foto de perfil.

4.3.2.3.6.1 Botn agregar: Este botn lo que hace es desplegar una ventana de dilogo para elegir la foto que el usuario desee agregar a su lista de fotos, como se muestra a continuacin: 268

Imagen 283. Ejemplo de elegir una foto para agregar a la lista de fotos de un usuario en la aplicacin web.

Al momento de que se elige la foto y se procede a hacer click en el botn Abrir, la foto comenzar a guardar o subir en la aplicacin web, se mostrar una barra de progreso, dando a conocer o mostrando al usuario cuanto falta para que se acabe de completar la subida de la foto, como se muestra a continuacin:

Imagen 284. Ejemplo del progreso de subida de una foto en la aplicacin web.

Se podrn subir fotos, mximo de 2 Mega Bytes.

4.3.2.3.6.2 Lista de fotos: Cuando el progreso de subida finalice, se mostrar la foto en la Lista de fotos del usuario, como se muestra a continuacin:

269

Imagen 285. Ejemplo de foto ya agregada en la lista de fotos del usuario en la aplicacin web.

Como se puede notar en la imagen anterior, la foto que se ha agregado tiene un signo X, que haciendo click sobre el signo se eliminar la foto.

Se puede agregar ms fotos para que se almacenen en la aplicacin web y se muestren en la lista de fotos, como se muestra a continuacin:

Imagen 286. Ejemplo de 2 fotos agregadas en la lista de fotos del usuario en la aplicacin web.

270

4.3.2.3.6.3 Cambio de foto de perfil: Para cambiar la foto de perfil del usuario lo nico que se debe hacer es elegir una foto desde la Lista de Fotos del usuario y arrastrar hacia la Foto de perfil actual, como se muestra a continuacin:

Imagen 287. Ejemplo de cmo cambiar la foto de perfil en la aplicacin web.

Al momento de que se suelte la imagen sobre la Foto de perfil actual, cambiar la foto de perfil, como se muestra a continuacin:

Imagen 288. Ejemplo de cmo se cambi una foto de perfil del usuario en la aplicacin web.

271

4.3.2.3.7

Funcin Contactos

Imagen 289. Funcin Contactos de la aplicacin web.

La funcin Contactos, contiene la lista de contactos del usuario, contactos que el usuario haya agregado para ponerse en comunicacin con ellos.

Como se observa en la imagen anterior cada contacto posee un botn de color rojo, para poder eliminar al contacto si es que se desea.

Algo que cabe mencionar es que en cada contacto de la lista se puede revisar su perfil, simplemente con dar click en su foto.

272

4.3.2.3.8

Funcin Mensajes

Imagen 290. Funcin Mensajes de la aplicacin web.

La funcin de mensajes sirve para almacenar todos los mensajes que le lleguen al usuario. Se puede observar en la imagen que existen mensajes de dos usuarios (HENRY DANIEL y JUAN ANTONIO), para ver los mensajes se debe hacer click en cada usuario, por ejemplo para ver los mensajes de JUAN ANTONIO:

Imagen 291. Ejemplo de revisin de mensajes del usuario en la aplicacin web.

273

Para eliminar toda la lista de mensajes se podr llevar a cabo mediante el botn de color rojo Eliminar, que se encuentra en la parte superior derecha (Botones de contenido).

4.3.2.3.9

Funcin Ubicacin

Imagen 292. Funcin Ubicacin de la aplicacin web.

Esta funcin permite mostrar la localizacin geogrfica del usuario en un mapa, con tan solo dar click sobre el botn de color verde Actualizar mi ubicacin, que se encuentra en la parte superior derecha (Botones de contenido).

El navegador web, por cuestiones de seguridad, preguntar al usuario si es que permite utilizar la ubicacin geogrfica, como se muestra a continuacin:

Imagen 293. Seguridad en el navegador al momento de Actualizar la ubicacin del usuario en la aplicacin web.

274

Si es que el usuario lo permite, pues entonces PreServi, localizar la ubicacin del usuario en un mapa, como se muestra a continuacin:

Imagen 294. Ejemplo al momento de actualizar la ubicacin del usuario en la aplicacin web.

Por defecto, la aplicacin no muestra la ubicacin geogrfica a los dems usuarios, si es que el usuario desea que todos los usuarios vean su informacin geogrfica en el perfil, simplemente deber dar click en la opcin Si, como se muestra a continuacin:

Imagen 295. Permiso para que todos los usuarios vean la ubicacin geogrfica del usuario en la aplicacin web.

275

4.3.2.3.10 Funcin Currculum

Imagen 296. Funcin Currculum de la aplicacin web.

Esta funcin como su nombre lo indica, es el currculum vitae del usuario y est dividido en 5 secciones principales: Datos Personales, Estudios, Mritos, Experiencia y Adjuntos.

Como se observa en la imagen anterior el contenido de cada seccin se mostrar en la parte de Contenido de secciones.

4.3.2.3.10.1

Datos personales

Esta seccin sirve para ingresar todos los datos personales del usuario para mostrar el currculum a todos los dems usuarios que puedan visitar el perfil de dicho usuario.

Existen 9 campos de datos para ingresar, incluidos los datos personales de la cuenta del usuario: Nombres, Apellidos, Edad, Pas, Ciudad, Direccin, Lugar de nacimiento, Documento de identificacin y Telfono.

El email tambin pertenece a los datos personales, pero no hay manera de modificarlo. 276

El ingreso de cada campo de datos, se lo puede realizar mediante un click en cada campo y enseguida se mostrar un botn para guardar lo que se ha ingresado, a continuacin se muestra la seccin Datos personales, ingresando los datos en sus campos:

Imagen 297. Seccin Datos personales del currculum del usuario en la aplicacin web.

4.3.2.3.10.2

Estudios

En esta seccin de Estudios, el usuario podr ingresar las instituciones donde ha realizado los estudios y adems los ttulos obtenidos.

Estudios que sern divididos en: Educacin Primaria, Educacin Secundaria, Educacin Superior y Postgrados, como se puede observar a continuacin:

277

Imagen 298. Seccin Estudios del currculum del usuario en la aplicacin web.

Como se observa, existen los 4 principales estudios, y para acceder a cada uno de ellos bastar con hacer click sobre cada estudio y se desplegarn opciones para ingresar la institucin y los ttulos obtenidos en aquel Estudio.

Educacin Primaria:

Imagen 299. Seccin Educacin primaria del currculum del usuario en la aplicacin web.

Como se muestra en la imagen anterior, para agregar una institucin de la Primaria solo hay que ingresar el nombre de la institucin y dar un click sobre el botn +Agregar y se agregar a lista de instituciones. Cuando se agregue las instituciones, se crear un signo X para poder eliminar la institucin que se quiera, con solo dar click. 278

Educacin Secundaria:

Imagen 300. Seccin Educacin secundaria del currculum del usuario en la aplicacin web.

Como se muestra en la imagen anterior, para agregar una institucin de la Secundaria solo hay que ingresar el nombre de la institucin y dar un click sobre el botn +Agregar y se agregar a lista de instituciones.

De igual manera para agregar un ttulo obtenido en la Secundaria se debe ingresar el ttulo y dar click en +Agregar. Cuando se agregue las instituciones o los ttulos obtenidos, se crear un signo X para poder eliminarlos cuando se quiera, con solo dar click.

279

Educacin Superior:

Imagen 301. Seccin Educacin superior del currculum del usuario en la aplicacin web.

Como se muestra en la imagen anterior, para agregar una institucin Superior solo hay que ingresar el nombre de la institucin y dar un click sobre el botn +Agregar y se agregar a lista de instituciones.

De igual manera para agregar un ttulo obtenido en la educacin superior se debe ingresar el ttulo y dar click en +Agregar.

Algo que es importante notar, como se observa en la imagen anterior, es que se puede ingresar ms de una institucin. Igualmente se puede agregar ms de un ttulo obtenido. Cuando se agregue las instituciones o los ttulos obtenidos, se crear un signo X para poder eliminarlos cuando se quiera, con solo dar click.

280

Postgrados:

Imagen 302. Seccin Postgrados del currculum del usuario en la aplicacin web.

Como se muestra en la imagen anterior, para agregar una institucin de Postgrados solo hay que ingresar el nombre de la institucin y dar un click sobre el botn +Agregar y se agregar a lista de instituciones.

De igual manera para agregar un ttulo obtenido en la educacin de Postgrados se debe ingresar el ttulo y dar click en +Agregar.

Algo que es importante notar, como se observa en la imagen anterior, es que se puede ingresar ms de una institucin. Igualmente se puede agregar ms de un ttulo obtenido. Cuando se agregue las instituciones o los ttulos obtenidos, se crear un signo X para poder eliminarlos cuando se quiera, con solo dar click.

281

4.3.2.3.10.3

Mritos

Imagen 303. Seccin Mritos del currculum del usuario en la aplicacin web.

En esta seccin el usuario podr agregar los mritos que ha conseguido, para llenarlo en su currculum. Con solo ingresar el nombre o ttulo del mrito y dar click en el botn +Agregar, como se muestra en la imagen anterior. Cuando se agregue los mritos obtenidos, se crear un signo X para poder eliminarlos cuando se quiera, con solo dar click.

4.3.2.3.10.4

Experiencia

Imagen 304. Seccin Experiencia del currculum del usuario en la aplicacin web.

En esta seccin el usuario podr agregar las experiencias que haya tenido (laboral, habilidades, etc.), para llenarlo en su currculum. Con solo ingresar el nombre o ttulo

282

de la experiencia y dar click en el botn +Agregar, como se muestra en la imagen anterior. Cuando se agregue las experiencias, se crear un signo X para poder eliminarlos cuando se quiera, con solo dar click.

4.3.2.3.10.5

Adjuntos

Imagen 305. Seccin Adjuntos del currculum en la aplicacin web.

Esta seccin se utiliza para agregar archivos adjuntos al currculum, y como se puede observar est dividida en dos secciones ms que son: Mis archivos adjuntos y Agregar ms archivos.

Mis archivos adjuntos:

Imagen 306. Seccin Mis archivos adjuntos del currculum en la aplicacin web.

283

Esta seccin, como se muestra la imagen anterior, mostrar una tabla con los archivos que el usuario tenga agregado a su currculum. Una tabla con el nombre del archivo, una descripcin y 2 opciones: Eliminar archivo y Descargar el archivo, como se puede ver un ejemplo a continuacin:

Imagen 307. Ejemplo de los archivos del usuario en el currculum de la aplicacin web.

Como se muestra en la imagen anterior, existe un archivo que el usuario ha agregado a su currculum, y se puede ingresar una descripcin haciendo click sobre el campo de datos y dando click en el botn Guardar.

Tambin existen dos opciones (botones) para eliminar y descargar el archivo si se desea.

Agregar ms archivos:

Imagen 308. Seccin Agregar ms archivos del currculum del usuario en la aplicacin web.

284

En esta seccin se pueden agregar los archivos adjuntos para el currculum. Se puede hacer de dos maneras:

1) Arrastrando el los archivos desde la ubicacin original de la PC hasta la Zona de arrastre que se muestra en la imagen anterior. 2) Haciendo click en el botn Elegir archivos para elegir los archivos, y despus haciendo click en el botn Subir.

En la siguiente imagen se muestra cuando los archivos han sido elegidos para ser subidos:

Imagen 309. Ejemplo de 2 archivos listos para agregar al currculum del usuario en la aplicacin web.

Se podrn subir archivos, mximo de 2 Mega Bytes.

4.3.2.3.11 Funcin Entretenimiento Esta funcin contiene un juego simple de entretenimiento para los usuarios, se trata de un juego denominado: Juego de la vbora, que consiste en una pequea vbora o serpiente que no debe chocar con el filo del rea de juego, y debe ir cogiendo puntos (comida) blancos para ir creciendo y aumentando los puntos.

A continuacin se muestra una imagen del juego:

285

Imagen 310. Funcin Entretenimiento del usuario en la aplicacin web.

Para iniciar pausar el juego se debe presionar la tecla ESC y para dirigir a la vbora, se utiliza las teclas de direccin del teclado (flecha arriba, abajo, derecha, izquierda).

4.3.2.4 Barra de informacin

Imagen 311. Barra de informacin de la aplicacin web.

Esta barra se encuentra en la parte inferior de la aplicacin web, y su funcin es mostrar al usuario informacin sobre las interacciones de l con la aplicacin. Se divide en dos partes importantes: Informacin y Tiempo de sesin.

Informacin: En esta parte de la barra se informar las interacciones del usuario con la aplicacin, adems de notificaciones de actividades de los contactos del usuario como: Si el 286

contacto se ha conectado o se ha desconectado, si tiene algn mensaje por leer, o si tiene nuevas noticias por leer.

Por ejemplo si el usuario editara su nmero de telfono de sus Datos personales, en la barra de informacin se mostrar lo siguiente:

Imagen 312. Ejemplo de la barra de informacin cuando el usuario edite su telfono en la aplicacin web.

Otro ejemplo puede ser al recibir notificaciones de algn contacto por ejemplo:

Imagen 313. Ejemplo de la barra de informacin cuando el usuario reciba notificaciones en la aplicacin web.

4.3.2.5 Herramienta de chat Esta herramienta es muy importante en PreSrvi ya que permite a los usuarios comunicarse con sus contactos. A continuacin se puede ver en la imagen la herramienta de chat, ya con 2 contactos agregados:

Imagen 314. Herramienta de chat del usuario en la aplicacin web

287

Como se observa en la imagen anterior, existen 2 contactos en la lista del usuario, con los que se intentar chatear online.

Cabe diferenciar que un contacto no conectado tendr un icono de usuario de color gris, como por ejemplo:

Imagen 315. Ejemplo de un contacto desconectado en la aplicacin web.

Por otro lado un contacto conectado (online) tendr un icono de color verde, como por ejemplo:

Imagen 316. Ejemplo de un contacto conectado en la aplicacin web.

Para poder chatear con los contactos se debe tener presente lo siguiente:

1) El contacto al que se le desea enviar un mensaje de chat debe estar conectado (online), si no lo est el mensaje le llegar solo a su carpeta de mensajes (Funcin Mensajes). 2) El usuario que intenta enviar el mensaje de chat (chatear), debe estar en la lista de contactos del usuario al que se le enva el mensaje, caso contrario le llegar solo a su carpeta de mensajes (Funcin Mensajes)

Para enviar un mensaje de chat, se debe elegir el contacto y dar click sobre l, y se desplegar un cuadro para poder escribir un mensaje, como se muestra a continuacin:

288

Imagen 317. Ejemplo para elegir un contacto y enviarle un mensaje de chat en la aplicacin web.

Ahora se puede escribir y con para enviar el mensaje se debe presionar la tecla ENTER y se visualizar el mensaje que se enve de esta manera:

Imagen 318. Ejemplo de envo de un mensaje de chat a un contacto en la aplicacin web.

Se observa en la imagen anterior que se le ha enviado un mensaje de chat a un usuario llamado MARIA CRIS, pues entonces en la pgina de MARIA CRIS se le avisar que tiene un mensaje de la siguiente forma:

289

Imagen 319. Ejemplo de aviso cuando al usuario le llegue un mensaje de chat en la aplicacin web.

Como se observa JUAN MANUEL es quien le ha enviado el mensaje de chat a MARIA CRIS, y solo deber hacer click sobre el contacto para leer el o los mensajes que JUAN MANUEL le ha enviado, como se muestra a continuacin:

Imagen 320. Ejemplo de cmo leer un mensaje que le ha llegado al usuario en la aplicacin web.

Si el usuario al que le llega el mensaje tiene el volumen de su PC encendido, pues podr escuchar un sonido de aviso y si tiene activado la opcin de mostrar Notificaciones de escritorio, podr observarse en su PC lo siguiente:

Imagen 321. Ejemplo de notificacin de escritorio en la aplicacin web.

290

4.3.3

Perfil visible a los dems usuarios

Este es el perfil pblico de los usuarios, ya que cuando un usuario encuentre a una persona y revise su perfil esto es lo que observar:

Imagen 322. Perfil visible a los dems usuarios en la aplicacin web.

En la imagen anterior se muestra la pgina de perfil del usuario, esta pgina ser vista cuando se encuentre a algn usuario, con el Buscador de usuarios o personas.

El perfil de usuarios contiene toda la informacin de cada uno de los usuarios como: Datos personales, Servicios que ofrece y busca, Ubicacin geogrfica, Fotos y el Currculum.

Como se observa en la imagen anterior, existen 4 secciones o partes principales del perfil como: Botn agregar/eliminar contacto, Men de navegacin, Foto de perfil y el Contenido.

4.3.3.1 Botn agregar/eliminar contacto: La funcin de este botn es agregar al usuario del que se est revisando el perfil a la lista de contactos a su vez si el usuario ya pertenece a la lista de contactos eliminar al usuario. 291

Si el usuario ya pertenece a la lista de contactos se mostrar el siguiente botn:

Imagen 323. Botn eliminar contacto en la aplicacin web.

Si el usuario no pertenece an a la lista de contactos se mostrar el siguiente botn:

Imagen 324. Botn agregar contacto en la aplicacin web.

4.3.3.2 Foto de perfil: En esta seccin se mostrar la foto de perfil del usuario:

Imagen 325. Foto de perfil en el perfil del usuario en la aplicacin web.

4.3.3.3 Contenido: Esta seccin ser el contenido de informacin referente al usuario, por ejemplo el contenido del perfil, de la ubicacin, de las fotos o del currculum en s.

292

4.3.3.4 Men de navegacin:

El men que se muestra en la imagen anterior, se utiliza para navegar entre la informacin del usuario, revisando el Perfil, la Ubicacin, las Fotos y el Currculum, todo esto se mostrar en la seccin Contenido.

Perfil:

Imagen 326. Perfil del usuario, seccin Perfil de la aplicacin web.

Esta seccin mostrar los Datos personales y los servicios que busca y ofrece el usuario.

293

Ubicacin:

Imagen 327. Perfil del usuario, seccin Ubicacin de la aplicacin web.

Esta seccin mostrar la Ubicacin del usuario: Ubicacin geogrfica, pas, ciudad y direccin.

Fotos:

Imagen 328. Perfil del usuario, seccin Fotos de la aplicacin web.

Esta seccin mostrar las fotos del usuario.

294

Currculum:

Imagen 329. Perfil del usuario, seccin Currculum de la aplicacin web.

Esta seccin mostrar el currculum del usuario, como se observa en la imagen anterior existe un Men del currculum, para revisar cada parte del currculum como: Datos personales, Estudios, Mritos, Experiencia laboral y Adjuntos, a continuacin se muestra el men:

Imagen 330. Men del currculum dl usuario en la aplicacin web.

Se puede acceder a cada parte del currculum, haciendo click sobre sta en el men.

295

4.4 Manual para administrador

4.4.1

Pgina de Inicio

Imagen 331. Pgina de inicio del administrador de la aplicacin web.

Lo que se muestra en la imagen anterior es la pgina de inicio del administrador, donde podr identificarse mediante un ID y una Contrasea.

4.4.1.1 Identificarse

Para poder identificarse como administrador se deber ingresar los siguientes datos:

ID: admin CONTRASEA: adminpreservi

A continuacin se muestra la zona de identificacin del administrador, donde deber ingresar los datos antes mencionados:

296

Imagen 332. Zona de identificacin del administrador de la aplicacin web.

Para ingresar esos datos en la pgina de inicio del administrador, se deber hacer mediante un teclado virtual, ya que se ha desactivado el teclado por razones de seguridad.

En la imagen anterior se muestra 2 botones que al hacer click sobre ellos aparecer un teclado virtual para ingresar el ID y Contrasea del administrador, como se muestra a continuacin:

Imagen 333. Identificacin del administrador con el teclado virtual en la aplicacin web.

297

Cuando se haya ingresado los datos del ID y Contrasea del administrador mediante el teclado virtual, se podr iniciar a la pgina principal del administrador, haciendo click en el botn Iniciar.

4.4.2

Pgina principal

Al ingresar los datos correctos de identificacin del administrador y al hacer click en el botn Iniciar, aparecer la pgina principal del administrador, para poder sacar reportes de las actividades de los usuarios, a continuacin se muestra la pgina principal del administrador:

Imagen 334. Pgina principal del administrador de la aplicacin web.

4.4.2.1 Tabla de reportes generada En esta zona de la pgina se mostrar una tabla de los reportes generados por el usuario, una tabla que se podr imprimir.

4.4.2.2 Tipos de Reportes El administrador podr generar reportes de las actividades que hayan realizado los usuarios de diferentes tipos como: Reportes por usuario, por fecha especfica, por mes y ao especfico, y un reporte total. A continuacin se muestra la seccin donde elegir el tipo de reporte que se desee generar:

298

Imagen 335. Seccin para escoger el tipo de reporte que generar el administrador de la aplicacin web.

Al hacer click en cada uno de los tipos de reporte se acceder a su contenido y as generar el reporte deseado.

4.4.2.2.1

Reporte por usuario

Imagen 336. Reporte por usuario para el administrador en la aplicacin web.

Este reporte generar las actividades de un usuario en especfico y se podr filtrar para generar:

Todas las actividades del usuario Actividades en una fecha especfica Actividades en un mes y ao especfico

Pasos: 1) Ingresar el correo electrnico del usuario 2) Escoger el filtro para generar el reporte Si se escoge el filtro de Reporte en fecha especfica, se debe elegir la fecha. Si se escoge el filtro Reporte en mes y ao especfico, se debe elegir el mes y el ao 3) Dar click en el botn Generar reporte 299

Cuando se cumplan esos pasos el reporte comenzar a generarse y se mostrar algo as en la tabla de reportes generada:

Imagen 337. Ejemplo de reporte generado por el administrador de las actividades de un usuario en especfico en la aplicacin web.

Al momento que se genere el reporte, aparecer una tabla con la descripcin de cada actividad que el usuario ha realizado, con la fecha y hora.

4.4.2.2.2

Reporte por fecha especfica

Imagen 338. Reporte por fecha especfica de usuarios para el administrador en la aplicacin web.

Este reporte generar las actividades de todos los usuarios que hayan realizado actividades en una fecha especfica.

Pasos: 1) Elegir una fecha especfica. 2) Dar click en el botn Generar reporte

300

Cuando se cumplan esos pasos el reporte comenzar a generarse y se mostrar algo as en la tabla de reportes generada:

Imagen 339. Ejemplo de reporte generado por el administrador de las actividades de usuarios en una fecha especfica en la aplicacin web.

Al momento que se genere el reporte, aparecer una tabla con el nombre de cada usuario, su correo electrnico, descripcin de cada actividad que el usuario ha realizado, con la fecha y hora.

4.4.2.2.3

Reporte por mes y ao especfico

Imagen 340. Reporte por mes y ao especfico de usuarios para el administrador en la aplicacin web.

Este reporte generar las actividades de todos los usuarios que hayan realizado actividades en un mes y ao especfico.

Pasos: 1) Elegir un mes especfico. 2) Elegir un ao especfico. 3) Dar click en el botn Generar reporte 301

Cuando se cumplan esos pasos el reporte comenzar a generarse y se mostrar algo as en la tabla de reportes generada:

Imagen 341. Ejemplo de reporte generado por el administrador de las actividades de usuarios en un mes y ao especfico en la aplicacin web.

Al momento que se genere el reporte, aparecer una tabla con el nombre de cada usuario, su correo electrnico, descripcin de cada actividad que el usuario ha realizado, con la fecha y hora.

4.4.2.2.4

Reporte total

Imagen 342. Reporte total de usuarios para el administrador en la aplicacin web.

Este reporte generar todas actividades de todos los PreServi.

usuarios registrados en

Pasos: 1) Dar click en el botn Generar reporte

302

Cuando se cumpla ese paso el reporte comenzar a generarse y se mostrar algo as en la tabla de reportes generada:

Imagen 343. Ejemplo de reporte generado por el administrador de todas las actividades de usuarios en la aplicacin web.

Al momento que se genere el reporte, aparecer una tabla con el nombre de cada usuario, su correo electrnico, descripcin de cada actividad que el usuario ha realizado, con la fecha y hora.

Cuando se genere cualquier tipo de reporte, aparecer un botn de Imprimir, para poder imprimir todo el reporte.

4.4.2.3 Cantidad de usuarios registrados

Imagen 344. Seccin Cantidad de usuarios registrados en el administrador de la aplicacin web.

En esta seccin el administrador podr observar la cantidad exacta de usuarios registrados en PreServi.

303

4.4.2.4 Salir del administrador

Imagen 345. Botn para salir del administrador en la aplicacin web.

Esta seccin simplemente cuenta con un botn para poder salir del administrador.

304

CONCLUSIONES Todos los objetivos planteados en el diseo de esta tesis fueron cumplidos.

Durante el proceso de desarrollo de la aplicacin web se pudo apreciar que utilizando los nuevos elementos de HTML5 se puede ahorrar tiempo al momento de crear pginas web, ya que lo que antes se realizaba con Javascript en varias lneas de cdigo ahora se lo puede realizar en una sola, como por ejemplo la etiqueta input con la propiedad type y el valor date que despliega un calendario para elegir la fecha.

Las nuevas etiquetas section, article, aside, nav, footer y header permiten organizar de una mejor manera el contenido de una pgina web.

Una de las grandes ventajas de la base de datos MongoDB es que mediante el cdigo de programacin se la puede modificar de forma dinmica de acuerdo a como se ejecuta la aplicacin de esta forma se adecua a las exigencias del momento.

En aplicaciones donde se manejan gran cantidad de datos con grandes volmenes de escritura MongoDB es una alternativa a tomar en cuenta.

No todos los navegadores en la actualidad soportan HTML5 al cien por ciento, por eso hay que tener cuidado al momento de desarrollar en el mismo, para que pueda funcionar el aplicativo en la mayora de los navegadores.

305

RECOMENDACIONES Utilizar libreras en Javascript (HTML5.js) que ayuden a mejorar la compatibilidad en los navegadores, ya que actualmente todos los navegadores no soportan completamente el estndar HTML5.

Considerar la base de datos NoSQL en el momento de tomar una decisin en elegir una base de datos para un proyecto.

Revisar constantemente la documentacin oficial de HTML5 para ir mejorando el manual creado en esta tesis.

306

BIBLIOGRAFA REFERENCIAS ELECTRNICAS: 10 Gen The MongoDB company. 2012. Introduccin a NoSQL y MongoDB. [Disponible en: http://www.10gen.com/events/webinar/Introduccion-al-NoSQL-yMongoDB]. [Consulta: 8 de Noviembre de 2012].

Adictos al Trabajo.

2012.

HTML5: Almacenamiento Local.

[Disponible en:

http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=html5Almacenami entoLocal]. [Consulta: 17 de Octubre de 2012].

Bootstrap. [s.a.]. Bootstrap. [Disponible en: http://twitter.github.com/bootstrap/]. [Consulta: 4 de Julio de 2012].

GreyWyvern.com.

2012.

Virtual Keyboard Interface.

[Disponible en: 26 de

http://www.greywyvern.com/code/javascript/keyboard]. Noviembre de 2012].

[Consulta:

HTML5 Doctor.

2010.

Introducing Web SQL Databases.

[Disponible en:

http://html5doctor.com/introducing-web-sql-databases/]. [Consulta: 15 de Octubre de 2012].

HTML5 Fcil. 2011. Cmo utilizar web workers de JavaScript?. [Disponible en: http://html5facil.com/tutoriales/como-utilizar-web-workers-de-javascript]. [Consulta: 29 de Octubre de 2012].

HTML5Pattern. [s.a.]. HTML5Pattern. [Disponible en: http://html5pattern.com/]. [Consulta: 26 de Septiembre de 2012].

307

HTML5 Rocks. 2011. Creacin de formas fabulosas con HTML5. [Disponible en: http://www.html5rocks.com/es/tutorials/forms/html5forms/]. [Consulta: 19 de Julio de 2012].

HTML5 Rocks. [s.a.]. Por qu HTML5 es la estrella ahora?. [Disponible en: http://www.html5rocks.com/es/why]. [Consulta: 25 de Junio de 2012].

HTML5 Tutoriales.

2012.

Atributos de Eventos HTML5. [Disponible en: [Consulta: 26 de

http://html5tutoriales.com/atributos-de-eventos-html5.html]. Noviembre de 2012].

Inmensia.

2011.

Web

Notifications.

[Disponible

en:

http://www.inmensia.com/blog/20110108/web_notifications.html]. [Consulta: 29 de Octubre de 2012].

JQuery. 2012. JQuery. [Disponible en: http://jquery.com/]. [Consulta: 6 de Julio de 2012].

JQuery User Interface. 2012. JQuery UI. [Disponible en: http://jqueryui.com/]. [Consulta: 16 de Octubre de 2012].

JQuery.

2008.

Plugins

Print

Area.

[Disponible

en:

http://archive.plugins.jquery.com/project/PrintArea]. [Consulta: 16 de Noviembre de 2012].

La Webera.com.

2011.

Drag and Drop en HTML5.

[Disponible en:

http://www.lawebera.es/diseno-web-html-5/drag-and-drop-en-html5.php]. [Consulta: 20 de Octubre de 2012].

MongoDB.

2012.

Zona

para

desarrolladores.

[Disponible [Consulta: 6

en: de

http://es.wiki.mongodb.org/display/DOCS/Developer+Zone]. Noviembre de 2012].

308

MongoDB.

2012.

Installing

MongoDB.

[Disponible

en:

http://docs.mongodb.org/manual/installation/]. [Consulta: 6 de Noviembre de 2012].

MongoDB.

2012.

Updating.

[Disponible

en:

http://api.mongodb.org/wiki/current/Updating.html]. [Consulta: 6 de Noviembre de 2012].

NodeJs. 2012. NodeJs. [Disponible en: http://nodejs.org/]. [Consulta: 7 de Agosto de 2012].

PHP.

2012.

Driver

Nativo

MongoDB.

[Disponible

en:

http://php.net/manual/es/book.mongo.php]. [Consulta: 3 de Agosto de 2012].

TableSorter. [s.a.]. Documentation. [Disponible en: http://tablesorter.com/docs/]. [Consulta: 26 de Noviembre de 2012].

The World Wide Web Consortium (W3C).

2011.

HTML. [Disponible en:

http://www.w3.org/community/webed/wiki/HTML]. [Consulta: 27 de Noviembre de 2012].

The World Wide Web Consortium (W3C). 2012. HTML5.1 Nightly. [Disponible en: http://www.w3.org/html/wg/drafts/html/master/single-page.html]. [Consulta: 27 de Noviembre de 2012].

Ultra Mega Blog.

2011.

Create Snake in JavaScript with HTML5 Canvas.

[Disponible en: http://www.ultramegatech.com/2011/08/create-snake-in-javascript/]. [Consulta: 3 de Noviembre de 2012]. Ver Tutoriales Formacin Audiovisual. 2011. Tutorial HTML5 Dibujando sobre el canvas. [Disponible en: http://www.vertutoriales.com/index.php/tutorial-html5dibujando-sobre-el-canvas/]. [Consulta: 22 de Agosto de 2012].

Wikipedia

La

enciplopedia

libre.

2012.

JQuery.

[Disponible

en:

http://es.wikipedia.org/wiki/JQuery]. [Consulta: 1 de Diciembre de 2012]. 309

Wikipedia La enciplopedia libre.

2012.

JQuery UI.

[Disponible en:

http://es.wikipedia.org/wiki/JQuery_UI]. [Consulta: 1 de Diciembre de 2012].

Wikipedia

La

enciplopedia

libre.

2012.

NodeJs.

[Disponible

en:

http://es.wikipedia.org/wiki/Nodejs]. [Consulta: 1 de Diciembre de 2012].

W3

Schools.

[s.a.].

HTML

Event

Attributes.

[Disponible 26

en: de

http://www.w3schools.com/tags/ref_eventattributes.asp]. Noviembre de 2012].

[Consulta:

W3 Schools. [s.a.]. HTML Reference (HTML5 Compliant). [Disponible en: http://www.w3schools.com/tags/]. [Consulta: 25 de Noviembre de 2012].

Youtube - Canal de Betabeers. 2012. Taller nodejs con nacho soto. [Disponible en: http://www.youtube.com/watch?v=E1FcQPYoZZk]. 2012]. [Consulta: 20 de Junio de

310