WebQuest

Programación en Red

Introducción

Archivo:Node.js logo.svg - Wikipedia, la enciclopedia libre

HTML

HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente, pero, incluso cuando algunas APIs y la especificación de CSS3 por completo no son parte del mismo, HTML5 es considerado el producto de la combinación de HTML, CSS y Javascript.

Estas tecnologías son altamente dependientes y actúan como una sola unidad organizada bajo la especificación de HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el resto que es extremadamente significativo.

Angular

un conjunto de librerías de código abierto que nos sirven para hacer aplicaciones web avanzadas del lado del cliente. Es ideal para hacer aplicaciones de negocio y aplicaciones de gestión que se despliegan en una única página.

Usa el patrón de diseño habitualmente encontrado en el desarrollo web MVC, aunque en una variante llamada a veces MV* y a veces MVVM. Esto, junto con otras herramientas disponibles en Angular nos permite un desarrollo ordenado, sencillo de realizar y sobre todo más fácil de mantener en un futuro.

AngularJS está apoyado por Google y cada día más desarrolladores están adoptándolo, lo que nos da una idea del prometedor futuro de la librería.

Area

Tecnología e Informática - Informática

Edad

16-17+

Herramientas

  • Presentador Multimedia
  • Organizadores Gráficos

Tarea

  • Inserción de código en etiquetas html.
  • Verificar el funcionamiento de la directiva estructural ngIf: mostrar y ocultar un elemento html en base a una variable.
  • Verificar el funcionamiento de la directiva estructural ngFor: recorrer una lista.
  • Crear un botón para ocultar una lista.
  • Buscar en una lista y mostrar si hay o no coincidencias.

Procesos

1. INSTALACIÓN DE ANGULAR

Como prerrequisito descargar e instalar Node JS https://nodejs.org/en

Ejecutar el comando: npm install -g @angular/cli

Crear un proyecto: ng new nombre_proyecto

Acceder al proyecto: cd nombre_proyecto

Ejecutar el servidor: ng serve o npm start

En el navegador se debe mostrar la página que crea angular por defecto

Instalar librerías externas con el comando: npm install bootstrap jquery --save 

Configurar las librerías, ir al archivo angular.json y agregar los styles y scripts respectivos:

"styles": [

"src/styles.css",

"./node_modules/bootstrap/dist/css/bootstrap.min.css”

],

"scripts": [

"./node_modules/jquery/dist/jquery.min.js",                             

"./node_modules/bootstrap/dist/js/bootstrap.min.js”

]

En el archivo app.component.ts que se encuentra en la ruta src/app crear una variable de tipo string denominada autor e inicialícela.

public autor = "Mateo";

En el archivo app.component.html que se encuentra en la ruta src/app borrar el contenido que viene por defecto llamar a la variable autor, para lo cual deberá colocar dicha variable entre dobles llaves “{{ autor }}”.

<div style="text-align:center">

  <h1>

    Proyecto realizado en Angular

  </h1>

  <h3>

    Autor: {{ autor }}

  </h3>

</div>

Ahora verificar en el navegador que no se esté mostrando el valor de la variable autor.

2. DIRECTIVA NGLF

Para identificar el funcionamiento de la directiva estructural ngIf primero definir una variable de tipo booleno (en este caso se denominará a la variable como mostrar_autor) en el archivo app.component.ts que se encuentra en la ruta src/app. Inicializar la variable en false.

public mostrar_autor = false;

Luego en el archivo app.component.html insertar la directiva ngIf y hacer uso de la variable booleana.

<div style="text-align:center">

  <h1>

    Proyecto realizado en Angular

  </h1>

  <h3 *ngIf="mostrar_autor==true">

    Autor: {{ autor }}

  </h3>

</div>

Con lo cual se miramos el navegador, ahora no se muestra el autor.

3. DIRECTIVA NGFOR

Para identificar el funcionamiento de la directiva estructural ngFor primero definir una variable de tipo booleno (en este caso se denominará a la variable como mostrar_autor) en el archivo app.component.ts que se encuentra en la ruta src/app. Inicializar la variable en true.

Crear un arreglo e inicialícelo con algunos nombres de personas.

public mostrar_lista = true;

public lista_de_usuarios = [ 'Ana', 'Martha', 'Ricardo', 'Mateo', 'Juan'];

Luego en el archivo app.component.html insertar la directiva ngIf y ngFor para mostrar la lista y recorrer la misma.

    <ul  *ngIf="mostrar_lista">

        <li *ngFor="let users of lista_de_usuarios">

            {{users}}

        </li>

    </ul>

Ahora verificar en el navegador que se esté mostrando el contenido del arreglo.

Crear un método en el archivo app.component.ts para cambiar de estado la a variable mostrar_lista cada vez que se pulse en un botón. Además, crear una variable string con el texto Ocultar lista.

public texto_boton = "Ocultar lista"; 

change():void{

    this.mostrar_lista = !this.mostrar_lista;

    if(this.mostrar_lista == false){

      this.texto_boton = "Mostrar lista";

    }else{ this.texto_boton = "Ocultar lista";

    }

  }

En el archivo app.component.html agregar un botón, y cuando se pulse en dicho elemento se llame el método change() para mostrar u ocultar la lista.

<button (click)="change()" class="btn btn-info" > {{texto_boton}}</button>

Y si luego se procede a pulsar en el botón se mostrará nuevamente la lista.

Ahora crear un método en el archivo app.component.ts para buscar elementos de la lista. Sólo indicar con un alert si hay coincidencias o no.

  buscar() {

    var hay_coincidencias = false;

    for(var i=0; i<this.lista_de_usuarios.length; i++){

      if(this.lista_de_usuarios[i] == this.autor){

        hay_coincidencias = true;

      }

    } if(hay_coincidencias==true){

      alert('Si hay coincidencias con la búsqueda');

    }else{

      alert('No hay coincidencias con la búsqueda');

    }

  }

El archivo app.component.html crear los elementos necesarios, como por ejemplo enlazar el input con la propiedad autor, y en el botón al hacer clic llamar al método correspondiente.

<div class="row">

    <div class="col-md-3">

        <label>Nombre</label>

        <input class="form-control" [(ngModel)]="autor" #ctrl="ngModel" required>     

    </div>

    <div class="col-md-3">

        <br>

        <button (click)="buscar()" class="btn btn-success"> Buscar </button>             

    </div>

</div>

Evaluación

RUBRICA DE EVALUACIÓN DE LA GUÍA PRÁCTICA (10)

CONCEPTO

MALO (0,5)

REGULAR (1)

BUENO (1,5)

EXCELENTE (2)

TRABAJO EN EQUIPO

El alumno tuvo una mínima o nula colaboración en el proyecto <70%

El alumno colaborará con el equipo de trabajo en un80-70% de las actividades requeridas para el proyecto

El alumno colaborará con el equipo en 90-80 % de las actividades propuestas en el proyecto

 

 

Colaboración, en el trabajo en equipo en donde el alumno participa activamente en todas las actividades (100%) descritas en el plan del proyecto.

 

FUNCIONALIDAD DEL PROTOTIPO

El proyecto no funciona adecuadamente <70%

El proyecto funciona a un  80-70% de lo planeado

El proyecto funciona en un 90-80 % de lo planeado

 

 

Funcionalidad, en donde el prototipo funciona correctamente (en un 100%) de acuerdo a lo planteado en el proyecto.

 

DOMINIO  DE LA APLICACIÓN

El alumno ignora la forma de operar del prototipo <70%

El alumno conoce y opera en un 70-80% el prototipo

El alumno conoce 80-90 % sobre la operatividad del prototipo.

 

Operatividad, en donde el alumno presenta el dominio de todos controles del prototipo (100%)

 

CREATIVIDAD

En el prototipo propuesto, no Se observan ninguno  de los elementos a evaluar (originalidad, inventiva e imaginación creativa)

En el prototipo propuesto, se observan 1 de los elementos a evaluar (originalidad, inventiva e imaginación creativa)

En el prototipo propuesto, se observan 2 de los elementos a evaluar (originalidad, inventiva e imaginación creativa)

 

Creatividad, dirigida al uso de los elementos y el producto final, partiendo de un conocimiento existente a un producto no existente u optimizando lo existente Evaluando la originalidad, inventiva e imaginación creativa

 

VERIFICACIÓN

No cumple lo estipulado.

Para el desarrollo del proyecto hace falta 1 proceso fundamental

El proyecto cumple con lo limitado.

 

La estructura del proyecto cumple con los requerimientos (ejemplo el diseño de la base de datos, prototipo, etc), referente a lo solicitado en el proyecto.

 

TOTAL

 

 

 

 

Notas

Universidad Técnica de Machala.

Facultad de Ingeniería Civil

Carrera de Ingeniería de Sistemas.

Créditos

Autor: Oscar Cárdenas

Fecha de publicación : 2021-07-30 17:44:05


Responsive image