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 Y Muestra........................................................................................................ 39

5.3 Instrumento .................................................................................................................. 40

Análisis de Resultados..................................................................................................................... 42

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

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

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

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

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

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

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

1.6 Cronograma de actividades

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

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

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

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

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

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

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

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ón del flujo de funcionamiento del Modelo de la Cascada. Podemos

observar el flujo lineal del modelo desde la comunicación, que implica recabar los datos y

requerimientos necesarios hasta el despliegue que es la etapa final. Su sencillez pero eficacia

sirve para proyectos sin un grado de dificultad alta (Pressman, 2010, p. 34).

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

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

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

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

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. Elementos básicos de una página web. Las etiquetas de HTML conforman la estructura

básica de una página web, encabezado, titulo, cuerpo son los que moldean la forma de un archivo

HTML básico. (Recuperado de http://edutictac.es/moodle/mod/page/view.php?id=671. Fecha de Acceso: 6 de Noviembre del 2016).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.2 Població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

5.3 Instrumento

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

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

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

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

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

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

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

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

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

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

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

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

5.5 Diagrama 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

5.6 Procedimiento

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

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

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

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

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

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

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

61

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

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