CODETEC- Proyecto Final Taller de Investigacion 2 Pagina web que enlaza cursos para aprender a programar :v

1. 1
Contenido
1.1 Antecedentes del problema ................................................................................................2
1.2 Objetivos de la Investigación..................................................................................................5
1.2.1 Objetivos generales ...........................................................................................................5
1.2.2 Objetivos específicos..........................................................................................................5
1.3 Justificación.............................................................................................................................6
1.4 Preguntas de Investigación. .....................................................................................................7
1.5 Hipótesis..................................................................................................................................8
1.6 Cronograma de actividades................................................................................................9
1.7 Presupuesto......................................................................................................................10
Capítulo 2: Tópicos para el Desarrollo de Software ........................................................................11
2.1 Concepto de Software ......................................................................................................11
2.2 Clasificacion del Software................................................................................................12
2.3 Ingeniería de Software. ....................................................................................................14
2.4 Modelos De Proceso Prescriptivo. ....................................................................................15
2.4.1 Modelo de la cascada ................................................................................................16
Capítulo 3: Ámbito Web.................................................................................................................19
3.1 Página Web......................................................................................................................19
3.2 Hipertexto........................................................................................................................20
3.3 HTML..............................................................................................................................21
3.4 Historia de HTML.............................................................................................................23
3.5 HTML5............................................................................................................................25
3.6 CSS3 ................................................................................................................................28
3.6.1.1 JavaScript ....................................................................................................................29
3.6.1.2 Framework Web: Bootstrap.........................................................................................30
Capítulo 4: Software Necesario.......................................................................................................32
4.1 Herramientas para crear una página web........................................................................32
4.2 Navegadores Web............................................................................................................33
4.3 Editor de Texto................................................................................................................34
Capítulo 5 Metodología...................................................................................................................36
5.1 Tipo de Investigación.......................................................................................................38
5.2 Población YMuestra........................................................................................................39
5.3 Instrumento..................................................................................................................40
Análisis de Resultados.....................................................................................................................42

2. 2
Procedimiento.................................................................................................................................53
Referencias .....................................................................................................................................63
Capítulo 1: Planteamiento del Problema
1.1 Antecedentes del problema
En la actualidad, la ciencia en conjunto con el desarrollo tecnológico, han dado un giro radical a
la vida del ser humano. Facilitando sus deberes y mejorando en parte su estilo de vida, trabajo y
entretenimiento. Las PC’s (arquitectura von Neumann), las portátiles, los teléfonos celulares
inteligentes, Tablets, weareables, son sin duda aparatos que aunque algunas décadas no existían,
se han vuelto indispensables en la cotidianeidad de las personas.
Pensemos ahora detenidamente en la anatomía humana, nuestro cerebro, nuestro sistema
nervioso cumple la función de manejar nuestra interacción con nuestro entorno. Imagina un
cuerpo humano sin este…lamentablemente no podría realizar ninguna de sus funciones.
Los aparatos electrónicos como los ya mencionados se componen de dos partes fundamentales,
hardware, que son los componentes y piezas físicas de estos y software: “El cerebro y sistema
nervioso” de nuestros gadgets, véase los sistemas operativos, los programas, las apps, etc. La
tecnología avanza a pasos agigantados cada día, cada hora, y por ende se necesita de personas
que ayuden a innovar en este campo, el desarrollo de este software como materia de estudio y
requisito en campo laboral es muy solicitado en estos días y lo seguirá siendo.
La programación es la actividad que permite crear nuevos programas en piezas de software,
existen muchos lenguajes de programación con diferentes aplicaciones en la industria. Y los
aspirantes a ingenieros en sistemas deben tenerla como uno de los pilares fundamentales para su

3. 3
realización como profesionales capaces. Sin mencionar que es de las más amplias en campo de
aplicación y mejor remuneradas.
Podemos notar la importancia de la programación en la carrera de ingeniería en Sistemas
computacionales y el futuro campo laboral analizando el perfil de egreso que el instituto
tecnológico de Villahermosa ofrece para esta carrera.
 Implementa aplicaciones computacionales problemas de diversos contextos, integrando
diferentes tecnologías, plataformas o dispositivos.
 Diseña, desarrolla y aplica modelos computacionales para solucionar problemas, mediante la
selección y uso de herramientas matemáticas.
 Diseña e implementa interfaces para la automatización de sistemas de hardware y desarrollo del
software asociado.
 Coordina y participa en equipos multidisciplinarios para la aplicación de soluciones innovadoras
en diferentes contextos.
 Diseña, implementa y administra bases de datos optimizando los recursos disponibles, conforme
a las normas vigentes de manejo y seguridad de la información.
 Desarrolla y administra software para apoyar la productividad y competitividad de las
organizaciones cumpliendo con estándares de calidad.
 Evalúa tecnologías de hardware para soportar aplicaciones de manera efectiva.
 Detecta áreas de oportunidad empleando una visión empresarial para crear proyectos aplicando
las tecnologías de la información y la comunicación.
 Diseña, configura y administra redes de computadoras para crear soluciones de conectividad en
la organización, aplicando las normas y estándares vigentes (Itvillahermosa.edu.mx.
(2016). ITVillahermosa. [online][Accessed 16 Oct. 2016]).

4. 4
En fechas anteriores, para crear conciencia e intentar acercar a los jóvenes estudiantes de
ingeniería en sistemas, el ITVH realiza el CAMPTI (Campamento de Ciencia y Tecnología) cada
año desde el año 2013. En él se imparten talleres acerca de robótica, programación y sistemas
tecnológicos para así alentar a los alumnos a adentrarse en materias de ese tipo y sobre todo
despertar esa curiosidad que necesita el buen ingeniero de sistemas y desarrollador de software.
Igualmente en el año 2013, se realizó un concurso de programación en lenguaje JAVA,
reuniendo así a alumnos de cada semestre de ingeniería en sistemas para probar sus habilidades e
programación.
No obstante, la institución no ofrece una plataforma propia para que los alumnos aprendan o en
su defecto buscar alternativas donde aprender y profundizar sus conocimientos de programación.
Por sus filosofías y sus planes de estudio, las grandes universidades a nivel mundial como
Harvard, Oxford, el MIT, Berkeley entre otras más tienen, en ingles obviamente, ya desde hace
mucho este tipo de herramientas al alcance de los estudiantes, incluso se piensa en un momento
hacer enlace directo a los cursos de estas instituciones para enriquecer más la plataforma.
(Coursera.org, 2016).
Existen diversas herramientas a las que los estudiantes podrían dar uso eficaz en su aprendizaje
respecto a la programación. Pero o no tienen mucha difusión entre estos, aún no se crea en todos
los alumnos una cultura de autoaprendizaje e indagación propia entre los alumnos; que se
acostumbran a seguir los lineamientos de la clase o del libro y no expanden sus horizontes
intelectuales. En el Instituto Tecnológico de Villahermosa, existe el problema de falta de interés
por parte de los alumnos hacia la programación, y el poco hábito de autoaprendizaje por parte de
estos, casi no se conocen las herramientas que se proporcionan para aprender a programar y se
requiere la necesidad de una plataforma que proporcione sitios y herramientas que propicien el

5. 5
autoaprendizaje y el desarrollo de las habilidades en el manejo de código y elaboración de
software.
1.2 Objetivos de la Investigación
1.2.1 Objetivos generales
o Desarrollar una plataforma web con enlaces a diferentes alternativas y cursos de los
diversos lenguajes de programación dirigida a alumnos de ingeniería en sistemas
computacionales del Instituto Tecnológico de Villahermosa
1.2.2 Objetivos específicos
o Comparar y listar plataformas web de cursos de lenguajes de programación.
o Escoger un modelo de desarrollo (ingeniería de software) para la elaboración de la página
web, adaptable a los requerimientos.
o Diseñar un modelo web aplicable a enlaces a cursos de programación.
o Realizar las pruebas de compatibilidad y usabilidad de nuestra página web informativa.
o Comparar servicios gratuitos de host para la puesta en línea de la página web.

6. 6
1.3 Justificación
La presente investigación pretende primeramente hacer una revisión en relación a las diferentes
plataformas en línea que desarrollan el aprendizaje de los estudiantes respecto a la habilidad de
programación, con el fin de desarrollar una web cuyo fin principal sea ofrecer recomendaciones
y propuestas de sitios, plataformas, cursos, que propicien e impulsen a los alumnos a aprender
por si solos y ampliar sus conocimientos en la materia. Por ejemplo, Fundamentos de
programación, Programación Orientada a Objetos, Estructura de Datos, Diseño Web, etc.
Itvillahermosa.edu.mx. (2016). ITVillahermosa. [Online] [Accessed 16 Oct. 2016].
Esto traería mejores oportunidades para el rendimiento de los alumnos en las materias de
desarrollo de software, al tener a la mano más funciones, cursos y herramientas para poder llevar
a cabo su aprendizaje. La innovación en este tipo de plataformas es indispensable en tiempos
actuales, sobre todo en cuestión de aprendizaje. En definitiva, el impacto que esta plataforma
tendrá hará más fácil aprender a programar; ya que tendrán como herramienta enlaces a cursos
ofrecidos en línea por los mejores sitios y podrán aprender desde la comodidad de su hogar y en
diferentes dispositivos.
Cabe señalar que el autoaprendizaje es un elemento de suma importancia para cada aspirante a
ser profesionista ya que es uno de los pilares del modelo de competencias por el cual se rige el
campo educativo y laboral actualmente. Si los alumnos desarrollan esta habilidad en un futuro
ningún problema de nuestro campo será difícil de resolver, teniendo y sabiendo encontrar las
herramientas indispensables, más su propia curiosidad por saber harán cualquier investigación
aplicada de su parte un éxito.

7. 7
1.4 Preguntas de Investigación.
 ¿Qué lenguajes de programación utilizan más?
 ¿Saben los estudiantes acerca de las aplicaciones tiene la programación en el campo de
trabajo futuro?
 ¿Qué opinan los estudiantes acerca de la utilidad de los sitios en línea para aprender a
programar?
 ¿Conocen plataformas para aprender a programar?
 Opiniones acerca del posible impacto del proyecto
 Estadísticas acerca del uso e interacción de los alumnos respecto a los diferentes
lenguajes de programación
 ¿Cuál son los lenguajes más usados o que requieren más información los estudiantes?
 ¿Cuál es el nivel de conocimientos promedio de programación en los alumnos de ISIC en
el ITVH?
 ¿Cuál es el medio predominante para aprendizaje de programación que los alumnos
utilizan más?
 ¿Es importante para los estudiantes que la información esté disponible y adaptable a
dispositivos móviles?

8. 8
1.5 Hipótesis
La hipótesis planteada es que los estudiantes podrían encontrar más atractivo aprender a
programar en cursos en línea, organizados y clasificados en nuestra plataforma versátil con
contenido de otras plataformas, organizadas por tipo de lenguaje, sitio, curso y nivel de
conocimiento requerido para poder llevar a cabo su autoaprendizaje, ya que la innovación
tecnológica y la globalización puede ser la puerta a brindar un mayor conocimiento por medio de
internet, en otros idiomas y de mejor calidad.

9. 9
1.6 Cronograma de actividades

10. 10
1.7 Presupuesto
Actividad Costo
Recolección de información $20.00
Análisis de información $0.00
Análisis de Requerimientos $0.00
Adquisición de materiales de desarrollo $50.00
Selección de un lenguaje de programación $0.00
Diseño de las pantallas y vistas de la página web $50.00
Codificación del sistema $0.00
Desarrollo del prototipo $0.00
Simulación de la página en servidor local $0.00
Retroalimentación $0.00
Pruebas finales $0.00
Puesta en Línea $300.00
Retroalimentación final y Presentación $0.00
Mensualidad del Pago INTERNET $350.00
Servicio de luz Eléctrica $350.00
Desarrollo $1200.00
TOTAL $2320.00

11. 11
Capítulo 2: Tópicos para el Desarrollo de Software
2.1 Concepto de Software
Desde un punto de vista técnico, son diversos los manuales que determinan la concepción de
software. Así, por ejemplo, recurriendo al diccionario de informática publicado originalmente
por la Oxford University Press (1993) el término software o programa se aplica a aquellos
componentes de un sistema informático que no son tangibles, es decir, que físicamente no se
pueden tocar. Para Freedman (1984) el programa es sencillamente el conjunto de instrucciones
que contiene la computadora, ya sean instrucciones para poner en funcionamiento el propio
sistema informático (software de sistema) o instrucciones concretas dirigidas a programas
particulares del usuario (software específico). En otras palabras, según Sánchez Montoya (1995:
54) el programa supone un “conjunto de [...] pasos que indican a la máquina (hardware) aquello
que debe hacer".
Pensemos por un momento en una computadora ordinaria, esta tiene componentes físicos,
como la pantalla, el teclado, el mouse o pad, el disco duro, memorias RAM; aquellos elementos
físicos tangibles los que denominamos Hardware. Por otra parte el software está conformado por
piezas de código fuente trabajando en conjunto gracias a que fueron compiladas o bien puestas
en conjunción por un servicio, la parte intangible de una computadora.
“En este sentido, MS-DOS, LINUX o el Sistema Operativo Windows, de Microsoft, son
ejemplos de software de sistema, mientras que programas como Power Point, Hot Potatoes o Clic
entran dentro de la categoría de software específico. Los primeros aportan las instrucciones que
la máquina necesita para que el usuario pueda utilizarla en casa o en el centro docente. Por su
parte, una vez puesta en marcha la computadora, Power Point permite hacer presentaciones para

12. 12
clase, mientras que Hot Potatoes o Clic son programas gratuitos de autor, es decir, nos permiten
a los docentes elaborar nuestros propios materiales. La presentación de un concepto concreto, la
elaboración de un documento de autoevaluación, una unidad didáctica o una actividad para el
desarrollo de la motricidad son aplicaciones, por citar algunas, que permiten realizar estos
programas. El docente recurre a ellos porque necesita realizar una tarea concreta. Los programas
informáticos acompañados del adjetivo “educativo” adquieren, como es evidente, un sentido
funcional distinto. La definición que aporta Marqués (1999) se centra en el empleo del
programa informático como medio didáctico, es decir, cómo ayuda al proceso de enseñanza/
aprendizaje. En este sentido, el autor considera que las expresiones programa educativo o
programa didáctico, entiéndanse dentro de un argumento relacionado con la informática, son
sinónimos de software educativo.” (Amorós Poveda, 2001)
El software de computadora es el producto que construyen los programadores profesionales y
al que después le dan mantenimiento durante un largo tiempo. Incluye programas que se ejecutan
en una computadora de cualquier tamaño y arquitectura, contenido que se presenta a medida de
que se ejecutan los programas de cómputo e información descriptiva tanto en una copia dura
como en formatos virtuales que engloban virtualmente a cualesquiera medios electrónicos.
(Pressman, 2010, p.1)
2.2 Clasificacion del Software.
“Se conoce como software al equipamiento lógico o soporte lógico de un sistema informático;
comprende el conjunto de los componentes lógicos necesarios que hacen posible la realización
de tareas específicas, en contraposición a los componentes físicos, que son llamados hardware.

13. 13
Como sinónimo de software también suele usarse el término logical, por influencia del vocablo
francés logicial” (Silva Dávila, 2004).
Desde un punto de vista técnico, son diversos los manuales que determinan la concepción de
software. Así, por ejemplo, recurriendo al diccionario de informática publicado originalmente
por la Oxford University Press (1993) el término software o programa se aplica a aquellos
componentes de un sistema informático que no son tangibles, es decir, que físicamente no se
pueden tocar. Para Freedman (1984) el programa es sencillamente el conjunto de instrucciones
que contiene la computadora, ya sean instrucciones para poner en funcionamiento el propio
sistema informático (software de sistema) o instrucciones concretas dirigidas a programas
particulares del usuario (software específico). En otras palabras, según Sánchez Montoya (1995:
54) el programa supone un “conjunto de [...] pasos que indican a la máquina (hardware) aquello
que debe hacer". Algunos términos sinónimo de programa (traducción de software) son
aplicación informática, dotación lógica informática, equipo lógico informático, componentes
lógicos, logical o logicial.
El software como se menciona antes es la parte lógica de computadora, que permite el manejo de
los recursos y la realizacion de tareas específicas, también denominados programas. Este se
clasifica en Software de Sistemas y de Aplicación.
“El Software de sistemas son los programas que permiten la administración de la parte
física o los recursos de la computadora, es la que interactúa entre el usuario y los componentes
hardware. El Software de aplicación son programas que nos ayudan a tareas específicas como
edición de textos, imágenes, cálculos, etc. también conocidos como aplicaciones. En este grupo
el software se clasifica por su función específica. Ya sean por ser de desarrollo, multimedia,

14. 14
freeware o de uso general; por esa necesidad especifica por la que el usuario los utiliza
(Silberschatz, 2006).
Los dos tipos de software están relacionados entre sí, de modo que los usuarios y los
programadores pueden hacer así un uso eficiente de la computadora. La figura muestra una vista
organizacional de una computadora donde se ven los diferentes tipos de software a modo de
capas de la computadora desde su interior (el hardware) hasta su exterior (usuario).
2.3 Ingeniería de Software.
Definiciones del prólogo a la cuarta edición en español de “Ingeniería del Software: un enfoque
práctico” de Roger Pressman:
Definición 1:  Ingeniería del Software es el estudio de los principios y metodologías para
desarrollo y mantenimiento de sistemas de software. [Zelkovitz, 1978]
Definición 2:  Ingeniería del Software es la aplicación práctica del conocimiento científico en el
diseño y construcción de programas de computadora y la documentación asociada requerida para
desarrollar, operar y mantenerlos. Se conoce también como desarrollo de software o producción
de software. [Bohem, 1976]
Definición 3:  Ingeniería del software trata del establecimiento de los principios y métodos de
la ingeniería a fin de obtener software de modo rentable que sea fiable y trabaje en máquinas
reales. [Bauer, 1972]
Definición 4:  1. La aplicación de un enfoque sistemático, disciplinado y cuantificable al
desarrollo, operación (funcionamiento) y mantenimiento del software; es decir, la aplicación de
ingeniería al software. 2. El estudio de enfoques como en (1) [IEEE, 1993]

15. 15
Definición 5:  Es una disciplina que comprende todos los aspectos de la producción de software
desde las etapas iniciales de la especificación del sistema, hasta el mantenimiento de éste
después de que se utiliza. [Sommerville, 2001]
Aunque cientos de autores han desarrollado definiciones personales de la ingeniería de software,
la propuesta por Fritz Bauer en la conferencia fundamental sobre el tema todavía sirve como
base para el análisis.
[La ingeniería de software es] el establecimiento y uso de principios fundamentales de la
ingeniería con objeto de desarrollar en forma económica software que sea confiable y que trabaje
con eficiencia en máquinas reales. Ingeniería de software es la aplicación práctica del
conocimiento científico al diseño y construcción de programas de computadora y a la
documentación asociada requerida para desarrollar, operar y mantenerlos (Naur & Randall,
1969).
La ingeniería de software es indispensable en el desarrollo de este, ya que proporciona a los
desarrolladores e ingenieros lineamientos oficiales, y estándares de diseño y seguimiento en el
proceso de creación de un nuevo software. “Se conoce también como desarrollo de software o
producción de software” (Bohem, 1976).
2.4 Modelos De Proceso Prescriptivo.
Los modelos de proceso prescriptivo fueron propuestos originalmente para poner orden en el
caos del desarrollo de software. Para servir como reguladores y darle un estándar de control y de
calidad a la creación de programas. Según la 23ª edición del Diccionario de la Lengua Española,
puesto en línea por la RAE, podemos definir como prescripción “prescribir, ordenar, determinar

16. 16
algo en cierto orden” Definición de la palabra “prescriptivo” (s.f.). Recuperado el 6
Noviembre de 2016, de http://dle.rae.es/?id=U5UJqxU.
Estos tipos de modelos son ayudantes nuestros en momentos de querer desarrollar un software,
porque dan un orden predeterminado para realizar las actividades necesarias de manera
cronológica y ordenada, para así, con una planeación y un control, nuestro software tenga lo
necesario para ser eficiente y funcional.
La historia indica que estos modelos tradicionales han dado cierta estructura útil al
trabajo de ingeniería de software y que constituyen un mapa razonablemente eficaz para los
equipos de software. Cada modelo del proceso también prescribe un flujo del proceso (también
llamado flujo de trabajo), es decir, la manera en la que los elementos del proceso se relacionan
entre sí (Pressman, 2010, p.33)
2.4.1 Modelo de la cascada
El modelo de la cascada, a veces llamado ciclo de vida clásico, sugiere un enfoque sistemático y
secuencial para el desarrollo del software, que comienza con la especificación de los
requerimientos por parte del cliente y avanza a través de planeación, modelado, construcción y
despliegue, para concluir con el apoyo del software (véase la figura 1).
Por ser uno de los más antiguos modelos de desarrollo de software tiene sus desventajas,
obviamente en sistemas que requieren una mayor complejidad y uso de recursos para su
elaboración. “El modelo de la cascada es el paradigma más antiguo de la ingeniería de software.
Sin embargo, en las últimas tres décadas, las críticas hechas al modelo han ocasionado que
incluso sus defensores más obstinados cuestionen su eficacia” (Hanna 1995, pp. 38-46).

17. 17
Entre los problemas que en ocasiones surgen al aplicar el modelo de la cascada se encuentran los
siguientes:
1. Es raro que los proyectos reales sigan el flujo secuencial propuesto por el modelo. Aunque el
modelo lineal acepta repeticiones, lo hace en forma indirecta. Como resultado, los cambios
generan confusión conforme el equipo del proyecto avanza
2. A menudo, es difícil para el cliente enunciar en forma explícita todos los requerimientos. El
modelo de la cascada necesita que se haga y tiene dificultades para aceptar la incertidumbre
natural que existe al principio de muchos proyectos
3. El cliente debe tener paciencia. No se dispondrá de una versión funcional del (de los)
programa(s) hasta que el proyecto esté muy avanzado. Un error grande sería desastroso si se
detectara hasta revisar el programa en funcionamiento. (Bradac, Perry & Votta, 1994, p. 774-
784)
Hoy en día, el trabajo de software es acelerado y está sujeto a una corriente sin fin de cambios
(en las características, funciones y contenido de información). El modelo de la cascada suele ser
inapropiado para ese tipo de labor. No obstante, sirve como un modelo de proceso útil en
Figura 1. Descripcióndel flujode funcionamientodel Modelode laCascada.Podemos
observarel flujolinealdel modelodesde lacomunicación,que implicarecabarlosdatosy
requerimientosnecesarioshastael despliegueque eslaetapafinal.Susencillezperoeficacia
sirve para proyectossinungrado de dificultadalta(Pressman,2010, p. 34).

18. 18
situaciones en las que los requerimientos son fijos y el trabajo avanza en forma lineal hacia el
final.
Se necesita seleccionar un modelo para el proceso de desarrollo de software. En este caso, solo
se realizara una página web sencilla en cuanto a backend, será informativa y sin necesidad de
tener implicaciones de un sistema web completo o una webapp. Sera informativa, con enlace a
cursos de programación y clasificación por niveles de dificultad. Por tal, el modelo de cascada
será el ideal para guiar este proceso de desarrollo de software.

19. 19
Capítulo 3: Ámbito Web
3.1 Página Web.
“Una Página Web es un documento electrónico que forma parte de la WWW (World Wide Web)
generalmente construido en el lenguaje HTML (Hyper Text Markup Language o Lenguaje de
Marcado de Hipertexto) ó en XHTML (Extensible Hyper Text Markup Language o Lenguaje de
Marcado de Hipertexto Extensible). Este documento puede contener enlaces (característica del
hypertext) que nos direcciona a otra Página Web cuando se efectúa el click sobre él. Para
visualizar una Página Web es necesario el uso de un Browser o navegador” (Mariño Campos,
2005, p. 4).
Una Página Web puede estar alojada en un ordenador local o en un ordenador remoto. Al
servidor donde esté alojada la Página Web se le denomina Servidor Web. El Servidor Web
atiende las peticiones de Páginas Web utilizando el protocolo HTTP (HyperText Transfer
Protocol); del lado del cliente es el Browser o navegador el que recibe y muestra las Páginas
Web utilizando el mismo protocolo. Otra característica importante es que una Página Web puede
ser estática (su contenido siempre es el mismo) o dinámica (su contenido se construye a partir de
la información introducida por el usuario).
“Una Web es un conjunto de Páginas Web interrelacionadas que conforman lo que se conoce
como un Sitio Web.La WWW o la Web es todo el conjunto de información interrelacionada que
se haya disponible en Internet, ésta se conforma por una serie de servidores a nivel mundial
organizados por dominios (nombres lógicos asociados a instituciones o empresas, otorgados por
empresas registradoras oficiales)” Portal del Emprendedor, Comunidad de Madrid. ¿QUE

20. 20
ES UNA PAGINA WEB? [En línea]. Madrid, España: Comunidad de Madrid [fecha de
consulta: 6 Noviembre de 2016]. Recuperado de: <http://tinyurl.com/guawla4>.
3.2 Hipertexto
El Hypertext o hipertexto, es un mecanismo de comunicación que permite desde un documento
navegar a otro documento. Este mecanismo se realiza insertando un enlace en algún texto del
documento y es una facilidad que provee el lenguaje HTML.
Cuando navegamos en Internet estamos visualizando Páginas Web. A cada Página Web le
corresponde un único URL (Uniform Resource Locator o localizador uniforme de recursos), que
es una secuencia de caracteres que se utilizan para identificar objetos (como documentos e
imágenes) en Internet por su localización, ej: http://www.econta.com/demo/index.html.
(Bruguera & Campas, 2007, p. 45-49).
El URL identifica en que ordenador se encuentra el objeto a mostrar (www.econta.com), bajo
que estructura de directorio (/demo) y finalmente, el nombre específico del objeto (index.html).
Cada enlace que se encuentren en una Página Web contiene una dirección URL, cuando
efectuamos un click sobre cualquiera de estos enlaces se envía un requerimiento para obtener un
documento que se encuentra alojado en un ordenador en alguna parte del mundo y que está
identificado unívocamente por su URL. (Rivera, 2005, p.8-14)
Esto significa que, además de leer linealmente en forma normal, es decir, de atrás hacia adelante,
de izquierda a derecha, de arriba abajo, de la página uno a la cuatrocientos (hasta terminar el
libro), podemos también detenernos en los términos de nuestro interés para obtener mayor
información acerca de los mismos y, una vez en el nuevo texto (imagen, video o audio),
encontrar otro punto sensible y accionarlo para dirigirnos a otra explicación en otro texto, y así

21. 21
sucesivamente. Aquí la lectura ya no es ni secuencial ni lineal, por el contrario, procede a saltos
de acuerdo con los intereses específicos del lector.
“El hipertexto no hubiera sido posible sin el desarrollo de la tecnología informática, no existe
hipertexto sin la tecnología digital y su tratamiento con ordenadores y a este fenómeno
tecnológico se ha sumado el desarrollo de las redes telemáticas” (Lamarca Lapuente ,2007)
El aspecto tecnológico ha sido, pues, un factor decisivo para el desarrollo de este nuevo sistema
de organización y acceso de la información.
3.3 HTML
Una Página Web puede contener cualquiera de los elementos siguientes: Texto, Imágenes,
Audio, Objetos Animados (generalmente construidos con la herramienta Adobe Flash),
hipervínculos (característica que permite la navegación de una página web a otra), Meta tags
(son instrucciones en lenguaje HTML que le indican a los buscadores cuales son las palabras o
términos por los que debe ser indexada una página para ser encontrada), hojas de estilo en
cascada o CSS (Cascading Style Sheets) que permiten separar la presentación de la página de
su estructura. (Hobbs, 1999, p.33-40).

22. 22
El HTML es un lenguaje de programación sencillo, basado en un lenguaje de marcas o
etiquetas generalizado. El HTML utiliza tags o etiquetas para estructurar texto en: encabezado,
párrafos, listas, enlaces de hipertexto, etc. Cada símbolo usado en la etiqueta es lo que le indica
al Browser como presentar el documento contenido en la Página Web.
El inicio de una etiqueta se indica de la forma siguiente: < etiqueta > y para indicar el fin de
esa etiqueta se utiliza < /etiqueta >. La barra indica el fin de la etiqueta.
Figura 2. Elementosbásicosde unapáginaweb. Lasetiquetasde HTML conformanlaestructura
básicade unapágina web,encabezado,titulo,cuerposonlosque moldeanlaformade unarchivo
HTML básico. (Recuperadode http://edutictac.es/moodle/mod/page/view.php?id=671.Fechade
Acceso: 6 de Noviembre del 2016).

23. 23
Todo documento HTML se inicia con la etiqueta <html> que actúa como contenedora de todo el
documento. El documento se divide en un encabezado, que lo identificamos con la etiqueta
<head>, y es la sección utilizada para definir el título del documento, la declaración de estilos,
scripts, etc. La otra sección corresponde al cuerpo que se identifica con la etiqueta <body>. Esta
es la sección que contiene toda la parte visual del documento. Para crear un vínculo dentro de un
documento que referencie o direccione a otro documento se utiliza la etiqueta a seguida de la
palabra clave href donde se colocará la dirección URL del documento a referenciar y el texto que
aparecerá mostrado en el documento, mediante el cual se establecerá el enlace. Ejemplo: <a
href=”/ejemplo.html”> Ir al Ejemplo</a> Esto se visualizara Ir al Ejemplo y al pasar el ratón
sobre el texto se mostrará la mano del cursor que permitirá hacer click para navegar al
documento en cuestión. (Equipo Vértice, 2009, p. 7-10).
3.4 Historia de HTML
En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los
hipervínculos o enlaces (hiperlinks o links) y por otro lado un poderoso lenguaje de etiquetas
denominado SGML. Por entonces, Tim Berners-Lee, quien trabajaba en el Centro Europeo de
Investigaciones Nucleares CERN da a conocer a la prensa que estaba trabajando en un sistema
que permitirá acceder a ficheros en línea que funcionaba sobre redes de computadoras o
máquinas electrónicas basadas en el protocolo TCP/IP. Inicialmente fue desarrollado para que se
pueda compartir fácilmente información entre científicos de distintas universidades e institutos
de investigación de todo el mundo. (Recuperado de http://home.cern/topics/birth-web , Fecha
de Acceso 6 de Noviembre del 2016).
A principios de 1990, define por fin el HTML como un subconjunto del conocido SGML y crea
algo más valioso incluso, el World Wide Web. Tim Berners-Lee creó el proyecto World Wide

24. 24
Web (Tejido o Telaraña Mundial), así como un sistema que facilitaba la lectura de información,
mediante un programa de navegación. Sería el primer navegador web, llamado WorldWideWeb,
y desarrollado durante la segunda mitad del año 1990; siendo tiempo después rebautizado como
Nexus para evitar confusiones por su nombre que era igual al de la tecnología que representaba.
(Recuperado de http://home.cern/topics/birth-web , Fecha de Acceso 6 de Noviembre del
2016).
“Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales
de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera
evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal
de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no
oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un
estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las
especificaciones actuales”(Pressman,2010).
El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995.
Con él se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas,
hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos.
Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser
implementado con la tecnología de la época, y cuando el borrador del estándar expiró en
septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes
de navegadores web.
En 1997, HTML 4.0 se publicó como una recomendación del W3C. HTML 4.0 adoptó muchos
elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo

25. 25
tiempo comenzó a limpiar el HTML señalando algunos de ellos como «desaprobados»
(deprecated, en inglés).
HTML 4.0 implementa características como XForms 1.0 que no necesitan implementar motores
de navegación que eran incompatibles con algunas páginas web HTML. En 2004 la W3C reabrió
el debate de la evolución del HTML, y se dieron a conocer las bases para la versión HTML5. No
obstante, este trabajo fue rechazado por los miembros del W3C y se daría preferencia al
desarrollo del XML. (Tûgeff, 2009)
Apple, Mozilla y Opera anunciaron su interés en seguir trabajando en el proyecto bajo el nombre
de WHATWG,20 que se basa en la compatibilidad con tecnologías anteriores.
En 2006, el W3C se interesó en el desarrollo de HTML5, y en 2007 se unió al grupo de trabajo
del WHATWG para unificar el proyecto” (Recuperado de http://www.w3.org/History/.
Acceso 6 de Noviembre del 2016).
3.5 HTML5
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta
ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones
en una era que combina dispositivos móviles, computación en la nube ytrabajos en red. Todo
comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la
estructura básica de páginas web, organizar su contenido y compartir información. El lenguaje y
la web misma nacieron principalmente con la intención de comunicar información por medio de
texto. El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y
programas para agregar características a la web nunca antes implementadas. (Robins, 2013)

26. 26
Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios.
Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones,
ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre. De las
opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas
y ampliamente consideradas como el futuro de Internet. Sin embargo, tan pronto como el número
de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los
ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones
presentes en estas dos tecnologías probaron ser una sentencia de muerte. (Firtman, 2010).
El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos
fueron concebidos desde el principio como complementos (plug-ins), algo que se inserta dentro
de una estructura pero que comparte con la misma solo espacio en la pantalla. No existía
comunicación e integración alguna entre aplicaciones y documentos. La falta de integración
resultó ser crítica y preparó el camino para la evolución de un lenguaje que comparte espacio en
el documento con HTML y no está afectado por las limitaciones de los plug-ins. Javascript, un
lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la
experiencia de los usuarios y proveer funcionalidad para la web. Sin embargo, después de
algunos años de intentos fallidos para promoverlo y algunos malos usos, el mercado nunca lo
adoptó plenamente y pronto su popularidad declinó. Los detractores tenían buenas razones para
oponerse a su adopción. (Lujan Mora, 2011)
En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o Java. A pesar
de ser evidente que ambos limitaban el alcance de las aplicaciones y aislaban el contenido web,
populares funciones como la reproducción de video se estaban convirtiendo en una parte esencial
de la web y solo eran efectivamente ofrecidas a través de estas tecnologías. A pesar del suceso

27. 27
inicial, el uso de Java comenzó a declinar. La naturaleza compleja del lenguaje, su evolución
lenta y la falta de integración disminuyeron su importancia hasta el punto en el que hoy día no es
más usado en aplicaciones web de importancia. Sin Java, el mercado volcó su atención a Flash.
Pero el hecho de que Flash comparte las mismas características básicas que su competidor en la
web lo hace también susceptible de correr el mismo destino. Mientras esta competencia
silenciosa se llevaba a cabo, el software para acceder a la web continuaba evolucionando. Junto
con nuevas funciones y técnicas rápidas de acceso a la red, los navegadores también mejoraron
gradualmente sus intérpretes JavaScript. Más potencia trajo más oportunidades y este lenguaje
estaba listo para aprovecharlas. (Gauchat, 2011).
En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java o
Flash podrían proveer las herramientas que ellos necesitaban para crear las aplicaciones
demandadas por un número creciente de usuarios. Estos desarrolladores, impulsados por las
mejoras otorgadas por los navegadores, comenzaron a aplicar JavaScript en sus aplicaciones de
un modo nunca visto.

28. 28
3.6 CSS3
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es imprescindible para crear páginas web complejas.
“Separar la definición de los contenidos y la definición de su aspecto presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del
documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes” (La Font, 2007)
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo,
titular, texto destacado, tabla, lista de elementos, etc.
“Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.” (Sánchez del Olmo, 2014)
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el
crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La
guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la
creación de documentos con la misma apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares
relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el

29. 29
lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta
fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
3.6.1.1 JavaScript
JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del
estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo,
débilmente tipado y dinámico.
“Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como
parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas
web dinámicas aunque existe una forma de JavaScript del lado del servidor(Server-side
JavaScrip o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF,
aplicaciones de escritorio (mayoritariamente widgets) es también significativo”. (Bradac, Perry
& Votta, 1994)
Desde el 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1, una
versión de javascript. Los navegadores más antiguos soportan por lo menos ECMAScript. La
sexta edición se liberó en Julio del 2015.5JavaScript se diseñó con una sintaxis similar a C,
aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y
JavaScript tienen semánticas y propósitos diferentes. (Pressman, 2010).
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web.
Para interactuar con una página web se provee al lenguaje JavaScript de una implementación
del Document Object Model (DOM). (Ferguson, 2002).

30. 30
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y
únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente
es ampliamente utilizado para enviar y recibir información del servidor junto con ayuda de otras
tecnologías como AJAX. JavaScript se interpreta en el agente de usuario al mismo tiempo que
las sentencias van descargándose junto con el código HTML.(Croockford,2001)
Desde el lanzamiento en junio de 1997 del estándar ECMAScript 1, han existido las versiones 2,
3 y 5, que es la más usada actualmente (la 4 se abandonó6 ). En junio de 2015 se cerró y publicó
la versión ECMAScript 67 .
3.6.1.2 Framework Web: Bootstrap
Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web
con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del
dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de
una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como
“responsive design” o diseño adaptativo. (Galvan, 2013).
El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se
adapta automáticamente al dispositivo desde donde se acceda. Lo que se usa con más frecuencia,
y que a mi opinión personal me gusta más, es el uso de media queries, que es un módulo de
CSS3 que permite la representación de contenido para adaptarse a condiciones como la
resolución de la pantalla y si trabajás las dimensiones de tu contenido en porcentajes, puedes
tener una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma automática.
Pero si no quieres nada que ver con los media queries, otra muy buena opción es el uso del
framework de Bootstrap, que como te dije te ayudará a desarrollar tus sitios adaptativos.

31. 31
Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear interfaces web, los
diseños creados con Bootstrap son simples, limpios e intuitivos, esto les da agilidad a la hora de
cargar y al adaptarse a otros dispositivos. El Framework trae varios elementos con estilos
predefinidos fáciles de configurar: Botones, Menús desplegables, Formularios incluyendo todos
sus elementos e integración JQuery para ofrecer ventanas y tooltips dinámicos.
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible
con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o
aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de
compatibilidad parcial que hace disponible la información básica de un sitio web para todos los
dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas
redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de
navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida
para su uso. Recuperado de http://getbootstrap.com/ Fecha de Acceso: 15 de Noviembre del
2016.
Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el diseño gráfico de la
página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado
(Computadoras, tabletas, teléfonos móviles).

32. 32
Capítulo 4: Software Necesario
4.1 Herramientas para crear una página web
Para crear una Página Web se recomienda disponer de las herramientas siguientes: Ordenador,
Editor de Texto (Front Page, Dreamweaver, Notepad, Wordpad, etc.), Editor de Archivos
Gráficos (Photoshop, Paint, etc.), espacio en un Servidor Web para alojar la Página y el software
cliente del FTP (File Transfer Protocol) utilizado para enviar al servidor web la Página Web.
Recuperado de http://www.learningweb.com.tugfa Fecha de Acceso 15 de Noviembre del
2016.
Dentro de la gama de los Editores de Texto se pueden utilizar desde los más básicos (Notepad,
Wordpad) los cuales requieren conocimiento experto en HTML, los denominados intermedios
(editplus, gnu emacs) que colorean las palabras claves del código fuente, y los más completos
(Front Page, Dreamweaver) que se caracterizan por presentar el entorno conocido como
WYSIWYG (What You See Is What You Get que significa lo que ves es lo que obtienes). Este
tipo de editores permite la creación de documentos, observando en la pantalla el resultado final
del mismo (no es necesario imprimirlo). Con éste tipo de editores no es imperativo el
conocimiento del lenguaje HTML, ya que el editor genera automáticamente el código HTML
resultante de la creación del documento. El Editor de Archivos Gráficos son herramientas útiles
para generar imágenes, los más completos proveen herramientas para generar botones, texturas,
transparencias y otros efectos gráficos. Recuperado de http://www.node.js Fecha de Acceso
15 de Noviembre del 2016.

33. 33
4.2 Navegadores Web
El navegador web es el vehículo y la principal herramienta de cualquiera que se adentre en el
mundo virtual de internet.
Lógicamente la velocidad, la ligereza a la que te muevas, la seguridad que te pueda dar, hasta
que lugares remotos te pueda llevar, depende en gran parte del navegador que escojas y que tu
decidas utilizar.
Para decidir eso, lo más adecuado entonces es informarte que navegadores están disponibles,
cuáles son sus características, que funciones ofrecen, ver comparaciones entre ellos, conocer sus
ventajas y desventajas, para al final decidirte y hacer tu elección. Facilitar estas opciones al
usuario, es el objetivo de esta página.
Un navegador web es el software o programa que nos permite ver la información que contiene
una página web. Traduce el código HTML en el que está escrita la página y lo muestra en la
pantalla, permitiéndonos interactuar con su contenido y navegar hacia otras páginas o sitios de la
red, mediante enlaces o hipervínculos.
El seguimiento de los enlaces de una página a otra se llama navegación, que es de donde se
origina el nombre de navegador web. El trabajo del diseñador web siempre está limitado por las
posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este
motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más
utilizados del mercado.
Internamente los navegadores están divididos en varios componentes. La parte del navegador
que se encarga de interpretar el código HTML y CSS para mostrar las páginas se denomina
motor. Desde el punto de vista del diseñador CSS, la versión de un motor es mucho más
importante que la versión del propio navegador.

34. 34
Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y
prueba sus códigos en cada programa disponible en el mercado.
4.3 Editor de Texto
Un editor web es el programa o aplicación que utilizamos para construir o crear una página web.
En principio nos puede servir cualquier editor de texto. Es por eso que dedicaremos unas líneas a
los editores de texto.
Un editor de texto es un programa que utilizamos para crear o modificar archivos de texto sin
formato. Es decir podemos escribir y guardar texto pero no podemos darle color ni tamaño ni
ninguna otra propiedad.
Los editores de texto se emplean normalmente para guardar datos, y también en programación y
lenguajes informáticos para crear el código. Es por esto que para crear páginas web nos vale
cualquier editor de textos.
Un editor web es un editor de texto especializado para crear páginas web. En principio podría
bastarnos cualquier editor de texto para crear una página web. y de hecho así podemos hacerlo
por ejemplo con el block de notas de windows.
Sin embargo hay aplicaciones que son editores de texto especializados para crear páginas web.
Se distingue del block de notas de Windows o cualquier otro editor simple en que los editores
web tienen además una serie de funciones que facilitan al diseñador la creación de la página.
Aunque con un editor web podemos crear todo tipo de archivos de texto plano (texto sin
formato), su uso es casi exclusivo para la creación de archivos que utilizamos para la
visualización de páginas web. Es decir nos ayudan a escribir en los códigos HTML y CSS.

35. 35
4.4 Servidor interno (WAMP)
Un servidor WAMP es un PC con Windows que dispone de un servidor Apache, un gestor de
bases de datos MySQL y el lenguaje de programación PHP. Las siglas WAMP son un acrónimo
de Windows + Apache + MySQL + PHP. Al igual que WAMP, también existen los servidores
LAMP que son lo mismo pero en un sistema Linux.
Instalar y configurar un servidor Apache, un servidor MySQL y el lenguaje PHP, así como
configurarlo para que interrelacionen entre ellos y el servidor funcione perfectamente, es una
tarea compleja que solo pueden acometer informáticos profesionales. Para simplificar la tarea de
instalar Apache + PHP + MySQL en Windows y acercar al gran público la posibilidad de
disfrutar de estos servicios, existen los llamados paquetes WAMP que instalan y configuran
automáticamente dichas aplicaciones para Windows y que proporcionan:
 Servidor Web Apache
 Base de datos MySQL
 Lenguaje de programación PHP
 Accesos para el arranque y la parada de los servicios
 Facilidades para la configuración de los servicios
 Otros servicios
Disponer de un Servidor WAMP, nos permitirá instalar aplicaciones web accesibles desde
nuestra red local, y si abrimos el puerto 80 de nuestro router, también serán accesibles desde
Internet. La gran mayoría de las aplicaciones web libres existentes, requieren de Apache +
MySQL + PHP para funcionar

36. 36
4.5 Servicio de Alojamiento Gratuito (Host)
Un alojamiento web gratuito (también conocido como hosting gratis) es un servicio que permite
a los usuarios publicar sitios web de manera gratuita. Al registrarse en un servicio de "hosting
gratis" el usuario normalmente obtiene un panel de control desde el cual podrá administrar el
servicio y una dirección URL desde la cual se podrá acceder al sitio.
Hay una gran variedad de sitios y empresas que brindan servicios de “alojamiento web gratuito”,
cada una de ellas tienen sus particularidades en cuanto al tipo de servicio brindado y las
condiciones del mismo.
Las posibilidades del alojamiento gratuito generalmente están limitadas al comparar los
alojamientos de pago. Eso lleva a que tal alojamiento mayormente conviene para crear los sitios
web personales o sitios sin fines de lucro. Aunque hay servicios que ofrecen el alojamiento
gratuito al nivel del de pago. Eso se explica que se espera que tal proyecto a lo largo de su
desarrollo necesitará los correspondientes servicios de pago.
 Espacio en disco limitado;
 Limitación del tamaño de cada archivo;
 Limitación de los ciertos nombres de archivos. E.g., están prohibidos *.jfif, *.exe etc;
 Dominio sólo de tercer nivel. Últimamente se ofrecen los nombres de dominio de segundo
nivel en las zonas .biz, .info etc.
Para esta ocasión utilizaremos el servidor gratuito Hostinger, creándonos una cuenta gratuita y
subir los archivos de nuestra web para ponerlos en línea.

37. 37
4.6 Cliente Ftp
Un cliente FTP emplea el FTP para conectarse a un servidor FTP para transferir archivos a un
alojamiento.
Algunos clientes de FTP básicos vienen integrados en los sistemas operativos,
incluyendo Windows, DOS, Linux y Unix. Sin embargo, hay disponibles clientes con más
funcionalidades, habitualmente en forma de shareware/freeware para Windows y como software
libre para sistemas de tipo Unix. Muchos navegadores recientes también llevan integrados
clientes FTP (aunque un cliente FTP trabajará mejor para FTP privadas que un navegador).
Algunos sistemas operativos, incluyendo los Windows más recientes y Mac OS X pueden
montar servidores FTP como unidades virtuales directamente dentro del sistema operativo, como
puede ser fireftp para firefox, pues es un plugin que se puede añadir al navegador, solo si se
necesita. Lo que puede resultar más fácil o más conveniente para algunos usuarios, que emplear
un cliente especializado.
Cyberduck para Windows es un software abierto de la fuente que puede conectar con ftp (File
Transfer Protocol), SFTP (SSH aseguran transferencia de archivo), WebDAV (el ser autor
distribuido Tela-basado y Versioning), Amazon S3, el almacenaje de la nube de Google, el azul
de Windows, la nube Files de Rackspace, y Google Docs para distribuir sus archivos. Examinar
y mover los archivos de forma rápida en el navegador con el almacenamiento en caché habilitado
para el mejor rendimiento. Cyberduck soporta la autenticación de clave pública, el teclado
interactivo de autenticación (PAM) y las contraseñas de una sola vez. Para editar los archivos,
una perfecta integración con cualquier aplicación de edición externa hace que sea fácil cambiar
el contenido rápidamente. Cyberduck puede editar cualquier archivo de texto o binario en el
servidor de la aplicación preferida.

38. 38
Capítulo 5 Metodología
5.1 Tipo de Investigación.
“La investigación aplicada busca la generación de conocimiento con aplicación directa a los
problemas de la sociedad o el sector productivo. Esta se basa fundamentalmente en los hallazgos
tecnológicos de la investigación básica, ocupándose del proceso de enlace entre la teoría y el
producto. El presente ensayo presenta una visión sobre los pasos a seguir en el desarrollo de
investigación aplicada, la importancia de la colaboración entre la universidad y la industria en el
proceso de transferencia de tecnología, así como los aspectos relacionados a la protección de la
propiedad intelectual durante este proceso” CIENCIAMÉRICA, N° 3, diciembre 2014, pp (34-
39).
La investigación aplicada tiene por objetivo la generación de conocimiento con aplicación
directa y a mediano plazo en la sociedad. Este tipo de estudios presenta un gran valor agregado
por la utilización del conocimiento que proviene de la investigación básica. No obstante, la
orientación de este tipo de investigación, tal como lo reseñó el científico Keit Satanovich (2007)
el principal objetivo de la Investigación Científica Aplicada es “predecir el comportamiento
específico” de una determinada configuración, a fin de poner en práctica el conocimiento teórico
y ser capaz de proyectarlo e idear la mejor forma de aplicarlo a la vida real, en aras de mejorar el
bienestar humano, a través de productos útiles, hechos en base a sistemas.

39. 39
5.2Población Y Muestra.
Alumnos de Ingeniería en Sistemas Computacionales. Clasificación Por semestre. ITVH.
Para las muestras se considera una población de 582 estudiantes
Margen de Error: 10% Nivel de Confianza 95%
Semestre Alumnos Muestras
1º 113 53
2º 10 10
3º 87 46
4º 9 9
5º 85 46
6º 16 14
7º 73 42
8º 33 25
9º 84 46
10º 32 25
11º 28 22
12º 12 11
TOTALES 582 348

40. 40
5.3Instrumento
Instituto Tecnológico de Villahermosa
Ingeniería en Sistemas
Taller de Investigación II
Introducción: Esta encuesta es aplicada para conocer ciertos aspectos en cuanto a
aprendizaje de programación en la carrera de Ingeniería en Sistemas en los alumnos del
ITVH. Para la materia de Taller De Investigación.
Instrucciones: Indica tu semestre. A continuación se te presentan preguntas que debes
responder subrayando la respuesta que se adecue a tu persona.
Semestre: _______________
1. De acuerdo a las siguientes opciones, ¿Cómo calificarías tu nivel de conocimientos
acerca del área de programación?
a) Nulo b) Básicos c)Intermedios d)Avanzados
2. De los siguientes lenguajes de programación, ¿Cuáles utilizas más o aplicas más en
clases
a) Java b) C/C++/C# c)Visual Basic d)Otro (Especifique):_______
3. Personalmente, ¿Te gusta programar? ¿Por qué?
a) Si b) No
______________________________________________________________________________
________________________________________________
4. De los siguientes lenguajes de programación, ¿Cuál te gusta usar más?
a) Java b) C/C++/C# c) Visual Basic d) Otro (Especifique):______
5. ¿Sabes que aplicaciones tiene la programación en el campo de trabajo de la Ingeniería en
Sistemas Computacionales?
a) Si b) No

41. 41
Menciona 2 aplicaciones:
______________________________________________________________________________
________________________________________________
6. ¿De qué manera aprendiste a programar? (Puede seleccionar más de una opción)
a) En clases b) Mediante Libros c) Cursos en Línea d)Por mi cuenta
7. ¿Has utilizado alguna vez un sitio en línea que te brinde herramientas para aprender a
programar?
a) Si b) No
Especifica cual:______________________________________________
8. Crees que los sitios en línea que ofrecen cursos y herramientas para aprender a programar
son:
a) Poco Útiles b) Útiles c) Muy Útiles
9. ¿Te gustaría que existiera un sitio que enlazara a cursos en línea de programación,
clasificándolos por lenguaje y dificultad?
a) Si b)No
¿Por qué?:
________________________________________________________________________
__________________________________________
10.¿Te gustaría que una plataforma de ese tipo fuera adaptable a dispositivos móviles?
a) Si b)No
Link de la Encuesta en Línea: http://tinyurl.com/CodeTec1
Se utilizó la tecnología de Google Forms, para no realizar el proceso de encuestado de la manera
clásica por cuestiones de practicidad.

42. 42
5.4 Análisis de Resultados
1. De acuerdo a las siguientes opciones, ¿Cómo calificarías tu nivel de
conocimientos acerca del área de programación?
Porcentaje Cantidad
Nulos 5.50% 19
Básicos 37.50% 131
Intermedios 38.90% 135
Avanzados 18.10% 63
100.00% 348
La primera pregunta de nuestra encuesta fue “¿Cómo calificarías tu nivel de conocimientos
acerca del área de programación?” se realizó esta a los alumnos encuestados para saber el
concepto de sí mismo actualmente en cuanto a habilidades de programación. Los resultados
fueron que un 39% considera que su nivel de conocimientos de programación son Intermedios,
5%
38%
39%
18%
Pregunta#1
Nulos Basicos Intermedios Avanzados
¿Cómo calificarías tu nivel de conocimientos acerca
del área de programación?

43. 43
seguido por los que lo consideran Básico. 18% se considera en un nivel avanzado y solo un %5
con conocimientos Nulos.
2. De los siguientes lenguajes de programación, ¿Cuáles utilizas más o aplicas más
en clases?
Porcentaje Cantidad
Java 61.20% 213
C/C++/C# 12.80% 45
Visual Basic 8.00% 28
PHP 11.60% 40
Otros 6.40% 22
100.00% 348
Para obtener una noción de los lenguajes de programación que los estudiantes utilizan y aplican
más en sus clases regulares, impartidas por profesores específicos, se realizó la pregunta: “De los
siguientes lenguajes de programación, ¿Cuáles utilizas más o aplicas más en clases?” y como
resultado, el 61% indico que JAVA es el más usado y aplicado en clases. El lenguaje C y sus
61%13%
8%
12%
6%
Pregunta #2
Java C/C++/C# Visual Basic PHP Otros
De los siguientes lenguajes de programación, ¿Cuáles
utilizas más o aplicas más en clases?

44. 44
variaciones a pesar de que es bien sabido que son más rápidos que Java por trabajar directamente
con el sistema operativo obtuvo un 13% en cuento a uso, seguido de PHP, lenguaje utilizado para
aspectos web. Visual Basic un lenguaje de mayor nivel de abstracción que C, obtuvo un 8%
dejando el 6% restante para otros lenguajes.
En la pregunta #3 hacemos énfasis en el gusto personal de cada estudiante por la programación,
y damos cuenta que al responder la pregunta: “Personalmente, ¿Te gusta programar?” que el
3. Personalmente, ¿Te gusta programar?
Porcentaje Cantidad
Si 67% 234
No 10% 35
Más o Menos 23% 80
100.00% 348
67%
10%
23%
Pregunta #3
Si No Mas o Menos
Personalmente, ¿Te gusta programar?

45. 45
67% afirma tener el gusto, el 23% se encuentra indeciso, eligiendo la opción Más o menos. Y un
10% respondió que no les gusta la actividad de programar.
4. De los siguientes lenguajes de programación, ¿Cuáles te gusta usar más?
Porcentaje Cantidad
Java 50.20% 175
C/C++/C# 19.00% 66
Visual Basic 8.80% 31
PHP 16.10% 56
Otro 5.90% 21
100.00% 348
Siguiendo la línea de los gustos personales de los estudiantes, se pregunta, De los siguientes
lenguajes de programación, ¿Cuáles te gusta usar más?, y de nuevo, JAVA se lleva el primer
puesto con el 50% de los votos, seguido por C y sus variantes con el 19%, PHP con el 16%,
50%
19%
9%
16%
6%
Pregunta #4
Java C/C++/C# Visual Basic PHP Otro
De los siguientes lenguajes de programación, ¿Cuáles
te gusta usar más?

46. 46
Visual Basic con el 9% y el restante 6% para otros lenguajes. Al parecer el lenguaje que más se
ha usado en clases, es por el que más se ha adquirido gusto propio.
5. ¿Sabes que aplicaciones tiene la programación en el
campo de trabajo de tu carrera?
Porcentaje Cantidad
Si 78.30% 272
No 21.70% 76
100.00% 348
Intentando saber si los estudiantes conocen la importancia de la programación en el campo de
trabajo, se realiza la pregunta ¿Sabes que aplicaciones tiene la programación en el campo de
trabajo de tu carrera?, a la cual 78% respondió que efectivamente saben de alguna aplicación y
el 22% respondió que aún no tienen conocimiento acerca del tema.
78%
22%
Pregunta #5
Si No
¿Sabes que aplicaciones tiene la programación
en el campo de trabajo de tu carrera?

47. 47
6. ¿De qué manera aprendiste a programar?
Porcentaje Cantidad
En clases 45.60% 159
Mediante libros 18.10% 63
Cursos en Línea 26.50% 92
Terceros 9.80% 34
100.00% 348
Encaminándonos en las formas y medios de aprendizaje utilizados para desarrollar habilidades
en la programación, se preguntó directamente a los encuestados ¿De qué manera aprendiste a
programar? Como se esperaba, con un 60% de encuestados a su favor, la opción de aprendizaje
en clases predominó, seguido de los cursos en línea con un buen 26% de las encuestas. Con un
18% los libros demostraron seguir siendo una opción de aprendizaje y con 10% la opción de
aprendizaje con terceros fue parte de los resultados.
46%
18%
26%
10%
Pregunta #6
En clases Mediante libros Cursos en Linea Terceros
¿De qué manera aprendiste a programar?

48. 48
7. ¿Has utilizado alguna vez un sitio en línea que te brinde herramientas para aprender a
programar?
Porcentaje Cantidad
Si 60.30% 210
No 39.70% 138
100.00% 348
Tomando en cuenta medios de aprendizaje, específicamente herramientas en línea en la pregunta
6, en esta pregunta “¿Has utilizado alguna vez un sitio en línea que te brinde herramientas para
aprender a programar?” hacemos énfasis en cursos en línea, siendo utilizados por los estudiantes
para aprender o retroalimentar sus conocimientos en el área de programación. Un 60% de los
encuestados, respondió que efectivamente ha utilizado alguna vez un sitio en línea para aprender
o responder dudas acerca de programación. Y un 40% respondió que aún no ha probado sitios de
aprendizaje en línea.
60%
40%
Pregunta #7
Si No
¿Has utilizado alguna vez un sitio en línea que te brinde
herramientas para aprender a programar?

49. 49
8. ¿Crees que los sitios en línea que ofrecen cursos y herramientas para aprender a
programar son?
Porcentaje Cantidad
Poco Útiles 7.40% 26
Útiles 42.60% 148
Muy Útiles 50% 174
100.00% 348
Se requirió conocer la opinión específica de los encuestados acerca de lo que pensaban acerca
sitios en línea para aprender a programar utilizando la escala desde poco a muy útiles. El 50% de
los encuestados los eligió como recursos muy útiles. El 43% como útiles y 7% indicó que los
sitios en línea no son útiles para ellos. Pero el contraste se encuentra ahí, 93% en el rango de útil
y 7% en el de no útil. Las estadísticas hablan por sí solas.
7%
43%
50%
Pregunta #8
Poco Utiles Utiles Muy Utiles
¿Crees que los sitios en línea que ofrecen cursos
y herramientas para aprender a programar son?

50. 50
La pregunta fundamental. La opinión de los encuestados acerca de la existencia y desarrollo de
una plataforma que enlace a los principales cursos de programación en línea. El 90% dijo que si
seria de su agrado una plataforma así. Y el 10% negó desear que una página web de ese tipo
exista. Excelente señal para la puesta en marcha de la plataforma. Con 90% de la aprobación de
los encuestados en la muestra, se ve favorable el desarrollo de la página.
90%
10%
Pregunta #9
Si No
9. ¿Te gustaría que existiera un sitio que enlazara a cursos en línea de programación de
manera ordenada, facilitando su acceso?
Porcentaje Cantidad
Si 89.70% 312
No 10.30% 36
100.00% 348
¿Te gustaría que existiera un sitio que enlazara a cursos en
línea de programación de manera ordenada, facilitando su
acceso?

51. 51
10. ¿Te gustaría que una plataforma de ese tipo fuera adaptable a dispositivos móviles?
Porcentaje Cantidad
Si 94.10% 327
No 5.90% 21
100.00% 348
¿Te gustaría que una plataforma de ese tipo fuera adaptable a dispositivos móviles? Fue la
décima pregunta realizada en nuestra encuesta, con el propósito de que en caso de procederse a
desarrollar la página web, conocer si se está de acuerdo con que sea adaptable a dispositivos
móviles, véase diseño responsivo compatible con dispositivos diversos. 94% de los encuestados
dijeron que si les gustaría, mientras un 6% dijo que no. La diferencia hace énfasis. La web será
compatible con dispositivos móviles.
94%
6%
Pregunta #10
Si No
¿Te gustaría que una plataforma de ese tipo fuera adaptable a
dispositivos móviles?

52. 52
5.5Diagrama de Proceso
Metodología en
Cascada
Comunicación
Planeación
Modelado
Construcción
Despliegue
Inicio del Proyecto & Recabar requerimientos
Estimación, programación y seguimiento
Análisis y Diseño del software
Código del programa y pruebas
Entrega, Asistencia, Retroalimentación

53. 53
5.6Procedimiento
Desarrollar un software significa construirlo simplemente mediante su descripción. Está es una
muy buena razón para considerar la actividad de desarrollo de software como una ingeniería. En
un nivel más general, la relación existente entre un software y su entorno es clara ya que el
software es introducido en el mundo a modo de provocar ciertos efectos en el mismo. Basados
en la información recopilada en nuestras encuestas y apoyándonos del Modelo de Cascada
damos inicio al proceso del desarrollo de la página web Código Tecnológico.
En el contexto de la ingeniería de software, un proceso no es una prescripción de cómo elaborar
software de cómputo. Por el contrario, es un enfoque adaptable que permite que las personas que
hacen el trabajo (el equipo de software) busquen y elijan el conjunto apropiado de acciones y
tareas para el trabajo. Se busca siempre entregar el software en forma oportuna y con calidad
suficiente para satisfacer a quienes patrocinaron su creación y a aquellos que lo usarán.
Incluyen un conjunto amplio de tareas, como comunicación, análisis de los requerimientos,
Modelación del diseño, construcción del programa, pruebas y apoyo. Los métodos de la
ingeniería de software se basan en un conjunto de principios fundamentales que gobiernan cada
área de la tecnología e incluyen actividades de modelación y otras técnicas descriptivas.
El modelo en cascada, uno de los primeros modelos de desarrollo de software que considera las
diferentes actividades como fases separadas de tal forma que para iniciar una nueva actividad
debe esperarse a la finalización de la actividad anterior. El resultado de cada etapa es uno o más
documentos aprobados.

54. 54
5.6.1 Comunicación
Antes de que comience cualquier trabajo técnico, tiene importancia crítica comunicarse y
colaborar con el cliente (y con otros participantes). Se busca entender las necesidades de los
participantes respecto del proyecto, y reunir los requerimientos que ayuden a definir las
características y funciones del software.
Se tiene la iniciativa de implementar un prototipo de página web responsiva, amigable e
intuitiva a su uso, que englobe dentro de sí misma enlaces a sitios o a plataformas que ofrezcan
cursos, herramientas, ejercicios que sirvan para el aprendizaje y mejora de habilidades en cuanto
a la rama de programación en sus diversos lenguajes.
El sistema no será interactivo por el momento, es decir no tendrá contenido propio realizado para
aprender a programar, por limitaciones de tiempo y demás recursos.
Se requiere que la página tenga un diseño responsivo, adaptable a dispositivos móviles. El sitio
debe contar con un catálogo de cursos en línea de programación enlazando a plataformas
especializadas para que sea más sencillo encontrar información para los estudiantes que la
requieran.
Debe tener enlaces a cursos de programación, especialmente de lenguajes como Java, Lenguaje
C y sus variantes, junto con Visual Basic y PHP; ya que son estos los más utilizados en clase.

55. 55
5.6.2 Planeación
Un proyecto de software es un viaje difícil, y la actividad de planeación crea un “mapa” que guía al equipo. El mapa llamado plan del
proyecto de software define el trabajo de ingeniería de software al describir las tareas técnicas por realizar, los riesgos probables, los
recursos que se requieren, los productos del trabajo que se obtendrán y una programación de las actividades.

56. 56
5.6.3 Modelado
Se utilizaran las siguientes tecnologías para desarrollo de nuestra página web, en primera
instancia un bosquejo de esta.
 HTML 5
 Css 3
 JavaScript
 Framework Bootstrap
 Hostinger (servidor en línea)
 Wamp (servidor local)
 Editor de Texto
 CyberDuck (carga de archivos a la web)
Todo eso para ir integrando las siguientes secciones:
 Índex o página principal: Donde se planea que vaya el logotipo de la página junto con un
lema y los enlaces a los demás apartados. Es la presentación del trabajo.
 Retroalimentación: Apartado con una encuesta que los usuarios responderán
opcionalmente.
 Catálogo de Sitios: Enlaces clasificados a los cursos de programación de páginas web en
línea.
Sera una página web informativa, así que no tendremos que contar con programación web
avanzada para el desarrollo. Solo los conceptos básicos y algo de nociones de diseño responsivo.

57. 57
5.6.4 Construcción
Para codificar nuestra página web seguimos el modelo anterior propuesto y aplicado. Utilizando
nuestro editor de código, se fueron programando cada una de las entidades que llevaría nuestra
página.
Donde Index es la página principal, y se divide en las secciones de catálogo de sitios y de
lenguajes, clasificados en dificultad para que sean accesados a preferencia de los usuarios de la
web

58. 58
En carpetas se organizaron los archivos CSS, JavaScript, de Fuentes personalizadas para la
página y propias del framework Bootstrap, que fue el molde donde fueron forjados los
componentes que hacen funcionales a nuestra página. Juntos con los archivos .html de la vista
principal y de la encuesta.
Las pruebas virtuales fueron hechas usando Wamp server, simulando un host dentro de la propia
pc, gracias al servicio APACHE con el que cuenta.

59. 59
5.6.5 Despliegue
Una vez tenida nuestra página web completa y sólida se procede a utilizar nuestro cliente FTP y
nuestro Host gratuito para subirla a la web y hacerla funcional.
a) Host Gratuito

60. 60

61. 61

62. 62
b) Servicio FTP
Una vez creado nuestro espacio en la nube, en nuestro host; procedemos a subir los archivos.
Solo debemos loggearnos en CyberDuck con nuestra cuenta de Hostinger y empezar la
trasferencia,
Cargamos los archivos y los podremos ver en la web como en nuestro escritorio

63. 63
Referencias
Silberschatz, Abraham (2006). Sistemas Operativos. México. ISBN: 968-18-6168-X.
Naur, P. y B. Randall (eds.), Software Engineering: A Report on a Conference Sponsored by the
NATO Science Committee, NATO, 1969.
Hanna, M., “Farewell to Waterfalls”, Software Magazine, mayo 1995, pp. 38-46.
Bradac, M., D. Perry y L. Votta, “Prototyping a Process Monitoring Experiment”, IEEE Trans.
Software Engineering, vol. 20, núm. 10, octubre 1994, pp. 774-784.

64. 64