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.

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.

Ilustración 4: Vista de la herramienta Codekit.

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]

¿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

Ilustración 6: Vista de la herramienta Brackets.

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.

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).

Ilustración 7: Logo de Bootstrap

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

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,

Ilustración 8: Logo de CSS

entre otras cosas, que los usuarios puedan usar hojas de estilo personalizadas

(como hojas de estilo de alto contraste o de accesibilidad). [19]

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.

Ilustración 9: Logo de HTML

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

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.

Ilustración 10: Logo de JavaScript

Ilustración 11: Logo de AngularJS

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]