<<

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. . Alejandro Pérez Pasten Borja Asesor OR: Ing. Omar Vidaña Peraza

Mazatlán, Sinaloa 13 de Diciembre del 2019

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

7

3.4 CodeIgniter……………………………………………...20 3.5. …………………………………………………..20 3.6 Open Source……………………………………………..21 3.7 ……………………………………………….…...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 ………………………………………..……..27 3.16 Ajax …………………………………………………...27 3.17 Jquery………………………………………….……... 27 3.18 Json Web Token……………………………………...28 3.19 ……………………………………………... 28 3.20 ZendFramework……………………………………... 29 3.21 …………………………………………….....30 3.22 CakePHP …………………………………………..…...30 3.23 …………………………………………………….... 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

8

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

9

Imagen 3.2 – Instalación CodeIgniter…………………….. . … . . 35 Imagen 3.3 – Instalación CodeIgniter ……………………...... 35 Imagen 3.4 – Config. ………………………………….. … . . . 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/.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

10

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.

11

CAPÍTULO I ______Antecedentes y planteamiento del problema

12

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

13

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

14

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.

15

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.

16

CAPÍTULO 2 ______Antecedentes y planteamiento del problema

17

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, , Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos. [2]

18

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 , 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 , Laravel, 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 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]

19

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-/ 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/

20

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.

21

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]

22

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

23 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

24 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 , 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]

25

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, 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

26

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ú

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

28

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 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]

29

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

30

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]

31

Logo de FuelPHP

Imagen 2.16

Fuente: https://www.camaltec.es/experto-framework-/ 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]

32

CAPÍTULO 3 ______Antecedentes y planteamiento del problema

33

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.

34

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/

35

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

36

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

37 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

38

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

39

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

40

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

41

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

42

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

43

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

44

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

45

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

46

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

47

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

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

49

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 , 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".

50

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.

51

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

52

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 -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]

53

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.

54

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/

55

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.- . (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/

56

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.

57