seminario de especialización profesional...roberto arturo castro asesor de forma: licda. ana maría...

63

Upload: others

Post on 03-Aug-2021

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE
Page 2: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

Seminario de Especialización Profesional

Monografía Especializada

“Ventajas del desarrollo responsive como herramienta de última

tendencia de desarrollo online en las empresas del área

metropolitana de San Salvador”.

Presentado por:

López Sánchez, Mónica María.

Para optar al grado de:

Licenciatura en Gerencia Informática.

Asesor de contenido:

Lic. Roberto Arturo Castro.

Asesor de forma:

Licda. Ana María Arteaga de López.

ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015

Page 3: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

AUTORIDADES

Dr. David Escobar Galindo RECTOR

Dr. José Enrique Sorto Campbell

VICERRECTOR VICERRECTOR ACADÉMICO

Ing. Roberto Alejandro Sorto Fletes DECANO DE LA FACULTAD DE ECONOMÍA, EMPRESA Y NEGOCIOS

Licda. Ana Patricia Linares SECRETARIA GENERAL DE LA FACULTAD DE ECONOMÍA, EMPRESA Y

NEGOCIOS

COMITÉ O JURADO EVALUADOR

Lic. Ana Lissette Girón PRESIDENTE COMITÉ EVALUADOR

Lic. Gabriel Merino

COMITÉ EVALUADOR

Lic. Carlos Zaragoza COMITÉ EVALUADOR

Asesor de Contenido:

Lic. Roberto Arturo Castro

Asesor de Forma: Licda. Ana María Arteaga de López

ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015

Page 4: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

II

ÍNDICE GENERAL

RESUMEN DE LA INVESTIGACIÓN ........................................................................ VII

INTRODUCCIÓN ........................................................................................................ 8

SIGLAS Y ABREVIATURAS ..................................................................................... 10

CAPITULO 1. MARCO REFERENCIAL. ................................................................... 11

1.1 Desarrollo web. ................................................................................................ 11

1.2 Design Thinking ............................................................................................... 17

1.3 Innovación Disruptiva ....................................................................................... 20

1.4 Responsive Web Design .................................................................................. 21

CAPITULO 2: DEFINICIÓN DEL PROBLEMA .......................................................... 31

2.1 Definición del problema .................................................................................... 31

2.2 Importancia de la investigación ........................................................................ 31

2.3 Planteamiento del Problema ............................................................................ 32

2.4 Delimitación del problema ................................................................................ 34

2.5 Alcances de la investigación ............................................................................ 34

2.6 Limitaciones ..................................................................................................... 34

2.7 Justificación ..................................................................................................... 35

2.7 Objetivo General .............................................................................................. 35

2.8 Objetivos específicos ....................................................................................... 35

CAPITULO 3: INVESTIGACIÓN Y DIAGNÓSTICO .................................................. 36

3.1 Tipo de investigación.................................................................................... 36

3.2 Metodología ..................................................................................................... 36

3.3 Objeto de estudio, sujeto de estudio, herramientas de recolección de

información, muestra. ............................................................................................. 36

3.4 Resultados de la Investigación: Análisis de entrevistas a profundidad ........ 37

CAPÍTULO 4: CONCLUSIONES Y RECOMENDACIONES...................................... 48

BIBLIOGRAFÍA ......................................................................................................... 50

GLOSARIO ................................................................................................................ 52

ANEXOS ................................................................................................................... 54

Page 5: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

III

ÍNDICE DE TABLAS

Tabla 1: Resumen de las generaciones del desarrollo web en la historia…….…..14

Tabla 2: Detalle de la muestra de las entrevistas a profundidad……………..….…54

Tabla 3: Contabilización de Respuestas de Entrevistados……………………….…60

Page 6: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

IV

ÍNDICE DE GRÁFICOS

Gráfico 1: Innovación Disruptiva……………………………………………………….21

Gráfico 2: Línea del tiempo de hechos importantes en el desarrollo de la web.....27

Page 7: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

V

ÍNDICE DE ESQUEMAS

Esquema 1: Etapas del Design Thinking……………………………………………….19

Page 8: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

VI

ÍNDICE DE IMÁGENES

Imagen 1: Sitios que no incorporan responsive en su diseño: El diario de Hoy

………………………………………………………………………………..……………….22

Imagen 2: Sitios que no incorporan responsive en su diseño: El diario de

Hoy..............................................................................................................................22

Imagen 3: Sitios que no incorporan responsive en su diseño: La Prensa Gráfica

………………………………………………………………………………….……………..23

Imagen 4: Sitios que no incorporan responsive en su diseño: La Prensa Gráfica

……………………………………………………………………………………………...…23

Imagen 5: Sitios que incorporan responsive en su diseño: El blog

…………………………………………………………………….…………….…………....24

Imagen 6: Sitios que incorporan responsive en su diseño: El Blog

………………………………………………………………………..…………………..…..24

Imagen 7: Sitios que incorporan responsive en su diseño: Starkcom

…………………………………………………………………………………………….….25

Imagen 8: Sitios que incorporan responsive en su diseño: Starkcom

…………………………………………………………………………………………….….25

Imagen 9: Sitios que incorporan responsive en su diseño: Starkcom

…………………………………………………………………………………………….….26

Page 9: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

VII

RESUMEN DE LA INVESTIGACIÓN

El presente estudio trata sobre las ventajas que la metodología Responsive ha traído

a las empresas del área metropolitana de San Salvador, como una herramienta de

última tendencia del desarrollo en línea.

Dicha investigación refleja las ventajas a nivel técnico para los desarrolladores web de

empresas tanto privadas como instituciones públicas y las ventajas financieras y

comerciales para estas organizaciones, al reducir costos de mantenimiento de la

plataforma, mejorando la experiencia de navegación y consulta del usuario,

adaptándose a sus necesidades de acceso a la información.

En este estudio, se realizó una investigación cualitativa, donde son reflejados los

resultados objetivos de entrevistas a profundidad, las cuales fueron aplicadas a

desarrolladores web, que contaran o no con experiencia en el tema del uso de

Responsive, pero que conocieran sobre su funcionamiento y forma de implementación

en el área de proyectos web.

Finalizado el estudio, se pudo concluir objetivamente sobre el impacto que esta

metodología tiene en el desarrollo e implementación de sitios y páginas web, lo que

permitió generar recomendaciones que ayudarán a encontrar un equilibrio a la hora

de trabajar con el modelo Responsive en los proyectos dentro de las empresas,

afectando de forma positiva indicadores tanto técnicos, comerciales y financieros.

Page 10: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

8

INTRODUCCIÓN

La evolución en las nuevas tecnologías de la información en cuando a diseño, desarrollo

e implementación web, han propiciado importantes cambios en las metodologías de

trabajo, tanto de las empresas que cuentan con recursos dedicados para el seguimiento

de proyectos web, y también de aquellas que prestan servicios tercerizados a diferentes

instituciones para brindar un soporte enfocado a la finalización adecuada de los

proyectos.

Los proveedores de servicios de diseño e implementación de sitios y páginas web, y los

desarrolladores internos de las empresas o instituciones púbicas, están optando por

hacer uso de una metodología de trabajo Responsive que facilite la navegación y acceso

a la información a los usuarios finales, proponiendo soluciones de acuerdo a los

requerimientos o necesidades iniciales, con el fin de optimizar tiempos de búsqueda y

acceso a herramientas, haciendo más eficiente el trabajo de los involucrados.

El objetivo del estudio es mostrar las ventajas del uso de Responsive, como una

metodología de última tendencia, que mejora la calidad de los proyectos en línea, desde

la recolección de requerimientos, hasta la etapa de puesta en producción, analizando la

rentabilidad del dicho proyecto, lo cual implica una mejora considerable para posicionarse

dentro del mercado actual.

La investigación comprende 4 capítulos:

En el capítulo I “Marco Referencial” se incluyen antecedentes del desarrollo web y las

teorías asociadas, que sirven de complemento para el tema a tratar en la investigación.

Se relacionan el crecimiento y avance de las tecnologías de la Información y su impacto

en la utilización de diversos dispositivos para mantenerse comunicados.

A su vez se asocia el tema de design thinking, una metodología de estudio de los usuarios

finales o clientes para proponer soluciones más óptimas o mejor adaptadas a sus

necesidades. De igual forma, hace referencia a la Innovación disruptiva, la cual indica la

forma en que un producto o servicio que originalmente nació siendo algo simple, es capaz

de llegar a convertirse en el producto o servicio líder del mercado en poco tiempo,

finalizando con el detalle del funcionamiento de responsive design y sus etapas dentro

del flujo ordenado que debe seguir para poder desarrollar e implementar un proyecto

web.

En el capítulo II “Definición del Problema” se detalla la importancia de realizar la

investigación tomando en cuenta la necesidad de plantear el problema y definir alcances

Page 11: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

9

y limitaciones que justifiquen la investigación, para así poder detallar los objetivos que se

quieren cumplir al finalizar con la recolección de la información.

En el capítulo III “Investigación y diagnóstico” se define la Metodología a utilizar, esto a

través de la definición del tipo de investigación a realizar que será de carácter descriptivo,

debido a que se brindará información detallada con relación a una situación determinada.

Este capítulo también fija la metodología a utilizar que será de tipo cualitativo y las

herramientas a aplicar para la recolección de la información, por medio de la selección

de una muestra que está compuesta por desarrolladores web.

Adicional, el capítulo detalla los resultados y análisis de las entrevistas a profundidad que

fueron a aplicadas a la muestra seleccionada, con el fin de identificar necesidades de

mejora en la implementación de Responsive dentro del flujo de diseño, desarrollo e

implementación web.

Adicional, la investigación presenta conclusiones y recomendaciones para cada

oportunidad de mejora detectada con sus respectivas recomendaciones.

Finalizando la investigación se detallan las fuentes de los sitios y documentos que se han

utilizado para argumentar la investigación, éstos son incluidos en las referencias

bibliográficas que son listadas al final del documento, permitiendo ofrecer una visión

general de todas las publicaciones utilizadas.

Page 12: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

10

SIGLAS Y ABREVIATURAS

ARPANet Advanced Research Projects Agency Network

ASP Active Server Pages

CGI Common Gateway Interface

CSS Cascading Style Sheets

DARPA Defense Advanced Research Projects Agency

DOM Document Objet Model

HTML HyperText Markup Language

IIS Internet Information Services

ISAPI Internet Server API

NSAPI Netscape Server Application Programming Interface

PC Personal Computer

PHP Hypertext Preprocessor

RAE Real Academia Española

TIC Tecnologías de la Información y la Comunicación

TIR Tasa Interne de Retorno

URL Uniform Resource Locator

VAN Valor Actual Neto

W3C World Wide Web Consortium

WWW World Wide Web

Page 13: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

11

CAPITULO 1. MARCO REFERENCIAL.

1.1 Desarrollo web.

Su definición es la creación e implementación de un código que permite desarrollar una aplicación o un sitio web. Está conformado por dos partes, un cliente y un servidor, cada una de ellas independientes y que funcionan de forma diferente. En algunas ocasiones, existe interacción entre dichas partes, a lo que se le llama cliente-servidor, que también conlleva un desarrollo específico.

Desarrollo del cliente

Es necesario contar con conocimientos para la creación de páginas web, tanto en HTML, CSS, para la programación en código del mismo, es necesario el conocimiento en JavaScript y DOM.

Desarrollo del servidor

Es toda la construcción de código necesaria para implementar el BlackEnd, en este apartado si se utilizan lenguajes de script, por ejemplo, PHP, ASP, ASP.NET, Perl, etc., que permiten tener el acceso a las bases de datos correspondientes y así recopilar la información necesaria para desarrollar los sitios web(1).

No se debe dejar de lado, que el desarrollo web incluye la planificación, creación e implementación del sitio web, cumpliendo los objetivos y combinando diferentes técnicas para tener un buen resultado. El desarrollo de plataformas web permite la incursión a diferentes áreas tanto para grandes empresas y para ámbitos particulares, brindando la oportunidad de generar una proyección comercial para la incursión dentro del mercado.

Ciclo de vida del desarrollo Web

1. Análisis: Por medio de la recolección de requerimientos brindar una estructura para saber cómo se solventará la necesidad del cliente.

2. Elaboración de las especificaciones: Son aquellos que es posible fijar cubriendo todos los requerimientos.

3. Diseño y desarrollo: Elaboración del prototipo por medio de la revisión de las especificaciones solicitadas y tener la propuesta firmada.

4. Creación de contenido: Es la información asociada a la empresa o a la organización con la que se está trabajando, necesaria para el funcionamiento completo del sitio web.

5. Código: Agregar el código de programación sin alterar el diseño del sitio por medio de diferentes técnicas.

6. Pruebas: Incluyendo pruebas de integración, de estrés, escalabilidad, carga y resolución, con el fin que al estar en producción dicho sitio, todas las adversidades puedan ser solventadas porque los posibles errores se tienen bajo un margen de control.

Page 14: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

12

7. Promoción: Aplicable para sitios web, buscando diversa promoción por medio de accesos a la URL que pueden ser gratuitos o bajo costo, dependiendo de las preferencias del cliente.

8. Mantenimiento y actualización: Del diseño y del código, con el fin de depurar errores y hacer actualizaciones, que mantengan el sitio fresco y atractivo, pero sobre todo funcional para quienes lo visitan(2).

Antecedentes generales

Uno de los principales elementos para el funcionamiento de la web es el internet, sus orígenes se remontan a la década de 1960, dentro de DARPA, siendo una respuesta a la necesidad de buscar mejores maneras de usar los computadores.

En 1969, cuando se estableció la primera conexión de computadoras, entre tres universidades en California, y en Utah, Estados Unidos, nace ARPANet, que trazó las primeras pautas de una red inicial de comunicaciones de alta velocidad(3).

Los inicios del desarrollo de la web se enfocan desde la creación del Internet, para ser una plataforma para la misma web. Siendo el internet creado en los años 70, una necesidad de conectar las instituciones científicas de los Estados Unidos, y generar el beneficio de compartir información valiosa e importante de forma sencilla.

Se define a la creación e implementación de un código que permite desarrollar una aplicación o un sitio web. Está conformado por dos partes, un cliente y un servidor, cada una de ellas independientes y que funciones de forma diferente. En algunas ocasiones, existe interacción entre dichas partes, a lo que se le llama cliente-servidor, que también conlleva un desarrollo específico.

La primera página web se desarrolló entre 1991 por Tim Berners-Lee, su función era informar sobre la nueva y emocionante World Wide Web. Fue puesto en línea a través del primer servidor web llamado NeXTcube; veinte años después del nacimiento del internet (4).

En los inicios del primer servidor, el internet presentaba grandes limitantes en su velocidad, sin embargo la transmisión de información entre computadoras era bastante eficiente. Fue utilizado para transferir información eficiente dentro de un grupo especificado(5).

La creación de la Web en un periodo de 2 años, revoluciono la forma de comunicación entre los usuarios de la fecha, la utilización del primer servidor NeXTcube, era básica para el funcionamiento de la web, a pesar, que la velocidad era una de las debilidades principales, la transferencia de información se realizaba con mucho éxito. Sus primeros usuarios eran determinados grupos que querían compartir datos e información de forma rápida y segura.

El diseño web original fue mejorando y pasando por distintas generaciones, principalmente debido a mejoras en la tecnología. Estos cambios generaron 4 generaciones del diseño web(6).

Page 15: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

13

Primera generación

La primera página web no fue muy difundida, esto porque no existían muchos navegadores, el gran paso para masificarla se dio en 1993, debido al lanzamiento del navegador Mosaic, y en menos de un año había recibido 2 millones de visitantes. En 1994, el acceso a Internet se abrió a particulares, permitiendo una mayor disfunción, era capaz de mostrar tanto imágenes y textos, con una limitación muy alta a la hora de diagramar la información de la página web.

El diseño web de estas páginas era lineal y estaba orientado para científicos que eran los usuarios que compartían su información. La tecnología de los navegadores web era limitada y no disponía de la capacidad de transmitir información gráfica para la comunicación visual. Las principales características eran las velocidades de transmisión de datos, en ese entonces la conexión era vía MODEM; Limitaba el peso de las páginas web y el uso de monitores monocromos. Respecto al diseño web en particular, la estructuración era bastante desordenada con imágenes dispuestas horizontalmente y líneas de texto separadoras.

Un año más tarde (1994) se creó un consorcio que estableció normas y pautas para el futuro desarrollo de la web, el W3C. Se comenzaron a desarrollar unos estándares de lenguaje HTML para una unificación del diseño web, que trajo consigo la aparición de una serie de navegadores web con el constante desarrollo de nuevas funcionalidades y progresos en este ámbito.

Segunda generación

En el año de 1995 aparece la utilización de iconos en lugar de algunas palabras, las páginas web comienzan a poseer imágenes de fondo, aparece el diseño y uso de botones con relieve para la navegabilidad, el uso de banners en lugar de cabeceras, la estructuración de texto de forma jerárquica mediante menús o listados, propiedades del código HTML con standard definido.

La aparición elementos gráficos generó una saturación de iconos e imágenes en las páginas web, sin analizar la accesibilidad ni la usabilidad. Aun así seguían habiendo algunos diseñadores que utilizaban estos elementos de manera correcta para generar unos diseños innovadores, usando correctamente las etiquetas y el resto del código HTML. Se comenzaron a usar tablas para la organización de los contenidos, generación de diseño y maquetación, similar a libros o revistas.

En esta generación está la aparición de monitores y tarjetas gráficas con mayores resoluciones y definición de color, lo cual generó la consecuente mejora en la calidad del diseño web; Pero apareció un problema en 1995, la diferencia en la adaptación de estándares de los 2 principales navegadores: Internet Explorer y Netscape Navigator.

Tercera generación

Muchas restricciones con el uso del lenguaje para los dos navegadores web se siguen presentando en esta generación. El diseño web se orienta a los diseñadores, los cuales

Page 16: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

14

tienen mucho más dinamismo al aparecer el plugin de Macromedia Flash (1996), el cual revolucionaría el concepto de diseño web.

Las páginas web se enfocan en: vender productos o servicios, comunidades, información, noticias. Para esta especialización del diseño web de acuerdo al objetivo de las páginas se necesita ayudar al usuario a encontrar la información, generando una navegabilidad estructurada e intuitiva.

La gran mayoría de páginas web que aparecen en esta generación son de publicidad y venta de productos y servicios, con lo que es este el diseño más utilizado. Conseguir acercarles al producto, que deseen ver más páginas del sitio web.

Cuarta generación

El diseño web ya está enfocado totalmente a la multimedia, integrando en las páginas web los elementos multimedia de última generación. Con usuarios de todos los tipos, la variedad de diseño es enorme debido a todas las posibilidades que ofrecen las últimas tecnologías. Además, las últimas versiones de los navegadores soportan muchas más prestaciones y elementos en las páginas web.

Tabla 1: Resumen de las generaciones del desarrollo web en la historia (7)

CUADRO RESUMEN DE LAS GENERACIONES DE DESARROLLO WEB

Generación 1 Generación 2 Generación 3 Generación 4

Muestra imágenes y textos. Dificultades en la diagramación la información. Diseño lineal. Orientado para científicos No disponía de la capacidad de transmitir información gráfica para la comunicación visual Conexión vía MODEM Limitaba el peso de las páginas web y el

Utilización de iconos en lugar de algunas palabras. Imágenes de fondo, aparece el diseño y uso de botones con relieve para la navegabilidad. Uso de banners en lugar de cabeceras. La estructuración de texto en forma jerárquica mediante menús. Código HTML con standard definido. Saturación de iconos e imágenes en las páginas web.

Restricciones con el uso del lenguaje para los dos navegadores web. El diseño web se orienta a los diseñadores. Aparecer el plugin de Macromedia Flash. Las páginas web se enfocan en: vender productos o servicios, comunidades, información, noticias.

Diseño web completamente multimedia. Innovación y Vanguardia. Webs y usuarios de diferentes modelos. Mejores navegadores soportan más prestaciones y elementos de las páginas web.

Page 17: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

15

uso de monitores monocromos. Estructuración desordenada.

Organización del contenido por el uso de tablas, diseño y maquetación similar a libros. Dificultades con la adaptación en dos navegadores, Internet Explorer y Netscape Navigator.

El desarrollo de la web en la historia ha presentado notables cambios desde su fundación, la primera generación mostraba textos e imágenes a una velocidad limitada, la organización de su contenido era desordenada. Poco a poco surgieron las mejoras hasta determinar cada generación.

La segunda generación muestra el uso de iconos, banner y tablas en los contenidos web, un estándar en los códigos HTML, una mejor organización; el surgimiento de dos navegadores hace difícil determinar un lenguaje estándar para ambos. La tercera generación, más dirigida a los programadores con el surgimiento de Macromedia Flash.

La cuarta generación es un producto completamente multimedia, el uso de imágenes, audio y video, es una realidad. La innovación, creatividad y funcionalidad son elementos esenciales para la competitividad de cada web. El crecimiento y avance de la web ha sido muy significativo a lo largo de 22 años.

La Web 2.0

La Web 2.0 es el título más apropiado para describir al nuevo tipo de aplicaciones web dominantes y la fase actual en que se encuentra la red creada por Berners – Lee, la World Wide Web (www).

El internet y la World Wide Web se encuentran en una segunda fase, una evolución que ha cambiado por completo su concepto; ahora, compuesto con un nuevo paquete de herramientas y aplicaciones que están dominando la plataforma. La mercadología y algunos expertos en el internet le han denominado Web 2.0.

Por otra parte en el 2004, otro de los expertos en el internet menciona que la web 2.0 es un nombre cómodo para un fenómeno. Se trata de un cambio que va desde la época en el que el internet era un accesorio a la PC, hasta el momento que el internet es una auténtica plataforma por sí misma.

Es decir, que la Web 2.0 no es solamente un cambio, sino más bien pasa a ser una revolución en el uso de las redes y el internet a manera de ser un medio de comunicación global, llamarle “Web 2.0” implica hablar de la última etapa que ha sufrido el proceso de producción, modificación y actualización de la World Wide Web.

Page 18: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

16

Algunos gobiernos han demostrado su interés en el estudio de la Web 2.0 nos dicen que, es aquella web basada en la creación de páginas donde los contenidos son compartidos y producidos por los propios usuarios del sitio(8).

Por ende, un sitio o página en la etapa de la Web 2.0 es aquella que permite al usuario interactuar y colaborar con otros, siendo creadores de contenido generado por una empresa, organización o comunidad virtual.

La principal diferencia con la web 1.0 es que los usuarios son “prosumidores” y se constituyen en el auténtico centro de la comunicación en la red.

La evolución del internet a Web 2.0, es un proceso que está revolucionando las comunicaciones e interconexiones en el mundo; su principal colaborador en esta evolución es el mismo usuario, porque se han convertido en productores y consumidores, se ha convertido el núcleo principal de la comunicación.

Tecnologías de la información y la Comunicación (TIC)

Las tecnologías de la información y la comunicación “(…Son el conjunto de tecnologías desarrolladas para gestionar información y enviarla de un lugar a otro)” (9). Permiten gestionar soluciones, que soportan el almacenamiento y recuperación de datos, procesamiento de la información y con la misma generar reportes para manejo de resultados.

Esto fue posible gracias a la unión de los sistemas de computación y las comunicaciones, lo que facilitó las diversas formas de comunicarse al inicio de la década de los 90.La presencia de las mismas en los diferentes ámbitos de nuestra sociedad, las han llevado a convertirse en recursos fundamentales dentro de ámbitos laborales y particulares, de tal forma que han creado diversos términos:

1. e-business * 2. e-commerce * 3. e-government * 4. e-healt * 5. e-learning * 6. e-inclusion * 7. e-skills * 8. e-work * 9. e-mail: Correo electrónico * 10. Ancho de banda * 11. Domótica(10) *

*Definición detalla en glosario al final del documento

Dichos conceptos llevaron a que la Internet, dejara de ser utilizada exclusivamente para ámbitos de investigación científica, sino que logrará modificar pautas de comportamiento social.

Page 19: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

17

Siendo una nueva tendencia, existen ciertas ventajas: el incremento de la productividad y el uso de nuevas tecnologías en diferentes ámbitos. Dichos procesos de innovación tecnológica, permiten la reorganización y reelaboración de las diferentes competencias dentro de las organizaciones logrando facilidades en cuanto a:

1. Acceso y distribución de la información 2. Exactitud en dicha información 3. Disminución de forma eficiente los riesgos y los costos 4. Optimización de los diferentes procesos.

Sin embargo, siendo un proceso evolutivo, es necesario destacar las desventajas de las mismas, por ejemplo el acceso que no está disponible para todos, por factores que diferentes, los recursos económicos por ejemplo. Esto conlleva a que exista una desventaja entre las personas que tienen el acceso completo a los diferentes canales de comunicación que ofrecen las TIC y los que no, generando una brecha digital entre los mismos (11).

Evolución de las Tecnologías de la Información y la Comunicación

En la década de los 70 inició la conocida revolución electrónica, que dio la pauta para el inicio y crecimiento de la Era Digital. Todos los avances tecnológicos ocasionaron que predominaran los aspectos que combinaban la parte de la electrónica y del software y efectos paralelos, por ejemplo, la caída de los precios de las materias primas de los productos.

El inicio de los 80 marcó el inicio de las interconexiones de red, logrando convertir a las TIC en sectores estratégicos para diferentes ámbitos. A partir de ese momento las tecnologías de la información y la comunicación se convirtieron en elemento fundamental dentro de las organizaciones y para las personas en general porque les brindaba la capacidad de adaptarse a las diferentes innovaciones y así utilizarlas para su propio beneficio (12).

1.2 Design Thinking

Básicamente es el método que utilizan los diseñadores para resolver problemas. Permite reducir riesgos y aumentar las posibilidades de éxito, centralizando su ser en las necesidades de las personas y creando prototipos de pruebas para interconectar diferentes áreas sociales y laborales, de esta forma generan una solución que sea viable tanto del lado técnico, lado humano y que ofrezca la rentabilidad económica que el proyecto necesita.

A través de esta metodología es posible desarrollar proyectos y cumplir estrategias de los clientes. El design thinking se refiere a la observación del entorno, para analizar conductas que permitan plantear el posible desarrollo para la resolución y satisfacción de necesidades, por ejemplo “(…La observación de la conducta humana relacionada a un producto para luego desarrollar el mismo)”(13) .

Page 20: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

18

El design thinking crea un proceso participativo que permite ser creativo en la toma de decisiones, debido a que las propuestas surgen por medio de la lluvia de ideas que permite la colaboración en la búsqueda de las soluciones de los empleados, de clientes y proveedores en diferentes disciplinas. Esta metodología incorpora tres tipos de inteligencia:

Inteligencia integral

Inteligencia emocional

Inteligencia experimental

Abordar las múltiples dimensiones para responder a los retos y requisitos es el objetivo de la inteligencia integral, la inteligencia emocional en cambio permite una interacción con el mundo por medio de los sentimientos y habilidades para controlar impulsos y generar situaciones donde sobresalga la motivación, empatía y otros factores asociados a los sentimientos.

La inteligencia experimental es la que se origina en el método de “prueba y error”, todo esto por medio de la observación, manipulación de las mismas y comprobación. Es una de las bases para las personas encargadas de diseñar los esquemas de solución a una situación determinada, porque permite desarrollar una metodología que facilita la resolución de los problemas.

Orígenes del Design Thinking

Se remontan los orígenes de estas técnicas a los años 50, en los cuales la lluvia de ideas o brainstorming, era una herramienta impulsada para el trabajo de los equipos, en especial por el publicista Alex Osborn.

Con el paso de los años, alrededor de los 70 la obra publicada por Robert H.McKim revolucionó el concepto y genera nuevas expectativas en el tema. Pasados los años, Tim Brown y David Kelley, conformaron la empresa IDEO quienes se concentraban en ser especialistas para administrar la innovación.

Dichos conceptos fueron retomados a partir del año 2000, sin embargo dicho concepto fue iniciado en los años 80 por el mismo David Kelley quien fue el guía que creo la d.school en la Universidad de Stanford(14) .

Que el concepto se convirtiera en masivo, es gracias a Tim Brown, quien siendo co-fundador de la empresa IDEO, realizó publicaciones realizó publicaciones en un artículo para Harvard en el año 2008.

Page 21: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

19

Etapas del Design Thinking

Esquema 1: Etapas del Design Thinking(15)

1. Entender: Etapa de la metodología que busca identificar el público o clientes o usuarios objetivos, con el fin de tener insumos para desarrollar la solución innovadora. El equipo encargado en esta etapa se reúne para tener una mejor comprensión y así ser más eficientes con la solución a plantear para el proyecto.

2. Empatizar: El objetivo de esta etapa es que el cliente o al usuario sea el principal factor o el centro de todo el proceso, trata de realizar un proceso intenso de observación y acompañamiento al cliente, con el de determinar conductas que permiten generar propuestas innovadoras para entregar el resultado final.

3. Definir: Etapa posterior al profundo conocimiento del cliente, que permite definir la verdadera problemática, que posiblemente no es la misma que se ha planteado al inicio. Lo más importante en esta fase es lograr plantear soluciones a la situación desde un punto de vista “Outside the box”, que sea diferente, y que proporcione un punto de vista freso y actual.

4. Idear: Etapa en la cual se puedan generar ideas creativas que han surgido en las etapas anteriores, lo cual le da un valor diferenciador a la metodología del Design Thinking. Dichas ideas creativas permiten dar un enfoque diferente para solucionar los problemas.

5. Prototipar y testear: El éxito de la metodología Design Thinking es la reducción de riesgos dentro de los procesos de innovación, utilizando prototipos que son probados de forma rápida con el cliente, va de la mano con el testeo o pruebas realizadas, permitiendo llevar a cabo el concepto “idear haciendo”, así se recibe una retroalimentación directa de parte del cliente para realizar las respectivas mejoras y así entregar un producto más completo y acorde a la necesidad del cliente.

6. Implementar: Etapa en la que el cliente ha dado el visto bueno a la propuesta presentada, y es aceptada por el cliente, acá se debe diseñar el respectivo caso

Entender Empatizar Definir Idear Prototipar Testear Implementar

Page 22: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

20

de negocios y plan de acción con tiempos específicos de cumplimiento para ejecutar de lleno la solución que se le ha presentado al usuario.

1.3 Innovación Disruptiva

Concepto que indica la forma en que un producto o servicio que originalmente nació siendo algo simple, es capaz de convertirse en el producto o servicio líder del mercado en poco tiempo. Básicamente la disrupción ocurre cuando las empresas en crecimiento utilizan tecnologías nuevas o nuevos modelos de negocios, superando así a las empresas que son líderes actualmente, o que hasta entonces lo eran(16) .

Básicamente la disrupción permite introducir nuevas tecnologías, productos o servicios para superar a los competidores actuales por medio del cambio. Las tecnologías desarrolladas con este enfoque, ofrecen productos diversos a los de los mercados que dominan, sin embargo, tienen características fundamentales que son apreciadas por un sector específico de clientes.

Esta disrupción provoca que las necesidades de un mercado que anteriormente no había sido atendido, logren ser escuchadas y se diseñen opciones más sencillas, económicas o convenientes ante mercados ya existentes. La adaptación de la innovación incrementa de forma gradual el rendimiento del producto, que logra captar la atención del mercado dominante.

Con el paso del tiempo, dicho mercado dominante centrará su atención en la superioridad del nuevo producto o servicio innovador cambiando su percepción, lo cual provocará el reemplazo del producto o servicio de la empresa o mercado dominante y por ende un efecto de disrupción del producto en el mercado existente.

Antecedentes Innovación Disruptiva

Clayton M. Christensen introdujo el término en 1995, en la publicación de su artículo Disruptive Technologies: Catching the Wave. El término fue profundizado y descrito de una forma más completa en el libro The Innovator's Dilemma en el año de 1997 “(… Debido a que algunas tecnologías son intrínsecamente disruptivas o sostenibles de por sí …)” (17).

La estrategia poco a poco logró un impacto disruptivo o de reemplazo en los mercados actuales, logrando inclusión por medio de captación de un público objetivo diferente. El término proviene de un adjetivo utilizado en física “Disruptivo”, que significa, según la RAE, “Que produce ruptura brusca”.

Page 23: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

21

Gráfico 1: Innovación Disruptiva (18).

1.4 Responsive Web Design

El Responsive Web Design es un modelo de arquitectura web enfocada a la optimización

visual y de contenido de la página en diferentes medios(19), además, es una filosofía de

diseño web a la que se ha llegado a través del trabajo de profesionales en busca de una

solución a problemas técnicos que, se han ido planteando debido los hábitos de consumo,

las tecnologías o las necesidades de los usuarios(20).

El responsive design es una nueva forma de estructurar o crear las páginas web, que

puedan adaptarse a diferentes plataformas, que busca optimizar el contenido y la

capacidad visual de la web. Surge en respuesta al rápido crecimiento tecnológico y de la

demanda por parte de usuarios y empresas que buscan la satisfacción de sus clientes y

la competitividad de las mismas.

Imagen 1: Sitios que no incorporan responsive en su diseño: El diario de Hoy

www.elsalvador.com . Navegador Google Chrome Versión 47.0.2526.73, versión para

desktop.

Page 24: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

22

Imagen 2: Sitios que no incorporan responsive en su diseño: El diario de Hoy

www.elsalvador.com . Navegador Google Chrome Versión 46.0.2490.76 para Android

Page 25: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

23

Imagen 3: Sitios que no incorporan responsive en su diseño: La Prensa Gráfica

www.laprensagrafica.com . Navegador Google Chrome Versión 47.0.2526.73 y Mozilla

versión 42.0 para desktop.

Imagen 4: Sitios que no incorporan responsive en su diseño: La Prensa Gráfica

www.laprensagrafica.com. Navegador Google Chrome Versión 46.0.2490.76 para

Android

Page 26: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

24

Imagen 5: Sitios que incorporan responsive en su diseño: El blog www.elblog.com.

Navegador Google Chrome Versión 47.0.2526.73 y Mozilla versión 42.0 para desktop.

Imagen 6: Sitios que incorporan responsive en su diseño: El blog www.elblog.com..

Navegador Google Chrome Versión 46.0.2490.76 para Android

Page 27: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

25

Imagen 7: Sitios que incorporan responsive en su diseño: Starkcom

www.starkcomcsolutions.net . Navegador Google Chrome Versión 47.0.2526.73 y

Mozilla versión 42.0 para desktop.

Imagen 8: Sitios que incorporan responsive en su diseño: Starkcom

www.starkcomcsolutions.net . Navegador Google Chrome Versión 47.0.2526.73 y

Mozilla versión 42.0 para desktop.

Page 28: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

26

Imagen 9: Sitios que incorporan responsive en su diseño: Starkcom

www.starkcomcsolutions.net. Navegador Google Chrome Versión 46.0.2490.76 para

Android

Los inicios sobre el Responsive Design se presentan en el año 2000, cuando John

Allsopp plantea las diferencias entre el diseño impreso y el diseño web. Diferentes

tamaños de pantalla y capacidades del dispositivo hace que no se pueda enfrentar un

proyecto de diseño de este tipo con las concepciones de un proyecto cuya finalidad era

la impresión. No se tiene el control del tamaño, los colores o las tipografías.

Quince años han pasado desde las primeras teorías sobre el responsive design. Se

empezaba a identificar las dificultades provenientes de las nuevas tecnologías, diferentes

dispositivos de uso, con diferentes capacidades; para que la web pudiera enfrentarse a

las nuevas tendencias, no se podía trata con el concepto tradicional, el formato de web

para impresión.

En 2009 Ethan Marcotte publicó un artículo sobre diseño web con rejillas fluidas. Definía

el concepto de diseño fluido con exactitud para solucionar la adaptabilidad a la pantalla

de cada dispositivo la maquetación de una página web. Esos fueron los pasos previos.

Un año después (2010) se da el nacimiento o a la conceptualización de Responsive Web

Design(20)

Page 29: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

27

Fue hasta el año 2010 en el que Ethan Marcotte define con claridad lo que sería la

respuesta a la complejidad de la maquetación de la web en los diferentes tamaños de

pantalla, nace así una nueva herramienta de diseño para los programadores web.

Jeremy Keigh en la conferencia “One Web” plantea que, la solución para crear sitios

adaptados a cada dispositivo era la de realizar desarrollos independientes que se

amoldasen a las características de cada aparato. El coste de desarrollo y el crecimiento

de los dispositivos conectados hacen que esta forma de concebir un proyecto sea

insostenible y quede desfasado en un futuro(20).

El inconveniente de las páginas web tradicionales era que estaban desarrolladas con

base en un modelo de dispositivo y características específicas.

Con el crecimiento de la tecnología y el surgimiento de nuevos dispositivos, se tenía que

desarrollar una web para cada tipo de dispositivo, involucrado mayor inversión economía

y recursos tecnológicos, difícil de mantener y que con mucha probabilidad quedarían

obsoletos en un futuro cercano.

El Boston Globe (Periódico de la ciudad de Nueva York) ha sido el primer portal de

prensa online en implementar un rediseño en términos de responsive design, marcó un

precedente y una tendencia que posteriormente seguirían medios de comunicación

influyentes: la revista Time, el canal BBC One, e incluso el New York Times en una

propuesta de rediseño de su web futuro(21).

La primera empresa que aposto por el uso de responsive design fue un periodo estadounidense, El Boston Globe, marco referencia y tendencia entre los medio de información digital, sumándose a esta tendencia los demás medios de comunicación. Está apuesta marco un inicio de lo que el futuro de la web traería para los desarrolladores y las empresas deberán enfocarse.

Gráfico 2: Línea del tiempo de hechos importantes en el desarrollo de la web (22)

Page 30: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

28

Ventajas Responsive Design

1. Permite incrementar visibilidad en dispositivos de diferente resolución, tales como

tablets, smartphones, laptops, desktops, etc.

2. Existe un diseño unificado y coherente para el usuario final, a través del uso de

hojas de estilos con CSS, lo cual permite una mayor comodidad para el cliente que

logra familiarizarse con la navegación en el sitio a pesar de utilizar un dispositivo

diferente para ingresar en cada ocasión.

3. Facilidad de controlar las estadísticas de uso de la web a través de la herramienta

de preferencia del cliente.

4. Mejoras en el SEO, a través de una estrategia común para todo el sitio, logrando

así optimización en los diferentes motores de búsqueda.

5. Optimización de tiempo para gestionar el sitio, ya que no es necesario dar

mantenimiento a varias versiones, sino que éste se realiza a un solo código, lo

cual tiene un impacto en la disminución de los costos de desarrollo, soporte y

mantenimiento.

6. Uso de HTML5, que facilita la visualización offline en diferentes dispositivos.(23)

Etapas del desarrollo web trabajado con responsive

Como cualquier proyecto, el trabajo de desarrollo de un sitio web conlleva diferentes

etapas que incorporar estrategias tanto técnicas como administrativas, a fin de no dejar

de lado ningún requerimiento presentado por la organización o cliente y realizando un

desarrollo de última generación, que logre satisfacer las necesidades de los usuarios

finales.

A diferencia de los proyectos realizados hace unos cuantos años, en los cuales las web

eran trabajadas bajo un desarrollo estático, actualmente se trabaja con modelos que

combinan los diseños responsive, donde la disposición de los recursos según la

resolución y la facilidad de navegar en el sitio, se convierten en una de las prioridades

principales. (24)

Las fases se pueden detallar según el siguiente flujo:

Fase de investigación

1. Recolección de requerimientos: Contacto y recolección de requerimientos con el

cliente en la cual se detallan todas las necesidades que deben ser cubiertas a la

hora de desarrollar la plataforma o sitio web, en esta etapa es importante delimitar

quien será el contacto o quien cumplirá el rol de contraparte interna para el

respectivo seguimiento del proyecto y cuáles serán los plazos que deben

Page 31: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

29

cumplirse, respetando las fechas de entrega y tomando en cuenta diferentes

factores que pueden llegar a limitar el alcance del proyecto como tal.

2. Análisis: Como cualquier proyecto, antes de la puesta en marcha del mismo, es

necesario analizar el mercado, principales competidores y estudio del público

objetivo, esta fase puede ser respaldada por medio de entrevistas y encuestas

para conocer con más detalle las facilidades que deben manejarse a la hora de

estar trabajando el diseño y desarrollo de la web. Esta información le proporciona

al desarrollador/diseñador, una guía eficiente para comprender la marca y el

producto y ajustar la solución a la necesidad inicial de una forma más eficiente.

3. Estructura y estrategia de contenidos: A partir de la información recolectada en la

fase de análisis, se debe realizar una auditoría para validad lo que ya se tiene y

las mejoras que se le pueden realizar a dicho contenido. A través de la entrega de

un mapa del sitio, el cliente tendrá una mayor visibilidad sobre el aspecto final del

proyecto que se entregará y sobre todo de la funcionalidad que le brindará al

usuario final. Esta etapa es de suma importancia, ya que aporta información crucial

al desarrollador para trabajar la funcionalidad y al diseñador para la adaptabilidad

de la interfaz gráfica.

4. Optimización: Es necesario que el cliente comprenda las mejores prácticas que

serán implementadas para que el sitio web finalizado tenga el impacto que ellos

desean. Entre estas prácticas se detallan optimizaciones en buscadores,

organización de contenidos, diseño responsive que permite adaptabilidad a

dispositivos, y permite tener un enfoque más extenso para el usuario final.

5. Dirección estratégica: Toda la información que se recolecte en la etapa de

investigación deberá ser documentada para tener un mejor control de las

estrategias, tecnologías y optimizaciones que serán trabajadas. Dicho documento

permitirá brindar una mayor visibilidad y todos los miembros del equipo o comité

estarán alineados en las acciones que realicen para un mejor resultado final.

Diseño

1. Priorización de contenidos: Debe definirse una jerarquía de los contenidos,

ordenando de mayor a menor relevancia, dichos contenidos que compondrán cada

página deben mantener independencia del dispositivo que se esté utilizando para

visualizarse. Al priorizar los contenidos, se estará alineado con los objetivos que

la web debe cumplir.

2. Wireframes: Es la etapa que permitirá tener un esquema o una maqueta del sitio,

permitiendo realizar un proceso en el cual el cliente nos brinde un feedback sobre

la organización de la información y contenidos gráficos de la web. Dicho wareframe

debe ser adaptativo para todos los dispositivos, con el fin de brindar una mayor

visibilidad al usuario final.

3. Diseño visual: Teniendo en cuenta que los contenidos e información están

estructurados de la forma correcta gracias al feedback recopilado con en la etapa

Page 32: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

30

de prototipado o wireframe, se conceptualiza la imagen de la marca, colores, logos

y tipografías para estandarizar la apariencia del sitio o página.

4. Guía de estilos: Este apartado permitirá documentar la correcta implementación

del diseño del sitio o página, tomando en cuenta los elementos que facilitarán el

uso del cliente como encabezados, botones, menús para jerarquizar la

información, enlaces, entre otros elementos. A través de esta documentación se

pretende brindar una visualización de la web apegada al resultado final, que

dependiendo de la complejidad del sitio o página, puede trabajarse con diferentes

softwares especializados y combinados para lograr un mejor resultado final.

Desarrollo

1. Plantilla: Es el apartado que permitirá la construcción de la plantilla web haciendo

uso de HTML5. En este apartado deben incluirse elementos tales como el diseño

adaptativo, tomando en cuenta la priorización de contenidos que se revisó en la

primera fase, lo cual facilitará, a través del mapa del sitio, un control ordenado

según los diferentes estilos de diseño, tales como CSS3 y cumplimiento de

estándares como W3C. La interactividad del sitio se realizará por medio de JQuery

y Javascript, lo cual permite que el sitio sea más funcional que utiliza Flash o

Silverlight por ejemplo. Esto forma parte de las mejores prácticas para realizar la

maquetación antes del inicio de implementación del sitio.

2. Integración en CMS: Es la etapa que permite integrar la plantilla en la plataforma

del cliente, y a partir de esta fase, se crean los componentes adicionales que son

necesarios para darla continuidad a la creación del proyecto, se acuerdo a las

necesidades expuestas por el cliente.

3. Compatibilidad: Esta etapa hace referencia a la compatibilidad con los

navegadores, tanto de escritorio, como las versiones para móviles. Esto se realiza

con el objetivo que los contenidos puedan ser visualizados de forma correcta en

el navegador, creando experiencias que resulten coherentes en los diferentes

dispositivos utilizados.

Entrega

1. Carga al servidor: Luego de las pruebas de funcionalidad, el sitio o página web

está listo para ser cargado en el servidor del cliente y en esta etapa se define el

plan de mantenimiento y actualizaciones a la web que se ha desarrollado.

2. Pruebas de aceptación: Es la etapa en la que se recibe feedback del cliente sobre

la funcionalidad del sitio y si éste cubre las necesidades que se plantearon a la

hora de recolectar los requerimientos.

3. Documentación y formación: Adicional a la documentación que se entregará al

cliente, es necesario realizar un plan de entrenamiento o capacitación para el

personal que hará uso de la web y al equipo de informática que le dará

mantenimiento al mismo, se define un periodo de prueba para la resolución de

Page 33: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

31

dudas técnicas y posibles errores que se presenten, y es la etapa previa al

lanzamiento en masa o implementación final del sitio.

4. Plan de lanzamiento: Implementación de copias de seguridad, y fase en la que se

da de alta en la web en los principales buscadores. En este punto es necesario

también definir las herramientas de análisis que el cliente utilizará para

comprender el funcionamiento de su web y a cuales puntos debe darles un mayor

seguimiento. (24)

CAPITULO 2: DEFINICIÓN DEL PROBLEMA

2.1 Definición del problema

La tecnología cambia constantemente y surge la necesidad de adaptarse a esos cambios.

La aparición de los smartphones y las tablets es uno de los cambios más significantes.

Con los nuevos dispositivos es posible acceder a Internet sin la necesidad de tener un

ordenador.

Esto deja al descubierto una necesidad: la forma de dar soporte a esos dispositivos, cada

uno con unas dimensiones específicas, para la correcta visualización de la web.

El uso de dispositivos móviles creció 61% en América Latina, mientras que el uso de

computadores para conectarse a Internet registra una caída de 11.3%. Los smartphones

crecen a un ritmo superior al de las tablets. Con base de la información de más de 50

millones de usuarios, el empleo de celulares para navegar en Internet se incrementó en

70.1% y, de tablets, en 32%.(25)

El uso de los móviles en América latina crece a pasos agigantados, por el contrario, el

uso tradicional de ordenadores o computadores ha tenido un déficit significativo, además,

lo móviles son empleados para la navegación en 71%. Estos datos ratifican la importancia

y necesidad que tienen los programadores de aplicar el responsive design en la creación

de nuevas páginas web.

2.2 Importancia de la investigación

La tecnología cambia constantemente y surge la necesidad de adaptarse a esos cambios.

La aparición de los smartphones y las tablets es uno de los cambios más significantes.

Con los nuevos dispositivos es posible acceder a Internet sin la necesidad de tener un

ordenador.

Page 34: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

32

Esto deja al descubierto una necesidad: la forma de dar soporte a esos dispositivos, cada

uno con unas dimensiones específicas, para la correcta visualización de la web.

El uso de dispositivos móviles creció 61% en América Latina, mientras que el uso de

computadores para conectarse a Internet registra una caída de 11.3%. Los smartphones

crecen a un ritmo superior al de las tablets. Con base de la información de más de 50

millones de usuarios, el empleo de celulares para navegar en Internet se incrementó en

70.1% y, de tablets, en 32%(25) .

El uso de los móviles en América latina crece a pasos agigantados, por el contrario, el

uso tradicional de ordenadores o computadores ha tenido un déficit significativo, además,

lo móviles son empleados para la navegación en 71%. Estos datos ratifican la importancia

y necesidad que tienen los programadores de aplicar el responsive design en la creación

de nuevas páginas web.

La importancia de la investigación a realizar recae en la adaptabilidad de los usos de los

nuevos dispositivos por parte de los clientes, al no marginar el acceso a los sitios web a

un simple computador, sino permitir la integración de otros dispositivos inalámbricos,

logrando así una mayor penetración de mercado para las empresas que utilicen el Web

2.0 que fue una de sus fuentes de inclusión comercial.

El incremento del uso de dispositivos móviles para navegar por Internet es una realidad,

que llega a superar incluso a los usuarios que se conectan por medio de una laptop o

computadora de escritorio. Esto provoca la necesidad de crear sitios medianamente

inteligentes que sean capaces de adaptarse a cualquier tipo de situación.

Adicional, al no tener contenido duplicado para la adaptabilidad de cada plataforma, se

afectan dos factores dentro de la empresa: Costos y tiempo.

Los costos y tiempos, son factores que reflejan una reducción proporcional, a través de

una implementación que requiere un solo tipo de enfoque a la hora de ser desarrollada,

por ejemplo, un programador y un diseñador web, tendrán que emplear una sola jornada

de tiempo para implementar el proyecto a seguir, cuando con anterioridad, se tenía que

trabajar un desarrollo individual para computadoras y otro para móviles, alargando los

tiempos de respuesta de parte de los involucrados en el proyecto y generando así un

incremento en los costos por implementación y mantenimiento.

2.3 Planteamiento del Problema

Con el paso del tiempo, las tecnologías se han convertido en un elemento fundamental e

infaltable dentro de las gestiones realizadas por las empresas, en especial por aquellas

Page 35: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

33

que requiere facilitar un contacto con los clientes por diferentes canales, por ejemplo, el

social media y el acceso a sitios web.

Adicional el auge de los dispositivos utilizados por las personas para conectarse a

Internet, ya no se limita solamente a una computadora, ya sea portátil o de escritorio, sino

también a dispositivos móviles que requieren conexión a la red para facilitar gestiones a

sus usuarios, que vayan relacionadas con sus intereses:

Diversión

Intereses laborales

Compras en línea

Negocios

Servicios académicos

Comunicación

Lo ideal sería que a la hora de acceder a un determinado sitio para suplir ciertas

necesidades de comunicación y/o adquisición, los usuarios tuvieran la facilidad de no

preocuparse por la búsqueda de información en dichos sitios, o si el manejo de la interfaz

del mismo, será compleja o sencilla, incluyendo algunos factores: la visualización de la

página principal, y sus contenidos que deben ser listados.

A través de estas técnicas, se facilita la percepción que el usuario tiene de un sitio

determinado y de los diferentes accesos que están involucrados en el mismo.

La modificación de los modelos de presentación de información y contenidos dinámicos

y estáticos en los sitios web, ha creado la necesidad de estandarizar el desarrollo para la

visualización en las diferentes plataformas que son utilizadas por los clientes.

La facilidad de adaptación de los contenidos, independientemente del tipo de dispositivo

utilizado, permite crear un impacto positivo en los usuarios, a través de un fácil y sencillo

manejo de plataformas que le brindan acceso a información y servicios de su interés.

Una disminución de los costos de mantenimiento y tiempos de resolución, al utilizar

menor cantidad de recursos y trabajar menos cantidad de información, permite brindar

un impacto positivo para que a través de dicho ahorro, se puedan implementar estrategias

de mejora en otras áreas relacionadas de la empresa.

Básicamente, la necesidad recae en el incremento del uso de dispositivos móviles para

la navegación en Internet y el interés que el Responsive Design ha provocado en los

últimos años, por ser una tendencia que permite crear posicionamiento de mercado ya

sea de la marca o de la compañía, proporcionando:

Visibilidad en usuarios de dispositivos móviles

Page 36: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

34

Mejora en la experiencia del usuario

Análisis de información de dichos usuarios por medio de sus tendencias de

navegación

Mejora en la visibilidad de los motores de búsqueda de Internet

Ahorro de costos y tiempos en desarrollo, implementación y gestión del sitio web.

2.4 Delimitación del problema

El problema será delimitado de la siguiente manera:

Las ventajas del desarrollo responsive, como herramienta de última tendencia para el

desarrollo en línea, enfocado hacia los desarrolladores web que trabajen en o para

instituciones públicas y/o empresas privadas y presenten, a través del uso de este

modelo, los beneficios técnicos a la hora de desarrollar e implementar, mejorando la

experiencia de navegación de los usuarios en dispositivos con diferentes resoluciones,

tales como computadoras, tablets, Ipads y Smartphones. Dicha investigación será

realizada en el segundo semestre de 2015, en el Área Metropolitana de San Salvador.

2.5 Alcances de la investigación

A través de la investigación se pretende:

Establecer parámetros de medición sobre la utilización de responsive en los

desarrolladores web de empresas privadas y/o instituciones públicas en la zona

metropolitana de San Salvador, dichos desarrolladores pueden ser contratación

interna de la organización o contrataciones tercerizadas.

La investigación permitirá obtener resultados del impacto del uso de responsive a

nivel técnico, referente a la disminución de recursos para el desarrollo y el

mantenimiento de la web.

A partir de la implementación de responsive en las empresas o instituciones, la

investigación pretende medir el impacto comercial y mejoras en el posicionamiento

de mercado para las empresas y organizaciones, como una estrategia para facilitar

la navegación en la web para los usuarios finales.

2.6 Limitaciones

Las limitaciones a la hora de realizar la investigación son las siguientes:

Acceso a la información en las organizaciones tomando las restricciones de las

políticas de seguridad, para compartir metodologías de trabajo dentro de su flujo

de desarrollo e implementación de proyectos web.

Page 37: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

35

Apertura al cambio en la metodología de trabajo de parte de los desarrolladores,

tomando en cuenta que responsive es una metodología relativamente nueva en

comparación con los estándares de desarrollo tradicional.

2.7 Justificación

Debido al creciente auge de tecnologías de innovación en el área de desarrollo web,

surge la necesidad de ajustar los recursos existentes, para que éstos sean más eficientes,

y para que las técnicas utilizadas para su desarrollo y posterior mantenimiento, estén a

la vanguardia de las últimas actualizaciones, con el fin de ofrecer un mejor resultado y

una experiencia creciente a los usuarios finales.

El objetivo de la investigación es reflejar el beneficio técnico y financiero que se obtendrá

al utilizar esta herramienta de última tendencia de desarrollo en línea, que permitirá la

optimización de recursos en las organizaciones que trabajen con desarrolladores que

utilicen dicha metodología.

Adicional la investigación permitirá validar si los desarrolladores web utilizan la

metodología responsive para el trbajo de sus páginas web, permitiendo así evaluar la

relación costo beneficio entre un sitio tradicional y uno trabajando con un diseño

adaptativo.

2.7 Objetivo General

Identificar las ventajas del uso del Web Responsive Design como herramienta para el

desarrollo web.

2.8 Objetivos específicos

1. Determinar si los desarrolladores web de las empresas en el Área

Metropolitana de San Salvador han trabajado sus páginas web bajo el modelo

responsive.

2. Evaluar la relación costo beneficio con el cliente, entre un sitio web responsive

versus un sitio web tradicional.

Page 38: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

36

CAPITULO 3: INVESTIGACIÓN Y DIAGNÓSTICO

3.1 Tipo de investigación

La investigación realizada es de tipo descriptivo, debido a que se brindará información

detallada con relación a una situación determinada, en nuestro caso, el uso del web

responsive y las ventajas que esta metodología trae para quienes trabajan con ella en

diferentes ámbitos.

Adicional es de carácter descriptivo porque se someterá a análisis toda la información

recolectada por medio de entrevistas, para obtener conclusiones que puedan ayudar a

estudios futuros.

La investigación proporcionará resultados que ayudarán a medir los beneficios que las

empresas obtienen al utilizar dicha metodología y que tan viable es su uso dentro de los

estándares establecidos asociados al desarrollo web. Los datos obtenidos serán a partir

de los resultados de la investigación y estudio realizado, lo cual permitirá describir,

analizar a interpretar los datos obtenidos, en términos claros y precisos.

3.2 Metodología

La metodología utilizada será de carácter cualitativo, estudiando la realidad en su

contexto natural, se analizará la incidencia y los beneficios o ventajas que el uso de la

metodología responsive trae a los proyectos web, y a partir de ello se obtendrán

conclusiones de acuerdo a la población estudiada.

Adicional se ha elegido el enfoque cualitativo para la recolección de información, debido

a que la investigación realizada es de carácter descriptivo, y permite obtener

conclusiones del fenómeno a estudiar a partir de las opiniones que los sujetos expresaron

a la hora de ser entrevistados.

Los sujetos de la investigación son un todo, debido a que se estudia a las personas en el

contexto pasado y en las situaciones actuales en las que se desempeñan. Se ha

comprendido a los entrevistados, dentro de su marco referencial, sin ser intrusivos y

tratando de comprender y empatizar con el ambiente en el que se desenvuelven.

3.3 Objeto de estudio, sujeto de estudio, herramientas de recolección de información,

muestra.

Page 39: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

37

Objeto de estudio

Realizar el análisis de las ventajas del desarrollo responsive, como herramienta de última

tendencia para el desarrollo en línea, evaluando así el uso y los beneficios de esta nueva

metodología de trabajo.

Sujeto de estudio

Los sujetos de estudio de esta investigación serán desarrolladores web, que trabajen en

o para empresas privadas y/o instituciones públicas de la zona metropolitana del

departamento de San Salvador.

Herramientas de recolección de información

La técnica utilizada para la recolección de la información será entrevistas a profundidad,

las cuales serán desarrolladas por medio del instrumento elegido, que para esta

investigación es el cuestionario. A través de dichas entrevistas se busca descubrir la

rutina que siguen los desarrolladores dentro del proceso de creación e implementación

del sitio o página web, y el aporte o impacto que ésta nueva metodología de trabajo ha

traído a sus estándares de proyectos en línea.

Adicional el instrumento nos permitirá tener información del sujeto de estudio en su

ambiente cotidiano, sin manipular las opiniones de los mismos y nos brindará una

perspectiva real sobre la situación que se quiere investigar.

Muestra

Debido a la herramienta a utilizar para la investigación es la entrevista a profundidad, se

ha definido una muestra de 10 desarrolladores web, empleados de empresas privadas o

poseen empresas que brindan servicios tercerizados a empresas privadas o instituciones

públicas. Dicha muestra se detalla en los anexos del documento.

3.4 Resultados de la Investigación: Análisis de entrevistas a profundidad

PLANIFICACIÓN

1. ¿Existe una planificación de los proyectos asociados al sitio o página web de la

empresa?

Al consultar a los entrevistados si poseen una planificación de los proyectos asociados a

su sitio o página web, como lo muestra el anexo 3, el 90% respondió afirmativamente,

señalando así la importancia de no improvisar las gestiones de solución de los

requerimientos de sus clientes y tener un amplio panorama de los avances de cada etapa

del proyecto.

Page 40: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

38

Sin embargo los hallazgos reflejan que la mayoría de las empresas, aproximadamente

un 40% del total de entrevistadas, no poseen un equipo definido o comité web para dar

el respectivo seguimiento a las diferentes fases desde la recolección de requerimientos

hasta la etapa de implementación.

Estas empresas que no poseen con un comité web establecido, dejan caer la

responsabilidad sobre el jefe del área de desarrollo o sistemas o personas que tienen

experiencia en el área del diseño y la implementación, pero que no tienen una función

específica para llevar a cabo dicha responsabilidad.

Por lo tanto, existe la necesidad de definir las fases fundamentales que permitan

implementar exitosamente los requerimientos obtenidos de parte del cliente, a través de

funciones específicas para dar el respectivo seguimiento a cada una de las etapas

existentes en la planificación del proyecto, esto refleja la necesidad de involucrar un

modelo de negocio en línea y llevar a cabo la creación de un equipo que brinde

seguimiento al desarrollo de dicho modelo.

Sin embargo, a pesar de no tener un equipo definido, que cumpla con funciones

específicas formales para el trabajo de los sitios o páginas web, las empresas tienen

definido un esquema general dentro del proceso de planificación.

Este esquema general, abarca diferentes actividades: planificación de tiempos o

cronograma del proyecto, asignación de responsables de cada tarea (en los casos que

exista más de una persona involucrada en el desarrollo de la plataforma), reuniones de

rendición de cuentas para presentación de avances, definición de estructura, creación de

ambiente de pruebas, cargas de contenidos, revisiones, aprobaciones, pruebas de

estrés, entre otros elementos.

2. El proceso de creación, pruebas e implementación de su web site ¿Es de carácter

interno o es por medio de contratación de capacidades externas a la institución

(Outsoursing)?

El anexo 3 muestra que el 70% de los entrevistados, coincide en que los procesos de

pruebas e implementación de sus sitios y páginas web es de carácter interno, aunque

dejan en claro que muchas veces esto varía dependiendo la naturaleza del proyecto que

deban ejecutar.

Estas empresas que realizan sus proyectos de forma interna, poseen personal

capacitado para realizar las respectivas pruebas y participar de forma completa en el

proceso de creación del sitio o página web. Son ellos, los encargados de controlar las

tecnologías aplicadas al sitio web, los requerimientos, entre otros y están enterados de

las necesidades que deben cumplirse para su buen funcionamiento y rápida

implementación.

Page 41: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

39

El 30% restante, ofrecen servicios tercerizados a empresas que no poseen la capacidad

para realizar su propio diseño e implementación.

Las principales causas por las que muchas organizaciones optan por una empresa

tercerizada, es porque todo su personal se encuentra enfocado en otras tareas, y no le

es posible reasignar funciones para que trabajen en los proyectos del área web, o dicho

personal no tiene la especialización o capacidad suficiente para cubrir todos los

requerimientos que la empresa posee.

Así mismo, tienen un presupuesto limitado para hacer contrataciones por períodos de

tiempo para que se trabajen los proyectos, por lo que recurrir a un Outsource se convierte

en la opción ideal en cuanto a costos y posiblemente tiempos de entrega.

Esto refleja la necesidad que algunas organizaciones poseen sobre los proyectos de tipo

web, en elementos críticos para la empresa: los presupuestos, perfil de puestos para

llevar a cabo las funciones, entre otros.

Es necesario que se esquematice desde un inicio el tipo de proyección y penetración de

mercado que la organización desea, para detallar la cantidad de personal y las

especificaciones y habilidades técnicas que sean requeridas, con el fin que dichos

proyectos web, puedan ser implementados por organismos internos de la empresa.

El poseer una contraparte interna que dé el seguimiento necesario con el Outsource,

permite que exista un manejo más ordenado y completo de los elementos involucrados a

la hora de trabajar los requerimientos, de igual forma, permite tener una retroalimentación

más oportuna ante las pruebas de depuración e implementación.

3. Si la construcción del sitio o página web se realiza por medio de un Outsoursing,

¿Cuál es el papel que juega la contraparte interna de la organización para el éxito

del proyecto web? ¿Cuál fue la principal razón por la que la empresa no realizó la

implementación del sitio de forma interna?

El 30% que ofertan o utilizan servicios tercerizados para la creación e implementación de

sus sitios y páginas web (Según detalla el anexo 3), ven el rol de la contraparte interna

de la empresa con la que trabajan, a modo de aquella que permite dar visibilidad y llevar

un seguimiento de las fases del proyecto, pero que dicha figura, solamente existe en las

empresas privadas, debido a que las instituciones gubernamentales no definen este rol

debido a la división de responsabilidades existentes.

Adicional, juega un papel de auditor de los requerimientos, de la seguridad y de la

confidencialidad del proyecto y brinda una guía para alcanzar el objetivo propuesto.

Page 42: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

40

En cuanto a la razón por la que no se lleva a cabo la implementación de forma interna es

porque se prefiere pedir cuentas a un tercerizado en la etapa de planificación,

implementación y pruebas y resulta más fácil entrenar a los recursos informáticos de la

empresa.

Una vez el proyecto haya finalizado, para que estos puedan darle el respectivo

seguimiento, el beneficio para las empresas o instituciones gubernamentales, recae en

no contratar personal de forma innecesaria y brindar un seguimiento que permita reducir

costos en un tiempo determinado.

Es necesario que se refleje la posibilidad del auge de las empresas Outsource para el

seguimiento y la implementación de los proyectos web, porque si el giro de las empresas

no es 100% desarrollo y diseño de sitios y páginas, el uso de una compañía tercerizada

implica una reducción de costos a nivel de presupuesto de contratación.

Es más factible que los recursos informáticos de la empresa se encarguen del

mantenimiento posterior a la puesta en producción, ya que a nivel de costos es más

beneficioso para la compañía, comparando este costo de capacitación para dar

seguimiento al funcionamiento de la plataforma, contra la inversión en un entrenamiento

inicial para que dicho departamento de informática ejecute la tarea de implementación

del sitio desde un inicio.

REQUERIMIENTOS

4. Definición de audiencia: ¿Su sitio o página web posee con una segmentación por

capacidades, necesidades y ubicaciones para sus usuarios?

En cuanto al diseño o estructura del sitio o página web, los hallazgos detallados en el

anexo 3, demuestran que esta es realizada según los requerimientos del cliente: sitios

dinámicos, con botones superficiales que permitan facilitar la navegación por el sitio, son

ejemplos de algunos elementos utilizados a la hora de diseñar la página o sitio web.

Adicional, para las empresas que realizan su implementación de forma interna, se tiene

conocimiento de las necesidades de su cliente, y la segmentación de la misma surge con

naturalidad. La estructura básica, se apega al tipo de servicio ofrecido por la compañía,

por lo que dichos requerimientos asociados a la audiencia van relacionados íntimamente

con la necesidad que se planteó antes de iniciar el desarrollo del sitio.

Sin embargo, los mismos hallazgos reflejan que muchas veces estas necesidades no son

contempladas de forma tan específica y que no se valorizan factores, por ejemplo,

usuarios con capacidades especiales, existiendo un vacío en cuanto a la orientación del

sitio o página web, dejando de lado normas de Accesibilidad que han sido recomendadas

en los estándares internacionales.

Page 43: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

41

Es necesario, según lo reflejado por los entrevistados, que exista una segmentación

específica que lleve a incluir diferentes factores, por ejemplo capacidad física y técnica,

conocimientos del programa, necesidad de información y ubicación geográfica para tener

una mejor visualización del público objetivo que utilizará el producto que se está

desarrollando.

5. ¿Cuáles son las audiencias que tienen previstas? (Por capacidades técnicas, por

capacidades físicas, por conocimiento de la institución, por necesidades de la

información o por ubicación geográfica).

Al consultar a los entrevistados aproximadamente el 60% tiene previstas audiencias por

necesidades de información, conocimiento de la institución y capacidades técnicas. Una

minoría del 20% de los entrevistados refleja que dichas audiencias son basadas en el

giro del negocio o capacidades físicas. (Ver anexo 3).

Los hallazgos reflejan la preocupación en solventar la necesidad de acceso por medio de

detalles simples: los enlaces a otras páginas del sitio, o complejos, por ejemplo: los

buscadores, con el fin de facilitar la experiencia del usuario a la hora de utilizar la

plataforma web.

Los hallazgos demuestran también que los desarrolladores se preocupan por estructurar

de una forma adecuada la información de la empresa o institución, con el fin de simplificar

la búsqueda de información a los usuarios, todo esto va de la mano con diferentes

factores, por ejemplo, la necesidad de información.

Sin embargo, los hallazgos demuestran que los desarrolladores web solamente

concentran su atención en una segmentación de audiencia específica, dejando de lado

otros factores que permitan enfocarse a un tipo diferente de usuarios, creando la

necesidad de definir los diferentes tipos de público objetivo al que se quiere llegar a la

hora de plantear los requerimientos del sistema.

Dichos requerimientos deberían ser planteados por el director del proyecto, rol que no se

encuentra definido en los escenarios del público entrevistado.

6. ¿Sabe usted la razón por la cual los usuarios finales (Clientes externos) vendrán

a su sitio o página?

Como lo muestra el anexo 3, el 100% de los entrevistados dicen conocer la razón por la

cual los usuarios finales del sitio o página web se acercarán a consultar información,

logrando mantener un orden que permite categorizar prioridades para facilitar el acceso

a la información y así cubrir una necesidades iniciales.

Page 44: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

42

El conocer a profundidad la razón de la visita de los clientes a sus sitios, permite buscar

las mejores oportunidades para lograr posicionar dicho plataforma web brindando una

mejora en los diferentes rubros, tanto nacional e internacionalmente.

A pesar que los entrevistados tienen bien definido este punto, los hallazgos reflejan que

aproximadamente solo el 40% posee un método específico de recolección de

información, que le permite tener una vista más detallada de la necesidad real de sus

usuarios finales.

Esto refleja la necesidad de incorporar dentro de la planificación previa a la entrega de

requerimientos, métodos de estudio que permitan comprender mejor el mercado objetivo

hacia el cual se quiere llegar, para así lograr una solución más óptima de las necesidades

planteadas al inicio.

7. ¿Se tiene una metodología a seguir para la recolección de requerimientos

funcionales del sitio o página (Formularios, envío de notificaciones por email,

impresión de contenidos, mapa del sitio)?

Al consultar a los entrevistados, el anexo 3 detalle que el 90% indica tener una

metodología para la recolección de requerimientos funcionales para el desarrollo y la

implementación de las páginas y sitios web. El 10% emplea mapas del sitio y el 20%

utiliza formularios de contacto, permitiendo recolectar la información necesaria para dar

el seguimiento apropiado a los casos planteados.

Otro 10% utiliza la metodología de SCRUM, que lleva el trabajo de forma ordenada a

través de requerimientos obtenidos y trabajados en fases o Sprints. El restante de los

entrevistados, según los hallazgos, utiliza métodos pragmáticos, la mayoría se apega a

la forma de trabajo del cliente y la facilidad que este tenga de proporcionar la información

sin necesidad de funcionar bajo una metodología establecida.

A través de esta forma de trabajo, nace el requerimiento de listar y tener definidos las

diferentes formas a través de las cuales, las personas involucradas en el desarrollo del

proyecto podrán obtener la información que necesitan, y podrán documentar

adecuadamente las diferentes fases de una forma estándar y no aplicar un método de

trabajo diferente para cada tipo de cliente que se atienda, sino que todos vayan alineados

a una metodología según cada necesidad.

Todos estos elementos: notificaciones por correo electrónico, impresión de contenidos,

formularios y mapas del sitio, permiten documentar todo el procedimiento y dejar un

respaldo que servirá de apoyo a la hora de la construcción de los manuales para el

mantenimiento del aplicativo web.

Page 45: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

43

8. ¿Su sitio o página web posee con las siguientes características: consistente,

uniforme, visible?

El 100% de los entrevistados, según el anexo 3, afirmó tener el diseño de su sitio con las

características de consistencia, uniformidad y visibilidad. Ellos consideran que es la mejor

práctica para desarrollar un sitio o una página web.

Los hallazgos reflejan que al estructurar el proyecto web recrean una maqueta digital en

la que se respetan ciertos patrones que les permitan crear un estándar para las diferentes

páginas que conformen el sitio y se logre mantener la uniformidad a la hora que el usuario

final navegue.

Es considerado que esta estructura marca una tendencia en Internet, debido a que los

proyectos se encuentran establecidos en plantillas diseñadas sobre estándares actuales.

El uso de este tipo de estructura, facilita también la visualización del sitio o página desde

diversos dispositivos, brindando adaptabilidad para estar a la vanguardia del mercado.

Sin embargo, dichos hallazgos reflejan que los entrevistados, no tienen bien definidas las

características de los sistemas de navegación, generando la necesidad de estandarizar

dicha conceptualización para ser aplicada de uniformemente a todos los proyectos de

carácter web que se trabajen y que estos vayan apegados a las necesidades de los

clientes, con el fin de mantener una estructura ordenada del sitio.

DISEÑO Y DESARROLLO DEL SITIO

9. ¿Su sitio o página posee con elementos básicos que permitan la fácil gestión de

áreas de contenido, áreas de interacción y experiencia del usuario?

El 60% de la población entrevistada indica que su sitio o página web posee elementos

que facilitan la gestión de áreas tanto de contenido y de interacción, mejorando así la

experiencia del usuario (Ver anexo 3).

A pesar de ello, los hallazgos indican que existe la necesidad de definir puntualmente los

contenidos de cada uno de estos elementos. En su mayoría, los entrevistados que forman

parte de este 60% expresaron que si lo realizan brindando un valor agregado al usuario,

pero que se trabaja con una estructura básica de interacción que no se encuentra

segmentada, ni que facilite la gestión de los contenidos del sitio.

Dicho anexo también detalla que de este 60%, solamente el 10% expresa que se trabaja

por medio de módulos, en los cuales el cliente o usuario final tiene una interacción directa,

lo que conlleva a trabajar una estructura más ordenada y de fácil visualización para

quienes estén navegando en cada uno de los apartados o módulos.

Page 46: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

44

La implementación de estos elementos básicos de fácil gestión, se realiza de forma

intuitiva, lo que refleja la necesidad de establecer métodos de recolección de datos que

permitan obtener oportunidades de mejora en la implementación de los sitios y páginas

web, con el fin de facilitar la experiencia del usuario final.

10. ¿A la hora de plantear el desarrollo y diseño de su sitio o página web, tiene una

lista de buenas prácticas que mejoren la implementación y el uso del mismo?

¿Cuáles serían? (Peso de las páginas, transmisión de datos, diagramación, hojas

de estilo, tablas, flash, frames, etc.)

El 90% de los entrevistados, los cuales se detallan en el anexo 3, indica tener un listado

de buenas prácticas para la mejora de la implementación y uso del sitio. Dichas prácticas

conllevan el uso de frameworks establecidos, optimización en motores de búsqueda,

preferiblemente con imágenes, brindando un posicionamiento de mercado ante usuarios

finales.

Dichos métodos se guían por medio de buscadores para obtener información en la web,

Modelos Vista controlador y metodología Scrum, y prácticas que se enuncian a

continuación: la preparación de imágenes web, no utilización de flash sino optimizar por

medio de HTML5, un código limpio y bien comentado, no utilización de publicidad

intrusiva, uso de etiquetas para imágenes y descripciones del sitio, responsive, entre

otros.

Los hallazgos reflejan que efectivamente, sin importar el tipo de buena práctica que se

utilice, los desarrolladores buscan utilizar herramientas de última tendencia, que les

permitan posicionarse de forma más rápida ante sus competidores y que le faciliten la

navegación al usuario final por medio de una transparencia y “limpieza” a la hora de

trabajar la estructura y detalles del diseño y desarrollo del sitio.

Es importante destacar, que el uso de estas y otras buenas prácticas en la creación e

implementación de un sitio o página web, permite capturar la atención del usuario, en la

cual, a través del uso continuo, se sentirá cómodo utilizando todos estos elementos

combinados, que para él, funcionaran de forma transparente.

11. ¿Considera el responsive design como el modelo estructural del futuro para el

desarrollo web?

Al consultar a los entrevistados, el 90% (Ver anexo 3) afirma que el Responsive Design

es el modelo estructural no solo del futuro, sino del presente para el desarrollo web. Los

hallazgos de la investigación indican que los desarrolladores reconocen el impacto que

provoca implementar esta metodología en sus proyectos y su efecto positivo en los

usuarios, aunque para dichos usuarios sea transparente y solo les permita tener

accesibilidad en todos los dispositivos, sin conocer el trasfondo del desarrollo.

Page 47: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

45

El acceso a los móviles (smartphones, tablets, iPad, etc.), es relativamente barato en el

mercado actual, a medida que pasa el tiempo, los usuarios que utilizan móviles para

interactuar con la web van creciendo, por lo que este tipo de diseño se convierte en una

necesidad dentro de los valores agregados a la hora de implementar cualquier proyecto

web.

Según estadísticas proporcionadas por la población entrevistada, el 80% del tiempo los

usuarios están revisando su celular, y el 30% de estos visualizan los sitios web de sus

compañías o de su interés por medio de un dispositivo móvil.

Es ahí donde aparece la experiencia de éxito proporcionada por el desarrollo responsive,

haciéndolo más atractivo a los usuarios finales. Si dicho sitio no provoca interés en el

cliente, independiente del tipo de plataforma donde esté ingresando, éste no continuará

realizando la búsqueda de información o simplemente dejará de navegar en él.

Los hallazgos también indican que, a pesar que no es una norma dentro del desarrollo

web, el migrar hacia plataformas que utilizan el modelo aumenta el tráfico de dichos sitios

y páginas donde ha sido implementado de la manera adecuada.

12. ¿Cuáles son las ventajas competitivas que la web design trae a su empresa?

La población entrevistada tiene muy claro que el uso del desarrollo responsive, trae

consigo beneficios para la empresa que está implementando este modelo en sus sitios y

páginas web.

A través de la definición de audiencia, los desarrolladores están conscientes de las

necesidades de los clientes, y la forma en la que éste demanda aplicativos que sean de

fácil uso y amigables, por lo cual procuran que todos los desarrollos cubran ciertas

características: una estructura amigable, fácil navegación, inclusión de segmentos según

el tipo de audiencia que utilice la plataforma, etc.

Adicional es importante recalcar el impacto que el diseño del sitio o página provocará en

el usuario, si este contenido se adapta al dispositivo que está utilizando.

Los hallazgos de la investigación reflejan que los desarrolladores web lo ofrecen

brindando un plus, pero va implícito dentro de la propuesta, tratando de recalcar a los

encargados o clientes, los beneficios a obtener por medio de este tipo de metodología,

proporcionando un control total de parte de quien desarrolla por medio de una estructura

personalizada.

Todo esto asociado a que el total de los entrevistados considera que su sitio web o los

sitios o páginas que construyen para sus empresas, son un escaparate de los servicios

Page 48: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

46

que brindan y una forma eficiente de atraer público potencial que conozca el

funcionamiento y la oferta que brinda la organización.

PERCEPCIÓN DEL USUARIO

13. ¿El responsive design presenta un método fácil de navegación y uso del web site

para el usuario?

A pesar que no todos los entrevistados utilizan el modelo responsive en sus empresas o

en el desarrollo que trabajan hacia sus clientes, el 100% de ellos considera que éste

proporciona un método que facilita la navegación (Consulta anexo 3) permitiendo la

adaptación del navegador sin importar el dispositivo utilizado y presentando la

información de una forma rápida y completa.

Adicional los hallazgos reflejan que los desarrolladores se preocupan por trabajar un

proyecto que permita utilizar la intuición del cliente, por medio de diferentes facilidades,

haciendo más fluida la visualización del contenido a través de menor cantidad de clics o

toques; así se logra disponer de forma natural los contenidos en espacios reducidos:

smartphones y tablets, por ejemplo, y se facilita la interacción del usuario final con la

página o sitio web.

14. ¿Recomienda usted a sus clientes un plan de desarrollo web basado en el modelo

responsive?

Al consultar a los entrevistados, según detalla el anexo 3, el 90% indica que si

recomiendan a sus clientes utilizar el modelo responsive en el desarrollo de sus sitios o

páginas web. Los hallazgos de la investigación indican que incluso, los desarrolladores

lo presentan siendo parte del todo del proyecto y no una opción en la que el cliente tiene

la oportunidad de decidir si es utilizada o no, es decir se realiza por defecto.

Existe la necesidad que el contenido del sitio o página esté al alcance de todos en

cualquier ámbito, y para ello, trabajar con web responsive brinda un valor agregado hacia

los usuarios finales.

Sin embargo, la investigación refleja que es necesario que los desarrolladores web

vendan la idea del uso de la metodología responsive de una forma más llamativa, para

que no solo sea realizada por defecto a la hora de crear e implementar el proyecto web,

sino que también pueda ser un verdadero valor agregado.

Esto permitirá a los directores del proyecto, contrapartes internas o cualquier

representante del cliente que ha planteado las necesidades iniciales, visualizar

cuantitativamente el beneficio que trae este tipo de desarrollo versus los sitios web

tradicionales, en cuanto a inversión de costos por desarrollo de diferentes códigos,

Page 49: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

47

contratación de personal, entrenamientos al área de informática, tiempos de respuesta y

entrega de proyectos, entre otros.

15. De utilizar responsive para la creación de sus web sites, ¿Cuáles han sido las

ventajas que ha encontrado a partir del momento en que se implementó esta

metodología dentro del sitio, desde la perspectiva costo – beneficio?

Los hallazgos reflejan que uno de los principales beneficios es la experiencia que el

usuario final tiene a la hora de navegar en el sitio o página web, debido a que lo realiza

de una forma más cómoda, por ejemplo para interactuar desde dispositivos móviles que

hoy por hoy, la mayoría de personas utilizan para visitar sitios web.

Esto mejora de forma potencial los indicadores de búsqueda y posicionamiento del sitio

o página en el mercado, logrando captar la atención de un público mayor y proyectando

mejoras en comercialización de información, productos o servicios, lo cual es un beneficio

a largo plazo para la empresa.

La investigación de igual forma, refleja que el principal beneficio al trabajar con esta

metodología es que no es necesaria la inversión para el desarrollo de diferentes versiones

para cada dispositivo que el cliente utilice, sino que permite trabajar bajo un mismo código

maquetado que utiliza HTML5 y CSS3, lo cual reduce costos, debido a que solamente se

tiene que realizar un desarrollo para todo el sitio y no 2 o 3, lo que ocurría con los web

sites tradicionales y sus versiones para escritorio y móviles.

Esto incurre en tiempos de entrega más rápidos, facilita el mantenimiento de la plataforma

web y no es necesario tener un personal encargado para cada tipo de desarrollo, sino

que un solo equipo es capaz de dar el seguimiento desde que se recibieron los

requerimientos, hasta las pruebas e implementación del mismo.

Adicional los entrevistados indican que la creación de plantillas reutilizables y el uso de

frameworks, algunos más complejos que otros, siempre traen un beneficio que se verá

reflejado en los costos de los diferentes proyectos web a implementar.

Page 50: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

48

CAPÍTULO 4: CONCLUSIONES Y RECOMENDACIONES CONCLUSIONES

Con base en la investigación realizada, se concluye que:

1. El uso de Responsive Design en el desarrollo y la implementación de sitios web,

mejora radicalmente las técnicas de programación web habituales, ya que permite

estandarizar el uso de tecnologías que faciliten el desarrollo del sitio o página web

como tal, proporcionando eficiencia en las gestiones realizadas y optimizando

tiempos de resolución de parte del área técnica.

2. Los desarrolladores de la zona metropolitana de San Salvador, utilizan la

metodología responsive no solamente como un valor agregado a elección del

cliente, sino como un elemento implícito en los desarrollos e implementaciones

que trabajan para las organizaciones, proporcionando así, un impacto positivo en

los usuarios finales, y mejorando los niveles de posicionamiento de la empresa o

institución a través de una navegación más intuitiva y de fácil uso.

3. La implementación y mantenimiento de sitios y páginas web por medio de

Responsive Design, le brinda a los desarrolladores web un uso eficiente de los

recursos del área informática, al trabajar bajo una metodología estándar que es

aplicable para diferentes tipos de dispositivos y resoluciones, que permiten vistas

adaptativas en computadoras, tablets, smartphones, etc., lo cual al hacer un

comparativo de costos con el desarrollo y mantenimiento de un sitio traidicional,

refleja utilidades hasta un 25% por más rentables, lo que permite comprender la

transcendencia del uso de esta metodología no solo por el beneficio técnico sino

también por el ahorro costo-beneficio.

Page 51: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

49

RECOMENDACIONES

Con base en las conclusiones, se recomienda:

1. Implementar todas las mejoras continuas en el mantenimiento de los proyectos

web a través del uso de responsive, como una herramienta de estandarización de

tecnologías, con el fin de estructurar de forma ordenada todos los elementos

asociados al uso eficiente para los recursos, para obtener una resolución óptima

a los requerimientos del cliente, los cuales deben ser solventados de parte del

área técnica.

2. Promover el desarrollo de propuestas de plataformas web con un enfoque de

seguimiento oportuno a las necesidades de los usuarios finales, para lograr

mantener el funcionamiento de la plataforma web de acuerdo a los estándares

solicitados, con el fin de brindar soluciones adecuadas que proporcionen las

herramientas idóneas para el desempeño del puesto de trabajo, así como un valor

agregado a la funcionalidad inicial solicitada que permita que el sitio o página web

mantenga a la empresa dentro de un determinado posicionamiento de mercado.

3. Los desarrolladores web, deben realizar la construcción e implementación de los

proyectos web solicitados, por medio del uso de Responsive dentro de sus

esquemas y flujos de trabajo, debido a que adicional a proporcionar soluciones

ajustadas a las necesidades de los clientes, brindarán a la organización un ahorro

a largo plazo en el mantenimiento que realiza el área técnica y tiempos de

respuesta del uso del aplicativo de parte del usuario, logrando así altos niveles de

rentabilidad de los proyectos que utilicen esta metodología a la hora de ser

implementados.

Page 52: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

50

BIBLIOGRAFÍA

1. IDESWEB. ¿Qué es el desarrollo web? - Introducción al desarrollo web. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://idesweb.es/temario/que-es-el-desarrollo-web

2. CREATIVA, STAFF. Desarrollo de Páginas Web - El Ciclo de Vida. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.staffcreativa.pe/blog/desarrollo-paginas-web/

3. WIKIPEDIA, COLABORADORES DE. Internet. Wikipedia, la enciclopedia libre [En línea]. 2015. [Consultado 26 Noviembre 2015]. Disponible en: https://es.wikipedia.org/w/index.php?title=Internet&oldid=87113495Page Version ID: 87113495

4. WIKIPEDIA, COLABORADORES DE. Historia de la World Wide Web. Wikipedia, la enciclopedia libre [En línea]. 2015. [Consultado 26 Noviembre 2015]. Disponible en: https://es.wikipedia.org/w/index.php?title=Historia_de_la_World_Wide_Web&oldid=86722452Page Version ID: 86722452

5. CONSORTIUM, THE WORLD WIDE WEB. Facts About W3C. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.w3.org/Consortium/facts#people

6. QUALITYNET. Diseño de páginas web - Historia del diseño web. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.qualitynet.es/faq/historia-dise%C3%B1o-web.htm

7. LOPEZ, MÓNICA. Compilación propia de información de Antecedentes de desarrollo Web. [Consultado 31 Agosto 2015].

8. ENERGÍA Y TURISMO, MINISTERIO DE INDUSTRIA. Alojamientos Conectados - Manual de Marketing Online para hoteles y alojamientos rurales. [En línea]. Disponible en: http://www.alojamientosconectados.es/turismo/sites/default/files/2.%20Marketing.pdf

9. SL, BEIT. Definición de TIC. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.serviciostic.com/las-tic/definicion-de-tic.html

10. ALONSO, Ramón. Tecnologías de la Información Y la Comunicación. Ideaspropias Editorial S.L., 2010. ISBN 978-84-9839-263-0.

11. MONOGRAFÍAS.COM. Tecnologías de información y comunicación. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.monografias.com/trabajos37/tecnologias-comunicacion/tecnologias-comunicacion.shtml

Page 53: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

51

12. BONILLA, FRANCY. ORIGEN, HISTORIA Y EVOLUCIÓN DE LAS TICS - TECNOLOGIA DE LA INFORMACION Y COMUNICACION. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: https://sites.google.com/site/ticsyopal5/assignments

13. ORTEGA, Manuel and CEBALLOS, Pilar. Design thinking: Lidera el presente. Crea el futuro. ESIC Editorial, 2015. ISBN 978-84-15986-54-6.

14. CCM. Qué es el “Design thinking.” CCM [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://es.ccm.net/faq/17150-que-es-el-design-thinking

15. INNOVARE. Etapas del Design Thinking - InnovareInnovare. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.quieroinnovar.com/etapas-del-design-thinking/

16. BLOG, Luisannet Arte y Tecnología. Innovación disruptiva. Luisannet Arte y Tecnología Blog [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.luisan.net/blog/marketing/innovacion-disruptiva

17. WIKIPEDIA, COLABORADORES DE. Tecnología disruptiva. Wikipedia, la enciclopedia libre [En línea]. 2015. [Consultado 26 Noviembre 2015]. Disponible en: https://es.wikipedia.org/w/index.php?title=Tecnolog%C3%ADa_disruptiva&oldid=86919284Page Version ID: 86919284

18. SAMANIEGO, FERNANDO. Innovaciones Disruptivas y Periódicos. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.fernandosamaniego.com/2008/07/innovaciones-di.html

19. IGLESIAS, PABLO. Responsive Web Design I: Introducción al diseño web adaptable. Seguridad + privacidad + tecnología [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://www.pabloyglesias.com/responsive-web-design-i-introduccion-al-diseno-web-adaptable/

20. PREGO, IVÁN. Historia del diseño web adaptativo. Quién es quién en el “responsive web design.” ivanprego.com [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://ivanprego.com/desarrollo-web/historia-del-diseno-web-adaptable-quien-es-quien-en-el-responsive-web-design/

21. MARCOS, Daniel. Responsive web design: diseño multidispositivo para mejorar la experiencia de usuario. 2013. [En línea] [Consultado 28 de Agosto 2015]

22. LOPEZ, MÓNICA. Línea del tiempo de hechos importantes en el desarrollo de la web - Compilación de información desarrollo web. [Consultado 31 Agosto 2015].

Page 54: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

52

23. TALENT, Lance. Responsive web design. 7 ventajas para tu negocio online. [En línea]. [Consultado 1 Febrero 2016]. Disponible en: https://www.lancetalent.com/blog/responsive-web-design-7-ventajas-para-tu-negocio-online/

24. FACTORY, ipixel. Las 4 fases del proceso de diseño web adaptativo o responsive design. iPixel Factory [En línea]. 24 April 2013. [Consultado 1 Febrero 2016]. Disponible en: http://www.ipixelestudio.com/fases-proceso-diseno-web-adaptativo-responsive-design.html

25. DIARIO DE ECONOMIA Y NEGOCIOS, GESTION. Uso de dispositivos móviles creció 61% en América Latina | Tecnología | Gestion.pe. [En línea]. [Consultado 26 Noviembre 2015]. Disponible en: http://gestion.pe/tecnologia/uso-dispositivos-moviles-crecio-61-america-latina-2121429

GLOSARIO

.Net: Es un framework de Microsoft que hace un énfasis en la transparencia de redes,

con independencia de plataforma de hardware y que permita un rápido desarrollo de

aplicaciones.

Banda Ancha: Ancho de banda grande en el acceso a las redes de telecomunicación

BlackEnd: Espacio del sitio web que no ven los usuarios, pero que es necesaria para

presentar la información correcta en el formato correcto a los visitantes

Brainstorming: Es una herramienta de trabajo grupal que facilita el surgimiento de nuevas

ideas sobre un tema o problema determinado. La lluvia de ideas, es una técnica de grupo

para generar ideas originales en un ambiente relajado.

Domótica: Control de electrodomésticos en el hogar

e-business: Negocios electrónicos

e-commerce: Comercio electrónico

e-government: Gobierno electrónico

e-healt: Sanidad electrónica

e-inclusion: Inclusión digital o el acceso a las TIC de los colectivos excluidos socialmente

e-learning: Formación a distancia

Page 55: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

53

e-mail: Correo electrónico

e-skills: Habilidades para el uso de las TIC

e-work: Teletrabajo

Flash: Se trata de una aplicación de creación y manipulación de gráficos vectoriales con

posibilidades de manejo de código mediante un lenguaje de scripting llamado

ActionScript. Flash es un estudio de animación que trabaja sobre "fotogramas" y está

destinado a la producción y entrega de contenido interactivo para diferentes audiencias

de todo el mundo sin importar la plataforma.

JavaScript: Es un lenguaje de programación que surgió con el objetivo inicial de

programar ciertos comportamientos sobre las páginas web, respondiendo a la interacción

del usuario y la realización de automatismos sencillos.

Módem: Es un dispositivo de hardware que se conecta con tu ordenador y a una línea

telefónica. Permite al ordenador conectarse con otros ordenadores a través del sistema

de teléfono.

Mosaic: Fue el primer navegador público que se basó en estaciones UNIX (un sistema

operativo multitarea y multiusuario, es decir, que podía ejecutar varios programas y

gestionar varios usuarios simultáneamente), que fueron creadas por el Centro Nacional

para Aplicaciones de Supercomputación (NCSA por sus siglas en inglés) de la

Universidad de Illinois.

Navegador: Es un software utilizado para acceder a internet. Un navegador permite visitar

páginas web y hacer actividades en ella, por ejemplo, iniciar sesión, ver contenido

multimedia, enlazar de un sitio a otro, visitar una página desde otra, imprimir, y enviar y

recibir correo, entre muchas otras actividades.

Perl: Es un lenguaje de programación muy utilizado para construir aplicaciones CGI para

el web. Perl es un acrónimo de Practical Extracting and Reporting Languaje, que viene a

indicar que se trata de un lenguaje de programación muy práctico para extraer

información de archivos de texto y generar informes a partir del contendido de los

ficheros.

Plugin: Un plugin es aquella aplicación que, en un programa informático, añade una

funcionalidad adicional o una nueva característica al software. En nuestro idioma, por lo

tanto, se nombra al plugin a un complemento.

Page 56: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

54

Prosumidores: Es una combinación entre dos palabras, productor y consumidor. La

diferencia es que productores hacen dinero, los consumidores lo gastan y los

prosumidores hacen dinero mientras lo gastan.

Servidor: Es un ordenador o máquina informática que está al “servicio” de otras máquinas,

ordenadores o personas llamadas clientes y que le suministran a estos, todo tipo de

información.

Smartphones: Teléfono celular con pantalla táctil, que permite al usuario conectarse a

internet, gestionar cuentas de correo electrónico e instalar otras aplicaciones y recursos

a modo de pequeño computador.

Tablets: Es una computadora portátil de mayor tamaño que un teléfono inteligente o un

PDA, integrada en una pantalla táctil (sencilla o multitáctil) con la que se interactúa

primariamente con los dedos o un estilete (pasivo o activo), sin necesidad de teclado

físico ni ratón.

Wifreframe: También conocido como un esquema de página o plano de pantalla, es una

guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe

esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo

elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.

ANEXOS

Anexo 1

Tabla 2: Detalle de la muestra de las entrevistas a profundidad.

Nombre del entrevistado

Cargo desempeñado Empresa Rubro de enfoque

Jorge Edgardo Aragón Vicepresidente

A.A.A inversiones S.A. de C.V. Público y privado

Maximiliano Alonzo Analista de

herramientas web Tigo El Salvador Privado

Carlos Ernesto Cortez Arquitecto de Soluciones

High Tech Consulting Privado

Jaime Andrés Mejía Desarrollador web Credimás Privado

Marbin Ernesto Hernández Desarrollador web Joven 360 Privado

Alejandro Antonio Cerna Coodinador de IT

Search S.A. de C.V. Privado

Page 57: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

55

Héctor Maida Gerente General Creativos de

Internet Público y privado

Daniel Martínez Desarrollador

Junior IPT-Group SA de

CV Privado

Ricardo Ernesto Ayala Consultor de

Implementación Data & Graphics Público y privado

Andrés Ricardo Ortiz Jefe de

Informática Bunker - Agencia

Digital Público y privado

Anexo 2: Cuestionario realizado en entrevistas a profundidad

Entrevista dirigida al personal del área de Desarrollo e Implementación Web / Comité

Web de la organización.

Tema: Ventajas del desarrollo responsive como herramienta de última tendencia

de desarrollo online en las empresas del área metropolitana de San Salvador.

Fecha: ________________________________________________________

Empresa: ______________________________________________________

Nombre del entrevistado: __________________________________________

Cargo: _________________________________________________________

Años de laborar: _________________________________________________

Objetivo: Identificar las ventajas del uso del Web Responsive Design como herramienta

para el desarrollo online.

PREGUNTAS

Planificación de proyectos web

1. ¿Su empresa posee con un “comité web” que permita integrar las necesidades

existentes con la visión de su organización, para los proyectos asociados a los

sitios y páginas web?

a. Si __

b. No __

c. ¿Por qué?

2. De contar con un comité, ¿Quiénes lo conforman y cuáles son las funciones

específicas de cada miembro?

Page 58: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

56

3. ¿Existe una planificación de los proyectos asociados al sitio o página web de la

empresa?

a. Si __

b. No __

c. ¿Por qué?

4. De existir o no un proceso de planificación, ¿Cuál sería el flujo básico a seguir para

implementar un sitio o página web de forma exitosa dentro de su organización,

desde la recepción de los requerimientos, hasta la etapa final?

5. El proceso de creación, pruebas e implementación de su web site ¿Es de carácter

interno o es por medio de contratación de capacidades externas a la institución

(Outsoursing)?

a. Interno

b. Externo

c. ¿Por qué?

6. Si la construcción del sitio o página web se realiza por medio de un Outsoursing,

¿Cuál es el papel que juega la contraparte interna de la organización para el éxito

del proyecto web? ¿Cuál fue la principal razón por la que la empresa no realizó la

implementación del sitio de forma interna?

Requerimientos

1. ¿La obtención de una empresa externa para elaborar el proyecto se realiza por

medio de licitaciones o la elección es arbitraria?

a. Licitaciones

b. Arbitraria

c. ¿Por qué?

2. Definición de audiencia: ¿Su sitio o página web posee con una segmentación por

capacidades, necesidades y ubicaciones para sus usuarios?

3. ¿Cuáles son las audiencias que tienen previstas? (Por capacidades técnicas, por

capacidades físicas, por conocimiento de la institución, por necesidades de la

información o por ubicación geográfica)

4. ¿Sabe usted la razón por la cual los usuarios finales (Clientes externos) vendrá a

su sitio o página?

Page 59: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

57

a. Si __

b. No __

c. ¿Por qué?

5. ¿Se tiene una metodología a seguir para la recolección de requerimientos

funcionales del sitio o página (Formularios, envío de notificaciones por email,

impresión de contenidos, mapa del sitio)?

a. Si __

b. No __

c. ¿Por qué?

6. La creación de mapas permanentes del sitio o página ¿Es realizada a través de

información planteada por parte del departamento técnico a la empresa

Outsourcing o de parte del comité Web a los desarrolladores y encargados del

proyecto dentro de la empresa?

7. ¿Su sitio o página web posee con las siguientes características: consistente,

uniforme, visible?

a. Si __

b. No __

c. ¿Por qué?

Diseño y Desarrollo del sitio

1. ¿Su empresa pone en práctica las nuevas tendencias asociadas al desarrollo

web?

a. Si __

b. No __

c. ¿Por qué?

2. ¿Su sitio o página posee con elementos básicos que permitan la fácil gestión de

áreas de contenido, áreas de interacción y experiencia del usuario?

a. Si __

b. No __

c. ¿Por qué?

3. ¿A la hora de plantear el desarrollo y diseño de su sitio o página web, tiene una

lista de buenas prácticas que mejoren la implementación y el uso del mismo?

¿Cuáles serían? (Peso de las páginas, transmisión de datos, diagramación, hojas

de estilo, tablas, flash, frames, etc.)

a. Si __

b. No __

c. ¿Por qué?

Page 60: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

58

d. ¿Cuáles serías las buenas prácticas?

4. ¿Conoce usted que es el desarrollo responsive?

a. Si __

b. No __

5. ¿Cómo define usted el responsive design?

6. ¿Considera el responsive design como el modelo estructural del futuro para el

desarrollo web?

a. Si __

b. No __

c. ¿Por qué?

7. Es necesario que las empresas transformen sus sitios web tradicionales al modelo

responsive?

a. Si __

b. No __

c. ¿Por qué?

8. ¿Cuáles son las ventajas competitivas que la web design trae a su empresa?

Percepción del usuario

1. Desde la perspectiva de los usuario, ¿Considera que es más aceptable el

responsive design al modelo tradicional?

a. Si __

b. No __

c. ¿Por qué?

2. ¿El responsive design presenta un método fácil de navegación y uso del web site

para el usuario?

a. Si __

b. No __

c. ¿Por qué?

3. ¿Recomienda usted a sus clientes un plan de desarrollo web basado en el modelo

responsive?

a. Si __

Page 61: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

59

b. No __

c. ¿Por qué?

4. De utilizar responsive para la creación de sus web sites, ¿Cuáles han sido las

ventajas que ha encontrado a partir del momento en que se implementó esta

metodología dentro del sitio, desde la perspectiva costo – beneficio?

Page 62: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

60

Anexo 3

Tabla 7: Contabilización de Respuestas de Entrevistados

Segmento No.

Pregunta Pregunta Si % Si No % No Total

Pla

nif

ica

ció

n d

e

Pro

ye

cto

s

1

¿Su empresa posee con un “comité web” que permita integrar las necesidades existentes con la visión de su organización, para los proyectos asociados a los sitios y páginas web?

6 60% 4 40% 10

3 ¿Existe una planificación de los proyectos asociados al sitio o página web de la empresa?

9 90% 1 10% 10

Req

ueri

mie

nto

s

4

¿Sabe usted la razón por la cual los usuarios finales (Clientes externos) vendrán a su sitio o página?

10 100% 0% 10

5

¿Se tiene una metodología a seguir para la recolección de requerimientos funcionales del sitio o página (Formularios, envío de notificaciones por email, impresión de contenidos, mapa del sitio)?

9 90% 1 10% 10

7 ¿Su sitio o página web posee con las siguientes características: consistente, uniforme, visible?

10 100% 0% 10

Dis

o y

desa

rro

llo

del

sit

io

1 ¿Su empresa pone en práctica las nuevas tendencias asociadas al desarrollo web?

10 100% 0% 10

2

¿Su sitio o página poseen con elementos básicos que permitan la fácil gestión de áreas de contenido, áreas de interacción y experiencia del usuario?

6 60% 4 40% 10

3 ¿A la hora de plantear el desarrollo y diseño de su sitio o página web, tiene una lista de buenas prácticas

9 90% 1 10% 10

Page 63: Seminario de Especialización Profesional...Roberto Arturo Castro Asesor de Forma: Licda. Ana María Arteaga de López ANTIGUO CUSCATLÁN, LA LIBERTAD, 08 DE DICIEMBRE 2015 II ÍNDICE

61

que mejoren la implementación y el uso del mismo?

4 ¿Conoce usted que es el desarrollo responsive?

9 90% 1 10% 10

6 ¿Considera el responsive design como el modelo estructural del futuro para el desarrollo web?

9 90% 1 10% 10

7

¿Es necesario que las empresas transformen sus sitios web tradicionales al modelo responsive?

9 90% 1 10% 10

Perc

ep

ció

n d

el u

su

ari

o

1

Desde la perspectiva de los usuario, ¿Considera que es más aceptable el responsive design al modelo tradicional?

9 90% 1 10% 10

2 ¿El responsive design presenta un método fácil de navegación y uso del web site para el usuario?

10 100% 0% 10

3 ¿Recomienda usted a sus clientes un plan de desarrollo web basado en el modelo responsive?

9 90% 1 10% 10