Desarrollo de aplicaciones web a la medida publitell

(1)

DESARROLLO DE APLICACIONES WEB A LA MEDIDA PUBLITELL

JENNIFER ELIANA CORREA USSA

UNIVERSIDAD SANTO TOMAS FACULTAD DE INGENIERÍA DE SISTEMAS

(2)

DESARROLLO DE APLICACIONES WEB A LA MEDIDA PUBLITELL

JENNIFER ELIANA CORREA USSA COD: 2103803

Informe de pasantía

Asesor:

JORGE GABRIEL HOYOS PINEDA Ingeniero de Sistemas

UNIVERSIDAD SANTO TOMAS FACULTAD DE INGENIERÍA DE SISTEMAS

(3)

AGRADECIMIENTOS

(4)

DEDICATORIA

Mi trabajo de grado lo dedico a Dios por permitir culminar una meta muy importante en mi vida y estar presente siempre en cada uno de las metas que me propongo. A mis padres Gloria Ussa y Milton Correa, por estar siempre apoyándome en los momentos buenos y en los difíciles y agradecerles por hacer de mí la persona que soy hoy en día. A mi hermana Diana Correa Ussa, gracias por estar siempre presente y por ser mi amiga. A todos y cada uno de los miembros de mi familia que aportaron una semillita para que el día pueda culminar y dar comienzo a una nueva etapa de mi vida.

A cada uno de mis compañeros que estuvieron siempre apoyándome en los buenos y malos momentos y a cada docente que me tuvo paciencia en cada clase.

(5)

RESUMEN

Este documento es el informe final del trabajo de grado, en la modalidad de pasantía, requisito para obtener el título de Ingeniero de Sistemas de la Universidad Santo Tomas, la pasantía, realizada en la empresa Publitell.

El objetivo principal de la pasantía, fue desarrollar páginas web las cuales son cargadas en un servidor real y para empresas reales, en la empresa Publitell, haciendo uso de las herramientas WEB ;cada uno de los proyectos realizados tuvo un enfoque de marketing digital, por tanto debe ser llamativo y esto se obtiene con un trabajo colaborativo en conjunto con la diseñadora gráfica para lograr entregarle al usuario final un producto agradable y de fácil navegabilidad en el cual pueda ser expresado los productos y/o servicios que ofrece la entidad.

Los proyectos realizados durante el transcurso de la pasantía se enfocan básicamente en la metodología establecida por la empresa, la cual se explica a continuación:

Establecimiento de requerimientos con el usuario; el departamento de diseño realiza dos propuestas las cuales son enviadas al usuario; aprobación por parte del usuario; entrega de diseño al departamento de desarrollo; el departamento de desarrollo plasma en modo web el diseño entregado por parte del departamento de diseño; finalmente se carga al servidor el producto final y se llama al cliente para que dé su aprobación.

En el presente documento se explican las herramientas usadas durante el transcurso de la pasantía, y una descripción detallada de procesos y pasos realizados para concluir los proyectos pactados.

(6)

Tabla de contenido

1. INTRODUCCIÓN ... 11

2. TÍTULO ... 12

3. TEMA ... 13

3.1 ALCANCES ... 13

3.2. DELIMITACIONES ... 13

4. PLANTEAMIENTO DEL PROBLEMA ... 14

4.1 DESCRIPCIÓN DEL PROBLEMA... 14

4.2 OBJETIVOS DEL PROYECTO ... 14

4.2.1 Objetivo general. ... 14

4.2.2 Objetivos específicos. ... 14

5. MARCOS DE REFERENCIA ... 15

5.1 MARCO TEÓRICO... 15

5.1.1 Frameworks de desarrollo ... 15

5.1.2 Marketing online. ... 15

5.1.3 Html 5. . ... 16

5.1.4 Css3. ... 17

5.1.5 Php.. ... 18

5.1.6 Sublime text ... 19

5.1.7 Wordpress. ... 19

5.1.8 Joomla.. ... 20

5.2 MARCO CONCEPTUAL ... 21

5.2.1 Metodologías de desarrollo. ... 21

5.2.2 Arquitectura de tres capas. ... 22

5.3 ESTADO DEL ARTE ... 23

5.4 MARCO LEGAL ... 24

5.4.1 Legislación sobre aplicaciones web ... 24

5.4.2 Propiedad intelectual ... 24

5.4.3 Normas aplicables a las metodologías de desarrollo. ... 25

6. DISEÑO METODOLÓGICO ... 26

6.1 TIPO DE INVESTIGACIÓN ... 26

6.2 FUENTES ... 26

6.2.1 Fuentes primarias. ... 26

6.3 INSTRUMENTOS... 26

6.4 METODOLOGÍA DE LA INVESTIGACIÓN ... 27

6.4.1 Fases de un proyecto en publitell. ... 27

(7)

7.1 INSTRUMENTOS UTILIZADOS ... 28

7.1.1 Adobe illustrator Adobe Illustrator. ... 29

7.1.2 Joomla. ... 29

7.1.3 Sublime text. ... 29

7.1.4 Opencart. ... 30

8. RESULTADOS ... 31

8.1 AUTOFIBRAS TUNJA ... 31

8.2 PROTEISALES ... 36

8.3 ICOPORES Y ALUMINIOS DEL META ... 43

8.4 SEDUXION VILLAVO ... 50

8.5 MOTOCROSS DEL ORIENTE ... 52

8.6 CONSEJO PROFESIONAL DE INGENIERÍA DE TRANSPORTES Y VÍAS DE COLOMBIA: ... 58

8.7 HOTEL DANARAMA ... 61

8.8 SEGURIDAD ESTELAR ... 65

8.9 DOCTOR JIMMER ... 70

(8)

TABLA DE ILUSTRACIONES

Figura 1.Frameworks de desarrollo ... 15

Figura 2.Marketing online ... 16

Figura 3.HTML 5 ... 17

Figura 4. CSS3 ... 18

Figura 5.Php. ... 18

Figura 6. Sublime text ... 19

Figura 7.wordpress ... 20

Figura 8.joomla ... 20

Figura 9. metodologías de desarrollo. ... 21

Figura 10. Arquitectura de tres capas ... 23

Figura 11. Imagen de archivo .ai suministrado, diseño de Autofibras Tunja. ... 31

Figura 12. Menú de navegación con su respectivo efecto ... 31

Figura 13. Maquetación de menú de navegación en HTML5 ... 32

Figura 14. Estilos para menú de navegación ... 32

Figura 15. Efecto del menú de navegación al pasar el puntero del mouse ... 33

Figura 16 Resultado módulo de información de productos ... 34

Figura 17 .Resultado final de footer de la página web ... 35

Figura 18. Menú de navegación y slider inicio... 35

Figura 19. Página Quienes somos ... 36

Figura 20. Diseño de Proteisales suministrado por el departamento de diseño 37 Figura 21. Página principal del sistema de gestión. ... 38

Figura 22. Administrador de módulos de la plantilla. ... 38

Figura 23. Ejemplo de filtro de módulos en Joomla productos y servicios. ... 39

Figura 24. Nuevo Diseño de Proteisales suministrado por el departamento de diseño ... 40

Figura 25. Página principal del sistema de gestión ... 41

Figura 26. Administrador de módulos de la plantilla. ... 41

Figura 27. Ejemplo de filtro de módulos en Joomla productos y servicios. ... 42

Figura 28. Animación home... 42

Figura 29. Animación Funciones y beneficios ... 43

Figura 30. Script ... 43

Figura 31. Imagen de archivo .ai suministrado, diseño de Icopores y aluminios del meta... 44

Figura 36. Resultado módulo de información de productos ... 47

Figura 37. Resultado final de footer de la página web ... 47

Figura 39. Página Nosotros ... 48

Figura 40. Página servicios cielos rasos en PVC ... 48

Figura 41. Página servicios cielos rasos en icopor y servicios en aluminio ... 49

Figura 42. Página servicios cocinas integrales y Footer ... 49

Figura 43. Página servicios cocinas integrales y Footer ... 50

Figura 44. Imagen de archivo .ai suministrado, diseño de seduxionvillavo. ... 50

Figura 45. Plantilla Fashion Street ... 51

(9)

Figura 47. Ejemplo de algunos productos con su descripción y precio ... 52

Figura 48. Módulo de administración de opencart ... 52

Figura 49. Imagen de archivo .ai suministrado, diseño de Motocross del oriente. ... 53

Figura 50 Menú de navegación con su respectivo efecto ... 53

Figura 51. Maquetación de menú de navegación en joomla ... 54

Figura 54. Resultado módulo de información de la moto ... 56

Figura 57 Página nosotros ... 57

Figura 58. Página contacto y ubicación ... 58

Figura 59. Diseño de Consejo profesional de ingeniería de transportes y vías de Colombia ... 59

Figura 60. Gestor de módulos. ... 59

Figura 61. Ubicación –contáctenos ... 60

Figura 62. Resultado final... 60

Figura 63 Imagen de archivo .ai suministrado, diseño de Hotel danarama. ... 61

Figura 67 Efecto del menú de navegación al pasar el puntero del mouse ... 63

Figura 68. Resultado módulo de información de servicios ... 63

Figura 71. Página Quienes somos ... 65

Figura 72. Imagen de archivo .ai suministrado, diseño seguridad estelar ... 66

Figura 77. Resultado módulo de información de servicios ... 68

Figura 79.Menú y banner página principal ... 69

Figura 80.resultado final pestaña nosotros ... 70

Figura 81. Imagen de archivo .ai suministrado, diseño Dr. Jimmer Hernández. ... 70

Figura 86. Resultado módulo de información de procedimientos ... 73

Figura 87. Inicio ... 73

(10)

LISTA DE TABLAS

(11)

11

1. INTRODUCCIÓN

En el presente documento final del trabajo de grado, en la modalidad de pasantía, Requisito para obtener el título de Ingeniero de Sistemas de la Universidad Santo Tomas, se presentan las evidencias correspondientes al trabajo realizado durante el período comprendido desde el 1 de septiembre de 2014 hasta el 30 de enero de 2015, se realiza una descripción detallada de las actividades realizadas en cada uno de los proyectos que fueron elaborados.

En la actualidad se observa que la publicidad hace parte de los nuevos medios masivo de comunicación que usualmente es usado por empresas para poder promocionar sus servicios. Publitell como empresa de publicaciones telefónicas, publicidad y tecnología ofrece con el departamento de web Factory la creación de aplicaciones web para diferentes empresas, las cuales son presentadas a los usuarios con un alto grado de calidad y presentándolas para diferentes dispositivos móviles si es el caso que el usuario haya adquirido el plan responsive.

Por medio del desarrollo de aplicaciones web se plantea que el cliente maneje un marketing online dependiendo los servicios que se ofrecen por parte de su empresa, ayudándole a lograr los objetivos del negocio y brindándoles un posicionamiento en la web.

(12)

12

2. TÍTULO

(13)

13

3. TEMA

En la actualidad se observa que la publicidad hace parte de los nuevos medios masivo de comunicación que usualmente es usado por empresas para poder promocionar sus servicios. Publitell como empresa de publicaciones telefónicas, publicidad y tecnología ofrece con el departamento de web Factory la creación de aplicaciones web para diferentes empresas, las cuales son presentadas a los usuarios con un alto grado de calidad y presentándolas para diferentes dispositivos móviles si es el caso que el usuario haya adquirido el plan responsive.

El marketing online es la aplicación de tecnologías digitales que forman canales online para contribuir a las actividades de marketing dirigidas a lograr la adquisición y retención rentable de consumidores.

Lo que se busca con el marketing online es un sistema para vender productos y servicios a un público seleccionado que utiliza Internet y los servicios comerciales en línea mediante herramientas y servicios de forma estratégica y congruente con el programa general de Marketing de la empresa.

Por medio del desarrollo de aplicaciones web se plantea que el cliente maneje un marketing online dependiendo los servicios que se ofrecen por parte de su empresa, ayudándole a lograr los objetivos del negocio y brindándoles un posicionamiento en la web.

3.1 ALCANCES

Aportar los conocimientos adquiridos a lo largo de mi experiencia universitaria para dar soluciones apropiadas al desarrollo de las aplicaciones web que sean desarrolladas durante el transcurso de la pasantía en la empresa Publitell.

Las aplicaciones que se desarrollaran durante el transcurso de la pasantía serán de tipo web utilizando herramientas como: HTML 5, css3, joomla, wordpress. El proceso para empezar el desarrollo comienza con el departamento de diseño en el cual se plantean algunas opciones para ser aprobadas de por el cliente posteriormente se entrega la plantilla la cual debe ser codificado en el departamento web al cual pertenezco, antes de subirla y asignarle el dominio pasa al departamento de correcciones y estilo y posteriormente se publica el entorno web.

3.2. DELIMITACIONES

(14)

14

4. PLANTEAMIENTO DEL PROBLEMA

4.1 DESCRIPCIÓN DEL PROBLEMA

El problema surge cuando se observa que la actualidad la mayoría de la personas dejan llevarse más por lo que ven y es entonces cuando nace el marketing online debido a las facilidades que se tienen al acceso de internet en la mayoría de lugares y en diversos dispositivos, a su vez disminuir el impacto ambiental que surge cuando se hace publicidad en diferente tipo de papelería. Adicionalmente la publicidad online ofrece algunos beneficios como: tener actualizada la información de la empresa, presentar descuentos, dar a conocer nuevos productos y servicios.

En la actualidad Publitell cuenta con 1 solo desarrollador en el departamento web y la demanda de clientes aumenta cada día el pasante sería un soporte para colaborar en dicho departamento. El estudiante tiene la necesidad de enfrentarse al mundo laboral para adquirir experiencia y a su vez lograr acceder a nuevos conocimientos que nos son obtenidos durante el transcurso de la carrera.

4.2 OBJETIVOS DEL PROYECTO

4.2.1 Objetivo general: Desarrollar aplicaciones web a la medida en Publitell para diferentes áreas de trabajo.

4.2.2 Objetivos específicos

 Definir las herramientas a usar dependiendo el tipo de proyecto.

(15)

15

5. MARCOS DE REFERENCIA

5.1 MARCO TEÓRICO

5.1.1 Frameworks de desarrollo. Un framework de aplicaciones web es un tipo de framework que permite el desarrollo de sitios web dinámicos, web services (servicios web) y aplicaciones web. El propósito de este tipo de framework es permitir a los desarrolladores construir aplicaciones web y centrarse en los aspectos interesantes, aliviando la típica tarea repetitiva asociada con patrones comunes de desarrollo web. La mayoría de los frameworks de aplicaciones web proporcionan los tipos de funcionalidad básica común, tales como sistemas de templates (plantillas), manejo de sesiones de usuario, interfaces comunes con el disco o el almacenamiento en base de datos de contenido cacheado, y persistencia de datos. (LUZCILA, 2013)

Figura 1.Frameworks de desarrollo

Fuente: la autora basado en (LUZCILA, 2013)

(16)

16

Figura 2.Marketing online

Fuente: la autora basado en (ilifebelt, 2013)

(17)

17

Figura 3.HTML 5

Fuente: la autora basado en (immagen, 2012)

(18)

18

Figura 4. CSS3

Fuente: la autor basada en (Leon, s.f.)

5.1.5 Php. Se utiliza para generar páginas web dinámicas. Recordar que llamamos página estática a aquella cuyos contenidos permanecen siempre igual, mientras que llamamos páginas dinámicas a aquellas cuyo contenido no es el mismo siempre. En la Figura 5 se plasman las formas en las que se desarrolla PHP.

Figura 5. PHP

(19)

19

5.1.6 Sublime text es un editor de código multiplataforma, ligero y con pocas concesiones a las florituras. En la figura 6 se dan a conocer algunas herramienta que posee sublime

Figura 6. Sublime text

Fuente: la autora basada en (genbeta, 2012)

(20)

20

Figura 7.wordpress

Fuente: la autora basada en (comologia, 2013)

5.1.8 Joomla. Es un Sistema de Gestión de Contenidos (CMS) premiado mundialmente, que le ayuda a construir sitios web y otras aplicaciones online potentes .En la figura 8 se muestran algunas de las funciones que ofrece joomla. Este fue el gestor de contenidos más usado durante el transcurso de la pasantía con un total de 4 proyectos elaborados en su totalidad bajo este gestor. Este gestor se usó para empresas que tenía como propósito agregar información constantemente en pocas palabras para cliente que buscaban un entono autoadministrable. Las capacitaciones y las entrega al cliente final eran por parte del coordinador del departamento de web Factory. En la figura 8 se muestran los diferente usos que pueden ofrecer Joomla.

Figura 8.joomla

(21)

21

5.2 MARCO CONCEPTUAL

5.2.1 Metodologías de desarrollo: es un marco de trabajo usado para estructurar, planificar y controlar el proceso de desarrollo en sistemas de información (Selecting A Development Approach, 2007).

Se basan en una combinación de los modelos de proceso genéricos (cascada, evolutivo, incremental, espiral entre otros). Adicionalmente una metodología debería definir con precisión los artefactos, roles y actividades involucrados, junto con prácticas y técnicas recomendadas, guías de adaptación de la metodología al proyecto, guías para uso de herramientas de apoyo, etc. Habitualmente se utiliza el término “método” para referirse a técnicas, notaciones y guías asociadas, que son aplicables a una (o algunas) actividades del proceso de desarrollo (wikispaces, 2014). En la Figura 9 se muestra las etapas por los que un proyecto debe cumplir en las diferentes metodologías (upm, 2012).

Figura 9. Metodologías de desarrollo

Fuente: (upm, 2012)

(22)

22

Tabla 1. Metodologías de desarrollo más apropiado para trabajar en equipo por cortos tiempos de trabajo basado en la figura 9

Criterio XP SCRUM

Tamaño del proyecto Pequeños , medianos Pequeños , medianos y grandes

Tamaño del equipo Menor de 10 Múltiples equipos menor a 10

Estilo de desarrollo Iterativo y rápido Iterativo y rápido

Estilo de código Limpio y sencillo No especificado

Entorno tecnológico Requiere rápida retroalimentación

No especificado

Entorno físico Equipos en un mismo lugar y equipos

distribuidos

No especificado

Cultura de negocio Colaborativo y cooperativo

No especificado

Mecanismos de abstracción

Orientado a objetos Orientado a objetos

5.2.2 Arquitectura de tres capas: es un diseño reciente que introduce una capa intermedia en el proceso. Cada capa es un proceso separado y bien definido corriendo en plataformas separadas. En la arquitectura tradicional de tres capas se instala una interfaz de usuario en la computadora del usuario final (el cliente). La arquitectura basada en Web transforma la interfaz de búsqueda existente (el explorador de Web), en la interfaz del usuario final.

La arquitectura de las aplicaciones Web suelen presentar un esquema de tres niveles

El primer nivel consiste en la capa de presentación que incluye no sólo el navegador, sino también el servidor web que es el responsable de presentar los datos un formato adecuado.

El segundo nivel está referido habitualmente a algún tipo de programa o script.

(23)

23

y tercer nivel) y cuyo resultado será formateado y presentado al usuario en el navegador (primer nivel otra vez). (prograweb, 2014)

Figura 10. Arquitectura de tres capas

Fuente: (prograweb, 2014)

Las diferentes capas suelen ser:

Capa 1: Cliente de aplicación: Navegador Web

Capa 2: Servidor de Aplicaciones: Apache, Servidor Tomcat con servlet’s

Capa 3: Servidor de Datos: base de datos, servidor SMTP…

5.3 ESTADO DEL ARTE

El desarrollo de entornos web a la medida han tenido un notable impacto en la actualidad gracias al surgimiento de nuevas entidades y organizaciones las cuales realizan demasiada publicidad en papel lo cual produce un gran impacto ambiental ya que se produce un gran desperdicio de papelería y la mayoría de la población solo ve lo que le interesa y lo demás es desechado. Por medio de aplicaciones web a la medida en las que se pueda ingresar un mensaje publicitario que sea llamativo en el cual se dé información específica de los productos y/o servicios, que son ofrecidas por los clientes para captar la atención de la población a la cual se quiere enfocar la empresa.

(24)

24

dólares per. Cápita. El elevado costo per-cápita de la publicidad ha llevado a muchos críticos a atacar a esta industria alegando que es innecesaria, mentirosa, manipuladora y derrochadora. Estos analistas defienden, que la industria publicitaria eleva de forma artificial e innecesaria el costo el costo de los bienes y servicios que anuncia. (Martinez, 2012)

5.4 MARCO LEGAL

5.4.1 Legislación sobre aplicaciones web: Dentro del marco legal se contemplan las siguientes leyes con sus respectivos artículos:

La ley 1341 en su Artículo 38.- MASIFICACIÓN DEL USO DE LAS TIC Y CIERRE DE LA BRECHA DIGITAL: El Ministerio de Tecnologías de la Información y las Comunicaciones, revisará, estudiará e implementará estrategias para la masificación de la conectividad, buscando sistemas que permitan llegar a las regiones más apartadas del país y que motiven a todos los ciudadanos a hacer uso de las TIC.

5.4.2 Propiedad intelectual: El impulso de nuevas formas de licenciamiento de derechos como Creative Commons o ColorIuris, que abogan por un uso menos restrictivo de las obras en Internet, ha generado una nueva manera de gestionar el conocimiento. Pero, por otra parte, también se han ido afianzando teorías restrictivas como la “Ley Hadopi” francesa, que propone una “respuesta gradual” que culmina con el corte del acceso a Internet para aquellos usuarios de la web sospechosos de descargar material ilegal y por ende le otorgan un protagonismo directo a los proveedores de servicio de Internet en la lucha contra la piratería en línea.

En cuanto a la Política Nacional para el Desarrollo de la Industria de contenidos digitales en su numeral 3.3 en el cual nos habla de las áreas de acción en su eje vertical de acción se tiene A.2. Creatividad en Escuelas y Colegios: Junto con el Ministerio de Educación Nacional, el Ministerio de Cultura y el Programa Computadores para Educar del MinTIC, se desarrollará una estrategia para fomentar la creatividad y el desarrollo del talento artístico y técnico de niños y jóvenes.

Art. 6.1 de la directiva 2001/29/CE de 22 de mayo, conocida como de derechos de autor en Internet, señala que "los Estados miembros establecerán una protección jurídica adecuada contra la elusión de cualquier medida tecnológica efectiva, cometida por una persona a sabiendas, o teniendo motivos razonables para saber que persigue ese objetivo". Más adelante, el art. 6.3 de la misma directiva entiende por "medidas tecnológicas toda técnica, dispositivo o componente que, en su funcionamiento normal, esté destinado a impedir o restringir actos referidos a obras o prestaciones protegidas que no cuenten con la autorización del titular de los derechos de autor o de los derechos afines a los derechos de autor establecidos por ley".

(25)

25

1. Los prestadores de servicios de la sociedad de la información que faciliten enlaces a otros contenidos o incluyan en los suyos directorios o instrumentos de búsqueda de contenidos no serán responsables por la información a la que dirijan a los destinatarios de sus servicios, siempre que:

a) No tengan conocimiento efectivo de que la actividad o la información a la que remiten o recomiendan es ilícita o de que lesiona bienes o derechos de un tercero susceptibles de indemnización, o

b) Si lo tienen, actúen con diligencia para suprimir o inutilizar el enlace correspondiente.

Se entenderá que el prestador de servicios tiene el conocimiento efectivo a que se refiere el párrafo a) cuando un órgano competente haya declarado la ilicitud de los datos, ordenado su retirada o que se imposibilite el acceso a los mismos, o se hubiera declarado la existencia de la lesión, y el prestador conociera la correspondiente resolución, sin perjuicio de los procedimientos de detección y retirada de contenidos que los prestadores apliquen en virtud de acuerdos voluntarios y de otros medios de conocimiento efectivo que pudieran establecerse.

2. La exención de responsabilidad establecida en el apartado 1 no operará en el supuesto de que el proveedor de contenidos al que se enlace o cuya localización se facilite actúe bajo la dirección, autoridad o control del prestador que facilite la localización de esos contenidos.

5.4.3 Normas aplicables a las metodologías de desarrollo: ISO 12207 Esta norma está orientada a los procesos de ciclo de vida del software de la organización ISO. Establece un proceso de ciclo de vida para el software que incluye procesos y actividades que se aplican desde la definición de requisitos, pasando por la adquisición y configuración de los servicios del sistema, hasta la finalización de su uso.

Este estándar tiene como objetivo principal proporcionar una estructura común para que compradores, proveedores, desarrolladores, personal de mantenimiento, operadores, gestores y técnicos involucrados en el desarrollo de SOFTWARE usen un lenguaje común.

(26)

26

6. DISEÑO METODOLÓGICO

6.1 TIPO DE INVESTIGACIÓN

El tipo de investigación que se desarrollara durante el transcurso de la pasantía es la investigación científica aplicada se propone transformar el conocimiento 'puro' en conocimiento útil. Tiene por finalidad la búsqueda y consolidación del saber y la aplicación de los conocimientos para el enriquecimiento del acervo cultural y científico, así como la producción de tecnología al servicio del desarrollo integral de las naciones. La investigación aplicada puede ser Fundamental o Tecnológica.

6.2 FUENTES

6.2.1 Fuentes primarias Para el transcurso de la pasantía se manejaras las fuentes primarias debido a que se va a tener una evidencia directa sobre el tema de la pasantía. Las fuentes primarias ofrecen un punto de vista desde adentro del evento en particular que se desarrollara durante 6 meses en los cuales se adquirirán conocimientos nuevos.

6.3 INSTRUMENTOS

(27)

27

6.4 METODOLOGÍA DE LA INVESTIGACIÓN

6.4.1 Fases de un proyecto en Publitell: Dentro de la empresa Publitell se manejan 4 tipos de proyectos de páginas web, donde el nivel 1 es el plan básico donde no es requerido la administración de contenidos por el cliente, el nivel 2 tiene un número limitado de contenido que puede ser administrado por el cliente, el nivel 3 ya es una página compleja con mucho contenido que puede ser modificado por el cliente y finalmente el nivel 4 es un proyecto muy específico, es decir, un proyecto el cual se tiene que inicializar desde 0 donde se toma como base las especificaciones del cliente, tanto de funcionalidad como diseño. Cumpliendo el papel de desarrollador junior, la acción comienza luego de la fase de diseño como se mostrara a continuación.

6.4.1.1 Análisis: Como primera etapa se tiene el levantamiento de requerimientos mediante una entrevista con el cliente, durante la entrevista tomando en cuenta los puntos de vista del cliente se toman decisiones de los requerimientos que este propone, delimitarlos, descartarlos como requerimientos no funcionales y mostrarle algún requerimiento adicional que el cliente no contempla. Ya acordados los requerimientos funcionales del sistema, se categoriza en alguna de las 4 clases de proyectos, se hace una estimación de costo y tiempo ya que cada proyecto varia y finalmente se le pide al cliente palabras claves que sean acordes a la función que desempeña la empresa.

6.4.1.2 Diseño: Ya terminada la fase de análisis, se da inicio a la fase de diseño donde la persona encargada realiza los posibles diseños acorde a los requerimientos e información de la empresa, dependiendo del plan que adquirió la empresa se le presentan un número determinado de posibles diseños, este número varía entre 2 diseños hasta 9 diseños. Ya seleccionado el diseño, se realizan posibles modificaciones que el cliente vea pertinentes, finalmente aprobado el diseño, este será llevado al equipo de desarrollo.

(28)

28

7. DESARROLLO

Durante el periodo de tiempo comprendido desde el 1 de septiembre de 2014 hasta el 27 de febrero del 2015, se realizaron diferentes actividades en 10 proyectos; a continuación se realizara una detallada descripción de las actividades realizadas en los proyectos requeridos durante el transcurso de la pasantía.

Cabe aclara que durante el transcurso de la pasantía no se tuvo contacto con los clientes, esta labor era de la coordinadora de la parte web que era quien se encargaba del levantamiento de los requerimientos, los cuales eran entregados al departamento de diseño, allí se diagramaban dos propuestas los cuales eran entregadas a los clientes y ellos escogían la que más se acomodaba a sus necesidades. Posteriormente pasaba al departamento de desarrollo el diseño aprobado en la herramienta Adobe Illustrator y a su vez se recibía una plantilla con algunas de las ideas para los estilos y los efectos que se deseaban manejar para cada una de las pestañas. Al terminar el proceso la diseñadora debía realizar una revisión y con su aprobación se cargaba en el servidor la página web por parte del director de Web Factory. Finalmente la coordinadora realiza el acta de entrega y realiza una llamada al cliente para el recibido de satisfacción, en caso de necesitar un cambio por ejemplo la dirección, la redirección del correo, datos de ubicación agregar más productos con la autorización del director o la coordinadora se realizan los respectivos cambios.

A su vez se experimentó que hay que tener una constante comunicación con la diseñadora y los clientes para que se suministre la información necesaria desde el principio y para que haya homogeneidad entre el diseño y desarrollo que se les presenta a los clientes.

7.1 INSTRUMENTOS UTILIZADOS

(29)

29

el cual requiera ventas online se usara un sistema de comercio electrónico (opencart).

Las herramientas se seleccionan dependiendo el tipo de plan y la cantidad de contenido que se vaya a manejar es decir, si un cliente adquiere un plan básico con poca información como fue el caso de autofibras la página se elabora en HTML5 y CSS3.

En el caso de que el cliente elige un plan básico dependiendo si maneja un alto grado de información y desea administrar su portal web será necesario elaborarlo en joomla.

Y en el caso que el cliente desee ofrecer sus productos por medio de un carrito de compras será necesario por facilidad y por tiempo ser elaborado en opencart ya que es un sistema de comercio electrónico.

Dentro del desarrollo de los proyectos de aplicaciones web a la medida se utilizan diferentes herramientas para el diseño y desarrollo, las cuales se presentaran a continuación:

7.1.1 Adobe illustrator es una herramienta de edición de gráficos con una interfaz de mesa de trabajo, esta herramienta se utiliza para realizar los bocetos o Wireframe. Estos bocetos son realizados por el departamento de diseño que luego serán enviados al departamento de desarrollo desde el momento de la aprobación por el cliente. Pero esta herramienta no es utilizada solamente por el departamento de diseño, esta herramienta también es utilizada por el departamento de desarrollo para exportar las imágenes en extensiones jpg y png, extraer el código de colores hexadecimal o rgba(red, green, blue, alpha) y la modificación de imágenes llegado el caso.

Se profundizo en que un desarrollo no se puede realizar a la ligera, se tiene que tener en cuenta el diseño de los Wireframes, hasta la imagen más pequeña mal hecha repercute la presentación de la página drásticamente, así que el uso de Illustrator es fundamental al momento de la utilización de elementos como iconos e imágenes.

7.1.2 Joomla es un sistema de gestión de contenidos robusto que facilita el desarrollo de páginas web, este gestor de contenidos es sencillo de usar y gestionar todo el contenido de una página web, lo atractivo de Joomla para los desarrolladores es la implementación de una página en un tiempo muy corto, la facilidad de crear una página sencilla como paginas complejas que contemplan varios módulos, artículos, funcionalidades extra, etc.

En cuanto a los gestores de contenido se aprendió que hacen las cosas más sencillas para el desarrollador, aunque la falta de experiencia al momento de usar esta herramienta tiene el efecto contrario.

(30)

30

SQL, XML. Este es el editor de texto que se usa en la empresa Publitell para evitar que se adhiera código innecesario.

7.1.4 Opencart es un sistema de comercio electrónico de código abierto (open source) basado en PHP para tiendas de venta online. Una solución de comercio electrónico robusta para comerciantes de Internet con la capacidad de crear su propio negocio en línea y obtener un comercio electrónico con un coste mínimo.

OpenCart está diseñado con unas características muy completas, fácil de usar, potente, rápida y con un interfaz visualmente atractivo. Su principal creador y actual desarrollador de todo el proyecto es el inglés Daniel Kerr, al cual se le debe agradecer esta magnífica tienda online que ha puesto gentilmente al alcance de todos y hoy en día según muchas valoraciones y estadísticas que hay en Internet es quizás la mejor (o una de las mejores) de entre todas las existentes de código abierto, comparando rapidez, sencillez y eficacia.

(31)

31

8. RESULTADOS

8.1 AUTOFIBRAS TUNJA

Es una empresa encargada de realizar accesorios en fibra de vidrio ubicada en Tunja la cual adquirió un plan económico con Publitell, por medio de la página web ellos buscaban dar a conocer básicamente los productos que ofrecen a la población tunjana, esta página fue elaborada en HTML5 y CSS3, el diseño fue aprobado por el usuario y suministrado por el departamento de diseño en un archivo .ai, esta extensión hace referencia a un archivo de Illustrator como el que se muestra a continuación.

Figura 11. Imagen de archivo .ai suministrado, diseño de Autofibras Tunja.

A partir de este diseño se inicia el desarrollo de la aplicación web, se aclara que el diseño se realiza en base de una plantilla open Source. Ya aclarando este punto se realizan las respectivas modificaciones a la plantilla original, en este caso se inició con la realización del menú de navegación, se vio que el menú de navegación que tenía la plantilla por defecto no se acomodaba al diseño así que se rediseño desde cero. En los requerimientos suministrados por el departamento de diseño requerían un hover o efecto al pasar el puntero del mouse por cada una de las opciones como se muestra a continuación en la figura 12.

Figura 12. Menú de navegación con su respectivo efecto

(32)

32

Figura 13. Maquetación de menú de navegación en HTML5

Figura 14. Estilos para menú de navegación

(33)

33

Figura 15. Efecto del menú de navegación al pasar el puntero del mouse

En la figura 15 se especifica el color de fondo, el color de la letra al momento de pasar el puntero del mouse sobre la opción y finalmente el transition es la transición entre un efecto y otro, se hace repetición de esta línea de transition haciendo énfasis en cada línea para navegadores en específico como Mozilla, Opera, Safari e Internet Explorer.

Ya acabando este tema del menú de navegación se ve la galería de imágenes donde el único cambio que se hace es el cambio de las imágenes que tiene la plantilla original por las que suministro el cliente, se hace el cambio de tamaño de alto de la galería, esto se realiza por medio del estilo width, aquí se hace un énfasis general donde ahora en HTML5 es aconsejable no trabajar medidas de pixeles (px) sino trabajar medidas porcentuales (%) o medidas em (medida basada en el alto de la letra M) ya que es mucho más fácil manejar el responsive con estas medidas.

(34)

34

Figura 16 Resultado módulo de información de productos

(35)

35

Figura 17 .Resultado final de footer de la página web

Para las páginas posteriores de Autofibras Tunja se reutilizo código para optimizar el proceso de desarrollo, pero debido a la falta de información por la empresa Autofibras Tunja el proyecto quedo en espera, dando así el siguiente resultado como se muestra en la figura 18 y 19.

(36)

36

Figura 19. Página Quienes somos

Nota: Para poder visualizar completamente el proyecto puede ingresar a http://www.autofibrastunja.com/.

8.2 PROTEISALES

Es una empresa que produce sales mineralizadas; para la nutrición ganadera; la cual adquirió un plan básico con Publitell, objetivo de la empresa con la creación de la página era dar a conocer los productos y servicios que ofrecen para contribuir al bien del sector ganadero. El usuario solicito que se pudiera administrar los contenidos de su página por tal razón se decide elaborarla en

(37)

37

Figura 20. Diseño de Proteisales suministrado por el departamento de diseño

En este proyecto se dio inicio con la instalación del gestor de contenidos Joomla.Este desarrollo es un poco diferente ya que no existe propiamente un archivo .html o .php que contenga <div> o etiquetas utilizadas en HTML, ya que dentro de un sistema de contenido se realiza el uso de posiciones que vienen por defecto en cada plantilla de Joomla las cuales se pueden utilizar pero teniendo un orden determinado, dependiendo de este orden se puede hacer uso de la posición más adecuada. Al inicio por falta de experiencia se tornó tedioso el uso de Joomla, pero luego de algunas asesorías del ingeniero Javier Pedroza se pudo iniciar un trabajo acorde a las especificaciones del diseño. Se inició por el cambio de la imagen del header, luego de esto el cambio de los valores de tamaño dentro de los archivos css de la plantilla, se realizó el cambio de las opciones del menú de navegación y el cambio de estilo de colores del hover. Se realizó el cambio de las imágenes de la galería de imágenes y los iconos de la parte inferior para el cambio entre imágenes.

(38)

38

Figura 21. Página principal del sistema de gestión.

En la siguiente figura se evidencian los módulos que se crearon y su respectiva posición dentro de la plantilla y el tipo en el cual está realizado ejemplo un html personalizado.

Figura 22. Administrador de módulos de la plantilla.

(39)

39

Figura 23. Ejemplo de filtro de módulos en Joomla productos y servicios.

Para realizar el formulario y el mapa de ubicación del lugar se instaló un plug-in y algunas extensiones para que funcionara en su totalidad

Es una empresa que produce sales mineralizadas; para la nutrición ganadera; la cual cambio su plan básico a un plan delux con Publitell, objetivo de la empresa tiene algunos cambios con la cual quieren dar a conocer los productos y servicios, las que ofrecen para contribuir al bien del sector ganadero y adicional mente las entidades involucradas y agregar más información. El usuario solicito cambiar por completo la página cambiando el diseño pero conservando que se pudiera administrar los contenidos de su página por tal razón se decide elaborarla en Joomla para brindarle la administración deseada.

(40)

40

Figura 24. Nuevo Diseño de Proteisales suministrado por el departamento de diseño

En este proyecto se dio inicio con la instalación del gestor de contenidos Joomla.Este desarrollo es un poco diferente ya que no existe propiamente un archivo .html o .php que contenga <div> o etiquetas utilizadas en HTML, ya que dentro de un sistema de contenido se realiza el uso de posiciones que vienen por defecto en cada plantilla de Joomla las cuales se pueden utilizar pero teniendo un orden determinado, dependiendo de este orden se puede hacer uso de la posición más adecuada. Al inicio por falta de experiencia se tornó tedioso el uso de Joomla, pero luego de algunas asesorías del ingeniero Javier Pedroza se pudo iniciar un trabajo acorde a las especificaciones del diseño. Se inició por el cambio de la imagen del header, luego de esto el cambio de los valores de tamaño dentro de los archivos css de la plantilla, se realizó el cambio de las opciones del menú de navegación y el cambio de estilo de colores del hover. Se realizó el cambio de las imágenes de la galería de imágenes y los iconos de la parte inferior para el cambio entre imágenes.

(41)

41

Figura 25. Página principal del sistema de gestión

En la figura 26 se plasma los módulos que se crearon para llevar a cabo con éxito la elaboración del nuevo diseño de Proteisales.

Figura 26. Administrador de módulos de la plantilla.

(42)

42

Figura 27. Ejemplo de filtro de módulos en Joomla productos y servicios.

Para realizar el formulario y el mapa de ubicación del lugar se instaló un plug-in y algunas extensiones para que funcionara en su totalidad.

A esta nueva página se le agregaron distintas animaciones tanto en el home como en la pestaña de funciones y beneficios como se muestra en la figura 28.

Figura 28. Animación home

(43)

43

Figura 29. Animación Funciones y beneficios

Esta animación se logra incrustar en joomla por medio de un script que nos leyera el formato swf como se tuvo de resultado en la figura 30.

Figura 30. Script

Nota: Para poder visualizar completamente el proyecto puede ingresar a

http://www.proteisales.com/.

8.3 ICOPORES Y ALUMINIOS DEL META

(44)

44

departamento de diseño en un archivo .ai, esta extensión hace referencia a un archivo de Illustrator como el que se muestra a continuación en la figura 31.

Figura 31. Imagen de archivo .ai suministrado, diseño de Icopores y aluminios del meta.

A partir de este diseño se inicia el desarrollo de la aplicación web, se aclara que el diseño se realiza en base de una plantilla open Source. Ya aclarando este punto se realizan las respectivas modificaciones a la plantilla original, en este caso se inició con la realización del menú de navegación, se vio que el menú de navegación que tenía la plantilla por defecto no se acomodaba al diseño así que se rediseño desde cero. En los requerimientos suministrados por el departamento de diseño requerían un hover o efecto al pasar el puntero del mouse por cada una de las opciones como se muestra en la figura 32.

En este punto se utilizó HTML5 para realizar la maquetación de la estructura del menú, todo esto mediante el uso de la clase header-right y una lista desordenada <ul> como se muestra a en la figura 33.

(45)

45

En la Figura 33 se muestra como se realizo la estructura del menu a manera de lista y por medio del class “header-right” se le da la ubicación y tambien se llaman el css al que esta asociado para asignar los estilos.A continuación en la figura 34 se muestran los estilos que se asociaron al menú.

(46)

46

Se especifica el color de fondo, el color de la letra al momento de pasar el puntero del mouse sobre la opción y finalmente el transition es la transición entre un efecto y otro, se hace repetición de esta línea de transition haciendo énfasis en cada línea para navegadores en específico como Mozilla, Opera, Safari e Internet Explorer.

Ya acabando este tema del menú de navegación se ve la galería de imágenes donde el único cambio que se hace es el cambio de las imágenes que tiene la plantilla original por las que suministro el cliente, se hace el cambio de tamaño de alto de la galería, esto se realiza por medio del estilo width, aquí se hace un énfasis general donde ahora en HTML5 es aconsejable no trabajar medidas de pixeles (px) sino trabajar medidas porcentuales (%) o medidas em (medida basada en el alto de la letra M) ya que es mucho más fácil manejar el responsive con estas medidas.

(47)

47

Figura 36. Resultado módulo de información de productos

Finalmente se tiene el footer (figura 37) de la página web donde se ve el logo de la empresa, información de la empresa y las redes sociales que usa, luego de este los iconos de Publitell y Web Factory. Para esto se tomó la decisión que el footer de la información de la empresa se convirtiera en un <div> y volver <footer> la sección donde se encuentran los iconos de Publitell y Web Factory, donde se tomó el mismo procedimiento de manejo de hojas de estilo en cascada, el uso de display y vertical-align, pero esta sección se manejó por medio de <div> mas no de <section> ya que el <section> es una etiqueta para información de la empresa o página y el <div> para información un poco menos relevante.

Figura 37. Resultado final de footer de la página web

Figura 38. Menú de navegación y slider inicio

(48)

48

En la figura 39 se observa el resultado final de la pestaña nosotros con su respectiva ilustración e información primordial de la empresa.

Figura 39. Página Nosotros

En la figura 40 se observa el resultado final de los servicios que ofrece la empresa en cuanto a los cielos rasos que elaboran.

Figura 40. Página servicios cielos rasos en PVC

(49)

49

Figura 41. Página servicios cielos rasos en icopor y servicios en aluminio

Figura 42. Página servicios cocinas integrales y Footer

(50)

50

Figura 43. Página servicios cocinas integrales y Footer

Nota: Para poder visualizar completamente el proyecto puede ingresar a http://www.autofibrastunja.com/.

8.4 SEDUXION VILLAVO

Seduxion villavo es una empresa que se dedica a la venta de productos para adultos la cual adquirió un plan delux. El objetivo de la creación de la página web es poder promocionar los diferentes productos que ofrecen pero con un aditamento la venta online de dichos implementos. Por esta razón se decide trabajar sobre Opencart ya que es un sistema de comercio electrónico de código abierto (open source) basado en PHP para tiendas de venta online, el diseño fue suministrado por el departamento de diseño en un archivo .ai, esta extensión hace referencia a un archivo de Illustrator como el que se muestra en la figura 44.

(51)

51

Posteriormente se instala la platilla suministrada por el departamento de diseño denominado Fashion Street como se muestra en la figura 45.

Figura 45. Plantilla Fashion Street

En la figura 46 se muestra el resultado final de la página de seduxion villavo en cuanto a la página de inicio, slider y menú.

Figura 46. Página final seduxión

(52)

52

Figura 47. Ejemplo de algunos productos con su descripción y precio

En el módulo de administración de opencart como se muestra en la figura 48 es donde se cargan los productos, se asignan las categorías y subcategorías necesarias y es allí donde se asignan precios, se cambia el tipo de moneda, los idiomas, entre otros.

Figura 48. Módulo de administración de opencart

8.5 MOTOCROSS DEL ORIENTE

Motocross del oriente es una empresa encargada de la comercialización, mantenimiento, y venta de repuestos de la marca de motocicletas SUZUKI, el objetivo de la empresa es dar a conocer sus productos y servicios. Por esta razón obtuvieron un plan básico el cual fue desarrollado bajo el gestor de contenidos

(53)

53

.ai, esta extensión hace referencia a un archivo de Illustrator como el que se muestra en la figura 49.

Figura 49. Imagen de archivo .ai suministrado, diseño de Motocross del oriente.

Figura 50 Menú de navegación con su respectivo efecto

(54)

54

Figura 51. Maquetación de menú de navegación en joomla

Luego de creación del menú en joomla el resultado que arroja es el que se ve en la figura 52.

(55)

55

(56)

56

Figura 54. Resultado módulo de información de la moto

Finalmente se tiene el footer (figura 55) de la página web donde se ve el logo de la empresa, información de la empresa y las redes sociales que usa, luego de este los iconos de Publitell y web Factory. Para esto se tomó la decisión que el footer de la información de la empresa se convirtiera en un <div> y volver <footer> la sección donde se encuentran los iconos de Publitell y web Factory, donde se tomó el mismo procedimiento de manejo de hojas de estilo en cascada, el uso de display y vertical-align, pero esta sección se manejó por medio de <div> mas no de <section> ya que el <section> es una etiqueta para información de la empresa o página y el <div> para información un poco menos relevante.

(57)

57

Figura 57 Página nosotros

(58)

58

Figura 58. Página contacto y ubicación

http://motocrossdeloriente.co/.

8.6 CONSEJO PROFESIONAL DE INGENIERÍA DE TRANSPORTES Y VÍAS DE COLOMBIA:

(59)

59

se elabora en Joomla. En la figura 59 se observa el diseño en .ai que fue suministrado por el departamento de diseño.

Figura 59. Diseño de Consejo profesional de ingeniería de transportes y vías de Colombia

En este proyecto se dio inicio con la instalación del gestor de contenidos Joomla. Este desarrollo es un poco diferente debido a que es un proyecto muy grande y con ayuda del ingeniero Javier Pedroza se logró terminar y cumplir con los requerimientos solicitados por los clientes.

Figura 60. Gestor de módulos.

(60)

60

Para realizar el formulario y el mapa de ubicación (figura 61) del lugar se instaló un plug-in y algunas extensiones para que funcionara en su totalidad.

Figura 61. Ubicación –contáctenos

En la figura 62 se evidencia el resultado final de la página del consejo profesional de ingeniería de transportes y vías.

(61)

61

http://consejoprofesionalitvc.org/.

8.7 HOTEL DANARAMA

Es un hotel ubicado en Tunja que busca brindar un excelente servicio a nuestros clientes, para lo cual adecuamos nuestras instalaciones en un ambiente familiar, el objetivo de la creación de la página web es dar a conocer las instalaciones y los servicios con los que te puedes encontrar al llegar a este hotel, ellos deciden adquirir un plan económico con la empresa Publitell. Esta página está desarrollada bajo HTML5 y CSS3. En la figura 63 se puede observar el diseño en el archivo .ai de adobe illustrator

Figura 63 Imagen de archivo .ai suministrado, diseño de Hotel danarama.

(62)

62

En la figura 66 se perciben los estilos que se usaron el menu de navegación

(63)

63

Figura 67 Efecto del menú de navegación al pasar el puntero del mouse

Se observa en la figura 68 algunos servicios que ofrece el hotel danarama

Figura 68. Resultado módulo de información de servicios

(64)

64

Finalmente se tiene el footer (figura 69) de la página web donde se ve el logo de la empresa, información de la empresa y las redes sociales que usa, luego de este los iconos de Publitell y web Factory. Para esto se tomó la decisión que el footer de la información de la empresa se convirtiera en un <div> y volver <footer> la sección donde se encuentran los iconos de Publitell y web Factory, donde se tomó el mismo procedimiento de manejo de hojas de estilo en cascada, el uso de display y vertical-align, pero esta sección se manejó por medio de <div> mas no de <section> ya que el <section> es una etiqueta para información de la empresa o página y el <div> para información un poco menos relevante.

Para las páginas posteriores de hotel danarama se empleó gran parte la funcionalidad que ofrecía la plantilla

(65)

65

Figura 71. Página Quienes somos

http://hoteldanarama.com/quienes-somos.html.

8.8 SEGURIDAD ESTELAR

(66)

66

Figura 72. Imagen de archivo .ai suministrado, diseño seguridad estelar

(67)

67

En la figura 75 se aprecia los estilos que se crearon para dar un aspecto agradable a la vista del usuario en cuanto a su posicionamiento, la letra el color, el tamaño y las márgenes.

(68)

68

Se observa en la figura 77 algunos servicios que ofrece seguridad Estelar.

Figura 77. Resultado módulo de información de servicios

(69)

69

el uso de display y vertical-align, pero esta sección se manejó por medio de <div> mas no de <section> ya que el <section> es una etiqueta para información de la empresa o página y el <div> para información un poco menos relevante.

Para las páginas posteriores de seguridad Estelar empleó gran parte la funcionalidad que ofrecía la plantilla. En la figura 79 se muestra el resultado del banner de la página principal y el menú adicionalmente la opción de cambiar idioma

Figura 79.Menú y banner página principal

(70)

70

Figura 80.resultado final pestaña nosotros

http://seguridadestelar.com.co/.

8.9 DOCTOR JIMMER

Es una empresa encargada de la prestación de servicios odontológicos estéticos que buscan dar a conocer sus servicios y contratan un plan Premium con Publitell; se elabora en HTML5 y CSS 3.En la figura 81 se puede observar los Wireframes en el archivo de illustrator .ai que fue suministrado por el departamento de diseño.

(71)

71

(72)

72

En la figura 84 se plasma los estilos que se le asignaron al menú

Figura 84. Estilos para menú de navegación

Finalmente se aplica un estilo hover para poder hacer el cambio de color al pasar el puntero del mouse con el par de líneas que se plasman en la figura.

(73)

73

Figura 86. Resultado módulo de información de procedimientos

Para las páginas posteriores de Dr. Jimmer se empleó reutilización de código. En la figura 87 se plasma la imagen de inicio donde se ingresa a la página principal.

Figura 87. Inicio

(74)

74

Figura 88. Página Nosotros

(75)

75

9. CONCLUSIONES.

Como conclusiones se obtiene la falta de experiencia que se tiene al iniciar en el mundo laboral, tanto en el manejo de un proyecto, la presión que se tiene por las entregas y el conocimiento que se tiene de las herramientas y lenguajes de programación, además de esto tomar conciencia de que la universidad da las bases necesarias para el inicio de la indagación y búsqueda autónoma del conocimiento, que en este caso será el conocimiento básico de programación. Aprender que en el mundo laboral dejar un trabajo a medias no es una opción y excusas como se me olvido, lo hice a medias pero funciona no son toleradas, se tiene la presión de las entregas y la forma que un ingeniero tiene que idearse para que en el desarrollo de cada proyecto sea más eficaz y eficiente entregando productos funcionales y de excelente calidad. Mediante esta experiencia se afianzan más los conocimientos que se obtuvieron en el periodo de aprendizaje dentro de la universidad, aplicarlos en un proyecto real y muchas veces aprender técnicas nuevas de desarrollo que le faciliten al desarrollador su trabajo.

Durante el transcurso de la pasantía en Publitell se aprendió que siempre los proyectos deben se creados con las herramientas adecuadas ya que si un cliente desea tener una página autoadministrable es más sencillo elaborarla con un gestor de contenidos y por el contrario si el cliente desea dar a conocer sus servicios que constantemente son los mismos puede ser elaborada en HTMl5 y CSS3 esto es uno de los factores más importantes para poder llevar a cabo en su totalidad los proyectos en los tiempos estipulados.

(76)

76

Bibliografía

ÁLVAREZ, Miguel Ángel (10 de 2010). desarrolloweb. Obtenido de desarrolloweb: http://www.desarrolloweb.com/articulos/que-es-html5.html

BLOGSPOT. (10 de 08 de 2010). Citado el 28 de 03 de 2014, de http://keyla-villamizar.blogspot.com/

COMOLOGIA. (2013). Obtenido de comologia: http://www.comologia.com/que-es-wordpress-y-para-que-se-usa/

ELEKTRAINFORMATICA. (16 de 05 de 2012). Obtenido de elektrainformatica: http://www.elektrainformatica.com.ar/blog/item/110-jquery-que-es-y-como-se-usa?.html

GENBETA.(19 de 02 de 2012). Obtenido de

genbeta:http://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo-multiplataforma

GHATOL, Rohit., & PATEL, Yogest. (2012). Beginning Phone Gap Mobile web

framwork for JavaScript and HTML5. Apress.

GONZÁLEZ, Enrique. (2012). aprenderaprogramar. Obtenido de aprenderaprogramar:

http://aprenderaprogramar.com/index.php?option=com_content&view=article&id =492:ique-es-php-y-ipara-que-sirve-un-potente-lenguaje-de-programacion- para-crear-paginas-web-cu00803b&catid=70:tutorial-basico-programador-web-php-desde-cero&Itemid=193

ILIFEBELT. (09 de 2010). ilifebelt. Obtenido de ilifebelt: http://ilifebelt.com/marketing-online/2010/09/

ILIFEBELT. (2013). Obtenido de ilifebelt: http://ilifebelt.com/servicios/marketing-online/

immagen. (23 de 01 de 2012). Obtenido de immagen:

http://www.immagen.com/Blog/Que-Es-HTML5

JOOMLA. (s.f.). Obtenido de Joomla: http://ayuda.joomlaspanish.org/que-es-joomla

joomla. (2012). joomlaspanish. Obtenido de joomlaspanish: http://ayuda.joomlaspanish.org/que-es-joomla

LEON, Juan. De Dios . activ. Obtenido de activ:

http://activ.com.mx/fundamentos-de-css3/

(77)

77

PEÑA, Jose Ramiro. (11 de 12 de 2012). eduteka. Recuperado el 17 de 04 de 2014, de http://www.eduteka.org/proyectos.php/2/14315

RAMIREZ Montoya, Maria Soledad., & BURGOS Aguilar Jose.. Recursos educativosabiertos y móviles para la formación de investigadores.

Selecting A Development Approach. (2007). Office of information service.

SIERRA, Manue (s.f.). aprenderaprogramar. Obtenido de aprenderaprogramar: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id =546:que-es-y-para-que-sirve-el-lenguaje-css-cascading-style-sheets-hojas-de-estilo&catid=46:lenguajes-y-entornos&Itemid=163

TUFRÓ, Francisco. (2013). Developing mobile Games with moaisdk.