Introducción al desarrollo de aplicaciones web

Especificación Como en el anterior laboratorio, en este caso también se solicitó una serie de características que la aplicación debía cumplir. Esta es presentada a continuación. Implementación A continuación, se explicará de forma detalla el procedimiento para conseguir el buen funcionamiento de la aplicación. Creación de vistas Primeramente tendremos que definir la parte gráfica de nuestra aplicación, en este caso bastará una interfaz sencilla, además queremos que nuestra aplicación sea dinámica en cuanto a la visualización de las monedas.  Debemos crear dos vistas o archivos html, en este caso, haremos uso de EJS, que son archivos que funcionan como HTML pero con capacidad de procesar texto plano Javascript (sin embargo, al observar los archivos EJS creados para este laboratorio bien pueden ser reemplazados solamente por archivos HTML, sin embargo, habría que hacer cambios en el servidor, así que, por ahora nos quedaremos con los EJS). La imagen

¿Qué es Node JS? Es un ambiente servidor de código abierto, el cual ejecuta Javascript y permite la escalabilidad de una aplicación de forma más sencilla y estable (no usa hilos).  ¿Por qué usar Node JS? Es código abierto y gratis. Es multiplataforma. Usa Javascript. Usa programación asincrónica. Elimina la espera y siempre continua con la siguiente petición. Ejemplo de uso: Node JS es relativamente sencillo de usar, una vez instalado en nuestra computadora que funcionará como servidor basta con definir un archivo principal, por ejemplo server.js: -------------------------------------------------------------------------------------------------------------------------- var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!'); }).listen(8080); ------------------------------------------------------------------------------------------

¿Qué es Javascript? Javascript es considerado el lenguaje de programación de HTML y por ende, de la web. Es un lenguaje dinámico, levemente tipado y multiparadigma. ¿Por qué usar Javascript? Permite controlar el comportamiento de las páginas web. Permite la creación de páginas web dinámicas. Puede usarse en aplicaciones móviles, desktop applications y web applications. Facilidad  de uso. Amplia comunidad de desarrolladores que lo usan. Permite el uso de Single-page applications (el navegador se encarga de representar la página). ¿Cómo usar Javascript? Una de las formas más sencillas y conocidas para usar Javascript en nuestra página web es usando el evento onclick , en HTML la sintaxis sería algo así:  <element onclick="myScript"> Este evento se usa en la mayoría de casos para darle funcionalidad a botones, aunque también puede funcionar con otros tipos de elementos. Ejemplo: -----------------------------------------------

Para este laboratorio se tomará en cuenta únicamente la parte visual de la página web, es decir no se realizará funcional. Para entender mejor lo solicitado se presenta el enunciado del Laboratorio 1: Para acceder al código HTML y CSS de la  página web creada como resultado del laboratorio use el siguiente link:  https://drive.google.com/drive/folders/1byjlM9hELTEGUPWGojJ3YUDIHoQddy8v?usp=sharing NOTA: En el los archivos subidos, el link al CSS contiene un path local, basta con cambiar el path a  "css/custom.min.css" Elementos usados HTML <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">:  se encarga de que la página realizada tenga la característica responsive, esto diciéndole al navegador como debe ajustarse.  <li><a class="active" href="home.html">Home</a></li>: usado para representar un item en una lista, en este caso, se usó como elemento del m

¿Qué es CSS? Cascading Style Sheets u hojas de estilo son un conjunto de instrucciones que le dictan al navegador como debe dibujar los elementos en pantalla. El uso de hojas de estilo permite separar el contenido del documento de la presentación del mismo. Sintaxis Para información más detallada el siguiente link puede ser de utilidad:  https://www.w3schools.com/css/css_syntax.asp   Enlazar con HTML Existen diversas formas de usar un HTML con CSS, a continuación presentamos algunas de ellas: Usando un link :  <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" /> Empotrando en el HTML : <style type="text/css" media="screen"> /* Add style rules here */ </style> Entre líneas : <h2 style="color:red; background:black;">This is a red heading with a black background</h2> Referencias CSS Tutorial. (n.d.)

¿Qué es HTML? HyperText Markup Language es un lenguaje de marcas sobre el cual están escritas la mayoría de páginas web. Además, describe la estructura de las páginas web y permite insertar, texto y media en ellas. Tomada de: https://www.udemy.com/html-online-course/ Evolución de HTML La siguiente imagen muestra la evolución de HTML a lo largo de los años, un breve resumen de la misma sería: 1991: HTML 1.0 debuta como un lenguaje basado en SGML, pero incluyendo el tag href . 1994: HTML 2.0 aparece como el primer conjunto de estándares HTML oficial.  1997: HTML facilita el uso de tablas y permite el uso de map images . 1997: HTML 3.2 nace de la creencia que el uso de atributos como el color, estilos de fuentes y demás  estaban alejando a HTML de sus raíces de organizar. 1998: HTML 4.0 aparece como una recomendación, este incluía CSS para los estilos por separado. 2000: Nace XHTML de la unión de fuerzas entre HTML y XML. 2004: Se crea  Web Hypertext Application

Al seleccionar la tecnología a usar para desarrollar una aplicación web se pueden cometer ciertos errores que, en un futuro pueden tener impacto grande en el desarrollo del sistema, haciendo que se pierdan recursos, sea tiempo o dinero. Esta entrada viene siendo una guía de qué debemos considerar a la hora de tomar decisiones referentes a las herramientas que se usarán en el desarrollo de nuestra aplicación. Que NO hacer NO escoger basándose en la experiencia de terceras personas : es fácil tomar como ejemplo otras empresas que hayan realizo aplicaciones similares, sin embargo, esto no siempre es recomendable, especialmente si hablamos de la competencia. NO escoger basándose  en los gustos personales: es normal tener preferencias hacia ciertas tecnologías, principalmente esas que se nos hacen más fáciles, aunque no podemos anteponer nuestros deseos al éxito del proyecto. NO escoger basándose en proyectos anteriores: las buenas experiencias con proyectos anteriores no s

¿Qué es una Application Stack? Hace referencia a la forma en que representamos el hardware y cómo el software es ejecutado sobre él. Cuando hablamos del modelo tradicional es común ver una imagen como esta: Representación básica de una application stack. Tomada de: https://www.digitalsignage.net/2017/12/01/the-cloud-part-1-types-of-cloud/ Sin embargo en aplicaciones web, los dos últimos niveles no son importantes, debido sus capacidad de ejecutarse a través de Internet. Componentes de una Application stack Cuando considerados cómo se compone un application stack debemos de tener claro 5 piezas claves, estan son: UX/UI Design User Interface and User Experience Design, se encarga de tomar los requerimientos de negocio y representarlos en una especie de "mockup". Ayuda a representar como los usuarios van a interactuar con el sistema y la forma en que los datos serán representados. Algunas tecnologías o herramientas que se usan:   Front en

En esta entrada se muestra el ciclo de vida referente al desarrollo de aplicaciones web, además, se explica de manera breve cada una de las etapas de dicho desarrollo: Referencias Solano, E. (2018). Que es una APP WEB? Curso Introducción al desarrollo de aplicaciones WEB - IC8016.  Web Development Life Cycle. (n.d.). Retrieved from http://cs.tsu.edu/ghemri/CS117/ClassNotes/Web Development Life Cycle_small.htm Wikipedia contributors. (2018, November 30). Systems development life cycle. In Wikipedia, The Free Encyclopedia. Retrieved 21:14, December 16, 2018, from https://en.wikipedia.org/w/index.php?title=Systems_development_life_cycle&oldid=871400944

Enunciado A continuación se presenta un enunciado con el trabajo a desarrollar en este ejemplo, el siguiente PDF, describe que se debe hacer con el fin de que el ejemplo pueda ser considerado válido. 1. Creación de un nuevo proyecto Para este ejemplo, usaremos Netbeans IDE 8.2, por lo que para crear la aplicación Java Web, la guía será sobre este IDE. En caso de usar otro, puede brincar hasta el paso 2. Al hacer click en Nuevo Proyecto... se abrirá una ventaja como la siguiente, en este caso crearemos una aplicación Java Web > Web Application. Seguidamente, asignamos un nombre y ubicación a nuestro proyecto. Finalmente, podemos escoger el servidor web a usar. En caso de no tener servidor, será necesario descargar uno y seguidamente agregarlo con el botón Add mostrado en la siguiente captura. En este caso usaremos GlassFish Server 5, pero es posible usar cualquier otro servidor. Después de este paso podemos dar a Finish. 2. Creaci