Herramientas de usuario

Herramientas del sitio


clase:daw:daw:1eval:tema01

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Próxima revisión
Revisión previa
clase:daw:daw:1eval:tema01 [2020/09/08 18:37]
127.0.0.1 external edit
clase:daw:daw:1eval:tema01 [2021/11/13 08:55] (actual)
admin [Conceptos]
Línea 1: Línea 1:
 ====== 1. Introducción. La web ====== ====== 1. Introducción. La web ======
  
-===== Contenidos ===== 
  
-  * La Web 
-  * Chrome DevTools 
-  * Desplegar 
-  * Desafíos y tareas para desplegar 
-  * Herramientas relacionadas con el despliegue 
-  * Ejemplos de Tipos de Despliegue 
-  * Conceptos 
-  * NodeJS 
-    * Instalación 
-    * Proyectos 
-    * NPM 
-    * Programación 
  
 +===== La web =====
 +La web son páginas (En formato HTML, Imagen, JSON, XML ,etc) que se interconectan entre ellas por enlaces (urls).
  
-===== Material =====+Su estructura es la siguiente:
  
-==== La web ==== +{{esquema_web.png|}}
-La web son páginas (En formato HTML, Imagen, JSON, XML ,etc) que se interconectan entre ellas por enlaces (urls).+
  
-Su estructura es la siguiente: 
  
-{{:clase:daw:daw:1eval:esquema_web.png|}} 
  
 El navegador solicita por TCP/IP el recurso a obtener. El formato de como solicita ese recurso es por el protocolo HTTP. Y el servidor de TCP/IP responde usando el protocolo HTTP devolviendo los datos. El navegador solicita por TCP/IP el recurso a obtener. El formato de como solicita ese recurso es por el protocolo HTTP. Y el servidor de TCP/IP responde usando el protocolo HTTP devolviendo los datos.
Línea 41: Línea 27:
   * Código en el servidor: El programa específico de la aplicación que se ejecuta en el servidor Web   * Código en el servidor: El programa específico de la aplicación que se ejecuta en el servidor Web
  
-==== Chrome DevTools ====+En la siguiente imagen vemos un esquema similar en el que las peticiones van hacia varios servidores Web 
 + 
 +{{fetching_a_page.png|}} 
 +===== Chrome DevTools =====
 Los navegadores suelen llevar herramientas para depurar las páginas web. En Chrome , si pulsamos F12 y pinchamos en la opción de "Network" (Menu superior), podemos ver todas las peticiones que hace el navegador al cargar una página. Los navegadores suelen llevar herramientas para depurar las páginas web. En Chrome , si pulsamos F12 y pinchamos en la opción de "Network" (Menu superior), podemos ver todas las peticiones que hace el navegador al cargar una página.
  
Línea 58: Línea 47:
  
  
-==== Desplegar ====+===== Desplegar =====
  
 <note>Desplegar: Instalar la aplicación web que hemos desarrollado (HTML,CSS,JS,Código Servidor, etc) en un servidor Web.</note> <note>Desplegar: Instalar la aplicación web que hemos desarrollado (HTML,CSS,JS,Código Servidor, etc) en un servidor Web.</note>
Línea 68: Línea 57:
 </note> </note>
  
-==== Desafíos y tareas para desplegar ====+===== Desafíos y tareas para desplegar =====
  
   * Generación de la aplicación a instalar   * Generación de la aplicación a instalar
Línea 100: Línea 89:
     * [[http://martinfowler.com/articles/microservices.html|Microservices por Martin Fowler]]     * [[http://martinfowler.com/articles/microservices.html|Microservices por Martin Fowler]]
  
-==== Herramientas relacionadas con el despliegue ====+===== Herramientas relacionadas con el despliegue =====
  
  
Línea 118: Línea 107:
  
  
-==== Ejemplos de Tipos de Despliegue ====+===== Ejemplos de Tipos de Despliegue =====
  
   - Todo el código está en un único servidor servidor Web   - Todo el código está en un único servidor servidor Web
Línea 137: Línea 126:
 {{:clase:daw:daw:1eval:esquema_app.png|}} {{:clase:daw:daw:1eval:esquema_app.png|}}
  
-==== Conceptos ====+===== Conceptos =====
  
   * VPS (Virtual Private Server): Una máquina virtual que alquilas a una empresa.   * VPS (Virtual Private Server): Una máquina virtual que alquilas a una empresa.
Línea 147: Línea 136:
  
   * IAAS (Infraestructura como servicio) : Si la empresa de Hosting solo se ofrece el Host y nosotros nos tenemos que instalar todo el software, incluyendo el sistema operativo y administrarlo todo.   * IAAS (Infraestructura como servicio) : Si la empresa de Hosting solo se ofrece el Host y nosotros nos tenemos que instalar todo el software, incluyendo el sistema operativo y administrarlo todo.
-  * PAAS (Plataforma como servicio): Si la empresa de Hosting nos ofrece el  Host pero tambien software generico ya instalado como el Sistema Operativo, Servidor Web, Servidor de Correo, Balanceador de Carga , etc. En este caso nosotros solo debemos instalar el código específico de nuestra aplicación.En este caso aunque nos ofrecen un host ya que en algún sitio debe estar la app, realmente nos están ofreciendo el servidor web donde instalar nuestra app. En el caso de PASS, no tenemos que administrar nosotros ni el Sistema Operativo ni el servidor.+  * PAAS (Plataforma como servicio): Si la empresa de Hosting nos ofrece el  Host pero tambien software generico ya instalado como el Sistema Operativo, Servidor Web, Servidor de Correo, Balanceador de Carga , etc. En este caso nosotros solo debemos instalar el código específico de nuestra aplicación.En este caso aunque nos ofrecen un host ya que en algún sitio debe estar la app, realmente nos están ofreciendo el servidor web donde instalar nuestra app. En el caso de PAAS, no tenemos que administrar nosotros ni el Sistema Operativo ni el servidor.
   * SAAS (Software como Servicio): Como desarrolladores nunca usamos un SASS ya que la empresa de hosting ya ofrece hasta la aplicación instalada. Un ejemplo sería Google con "Google Docs" , Microsoft con su "MS Ofice 365", DropBox , etc. que ya ofrecen todo para el usuario final.   * SAAS (Software como Servicio): Como desarrolladores nunca usamos un SASS ya que la empresa de hosting ya ofrece hasta la aplicación instalada. Un ejemplo sería Google con "Google Docs" , Microsoft con su "MS Ofice 365", DropBox , etc. que ya ofrecen todo para el usuario final.
  
  
-=== IAAS vs PAAS ===+Ejemplo de PAAS en Java: 
 + 
 +{{:clase:daw:daw:1eval:jelasticenvironment.png|}} 
 + 
 +==== IAAS vs PAAS ====
 El IAAS es mas versátil ya que solo nos ofrecen el ordenador y nosotros nos montamos todo como queremos. El problema es que es mas complicado todo de hacer y tenemos que administrarlo todo: Sistema operativo, servidor web y aplicación El IAAS es mas versátil ya que solo nos ofrecen el ordenador y nosotros nos montamos todo como queremos. El problema es que es mas complicado todo de hacer y tenemos que administrarlo todo: Sistema operativo, servidor web y aplicación
  
 Por otro lado en el PAAS, solo nos tenemos que preocupar de nuestra aplicación lo que hace que sea mas sencillo. El problema es que ya no hay tanta versatilidad, ya que debemos ceñirnos al entorno que nos ofrece la empresa Por otro lado en el PAAS, solo nos tenemos que preocupar de nuestra aplicación lo que hace que sea mas sencillo. El problema es que ya no hay tanta versatilidad, ya que debemos ceñirnos al entorno que nos ofrece la empresa
  
-==== NodeJS ====+===== NodeJS =====
 NodeJS (o simplemente node) es un lenguaje de programación basado en JavaScript. Al ser un lenguaje interpretado, su forma de trabajar es mas similar a BASH que a Java.  NodeJS (o simplemente node) es un lenguaje de programación basado en JavaScript. Al ser un lenguaje interpretado, su forma de trabajar es mas similar a BASH que a Java. 
 ¿Porque vamos a usar NodeJS? Porque muchas herramientas para el desarrollo web están hechas en node.  ¿Porque vamos a usar NodeJS? Porque muchas herramientas para el desarrollo web están hechas en node. 
 Además del lenguaje de programación, node incluye un gestor de paquetes similar al de Linux (como apt) que se llama "npm" (Node package manager ) Además del lenguaje de programación, node incluye un gestor de paquetes similar al de Linux (como apt) que se llama "npm" (Node package manager )
  
-=== Instalación de NodeJS ===+==== Instalación de NodeJS ====
  
   * Instalar Node en Ubuntu   * Instalar Node en Ubuntu
Línea 180: Línea 173:
  
  
-=== NPM ===+==== NPM ====
 Ahora vamos a configurar el proxy para el gestor de paquetes de node.  Ahora vamos a configurar el proxy para el gestor de paquetes de node. 
  
Línea 189: Línea 182:
 </sxh> </sxh>
  
-=== Proyectos con node ===+==== Proyectos con node ====
  
   * Inicializar un proyecto en Node. Se crea el fichero ''package.json'' que es fundamental en node ya que contiene toda la información del proyecto   * Inicializar un proyecto en Node. Se crea el fichero ''package.json'' que es fundamental en node ya que contiene toda la información del proyecto
Línea 197: Línea 190:
 </sxh> </sxh>
  
-  * Instalar un paquete. Se guarda en la carpeta ''node_modules''+  * Instalar un paquete nuestro poyecto. Se guarda en la carpeta ''node_modules''
  
 Instalar la librería de JavaScript llamada "jQuery" Instalar la librería de JavaScript llamada "jQuery"
Línea 207: Línea 200:
   * Instalar un paquete de forma global. Se guarda en "/usr/bin"   * Instalar un paquete de forma global. Se guarda en "/usr/bin"
  
-Instalar la librería de JavaScript llamada "typescript" pero solo para desarrollo. 
 <sxh bash> <sxh bash>
-npm install typescript --save-dev+npm install typescript -g
 </sxh> </sxh>
  
Línea 218: Línea 210:
 </sxh> </sxh>
  
-=== Programar en NodeJS ===+==== Programar en NodeJS ====
 Ahora vamos a ver como ejecutar código node. Ahora vamos a ver como ejecutar código node.
  
-El programa mas sencillo es hacer el "Hola Mundo". Para ello creamos un fichero llamado "app.js" con el contenido siguiente:+El programa mas sencillo es hacer el "Hola Mundo". Para ello creamos un fichero llamado "index.js" con el contenido siguiente:
 <sxh js> <sxh js>
 #!/usr/bin/env node #!/usr/bin/env node
Línea 229: Línea 221:
  
 Para ejecutarlo hay que lanzar la orden: Para ejecutarlo hay que lanzar la orden:
-  node app.js+  node index.js
  
 Y mostrará por consola el mensaje "Hola mundo" Y mostrará por consola el mensaje "Hola mundo"
clase/daw/daw/1eval/tema01.1599583032.txt.gz · Última modificación: 2020/09/08 18:37 por 127.0.0.1