UNIVERSIDAD POLITÉCNICA DE SINALOA

PROGRAMA ACADÉMICO DE
INGENIERÍA EN INFORMÁTICA

Tesina

“Implementación de Framework de
desarrollo web durante un proyecto”

Para obtener la acreditación de las estadías

profesionales y contar con los créditos para
el grado de Ingeniero en Informática.

Autor: Bernal Corral Daniel

Asesor: M. C. Alejandro Pérez Pasten Borja
Asesor OR: Ing. Omar Vidaña Peraza

Mazatlán, Sinaloa 13 de Diciembre del 2019

UPC
Mazatlán, Sin aloa, 02 de Septiembre de 2019.

LIC. NUBIA VANESSA FEUX VALENZUELA

Jefa del Depart amento de Vinculación
UNIVERSID AD POLITECNICA DE SINALOA
Presente.

La pr esente es con el fin de saludarlo y al mismo tiempo hacer de su conocimiento

que el C. DANIEL BERNAL CORRAL de la Carrera de INGENIERÍA EN INFORMÁTICA,
con número de matrícula 2016030049 fue aceptad o para reali zar sus estancias académicas
profesionales durante el periodo del 02 de Septiembre de 2019 al 06 de Diciembre del
2019, acumula ndo un tota l de 600hrs., en horario de Lune·s a Viernes 9:00 a.m. a 5:00 p.m.
y Sábados de 8:00 a.m. a 1:00 p.m., integrándo se en nues t ra Firma UPC, en el
departamento de SISTEMAS.

Por lo anterior quedamos agradecidos con ustedespor proporcionarnos este tipo

de apoyo, quedando a sus resp etablesórd enes.

LIC. PERLA MARIXA ZATARAIN BARRIOS

ENCARGADO RECU}\50S HUMANOS
'--

Sierro¼ RumorosaNo 321 Fracc.Lomasde Maz;,tlaf\

CP82110Mazatian. Sinaloa,Mb.."co. Tel. (669)112 052.
 Mazatlán, Sinaloa, 06 de Diciembre de 2019.

LIC. NUBIA VANESSA FELIX VALENZUELA

Jefa del Departamento de Vinculación
UNIVERSIDAD POLITECNICA DE SINALOA
P r e s e n t e.

La pre sente es con el fin de saludarla y \l mismo tiempo hacer de su conocimiento

que el C. DANIEL BERNAL CORRAL qu ien cursa el décimo sem estre de INGEN/ERIA EN
INFORMÁTICA, ha culminado satisfactoriamente sus Prácticas Profesionale,sacumulando
un total de600hrs. de trabajo, en el Departamento de SISTEMAS.

Por lo anterior quedamos agradecidos con uste des por proporcionarnos este
tipo de apoyo, quedando a sus respetables órdenes.

, 0 :--1.s:; t i O IA PnOFESIONAL

RAIN BARRIOS
'.'(l'ANOS

Sierra Rumorosa No. 32l Fracc Lomas de Mazatl n

CP B2110 Ma zatlan,Sinak>a, M éxceo Tel.(669)112 0520
'A',\ \\ , UpC. t il>.
 UNIVERSIDAD POLITECNICA DE SINALOA

C. Bernal Corral Daniel

Follo 2016030049-2019-9
Presente -

Por medio de la presente me permito comunicarle que es de aceptars e el

tema de tesina. el cual se ha solic1tao o baJo e l ti tu lo .

" Implem en taci ó n de Framework para desarrollo web durante un proyecto"

mismo que usted desarrollará con objeto de dar lugar a los tramites conducentes
para la acred1ta ci6n d e l a a signatura de Estadias Profesionales de la Unidad
Académica de.

lngon icria en ln formAtlc a

Asi mismo. Le comunico que para el d osarro ll o de la e.lada tesina le ha sido

asignado como director de la misma a:Alejandm Perez Pasten Borja, y como
asesores a Rosa Angelica Rosales Camacho, Rodo lfo O lt&b s y Roborto
Antonio Martinez
Tho m pso n. ¡;<,Y' º ':,
í.
S n otro particular por el momento, a r e t n para enviarle un CQrd1al
saludo 1-
• *
At
ll1
'
D r. Rod O; t s Robies
01RECCION
DirectordelPrograma AdacM111rt u á lí l ll9'lnieria en Informática

Universidad Politócnrca de Sinal oa

SEP IIT.P
C.irrctcra Mun,cipa llbr \1z.i1l,\n H19ul!rd1 Km.3.Col. G1,ndrO Est rada.C.P. 82199 Mazc1tl.)n, Sin T , 1 (669] 1800695 y 96
0

www.upsin.edu.mx
 UNIVERSIDAD POLITÉCNICA DE SINALOA

C. Bernal Corral Daniel Folio 2016030049-2019-9

Presente.-

Por este conducto le envío un cordial saludo y aprovecho la ocasión para notificarle
que el jurado que le fue asignado para evaluar la tesina desarrollada en las estadías
profesionales denominada "Implementación de Framework para desarrollo web
durante un proyecto" y que después de ser revisada en reunión de sinodales, ante la
Dirección de la Unidad Académica de Ingeniería en lnfonmática, integrada por:

PRESIDENTE DEL JURADO: Alejandro Perez Pasten

Borja SINODAL: Rosa Angellca Rosales Camacho

SINODAL: Rodolfo Ostos Robles

SINODAL: Roberto Antonio Martinez Thompson

Ha decidido autorizar y aceptar la digitalizaciónde la mismapor el participante,

conforme a la normatividad vigente y cum¡:>li jWdOcon los requisitos para tal
caso.

¡r90l ::
Agradeciendo la atención a la presel
respeto.
·
=> _..,..
J i } mi atenta consideracói n y

*Ate - ·
m UP S IN
\.... ,.l·
"

o' os Robles
DIRECCION
Director del Programa Acllldb :iil::cnde-l¡¡genierfa en
Informática
Universidad Politécnica de Sinaloa

t,r,p
SEP º'2019. Ario del Caudillo del Sur, Em ili ano 7,1paca .
-- -- -
ümetera Municipal Libre Maz;itlá n Higueras Km. 3, Co,. Ge naro Estrada.C.P 82199.11'.azatlár S n. ,el 669 l&l0é9-5 y 96
www.upsin. edu.mx
Agradecimientos
Agradezco a mis padres por brindarme todo su apoyo durante mis
estudios, por darme las clases más importantes, por haber hecho posible que
llegara a este momento, por enseñarme que no siempre todo sale perfecto y
que debo esforzarme para obtener lo que quiero, por darme ánimos para
seguir, por preocuparse por mí y esforzarse para que mi vida fuera mejor.

A mi asesor por aconsejarme y corregir los errores que cometí durante el

desarrollo de la tesina, por tomarse el tiempo para ver cada detalle y hacer
recomendaciones, sugerir opciones, etc.
A mi hermano por ayudarme a no rendirme, por asumir su rol
de hermano mayor y tratar de guiar, por preocuparse por mí y ayudarme
siempre que lo he necesitado.
A los profesores que he tenido a lo largo de mis estudios y que me
aportaron un poco de su conocimiento para enriquecer el mío.
A todos mis compañeros que me ayudaron a hacer más amenas las
clases.

6
ÍNDICE TEMÁTICO
Índice de imágenes.....................................................................9
Resumen.....................................................................................11
Abstract......................................................................................11
Introducción...............................................................................11

Capítulo I.....................................................................................12
1. Antecedentes..........................................................................13
1.1. Localización..................................................................13
1.2. Objetivos de la institución............................................13
1.3. Visión............................................................................14
1.4. Misión...........................................................................14
2. Planteamiento del problema...................................................14
2.1. Propuesta de investigación..........................................14
2.2. Objetivos.......................................................................14
2.2.1. Objetivo General................................................15
2.2.2. Objetivos Específicos........................................15
2.3. Preguntas de investigación............................................15
2.4. Hipótesis.......................................................................15
2.5. Limitaciones y supuestos..............................................15
2.6. Relevancia....................................................................16

Capítulo II...............................................................................17
3. Desarrollo Web..................................................................18
3.1 Frontend...............................................................18
3.2 Backend...................................................................19
3.3 Framework................................................................19
 3.4 CodeIgniter................................................................20
3.5. Laravel…..................................................................20
3.6 Open Source..............................................................21
3.7 Svelte........................................................................21
3.8 Materialize.................................................................22
3.9 HTML.........................................................................23
3.10 CSS.............................................................................23
3.11 JavaScript................................................................24
3.12 PHP..........................................................................24
3.13 XAMPP...................................................................25
3.14 Visual Core Studio.....................................................26
3.15 Webpack..................................................................27
3.16 Ajax........................................................................27
3.17 Jquery.....................................................................27
3.18 Json Web Token.....................................................28
3.19 Symfony.................................................................28
3.20 ZendFramework.....................................................29
3.21 Phalcon..................................................................30
3.22 CakePHP..................................................................30
3.23 Yii.............................................................................31
3.24 FuelPHP..................................................................31
Capítulo IIl.................................................................................33
4. Diseño..............................................................................34
5. Desarrollo.........................................................................34
5.1. Instalación de Framework....................................34
5.2 CodeIgniter.........................................................34
5.3. Svelte.............................................................36
 5.3. Diseño de base de datos......................................38
6. Resultados y discusión......................................................48
7. Conclusiones.....................................................................54
8. Bibliografía.........................................................................55
9. Anexos...............................................................................57
9.1. Glosario................................................................57

ÍNDICE DE IMÁGENES

Imagen 1.1 - Ubicación de la empresa......................................13

Imagen 2.1 – Estructura Desarrollo Web...................................18
Imagen 2.2 – Logo CodeIgniter...................................................20
Imagen 2.3 – Logo Laravel….....................................................20
Imagen 2.4 – Logo Open Souce...............................................21
Imagen 2.5 – Logo Svelte..........................................................22
Imagen 2.6 – Ejemplo de Login creado en Materialize.............23
Imagen 2.7 – Logo JavaScript…..............................................24
Imagen 2.8 – Logo PHP.............................................................25
Imagen 2.9 – Panel de Control Xampp.........................................25
Imagen 2.10 – Vista de Visual Core Studio…...............................26
Imagen 2.11 – Logo Symfony.......................................................28
Imagen 2.12 – Logo ZendFramework............................................29
Imagen 2.13 – Logo Phalcon........................................................30
Imagen 2.14 – Logo CakePHP.....................................................30
Imagen 2.15 – Logo Yii.................................................................31
Imagen 2.16 – Logo FuelPHP......................................................32
Imagen 3.1 – Descarga CodeIgniter.............................................34
Imagen 3.2 – Instalación CodeIgniter..........................................35
Imagen 3.3 – Instalación CodeIgniter.........................................35
Imagen 3.4 – Config.php.............................................................36
Imagen 4.1 – Ejecutar Simbolo de Sistema.................................36
Imagen 4.2 – Generar Proyecto..................................................37
Imagen 4.3 – Instalar Archivos….................................................37
Imagen 4.4 – Instalacion XAMPP..................................................38
Imagen 4.5 – Instalacion XAMPP..................................................39
Imagen 4.6 – Iniciar servicios de XAMPP..................................40
Imagen 4.7 – Crear Base de datos…...........................................40
Imagen 4.8 – Crear Base de datos….........................................40
Imagen 4.9 – Crear Tabla................................................................41
Imagen 4.10 – Crear Tabla….....................................................41
Imagen 5.1 – Catalogo.svelte........................................................41
Imagen 5.2 – Catalogo de Usuarios….........................................42
Imagen 5.3 – Text.svelte.............................................................42
Imagen 5.4 – Notificaciones.svelte................................................43
Imagen 5.5 – App.svelte...............................................................43
Imagen 5.6 – Routes.js….............................................................44
Imagen 5.7 – Config/config.php....................................................44
Imagen 5.8 – Config/database.php.................................................45
Imagen 5.9 – Vista/Auth.php...........................................................46
Imagen 5.10 – Librerias/JWT.php..................................................46
Imagen 5.11 – Models/Users.php..................................................47
Imagen 5.12 – Vista/login.............................................................47
Resumen
El presente documento ha sido realizado con la finalidad de acreditar la carrera
de ingeniería en informática en la universidad politécnica de Sinaloa. El
contenido expuesto en el presente trabajo hace mención a los Framework
utilizados para el desarrollo web, los cuales son utilizados con la finalidad de
facilitar el trabajo de los desarrolladores y unificar paqueterías. esto sirve para
ahorrar tiempo a guiar los proyectos para que puedan seguir una estructura

Abstract
This document has been made with the purpose of accrediting the computer
engineering career at the Polytechnic University of Sinaloa. The content
presented in this work refers to the frameworks used for web development,
which are used in order to facilitate the work of developers and unify packages.
this serves to save time to guide the projects so that they can follow a structure

Introducción
En la actualidad existe una gran variedad de Framework que nos proporcionan
muchas herramientas que facilitan el desarrollo, algunas de ellas son muy
populares y utilizadas por los desarrolladores, estas ayudan a crear proyectos
con mayor facilidad y además con más calidad ya que la arquitectura utilizada
está muy bien organizada lo que permite identificar donde esta cada parte de
los proyectos y así pueden adaptarse a él con mayor facilidad.
 CAPÍTULO I
_
Antecedentes y planteamiento del problema
1. Antecedentes
UPC Technologies nace con el fin de diversificar los servicios de la firma
UPC y así ofrecer a sus clientes servicios adicionales, enfocados a soluciones
en tecnologías de información. La finalidad de este concepto, es que el cliente
encuentre la integración de las soluciones basadas en Tecnología, a la medida
de su empresa en un solo lugar. Actualmente contamos con la capacidad de
brindar estos servicios a sus clientes con experiencia, conocimiento y
tecnología, de tal forma que sea más consistente y predecible, garantizando
una óptima relación costo/beneficio.
UPC es una firma de servicios profesionales, nos distinguimos por otorgar
soluciones en las áreas de defensa Fiscal, Planeación Fiscal y Litigiosa,
Tecnologías de Información, Desarrollo e implementación de Procesos
Administrativos y Financieros. Nos concentramos en las soluciones que
aporten ahorro y beneficio a las empresas, lo que nos permite dar excelentes
resultados. Preocupados siempre por la capacitación de todos los que en ella
colaboramos, con el fin de superar las expectativas de nuestros clientes.
Estamos en constante crecimiento, siempre a la vanguardia de los cambios
globales, generando más de 230 fuentes de empleo en 6 ciudades de la
República Mexicana y 1 en el extranjero que trabajan para que usted sólo se
preocupe por hacer negocios, buenos negocios.
1.1. Localización
UPC Technologies se encuentra ubicada por la calle Sierra Rumorosa No. 321,
Lomas de Mazatlán, Mazatlán, Sinaloa, México.
Ubicación de la empresa

Imagen 1.1
Fuente: Google Maps

1.2. Objetivos de la institución

El Software para la facturación electrónica es un desarrollo de UPC
Technologies con el objetivo de satisfacer las necesidades de las empresas,
negocios y/o personas físicas que deseen implementar un control
administrativo y financiero, además de poder emitir comprobantes digitales, por
medios propios o por PAC.
1.3. Misión
Contribuir con nuestro conocimiento y capital humano para proteger,
brindar confianza y ofrecer seguridad jurídica en el fortalecimiento del
patrimonio de nuestros clientes y sus plataformas de negocios.
1.4. Visión
Ser una firma líder, reconocida nacional e internacionalmente, por la
diversidad y alta calidad de servicios y desempeño exitoso, asegurando la
protección y el crecimiento del capital de nuestros clientes.

2. Planteamiento del problema

En la actualidad la mayoría de los proyectos son realizados utilizando un
Framework ya que estos nos brindan una estructura estandarizada y
organizada que nos facilitan el desarrollo web, una herramienta que nos aporta
puede ser la inclusión de librerías que nos facilitan la interacción entre los
componentes del proyecto.
Existe una gran variedad de Framework que permiten y facilitan el
desarrollo web, cada uno cuenta con características diferentes que aportan una
ligera ventaja o desventaja respecto a otros, además son actualizados
constantemente por lo que se mantienen activos y competitivos durante mayor
tiempo.
Esto obliga a los desarrolladores a investigar las herramientas que tiene
cada Framework y cada mejora que se le realiza para poder tener claro cuál
es el que necesita para el tipo de proyecto que va a desarrollar.
2.1. Propuesta de investigación
Como resultado de la problemática se propone analizar un proyecto que
va a ser realizado durante las estadías en un Framework y, además,
simultáneamente se va a comparar en otros diferentes para identificar las
diferencias y comparar el desempeño que tiene cada uno para concluir cual es
conveniente utilizar en proyectos similares.
Dicho análisis no pretende influenciar a la comunidad a utilizar un
Framework en específico simplemente va a mostrar el resultado de las
investigaciones y prácticas realizadas desde el punto de vista del autor, por lo
que cada persona puede sentirse libre de aceptar o no las recomendaciones
que se harán durante la tesina/el artículo.
2.2 Objetivos de la investigación
A partir del planteamiento del problema y la propuesta de investigación
se definen los siguientes objetivos
1.1.1.1 Objetivo general
Evaluar resumidamente cada punto en la creación de un proyecto en
diferentes Framework para identificar las ventajas que tienen uno sobre otros
para llegar a la conclusión de cual es recomendado utilizar en proyectos
relacionados.

1.1.1.2 Objetivos particulares

Adquirir y compartir conocimientos de los diversos Framework utilizados

en desarrollo web.
Fortalecer los conocimientos en los lenguajes utilizados durante el
proyecto.
Complementar la información proporcionada con investigaciones de
diferentes fuentes para brindar una perspectiva neutra.
Ayudar a otros desarrolladores a elegir la herramienta conveniente con
el resultado de la investigación.

1.1.2 Preguntas de investigación

● ¿Cuáles son las ventajas de implementar un Framework en el

desarrollo web?
● ¿Existe alguna desventaja en el uso de un Framework en el
desarrollo web?
● ¿El desarrollo web es posible sin utilizar un marco de trabajo?
● ¿Qué diferencia hay en el desarrollo web con y sin un entorno
de trabajo?

1.1.3 Hipótesis
El o los Framework que sobresalgan durante la evaluación serán
aquellos más populares debido a que son los más utilizados, por lo que existe
más material para dar un buen uso a sus herramientas.

1.1.4 Limitaciones y supuestos

Una importante limitante será el tiempo, a pesar de que el periodo es de
2-3 meses que podría ser relativamente largo sin embargo no es suficiente
para analizar a profundidad cada característica de cada Framework, por lo
que se tratará de explicar de forma breve y precisa.
1.1.5 Relevancia
Los Framework son un conjunto de herramientas que facilitan el
desarrollo, ya que nos brindan un entorno de trabajo por lo que se vuelve más
fácil tener un punto de partida estandarizado ya sea para iniciar o continuar un
proyecto, sin embargo, existe una gran variedad de Framework existentes
tanto que puede llegar a dificultar a los desarrolladores al momento de elegir el
más adecuado para el tipo de proyecto que desea realizar, por lo que es
conveniente investigar las características de cada entorno de trabajo, para así
tomar una mejor decisión y evitar complicaciones.
 CAPÍTULO 2
_
Antecedentes y planteamiento del problema
A continuación, en el capítulo ll se exponen conceptos e información dedicados
a los lectores, la cual servirá de apoyo para una mejor comprensión de los
temas.

3. Desarrollo Web
Desarrollo web significa construir y mantener sitios web; es el trabajo que tiene
lugar en un segundo plano y que permite que una web tenga una apariencia
impecable, un funcionamiento rápido y un buen desempeño para permitir la
mejor experiencia de usuario. Los desarrolladores web son como duendes con
poderes: nunca los ves, pero son los que hacen que todo esté bien y funcione
de manera rápida y eficiente. [1]
Estructura Desarrollo Web

Imagen 2.1

Fuente: https://platzi.com/blog/que-es-frontend-y-backend/

3.1. Frontend
Es la parte de un programa o dispositivo a la que un usuario puede acceder
directamente. Son todas las tecnologías de diseño y desarrollo web que corren
en el navegador y que se encargan de la interactividad con los usuarios.
HTML, CSS y JavaScript son los lenguajes principales del Frontend, de los que
se desprenden una cantidad de frameworks y librerías que expanden sus
capacidades para crear cualquier tipo de interfaces de usuarios. React, Redux,
Angular, Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son algunos de
ellos. [2]
3.2. Backend
Es la capa de acceso a datos de un software o cualquier dispositivo, que no es
directamente accesible por los usuarios, además contiene la lógica de la
aplicación que maneja dichos datos. El Backend también accede al servidor,
que es una aplicación especializada que entiende la forma como el navegador
solicita cosas.
Algunos de los lenguajes de programación de Backend son Python, PHP,
Ruby, C# y Java, y así como en Frontend, cada uno de los anteriores tiene
diferentes frameworks que te permiten trabajar mejor según el proyecto que
estás desarrollando. En Platzi tenemos Django, Laravel, Ruby On Rails y
ASP.Net, los hemos elegido sobre todo porque tienen una gran comunidad que
los respalda. [2]
3.3. Framework
Un software determinado. Esta definición, algo compleja, podría resumirse
como el entorno pensado para hacer más sencilla la programación de cualquier
aplicación o herramienta actual.
Este sistema plantea varias ventajas para los programadores, ya que
automatiza muchos procesos y además facilita el conjunto de la programación.
Es útil, por ejemplo, para evitar el tener que repetir código para realizar
funciones habituales en un rango de herramientas, como puede ser el acceder
a bases de datos o realizar llamadas a Internet. Todas estas tareas son las que
se realizan de forma mucho más fácil cuando se trabaja dentro de un
Framework.
Plantea muchas ventajas y, además, es capaz de hacer que se realicen incluso
labores mucho más complejas que, por otros medios, serían imposibles de
plantear siquiera a la hora de programar algo. No obstante, su utilidad es algo
que depende del tipo de programa y de contexto en el que vaya a emplearse.
Existen muchos Frameworks diferentes, como pueden ser Meteor para trabajar
con JavaScript en web y móviles o el más que popular .NET Framework de
Microsoft. Todos ellos poseen herramientas específicas y funciones
características que encajan mejor con el tipo de aplicación a desarrollar, así
como el uso que se le pretenda dar una vez terminada. Son, a día de hoy, algo
imprescindible para cualquier programador, sea amateur o profesional. [3]
3.4. CodeIgniter
Es un potente Framework de PHP muy liviano, construido para desarrolladores
que necesitan un kit de herramientas simple y elegante para crear aplicaciones
web completas. [4]
Logo de CodeIgniter

Imagen 2.2
Fuente: https://victorroblesweb.es/2013/12/30/crud-con-codeigniter/

3.5. Laravel
Laravel es uno de los Framework de código abierto más fáciles de asimilar para
PHP. Es simple, muy potente y tiene una interfaz elegante y divertida de usar.
es el de ser un framework que permita el uso de una sintaxis refinada y
expresiva para crear código de forma sencilla, evitando el «código espagueti» y
permitiendo multitud de funcionalidades. Aprovecha todo lo bueno de otros
Framework y utiliza las características de las últimas versiones de PHP.
La mayor parte de su estructura está formada por dependencias,
especialmente de Symfony, lo que implica que el desarrollo de
Laravel dependa también del desarrollo de sus dependencias.[
https://www.arsys.es/blog/programacion/que-es-laravel/]
Logo de Laravel

Imagen 2.3

Fuente: https://www.arsys.es/blog/programacion/que-es-laravel/
3.6. Open Source
También llamado “Código Abierto” es un término que se utiliza para denominar
a cierto tipo de software que se distribuye mediante una licencia que le permite
al usuario final, si tiene los conocimientos necesarios, utilizar el código fuente
del programa para estudiarlo, modificarlo y realizar mejoras en el mismo,
pudiendo incluso hasta redistribuirlo.
Este tipo de software provee de características y ventajas únicas, ya que los
programadores, al tener acceso al código fuente de una determinada aplicación
pueden leerlo y modificarlo, y por lo tanto pueden mejorarlo, añadiéndole
opciones y corrigiendo todos los potenciales problemas que pudiera encontrar,
con lo que el programa una vez compilado estará mucho mejor diseñado que
cuando salió de la computadora de su programador original. [5]
Logo Open Source

Imagen 2.4
Fuente: https://tecnologia-facil.com/que-es/que-es-open-source/

3.7. Svelte
Es un Framework orientado a componentes que nos ayuda a implementar
nuestros interfaces de usuario. ¿Entonces, qué nos aporta con respecto a los
que hemos nombrado anteriormente? En este caso el enfoque a la hora de
realizar esta tarea es lo que va a marcar la diferencia. En los casos conocidos
(React, Vue o Angular) se nos anima a desarrollar código declarativo que,
posteriormente, exige un trabajo extra al navegador para interpretarlo.
Igualmente, exigen introducir en los archivos que servimos al compilador la
librería correspondiente que estemos utilizando. Svelte, por el contrario,
introduce una etapa de compilación que va a transformar nuestro código
declarativo en un código imperativo con diversas optimizaciones.
Además, evita introducir mecanismos como Virtual DOM para realizar las
modificaciones en el DOM de la página; sino que, utilizando este proceso de
compilación con sus optimizaciones, puede determinar en tiempo de
compilación qué va a cambiar en un determinado componente y generar el
código más adecuado que permita realizar estos cambios. [6]

Logo de Svelte

Imagen 2.5
Fuente: https://midu.dev/introducci%C3%B3n-a-svelte/

3.8. Materialize
Te ofrece una base de CSS sobre la cual implementar cualquier proyecto, ya
sea un sitio web o aplicación basada en estándares web. Esa base de código
contiene una cantidad enorme de interfaces ya diseñadas, que puedes
incorporar a tu proyecto a base de aplicar clases (class CSS). Además, tiene
una serie de código JavaScript asociado, ya que muchas de las interfaces de
usuario requieren código de programación para funcionar.
Entre las cosas que te ofrece Materialize encuentras todo tipo de interfaces,
como colores, transiciones, tipografías, botones, navegadores, cabeceras, base
de datos de iconos, elementos de formulario, tarjetas, tooltips, acordeones,
menús desplegables, botones flotantes, migas de pan, menús con pestañas,
sistemas de paginación, listas, así como un sistema de rejilla y mucho más. Por
supuesto, todos los componentes y las utilidades de layout son responsivo y a
se adaptan a todo tipo de pantallas, grandes y pequeñas. Por todo, este
Framework de diseño web es un auténtico regalo para el desarrollador. [7]
 Ejemplo de Login creado en Materialize

Imagen 2.6

Fuente: https://codepen.io/julianasobreira/pen/xVpxoO

3.9. HTML
HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en ingles
"HyperText Markup Language", es un lenguaje que pertenece a la familia de los
"lenguajes de marcado" y es utilizado para la elaboración de páginas web. El
estándar HTML lo define la W3C (World Wide Web Consortium) y actualmente
HTML se encuentra en su versión HTML5.
Cabe destacar que HTML no es un lenguaje de programación ya que no cuenta
con funciones aritméticas, variables o estructuras de control propias de los
lenguajes de programación, por lo que HTML genera únicamente páginas web
estáticas, sin embargo, HTML se puede usar en conjunto con diversos
lenguajes de programación para la creación de páginas web dinámicas. [8]
3.10. CSS
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el
lenguaje utilizado para describir la presentación de documentos HTML o XML,
esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS
describe como debe ser renderizado el elemento estructurado en pantalla, en
papel, hablado o en otros medios.
CSS es uno de los lenguajes base de la Open Web y posee una especificación
estandarizada por parte del W3C. Desarrollado en niveles, CSS1 es ahora
obsoleto, CSS2.1 es una recomendación y CSS3, ahora dividido en módulos
más pequeños, está progresando en camino al estándar. [9]

3.11 JavaScript
Es un lenguaje ligero e interpretado, orientado a objetos con funciones de
primera clase, más conocido como el lenguaje de script para páginas web, pero
también usado en muchos entornos sin navegador, tales como node.js, Apache
CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en
prototipos, dinámico, soporta estilos de programación funcional, orientada a
objetos e imperativa. Leer más sobre JavaScript.
Esta sección de la web está dedicada netamente al lenguaje JavaScript, y no a
las partes que son específicas de las páginas web u otros entornos de
servidor. Para información sobre las APIs específicas de las páginas web,
consulte DOM y las APIs WEB.
JavaScript no debe ser confundido con el lenguaje de programación Java.
Ambos "Java" y "JavaScript" son marcas registradas de Oracle en Estados
Unidos y otros países. Sin embargo, los dos lenguajes de programación tienen
muchas diferencias en las sintaxis, semántica y usos. [10]
Logo de JavaScript

Imagen 2.7

Fuente: https://anthoncode.com/javascript-logo-vector-eps/

3.12. PHP
PHP es un lenguaje interpretado de propósito general ampliamente usado,
diseñado especialmente para desarrollo web y que puede ser incrustado dentro
de código HTML. Generalmente se ejecuta en un servidor web, tomando el
código en PHP como su entrada y creando páginas web como salida. Puede
ser desplegado en la mayoría de los servidores web y en casi todos los
sistemas operativos y plataformas sin costo alguno.
PHP se encuentra instalado en más de 20 millones de sitios web y en un millón
de servidores, el número de sitios en PHP ha compartido algo de su
preponderante sitio con otros nuevos lenguajes no tan poderosos desde agosto
de 2005. Este mismo sitio web de Wikipedia está desarrollado en PHP. Es
también el módulo Apache más popular entre las computadoras que utilizan
Apache como servidor web. La versión más reciente de PHP es la 5.3.2 (for
Windows) del 4 de marzo de 2010.
El gran parecido que posee PHP con los lenguajes más comunes de
Programación estructurada, como Lenguaje de Programación C y Perl,
permiten a la mayoría de los Programadores crear aplicaciones complejas con
una curva de aprendizaje muy corta. También les permite involucrarse con
aplicaciones de contenido dinámico sin tener que aprender todo un nuevo
grupo de funciones. [11]
Logo de PHP

Imagen 2.8

Fuente: https://www.ecured.cu/PHP

3.13. XAMPP
XAMPP es una distribución de Apache completamente gratuita y fácil de
instalar que contiene MariaDB, PHP y Perl. El paquete de instalación de
XAMPP ha sido diseñado para ser increíblemente fácil de instalar y usar. [12]
 Panel de Control Xampp

Imagen 2.9

Fuente: https://devtuts.butlerccwebdev.net/testserver/using-xampp-control-panel.html

3.14. Visual Core Studio

Es un editor de código fuente desarrollado por Microsoft para Windows, Linux y
macOS. Incluye soporte para la depuración, control integrado de Git, resaltado
de sintaxis, finalización inteligente de código, fragmentos y refactorización de
código. También es personalizable, por lo que los usuarios pueden cambiar el
tema del editor, los atajos de teclado y las preferencias. Es gratuito y de código
abierto,12 aunque la descarga oficial está bajo software propietario requiriendo
tus datos de uso del programa legalmente. [13]
Vista de Visual Core Studio

Imagen 2.10

Fuente: https://es.wikipedia.org/wiki/Visual_Studio_Code
3.15. Webpack
Es un sistema de bundling para preparar el desarrollo de una aplicación web
para producción. En cierta medida se puede considerar un Browserify
avanzado ya que tiene muchas opciones de configuración.
También se puede considerar una evolución de Grunt y Gulp, ya que permite
de alguna manera automatizar los procesos principales que son transpilar y
preprocesar código de .scss a .css, de ES7 a ES5/6, etc...
Para poder utilizar Webpack en tu proyecto web debes tener instalado Node.js
en tu equipo y con el comando npm install -g webpack tendrás Webpack
instalado de forma global en tu equipo (También puedes instalarlo a nivel de
proyecto y correrlo con NPM scripts). [14]

3.16. Ajax
es el acrónimo de Asynchronous Javascript and XML, es decir: Javascript y
XML Asincrono. Este acrónimo fue utilizado por primera vez por Jesse James
Garret en 2005, en su publicación Ajax: a New Approach to Web Applications si
bien los componentes en que se basan y los recursos técnicos de que hace
uso ya existían desde muchos años antes.
Normalmente, AJAX se define como una técnica para el desarrollo de páginas
(sitios) web que implementan aplicaciones interactivas. No obstante,
analicemos un poco cada una de las palabras que la forman:
JavaScript es un lenguaje de programación conocido por ser interpretado por
los navegadores de páginas web.
XML es un lenguaje de descripción de datos pensado fundamentalmente para
el intercambio de datos entre aplicaciones, más que entre personas.
Asíncrono: en el contexto de las comunicaciones (y la visualización de una
página web no deja de ser un acto de comunicación entre un servidor y un
cliente) significa que el emisor emite un mensaje y continúa son su trabajo,
dado que no sabe (ni necesita saberlo) cuándo le llegará el mensaje al
receptor. [15]

3.17 Jquery

Es una librería de JavaScript (JavaScript es un lenguaje de programación muy

usado en desarrollo web). Esta librería de código abierto, simplifica la tarea de
programar en JavaScript y permite agregar interactividad a un sitio web sin
tener conocimientos del lenguaje.

Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos)
creados por desarrolladores de todo el mundo. Estos plugins resuelven
situaciones concretas dentro del maquetado de un sitio, por ejemplo: un menú
responsive, una galería de fotos, un carrousel de imágenes, un slide, un header
que cambia de tamaño, el desplazamiento del scroll al hacer clic en un botón
(anclas HTML), la transición entre páginas y miles de efectos más. [16]

3.18. Json Web Token (JWT)

Json Web Token es un conjunto de medios de seguridad para peticiones http y

así representar demandas para ser transferidos entre dos partes (cliente y
servidor). Las partes de un JWT se codifican como un objeto JSON que está
firmado digitalmente utilizando JSON Web Signature (JWS ). [ 17]

Modelo en CodeIgniter

Los modelos son clases PHP diseñadas para trabajar con información en su
base de datos. Por ejemplo, supongamos que usa CodeIgniter para administrar
un blog. Es posible que tenga una clase de modelo que contenga funciones
para insertar, actualizar y recuperar los datos de su blog. [18]
3.19. Symfony

Es un proyecto PHP de software libre que permite crear aplicaciones y sitios

web rápidos y seguros de forma profesional.
Su código, y el de todos los componentes y librerías que incluye, se publican
bajo la licencia MIT de software libre [19]
Logo de symfony

Imagen 2.11

Fuente: https://symfony.com/

La documentación del proyecto también es libre e incluye varios libros y

decenas de tutoriales específicos.
Aprender a programar con Symfony te permite acceder a una gran variedad de
proyectos: el Framework Symfony2 para crear aplicaciones complejas, el micro
Framework Silex para sitios web sencillos y los componentes Symfony para
otras aplicaciones PHP.
Según GitHub, Symfony es el proyecto PHP más activo, lo que garantiza que
nunca te quedarás atrapado en un proyecto sin actividad. Además, el líder del
proyecto, Fabien Potencier, es la segunda persona más activa del mundo en
GitHub.
Aunque en su desarrollo participan cientos de programadores de todo el
mundo, las decisiones técnicas importantes siempre las toma Fabien
Potencier, líder del proyecto. Esto evita el peligro de que surjan forks absurdos
y la comunidad se fragmente.
Los componentes de Symfony son tan útiles y están tan probados, que
proyectos tan gigantescos como Drupal 8 están construidos con ellos.
En todo el mundo se celebran varias conferencias dedicadas exclusivamente a
Symfony. Para que te hagas una idea del tamaño de la comunidad, la
conferencia Symfony española (llamada de Symfony) es el evento PHP más
grande del país. [19]
3.20. Zend Framework

Es un Framework open source para PHP desarrollado por Zend, empresa

encargada de la mayor parte de las mejoras hechas a PHP, por lo que se
podría decir que es el framework "oficial". Nos referiremos a Zend Framework
por sus iniciales ZF en esta guía de publicación semanal.[20]
Logo de ZendFramework

Imagen 2.12
Fuente: https://framework.zend.com/participate/logos

ZF implementa el patron MVC, es 100% orientado a objetos y sus

componentes tienen un bajo acoplamiento por lo que los puedes usar en forma
independiente. Un punto importante es que nos brinda un estándar de
codificación que deberíamos seguir en nuestros proyectos.
A su vez, cuenta con soporte para internalización y localización de aplicaciones
(construir sitios multi idioma, convertir formatos de fechas, monedas, etc. según
la región. Algo importantísimo para crear aplicaciones con un enfoque global y
llegar de la mejor manera a la mayor cantidad de gente posible).
Facilita el setup de nuestro proyecto brindándonos herramientas para crear la
estructura de directorios, clases, etc. por línea de comandos, integración con
phpUnit por medio de Zend_Test para facilitar el testing de nuestra aplicación.
[20]
3.21. Phalcon
Phalcon, es un potente framework PHP. Está implementado como una extensión
en el lenguaje C qué ofrece un alto rendimiento y un menor consumo de recursos
por cada petición, lo que hace que tenga mayor rapidez. Está basado en el patrón
modelo-vista-controlador (MVC). Originalmente lanzado en 2012, es un marco de
código abierto con licencia bajo los términos de la licencia BSD.[21]
Logo de Phalcon

Imagen 2.13
Fuente: https://www.hypertechnologyweb.com/como-crear-el-archivo-services-php-en-phalcon/

Phalcon fue creado por Andrés Gutiérrez y colaboradores en busca de un nuevo

enfoque para los entornos de aplicaciones Web tradicionales escritos en PHP. La
intención original era utilizar "Chispa" como el nombre, pero la combinación de las
palabras PHP y Falcon (que es uno de los animales más rápidos) terminaron como
el nombre de la estructura. Versión inicial de Phalcon se puso a disposición el 14
de noviembre de 2012.
Phalcon 0.3.5 incluye un ORM escrito en C, los componentes de MVC, y los
componentes de caché. Este lanzamiento fue seguido por el Phalcon 0.5.0 que
trajo un dialecto de alto nivel de SQL llamada PHQL y Phalcon 0.6.0 que introdujo
Volt, un motor de plantillas similares a Jinja. Phalcon 1.0 fue lanzado el 21 de
marzo de 2013. [21]
3.22. CakePHP

Es un marco de desarrollo [framework] rápido para PHP, libre, de código

abierto. Se trata de una estructura que sirve de base a los programadores para
que éstos puedan crear aplicaciones Web. Nuestro principal objetivo es que
puedas trabajar de forma estructurada y rápida, sin pérdida de flexibilidad. [22]
Logo de CakePHP

Imagen 2.14
Fuente: https://cakephp.org/
Con CakePHP el desarrollo web ya no es monótono porque ofrecemos las
herramientas para que empieces a escribir el código que realmente necesitas:
la lógica específica de tu aplicación. Consigue una copia de CakePHP,
empieza con lo verdaderamente importante y no reinventes la rueda cada vez
que te incorpores a un nuevo proyecto.
CakePHP tiene un equipo de desarrolladores y una comunidad activos, lo que
añade valor al proyecto. Con CakePHP, además de no tener que reinventar la
rueda, el núcleo de tu aplicación se mejora constantemente y está bien
probado [22]

3.23. Yii

Es un Framework de PHP de alto rendimiento, basado en componentes para

desarrollar aplicaciones web modernas en poco tiempo. El nombre Yii significa
"simple y evolutivo" en chino. También se puede considerar como el acrónimo
de Yes It Is (que en inglés significa Sí, lo es)! [23]
Logo de Yii

Imagen 2.15

Fuente: https://www.yiiframework.com/

Es un Framework genérico de programación web, lo que significa que se puede

utilizar para desarrollar todo tipo de aplicaciones web en PHP. Debido a su
arquitectura basada en componentes y a su sofisticada compatibilidad de
caché, es especialmente apropiado para el desarrollo de aplicaciones de gran
envergadura, como páginas web, foros, sistemas de gestión de contenidos
(CMS), proyectos de comercio electrónico, servicios web compatibles con la
arquitectura REST y muchos más. [23]
3.24. FuelPHP

Es un simple y flexible Framework de código abierto para el desarrollo web

escrito en PHP, basado en las mejores ideas de otros Framework, el cual
implementa el patrón HMVC y tomando las mejores ideas de otros Framework
para crear una herramienta que no solo haga la vida más fácil, sino que
también permita hacerlo de una forma cómoda y eficiente. [24]
 Logo de FuelPHP

Imagen 2.16
Fuente: https://www.camaltec.es/experto-framework-fuelphp/

El Framework se inició a finales de 2010 por Dan Horrigan, poco después el

equipo creció para incluir a Phil Sturgeon, Schreuder Jelmer, Verton Harro y
Frank de Jonge. El equipo cuenta con décadas de experiencia en PHP y han
participado con proyectos de código abierto como CodeIgniter, PyroCMS,
ExiteCMS y ORM DataMapper por nombrar sólo algunos.
El 31 de julio de 2011 se completó la versión 1.0, el framework quedó listo para
ser utilizado para el desarrollo de nuevos proyectos y centros de producción.
[24]
 CAPÍTULO 3
_
Antecedentes y planteamiento del problema
4. Diseño
Debido a que el cliente que solicitó el sistema no fue muy estricto o específico
en la realización del sistema se trató de realizar un formato estándar que sea
atractivo visualmente y a su vez no incluya librerías poco utilizadas, por lo que
se evitó lo más posible no utilizarlas para tener un sistema optimizado.
Se implementa el Framework Sveltejs, el cual se enfoca en generar
componentes que pueden ser reutilizados en diferentes ocasiones dentro del
sistema buscando reducir las líneas de código.
Además, se implementa el Framework Materialize, el cual se enfoca en CSS y
facilita el diseño web.

5. Desarrollo
Desde la parte del Back End se utiliza el Framework Codeigniter el cual podría
ser llamado el núcleo del sistema, ya que es el más importante porque dentro
de él se ejecutan todas las configuraciones del proyecto que pueden ir desde la
conexión a la base de datos, hasta las rutas de cada pantalla.
5.1. Instalación de los Framework
5.2. CodeIgniter
Lo primero que se realizar es abrir la página oficial de Codeigniter que es
"https://codeigniter.com/en/download”
Descarga CodeIgniter

Imagen 3.1

Fuente: https://codeigniter.com/en/download

Elegiremos la versión CodeIgniter 3 ya que actualmente es la recomendada

debido a que la 2 es muy antigua y la 4 al ser muy reciente tiene algunos
errores.
Una vez descargado tendrás un zip, lo descargas y tendrás un carpeta (yo le
cambiaría el nombre) con todos los archivos del framework . Para instalar
CodeIgniter basta con mover dicha carpeta a la carpeta htdocs (windows) o
www (linux o hosting). Y listo, ya estaría instalado. [25]

Instalación Codeigniter

Imagen 3.2
Fuente: https://www.guidacode.com/2018/php/codeigniter/como-instalar-codeigniter/

Después desde el navegador debes ir al siguiente link que dependerá del

nombre y la ruta que le asignaste
“http://localhost/TuRuta/nombreCarpetaCodeIgniter”
Y lo que se te mostrará es la imagen siguiente que sería el hola mundo versión
CodeIgniter
Instalación Codeigniter

Imagen 3.3
Fuente: https://www.guidacode.com/2018/php/codeigniter/como-instalar-codeigniter/
Posteriormente será necesario configurar el archivo
Para poder configurar tenemos que acceder a application/config donde habrá
diferentes archivos .php en función de lo que queramos configurar. Vamos con
el archivo config.php. [26]
Finalmente se modificará dependiendo el hospedaje, por ejemplo, si estamos
trabajando en local, el valor debería ser:
http://localhost/TuRuta/nombreCarpetaCodeIgniter.
Config.php

Imagen 3.4
Fuente: https://www.guidacode.com/2018/php/codeigniter/como-instalar-codeigniter/

5.3. Svelte
Lo primero que se realiza es abrir cmd o símbolo de sistema como
administrador como se ve en la imagen
Ejecutar Símbolo de sistema

Imagen 4.1
Fuente: Del autor
Después se ejecuta un comando similar al siguiente, lo único que varía es la
última parte que indica el nombre que lleva el proyecto

Generar Proyecto

Imagen 4.2
Fuente: https://midu.dev/crea-un-nuevo-proyect-con-svelte-3/

npx: Es un comando para ejecutar paquetes de npm que ofrecen un binario.

Anteriormente teníamos que instalar de forma global estos paquetes con npm
install -g y luego instalarlo, pero ahora este comando nos ofrece hacerlo al
vuelo, solucionando muchos problemas de permisos que teníamos antes.
degit: Este es el paquete que npx instalará y ejecutará. Se trata de un paquete
que hace una copia de un repositorio de GitHub, pero sin la carpeta git. Este
paquete es del mismo creador de Svelte.js, Rich Harris.
sveltejs/template: El repositorio que queremos copiar y que nos servirá de
plantilla para nuestro proyecto. Puedes comprobar que este repositorio existe si
vas a la dirección https://github.com/sveltejs/template.
my-svelte-project: El nombre de nuestro proyecto. Aquí podemos indicar el
nombre de proyecto que queramos. Es importante notar que nos creará
una carpeta con este nombre en el directorio desde el que hemos
ejecutado el comando. [27]
Posteriormente desde símbolo de sistema utilizando los comandos mostrados,
en esta ocasión lo único que cambia sería “search-movies” por el nombre que
se le asignó a la carpeta, el resto es igual ver imagen.
Instalar Archivos

Imagen 4.3

Fuente: https://midu.dev/crea-un-nuevo-proyect-con-svelte-3/

Y por último constantemente será necesario estar iniciando el proceso

utilizando el siguiente comando, el cual puede ser utilizado desde cmd en la
carpeta especificada o desde la carpeta del proyecto abierta en el entorno
Visual Studio desde terminal, la cual puede ser abierta presionando ctrl + ñ
npm run dev
La ruta asignada por default visualizar el proyecto es: “http://localhost:5000”
5.4. Diseño Base de Datos
Para crear la base de datos es necesario descargar XAMPP desde su página
oficial “https://www.apachefriends.org/es/download.html” únicamente es necesario
elegir el sistema operativo y la versión.
Cuando termina la descarga se ejecuta el instalador como se ve en la imagen
Instalación XAMPP

Imagen 4.4

Fuente: http://www.mclibre.org/consultar/php/otros/xampp-instalacion-windows.html

Después se configuran los detalles de la instalación los cuales son los

componentes que quieren ser instalados y la ruta en la que se va a guardar.
Ver imágenes
 Instalación XAMPP

Imagen 4.5

Fuente: http://www.mclibre.org/consultar/php/otros/xampp-instalacion-windows.html

Por último, una vez terminada la instalación se abre XAMPP Control

Panel para iniciar el servicio Apache y MySQL
 Iniciar servicios de XAMPP

Imagen 4.6

Fuente: https://rootear.com/windows/xampp

Posteriormente en el navegador ingresar a localhost/phpmyadmin para crear la

base de datos como se muestra en la imagen 4.7 y 4.8.
Crear base de datos

Imagen 4.7
Fuente: Del autor

Crear base de datos

Imagen 4.8
Fuente: Del autor

Por último, se les permitirá crear tablas que deben ser configuradas en base al
modelo entidad relación del sistema (ver imágenes 4.9 y 4.10).
 Crear Tabla

Imagen 4.9
Fuente: Del autor

Crear Tabla

Imagen 4.10
Fuente: Del autor

Catálogo.svelte
Contiene el elemento catálogo el cual cuenta con un catálogo de usuarios (ver
imagen 5.1) esto permite que pueda ser llamado en varias ocasiones como si
se tratase de una función.
Catálogo.svelte

Imagen 5.1
Fuente: Del autor
Para tener una idea de lo que se buscar realizar en la imagen 5.2 se muestra
un ejemplo de catálogo de usuarios.
Catálogo de Usuarios

Imagen 5.2
Fuente: http://saitenlinea.com/wiki/Utilerias/catalogo-de-usuarios

Text.svelte
Contiene el elemento text el cual fue creado para sustituir el conocido “input
type=”text” por uno que tiene características adicionales que lo hacen más
atractivo y fácil de manipular.
Text.svelte

Imagen 5.3
Fuente: Del autor
Notificaciones.svelte
Contiene la vista principal del sistema, donde se redirecciona a cada función
del sistema por medio de un menú de opciones.
Notificaciones.svelte

Imagen 5.4
Fuente: Del autor

App.svelte
Contiene los archivos que van a ser llamados, este funciona para unir
diferentes partes del código en un mismo documento con diferentes estilos css
cada segmento llamado.
App.svelte

Imagen 5.5
Fuente: Del autor
Routes.js
Contiene las rutas a las cuales los usuarios van a acceder durante el uso del
sistema.
Routes.js

Imagen 5.6
Fuente: Del autor

Config/config.php
Contiene variables que son utilizadas en múltiples ocasiones durante el
funcionamiento del sistema como por ejemplo la dirección.
Config/config.php

Imagen 5.7
Fuente: Del autor
Config/database.php
Contiene la configuración de la base de datos en un arreglo que contiene cada
valor que es necesario por ejemplo la contraseña, el usuario el nombre del host
y configuración de la base de datos adicional que no notamos al crear una
desde localhost ya que la mayoría son valores por default.
Config/database.php

Imagen 5.8
Fuente: Del autor
Vista/Auth.php
Contiene el main desde backend desde aquí se van desglosando en ramas
hasta abarcar todo el sistema.
Vista/Auth.php

Imagen 5.9
Fuente: Del autor

Librerías/JWT.php
Contiene las funciones para manejar Json Web Token, esta librería es pública y
esta compartida en git.
Librerías/JWT.php

Imagen 5.10
Fuente: Del autor
Models/Users.php
Consisten en clases php que pueden ser llamadas y ya tienen formada una
estructura como en este caso al tratarse de usuarios.
Models/Users.php

Imagen 5.11
Fuente: Del autor

Vista/login
Contiene la vista del inicio de sesión para poder acceder a las funciones del
sistema, esta es la página que carga por default cuando intentas iniciar al sitio
sin iniciar sesión o sin especificar rutas.
Vista/login

Imagen 5.12
Fuente: Del autor
6. Resultados y Discusión
Después de realizar por primera vez un proyecto utilizando CodeIgniter
se puede evaluar con mayor facilidad este Framework, y como se pudo
observar no es muy complicado utilizarlo, la instalación es demasiado sencilla,
únicamente debías saber los comandos correctos para utilizarlo diariamente y
corregir errores que van surgiendo cuando exportas o importas archivos.
Además, un objetivo secundario era obtener un sistema ligero, por lo que se
estuvieron eliminando carpetas y archivos que vienen incluidos en la instalación
sin ningún problema, se trató de evitar usar librerías y se logró el objetivo.
A continuación, se resumen en ventajas y desventajas de algunos Framework
que pudieron ser utilizados en lugar de CodeIgniter para identificar en cual
podría haber sido realizado con mayor facilidad.
Comparación de Framework
CodeIgniter
Ventajas
Las páginas se procesan más rápido, el núcleo de CodeIgniter es bastante
ligero.
Es sencillo de instalar, basta con subir los archivos al ftp y tocar un archivo de
configuración para definir el acceso a la base de datos.
Existe abundante documentación en la red.
Facilidad de edición del código ya creado.
Facilidad para crear nuevos módulos, páginas o funcionalidades.
Estandarización del código
Separación de la lógica y arquitectura de la web, el MVC.
Cualquier servidor que soporte PHP+MySQL sirve para CodeIgniter.
CodeIgniter se encuentra bajo una licencia open source, es código libre. [27]
Desventajas
ORM solo a través de terceros: el mapeo objeto-relacional (object relational
mapping, ORM) se refiere a una técnica de desarrollo de software que permite
a las aplicaciones almacenar objetos escritos en un lenguaje de programación
orientado a objetos como PHP en una base de datos relacional. Codelgniter no
soporta al ORM de forma nativa. Sin embargo, esta tecnología puede
integrarse.
No cuenta con un motor de plantillas: Codelgniter se enorgullece de
funcionar correctamente sin un motor de plantillas. A cambio, este framework
ofrece un analizador simple de plantillas. Eso puede ser visto como una
ventaja, pues, generalmente, el uso de un motor de plantillas se asocia a una
sobrecarga de rendimiento (por encima del tiempo de ejecución). Además,
también tendría que aprenderse el lenguaje de la plantilla. Por otro lado, un
motor de plantillas permite separar la generación de datos del código para la
presentación, generando así un código fuente claramente estructurado. Si se
utiliza un motor de plantillas con una sintaxis más ligera, se puede reducir
significativamente el tamaño total del código de la aplicación.
No existen los espacios de nombres: con los espacios de nombres, PHP
ofrece la capacidad de separar el código de los diferentes grupos de
aplicaciones. Los desarrolladores de PHP hacen uso de esta característica
para evitar los conflictos que se producen durante la denominación de las
clases y de las funciones, siendo, por ejemplo, muy comunes las colisiones de
nombre con clases internas de PHP con funciones, constantes o elementos
integrados por terceros. Hasta ahora, Codelgniter no utiliza esta función PHP.
No cuenta con la opción de autocarga de clases de PHP: con autoload()
y spl_autoload_register(), desde su quinta versión, PHP cuenta con dos
funciones que permiten cargar las definiciones de clase automáticamente
cuando sea necesario. Esta función no está disponible en Codelgniter.
Menos bibliotecas incorporadas que otros entornos PHP: gracias al diseño
ligero del software, la configuración inicial de Codelgniter proporciona un
número significativamente menor de bibliotecas que otros frameworks PHP. En
primer lugar, estos incluyen las tareas más importantes de desarrollo web,
como el acceso a la base de datos, envío de correo electrónico, validación de
datos de formulario, mantenimiento de las sesiones de trabajo o del trabajo con
XML – RPC. Para aquellas tareas que van más allá de las funciones básicas,
será necesario integrar otras bibliotecas o recursos externos. Ahora bien, esto
puede resultar ventajoso para aquellos desarrolladores que están buscando un
Framework cuyas funciones se reduzcan al mínimo.
Laravel
Ventajas
Reducción de costos y tiempos en el desarrollo y mantenimiento.
Curva de aprendizaje relativamente Baja (en comparación con otros
Framework Php).
Flexible y adaptable no sólo al MVC Tradicional (Modelo vista controlador) sino
que para reducir código propone usar “Routes with closures”
Buena y abundante documentación sobre todo en el sitio oficial.
Posee una amplia comunidad y foros.
Es modular y con un amplio sistema de paquetes y drivers con el que se puede
extender la funcionalidad de forma fácil, robusta y segura.
Facilita el manejo de ruteo de nuestra aplicación como así también la
generación de url amigables y control de enlaces auto–actualizables lo que
hace más fácil el mantenimiento de un sitio web.
También cuenta con una herramienta de interfaces de líneas de
comando llamada Artisan que me permite programar tareas programadas
como por ejemplo ejecutar migraciones, pruebas programadas, etc. [28]
Desventajas
Debes acostumbrarte a utilizar ciertas funciones.
Utilizas Composer, el administrador de dependencias de PHP y Artisan
de Laravel
La instalación no es tan fácil.
La curva inicial de aprendizaje es compleja si no tienes experiencia en un
Framework o lenguaje.
Está adaptado para las últimas versiones de PHP [29]

CakePhp
Ventajas
Fácil de aprender: Hay que reconocer que desarrollar con CakePHP es fácil y
sencillo una vez te has documentado un poco y conocer la estructura de
ficheros.

Implementación rápida: Gracias a su estructura y los métodos propios del

Framework, desarrollar una aplicación puede realizarse en poco tiempo, eso sí,
en relación a si hubiera que hacerlo de 0, o si la aplicación no necesita
modificaciones personalizadas.

Migración entre entornos: Instalar una aplicación desarrollada con CakePHP

es muy fácil, ya que, si tienes bien configurado el servidor en el nuevo entorno,
bastará con copiar y pegar el código en el nuevo entorno. No necesita muchas
librerías especiales, pero repito, depende de la aplicación y los componentes o
plugins que se le añadan.

Plugins: Mencionados en el punto anterior, se pueden encontrar por internet

plugins que realizan una tarea específica sin tener que programar nada. Basta
con bajarse el código y añadirlo a la carpeta de plugins de CakePHP. Lo mismo
pasa con algunos "componentes" y "helpers".
Desventajas
Malos hábitos: En su documentación oficial, en algunos puntos te motivan a
realizar algunos malos hábitos que deberían evitarse al trabajar con
cualquier tipo de Framework MVC. Por ejemplo, con el método "find" de los
modelos.
Realizas la llamada desde el controlador, construyendo allí mismo la consulta,
pero con el formato de CakePHP, enviando arrays. En mi opinión, todas las
consultas find deben hacerse en el propio modelo, creando métodos allí que
son los que realmente deben llamarse desde el controlador. Solo me pareció
ver una referencia a esta forma de trabajar en la documentación de CakePHP,
en uno de los últimos puntos de "recomendaciones", aunque ahora mismo
tengo dudas. Además, con este sistema es mucho más sencillo poder cachear
las consultas y queda el código mucho más limpio y ordenado. Ejemplo de
llamada desde el controlador:

Exceso de consultas: En proyectos en los que el número de tablas es muy

elevado y hay muchas relaciones, el ORM de CakePHP puede llegar a realizar
excesivas consultas. En proyectos pequeños con pocas tablas esto no suele
suceder o no suele ser tan importante, pero cuando hay más de 10 tablas esto
puede ser un gran problema. La facilidad de CakePHP se compensa con su
mal rendimiento en proyectos grandes. En CakePHP 2.0 dicen haber mejorado
bastante el rendimiento, pero aun así el sistema de consultas es idéntico y
sigue existiendo este mismo problema.

Tamaño de ficheros: Algunos de los ficheros del propio Framework son

demasiado pesados. Esto, añadiendo que hay demasiados ficheros del
framework a los que se accede prácticamente en cada petición (request),
conlleva a un elevado número de accesos al disco que penalizan el rendimiento
del servidor, haciendo que el tiempo de carga de la web se eleve
considerablemente. La única solución para esto utilizar un servidor que compile
los ficheros PHP para agilizar esta tarea (Por ejemplo: Apache + APC) [30]

Symfony
Ventajas
Es extremadamente flexible: se adapta a casi cualquier necesidad,
permitiendo instalar únicamente las piezas requeridas para el proyecto en vez
de todo el Framework.
Es tremendamente ampliable: según GitHub, es el proyecto PHP más activo,
lo que te garantiza encontrar paquetes para prácticamente cualquier
funcionalidad.
Es un sistema estable: Laboratorios Sensio garantiza que cada versión de
Symfony recibirá soporte (actualizaciones y solución de problemas) durante
tres años, además de compatibilidad con las versiones secundarias.
Un sistema rápido y que consume poca memoria: Symfony ha sido
desarrollado con la idea de ofrecer aplicaciones de alto rendimiento, es más
rápido que otros Framework usando la mitad de la memoria.
Facilidad de uso: Gracias a la gran cantidad de documentación y tutoriales
que se pueden encontrar en la web, cualquier profesional o usuario avanzado
puede aprender rápidamente los conceptos más básicos de Symfony. Para ello
ha tomado las mejores ideas de sus competidores, como Ruby on Rails o
Django [31]
Desventajas
Está pensado para aplicaciones web, por lo que su uso fuera de este campo se
dificulta un poco.
Es menos intuitivo que los Framework más populares.
Existe menos material para informarte de cómo funciona ya se por medio de
videos o ejemplos en internet.
Zend Studio
Ventajas
Agiliza nuestro trabajo
Cuenta con un buen Depurador.
Infinitas opciones que permiten un desarrollo profesional de nuestras
aplicaciones.
Desventajas
Es menos intuitivo que los Framework más populares.
Existe menos material para informarte de cómo funciona ya se por medio de
videos o ejemplos en internet.
Requiere Licencia de pago.
No incluye editor visual HTML
Un poco complejo. [32]
Phalcon
Ventajas
Aumentar la velocidad de ejecución y reducir el uso de recursos con el
objetivo de manejar más solicitudes por segundo que los marcos comparables
escritas principalmente en PHP.
Desventajas
Una desventaja de este enfoque es que se requiere acceso administrativo
(root) en el servidor para poder instalar Phalcon mediante la construcción de
un binario personalizado o usar uno precompilado. [33]
FuelPHP
Ventajas
Siempre descargamos la última versión estable.
Establecerá los permisos de escritura necesarios para las carpetas de cache,
logs y temp.
Ahorraremos tiempo de configuración.
Desventajas
Este tipo instalación solo puede ser realizada desde sistemas operativos del
tipo Unix-like (Linux, OS X, Unix, etc).
Necesitamos tener instalado Git.
Uso de la línea de comandos. [34]
Yii
Ventajas
Son herramientas creadas por profesionales en la temática en cuanto a
programación respecta.
Estas herramientas han sido probadas y arregladas hasta el cansancio.
Está completamente orientado a objetos, lo cual es excelente práctica de
programación ya que mantiene el código arreglado y limpio.
Nosotros podemos pasar directamente a desarrollar y enfocarnos en lo importante
de nuestro sitio web.
Esta es una excelente herramienta que nos provee una forma de validar los datos
que se ingresan en un formulario.
Desventajas
Pérdida de control sobre lo que hacemos.
Puede haber bugs que el Framework no detecta o ignora.
El aprendizaje es complicado.
Puede aparecer mucho código basura. [35]
7. Conclusiones
Los Framework son herramientas muy importantes que nos ayudan a
desarrollar con mayor facilidad los proyectos, ya que estos contienen un
conjunto de prácticas y conceptos que han sido evaluados a lo largo de la
creación de cada uno de ellos, además fueron desarrollados por diferentes
organizaciones por lo que cada uno tiene su propia metodología, sin embargo,
todos tratan de resolver la problemática de la forma más eficaz y eficiente
posible.
También cuentan con bibliotecas que permiten a los usuarios realizar las sus
funciones, un lenguaje, además de brindar una estructura del proyecto.
La arquitectura más común es modelo-vista-controlador la cual consiste dividir
los proyectos en 3 partes, el primero de ellos cuenta con las operaciones
lógicas y el manejo de la información, la vista se encarga de la interfaz gráfica o
el diseño y el controlador se encarga de conectarnos con el modelo que es el
que tiene la información y devolverla utilizando la vista necesaria.
Dicho lo anterior cada uno fue desarrollado por diferentes mentes, por lo que a
pesar de que fueron realizados por la misma necesidad, con la misma
estructura y objetivo cada uno tiene diferentes características por lo que si se
intenta evaluar cuál es mejor de todos habría muchas vertientes que
dificultarían esto, se podría analizar ciertos parámetros como el peso de cada
uno, la velocidad de instalación, pero no sería justo debido a que algunas
librerías más pesadas.
En conclusión, el mejor Framework depende de la persona que lo va a
desarrollar, hay ocasiones en las que el cliente te pide que utilices uno en
específico, en caso de que tengas la opción de elegir puedes elegir el que ya
dominas para sentirte más cómodo o uno nuevo para aprender a utilizarlo,
ambas son buenas ideas. También en caso de no haber usado uno tienes la
opción de utilizar el más popular como son Laravel y CodeIgniter ya que son
los más populares y de los cuales puede haber más información en internet
como tutoriales, soluciones de errores, entre otras.
8. Bibliografía
1.- openclassrooms. (2017). ¿Qué es el desarrollo web?. 27/11/19, de openclassrooms Sitio
web: https://blog.openclassrooms.com/es/2017/09/11/que-es-el-desarrollo-web/

2.- platzi. (2017). Qué es Frontend y Backend. 27/11/19, de platzi Sitio web:
https://platzi.com/blog/que-es-frontend-y-backend/

3.- neoattack. (2019). ¿Qué es un Framework?. 27/11/2019, de neoattack Sitio web:

https://neoattack.com/neowiki/framework/4.- https://codeigniter.es/

5.- tecnologia-facil. (2019). ¿Qué es Open Source?. 27/11/19, de tecnologia-facil Sitio web:
https://tecnologia-facil.com/que-es/que-es-open-source/
6.- Francisco Olmedo. (2019). Jugando con svelte. 27/11/19, de nocountryforgeeks Sitio web:
https://www.nocountryforgeeks.com/jugando-con-svelte/
7.- Miguel Angel Alvarez. (2018). Materialize CSS. 27/11/19, de https://desarrolloweb.com/
Sitio web: https://desarrolloweb.com/articulos/materialize-framework-css.html

8.- acercadehtml.. (2019). ¿Que es HTML y para que sirve?. 27/11/19, de acercadehtml Sitio
web: http://www.acercadehtml.com/manual-html/que-es-html.html

9.- developer.mozilla. (2019). CSS. 27/11/19, de developer.mozilla Sitio web:

https://developer.mozilla.org/es/docs/Web/CSS

10.- developer.mozilla. (2019). JavaScript. 27/11/19, de developer.mozilla Sitio web:

https://developer.mozilla.org/es/docs/Web/JavaScript

11.- ecured. ( 2019). PHP. 27/11/19, de ecured Sitio web: https://www.ecured.cu/PHP

12.- apachefriends. (2019). XAMPP Apache + MariaDB + PHP + Perl. 27/11/19, de apachefriends
Sitio web: https://www.apachefriends.org/es/index.html

13.- code.visualstudio. (2019). visualstudio. 27/11/19, de https://code.visualstudio.com/ Sitio

web: https://code.visualstudio.com/

14.- carlosazaustre. (2016). Primeros pasos con Webpack. 27/11/19, de carlosazaustre.es Sitio

web: https://carlosazaustre.es/primeros-pasos-con-webpack/

15.- digitallearning. (2019). ¿Qué es AJAX?. 27/11/19, de digitallearning.es Sitio web:

https://www.digitallearning.es/blog/que-es-ajax/

16.- laurachuburu. (2018). Qué es JQuery y cómo implementarlo. 27/11/19, de laurachuburu

Sitio web: https://www.laurachuburu.com.ar/tutoriales/que-es-jquery-y-como-
implementarlo.php17.- https://www.programacion.com.py/varios/que-es-json-web-token-jwt

18.- codeigniter. (2019). Models. 27/11/19, de codeigniter Sitio web:

https://codeigniter.com/user_guide/general/models.html#id2

19.- Symfony. (2019). Symfony para programadores. 27/11/19, de Symfony Sitio web:
https://symfony.es/pagina/que-es-symfony/
20.- Rodrigo Souto. (2019). Guía Zend: Introducción y primera aplicación. 27/11/19, de
maestrosdelweb Sitio web:
http://www.cva.itesm.mx/biblioteca/pagina_con_formato_version_oct/apaweb.html

21.- ecured. ( 2019). Phalcon. 27/11/19, de ecured Sitio web: https://www.ecured.cu/Phalcon

22.- cakephp. (2019). ¿Qué es CakePHP y por qué hay que utilizarlo?. 27/11/19, de cakephp
Sitio web: https://book.cakephp.org/1.3/es/The-Manual/Beginning-With-CakePHP/What-is-
CakePHP-Why-Use-it.html

23.- yiiframework. (2019). Guía Definitiva de Yii 2.0. 27/11/19, de yiiframework Sitio web:
https://www.yiiframework.com/doc/guide/2.0/es/intro-yii

24.- camaltec. (2019). fuelphp. 27/11/19, de camaltec Sitio web:

https://www.camaltec.es/experto-framework-fuelphp/

25.- guidacode. (2018). Qué es y cómo instalar CodeIgniter: Primeros pasos. 27/11/19, de

guidacode Sitio web: https://www.guidacode.com/2018/php/codeigniter/como-instalar-

codeigniter/

26.- midu. (2019). Crea un nuevo proyecto con Svelte 3. 27/11/19, de midu Sitio web:

https://midu.dev/crea-un-nuevo-proyect-con-svelte-3/

27.- coriaweb. (2019). Qué es CodeIgniter y cuáles son algunas de sus ventajas. 27/11/19, de

coriaweb Sitio web: https://www.coriaweb.hosting/codeigniter-cuales-algunas-ventajas/

28.- freelancer. (2019). Laravel: ventajas del framework PHP de moda. 27/11/19, de
freelancer.es Sitio web: https://www.freelancer.es/community/articles/ventajas-del-
framework-moda-laravel
29.- Luis Miguel Balza. (2017). Laravel. 27/11/19, de slideshare Sitio web:
https://es.slideshare.net/RafaelLobo4/framework-laravel
30.- CakePHP. (2013). CakePHP: Pros y contras. 27/11/19, de CakePHP Sitio web:
http://www.zonadev.es/2012/03/cakephp-pros-y-contras-segun-mi-opinion.html
31.- Diligent Team. (2019). Qué es el Framework Symfony php: características y ventajas.
27/11/19, de Diligent Team Sitio web: https://www.diligent.es/framework-symfony-php/2/

32.- https://www.ecured.cu/Zend_Studio

33.- ecured. ( 2019). Phalcon. 27/11/19, de ecured Sitio web: https://www.ecured.cu/Phalcon

34.- ecured. (2019). FuelPHP. 27/11/19, de ecured Sitio web: https://www.ecured.cu/FuelPHP

35.- juan lopez. (2014). Yii Framework. 27/11/19, de prezi Sitio web:
https://prezi.com/boajjonvy5o_/yii-framework/
Glosario
Programación
Es el proceso por medio del cual se diseña, codifica, limpia y protege el código
fuente de programas computacionales.
Función
Una subrutina o subprograma (también llamada procedimiento, función o
rutina), como idea general, se presenta como un subalgoritmo que forma parte
del algoritmo principal, el cual permite resolver una tarea específica
Optimización
Es la acción y efecto de optimizar. Este verbo hace referencia a buscar la
mejor manera de realizar una actividad. El término se utiliza mucho en el
ámbito de la informática.
Código
Es una serie de símbolos que por separado no representan nada, pero al
combinarlos pueden generar un lenguaje comprensible solo para aquellos
quienes lo entiendan.
Base de Datos
Es un “almacén” que nos permite guardar grandes cantidades de información
de forma organizada para que luego podamos encontrar y utilizar fácilmente. A
continuación, te presentamos una guía que te explicará el concepto y
características de las bases de datos.
Variables
Una variable es en principio un concepto que determina una cualidad de un
objeto, es un atributo que puede variar de una o más maneras y que sintetiza
conceptualmente lo que se quiere conocer acerca del objeto de investigación.
Framework
Entorno de trabajo o marco de trabajo es un conjunto estandarizado de
conceptos, prácticas y criterios para enfocar un tipo de problemática particular
que sirve como referencia, para enfrentar y resolver nuevos problemas de
índole similar.
Diseño
Es el arte de definir la arquitectura de hardware y software, componentes,
módulos y datos de un sistema de cómputo, a efectos de satisfacer ciertos
requerimientos.