From f207111b7d1a84f7b9201163eb2b600264bbac27 Mon Sep 17 00:00:00 2001 From: marely Date: Wed, 14 Feb 2024 09:03:03 -0300 Subject: [PATCH 1/2] =?UTF-8?q?correcci=C3=B3n,=20cambio=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 57 +++++++++++++---------------------- componentes/componenteCard.js | 5 +++ index.html | 2 +- js/galeriaFramework.js | 2 +- 4 files changed, 28 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 2c47d4a..d4b2426 100644 --- a/README.md +++ b/README.md @@ -1,38 +1,23 @@ # Galería Card -## Descripción Técnica del Programa -

El programa es una aplicación web que utiliza Vue.js para crear una galería de tarjetas (cards) que muestran información sobre diferentes frameworks. La aplicación está diseñada para ser responsiva y se adapta al tamaño de la pantalla del dispositivo del usuario.

- -## Estructura del Código -El código HTML de la aplicación se divide en dos partes principales: la sección ```` y la sección ``.`` - -#### Sección ````
-En la sección ````, se incluyen las siguientes dependencias: - - -#### Sección ````
-En la sección ````, se define un contenedor con el id contenedor. Dentro de este contenedor, se utiliza el componente card de Vue.js para mostrar la información de cada framework. Los datos de cada framework se pasan al componente card como propiedades. - -## Cómo Ejecutar el Programa -

Para ejecutar tu programa HTML con Vue.js, necesitarás un servidor web local. Aquí te dejo los pasos para hacerlo con Node.js y el paquete http-server, que es un servidor web simple de línea de comandos.

- -1. Instala Node.js y npm: Si aún no los tienes instalados, puedes descargar Node.js y npm desde la página oficial de Node.js. npm se instala automáticamente con Node.js. - -2. Instala http-server: Abre tu terminal o línea de comandos e instala http-server globalmente en tu sistema con el siguiente comando: -```` -npm install --global http-server -```` -
-3. Inicia el servidor: Navega a la carpeta que contiene tu archivo HTML y ejecuta el siguiente comando para iniciar el servidor: - - -```` -http-server -```` -
-4. Abre el programa en tu navegador: Finalmente, abre tu navegador web y visita http://localhost:8080/index.html +## Descripción Técnica + +

Este proyecto es una aplicación web desarrollada con Vue.js y Bootstrap. La aplicación muestra una galería de tarjetas, cada una representando un framework de desarrollo web. Cada tarjeta muestra el nombre del framework, una imagen, un resumen y un enlace para obtener más información.

+ +

El componente principal de la aplicación es el componente card, que se define en el archivo componenteCard.js. Este componente recibe cuatro propiedades: nombre, imagen, url y resumen, que representan el nombre del framework, la URL de la imagen, la URL para obtener más información y un resumen del framework, respectivamente.

+ +

Los datos de los frameworks se almacenan en el objeto oFramework dentro del objeto datos en galeriaFramework.js. Este objeto se utiliza para crear la aplicación Vue.

+ +## Funcionalidad + +

La aplicación muestra una galería de tarjetas, cada una representando un framework de desarrollo web. Cuando el usuario hace clic en "ver más..." en una tarjeta, se abre una nueva pestaña en el navegador con más información sobre el framework.

+ +## Usabilidad + +

La aplicación es fácil de usar. Los usuarios pueden ver rápidamente información sobre varios frameworks de desarrollo web y acceder a más información con un solo click. La interfaz es limpia y sencilla, lo que facilita la navegación.

+ +## Uso para el Aprendizaje + +

Este proyecto es un excelente recurso para aprender Vue.js y Bootstrap. Los desarrolladores pueden estudiar el código para entender cómo se define y se utiliza un componente en Vue.js, cómo se pasan propiedades a un componente y cómo se utiliza Vue.js para renderizar una lista de elementos basada en datos. También pueden ver cómo se utiliza Bootstrap para diseñar la interfaz de usuario.

+ +

Además, este proyecto puede servir como base para desarrollar aplicaciones más complejas. Por ejemplo, se podría ampliar para incluir más información sobre cada framework, permitir a los usuarios buscar y filtrar los frameworks, añadir funcionalidad para que los usuarios puedan añadir sus propios frameworks, etc. ¡Las posibilidades son infinitas! 😊

diff --git a/componentes/componenteCard.js b/componentes/componenteCard.js index 5e0aa12..2df4a27 100644 --- a/componentes/componenteCard.js +++ b/componentes/componenteCard.js @@ -1,3 +1,8 @@ +/* The code is defining a Vue component called "card". */ +/* The code is defining a Vue component called "card". This component has four props: "nombre", +"imagen", "url", and "resumen". The template section contains the HTML markup for the component, +which includes a card layout with an image, title, summary, and a link to view more information. The +props are used to dynamically populate the component with data when it is used in the application. */ app.component("card",{ props:["nombre","imagen","url","resumen"], diff --git a/index.html b/index.html index 57e88f3..32dcb96 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + | diff --git a/js/galeriaFramework.js b/js/galeriaFramework.js index 512fd2b..a7c33ac 100644 --- a/js/galeriaFramework.js +++ b/js/galeriaFramework.js @@ -5,7 +5,7 @@ const datos={ {nombre:"Angular",imagen:"imagenes/imagen_angular.jpg",url:"https://angular.io/" ,resumen:"Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página."}, {nombre:"Laravel",imagen:"imagenes/imagen_laravel.jpg",url:"https://laravel.com/", resumen:"Laravel es un framework de código abierto para desarrollar aplicaciones y servicios web con PHP 5 y PHP 7. Su filosofía es desarrollar código PHP de forma elegante y simple, evitando el 'código espagueti'."}, {nombre:"React",imagen:"imagenes/imagen_react.jpg",url:"https://es.reactjs.org/", resumen:"React es un framework de código abierto diseñado para crear interfaces de usuario para facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre."}, - {nombre:"Vue",imagen:"imagenes/imagen_vue.jpg",url:"ttps://vuejs.org/",resumen:"Vue.js es un framework de código abierto para la construcción de interfaces de usuario y aplicaciones de una sola página. Fue creado por Evan You, y es mantenido por él y por el resto del equipo central.​"} + {nombre:"Vue",imagen:"imagenes/imagen_vue.jpg",url:"https://vuejs.org/",resumen:"Vue.js es un framework de código abierto para la construcción de interfaces de usuario y aplicaciones de una sola página. Fue creado por Evan You, y es mantenido por él y por el resto del equipo central.​"} ] } } From 6836723ed243eff40e5969f67f57ccbeb21fbfc9 Mon Sep 17 00:00:00 2001 From: marely Date: Wed, 14 Feb 2024 09:03:48 -0300 Subject: [PATCH 2/2] correccion --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 32dcb96..46a67c5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,7 @@ - + + + @@ -7,7 +10,7 @@ | - +