Autor: ochoscar (Página 4 de 7)

Data Computed Methods y Render Declarativo en VUE

En este artículo exploraremos las principales secciones de la instancia de VUE como son la Sección Data Computed Methods y Render Declarativo en VUE y sae explicara el uso de cada uno de ellos en la construcción de aplicaciones frontend.

Si quieres aprender a programar en backend java sigue este enlace.

1. Atributo name

El atributo name se configura en la instancia de VUE y permite identificar el componente, esto es especialmente útil en el momento en que se visualiza en el depurador como vue devtools.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada }
}
</script>

2. Función Data

Vamos a iniciar en este estudio de Data Computed Methods y Render Declarativo en VUE por la función Data permite devovler valores a la vista y utilizarlos para su procesamiento, se puede entender como un conjunto de variables que serán utilizadas entre la sección HTML y la sección script y que permitirán escribir la lógica de nuestra aplicación. En el siguiente fragmento de código se muestran algunas variables que se han definido, note también como estas variables deben obligatoriamente construirse como un JSON que será devuelto por la función data y que estas variables pueden ser de diferentes tipos por ejemplo textos o números.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      age: 30
    }
  }
}
</script>

3. Render Declarativo

Teniendo en cuenta que la función data devuelve un JSON con información que podemos utilizar en la sección HTML existe una forma muy sencilla de poder incrustar los valores de estas variables en algún punto de nuestra página web, para ello basta con usar el denominado Render Declarativo que consta de un par de llaves y la interior de estas el nombre de la propiedad del JSON devuelto por data, siguiendo el ejemplo anterior a continuación se muestra la sección HTML en la cual se usa el valor de la propiedad login.

<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <Entrada></Entrada>
  </div>
</template>

4. Métodos Computed

Similar a la sección Data, la sección Computed en VUE permitirá de forma muy similar a las propiedades de data, devolver un valor producto de algún calculo necesario. Supongamos el calculo de la edad, para lo cual a la fecha actual debemos restar la fecha de nacimiento, esto se logra de forma muy sencilla estableciendo una función, que a la larga será una función tipo get, en la sección computed de la instancia de VUE.

El código siguiente muestra tanto la sección javascript como la sección HTML. Algo que también es importante y se puede apreciar en este ejemplo es que cuando usamos variables de data en las sección javascript debemos usar la palabra this, a diferencia de lo que ocurre en la sección HTML en donde no es necesario el uso de esta palabra clave.

Note también que para hacer uso de un método computed basta usarlo como si fuera una propiedad de la data, tal como se vio en la sección anterior.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>
<template>
  <div id="nav" class="principal">
    <span>App</span>
    <span>{{ login }}</span>
    <span>Age {{ age }}</span>
    <Entrada></Entrada>
  </div>
</template>

Otro ejemplo de método Computed en VUE permite mostrar algunas de las características de manipulación de texto, en el cual podemos usar el comodín $ y llaves para hacer referencia a una variable y facilitar las concatenaciones de texto.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  }
}
</script>

5. Methods personalizados en VUE

La sección Methods en VUE son muy parecidos a las funciones de Computed o Data solamente que usamos estos de forma más extendida para realizar operaciones, recibir datos y procesarlos y dividir en general los algoritmos en trozos más manejables.

En el siguiente código se muestra un ejemplo de un método utilizado para calcular la edad pero en esta ocasión recibiendo un parámetro.

<script>
import Entrada from '@/components/Entrada.vue'

export default {
  name: 'App',
  componetnts: { Entrada },
  data() {
    return {
      login: 'ochoscar',
      firstname: 'ochoscar',
      lastname: 'ochoscar',
      birthday: new Date(1984, 2, 3)
    }
  },
  computed: {
    fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    age() {
      let currentDate = new Date();
      let diff = currentDate - this.birthday;
      return diff;
    }
  },
  methods: {
    computedAge(date) {
      let currentDate = new Date();
      let diff = currentDate - date;
      return diff;
    }
  }
}
</script>

6. Artículos de Interés

Depuración de código en VUE

La Depuración de Código en VUE JS es muy importante puesto que permite encontrar errores de forma rápida y incluso obtener una mejor compresión del funcionamiento de tu página web. Algo paradojico es que la mayoría de personas que programan en el front end no saben realizar depuración (debug) ya que resulta más común realizar depuración a nivel de backend, sin embargo las herramientas disponibles para depurar en back son practicamente las mismas que en el front.

Si quieres aprender a programar en Java sigue este enlace.

1. Qué es depurar?

La Depuración es la técnica con la cual los programadores encuentran errores en su código, estas herramienta permite que el programador detenga la ejecución en un punto del código y revise valores de variables e incluso ejecute el programa paso a paso a fin de observar que esta haciendo el código, que bifurcaciones esta tomando o cuantas veces se esta repitiendo un ciclo.

2. Instalación de VUE Devtools

Lo primero que debemos hacer para depurar en VUE es descargar una extensión, en estas páginas se manejará el navegador Gooogle Chrome, sin embargo cualquier otro navegador como Firefrox o Edge podrá servir para depurar.

En este link puedes encontrar el enlace directo para descargar la extensión vue.js devtools

vuejs devtools
Figura 1. vuejs devtools

Una vez instalado podrás encontrar todas las opciones de depuración cuando trabajes con tus páginas en VUE.

3. Usar vuejs devtools

Una vez instalado vue js devtools, y estando en una página vue podemos abrir las herramientas de desarrollador de Chrome, aunque hay muchas formas una sencilla y rápida es simplemente dar click derecho y elegir la opción Inspeccionar, lo cual abre las herramientas de depuración y podemos ubicarnos en la pestaña VUE para las diferentes opciones de VUE.

Figura 2. Opciones de depuración de VUE

En esta pestaña se puede tener acceso a las siguientes herramientas:

  • Inspector: permite ver las opciones de componentes, vuex y routes de la aplicación vue.
  • Timeline: muestra la ejecución de métodos y de eventos que se han generado en la aplicación.
  • Components: muestra la jerarquía de componentes de la página y permite entender su distribución a fin de determinar si la página esta correctamente creada.
  • Vuex: este es el almacén de datos de nuestra aplicación VUE que nos permite también interactuar con algunos métodos y lógica necesaria en nuestra aplicación.
  • Routes: permite ver las rutas de la aplicación a fin d determinar que la navegación esta bien diseñada y funciona correctamente.

4. Otras opciones de depuración

Las opciones anteriores de VUE se pueden mezclar con las opciones tradicionales de depuración y herramientas de desarrollo de Chrome, algunas de las más importantes y su funcionalidad son las siguientes.

4.1. Elements

Esta pestaña permite visualizar el contenido HTML que se esta mostrando en la página web, lo más interesante aquí es que nos podemos ubicar en una parte de la página para navegar directamente al HTML o al revés pararnos en una parte del HTML y visualizar el componente en la página el cual se iluminará. También podemos cambiar el contenido del HTML o de los CSS y ver como se comportan en la página, esto último es muy útil puesto que luego podemos volver sobre nuestro código e incorporar los ajustes que hayamos hecho en esta pestaña del devtools.

devtools-elements
Figura 3. Elements devtoosl

4.2. Console

La consola nos permite ejecutar código javascript, inspeccionar variables y sobre todo observar mensajes que este dejando la aplicción, por esto los programadores habitualmente dejan mensajes en la consola y pueden verificar si la aplicación esta realizando lo que se espera.

devtools-console
Figura 4. Consola de devtools

4.3. Network

La sección de red es muy importante puesto que muestra todas las peticiones que la página intercambia, aquí podemos visualizar la forma en que se realizan las peticiones incluyendo los encabezados y las respeustas que da el servidor para cada petición, también es muy útil para saber si la página esta pidiendo la información correcta y si el servidor esta entregando lo esperado. Otro uso útil de esta pestaña es verificar los tiempos y tamaños de las peticiones así sabremos si una petición esta poniendo lenta la página. Finalmente, la información que arroja esta pestaña sirve para determinar aspectos de seguridad como que la información obtenida no tenga datos sensibles o información adicional que no se este requiriendo.

En la red, también existe una posibilidad muy útil y es trabajar sin cache, lo anterior implica que todas las peticiones van a ir directamente al servidor en lugar de buscar las respuestas de estas peticiones en la memoria cache del navegador, para dar un poco más de detalle de esto, sucede que cuando se realiza una petición el navegador guarda la petición y su respuesta en una memoria llamada cache, de esta forma la próxima petición la podrá resolver directamente de esta memoria sin necesidad de ir al servidor, lo anterior ayuda muchísimo con los tiempos de respuesta de las páginas web, pero puede ser un poco molesto si en realidad se necesita que los datos vengan del servidor, habitualmente las páginas web cambian un poco las peticiones o agregan parámetros para obligar al navegador a realizar la petición contra el servidor y no contra la caché.

devtools-network
Figura 5. Network devtools

4.4. Sources

La pestaña de sources nos va a servir para visualizar nuestros archivos js, y poner puntos de interrupción, visualizar valores de variables o ejecutar pasos a paso los scripts, por lo tanto estas opciones también son muy útiles para los programadores cuando depuran en código.

devtools-sources
Figura 6. Sources en devtools
devtools-sourcesdebug
Figura 7. Debug en devtools

4.5. Otras pestañas y generalidades de devtools

En devtools existen más pestañas por ejemplo para revisar detalles de rendimiento de nuestra página, de la memoria, de seguridad, de la informaición que nuestra página almacena en bases de datos locales o localstorage y muchas otras funcionalidades que resultan útiles para el programador.

Una observación final es que Chrome ya viene por defecto con estas herramientas la única que debemos instalar es la que se anoto al principio del artículo que es un complemento de devtools para VUE.

5. Artículos de Interés

Escribir Archivos VUE JS y Componentes

En este artículo aprenderás como escribir archivos en VUE JS, cual es su estructura y adicionalmente sabrás como manejar componentes reutilizables que permitan construir aplicaciones escalables profesionales.

Si deseas aprender a programar en Java sigue este link.

1. Escribir Archivos VUE JS

Lo primero que debes saber para escribir un archivo VUE es que este puede corresponder a una página completa o a un componente dentro de la página y que todo archivo VUE tiene tres secciones: HTML, script y estilos. El siguiente fragmento de código muestra la estructura de un archivo VUE, lo cual sirve de guía para Escribir estos Archivos VUE JS y como se verá más adelante también aplica a componentes.

<!-- #################################################################################### -->
<!-- ###### CURSO VUE                                                              ###### -->
<!-- ###### @author: ochoscar                                                      ###### -->
<!-- ###### @date:                                                                 ###### -->
<!-- #################################################################################### -->

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="nav" class="principal">
    <span>App</span>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
export default {

}
</script>

<!-- #################################################################################### -->
<!-- ###### Sección de Estilos                                                     ###### -->
<!-- #################################################################################### -->
<style>

</style>

Estas tres secciones corresponden respectivamente a los componentes de la página web que serán mostrados en el navegador, a la sección de lógica escrita en javascript o typescript y la sección de estilos que permiten dar formatos, colores y ubicaciones a los componentes.

TIP: es importante anotar que en la sección de html debe haber una etiqueta template y dentro de esta estarán todos los componentes necesarios de la página web.

Como se aprenderá en estas secciones es muy fácil escribir lógica en VUE JS.

2. La página inicial App.vue y el index.html

Esta es la página inicial creada por VUE, pero es importante comprender que en la carpeta public existe un archivo index donde se inserta la instancia VUE, es decir, toda nuestra aplicación. Si se desea agregar contenido por fuera de VUE se puede hacer sin problema editando este archivo index.html.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. Creando y usando Componentes

Ahora estamos listos para crear un componente y usarlo, para ello crearemos un archivo nuevo en la carpeta components, observe que existe otra carpeta llamada views y aunque técnicamente no hay diferencia VUE las organiza así para destinar la primera a componentes reutilizables y la segunda a componentes completos de la navegación.

El componente que utilizaremos lo denominaremos entrada, asemejando una entrada o un post de cualquier red social. Este componente es muy sencillo, solamente tiene un div y un span con un texto, también se ha definido una clase de CSS que se utiliza para darle formato al div.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
    <div id="nav" class="principal">
      <span>Entrada</span>
    </div>
  </template>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Script                                                      ###### -->
  <!-- #################################################################################### -->
  <script>
  export default {
  
  }
  </script>
  
  <!-- #################################################################################### -->
  <!-- ###### Sección de Estilos                                                     ###### -->
  <!-- #################################################################################### -->
  <style>
    .principal {
      background-color: #b93434;
      padding: 10px;
      color: white;
      border-radius: 5px;
      width: 100px;
      font-size: 3rem;
      text-align: center;
    }
  </style>

Lo más interesante ocurre cuando se usa este componente en el algún otro archivo de VUE por ejemplo de App.vue.

<!-- #################################################################################### -->
<!-- ###### Sección de HTML                                                        ###### -->
<!-- #################################################################################### -->
<template>
  <div id="nav" class="principal">
    <span>App</span>
    <Entrada></Entrada>
  </div>
</template>

<!-- #################################################################################### -->
<!-- ###### Sección de Script                                                      ###### -->
<!-- #################################################################################### -->
<script>
import Entrada from '@/components/Entrada.vue'

export default {
  components: { Entrada }
}
</script>

Aquí es importante varios puntos:

  • El uso de la @ hace referencia a la raíz de los archivos es decir a la carpeta src.
  • En la sección export default (que es la instancia de VUE) tenemos el primer elemento que se usa denominado components y relaciona los diferentes componentes que usamos de otros archivos.
  • En esta sección de componentes se define un objeto JSON y el valor es igual al key no hay necesidad de dejarlo explicito por lo cual no es necesario escribir Entrada: Entrada.
  • Una vez definido en el script la Entrada se puede usar como etiqueta en el código en HTML.
  • VUE combina los estilos de los diferentes componentes, esto obliga a tener cuidado con los nombres de clases, aunque la sección de estilos se puede anotar con el atributo scoped y de esta manera los CSS no se mezclaran.

Nuestra aplicación de VUE luce de la siguiente manera.

appvue
Figura 1. Aplicación VUE

4. Artículos de Interés

Hola Mundo en VUE

En esta página encontrarás una guía del paso a paso para lograr un proyecto básico de Hola Mundo en VUE, espero que sea de toda la utilidad y que sirva como punto de inicio para aprender temas más avanzados.

Si quieres aprender Java sigue este link.

1. Crear el proyecto

Crear un proyecto Hola Mundo en VUE es muy simple puesto que existe un wizard que nos guía hacia la construcción del proyecto.

El comando para crear el proyecto es el siguiente:

vue create nombre-proyecto

Para este tutorial el nombre del proyecto será: proyecto-vue

Este comando se puede ejecutar sobre una carpeta vacía para que allí se cree el proyecto, se puede hacer abriendo una terminal o una consola o también sobre una ventana de terminal de visual studio.

El wizard tiene dos opciones, por defecto o manual.

Primer paso de creación de proyecto
Figura 1. Primer paso de creación de proyecto

En un segundo paso debes elegir las opciones mínimas, las cuales se recomiendan sean las siguientes, note que no se eligió typescript por lo cual se usará javascript.

Selección de características de VUE
Figura 2. Selección de características de VUE

El tercer paso implica seleccionar el modo de navegación, para ello lo más conveniente en este punto es seleccionar si, más adelante en el apartado de router.js se entrará en detalles de la navegación.

Figura 3. Selección del modo historia

El cuarto paso, implica seleccionar el nivel de errores de compilación de JS, para efectos de calidad de código se sugiere dejar la opción por defecto.

Seleccionar la corrección de errores en JS
Figura 4. Seleccionar la corrección de errores en JS

El quinto paso, implica seleccionar el modo de grabación del analizador de código javascript, se sugiere dejar la opción por defecto.

Seleccionar opciones del analizador de código
Figura 5. Seleccionar opciones del analizador de código

El sexto paso, consiste en decidir el tipo de empaquetamiento de las preferencias del proyecto, se sugiere dejar en un archivo donde se encuentren todas las opciones, este archivo se llama package.json

Empaquetamiento de preferencias del proyecto
Figura 6. Empaquetamiento de preferencias del proyecto

El séptimo paso, simplemente consiste en decidir si esta configuración se quiere nombrar para que en un próximo proyecto se utilice de forma rápida, en este caso no se guardará la configuración.

Salvar preferencias para futuros proyectos
Figura 7. Salvar preferencias para futuros proyectos

Con esto finaliza la creación del proyecto, el wizard continuará con la descarga y configuración interna del proyecto. En caso que se tenga algún error se deberá verificar los log que arroja el sistema.

Una vez terminado debes seleccionar en el menú de Visual Studio la opción “Add Folder to Workspace” y buscar la carpeta donde se creó el proyecto para poder ver, crear y editar los archivos del proyecto. Con esto ya has generado el proyecto Hola Mundo en VUE.

2. Carpetas y estructura del proyecto

El proyecto Hola Mundo en VUE creado termina teniendo la siguiente estructura:

Estructura del proyecto VUE
Figura 8. Estructura del proyecto VUE

Aquí se aprecia las siguientes secciones:

  • node_modules: corresponde a todas las librerías del proyecto y que se generan automáticamente, si estás usando un repositorio como git, esta carpeta no la debes subir al repositorio.
  • public: contiene los archivos que son públicos y que se acceden con rutas del servidor desde el navegador, incluso aquí esta el index.html donde se inserta la instancia de VUE.
  • src/assets: son los artefactos como imágenes o archivos multimedia que se utilicen dentro de la aplicación.
  • src/components: se almacenan componentes de VUE reutilizables que serán utilizados dentro de vistas completas de VUE.
  • src/router: contiene los archivos que indican las condiciones y configuraciones de rutas y navegación.
  • src/store: contiene los archivos js con las variables que se usan por la aplicación y donde se pueden consultar operaciones y datos que la aplicación o un módulo de ella utilice.
  • src/views: contiene las vistas que normalmente refieren a módulos o páginas completas de la aplicación
  • archivos: el resto de archivos son archivos de configuración del proyecto, excepto el App.vue que es el punto de entrada de la aplicación.

3. El main.js

El archivo main.js contiene la creación en js de la creación de la instancia de VUE que se inserta en el archivo index.html, este archivo puede ser modificado para incluir instrucciones particulares que ejecuten en el momento de la carga.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. El router.js

El archivo de router.js contiene la navegación y rutas de navegación, es usual encontrar en este archivo instrucciones que limiten la navegación dependiendo de roles o perfiles. El archivo básico solo contiene instrucciones generales de navegación.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

5. El store.js

El store.js contiene la información que es almacenada para procesamiento de la aplicación y consiste de varios elementos que se explorarán más adelante entre ellos los conocidos como state, mutations, actions y modules.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

6. Estructura de un archivo VUE

Finalmente un archivo de VUE se divide en 3 partes muy importantes y es aquí donde la mayoría de la programación ocurre. Las tres partes es HTML marcado con la etiqueta template y que corresponde a componentes de la vista en el navegador, la siguiente sección es la de script donde se encuentra toda la lógica de la página y finalmente la parte de estilos marcadas con la etiqueta style donde se encuentra las instrucciones para pintar la página.

Estas tres secciones son las que se ha venido hablando correspondiente a HTML, JS y CSS

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

7. Corriendo la aplicación

Ahora para poner a correr el servidor en el archivo README.md se tienen los diferentes comandos, incluyendo algunos muy útiles como para instalar el proyecto cuando se realiza la clonación del proyecto desde un repositorio. Para correr se debe utilizar el comando:

npm run serve

Una vez se ejecuta este comando desde la carpeta donde se creo el proyecto se abre la página web localhost:8080 donde corre por defecto VUE. A continuación se muestra esta aplicación hola mundo!

Aplicación corriendo
Figura 9. Aplicación corriendo

8. Artículos de Interés

Instalación de VUE

Esta página te enseña todo lo necesario para realizar la Instalación de VUE y comenzar a programar en este framework del frontend.

Si quieres aprende a programar en Java gratis sigue este link.

1. Proceso de instalación de VUE

Algo muy bueno cuando se programa en VUE es que el proceso de instalación es bastante sencillo, los componentes necesarios para realizar la instalación son pocos y todos tienen wizard y asistentes para que la instalación sea muy sencilla, sigue estos simples pasos a continuación para lograrlo.

2. Instalando Node JS

La instalación de Node JS también es muy simple, pero se preguntará por qué este componente es necesario para VUE, y básicamente es por dos razones, la primera porque a través de nodejs (que es una tecnología del backend) se puede montar un servidor que permita montar la página web estática del desarrollo hecho en VUE, esto quiere decir que el proceso de compilación de VUE arroja archivos html, js y css que son los que entrega el servidor nodejs al navegador que lo solicite, y la segunda es porque a través de nodejs se tiene acceso a las herramientas de desarrollo como la consola de comandos y la instalación de paquetes de VUE.

Para instalar nodejs básicamente se requiere descargar el ejecutable según tu sistema operativo linux, mac o windows y seguir el wizard o asistente del instalador.

En la siguiente página puedes encontrar el instalador de nodejs.

Figura 1. Logo de NodeJS

Para verificar que la instalación esta correcta puedes hacerlo ejecutando un comando que muestre la versión de nodejs instalado. Para hacerlo simplemente ejecuta el siguiente comando en una terminal o consola.

npm -v

3. Instalando Visual Studio

No falta mucho para poder programar en VUE, solamente se requiere de forma adicional un editor de texto y aunque en principio se puede usar un simple block de notas siempre es preferible tener algunas capacidades orientadas al código, uno de los más usados para este propósito y que es gratuito es Visual Studio Code cuya instalación es tan simple como la de nodejs.

Figura 2. Logo de Visual Studio Code

En este enlace puedes encontrar el link para descargar el instalador de Visual Studio.

4. Plugins recomendados de Visual Studio

Finalmente, y aunque no es requerido para continuar te recomiendo que instales en Visual Studio en el menú de configuración / extensiones algunos plugins que son muy útiles para poder programar de forma fluida en VUE. Los plugins recomendados son los siguientes:

  • VUE 3 Snippets
  • Vetur
  • npm intellisense
Figura 3. VUE 3 Snippets
Figura 4. Vetur
Figura 5. npm intellisense

5. Instalando VUE CLI

Luego de haber instalado los componentes anteriores falta simplemente instalar la consola de línea de comandos (CLI, por sus siglas) y esto se logra con un simple comando. Para ello abre una consola o terminal, en el caso de windows basta abrir el programa CMD que lo encuentras en el inicio o una terminal si estas en linux o Mac, y a continuación ejecutar el siguiente comando:

npm install -g @vue/cli

El comando npm es el manejador de paquetes (software) de node y con el podemos instalar cientos de librerías o programas, en este caso estamos instalando la consola de vue usando la opción -g que indica que será instalado de forma global. Una vez terminado ya prodrás crear el primer programa en VUE y empezar a programar.

6. Artículos de Interés

Glosario de Términos Informáticos

Este artículo muestra una recopilación de diferentes siglas utilizados en informática a fin de tener una referencia rápida de conceptos muy utilizados en sistemas a manera de Glosario de Términos Informáticos.

Para Aprender Java sigue este link.

Para Aprender VUE sigue este link.

Glosario

  • CSS: Hoja de Estilos en Cascada, permite aplicar estilos gráficos para darle diseño a los diferentes componentes que se encuentran en una página web, entre otras acciones comunes se encuentran la definición de estilos de texto, posiciones, colores, etc.
  • DNS: Servicio de Nombres de Domino, es un sistema o base de datos que funciona para realizar traducciones de un nombre de dominio por ejemplo google.com a su correspondiente IP a fin de ubicar una máquina en una red de datos como Internet.
  • JSON: Notación de Objetos de JS, permite dar formato a datos usando una cantidad mínima de overheading y que a la vez sea fácil de entender por parte de los seres humanos, a diferencia por ejemplo de formatos binarios.
  • HTML: Lenguaje de Marcas de Hypertexto es utilizado para escribir Páginas Web y es interpretado por navegadores que luego permitiran mostrar este contenido en el propio navegador
  • HTTP: Protocolo de Transferencia de Hypertexto utilizado para transmitir paquetes que en su contenido tendran HTML correspondiente a páginas web o peticiones de navegadores web.
  • JS: Javascript es el lenguaje utilizado por los programadores del frontend para escribir la lógica y el comportamiento de las Interfaces Gráficas de usuario mostradas en los navegadores.
  • URL: Localizador Uniforme de Recursos o simplemente la dirección de una página web como google.com
  • XML: Lenguaje Extensible de Marcas, es el conjunto universal de todos los lenguajes de marcas que permiten formatear datos a fin de hacerlos legibles tanto por humanos como por máquinas. En estos formatos se puede describir prácticamente cualquier dato o incluso bases de datos.

Introducción y Características VUE

Esta página encontrarás una Introducción y Características de VUE que te permitirán desarrollar proyectos de frontend en este framework famoso y versátil, a medida que avance en este mundo de la Programación Web encontrará lo fascinante que es, bienvenido!

Para aprender backend en Java siga este vínculo

1. Aplicaciones en SPA

En esta Introducción y Características de VUE lo primero es entender las Single Page Application o SPA es la forma de programar páginas web interactivas en la actualidad, estas páginas web se caracterizan por no requerir la actualización de todo el contenido cada vez que se realiza una acción por parte del usuario.

Para entender este concepto usemos la siguiente imagen como referencia. Aquí se aprecia que el usuario en el computador de la izquierda realiza una petición HTTP en el momento de escribir una URL, por ejemplo midominio.com, esta URL es traducida por el sistema DNS a una IP la cual a la larga corresponde a una máquina o servidor, este servidor a su vez procesa la solicitud y devuelve el correspondiente a la Página Web usando HTML, JS y CSS.

En las Páginas Web tradicionales cada acción del usuario implica que el servidor envíe toda la Página Web y el navegador tenga que renderizar todo lo cual produce un parpadeo de la página, lo cual además de afectar la experiencia del usuario termina siendo muy ineficiente.

Modelo de Páginas Web Tradicionales
Figura 1. Modelo de Páginas Web Tradicionales

2. Algunas definiciones

Antes de continuar es conveniente contar con algunas definiciones de terminología que se han visto hasta el momento.

  • CSS: Hoja de Estilos en Cascada, permite aplicar estilos gráficos para darle diseño a los diferentes componentes que se encuentran en una página web, entre otras acciones comunes se encuentran la definición de estilos de texto, posiciones, colores, etc.
  • DNS: Servicio de Nombres de Domino, es un sistema o base de datos que funciona para realizar traducciones de un nombre de dominio por ejemplo google.com a su correspondiente IP a fin de ubicar una máquina en una red de datos como Internet.
  • JSON: Notación de Objetos de JS, permite dar formato a datos usando una cantidad mínima de overheading y que a la vez sea fácil de entender por parte de los seres humanos, a diferencia por ejemplo de formatos binarios.
  • HTML: Lenguaje de Marcas de Hypertexto es utilizado para escribir Páginas Web y es interpretado por navegadores que luego permitiran mostrar este contenido en el propio navegador
  • HTTP: Protocolo de Transferencia de Hypertexto utilizado para transmitir paquetes que en su contenido tendrán HTML correspondiente a páginas web o peticiones de navegadores web.
  • JS: Javascript es el lenguaje utilizado por los programadores del frontend para escribir la lógica y el comportamiento de las Interfaces Gráficas de usuario mostradas en los navegadores.
  • URL: Localizador Uniforme de Recursos o simplemente la dirección de una página web como google.com
  • XML: Lenguaje Extensible de Marcas, es el conjunto universal de todos los lenguajes de marcas que permiten formatear datos a fin de hacerlos legibles tanto por humanos como por máquinas. En estos formatos se puede describir prácticamente cualquier dato o incluso bases de datos.

3. SPA vs Web Tradicional

La principal diferencia entre el SPA y el Web Tradicional queda establecida en la misma forma en que se crean comunica la página web con el servidor y para ellos vamos a entender por partes la comunicación:

  1. Lo primero que ocurre es que el usuario navega a una URL ya sea escribiendo la dirección en la barra de direcciones del navegador o dando clic en un enlace.
  2. Esta navegación involucra una petición que por ser la primera vez implica diferencia entre la Web Tradicional y SPA, puesto que para ambas se tiene una respuesta consistente en HTML, JS y CSS.
  3. En la interacciones posteriores del usuario y el navegador es que se nota la diferencia, mientras que la web tradicional sigue devolviendo HTML, JS y CSS, un página SPA solo devuelve contenido de datos normalmente formateados con JSON o XML haciendo que no se recargue toda la página sino simplemente la zona de la página que requiere la actualización.

Por lo anterior, el paradigma de SPA y programación reactiva implica actualizaciones más rápidas y eficientes, una mejor experiencia del usuario y comunicaciones optimizadas en tamaños y tiempos. La siguiente imagen ilustra una página web actualizándose en un solo punto producto de una respuesta en JSON.

Actualización de Página web después de la segunda petición usando SPA
Figura 2. Actualización de Página web después de la segunda petición usando SPA

4. Componentes del Framework

Para desarrollar Páginas Web usando SPA se cuenta con muchos framework y uno de los más populares por su facilidad de aprendizaje es VUE que permite trabajar con los lenguajes que el programador de frontend ya conoce como HTML, JS y CSS.

Este framework está diseñado pensando en la experiencia de usuario está muy bien documentado y existen miles de componentes que permiten extenderlo y realizar desarrollos confiables manteniendo la simplicidad necesaria para mantener el código.

La página oficial de VUE la puedes encontrar aquí

5. Artículos de Interés

Series de Potencias Taylor y Maclaurin en Cálculo

Las series de potencias son una herramienta tremendamente útil en Cálculo y permiten representar una función como una sumatoria, en este artículo se recopila los principales resultados de las Series de Potencias de Taylor y Maclaurin en Cálculo.

Si quiere aprender sobre lo básico de series siga este enlace.

1. Series de potencias

La Serie de Potencias en Cálculo es aquella que viene dada por la forma:

$\sum_{x=0}^{\infty}c_nx^n=c_0+c_1x+c_2x^2+c_3x^3+\dots$

Donde $x$ es una variable y las $c_n$ son constantes llamadas coeficientes de la serie. Note que una serie corresponde a un polinomio de grado infinito. De forma más general se puede escribir la serie como:

$\sum_{x=0}^{\infty}c_n(x-a)^n=c_0+c_1(x-a)+c_2(x-a)^2+c_3(x-a)^3+\dots$

La cual se denomina serie de potencias en $x-a$ o serie de potencias centrada en $a$

En general para una serie de potencias $\sum_{x=0}^{\infty}c_n(x-a)^n$ centrada en $a$ sólo existen tres posibilidades:

  • La serie converge solo cuando $x=a$
  • La serie converge para toda $x$
  • Hay un número positivo $R$, tal que la serie converge si $|x-a| \lt R$ y diverge si $|x-a|>R$

El número $R$ es conocido como radio de convergencia de la serie de potencias y dependiendo de alguno de los tres casos anteriores, todos los valores de xx para los cuales la serie converge se conocen como intervalo de convergencia.
Hay que tener en cuenta que para la mayoría de las series de potencias se puede utilizar la prueba de la razón para obtener un criterio de convergencia y el intervalo de convergencia, sin embargo, para los extremos del intervalo esta prueba no es aplicable y debe sustituirse el valor del intervalo en la serie y determinar por algún otro medio la convergencia de la misma en estos puntos.

2. Representación de funciones como series de potencias

Las funciones matemáticas pueden representarse usando una serie de potencias, y para ello es importante retomar la serie:

$\frac{1}{1-x}=1+x+x^2+x^2+x^3+\dots=\sum_{n=0}^{\infty}x^n\text{ }|x|<1$

De esta forma también podemos escribir:

$f(x)=\frac{1}{1-x}=\sum_{n=0}^{\infty}x^n\text{ }|x|<1$

Tenga presente que se pueden transformar las funciones usando álgebra básica para representarlas como series de potencias y que no todas las funciones se pueden representar como una serie de potencias.

3. Derivación e integración de las series de potencias

La suma de una serie de potencias de una función, permite obtener la derivada y la integral de dicha función derivando termino a termino. Si la serie de potencias $\sum c_n(x-a)^n$ tiene el radio de convergencia $R>0$, entonces la función $f$ definida por

$f(x) =c_0+c_1(x-a)+c_2(x-a)^2+\dots=\sum_{n=0}^{\infty}c_n(x-a)^n$

es derivable y como consecuencia continua en el intervalo $(a-R,a+R)$ y

  • $f'(x) =c_1+2c_2(x-a)+3c_3(x-a)^2+\dots=\sum_{n=1}^{\infty}nc_n(x-a)^{n-1}$
  • $\int f(x)dx =C+c_0(x-a)+c_1\frac{(x-a)^2}{2}+c_2\frac{(x-a)^3}{3}+\dots=C+\sum_{n=0}^{\infty}c_n\frac{(x-a)^{n+1}}{n+1}$

Los radios de convergencia de las series de potencias anteriores son $R$. Las ecuaciones anteriores pueden volver a escribirse de la siguiente manera:

  • $\frac{d}{dx}\left[\sum_{n=0}^{\infty} c_n(x-a)^n \right] = \sum_{n=0}^{\infty} \frac{d}{dx} [c_n(x-a)^n]$
  • $\int\left[\sum_{n=0}^{\infty} c_n(x-a)^n \right] = \sum_{n=0}^{\infty} \int [c_n(x-a)^n]$

Estas ecuaciones afirman que la derivada de una suma es la suma de las derivadas y la integral de una suma es la suma de las integrales incluso para sumas infinitas. Debe tenerse mucho cuidado puesto que lo anterior solo es cierto para sumas de series de potencias y no para otro caso. Los resultados expuestos aquí son muy útiles, puesto que permiten expresar una función como una serie incluso para funciones menos usuales a través del uso de sus derivadas y sus integrales conocidas.

4. Series de Taylor y Maclaurin

Dado que una función se puede representar como serie de potencias, usando derivadas y teniendo presente que en $x=a$ los términos que contienen $x$ se anulan se puede escribir los coeficientes de la serie de potencias en términos de $f$ así:

Si $f$ tiene una representación en series de potencias centradas en $a$, esto es:

$f(x)=\sum_{n=0}^{\infty}c_n(x-a)^n\text{ cuando } |x-a| \lt R$

entonces los coeficientes de la serie pueden ser expresados por la fórmula:

$c_n=\frac{f^{(n)}(a)}{n!}$

La serie resultante tiene dos casos:

1. Serie de potencias centrada en $0$, conocida como serie de Maclaurin

$f(x)=\sum_{n=0}^{\infty}\frac{f^{(n)}(0)}{n!}x^n$

2. Serie de potencias centrada en $a$, conocida como serie de Taylor

$f(x)=\sum_{n=0}^{\infty}\frac{f^{(n)}(a)}{n!}(x-a)^n$

4.2 Teoremas y definiciones

Las representaciones de las series de Taylor y Maclaurin pueden coincidir con la función y para demostrar ello los siguiente resultados son útiles.


Definición: Polinomio de Taylor Las sumas parciales de la serie de Taylor equivalen a un polinomio de grado $n$ que se puede expresar como:

$T_n(x)=\sum_{i=0}^{\infty}\frac{f^{(i)}(a)}{i!}(x-a)^i$


Definición: Residuo de la serie de Taylor Se define el residuo de la serie de Taylor como el polinomio de grado $n$ entre el polinomio de Taylor de grado $n$ y la función $f$, así:

$R_n(x)=f(x)-T_n(x)$

Note que si $\lim_{n \to \infty}R_n(x) = 0$ entonces la serie de Taylor y la función coinciden.


Teorema Si $f(x)=T_n(x)+R_n(x)$, donde $T_n(x)$ es el polinomio de Taylor y $R_n(x)$ es el residuo de la serie de Taylor de n-esimo grado de $f$ en $a$ y si

$\lim_{n \to \infty}R_n(x)=0$

para $|x-a| \lt R$, entonces $f$ es igual a la suma de su serie de Taylor en el intervalo $|x-a| \lt R$


Teorema Desigualdad de Taylor El siguiente resultado es útil para demostrar que el residuo de la serie de Taylor es cero.
Si $|f^{(n+a)}(x)|\le M$ para $|x-a| \le d$, entonces el residuo $R_n(x)$ de la serie de Taylor satisface la desigualdad:

$|R_n(x)| \le \frac{M}{(n+1)!}|x-a|^{n+1} \text{ para } |x-a| \le d$

4.3. Resultados importantes

Algunos de los resultados más importantes que tienen relación con las series de Taylor y Maclaurin de funciones conocidas se recopilan a continuación:

  • $\lim_{n \to \infty}\frac{x^n}{n!}=0 \text{ para todo número real x}$
  • $\frac{1}{1-x}=\sum_{n=0}^{\infty}x^n \text{ para todo número real x entre (-1,1)}$
  • $e^x=\sum_{n=0}^{\infty}\frac{x^n}{n!}\ text{ para todo número real x}$
  • $\sin x=\sum_{n=0}^{\infty}(-1)^n\frac{x^{2n+1}}{(2n+1)!} \text{ para todo número real x}$
  • $\cos x=\sum_{n=0}^{\infty}(-1)^n\frac{x^{2n}}{(2n)!} \text{ para todo número real x}$
  • $\arctan x=\sum_{n=0}^{\infty}(-1)^n\frac{x^{2n+1}}{2n+1} \text{ para todo número real x entre [-1,1]}$

5. Artículos de Interés

Teoremas y Pruebas de Series en Cálculo

Las series y sucesiones son un tema muy importante en matemáticas de hecho permiten representar de una forma diferente funciones o números, en este artículo encontraras todo lo concerniente a Teoremas y Pruebas de Series en Cálculo a fin de poder determinar si las mismas convergen o divergen.

Si quieres aprender lo básico de series y sucesiones sigue este link.

1. Prueba de la convergencia

El primer Teorema de Series en Cálculo es el de la convergencia. Si la serie $\sum_{n=1}^{\infty}{a_n}$ es convergente, entonces $\lim_{n\to\infty}{a_n}=0$
Nota: el inverso de este teorema por lo regular es falso. Hay que diferenciar en este punto del límite de las sumas parciales al límite de los términos, ambos son límites que se le pueden asociar a cualquier serie.

2. Prueba de la divergencia

Esta es la prueba que ayuda a determinar si una Serie en Cálculo converge y establece que Si $\lim_{n\to\infty}{a_n}$ no existe, o si $\lim_{n\to\infty}{a_n} \ne 0$, entonces la serie $\sum_{n=1}^{\infty}{a_n}$ diverge

3. Convergencia de series

Si `\sum{a_n}` y `\sum{b_n}` son series convergentes, entonces también lo son las series: `\sum{ca_n}` (donde `c` es una constante), `\sum{(a_n+b_n)}`, `\sum{a_n-b_n}` y

  • $\sum_{n=1}^{\infty}{ca_n}=c\sum_{n=1}^{\infty}{a_n}$
  • $\sum_{n=1}^{\infty}{(a_n+b_n)}=\sum_{n=1}^{\infty}{a_n}+\sum_{n=1}^{\infty}{b_n}$
  • $\sum_{n=1}^{\infty}{(a_n-b_n)}=\sum_{n=1}^{\infty}{a_n}-\sum_{n=1}^{\infty}{b_n}$

4. Prueba de la integral

Suponga que $f$ es una función continua, positiva y decreciente en $[1,\infty)$ y sea $a_n=f(n)$. Entonces la serie $\sum_{n=1}^\infty a_n$ es convergente si y sólo si la integral impropia $\int_1^\infty f(x)dx$ es convergente. En resumen:

  • Si $\int_1^\infty f(x)dx$ es convergente, entonces $\sum_{n=1}^\infty a_n$ es convergente.
  • Si $\int_1^\infty f(x)dx$ es divergente, entonces $\sum_{n=1}^\infty a_n$ es divergente.

Un resultado importante al aplicar la prueba de la integral es el siguiente:

Si la serie $p$, $\sum_{n=1}^\infty \frac{1}{n^p}$ es convergente si $p>1$ y diverge cuando $p \le 1$.

5. Prueba de la comparación

Suponga que $\sum a_n$ y $\sum b_n$ son series con términos positivos.

  • Si $\sum bn$ es convergente y $a_n \le b_n$ para toda $n$, entonces $\sum a_n$ también converge.
  • Si $\sum bn$ es divergente y $a_n \ge b_n$ para toda $n$, entonces $\sum a_n$ también diverge.

6. Prueba de comparación de límites

Suponga que $\sum a_n$ y $\sum b_n$ son series con términos positivos. Si

$\lim_{n \to \infty}\frac{a_n}{b_n}=c$

Donde $c$ es un número finito y $c>0$, entonces ambas series convergen o divergen.

7. Estimado del residuo para la prueba de la integral

Suponga que $f(x)=a_k$, donde $f$ es una función decreciente, continua y positiva para $x \ge n$ y $\sum a_n$, converge. Si $R_n=s-s_n$, entonces:

$\int_{n+1}^{\infty}f(x)dx \le R_n \le \int_{n}^{\infty}f(x)dx$

De donde se obtiene inmediatamente:

$s_n+\int_{n+1}^{\infty}f(x)dx \le s \le s_n+\int_{n}^{\infty}f(x)dx$

8. Prueba de la serie alternante

Si la serie alternante

$\sum_{n=1}^\infty{(-1)^{n-1}b_n}\text{ con }(b_n>0)$

Satisface:

  • $b_{n+1} \le b_n$
  • $\lim_{n\to \infty}b_n=0$

Entonces la serie converge.

9. Teorema de estimación de la serie alternante

Si $s=\sum(-1)^{n-1}b_n$ es la suma de una serie alternante que satisface:

  • $b_{n+1} \le b_n$
  • $\lim_{n\to \infty}b_n=0$

Entonces:

$|R_n|=|s-s_n| \le b_n+1$

10. Convergencia absoluta

La serie $\sum a_n$ es absolutamente convergente si la serie de valores absolutos $\sum |a_n|$ converge.
Si una serie $\sum a_n$ es absolutamente convergente, entonces es convergente.

11. Prueba de la razón

Si $\lim_{n \to \infty} |\frac{a_{n-1}}{a_n}|=L<1$, entonces la serie $\sum_{n=1}^\infty{a_n}$ es absolutamente convergente y, por lo tanto, convergente.

Si $\lim_{n \to \infty} |\frac{a_{n-1}}{a_n}|=L>1$ o $\lim_{n \to \infty}|\frac{a_{n-1}}{a_n}|=\infty$ entonces la serie $\sum_{n=1}^\infty{a_n}$ es divergente.

Si $\lim_{n \to \infty} |\frac{a_{n-1}}{a_n}|=L=1$, entonces la prueba de la razón no es concluyente.

12. Artículos de Interés

Aplicaciones de las Integrales en Cálculo

Las aplicaciones del proceso de Integración son muy variadas y se encontraran en un sinnúmero de ocasiones tanto en física con en diferentes ciencias, en este artículo se exploran las diferentes Aplicaciones de las Integrales al mismo Cálculo y otros temas relacionados con matemáticas.

Si quieres aprender las reglas de derivación sigue este enlace.

13.1. Áreas entre curvas

El área de una región $A$ limitada por las curvas $y=f(x)$ y $y=g(x)$ y las rectas $x=a$ y $x=b$, donde $f$ y $g$ son continuas en el intervalo $[a,b]$ y $f(x) \ge g(x)$ para toda $x$ en el intervalo, es:

$A=\int_a^b \biggl( f(x)-g(x) \biggr)dx$

Área en una región
Figura 4. Área en una región

En ocasiones es más fácil hallar estas áreas si expresamos las curvas en términos de $y$, de forma equivalente y para casos específicos el área se puede calcular como:

$A=\int_c^d \biggl( f(y)-g(y) \biggr)dy$

Para el caso de curvas paramétricas se puede calcular el área bajo las curvas utilizando la siguiente relación.
Sea una curva paramétrica definida por las ecuaciones $x=f(t)$ y $y=g(t)$ entonces:

$A=\int_a^bydx=\int_{\alpha}^{\beta}g(t)f'(t)dt$

13.2. Volúmenes

El caso de calcular un volumen es similar a calcular un área, en este caso necesitamos una función que describa el área y como está varía según una variable dependiente.

Sea $S$ un sólido que se encuentra entre $x=a$ y $x=b$ Si el área de la sección transversal de $S$ en el plano $P$, que pasa por $x$ y es perpendicular al eje $x$, es $A(x)$, donde $A$ es una función continua, entonces el volumen de $S$ es:

$V=\lim_{n \to \infty}{\sum_{i=1}^nA(x_i*)\Delta x}=\int_a^bA(x)dx$

13.3. Longitud de arco

Si una curva suave con ecuaciones paramétricas $x=f(t)$ y $y=g(t)$ con $a \lt t \lt b$ se recorre exactamente una vez cuando $t$ aumenta de $a$ a $b$, entonces la longitud de arco es:

$L=\int_a^b\sqrt{ \biggl(\frac{dx}{dt}\biggr)^2 + \biggl(\frac{dy}{dt}\biggr)^2}dt$

En caso de contar con la ecuación de la curva $y=f(x)$ con $a \lt x \lt b$ entonces se puede considerar $x$ como un parámetro y tener las ecuaciones $x=x$ y $y=f(x)$, por lo tanto, la fórmula anterior se convierte en:

$L=\int_a^b\sqrt{1+\biggl(\frac{dy}{dx}\biggr)^2}dx$

13.4. Valor promedio de una función

Para calcular el valor promedio de una función es suficiente tomar elementos representativos, sumarlos y dividir por el total de elementos tomados. De esa forma se puede llevar al límite y obtener una integral para el cálculo del valor promedio de la siguiente manera

$f(c)=f_{prom}=\frac{1}{b-a}\int_a^bf(x)dx$

Donde $a$ y $b representan los valores extremos del intervalo cerrado donde se quiere calcular el valor promedio de la función.

13.5. Teorema del valor medio para las integrales

Si $f$ es continua en $[a,b]$, entonces existe un número $c$ en $[a,b]$ tal que:

$f(c)=f_{prom}=\frac{1}{b-a}\int_a^bf(x)dx$

es decir:

$\int_a^bf(x)dx=f(c)(b-a)$

14. Artículos de Interés

« Entradas anteriores Entradas recientes »

© 2024 ochoscar's blog

Tema por Anders NorenArriba ↑