proyecto fin de carrera -...
TRANSCRIPT
Equation Chapter 1 Section 1
Proyecto Fin de Carrera
Ingeniería de Telecomunicación
Desarrollo de un libro electrónico para el aprendizaje
de patrones
Autor: Federico López Arenillas
Tutora: Isabel Román Martínez
Departamento de Ingeniería Telemática
Escuela Técnica Superior de Ingeniería
Universidad de Sevilla
Sevilla, 2016
iii
Proyecto Fin de Carrera
Ingeniería de Telecomunicación
Desarrollo de un libro electrónico para el
aprendizaje de patrones
Autor:
Federico López Arenillas
Tutora:
Isabel Román Martínez
Departamento de Ingeniería Telemática.
Escuela Técnica Superior de Ingeniería
Universidad de Sevilla
Sevilla, 2016
v
Proyecto Fin de Carrera: Desarrollo de un libro electrónico para el aprendizaje de patrones
Autor: Federico López Arenillas
Tutora: Isabel Román Martínez
El tribunal nombrado para juzgar el Proyecto arriba indicado, compuesto por los siguientes miembros:
Presidente:
Vocales:
Secretario:
Acuerdan otorgarle la calificación de:
Sevilla, 2016
El Secretario del Tribunal
vii
A mi familia
A mis maestros
ix
Agradecimientos
“Rocío, amor, gracias por el esfuerzo y el tiempo de tu vida que has dedicado durante tantos años para que yo
pueda cumplir mi sueño. Gracias por tu sacrificio, pues sin él este día nunca habría llegado. Siempre estaré en
deuda contigo, aunque espero tener toda la vida para compensarte. Este trabajo es tan tuyo como mío.
Te amo.”
Por supuesto, también quiero agradecer a mis padres todo su apoyo y comprensión. Sin su amor no sería quien
soy.
Gracias a mi hermano, Dani, porque sin él no tendría un referente en la vida ni sabría que una persona puede
ser un Gigante. Tu ausencia no ha impedido que ilumines cada día de mi vida con tu recuerdo.
Por último, gracias a Daniel, esa pequeña personita que ha irrumpido en mi vida como un torbellino,
transformándola en un sueño maravillo del que no quiero despertar.
“Gordito, tu madre y yo viviremos siempre por y para ti”.
Federico López Arenillas
Sevilla, 2016
xi
Resumen
La asignatura “Ingeniería de Software”, cursada en el Grado de Ingeniería de las Tecnologías de
Telecomunicación, presenta al alumno métodos, procedimientos y recursos para la gestión integral del
software durante su ciclo de vida.
En la fase de diseño, adoptar soluciones conocidas y contrastadas favorece la obtención de un producto
robusto, flexible, fácil de mantener y reutilizable. Por tanto, la comprensión y uso de patrones de diseño,
entendidos como soluciones generales y reusables a problemas recurrentes, proporciona al arquitecto software
las herramientas básicas para fomentar un resultado de calidad.
Este proyecto se ha desarrollado para proporcionarle al alumno una herramienta online de apoyo y referencia
en el aprendizaje de patrones de diseño, usando como sustento los conocimientos que ha adquirido en cursos
anteriores.
xiii
Abstract
In ‘Software Engineering’ course, taught in the Bachelor of Engineering Technology Telecommunication, the
student learn methods, procedures and resources for comprehensive management software during its life cycle.
In the design phase, adopting known solutions and contrasted favors obtaining a robust, flexible, maintainable
and reusable product. Therefore, understanding and use of design patterns, understood as general and reusable
solutions to recurring problems, provides the basic software architect tools to promote a quality result.
This project comes to give students an online support and reference tool in learning design patterns, using as
support the knowledge acquired in previous courses.
- translation by google -
xv
Índice
Agradecimientos ix
Resumen xi
Abstract xiii
Índice xv
Índice de Tablas xvii
Índice de Figuras xix
Introducción 1 1.1 Motivación 2 1.2 Objetivos 2 1.3 A quién va dirigido este libro 2 1.4 Alcance del proyecto 2 1.5 Organización del documento 2 1.6 Convenciones 3
2 Estado del arte 5 2.1 Patrones de diseño y el lenguaje JavaScript 6 2.2 Soluciones para el desarrollo de un libro electrónico. 15
2.2.1 Software de edición y publicación 15 2.2.2 Entornos de desarrollo JavaScript 16
3 Tecnologías empleadas 19 3.1 Markdown 20
3.1.1 Encabezados 20 3.1.2 Cita 20 3.1.3 Énfasis 21 3.1.4 Párrafo 21 3.1.5 Código 21 3.1.6 Línea horizontal 21 3.1.7 Listas 22 3.1.8 Enlace 22 3.1.9 Imagen 22 3.1.10 Tabla 23 3.1.11 Nota al pie de página 23 3.1.12 Ejemplo de conversión 24
3.2 Gitbook 25 3.2.1 Requisitos previos 25
3.2.2 Instalación de herramientas de consola (gitbook-cli) 29 3.2.3 Editor de textos 29 3.2.4 Visualización de resultados 35 3.2.5 Generación de sitio web. 36 3.2.6 Plugins 37
3.3 Devd 38 3.4 Microsoft Visual Studio Code 39
3.4.1 Depuración 40 3.5 Navegadores web 45
3.5.1 Google Chrome. Chrome DevTools 45 3.5.2 Mozilla Firefox 47
4 Desarrollo del proyecto 49 4.1 Lectura previa. 50 4.2 Redacción. 50 4.3 Codificación 50 4.4 Maquetación. 51 4.5 Extensiones 54 4.6 Generación. 55 4.7 Guía de uso 55
4.7.1 Cómo leer el libro 55 4.7.2 Cómo ejecutar el código 56
5 Conclusiones 57
Referencias 59
Glosario 63
Anexo A. Libro desarrollado 65
xvii
ÍNDICE DE TABLAS
Tabla 2-1 Relación de plataformas disponibles para la edición y publicación de libros electrónicos 15
Tabla 2-2 Editores de código y entornos de desarrollo en JavaScript 17
Tabla 3-1. Markdown. Encabezados 20
Tabla 3-2. Markdown. Cita 20
Tabla 3-3. Markdown. Énfasis 21
Tabla 3-4. Markdown. Párrafo 21
Tabla 3-5. Markdown. Código 21
Tabla 3-6. Markdown. Línea horizontal 21
Tabla 3-7. Markdown. Listas 22
Tabla 3-8. Markdown. Enlace 22
Tabla 3-9. Markdown. Imagen 22
Tabla 3-10. Markdown. Tabla 23
Tabla 3-11. Markdown. Nota a pie de página 23
xix
ÍNDICE DE FIGURAS
Figura 2-1 Resultados de búsqueda. Libros sobre patrones de diseño de editorial PacktPub 6
Figura 2-2 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Pearson 7
Figura 2-3 Resultados de búsqueda. Libros sobre patrones de diseño de editorial O’Reilly 7
Figura 2-4 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Apress 8
Figura 2-5 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Wrox 8
Figura 2-6 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Manning 9
Figura 2-7 Resultados de búsqueda. Libros sobre patrones de diseño de editorial The Pragmatic Bookshelf 9
Figura 2-8 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial Manning 10
Figura 2-9 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial Pearson 11
Figura 2-10 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial O’Reilly 11
Figura 2-11 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial APress 12
Figura 2-12 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial Wrox 12
Figura 2-13 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial Manning 13
Figura 2-14 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript de patrones de
diseño. Editorial The Pragmatic Bookshelf 13
Figura 3-1 Conversión de código en formato markdown (izqda.) a HTML (dcha.) 24
Figura 3-2 Node.js. Página de descarga 25
Figura 3-3Node.js. Asistente de instalación (I) 26
Figura 3-4 Node.js. Asistente de instalación (II) 26
Figura 3-5 Node.js. Asistente de instalación (III) 27
Figura 3-6 Node.js. Asistente de instalación (IV) 27
Figura 3-7Node.js. Asistente de instalación (V) 28
Figura 3-8Node.js. Asistente de instalación (y VI) 28
Figura 3-9 Cuadro de diálogo "Ejecutar" 29
Figura 3-10 Gitbook Editor. Página web oficial. 29
Figura 3-11 Gitbook Editor. Ventana de registro al servicio online. 30
Figura 3-12 Gitbook Editor. Ventana de archivos recientes 30
Figura 3-13 Gitbook Editor. Cuadro de diálogo "Create New Book" 31
Figura 3-14 Gitbook Editor. Acceso a últimos libros 31
Figura 3-15 Gitbook Editor. Ventana principal de Edición. 32
Figura 3-16 Gitbook Editor. Menú superior (Markdown) 33
Figura 3-17 Gitbook editor. Modos de visualización. 33
Figura 3-18 Gitbook Editor. Árbol de archivos 33
Figura 3-19 Gitbook Editor. Archivo SUMMARY.md 34
Figura 3-20 Gitbook Editor. Creación de variables globales 34
Figura 3-21 Gitbook Editor. Uso de variables globales 35
Figura 3-22 Gitbook Toolchain. Salida de consola tras ejecutar el comando gitbook serve 35
Figura 3-23 Gitbook Toolchain. Sitio web generado (vista desde el navegador Mozilla Firefox) 36
Figura 3-24 Gitbook Toolchain. Salida del comando gitbook build 37
Figura 3-25 Gitbook Toolchain. Estructura de archivos del sitio web generado 37
Figura 3-26 Devd. Salida de consola tras iniciar el servidor por primera vez 38
Figura 3-27 Microsoft Visual Studio Code. Captura de pantalla genérica. 39
Figura 3-28 Visual Studio Code. Ventana principal 40
Figura 3-29 Visual Studio Code. Apertura de carpeta desde Explorador interno 40
Figura 3-30 Visual Studio Code. Ventana de depuración 41
Figura 3-31 Visual Studio Code. Botón de configuración del depurador 41
Figura 3-32 Visual Studio Code. Selección de entorno de depuración 42
Figura 3-33 Visual Studio Code. Configuración del fichero de entrada del depurador. 42
Figura 3-34 Visual Studio Code. Inicio de depuración 43
Figura 3-35 Visual Studio Code. Consola de depuración 43
Figura 3-36 Visual Studio Code. Pausa en punto de ruptura 44
Figura 3-37 Chrome DevTools. Pestaña “console” 45
Figura 3-38 Chrome DevTools. Pestaña “Source”: creación de snippets 46
Figura 3-39 Chrome DevTools. Ejecución de código JavaScript desde la pestaña de snippets 46
Figura 3-40 Mozilla Firefox. Herramientas de desarrollador: consola 47
Figura 3-41 Mozilla Firefox. Herramientas de desarrollador: Scratchpad 47
Figura 4-1 Gitbook. Sitio web resultante tras extender la plantilla básica 53
Figura 4-2 Libro electrónico. Ejecución de código fuente. 56
INTRODUCCIÓN
l Graduado en Ingeniería de las Tecnologías de Telecomunicación con la especialidad de Ingeniería
Telemática debe ser capaz no sólo de desarrollar software, sino de generar un producto de calidad
aplicando procedimientos de ingeniería durante todo el proceso. Un mal diseño en las fases
iniciales de un proyecto puede tener consecuencias nefastas: sobrecostes, ejecución del proyecto
fuera de plazo, software ineficiente, software de mala calidad y frágil, software que no cumple los requisitos,
software difícil de mantener e incluso catástrofes humanas.
La Ingeniería de Software proporciona, entre otras herramientas, soluciones generales de diseño a problemas
recurrentes. Son los denominados “Patrones de diseño”. Su aplicación adecuada aumenta la calidad del
producto resultante, por lo que conocer los diferentes patrones se vuelve un requisito indispensable para un
buen profesional.
E
“LO ÚNICO CONSTANTE ES EL CAMBIO”
- Heráclito – Siglo V a.C. -
Introducción
2
1.1 Motivación
El objetivo docente de la asignatura “Ingeniería de Software”, incluido en su programa [1], es acercar al
alumno a la problemática involucrada en la gestión integral del software durante todo su ciclo de vida, y
presenta métodos, procedimientos y recursos disponibles para soportar dicha gestión.
Los patrones de diseño son uno de los recursos expuestos en detalle en la asignatura. Para facilitar al alumno la
asimilación de los conceptos relacionados con los patrones, y proveerle de material de apoyo y referencia,
surge la idea de desarrollar un libro electrónico en el que se expliquen los patrones más extendidos, empleando
en su implementación lenguajes de programación de la Web 2.0 ya conocidos por los alumnos en cursos
precedentes.
Aunque existe una vasta bibliografía en torno a los patrones de diseño, el número de referencias disminuye
drásticamente cuando se intentan localizar implementaciones concretas en lenguajes de la WWW. Para mayor
inri, no existe ningún documento en castellano que agrupe la implementación de todos los patrones clásicos en
JavaScript, por lo que la publicación de un documento de éstas características se vuelve casi necesaria.
1.2 Objetivos
El objetivo primario del proyecto es desarrollar una herramienta que permita al alumno de “Ingeniería de
Software” conocer los patrones de diseño para que pueda utilizarlos durante el diseño y desarrollo de una
aplicación.
Para conquistar tal fin, se ha elaborado un libro en versión electrónica en el que se explican de forma clara y
concisa todos los patrones clásicos de diseño, incluyendo ejemplos de implementación en lenguaje JavaScript.
1.3 A quién va dirigido este libro
En primera instancia, podrán beneficiarse de este libro los alumnos de “Ingeniería de Software” [2], cursada en
el Grado de Ingeniería de las Tecnologías de Telecomunicación.
El plan de estudios de este grado incluye las asignaturas previas “Fundamentos de programación I y II” [3] [4],
en las que se introduce al alumno en la programación a través de los lenguajes C y Java. Como consecuencia,
el libro asume que el lector dispone de conocimientos básicos sobre programación imperativa y orientación a
objetos.
Dado que el libro expone implementaciones de patrones usando el lenguaje JavaScript, es fundamental que el
lector conozca su sintaxis y peculiaridades. Este requisito queda cubierto para cualquier alumno que haya
superado la asignatura “Fundamentos de Aplicaciones y Servicios Telemáticos” [5], perteneciente al curso
anterior del mismo grado, pues entre sus objetivos se encuentra “proporcionar a los alumnos las habilidades y
conocimientos necesarios para la creación de aplicaciones Web”.
1.4 Alcance del proyecto
El libro electrónico pretende mostrar al lector, a través de ejemplos simplificados y fácilmente ejecutables,
cómo se implementan en lenguaje JavaScript cada uno de los 23 patrones de diseño incluidos en el libro
“Design Patterns” [6].
El libro no pretende diseñar ninguna aplicación completa que requiera del uso de todos los patrones. Es, en sí
mismo, el producto objeto del proyecto fin de carrera.
1.5 Organización del documento
3 Desarrollo de un libro electrónico para el aprendizaje de patrones
La memoria está ordenada de acuerdo al orden cronológico de los pasos seguidos para la elaboración del libro
electrónico.
En una primera etapa de análisis, el capítulo 0 da a conocer la literatura existente acerca de los patrones de
diseño y su relación con el lenguaje JavaScript. Asimismo, enumera el software disponible para facilitar la
elaboración de la obra.
Una vez conocido el estado de la técnica, el capítulo 0 hace inventario de las tecnologías seleccionadas para el
proyecto, introduciendo al lector en su terminología propia y explicando brevemente su funcionamiento.
El capítulo 0 se sumerge en el proceso de redacción y codificación del libro electrónico, destacando las
cuestiones técnicas de mayor interés.
Por último, el capítulo 0 cierra la memoria exponiendo las conclusiones extraídas una vez realizado el trabajo.
1.6 Convenciones
La memoria hace uso de las siguientes convenciones tipográficas:
La entrada o salida de la consola de comandos emplea una tipografía monoespaciada sobre fondo
beige. Ejemplo:
Comando
Las combinaciones de tecla emplean una tipografía monoespaciada. Cada tecla que conforma la
combinación se envuelve entre corchetes y el símbolo ‘+’ expresa la necesidad de mantener pulsadas
las teclas que rodean al símbolo. Ejemplo:
[CONTROL]+[F4]
2 ESTADO DEL ARTE
a confección de un libro electrónico precisa una doble tarea de investigación. En primer lugar se ha de
evaluar la bibliografía disponible relacionada con el tema principal sobre el que versa la obra,
analizando si existe una necesidad real de producir un trabajo de autoría propia, o si por el contrario
conviene emplear alguna referencia ya existente.
Suponiendo que existe nicho de mercado para el producto que se desea publicar, la segunda investigación
explora los utensilios tecnológicos disponibles para la creación y publicación del producto.
Este capítulo resume el transcurso y resultado de ambas indagaciones. Como adelanto, merece la pena indicar
que la primera investigación arroja conclusiones reveladoras, mientras que la siguiente proporciona un amplio
catálogo de alternativas software.
L
I have no special talents. I am only passionately curious
- Albert Einstein -
Estado del arte
6
2.1 Patrones de diseño y el lenguaje JavaScript
Las dificultades para escribir programas comprensibles, mantenibles y libres de defectos fueron expuestas por
primera vez en 1968 en la "NATO Software Engineering Conference" bajo el patrocinio de la OTAN [7],
donde se acuñó el término "crisis del software" para referenciar la problemática identificada. Posteriormente,
Edsger Dijkstra empleó el mismo término en su artículo "The Humble Programmer" [8].
La Ingeniería de software surge como respuesta a esta situación, tratando de aplicar ingeniería al proceso de
diseño, desarrollo, implementación, pruebas y mantenimiento del software. Dentro de este enfoque sistemático
y disciplinado de desarrollo software aparece la aplicación de los patrones de diseño1, aunque no obtienen una
relevancia significativa hasta la publicación del libro "Design Patterns" [6] en 1993.
La obra recopila y formaliza por primera vez conceptos de diseño ya existentes, creando un nuevo vocabulario
común entre diseñadores software. Todos los patrones que aparecen en sus páginas ayudan al diseño de
software orientado a objetos a través de clases, mostrando ejemplos de implementación en el lenguaje de
programación C++.
Desde su divulgación hasta la actualidad el inventario de obras relacionadas con los patrones de diseño ha
crecido enormemente. Una búsqueda en cualquier editorial especializada puede devolver un número de
resultados considerable. Sirva el siguiente listado2 como ilustración de ello:
PacktPub: 189 resultados3
Figura 2-1 Resultados de búsqueda. Libros sobre patrones de diseño de editorial PacktPub
1 Un patrón de diseño se define como “una descripción detallada de una solución a un problema recurrente dentro de un contexto” [52] 2 En todos los casos se ha establecido el mismo criterio de búsqueda; el texto debe contener “design patterns”, estar asociado a la Ingeniería de software y el resultado debe tratarse de un libro. 3https://www.packtpub.com/all?search=%22design%22%2B%22patterns%22&type_list%5Bbooks%5D=books&availability_list%5BAvailable%5D=Available&category_list%5BApplication+Development%5D=Application+Development&offset=&rows=&sort=
7 Desarrollo de un libro electrónico para el aprendizaje de patrones
Addison-Wesley / Pearson: 109 resultados4.
Figura 2-2 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Pearson
O’Reilly: 33 resultados5.
Figura 2-3 Resultados de búsqueda. Libros sobre patrones de diseño de editorial O’Reilly
4 http://www.informit.com/search/index.aspx?query=design+patterns 5http://ssearch.oreilly.com/?i=1;q=design+patterns;q1=Books;q2=O%27Reilly+Media;x=0;x1=t1;x2=publisher;y=0&act=fc_contenttype_O%27Reilly%20Media
Estado del arte
8
Apress: 115 resultados6.
Figura 2-4 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Apress
Wrox: 33 resultados7.
Figura 2-5 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Wrox
6 http://www.apress.com/catalogsearch/result/index/?cat=92&q=design+patterns&submit=Go 7 http://www.wrox.com/WileyCDA/Section/id-400599.html?query=design%20patterns&filter=books
9 Desarrollo de un libro electrónico para el aprendizaje de patrones
Manning publications: 169 resultados8.
Figura 2-6 Resultados de búsqueda. Libros sobre patrones de diseño de editorial Manning
The Pragmatic Bookshelf: 45 resultados9.
Figura 2-7 Resultados de búsqueda. Libros sobre patrones de diseño de editorial The
Pragmatic Bookshelf
8 https://www.manning.com/search 9 https://pragprog.com/search
Estado del arte
10
La mayoría de los resultados obtenidos tratan sobre implementaciones concretas de patrones usando los
diferentes lenguajes de programación existentes, pero también hay textos que introducen nuevos patrones o
realizan un análisis profundo sobre los clásicos10. Por citar alguno de ellos, pertenecen a este segundo grupo
los libros “Pattern-Oriented Software Architecture” [9] [10], “Patterns of Enterprise Application Architecture”
[11] y “Head First Design Patterns” [12].
Al realizar una búsqueda bibliográfica centrada en el tema del libro que se pretende desarrollar
(implementación de patrones en el lenguaje JavaScript), se observa que el número de referencias disponibles
se reduce al orden de unidades. Tomando las mismas páginas de referencia:
PacktPub: 1 resultado válido11.
Figura 2-8 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial Manning
10 El catálogo de patrones incluído en el libro “Design Patterns” [6] se considera todo un referente, por lo que es habitual denotarlo como “catálogo de Patrones clásicos”. 11 https://www.packtpub.com/all?search=%22JavaScript%22%2B%22patterns%22&type_list%5Bbooks%5D=books&availability_list%5BAvailable%5D=Available&category_list%5BApplication+Development%5D=Application+Development&offset=&rows=&sort=
11 Desarrollo de un libro electrónico para el aprendizaje de patrones
Pearson: 0 resultados válidos12.
Figura 2-9 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial Pearson
O’Reilly: 3 resultados válidos13
Figura 2-10 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial O’Reilly
12 http://www.informit.com/search/index.aspx?page=1&query=%22JavaScript+patterns%22&showResults=Store&searchagain=Search+Again&format=Books&format=eBooks&format=Adobe+DRM+PDFs&format=EPUBs&format=MOBIs&format=Watermarked+PDFs&format=Web+Editions&imprint=Addison-Wesley+Professional&imprint=Pearson&imprint=Pearson+FT+Press&imprint=Pearson+IT+Certification 13 https://ssearch.oreilly.com/?i=1;q=JavaScript+design+patterns+o%27reilly;q1=Books;x1=t1&act=fc_contenttype_Books
Estado del arte
12
APress: 2 resultados válidos14.
Figura 2-11 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial APress
Wrox: 0 resultados válidos15
Figura 2-12 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial Wrox
14 http://www.apress.com/catalogsearch/result/index/?cat=92&q=JavaScript+%22design+patterns%22&submit=Go 15
13 Desarrollo de un libro electrónico para el aprendizaje de patrones
Manning: 3 resultados válidos16.
Figura 2-13 Resultados de búsqueda. Libros sobre implementaciones en lenguaje JavaScript
de patrones de diseño. Editorial Manning
The Pragmatic Bookshelf: 1 resultado válido17
Figura 2-14 Resultados de búsqueda. Libros sobre implementaciones en lenguaje
JavaScript de patrones de diseño. Editorial The Pragmatic Bookshelf
16 https://www.manning.com/search 17 https://pragprog.com/search
Estado del arte
14
De entre los resultados obtenidos, merecen mención especial por su calidad las obras:
Learning JavaScript Design Patterns [13].
Pro JavaScript Design Patterns [14]
JavaScript Patterns [15]
Mastering JavaScript Design Patterns [16]
Para finalizar esta primera fase de investigación se vuelve a realizar de nuevo la última búsqueda, tomando la
restricción adicional de que los resultados se encuentren escritos en lengua española. Para ello, se actualizan
los términos de búsqueda usando las palabras “patrones”, “diseño” y “JavaScript”.
Para ahorrarle al lector una nueva tira de capturas de pantalla, permítame resumirle el resultado obtenido:
No existe bibliografía de referencia traducida a la lengua española.
Ninguna editorial, incluyendo a las más populares en España18, dispone de obras escritas o traducidas al
español que traten sobre la materia en cuestión.
No es menos cierto que existen blogs escritos en español que contienen artículos sobre patrones de diseño y
JavaScript. No obstante, ninguno agrupa la implementación de todos los patrones clásicos. De hecho, la
mayoría de los ejemplos ni siquiera conectan correctamente la terminología empleada por GoF19 .
Con todo lo anterior, no cabe duda de que la idea de desarrollar un libro electrónico de autoría propia tiene
sentido en el contexto actual.
18 Por ejemplo, Anaya, Ra-ma o Ediciones ENI. 19 Los autores del libro “Design Patterns” [6] son conocidos como la banda de los cuatro (Gang of Four)
15 Desarrollo de un libro electrónico para el aprendizaje de patrones
2.2 Soluciones para el desarrollo de un libro electrónico.
Una vez tomada la decisión de producir el libro, se han de evaluar las herramientas software disponibles para
llevar a cabo tal fin.
El carácter técnico e interactivo del libro electrónico debe ser considerado en todo momento.
2.2.1 Software de edición y publicación
2.2.1.1 Criterio de decisión.
A continuación se resumen los factores que se tendrán en cuenta para decidir qué útiles son considerados
válidos para el proyecto.
1. Gratuidad. Será un requisito indispensable al no disponer el proyecto de un presupuesto económico.
2. Licencia de uso libre. Serán prioritarias soluciones Open Source frente a alternativas no libres.
3. Multiplataforma: Tendrán predilección las herramientas con instaladores disponibles para los
principales sistemas operativos.
4. Extensible: Su capacidad de ampliación será un valor añadido.
5. Facilidad de uso: Se tasará positivamente una curva de aprendizaje rápida.
6. Generación de formato HTML: Será otro requisito indispensable para facilitar el acceso al libro desde
cualquier ubicación usando sólo un navegador Web.
7. Interactividad con el usuario: Es deseable que la versión HTML permita ejecutar el código de ejemplo
sin necesidad de herramientas adicionales.
2.2.1.2 Plataformas disponibles
En la tabla que se presenta a continuación se enumeran las principales plataformas de edición y publicación de
libros electrónicos.
Tabla 2-1 Relación de plataformas disponibles para la edición y publicación de libros electrónicos
Nombre Gratis Licencia Plataformas Plugins Intuitivo HTML Interactivo
Asciidoctor [17]
MIT
softcover [18]
Propia
LeanPub [19]
Propia
Daux.io [20]
MIT
Penflip [21] *
Propia
BookType [22]
Propia
Pandoc [23]
GPLv2
Estado del arte
16
Nombre Gratis Licencia Plataformas Plugins Intuitivo HTML Interactivo
Gitbook [24]
Apache
Kotobee [25] *
Propia
SoopBook [26] *
Propia
Myebook [27]
Propia
Sigil Ebook [28]
GPLv3
NeoBook [29]
Propia
De entre todas las posibilidades expuestas, Gitbook [24] es la única que cumple todos los requisitos del
apartado anterior, por lo que es la aplicación seleccionada para el desarrollo del libro electrónico.
2.2.2 Entornos de desarrollo JavaScript
2.2.2.1 Criterios de decisión
Se proponen los siguientes requisitos para la selección de las herramientas candidatas a ser usadas:
1. Gratuitas
2. Licencia libre
3. Multiplataforma
4. Extensibles
5. Intuitivas
6. Ligeras.
7. Con una gran comunidad que la respalde.
17 Desarrollo de un libro electrónico para el aprendizaje de patrones
2.2.2.2 Aplicaciones disponibles
Tabla 2-2 Editores de código y entornos de desarrollo en JavaScript
Nombre Gratis Licencia Plataformas Plugins Intuitivo Ligera Comunidad
WebStorm [30]
Propia
Eclipse [31]
Eclipse
Visual Studio
Code [32] MIT
Atom.io [33]
GitHub
SublimeText *
Propia
Jsfiddle.net [34]
Propia
Las únicas alternativas que cumplen todos los requisitos son Eclipse, Atom.io y Visual Studio Code. No
obstante, Eclipse queda descartado porque se trata de un IDE pesado que no aporta ninguna ventaja frente a
sus competidores (al menos no en el entorno requerido para el desarrollo que ocupa estas páginas).
Como consecuencia, la elección entre Atom.io y Visual Studio Code viene dada por parámetros secundarios.
Aunque ambas cuentan con una gran comunidad, tienen a su disposición multitud de plugins y son editores
ligeros, Atom.io se muestra algo más lenta en el proceso de arranque. Junto con otros factores secundarios, la
balanza se decanta por Visual Studio Code
3 TECNOLOGÍAS EMPLEADAS
l contenido del libro electrónico desarrollado se encuentra íntegramente redactado usando el lenguaje
markdown, por lo que su código fuente puede ser actualizado usando cualquier editor de texto plano. No
obstante, para simplificar el proceso de creación de la obra se ha optado por emplear GitBook. Entre sus
herramientas destacan el control de versiones basado en GIT, la exportación del documento a una versión
HTML equivalente y el uso de plugins para ampliar sus funcionalidades. Aunque también resulta interesante
su capacidad de desarrollo colaborativo, el contexto de este proyecto no ha requerido del mismo.
Aunque el libro HTML que genera Gitbook puede ser abierto directamente desde cualquier navegador sin
necesidad de un servidor, la tabla de contenidos que permite recorrer los capítulos que componen el
documento no funciona correctamente. Al menos, no funciona habiendo generado el libro HTML usando la
última versión disponible durante la redacción de esta memoria (GitBook 3.2.0). Por ello, para visualizar el
resultado de una forma completamente funcional, es necesario que la página principal (index.html) sea
entregada al navegador haciendo uso de cualquier servidor Web de páginas estáticas.
Aunque el mercado está plagado de alternativas (apache, nginx, lighthttp, etc.), siguiendo la filosofía KISS se
ha elegido “Devd” como servidor local por su carácter libre y portable (posee licencia MIT y no requiere
instalación en sistemas Windows 64 bits).
Durante la fase de codificación de los diferentes patrones se ha empleado el editor de código Visual Studio
Code, desarrollado por Microsoft. Aunque se podría haber usado cualquier editor de texto plano, las ventajas
de esta herramienta bien merecen su integración en el flujo de trabajo.
Por último, el código resultante JavaScript ha sido ejecutado y validado usando la Shell que ofrecen los dos
navegadores más populares del momento: Google Chrome y Mozilla Firefox. Ambos disponen de un entorno
de desarrollo integrado desde el que analizar y depurar todos los aspectos clave de una aplicación web.
E
Technology is a useful servant but a dangerous master
- Christian Lous Lange -
Tecnologías empleadas
20
3.1 Markdown
Markdown1 es una sintaxis que permite dar estilo a texto plano. Según palabras del autor (John Gruber [35]),
el objetivo de este lenguaje es hacer el texto resultante tan legible como sea posible.
Su uso masivo en Internet se debe a la simpleza y facilidad con la que Markdown da formato (negrita, cursiva,
etc.) al texto, sumado a la adopción temprana del lenguaje por parte de grandes comunidades de desarrollo y,
por último, a la proliferación de analizadores sintácticos capaces de convertir documentos que usan sintaxis
Markdown a múltiples formatos diferentes (entre los que destaca HTML).
El editor de textos usado durante el desarrollo del libro emplea sintaxis Markdown, por lo que conviene
conocer los tokens básicos del lenguaje que se enumeran en los siguientes sub-apartados.
3.1.1 Encabezados
Se generan cuando se encuentra una almohadilla antes de un texto. El número de almohadillas seguidas indica
la profundidad de la cabecera.
Tabla 3-1. Markdown. Encabezados
Markdown HTML
#Encabezado de nivel 1 <h1>Encabezado de nivel 1</h1>
##Encabezado de nivel 2 <h2>Encabezado de nivel 2</h2>
###Encabezado de nivel 3 <h3>Encabezado de nivel 3</h3>
####Encabezado de nivel 4 <h4>Encabezado de nivel 4</h4>
3.1.2 Cita
El signo “mayor que” indica que el texto que le sucede es una cita.
Tabla 3-2. Markdown. Cita
Markdown HTML
> Cita <blockquote><p>cita</p></blockquote>
1 La falta de una especificación estándar de Markdown ha derivado en la existencia de múltiples sintaxis diferentes. La más popular es, quizás, la que proporciona Github [51]
21 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.1.3 Énfasis
Un asterisco envolviendo a una palabra se considera cursiva. Dos asteriscos señalan que la palabra tiene un
diseño “negrita”.
Tabla 3-3. Markdown. Énfasis
Markdown HTML
**Negrita** <strong>Negrita</strong>
*Cursiva* <em>Cursiva</em>
3.1.4 Párrafo
Una línea en blanco entre dos bloques de texto los agrupa en párrafos diferentes.
Tabla 3-4. Markdown. Párrafo
Markdown HTML
Párrafo 1 \n\n Párrafo 2 <p>Párrafo1</p><p>Párrafo2</p>
3.1.5 Código
El acento grave identifica código fuente. Opcionalmente, el lenguaje en que está escrito el código fuente puede
quedar explícito si se introduce entre corchetes.
Tabla 3-5. Markdown. Código
Markdown HTML
`código en línea ` <code></code>
```código en
múltiples líneas```
<pre><code>código en
múltiples líneas</code></pre>
3.1.6 Línea horizontal
Tres guiones consecutivos expresan una línea horizontal
Tabla 3-6. Markdown. Línea horizontal
Markdown HTML
--- <hr />
Tecnologías empleadas
22
3.1.7 Listas
Un asterisco seguido de un espacio al comienzo de una línea simboliza una lista no ordenada.
Un número seguido de un punto y un espacio indica que el texto forma parte de una lista ordenada
Las listas pueden anidarse agregando espacios antes del asterisco
Tabla 3-7. Markdown. Listas
Markdown HTML
* Lista desordenada
* Lista desordenada
<ul><li>Lista desordenada</li>
<li>Lista desordenada</li></ul>
1. Lista ordenada
2. Lista ordenada
<ol><li>Lista ordenada<li>
<li>Lista ordenada</li></ol>
3.1.8 Enlace
Un hipervínculo se representa por medio de un texto rodeado de corchetes y una URL envuelta en paréntesis
Tabla 3-8. Markdown. Enlace
Markdown HTML
[enlace](http://trajano.us.es) <a href="http://trajano.us.es">enlace</a>
3.1.9 Imagen
Una imagen se referencia igual que un enlace genérico al que se le antepone el símbolo de cierre de
exclamación
Tabla 3-9. Markdown. Imagen
Markdown HTML
<img
src="http://www.etsi.us.es/archivos/servicios/publi
caciones/imagenes/tituloLogo.png" alt="imagen"
title=""></p>
23 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.1.10 Tabla
Para crear una tabla simple se emplea el siguiente patrón:
Separador de columna: Símbolo ‘|’.
Separador de fila: nueva línea.
Primera fila: Encabezado de las columnas que forman la tabla.
Segunda fila: El contenido de cada columna debe estar formado por guiones para indicar que la fila
anterior es una cabecera.
Siguientes filas: cuerpo de la tabla.
Tabla 3-10. Markdown. Tabla
Markdown HTML
columna1 | columna2
-------- | --------
fila1 | fila1
<table>
<thead>
<tr>
<th>columna1</th>
<th>columna2</th>
</tr>
</thead>
<tbody><tr>
<td>fila1</td>
<td>fila1</td>
</tr>
</tbody></table>
3.1.11 Nota al pie de página
El marcador de la nota al pie (superíndice) se denota envolviendo un identificador (número o palabra) entre
los símbolos ‘[^’ y ‘]’. La definición asociada a un marcador se expresa rodeando al identificador del marcador
con los símbolos de apertura y cierre‘[^’ y ‘]:’.
Tabla 3-11. Markdown. Nota a pie de página
Markdown HTML
Marcador de nota al pie[^1] Marcador de nota al <a href="#fn:1"
id="fnref:1">1</a>
[^1]: Definición de la nota <ol><li id="fn:1">Definición de la nota<a
href="#fnref:1" title="Return to article"
>↩</a></li></ol>
Tecnologías empleadas
24
3.1.12 Ejemplo de conversión
Con la ayuda de herramientas conversoras externas, un fichero de texto escrito usando Markdown puede ser
traducido a otro lenguaje de marcas. La siguiente imagen muestra un fichero de texto Markdown convertido
en página web estática (HTML) usando el conversor online “dillinger” [36].
Figura 3-1 Conversión de código en formato markdown (izqda.) a HTML (dcha.)
25 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.2 Gitbook
Gitbook [24] es un conjunto formado por un paquete de herramientas libres y un servicio de almacenamiento y
edición colaborativa. Facilita el proceso de publicación de documentación de diversa índole (libros, manuales,
documentos de investigación, etc.).
Para el desarrollo del proyecto se ha obviado el uso del servicio de almacenamiento de Gitbook, pues existen
planes de publicar el libro electrónico usando servidores propios del Departamento de Telemática.
En cambio, el empleo del conjunto de herramientas que Gitbook proporciona ha sido uno de los pilares sobre
los que se soporta el libro electrónico obtenido.
En los siguientes sub-apartados se expone el proceso de instalación y funcionamiento de las herramientas de
consola y el editor de documentos.
3.2.1 Requisitos previos
Las herramientas de consola necesitan que el runtime Node.js2 [37] (v4.0.0 o superior) se encuentre instalado
en el equipo. El instalador de Node.js puede ser obtenido a través de su página oficial
(https://nodejs.org/en/download/). Éste incluye el gestor de paquetes npm3 [38].
Los siguientes pasos resumen el proceso de instalación en una máquina sobre la que corre el sistema operativo
Windows:
1. Descargar el instalador oficial. La versión LTS 4.5.0 es la última disponible antes de la publicación de
esta memoria (https://nodejs.org/dist/v4.5.0/node-v4.5.0-x64.msi)
Figura 3-2 Node.js. Página de descarga
2 Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, basado en el lenguaje de programacíon JavaScript. 3 Node Package Manager
Tecnologías empleadas
26
2. Ejecutar el instalador y seguir los pasos del asistente (se requieren permisos de administrador)
Figura 3-3Node.js. Asistente de instalación (I)
Figura 3-4 Node.js. Asistente de instalación (II)
27 Desarrollo de un libro electrónico para el aprendizaje de patrones
Figura 3-5 Node.js. Asistente de instalación (III)
Figura 3-6 Node.js. Asistente de instalación (IV)
Tecnologías empleadas
28
Figura 3-7Node.js. Asistente de instalación (V)
Figura 3-8Node.js. Asistente de instalación (y VI)
29 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.2.2 Instalación de herramientas de consola (gitbook-cli)
La forma más sencilla para instalar Gitbook es usando el gestor de paquetes npm (incluido en la instalación de
Node.js):
1. Abrir consola de comandos. Para ello, en sistemas Windows:
a. Abrir el cuadro de diálogo “Ejecutar” pulsando la combinación de teclas [WIN]+[R]
Figura 3-9 Cuadro de diálogo "Ejecutar"
b. En el cuadro de diálogo, escribir la palabra “cmd” y pulsar el botón “Aceptar”.
2. Ejecutar el comando:
npm install gitbook-cli –g
3. Esperar a que finalice la instalación
Una vez instalado el paquete de herramientas, el equipo dispondrá de todo lo necesario para la creación,
edición y publicación de documentación.
3.2.3 Editor de textos
3.2.3.1 Instalación
Aunque la edición y creación de libros puede hacerse desde la consola, Gitbook proporciona un editor gráfico
que hace más amigable el flujo de trabajo. Puede obtener una copia de Gitbook Editor a través de su página
oficial (https://www.gitbook.com/editor/windows/download).
Figura 3-10 Gitbook Editor. Página web oficial.
Tras lanzar el instalador la aplicación se inicia automáticamente.
Tecnologías empleadas
30
3.2.3.2 Creación de un nuevo documento
Gitbook editor se puede abrir desde el acceso directo ubicado en el escritorio o a través del listado de
aplicaciones del menú de inicio. La primera ventana que muestra la aplicación tiene el siguiente aspecto:
Figura 3-11 Gitbook Editor. Ventana de registro al servicio online.
Para evitar el registro con el servicio online que Gitbook oferta hay que pulsar el botón “Do This Later” y
esperar a que emerja la ventana de archivos recientes
Figura 3-12 Gitbook Editor. Ventana de archivos recientes
31 Desarrollo de un libro electrónico para el aprendizaje de patrones
Pulsando el botón “New Book” aparece el diálogo de creación de libros, donde se debe introducir el nombre
del mismo.
Figura 3-13 Gitbook Editor. Cuadro de diálogo "Create New Book"
Al pulsar el botón “Create Book”, en el área de trabajo aparece una tarjeta desde la que se puede seleccionar y
abrir el nuevo proyecto:
Figura 3-14 Gitbook Editor. Acceso a últimos libros
Tecnologías empleadas
32
A partir de este punto puede comenzar a escribir el contenido del libro a través del editor:
Figura 3-15 Gitbook Editor. Ventana principal de Edición.
33 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.2.3.3 Edición del documento
Gitbook ofrece guías de usuario a través de su página web oficial4, por lo que en este apartado únicamente se
mencionarán aquellos puntos clave para la edición del libro.
En el menú superior del editor hay accesos directos a los diferentes elementos de Markdown:
Figura 3-16 Gitbook Editor. Menú superior (Markdown)
Además, el menú permite cambiar la vista, pudiendo ver el código en texto plano, el resultado o
ambas vistas conjuntas:
Figura 3-17 Gitbook editor. Modos de visualización.
En el lateral izquierdo aparece la tabla de contenidos y la estructura de directorios. Se recomienda
trabajar en éste último modo:
Figura 3-18 Gitbook Editor. Árbol de archivos
Desde la estructura de directorio se divisan todos los archivos que componen el proyecto. El
contenido del fichero README.md se muestra por defecto en el apartado “Introduction”.
4 Documentación oficial: https://gitbookio.gitbooks.io/documentation/content/ Documentación del Toolchain: http://toolchain.gitbook.com/
Tecnologías empleadas
34
El archivo SUMMARY.md contiene la tabla de contenidos del libro. Sólo se generarán los elementos
enlazados en esta tabla. Por tanto, para ocultar un capítulo del libro resultante basta con eliminar su
referencia.
Figura 3-19 Gitbook Editor. Archivo SUMMARY.md
La tabla de contenidos puede contener secciones anidadas empleando las listas no ordenadas de
Markdown.
Existen ficheros especiales que permiten configurar y extender Gitbook. Merece especial mención el
fichero book.json.
Además de la sintaxis Markdown, Gitbook permite crear variables globales (en el fichero
book.json). La siguiente captura muestra la creación de la variable global “saludo”
Figura 3-20 Gitbook Editor. Creación de variables globales
35 Desarrollo de un libro electrónico para el aprendizaje de patrones
Para mostrar la variable sólo es necesario envolverla entre dobles corchetes. Las variables globales
están accesibles a través de la variable “book”. Por tanto, la variable saludo se referencia mediante la
expresión {{ book.saludo }}
Figura 3-21 Gitbook Editor. Uso de variables globales
También está permitida la declaración y uso de variables locales, accesibles en el contexto donde se
han definido, usando la sintaxis:
Declaración: {% set nombreVariable = "Valor" %}
Modo de empleo; {{nombreVariable}}
3.2.4 Visualización de resultados
Aunque el “modo diseño” del editor aporta una idea del resultado final, conviene pre-visualizar el resultado
real en un navegador web. Para ello, Gitbook ofrece comandos específicos a través de la consola de comandos.
En concreto, la siguiente orden permite generar y servir una versión HTML del libro:
gitbook serve
Figura 3-22 Gitbook Toolchain. Salida de consola tras ejecutar el comando gitbook serve
Tecnologías empleadas
36
Tal y como se aprecia en la captura anterior, Gitbook instancia un servidor web local en el puerto 4000 y sirve
el libro en la dirección http://localhost:4000, por lo que el sitio web creado puede ser visitado desde cualquier
navegador.
Figura 3-23 Gitbook Toolchain. Sitio web generado (vista desde el navegador Mozilla Firefox)
Como valor añadido, el servidor web local es capaz de detectar cambios en el proyecto y recompilar el libro en
tiempo real. En consecuencia, sólo es necesario lanzar el comando anterior una única vez.
3.2.5 Generación de sitio web.
Finalizada la fase de redacción, sólo resta generar el libro en el formato destino deseado (HTML por defecto)
empleando el comando:
gitbook build ./ ./output
La instrucción anterior se compone de los siguientes tokens:
El primer parámetro (build) representa la acción (construir el libro)
El segundo elemento (./) expresa el directorio raíz del código fuente del libro
Por último, Gitbook recibe el directorio donde ubicar el sitio web resultante (./output).
37 Desarrollo de un libro electrónico para el aprendizaje de patrones
Durante la ejecución del comando anterior, Gitbook muestra en pantalla información sobre el paso activo y el
resultado final de la operación.
Figura 3-24 Gitbook Toolchain. Salida del comando gitbook build
Si todo el proceso finaliza satisfactoriamente, dispondrá del producto resultante en la subcarpeta especificada:
Figura 3-25 Gitbook Toolchain. Estructura de archivos del sitio web generado
3.2.6 Plugins
Gitbook incluye un sistema de plugins que le confiere una gran capacidad de expansión (temas, nuevas
funcionalidades, modificación de las características por defecto, etc.). El repositorio
https://plugins.gitbook.com/ mantiene un listado oficial de los plugins disponibles. El sitio proporciona, para
cada extensión, instrucciones de uso e instalación.
Usualmente, para instalar un plugin sólo es necesario referenciarlo en el fichero book.json e instalarlo a
través del comando
gitbook install
Tecnologías empleadas
38
3.3 Devd
Devd [39] es un servidor web local muy ligero y portable destinado a desarrolladores. Entre sus características,
destacan su funcionamiento sin necesidad de instalación y la capacidad de vigilar el contenido del sitio para
detectar cambios y ofrecer una recarga del mismo en vivo (live reload).
Servir un sitio web estático es tan simple como descargar el servidor desde su página oficial, ubicar el
ejecutable en la carpeta raíz de la estructura de archivos que se desea publicar y ejecutar el comando:
devd -ol .
Figura 3-26 Devd. Salida de consola tras iniciar el servidor por primera vez
Como se puede observar, Devd inicia el servidor y abre automáticamente la página principal del sitio en una
nueva pestaña del navegador por defecto.
Para finalizar Devd hay que matar el proceso, bien sea cerrando la ventana o bien pulsando
[CONTROL]+[C], [S] estando ésta en primer plano.
39 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.4 Microsoft Visual Studio Code
Microsoft Visual Studio Code [40] es un editor de código fuente de nueva hornada (su primera versión final
data de abril de 2016). Tiene licencia de código abierto MIT
Figura 3-27 Microsoft Visual Studio Code. Captura de pantalla genérica.
Aun siendo un producto muy joven, se ha ganado una gran reputación entre la comunidad de desarrolladores
JavaScript, permitiéndole competir con otras alternativas más veteranas como Sublime Text o Atom. En su
página web se enfatizan algunas de sus características claves:
IntelliSense: Autocompletado de variables, funciones, módulos, etc. Resaltado de sintaxis.
Debug: Depuración de código JavaScript desde el editor, incluyendo el uso de puntos de ruptura, pila
de llamadas y consola interactiva.
CVS: Integra el control de versiones a través de comandos GIT
Multilenguaje.
Extensible a través de plugins.
Tecnologías empleadas
40
3.4.1 Depuración
Visual Studio Code permite, de forma nativa, lanzar y depurar código JavaScript empleando el entorno de
ejecución Node.js. La siguiente lista resume los pasos necesarios para depurar un archivo JavaScript:
1. Iniciar el editor
Figura 3-28 Visual Studio Code. Ventana principal
2. Abrir carpeta donde se encuentra el archivo JavaScript a ejecutar (menú archivo -> abrir carpeta):
Figura 3-29 Visual Studio Code. Apertura de carpeta desde Explorador interno
41 Desarrollo de un libro electrónico para el aprendizaje de patrones
3. Seleccionar el icono “Depurar” en la barra lateral izquierda:
Figura 3-30 Visual Studio Code. Ventana de depuración
4. Configurar el lanzador de la aplicación. Para ello, hacer “click” sobre el icono “Configuración”
(representado por un engranaje):
Figura 3-31 Visual Studio Code. Botón de configuración del depurador
Tecnologías empleadas
42
5. Seleccionar “Node.js”
Figura 3-32 Visual Studio Code. Selección de entorno de depuración
6. El fichero launch.json se muestra en el editor. Modificar su contenido para que se lance el fichero
JavaScript deseado. Por ejemplo, supuesto un fichero llamado singleton.js en el directorio de trabajo:
Figura 3-33 Visual Studio Code. Configuración del fichero de entrada del depurador.
43 Desarrollo de un libro electrónico para el aprendizaje de patrones
7. Lanzar la aplicación a través del botón superior “Start Debugging”, o pulsando [F5]:
Figura 3-34 Visual Studio Code. Inicio de depuración
8. Mostrar la consola de depuración a través del botón superior o pulsando la combinación de teclas
[CONTROL]+[MAYUS]+[Y]:
Figura 3-35 Visual Studio Code. Consola de depuración
Tecnologías empleadas
44
Es posible crear puntos de ruptura haciendo click en la línea deseada en el margen del editor (a la izquierda de
la numeración de línea) y recargando la aplicación pulsando [CONTROL]+[MAYUS]+[F5]:
Figura 3-36 Visual Studio Code. Pausa en punto de ruptura
45 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.5 Navegadores web
El libro electrónico que genera Gitbook y todas las implementaciones de los patrones de diseño son
compatibles con los navegadores actuales.
No obstante, el código JavaScript únicamente ha sido validado en los navegadores Mozilla Firefox y Google
Chrome haciendo uso de las herramientas de desarrollo que ofrece cada aplicación.
3.5.1 Google Chrome. Chrome DevTools
Las herramientas de desarrollo de Google Chrome, proporcionadas junto con el navegador, permiten la autoría
y depuración de cualquier aplicación Web.
Para acceder a Chrome DevTools hay que pulsar la combinación de teclas [CONTROL]+[MAYUS]+[I], o
acceder desde el menú de Chrome -> Más herramientas -> Herramientas para desarrolladores. Desde la
pestaña “console”5 se accede a la consola interactiva de JavaScript. En ella es posible ejecutar código
JavaScript línea a línea, inspeccionar variables, etc.
Figura 3-37 Chrome DevTools. Pestaña “console”
Para ejecutar código formado por múltiples líneas (scripts) conviene, en su lugar, usar la zona de snippets6 que
ofrece el navegador en la pestaña “Sources” (conviene aclarar que un snippet7 es un término anglosajón usado
para designar pequeños trozos reusables de código fuente).
5 Uso de la consola. Guía oficial de Google: https://developers.google.com/web/tools/chrome-devtools/debug/console/ 6 Uso de la zona de snippets. Guía oficial de Google: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/ 7 https://es.wikipedia.org/wiki/Snippet
Tecnologías empleadas
46
Mediante un click derecho en dicha área es posible crear un nuevo snippet en el que introducir el código
deseado:
Figura 3-38 Chrome DevTools. Pestaña “Source”: creación de snippets
El área de trabajo del nuevo snippet aparecerá en blanco en la zona derecha de la pantalla. Tras rellenarla con
el código JavaScript a ejecutar, es posible establecer puntos de interrupción haciendo click en el margen
izquierdo de la línea deseada y, por último, ejecutar código pulsando el botón “Ejecutar” o la combinación de
teclas [CONTROL]+[ENTER]. Si el snippet muestra información por la salida de la consola, ésta aparecerá
en la pestaña “Console”:
Figura 3-39 Chrome DevTools. Ejecución de código JavaScript desde la pestaña de snippets
47 Desarrollo de un libro electrónico para el aprendizaje de patrones
3.5.2 Mozilla Firefox
Mozilla Firefox también ofrece herramientas integradas [41] para examinar, editar y depurar código HTML,
CSS y JavaScript.
Al igual que Chrome, el acceso a las herramientas se realiza a través de la combinación de teclas
[CONTROL]+[MAYUS]+[I], o desde el menú “Desarrollador”. Para abrir directamente la consola, es
posible usar la combinación [CONTROL]+[MAYUS]+[K].
Figura 3-40 Mozilla Firefox. Herramientas de desarrollador: consola
Mozilla Firefox ofrece, además, un entorno para experimentar con código JavaScript denominado
“Scratchpad” [42]. Se recomienda su uso para ejecutar scripts completos de JavaScript. Para acceder a este
entorno se usa la combinación de teclas [MAYUS]+[F4] (o el menú de Desarrollador).
Figura 3-41 Mozilla Firefox. Herramientas de desarrollador: Scratchpad
Scratchpad permite abrir archivos existentes, ejecutarlos e inspeccionar el resultado. Por desgracia, Scratchpad
no permite establecer puntos de ruptura.
4 DESARROLLO DEL PROYECTO
Como no puede ser de otra forma, antes de estar en disposición de escribir sobre cualquier tema es
imprescindible conocerlo y entenderlo. Por tanto, ha sido necesaria la lectura de las obras más representativas
acerca de los patrones de diseño en la Ingeniería de Software, el lenguaje JavaScript y la relación entre ambos.
Adquirida la comprensión básica de los asuntos anteriores, se ha perfilado la estructura y composición del libro
electrónico, optando por sintetizar cada patrón en una breve explicación del mismo junto con un ejemplo que
muestra los detalles de su implementación. Tal y como dijo Séneca, “Largo es el camino de la enseñanza por
medio de teorías; breve y eficaz por medio de ejemplos” [43].
Una vez se ha escrito cada capítulo y codificado cada patrón, se ha configurado Gitbook para maquetar el sitio
web resultante de acuerdo al diseño corporativo del Departamento de Telemática. Además, se le ha
proporcionado al libro electrónico la capacidad de ejecutar los ejemplos en el interior de cada capítulo,
evitando que el alumno requiera de herramientas externas para verificar la validez del código.
Any fool can write code that a computer can
understand. Good programmers write code that humans
can understand.
- Martin Fowler -
Desarrollo del proyecto
50
4.1 Lectura previa.
La investigación descrita en el capítulo punto 2.1, proporciona las referencias bibliográficas necesarias para
poder profundizar en materia. De entre todos los resultados obtenidos, las siguientes obras han sido
seleccionadas y estudiadas:
Estudio de patrones de diseño:
Design Patterns [6].
Head first design patterns. [44]
Manuales de referencia del lenguaje JavaScript:
Javascript: The definitive Guide. [45]
JavaScript: The Good Parts. [46]
Object Oriented JavaScript. [47]
Patrones de diseño en el lenguaje JavaScript:
Learning Javascript Design Patterns [13]
Pro JavaScript Design Patterns [14]
Mastering JavaScript design patterns [16]
JavaScript Patterns [15]
4.2 Redacción.
El uso de GitBook y Markdown durante la composición de la obra se ha traducido en una escritura más rápida
y ágil que la que proporcionan editores de texto de sobra conocidos.
La sintaxis de Markdown es tan sencilla que en pocos minutos el usuario no necesita usar el ratón para acceder
a los diferentes estilos; unos cuantos caracteres suelen ser suficientes para conseguir resultados asombrosos.
Además, disponer del documento en texto plano aporta otras ventajas indirectas:
Cada archivo puede ser visualizado en cualquier equipo sin necesidad de software específico, pues
cualquier sistema operativo integra un editor de texto plano.
Al ser un formato ASCII, cualquier sistema de control de versiones puede mostrar las diferencias
entre cada versión del documento.
4.3 Codificación
Cada capítulo del libro que trata sobre un patrón de diseño incluye código JavaScript que enseña cómo
aplicarlo.
El lenguaje JavaScript está basado en prototipos, por lo que la transcripción de un patrón clásico (modelado
usando clases) no es directa. Para mostrar la relación entre la definición del patrón que da el libro “Design
Patterns” [6] y el ejemplo codificado en JavaScript, se ha codificado cada ejemplo emulando programación
orientada a objetos a través de clases.
Para facilitar la interpretación del código, se ha indicado a través de comentarios la analogía entre las clases
empleadas en el ejemplo y los participantes que define el patrón. Además, al igual que sucede con las clases y
las interfaces, cada ejemplo trata de modelar símiles de la vida real.
51 Desarrollo de un libro electrónico para el aprendizaje de patrones
Aunque JavaScript es un lenguaje íntimamente relacionado con la Web, se ha procurado que los ejemplos
puedan ser lanzados fuera de éste ámbito27. Por ello:
No se ha empleado código propio de los navegadores web.
No se ha accedido a los elementos del DOM28.
Todos los resultados son mostrados a través de la consola
Se ha usado código JavaScript puro (versión ECMAScript 5.1)
Por todo lo anterior, el código resultante centra el foco de atención en la implementación del patrón,
eliminando cualquier componente de distracción y facilitando la lectura del script.
4.4 Maquetación.
GitBook genera cada sitio web usando una plantilla predefinida [48] con la que traslada cada estilo Markdown
a código HTML y CSS.
Por suerte esta plantilla es configurable, por lo que es posible personalizar el libro y adaptar su estilo al diseño
corporativo que dispone el Departamento.
Usando como esquema de referencia las transparencias de la asignatura Ingeniería de Software [1], se ha
diseñado un tema específico para Gitbook con las siguientes características:
Cabecera al comienzo de cada capítulo. Incluye el logotipo y nombre de la asignatura, ambos
vinculados a la página web de la misma. Separa el contenido del documento a través de una línea
horizontal con los colores corporativos.
Pie al final de cada capítulo. Una línea horizontal con los colores corporativos separa el final del
contenido de los logotipos del Departamento de Telemática y la Universidad de Sevilla
Cuadro de búsqueda usando color corporativo.
Para introducir el nuevo tema HTML en el libro electrónico se han seguido los pasos descritos por la guía de
Gitbook:
1. Crear el subdirectorio base para la plantilla: _layouts/website
2. Crear el fichero cebecera en formato HTML: _layouts/website/global-header.hml
<a href="http://trajano.us.es/~isabel/IngenieriaSoftware/"
target="_blank">
<img src="/public/logoAsignatura.svg"></img>
</a>
<h3 id="h3Logo">
<a href="http://trajano.us.es/~isabel/IngenieriaSoftware/"
target="_blank">
Ingeniería de software. 3° GITT - Telemática
</a>
</h3>
<hr id="hrLogo" />
3. Crear el fichero pie de página en formato HTML: _layouts/website/global-footer.html
<hr id="hrFooter">
<a href="http://www.us.es/" target="_blank">
<img id="logoUS" src="/public/logoUS.svg">
</img>
</a>
27 Es possible lanzar aplicaciones JavaScript en el lado servidor. Un buen ejemplo de ello es Node.js [37] 28 Document Object Model. [53]
Desarrollo del proyecto
52
<a href="http://trajano.us.es" target="_blank">
<img id="logoETSI" src="/public/logoTelematica.svg">
</img>
</a>
4. Crear la plantilla para una página genérica en el directorio _layouts/website/page.html
Editar la plantilla para que muestre siempre se muestre la cabecera, el contenido del capítulo y el pie
de página.
{% extends template.self %}
{% block page %}
{% include "./global-header.html" %}
{{ super() }}
{% include "./global-footer.html" %}
{% endblock %}
5. Crear el archivo styles/website.css
Personalizar el estilo de los identificadores HTML más importantes.
/* ***************** */
/* HEADER AND FOOTER */
/* ***************** */
hr#hrLogo,
hr#hrFooter {
width: 100%;
background: linear-gradient(to right, #A90021 0%, #FF9800 100%);
color: white;
opacity: 0.95;
}
hr#hrLogo {
margin:0px;
height: 20px;
}
hr#hrFooter {
margin:100px 0px 10px 0px;
height: 10px;
}
h3#h3Logo {
display: inline-block;
float:right;
}
img#logoETSI {
height: 100px;
float: right;
}
img#logoUS {
height: 100px;
float: left;
}
/* ***************** */
/* HEADER AND FOOTER */
/* ***************** */
#book-search-input input[type="text"]::-webkit-input-placeholder
{ /* Chrome/Opera/Safari */ color: GhostWhite; }
53 Desarrollo de un libro electrónico para el aprendizaje de patrones
#book-search-input input[type="text"]::-moz-placeholder
{ /* Firefox 19+ */ color: GhostWhite; }
#book-search-input input[type="text"]:-ms-input-placeholder
{ /* IE 10+ */ color: GhostWhite; }
#book-search-input input[type="text"]:-moz-placeholder
{ /* Firefox 18- */ color: GhostWhite; }
#book-search-input {
background-color: #990000;
color:white;
font-weight: bold;
}
En la siguiente imagen se aprecia el resultado obtenido:
Figura 4-1 Gitbook. Sitio web resultante tras extender la plantilla básica
Desarrollo del proyecto
54
4.5 Extensiones
La gestión del código fuente usado como ejemplo se ha apoyado en dos plugins disponibles en el repositorio
de Gitbook
“include-codeblock” [49]. Permite incluir código fuente en cualquier fichero markdown. De esta
forma, se desacopla el contenido del libro de los ficheros JavaScript.
o La sintaxis para importar un archivo JavaScript en el interior de un archivo markdown es
idéntica a la usada para crear hipervínculos, usando como nombre a mostrar la palabra
reservada “import”. Ejemplo: [import](../src/chapter4/factory.js)
“js-console” [50]. Facilita la ejecución de código JavaScript desde el mismo sitio web, de modo que
cualquier visitante puede editar y ejecutar los ejemplos proporcionados sin necesidad de emplear
ninguna otra herramienta adicional.
o Para hacer una zona de código markdown (```code```) ejecutable, hay que precederla con la
directiva {% console %}{% endconsole %}.
Para instalar una extensión únicamente hay que referenciarla en el archivo de configuración book.json y
lanzar el comando
gitbook install
En el caso concreto del libro electrónico que ocupa este documento, este es el contenido del archivo book.json:
{
"language": "es",
"plugins": ["include-codeblock", "js-console", "-sharing"],
}
Combinando ambas extensiones se consigue ejecutar código externo al proyecto. En el libro que nos atañe se
ha optado por incluir el código fuente en subcarpetas nombradas “src/chapterX”. Para importar el código y
hacerlo ejecutable cada capítulo hace uso de las siguientes líneas:
{% console %}{% endconsole %}
[import](../src/chapterX/pattern_name.js)
Se observa, por último, la existencia de un tercer plugin “-sharing”. El signo menos que precede al nombre
indica que la extensión, usada por GitBook para dar acceso a las redes más conocidas en la actualidad, ha sido
deshabilitado.
55 Desarrollo de un libro electrónico para el aprendizaje de patrones
4.6 Generación.
El sitio web estático final se crea a través del comando descrito en el punto 3.2.5 y es servido en un entorno
local usando la aplicación detallada en 3.3
Como último paso antes de considerar finalizado el desarrollo, se verifica el resultado obtenido y se ejecuta el
código de cada capítulo desde el sitio web generado, usando para ello los navegadores Mozilla Firefox v48 y
Google Chrome v52.0.2743.116 m
4.7 Guía de uso
4.7.1 Cómo leer el libro
Los capítulos del libro electrónico van punteando el camino hacia el conocimiento y manejo de patrones de
diseño, usando JavaScript como lenguaje de programación. El recorrido marcado es el que sigue:
Introducción
Punto de partida en el que se incluye una breve introducción histórica y exhibe algunas buenas
prácticas generales de diseño y codificación.
Patrones de diseño
Proporciona una definición y descripción de patrón de diseño, enumerando el catálogo de patrones
clásicos.
El lenguaje JavaScript
Expone la metodología usada en el libro para emular los conceptos de abstracción, clase, herencia,
encapsulación, etc.
Patrones creacionales
Describe y explica a través de ejemplos los patrones de diseño clásicos categorizados como
“creacionales”
Patrones estructurales
Describe y explica a través de ejemplos los patrones de diseño clásicos categorizados como
“estructurales”
Patrones de comportamiento
Describe y explica a través de ejemplos los patrones de diseño clásicos categorizados como “de
comportamiento”
Otros patrones
Describe y explica a través de ejemplos otros patrones modernos usuales en JavaScript.
Desarrollo del proyecto
56
4.7.2 Cómo ejecutar el código
El libro electrónico incluye, al final de cada zona de código JavaScript, un botón “Run” desde el cual se puede
ejecutar el script y ver el resultado obtenido en la salida de la consola.
Figura 4-2 Libro electrónico. Ejecución de código fuente.
Si lo desea, también puede ejecutar el código fuente empleando uno de los métodos descritos en 3.5
5 CONCLUSIONES
La investigación llevada a cabo en el capítulo 0 pone de manifiesto la falta de literatura en castellano sobre el
uso de patrones en JavaScript, dando razón de ser al desarrollo de un libro electrónico como soporte y
referencia para el alumno.
Gracias al software libre disponible en la web, el proceso de desarrollo queda simplificado a la escritura del
documento y codificación de los diferentes ejemplos.
Dicho lo anterior, dadas las peculiaridades técnicas de la obra, ha sido necesario un esfuerzo adicional para
maquetar el libro y permitir su interactividad.
No obstante, es durante la fase inicial de formación donde estriba la complejidad del proyecto (y su mayor
carga horaria). Comprender y asimilar cada uno de los patrones clásicos de diseño para poder enseñarlos ha
sido una tarea tan ardua como placentera. Y es que, citando a Cicerón, “Si quieres aprender, enseña”.
Every failure teaches a man something, if he will but learn
- Charles Dickens -
REFERENCIAS
[1] Universidad de Sevilla, «Ingeniería de Software (Grado en Ingeniería de las Tecnologías de
Telecomunicación),» 6 Septiembre 2016. [En línea]. Available:
http://www.us.es/estudios/grados/plan_199/asignatura_1990039. [Último acceso: 9 7 2016].
[2] Universidad de Sevilla, «Ingeniería de Software (Grado en Ingeniería de las Tecnologías de
Telecomunicación),» 6 Septiembre 2016. [En línea]. Available:
http://www.us.es/estudios/grados/plan_199/asignatura_1990039. [Último acceso: 7 Septiembre 2016].
[3] Universidad de Sevilla, «Fundamentos de Programación I (Grado en Ingeniería de las Tecnologías de
Telecomunicación),» 6 Septiembre 2016. [En línea]. Available:
http://www.us.es/estudios/grados/plan_199/asignatura_1990003. [Último acceso: 7 Septiembre 2016].
[4] Universidad de sevilla, «Fundamentos de Programación II (Grado en Ingeniería de las Tecnologías de
Telecomunicación),» 6 Septiembre 2016. [En línea]. Available:
http://www.us.es/estudios/grados/plan_199/asignatura_1990007. [Último acceso: 7 Septiembre 2016].
[5] Universidad de Sevilla, «Fundamentos de Aplicaciones y Servicios Telemáticos (Grado en Ingeniería de
las Tecnologías de Telecomunicación),» 6 Septiembre 2016. [En línea]. Available:
http://www.us.es/estudios/grados/plan_199/asignatura_1990018. [Último acceso: 7 Septiembre 2016].
[6] E. Gamma, R. Helm, R. Johnson y J. Vlissides, Design Patterns: Abstraction and Reuse of Object-
Oriented Design, oreilly, 1993, pp. 406-431.
[7] B. Randell y J. Buxton, «Software Engineering Techniques: Report of a conference sponsored by the
NATO Science Committee, Rome,» de The NATO Software Engineering Conferences, Brussels, 1969.
[8] E. W. Dijkstra, «The humble programmer,» Communications of the ACM, vol. 15, nº 10, pp. 859-866,
Octubre 1972.
[9] F. Buschmann, R. Regine y P. Sommerlad, Pattern-Oriented Software Architecture, Volume 1: A System
of Patterns, vol. 1, John Wiley & Sons, 1996, p. 476.
[10] D. C. Schmidt, H. Rohnert, M. Stal y F. Buschmann, Pattern-Oriented Software Architecture, Volume 2:
Patterns for Concurrent and Networked Objects, vol. 2, John Wiley & Sons, 2000.
[11] M. Fowler, Patterns of Enterprise Application Architecture, Addison-Wesley., 2002.
[12] E. T. Freeman, E. Robson, B. Bates y K. Sierra, Head First Design Patterns, O'Reilly Media, 2004.
Referencias
60
[13] A. Osmani, Learning Javascript Design Patterns, O'Reilly, 2012.
[14] R. Harmes y D. Diaz, Pro Javascript Design Patterns, Apress, 2008, p. 280.
[15] S. Stefanov, Javascript Patterns, O'Reilly, 2010.
[16] S. Timms, Mastering Javascript Design Patterns, PacktPub, 2014.
[17] D. Allen y R. Waldron, «Asciidoctor,» 2012. [En línea]. Available: http://asciidoctor.org/. [Último
acceso: 9 Septiembre 2016].
[18] M. Hartl, N. Merwin y L. Donahoe, «Softcover,» [En línea]. Available: https://www.softcover.io/.
[Último acceso: 0 Septiembre 2016].
[19] Ruboss, «Leanpub,» 2010. [En línea]. Available: https://leanpub.com/. [Último acceso: 7 Septiembre
2016].
[20] J. Wralsh, «Daux.io,» [En línea]. Available: http://daux.io/. [Último acceso: 7 Septiembre 2016].
[21] L. Burton, «Penflip,» [En línea]. Available: https://www.penflip.com/. [Último acceso: 7 Septiembre
2016].
[22] SourceFabric, «Booktype,» [En línea]. Available: https://www.sourcefabric.org/en/booktype/. [Último
acceso: 7 Septiembre 2016].
[23] J. MacFarlane, «Pandoc,» 10 Agosto 2006. [En línea]. Available: http://pandoc.org/getting-started.html.
[Último acceso: 8 Septiembre 2016].
[24] A. O'Mullan y S. Pessé, «Gitbook,» FriendCode Inc., 2014. [En línea]. Available:
https://www.gitbook.com/. [Último acceso: 7 Septiembre 2016].
[25] Vijua, «Kotobee,» [En línea]. Available: https://www.kotobee.com/. [Último acceso: 7 Septiembre 2016].
[26] SoopBook, «Social Open Book,» 2001. [En línea]. Available: http://soopbook.es/planes/. [Último acceso:
7 Septiembre 2016].
[27] MyEbook Global Ltd., «Myebook,» [En línea]. [Último acceso: 7 Septiembre 2016].
[28] K. Hendricks y D. Massay, «Sigil Ebook,» [En línea]. Available: https://sigil-ebook.com/. [Último
acceso: 7 Septiembre 2016].
[29] NeoSoft Corp., «NeoBook,» [En línea]. Available: http://www.neosoftware.com/nbwdownload.html.
[Último acceso: 7 Septiembre 2016].
[30] JetBrains, «WebStorm,» [En línea]. Available: https://www.jetbrains.com/webstorm/. [Último acceso: 7
Septiembre 2016].
[31] Eclipse Foundation, «Eclipse IDE for Javascript Web Developers,» [En línea]. Available:
http://www.eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/indigosr2. [Último
acceso: 7 Septiembre 2016].
[32] M. Corporation, «Visual Studio code,» 2015. [En línea]. Available: https://code.visualstudio.com/.
61 Desarrollo de un libro electrónico para el aprendizaje de patrones
[Último acceso: 7 Septiembre 2016].
[33] Atom, «Atom.io,» [En línea]. Available: https://atom.io/. [Último acceso: 7 Septiembre 2016].
[34] JsFiddle, «JsFiddle,» [En línea]. Available: https://jsfiddle.net/. [Último acceso: 7 Septiembre 2016].
[35] J. Gruber, «Daring Fireball,» 17 Diciembre 2004. [En línea]. Available:
http://daringfireball.net/projects/markdown/. [Último acceso: 7 Septiembre 2016].
[36] J. M. a. M. Broder, «Dillinger,» [En línea]. Available: http://dillinger.io/. [Último acceso: 7 Septiembre
2016].
[37] R. L. Dahl, «Node.js,» 27 Mayo 2009. [En línea]. Available: https://nodejs.org/en/. [Último acceso: 7
Septiembre 2016].
[38] I. Z. Schulueter, «Node Package Manager,» 12 Enero 2010. [En línea]. Available:
https://www.npmjs.com/. [Último acceso: 07 Septiembre 2016].
[39] A. Cortesi, «Devd,» 22 Octubre 2015. [En línea]. Available: https://github.com/cortesi/devd. [Último
acceso: 7 Septiembre 2016].
[40] «Microsoft Visual Studio Code,» Microsoft, 29 Abril 2015. [En línea]. Available:
https://code.visualstudio.com/. [Último acceso: 7 Septiembre 2016].
[41] M. Firefox, «Herramientas de desarrollo,» [En línea]. Available:
https://developer.mozilla.org/es/docs/Tools. [Último acceso: 7 Septiembre 2016].
[42] M. Foundation, «Scratchpad,» 21 Juio 2016. [En línea]. Available: https://developer.mozilla.org/en-
US/docs/Tools/Scratchpad. [Último acceso: 7 Septiembre 2016].
[43] L. A. Séneca, Cartas a Lucilio, 1494.
[44] E. Freeman y E. Freeman, Head First. Design Patterns, O'Reilly, 2004.
[45] D. Flanagan, Javascript: The Definitive Guide, 6th Edition, O'Reilly Media, 2001, p. 1096.
[46] D. Crockford, JavasScript: The Good Parts, O'Reilly Media, 2008, p. 172.
[47] S. Stefanov, Object-Oriented JavaScript. Create scalable, reusable high-quality JavaScript applications,
and libraries, 2008: Packt Publishing Ltd..
[48] Gitbook, «Gitbook Default Theme,» [En línea]. Available: https://github.com/GitbookIO/theme-default.
[Último acceso: 7 Septiembre 2016].
[49] azu, «"include-codeblock" Gitbook plugin,» [En línea]. Available:
https://plugins.gitbook.com/plugin/include-codeblock. [Último acceso: 7 Septiembre 2016].
[50] azu, «"js-console" Gitbook Plugin,» [En línea]. Available: https://plugins.gitbook.com/plugin/js-console.
[Último acceso: 7 Septiembre 2016].
[51] Github, «Mastering Markdown,» 15 Enero 2014. [En línea]. Available:
https://guides.github.com/features/mastering-markdown/. [Último acceso: 7 Septiembre 2016].
Referencias
62
[52] C. Alexander, S. Ishikawa, S. Murray, I. Fiksdahl-King y A. Shlomo, A Pattenr Language: Towns,
Buildings, Construction., New York: Oxford University Press, 1977.
[53] c. d. Wikipedia, «Document Object Model,» Wikipedia, La enciclopedia libre, 2016.
GLOSARIO
A
ASCII; American Standard Code for Information IntercChange. Código de caracteres basado en el alfabeto latino, 50
C
C++: Lenguaje de programación multiparadigma, orientado a objetos, imperativo y genérico, 6
Carpeta Raíz: Primer directorio o carpeta de una jerarquía, 38
CSS: Cascade Style Sheets. Lenguaje usado para definir y crear la presentación de un documento HTML, 47, 51
CVS: Control Version System, 39
D
Depuración: Proceso de identificar y corregir errores de programación, 39, 40
DOM: Document Object Model, 51
E
ECMAScript: Especificación de lenguaje de programación publicada por ECMA International. Basado en Javascript, 51
G
GIT: Software de control de versiones diseñado por Linus Torvalds, 19, 39
Gitbook: Software para la escritura y publicación de documentos, 16, 19, 25, 29, 30, 31, 32, 33, 34, 35, 36, 37, 45, 49, 51, 53, 54
GoF: Gang of Four. Nombre con que se conoce a los autores del libro Design Patterns (Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides), 14
H
HTML: HyperText Markup Language. Lenguaje de marcado para la elaboración de páginas web, 15, 19, 20, 21, 22, 23, 24, 36, 47, 51, 52
I
IDE: Entorno de desarrollo integrado. Proporciona servicios integrales para facilitar el desarrollo de software, 17
Ingeniería de Software: Disciplina de la ingeniería que atiende a todos los aspectos de la producción de software, xi, 1, 2, 49, 51
IntelliSEnse: Capacidad de autocompletar símbolos, funciones, expresiones, etc., 39
J
JavaScript: Lenguaje de programación interpretado, orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico, 2, 3, 6, 10, 11, 12, 13, 14, 16, 17, 19, 25, 39, 40, 42, 45, 46, 47, 49, 50, 51, 54, 55, 56
K
KISS: Keep It Simple, Stupid! Principio que establece que la mayoría de sistemas funcionan mejor si se mantienen simples, 19
L
Libro electrónico: Libro digital (e-book). Versión electrónica de un libro, 2, 3, 5, 14, 15, 16, 19, 25, 45, 49, 51, 54, 55, 56, 57
Licencia libre: Licencia que permite que la obra no posea restricciones legales significativas en relación con el derecho de uso, la
redistribución y la creación de versiones modificadas o derivadas por parte de terceros, 15
Licencia MIT: Licencia de software libre originada en el Instituto Tecnológico de Massachusetts, 19
Live Reload: recarga en tiempo real, 38
M
Markdown: Lenguaje de marcas ligero convertible a HTML, 20, 21, 22, 23, 24, 33, 34, 50, 51
Multiplataforma: Programas implementados en varias plataformas informáticas diferentes, 15, 16
N
Node.js: Runtime de JavaScript construído sobre el motor JavaScript de Chrome (V8), 25, 26, 27, 29, 40, 42, 51
O
OTAN: Organización del Tratado del Atlántico Norte (NATO). Alianza militar intergubernamental firmada en 1949, 6
P
Patrones creacionales: Patrones que solucionan problemas de creación de instancias, 55
Patrones de comportamiento: patrones de diseño software que ofrecen soluciones respecto a la interacción y responsabilidades entre clases y objetos, así como los algoritmos que encapsulan, 55
Patrones de diseño: Soluciones generales y reusables a problemas recurrentes, xi, 2, 3, 6, 7, 8, 9, 10, 11, 12, 13, 14, 45, 49, 50, 55
Patrones estructurales: patrones de diseño software que solucionan
Glosario
64
problemas de composición (agregación) de clases y objetos, 55
Plugin: Complemento que agrega funcionalidad a una aplicación principal, 17, 19, 37, 39, 54
Prototipos: Estilo de programación orientada a objetos en el que los objetos no son creados mediante instanciación de clases, sino mediante la clonación de otros objetos o mediante la escritura de código por parte del programaador, 50
Puerto: valor que se usa en el modelo de la capa de transporte, para
distinguir entre las múltiples aplicaciones que se pueden conectar al mismo puesto de trabajo, 36
R
Recompilar: Traducir un programa escrito en un lenguaje de programación a otro lenguaje diferente, 36
S
Snippet: Trozo de código fuente, 45, 46
V
Variable global: Variable accesibles en todo el ámbito del programa, 34, 35
Variable local: Variable accesible únicamente en un ámbito local, 35
W
Web 2.0: Comprende aquellos sitios web que facilitan compartir información, la interoperatibilidad y colaboración en la World Wide Web, 2
WWW: World Wide Web, 2
65 Desarrollo de un libro electrónico para el aprendizaje de patrones
ANEXO A. LIBRO DESARROLLADO