1.

Marco Teórico

1.1. Tipos de diseño(técnica) web.

De acuerdo a las diferentes necesidades de estar comunicados para realizar

multiplex actividades, el acceso a internet aumenta cada vez más; según Susana Galeano

“Cada vez hay un mayor número de usuarios de internet en el mundo, tanto así que ya

superan la mitad de la población global.” Eso se resalta en la nueva edición del informe

que presentan We Are Social y Hootsuite en este 2018, y que año con año muestra las

estadísticas, análisis y principales tendencias acerca del número de usuarios de internet.

En su informe de 2017 el estudio mostraba un número de usuarios de internet de

3.750 millones de personas: ahora esta cifra ha aumentado hasta lograr 4.021 millones,

nada menos que el 53% de la población mundial. De ellos, un total de 5.135 millones (el

68%) procede de dispositivos móviles, lo que supone un crecimiento del 4% en

comparación a los datos arrojados el año pasado, como puedes ver en la siguiente gráfica:

(Galeano, 2018).

Figura. 1 tipos de dispositivos y su uso en 2018

Fuente: marketing4ecommerce.net
 Debido al alto crecimiento del uso de internet mediante distintos tipos de

dispositivos como: computadoras, móviles, tabletas, televisores…lo cual es de gran

importancia a la hora de crear o desarrollar un sitio o aplicación web, ya que la experiencia

del usuario depende del dispositivo que utilice para acceder a tu sitio. Si el diseño de este no

es capaz de adaptarse a los diferentes tamaños de pantalla, es muy posible que el interesado

que visite por primera vez el sitio, no desee regresar jamás. Por lo cual surge las siguientes

técnicas o diseños web.

Figura. 2. Tipos de diseño web

Fuente: imágenes de Google

Diseño web líquido o fluido.

Los diseños web líquidos o fluidos son creados para no tener un ancho fijo, y permitir

que el navegador lo acomode a su tamaño. Están diseñados usando porcentajes (%), por lo

que los elementos que se seleccionan podrán tener un tamaño proporcionado al tamaño del

navegador. Fueron creados para aprovechar al máximo los nuevos monitores

(panorámicos).

Diseño web adaptativo, adaptable o adaptive

El diseño adaptativo podríamos definirlo como aquel que trata de ajustarse a la

naturaleza creativa de los seres humanos, facilitándoles la adaptación y evolución de

 sus productos con el objetivo de satisfacer sus necesidades en el día a día. (Martin,

2010)

Diseño web responsivo o Responsive web Design

El término responsive web Design, creado por Ethan Marcotte (Marcotte, 2017), hace

referencia a que el diseño y construcción de una aplicación web debe tener como

característica la capacidad para poder visualizarse siempre de la misma manera,

independientemente del navegador y de la resolución de la pantalla del dispositivo con el

que se acceda a la web. De esta manera, se reduciría el tiempo de desarrollo de tales

aplicaciones, el conjunto de programas necesarios para cada dispositivo y se realizaría un

trabajo más eficiente por parte de los diseñadores y desarrolladores web. (Núñez, Y. y

Maldonado, L., 2017)

Diseño web fijo

El diseño fijo, como su nombre o indica es aquel que nos aporta el tamaño de nuestra

estructura en unas medidas inalterables por nuestro navegador.

Este tipo de esquema de diseño es obsoleto y poco práctico, por lo tanto, no

recomendable en la actualidad. a pesar de ello es el más utilizado en Internet, y es aquel que

permanece inalterable sea cual sea el dispositivo donde se visualiza el sitio web, sean

cuales sean las características del dispositivo, pantalla o navegador, siempre se visualiza el

mismo tamaño preestablecido por el diseñador web en píxeles.

Tabla: 1 Ventajas y desventajas de los diseños web mencionados anteriormente.

DISEÑO VENTAJAS DESVENTAJAS

WEB
Utiliza medidas relativas o
porcentajes, en vez de pixeles,
FLUIDO de esta forma los elementos se
adaptan según el ancho de la
pantalla
Es amigable con los usuarios
Elimina las barras de
desplazamiento horizontales
Si se diseña adecuadamente
permite una mejor distribución
del contenido en la pantalla.
Optimización (URL es la
misma), ahorra
redireccionamiento y fallos en el grande.
proceso al igual que al diseño y
la unidad grafica
versatilidad al sitio web que se
adapta a las diferentes
resoluciones de pantallas
disponibles
ADAPTIVO visualización de un sitio web
utilizando las nuevas reglas y las exige más tiempo
propiedades de CSS
La anchura y las imágenes se
ajustan, se redimensionan y se
desplazan automáticamente
según lo exige la resolución de
pantalla.
visualización óptima evitando la los contenidos se pueden seguir
pérdida de la información vital
de la web
Este tipo de técnica es la menos
efectiva y la menos recomendable.
Existe menos control sobre los
elementos lo que la hace difícil de
diseñar
Se debe tener especial cuidado con
las imagines y videos por sus
tamaños.
Existe diferencias altamente visibles
cuando el ancho del dispositivo es
muy grande y su contenido es poco o
escaso
No es muy eficiente en sitios web
con un volumen de información
Las imágenes sí que deben adecuarse
en tamaño y sobre todo en peso (kb)
para reducir al máximo su carga con
velocidades de conexión lentas.
el desarrollo del sitio web adaptativo
Este tipo de diseño utiliza plantillas
estáticas para tamaños de pantalla
prestablecidos, basadas en puntos de
ruptura, de forma que, al alcanzar
cierto límite de tamaño en la
pantalla, el diseño cambia.
viendo reducidos si el acceso al sitio
web es desde un móvil.
 URL no varia
Esta es la técnica para diseño
web más óptima y eficiente.
tanto el diseño como el
contenido se adaptan a cada
RESPONSIVE pantalla
la información se mantiene
igual, pero la diagramación se
optimiza.
Es mas barato sólo tiene que
desarrollar y mantener un solo
sitio web
Consistencia: su sitio contiene el
mismo contenido básico, a
través de diferentes plataformas,
proporcionando a los usuarios
una experiencia consistente
Dominio / URL: se facilita
compartir contenido sin
necesidad de redirección a algún
otro dispositivo relacionado
FIJO El área de lectura está
rigurosamente controlada, sin
necesidad de controlar tamaños
mínimos ni máximos.
Al ser un ancho fijo, hace más
fácil el diseñar sobre él
Fuente: Autor con indagación realizada en internet
Al trabajar con diseños webs
adaptables deberemos olvidarnos de
las anchuras y tamaños en píxeles y
pensar en %.
No está totalmente optimizado – a
menos que utilicemos un enfoque
móvil a su contenido, optimizándolo
para los dispositivos móviles
Más lento rendimiento: las páginas
móviles a menudo tienen la misma, o
incluso mayor, tamaño de archivos
que las páginas de escritorio
Problemas de usabilidad – los
usuarios móviles a menudo desean
realizar diferentes tareas y pueden
estar acostumbrados a interfaces de
usuario específicas para móviles
puede llegar a ser muy pesado
Gente con monitores más pequeños
que el ancho definido tienen
problemas con la página.
Gente con monitores más grandes
ven los diseños fijos muy pequeños
Al ampliar el tamaño de la fuente, el
diseño no varía, rompiendo la
estética de la línea.
Tabla 2. Diferencias de AWD Y RWD
DIFERENCIAS Adaptive Web Design (AWD)
Identificación utiliza el código del servidor o de
del Dispositivo cliente para detectar el dispositivo
y adaptar la presentación de una
web al formato de pantalla,
utilizando las hojas de estilo CSS,
aunque no siempre se ajustan del
todo bien
Optimización la información es preseleccionada
del Contenido y únicamente se descargan los
activos optimizados para móviles
Optimización Posee distintas plantillas para
de los cada dispositivo
dispositivos
características utiliza secuencias de comandos
para ayudar con la adaptación a
distintos dispositivos y tamaños
de pantalla, detectando el tipo de
dispositivo y sus funcionalidades
para después cambiar el
comportamiento de las webs
Rendimiento la descarga de la página es más
rápida que en RWD (ya que
AWD sólo carga los recursos
necesarios para los dispositivos
que está utilizando el usuario)
Desarrollo de Si ya tienes una web desarrollada,
una web puedes partir de tu web para
adaptarla a las diferentes pantallas
con AWB
Despliegue de Se necesita contar con
una web programadores que tengan una
sólida base de JavaScript y CSS
para poder utilizar esta técnica y
adaptar tu web.
Fuente:
Responsive Web Design (RWD)
utiliza “Media Queries” para
detectar el dispositivo ofreciendo
imágenes escalables que se
ajustan perfectamente al tamaño
de la pantalla.
se muestra toda la información
para cada dispositivo. Todos los
activos de la web se descargan en
cada dispositivo.
Tiene una única plantilla que
sirve para todos los dispositivos.
Mucho más sencillo e intuitivo.
incluye todas las características
que un navegador web,
smartphone o Tablet pueda
necesitar (flash, menús,
JavaScript, resolución de
imágenes o vídeos, etc).
descarga todos los elementos y
recursos necesarios para todos los
dispositivos (aunque el usuario
sólo esté utilizando un único
dispositivo).
Se necesita reconstruir tu sitio
nuevamente y empezar de cero.
Es aquí donde el presupuesto se
dispara
la fase de diseño y testeo puede
alargarse más de la cuenta ya que
la experiencia de usuario debe
personalizarse para todos los
dispositivos posibles.
 1.2. FRAMEWORK

En general, con el término framework, nos estamos refiriendo a una estructura software

compuesta de componentes personalizables e intercambiables para el desarrollo de una

aplicación. En otras palabras, un framework se puede considerar como una aplicación

genérica incompleta y configurable a la que podemos añadirle las últimas piezas para

construir una aplicación concreta. (Gutierrez, 2014).

Los objetivos principales que persigue un framework son: acelerar el proceso de

desarrollo, reutilizar código ya existente y promover buenas prácticas de desarrollo como el

uso de patrones.

Patrón MVC

Para comprender como trabajan los frameworks Web existentes es imprescindible

conocer el patrón MVC.

El patrón Modelo-Vista-Controlador es una guía para el diseño de arquitecturas de

aplicaciones que ofrezcan una fuerte interactividad con usuarios. Este patrón organiza la

aplicación en tres modelos separados, el primero es un modelo que representa los datos de

la aplicación y sus reglas de negocio, el segundo es un conjunto de vistas que representa los

formularios de entrada y salida de información, el tercero es un conjunto de controladores

que procesa las peticiones de los usuarios y controla el flujo de ejecución del sistema.

(Gutierrez, 2014).
Tabla 3. Características de los frameworks

TIPOS DE FRAMEWORK WEB

FRAMEWORK CARACTERISTICAS

Un poco más fácil de aprender que otros framework, cuenta con

foro y IRC que proporciona ayuda al usuario.
MVC
propone en el desarrollo usar Routes with Closures, en lugar de
un MVC tradicional con el objetivo de hacer el código más claro
Laravel es modular y extensible. Esto quiere decir que te permite
Laravel agregar todo lo que necesitas a través de su
directorio Packalyst que cuenta con más de 5500 paquetes.
Posee un poderoso conjunto de librerías.
Autenticación simple.
Sistema de ruteo
Blade, Motor de plantillas.
Soporte para el caché.
Soporte para MVC.
Usa componentes de Symfony.
Adopta las especificaciones PSR-2 y PSR-4.

Un poco más fácil de aprender que otros framework, cuenta con

foro y IRC que proporciona ayuda al usuario.
es un framework de desarrollo de aplicaciones Web escrito en
PHP usando el paradigma de programación OOP (POO
Programación Orientada a Objetos).
Usa el patrón de Arquitectura de Software
YII Provee un Nivel de Abstracción hacia la Base de Datos (DAO,
Data Access Object)
Incluye soporte para autenticación de usuarios basado en el
modelo RBAC role-based Access control o control de acceso
basado en roles.
Herramientas para automatización y validación de Formularios
Integración con jQuery.
Avanzado control de Themes
Internacionalización y Localización.
Sistema de manejo de cache.
Manejo de Errores.
Manejo de Seguridad (SQL injection, XSS, CSRF, cookie
tampering, etc.).
 Generador de código automático, muy útil a la hora de
implementar formularios o bien operaciones CRUD.
Amigable y extensible.
El manejo de errores y logging.
Herramientas para pruebas unitarias y funcionales basados en
PHPUnit y Selenium.
Generación automática de código para el esqueleto de la
aplicación, aplicaciones CRUD, etc.
Cuidadosamente diseñado para trabajar bien con código de
terceros.
AngularJS AngularJS, framework de JavaScript, es conjunto de librerías de
código abierto, mantenido por Google, que nos sirven para hacer
aplicaciones web avanzadas del lado del cliente.
ideal para hacer aplicaciones de negocio y aplicaciones de gestión
que se despliegan en una única página.
está apoyado por Google y cada día más desarrolladores están
adoptándolo
permite un desarrollo ordenado, sencillo de realizar y sobre todo
más fácil de mantener en un futuro.
MVC
Bootstrap Bootstrap es el framework de Twitter que permite crear interfaces
web con CSS y JavaScript
diseños creados con Bootstrap son simples, limpios e intuitivos,
esto le da agilidad a la hora de cargar y al adaptarse a otros
dispositivos
elementos con estilos predefinidos fáciles de configurar: Botones,
Menús desplegables, Formularios incluyendo todos sus elementos
e integración jQuery para ofrecer ventanas y tooltips dinámicos.
Uniformidad
Componentes
compatibilidad
Materialize que simplifica el proceso de creación de diseños web.
Permite (al igual que otros frameworks como Bootstrap) crear
interfaces que se adapten a distintas resoluciones y navegadores.
Crear menú lateral abierto o desplegable en función de la
resolución.
Animaciones con filosofía Material Design.
Crear diseños con Material Design como botones, tarjetas,
colecciones, iconos, barras de navegación, etiquetas, ‘toast’,
modales, etc.
Fuente: autor con información de https://www.ecured.cu/
Tabla 4. Otros framework

Fuente: http://www.linuxlinks.com/ApplicationFrameworks/

1.3. Lenguajes de Programación

Un lenguaje de programación es básicamente un sistema estructurado de comunicación,

similar al humano, el cual nos permite comunicarnos por medio de signos, ya sean palabras,
sonidos o gestos. Refiriéndonos a los aparatos, este sistema está organizado para que se
entiendan entre sí y a su vez interprete las instrucciones que debe ejecutar. (Morales, 2014).

LENGUAJE VENTAJAS DESVENTAJAS

Es un lenguaje estático para el
desarrollo de sitios web
Es sencillo
HTML Texto de forma estructurada y
agradable
Archivos pequeños. Y
Despliegue rápido.
Lenguaje de fácil aprendizaje
Lenguaje estático.
Existe la posibilidad que la
interpretación por parte de los
navegadores varié
Guarda etiquetas que pueden
terminar siendo basura
Diseño más lento
Etiquetas muy limitadas
 Lo admiten todos los
exploradores
Este es un lenguaje
JavaScript interpretado, no requiere
compilación
El código se ejecuta en el
cliente
Script con capacidades
limitadas por seguridad
Lenguaje de scripting seguro y
fiable.
Muy fácil de aprender.
PHP Se caracteriza por ser un
lenguaje muy rápido.
Soporta en cierta medida la
orientación a objeto. Clases
y herencia.
Es un lenguaje
multiplataforma: Linux,
Windows, entre otros.
Capacidad de conexión con
la mayoría de los
manejadores de base de
datos: MysSQL,
PostgreSQL, Oracle, MS
SQL Server, entre otras.
Capacidad de expandir su
potencial utilizando
módulos.
Posee documentación en su
página oficial la cual
incluye descripción y
ejemplos de cada una de
sus funciones.
Es libre, por lo que se
presenta como una
alternativa de fácil acceso
para todos.
Incluye gran cantidad de
funciones.
No requiere definición de
tipos de variables ni manejo
detallado del bajo nivel.
Código visible por cualquier
usuario.
El código debe descargarse
completamente.
Puede poner en riesgo la
seguridad del sitio, con el
actual problema llamado XSS
(significa en inglés Cross Site
Scripting renombrado a XSS
por su similitud con las hojas
de estilo CSS).
Se necesita instalar un
servidor web.
Todo el trabajo lo realiza el
servidor y no delega al
cliente. Por tanto, puede ser
más ineficiente a medida
que las solicitudes
aumenten de número.
La legibilidad del código
puede verse afectada al
mezclar sentencias HTML y
PHP.
La programación orientada
a objetos es aún muy
deficiente para aplicaciones
grandes.
Dificulta la organización
por capas de la aplicación.
 Completamente orientado a
objetos. Mayor consumo de recursos
Controles de usuario y
personalizados.
División entre la capa de
ASP.NET aplicación o diseño y el
código.
Facilita el mantenimiento
de grandes aplicaciones.
Incremento de velocidad de
respuesta del servidor.
Mayor velocidad.
Mayor seguridad.

Ejecución rápida del Complejidad de aprendizaje

servlets.
Crear páginas del lado del
servidor.
Multiplataforma.
JSP Código bien estructurado.
Integridad con los módulos
de Java.
La parte dinámica está
escrita en Java.
Permite la utilización se
servlets.

RUBY Permite desarrollar Su uso no está muy

soluciones a bajo Costo. extendido.
Software libre.
Multiplataforma.
Fuente: autor con información obtenida en internet
Fuente: https://www.freelancer.es/community/articles/que-lenguaje-programacion-web-
debo-aprender
 Referencias

Galeano, S. (2018). EL NÚMERO DE USUARIOS DE INTERNET EN EL MUNDO

SUPERA EL 50% DE LA POBLACIÓN: 4.000 MILLONES (2018). M4rketing
Ecommerce.
Gutierrez, J. J. (2014). Que es un framework web. Recuperado el 4 de abril de 2018, de
http://www.lsi.us.es/~javierj/investigacion_ficheros/Framework.pdf
Martin, D. (21 de junio de 2010). Diseño de aplicaciones adaptivas. No Solo Usabilidad, 9.
Recuperado el 5 de abril de 2018, de
http://nosolousabilidad.com/articulos/aplicaciones_adaptativas.htm
Morales, R. (2014). Lenguajes de programación: ¿qué son y para qué sirven? Colombia
Digital. Recuperado el 6 de abril de 2018, de
https://colombiadigital.net/actualidad/articulos-informativos/item/7669-lenguajes-
de-programacion-que-son-y-para-que-sirven.html
Núñez, Y. y Maldonado, L. (2017). El mito del diseño web adaptativo. Aprendizaje Digital,
Vol 2 N° 2, 9-16.