-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b34e9ee
commit 44ecb54
Showing
1 changed file
with
23 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,25 @@ | ||
| # Galería Card | ||
|
|
||
| ## Descripción Técnica del Programa | ||
| <p align="justify">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.</p> | ||
|
|
||
| ## Estructura del Código | ||
| El código HTML de la aplicación se divide en dos partes principales: la sección ``<head>`` y la sección ``<body>.`` | ||
|
|
||
| #### Sección ``<head>``</br> | ||
| En la sección ``<head>``, se incluyen las siguientes dependencias: | ||
| <ul> | ||
| <li><b>Vue.js</b>. Un framework de JavaScript para construir interfaces de usuario.</li> | ||
| <li><b>Boostrap</b>. Un framework de CSS para diseñar sitios web responsivos.</li> | ||
| <li><b>Popper.js</b>. Una biblioteca de JavaScript para el manejo de poppers en aplicaciones web.</li> | ||
| <li>Los archivos JavaScript galeriaFramework.js y componenteCard.js que contienen la lógica de la aplicación.</li> | ||
| </ul> | ||
|
|
||
| #### Sección ``<body>``</br> | ||
| En la sección ``<body>``, 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 | ||
| <p align="justify">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.</p> | ||
|
|
||
| 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 | ||
| ```` | ||
| </br> | ||
| 3. Inicia el servidor: Navega a la carpeta que contiene tu archivo HTML y ejecuta el siguiente comando para iniciar el servidor: | ||
|
|
||
|
|
||
| ```` | ||
| http-server | ||
| ```` | ||
| </br> | ||
| 4. Abre el programa en tu navegador: Finalmente, abre tu navegador web y visita http://localhost:8080/index.html | ||
| ## Descripción Técnica | ||
|
|
||
| <p align="justify">Este proyecto es una aplicación web desarrollada con Vue.js y Bootstrap. Vue.js es un framework de JavaScript para construir interfaces de usuario y aplicaciones de una sola página. Bootstrap es un framework de CSS para desarrollar sitios web responsivos y móviles.</p> | ||
|
|
||
| <p align="justify">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.</p> | ||
|
|
||
| <p align="justify">El componente principal de la aplicación es el componente <code>card</code>, que se define en el archivo <code>componenteCard.js</code>. Este componente recibe cuatro propiedades: <code>nombre</code>, <code>imagen</code>, <code>url</code> y <code>resumen</code>, 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.</p> | ||
|
|
||
| <p align="justify">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.</p> | ||
|
|
||
| ## Funcionalidad | ||
|
|
||
| <p align="justify">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.</p> | ||
|
|
||
| ## Usabilidad | ||
|
|
||
| <p align="justify">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 clic. La interfaz es limpia y sencilla, lo que facilita la navegación.</p> | ||
|
|
||
| ## Uso para el Aprendizaje | ||
|
|
||
| <p align="justify">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.</p> | ||
|
|
||
| <p align="justify">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! 😊</p> |