CAPITULO II: MARCO TEORICO Y REFERENCIAL

MARCO TEORICO

En la actualidad existen herramientas que son utilizadas para el proceso y la

optimización de un sitio web para que esta quede de una forma entendible en el que
al usuario se le haga fácil de usar.

¿Qué es un sitio web?

Un sitio web es un lugar virtual en la red que guarda contenido para que la gente
tenga acceso a él, así de simple. Se conforma por varios documentos que se
acomodan de manera organizada para que sea atractivo visualmente, dichos
documentos se llaman páginas web. Por lo tanto, un sitio web es la compilación
organizada y estructurada de un determinado número de páginas web. Las páginas
web de las que se conforma el sitio deben estar desarrolladas bajo un código
llamado HTML y estar alojadas a un dominio que, en palabras simples, será el lugar
que hará que el sitio web pueda visualizarse en cualquier tipo de navegador web.
[7]

Los sitios web en realidad existen físicamente porque los archivos que los
componen ocupan un espacio en un servidor, normalmente los sitios de Internet son
bastante ligero, estos archivos se montan en un servidor web que está conectado
permanentemente a Internet y es así como tú logras visualizar el sitio en cualquier
momento que lo desees.

Ilustración 1: Ejemplos de sitios web

¿Para qué sirve un sitio web?
Un sitio Web es la reunión de una serie de elementos que se integran en la red para
generar sitios que tienen objetivos específicos, entre ellos encontramos los sitios
dedicados exclusivamente al entretenimiento, sitios que se dedican a la información,
sitios que se dedican a ofrecer productos y servicios, sitios que se dedican a ofrecer
productos gratuitos con contraprestaciones interesantes entre otros. [8]

¿Por qué los sitios web son de gran importancia para las empresas?
La presencia en línea es vital para las empresas pues es un campo muy
competitivo, donde las empresas que ya cuentan con un sitio web están abarcando
mercados potenciales. Seguramente hay muchas empresas que ya tienen en mente
hacer su página pero la mayoría no sabe cómo puede iniciar el proceso sin tener
que gastar en exceso.

¿Cuáles son los puntos que se deben de tomar en cuenta para configurar un
sitio web?
 Uso del marketing digital ya que es uno de los elementos más importante
para vender más a los usuarios.
 Posicionar la marca poniéndola al alcance de los usuarios potenciales que
buscan productos y servicios en internet.
 Un sitio web dinámico resulta más atractivo para los usuarios y les dará una
razón para volver a visitarla.
 Herramientas de gestión de clientes como una lista de contactos de clientes,
marketing por correo electrónico, formularios de consulta personalizada-
mejorarán significativamente la atención a sus clientes.
 Un sitio con diseño profesional con imágenes e información atractiva llaman
la atención del cliente.
 El sitio web debe ser visible para que cada vez más personas lo visiten y la
manera de hacer esto es impulsar los motores de búsqueda para que
aparezca en los principales buscadores como Google. [9]
Clasificación de Sitios Web

Sitios Web Estáticos

Se denomina sitio web estático a aquellos que no acceden a una base de datos
para obtener el contenido. Por lo general un sitio web estático es utilizado cuando
el propietario del sitio no requiere realizar un continuo cambio en la información que
contiene cada página.

Sitios Web Dinámicos

Por el contrario los sitios web dinámicos son aquellos que acceden a una base de
datos para obtener los contenidos y reflejar los resultados obtenidos de la base de
datos, en las páginas del sitio web. El propietario del sitio web podrá agregar,
modificar y eliminar contenidos del sitio web a través de un “sistema web”,
generalmente con acceso restringido al público mediante usuario y contraseña, el
cual se denomina BACK END.

Se asume que a la hora de contratar el desarrollo de un sitio web, el

propietario, especificará al desarrollador web, la cantidad de páginas que contendrá
el sitio, discriminando si son dinámicas o estáticas. [10]

¿Qué es una página web?

Una página web o también llamada página electrónica o página digital es

un documento o información electrónica capaz de contener texto, sonido, vídeo,
programas, enlaces, imágenes, y muchas otras cosas, adaptada para la
llamada World Wide Web (WWW) y que puede ser accedida mediante
un navegador web. Esta información se encuentra generalmente en
formato HTML o XHTML, y puede proporcionar acceso a otras páginas web
mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos
como pueden ser hojas de estilo en cascada, guiones, imágenes digitales, entre
otros.

Las páginas web pueden estar almacenadas en un equipo local o en

un servidor web remoto. El servidor web puede restringir el acceso únicamente a
redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las
páginas en la World Wide Web. El acceso a las páginas web es realizado mediante
una transferencia desde servidores, utilizando el protocolo de transferencia de
hipertexto (HTTP). [11]

Características de una página web

Contenidos de utilidad

La temática y las búsquedas deben ir acordes con el usuario final, si no lo

más seguro es que el visitante abandone la página rápidamente.

Debe ser intuitivo

Hacer fácil la navegación genera que las visitas consigan fácilmente su

objetivo. Además, evita abandonos en la página web.

Diseño atractivo

En una web, una primera impresión cuenta, ya que representa nuestro

negocio, e incluso a nosotros mismos. Si a un usuario no le gusta lo que ve, o no le
genera confianza, lo más probable es que abandone el sitio web, en muchos casos
sin tan siquiera tener en cuenta el contenido. Por lo cual un buen diseño genera
confianza, seriedad y muy buena impresión.

Contenido bien estructurado

Un desglose del contenido claro y sencillo, bien explicado, tiene el éxito

asegurado. La importancia de una estructura clara y objetiva es lo que mantendrá
al usuario conectado.
Importancia de la velocidad de la web

Las páginas que tardan mucho en cargar son un problema. Para todos,
nuestro tiempo vale oro, y lo que más fastidia a cualquier persona es tener que
esperar. El índex de una página web debe tener una carga rápida, si no, muchos
usuarios abandonarán la navegación sin dar una oportunidad de ver el sitio, aunque
su contenido pueda resultarles de utilidad.

Información de contacto

Es muy importante situar en lugares visibles nuestros datos de contacto,

teléfonos y dirección. Nunca deben enlazarse emails directamente, sino utilizar
enlaces a formularios de contacto y, muy importante, incitar al usuario a realizar una
acción, como por ejemplo contactar con nosotros o solicitar más información. Si
nuestro contenido genera interés, es muy probable que el usuario quiera saber más,
por tanto, después de mostrar la información que le interesa, es muy apropiado
invitarle a resolver sus dudas contactando con nosotros y que siempre sepa que
estamos para ayudarle. [12]

Ilustración 2: Ejemplos de páginas web.

¿Qué son las herramientas web?
Las Herramientas web son una asociación de aplicaciones web que facilitan
la comunicación, el diseño, el usuario y la colaboración con el WWW (World Wide
Web), además permite a los usuarios interactuar y colaborar con la creación de
contenidos, tanto los mismos usuarios como la información dada. [13]

Clasificación de las herramientas de ingeniería inversa

Ilustración 3: Diagrama de clasificación de herramientas de ingeniería

inversa [14]
¿Qué herramientas existen para la elaboración de páginas web?
Codekit

Es una herramienta que ayuda a construir webs de manera más rápida y más
ordenada. Con Codekit se pueden importar frameworks de manera que si incluyes
algún archivo lo buscará primero en el proyecto concreto en el que se esté
trabajando y, si no lo encuentra, recorrerá los frameworks para incluirlo.

Ilustración 4: Vista de la herramienta Codekit.

Sublime text

Sublime Text es un editor de código multiplataforma, ligero y con pocas

concesiones a las florituras. Es una herramienta concebida para programar sin
distracciones y bastante intuitiva. Este editor permite tener varios documentos
abiertos mediante pestañas, e incluso emplear varios paneles para aquellos que
utilicen más de un monitor. Dispone de modo de pantalla completa, para aprovechar
al máximo el espacio visual disponible de la pantalla.
Brackets

Es un editor libre para HTML, CSS y JavaScript. Es ampliamente utilizado

para desarrollo Web. Adobe fue quien empezó a desarrollar esta aplicación, pero
actualmente la comunidad se encarga de su desarrollo. [15]

Ilustración 6: Vista de la herramienta Brackets.

¿Qué es un framework?
Es una estructura real o conceptual destinada a servir de soporte o guía para la
construcción de algo que expande la estructura en algo útil.

En los sistemas informáticos, un framework es a menudo una estructura en

capas que indica qué tipo de programas pueden o deben ser construidos y cómo se
interrelacionan. Algunos marcos de trabajo de sistemas informáticos también
incluyen programas reales, especifican interfaces de programación u ofrecen
herramientas de programación para usar los marcos. Un framework puede servir
para un conjunto de funciones dentro de un sistema y cómo se interrelacionan; las
capas de un sistema operativo; las capas de un subsistema de aplicación; cómo
debería normalizarse la comunicación en algún nivel de una red; etcétera. [16]

Razones para utilizar un framework a la hora de programar

1. Evitar escribir código repetitivo

La mayoría de los proyectos tienen partes comunes necesarias para el

funcionamiento como, por ejemplo, acceso a base de datos, validación de
formularios o seguridad. Un framework evita tener que programar estas partes, de
esta manera resulta más fácil centrarse en programar la aplicación.

2. Utilizar buenas prácticas

Los frameworks están basados en patrones de desarrollo, normalmente MVC

(Modelo-Vista-Controlador) que ayudan a separar los datos y la lógica de negocio
de la interfaz con el usuario, que gracias a ellos, todo el proyecto está muy bien
ordenado.

3. Permitir hacer cosas avanzadas que tú no harías

Un framework siempre va a permitir hacer cosas de una manera fácil y

segura, que serían imposibles o al menos costaría mucho tiempo hacerlas.

4. Desarrollar más rápido

Se sabe que el desarrollar una aplicación con un framework agiliza el trabajo

haciéndolo más limpio y más seguro. [17]
Frameworks más utilizados en la actualidad para la elaboración de páginas
web

Bootstrap

Bootstrap es un framework o conjunto de herramientas de Código

abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con
tipografía, formularios, botones, cuadros, menús de navegación y otros elementos
de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales
y adicionales.

Ilustración 7: Logo de Bootstrap

Características

Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es

compatible con la mayoría de los navegadores web. La información básica de
compatibilidad de sitios web o aplicaciones está disponible para todos los
dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace
disponible la información básica de un sitio web para todos los dispositivos y
navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas
redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de
soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta,
pero no es requerida para su uso.

Desde la versión 2.0 también soporta diseños sensibles. Esto significa que el
diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las
características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).
 Bootstrap es de código abierto y está disponible en GitHub. Los
desarrolladores están motivados a participar en el proyecto y a hacer sus propias
contribuciones a la plataforma.

Uso de Bootstrap

Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la
hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML. Otra opción sería
compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto
puede realizarse con un compilador especial.

Si el desarrollador también quiere usar los componentes de JavaScript, éstos

deben estar referenciados junto con la librería JQuery en el documento HTML. [18]

CSS

Ilustración 8: Logo de CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto de los

documentos definidos con HTML, es la mejor forma de separar los contenidos y es
apto para crear páginas web complejas.

El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia

de un documento escrito en un lenguaje de marcado (por ejemplo, HTML). Así, a
los elementos de la página web creados con HTML se les dará la apariencia que se
desee utilizando CSS: colores, espacios entre elementos, tipos de letra, etc…
separando de esta forma la estructura de la presentación. Esta separación entre la
estructura y la presentación es muy importante, ya que permite que sólo cambiando
los CSS se modifique completamente el aspecto de una página web. Esto posibilita,
entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas
(como hojas de estilo de alto contraste o de accesibilidad). [19]

HTML

Ilustración 9: Logo de HTML

HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje

de marcado para la elaboración de páginas web. Es un estándar que sirve de
referencia del software que conecta con la elaboración de páginas web en sus
diferentes versiones, define una estructura básica y un código para la definición de
contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

HTML se encarga de desarrollar una descripción sobre los contenidos que

aparecen como textos y sobre su estructura, complementando dicho texto con
diversos objetos (como fotografías, animaciones, etc).

Es un lenguaje muy simple y general que sirve para definir otros lenguajes
que tienen que ver con el formato de los documentos. El texto en él se crea a partir
de etiquetas, también llamadas tags, que permiten interconectar diversos conceptos
y formatos.
JavaScript

Ilustración 10: Logo de JavaScript

JavaScript es un lenguaje de programación que puede ser aplicado a un

documento HTML y usado para crear interactividad dinámica en los sitios web. Fue
inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y
la Corporación Mozilla. Se utiliza principalmente del lado del cliente, implementado
como parte de un navegador web permitiendo mejoras en la interfaz de
usuario y páginas web dinámicas aunque existe otra forma de JavaScript del lado
del servidor.

AngularJS

Ilustración 11: Logo de AngularJS

AngularJS, es un framework de JavaScript de código abierto, mantenido

por Google, que se utiliza para crear y mantener aplicaciones web de una sola
página. Su objetivo es aumentar las aplicaciones basadas en navegador con
capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el
desarrollo y las pruebas sean más fáciles.
 La biblioteca lee el HTML que contiene atributos de las etiquetas
personalizadas adicionales, entonces obedece a las directivas de los atributos
personalizados, y une las piezas de entrada o salida de la página a un modelo
representado por las variables estándar de JavaScript. Los valores de las variables
de JavaScript se pueden configurar manualmente, o recuperados de los
recursos JSON estáticos o dinámicos.

AngularJS se puede combinar con el entorno en tiempo de ejecución Node.js,

el framework para servidor Express.js y la base de datos MongoDB para formar el
conjunto MEAN.
MARCO REFERENCIAL

La ingeniería inversa ha tenido un gran impacto en estos últimos años, ya que

permite descubrir el funcionamiento de un sistema o dispositivo. En los últimos años
en el área que ha sido ampliamente utilizada la ingeniería inversa es en el de
manufactura.

Investigación 1

En una empresa muy reconocida en México, se vieron a la necesidad de restaurar

su sistema, ya que el flujo administrativo que se utilizaba era ineficiente, la
recolección de facturas era inexacta, consumía tiempo y provocaba problemas de
liquidez que afectaban a la empresa y a los distribuidores. Además los detalles de
ventas permanecían únicamente en los sistemas de los distribuidores. Para dar
solución a este problema se optó por una solución web y modificar los procesos. La
solución web les ofreció integrar sus sistemas principales, esto les proporcionó una
mejor distribución, control y acceso inmediato al sistema corporativo de facturas.

Al momento de utilizar ingeniería inversa e innovar un proyecto, es posible

iniciar el proceso de abstracción a partir del código fuente, lo cual representa un
flujo contrario al modelo tradicional de cascada. En la práctica, se consideran dos
tipos de ingeniería inversa. El basado en el código fuente, y el basado en el sistema
ejecutable. En el primero, se conoce el código fuente; sin embargo, los procesos no
son conocidos de una manera ejecutable, existe una documentación pobre o existe
documentación pero no corresponde. En el segundo tipo, no existe código fuente
disponible, así que se centran en descubrir el código fuente a través de los procesos
ejecutables.

Investigación 2

En las dos últimas décadas la ingeniería inversa ha evolucionado

representativamente, posibilitando un continuo mejoramiento de los procesos de
construcción de software, permitiendo a arquitectos y desarrolladores tener una
clara imagen del sistema que están construyendo, disminuyendo la posibilidad de
error al facilitar la verificación de la coherencia entre el código desarrollado y la
arquitectura propuesta, facilitando a su vez el mantenimiento y la adquisición de
conocimiento de sistemas heredados. Esto se evidencia en el surgimiento de un
número cada vez más amplio de herramientas de ingeniería inversa que ofrecen
múltiples funcionalidades.

Esta situación afecta a usuarios y productores de este tipo de herramientas,

así como también a investigadores interesados en la ingeniería inversa. Mientras
los usuarios se ven obligados a seleccionar la que mejor se ajusta a sus
necesidades, en una lista que se amplía y diversifica con frecuencia, sin contar con
un instrumento que facilite la toma de decisión; los productores requieren identificar
nuevas funcionalidades y características que representen valor agregado a su
producto, lo que les exige conocer con claridad qué características brindan las
herramientas actuales. Por su parte los investigadores desean proponer nuevos
métodos, técnicas y herramientas que representen mejoras a los procesos de
desarrollo de software y recuperación de conocimiento de sistemas heredados, para
lo cual requieren identificar en forma precisa las características de las herramientas
disponibles.

La caracterización de las herramientas de ingeniería inversa se hace

teniendo en cuenta dos criterios: el primero corresponde al aspecto estructural,
centrando la atención en los elementos básicos que conforman la arquitectura
genérica de este tipo de herramientas: Analizador e Interfaz (Chikofsky y Cross,
1990), mientras que el segundo se centra en las propiedades comunes entre ellas.
[20]