Práctica con Unity

 Para esta práctica se nos ofrecieron tres opciones; en mi caso, he creado un entorno muy básico en el que podemos desplazarnos, conocer como funciona la gravedad en el sistema e imaginar como podemos desarrollar un videojuego desde la base.

Cuenta con un plano sobre el que se sitúan una serie de plataformas, y una cápsula que es el personaje con el que interactuamos. Podemos desplazarnos, saltar, y si nos acercamos a los límites de la base y nos dejamos caer, vemos como la cápsula desaparece.

En este entorno podemos insertar figuras base, cambiar su tamaño, textura, color... de una forma muy similar a la que nos encontramos en otros programas de diseño como puede ser el 3DsMax. 

Es muy interesante trabajar con este tipo de motores de videojuegos ya que se convierten en una herramienta más para nuestros proyectos, y son otra forma de mostrar al público diseños, objetos, escenarios... desde una perspectiva más cercana y realista.

Práctica Unreal

 Para coger un poco de práctica con el motor Unreal Engine, hemos desarrollado un escenario por el que podemos movernos con nuestro personaje.

Esta práctica la hemos realizado en grupo, en mi caso junto a Rosario Escudero, lo cual ha facilitado mucho la tarea. El programa es muy pesado y requiere de muchos recursos por lo que no todos los ordenadores pueden ejecutarlo correctamente; además, aunque estamos familiarizados con el entorno gracias a programas como 3dsMax, resulta bastante complejo desarrollar todo a nuestro gusto en esta primera toma de contacto.

En nuestro caso, hemos creado un paisaje con el terreno elevado, y hemos añadido una montaña a uno de los lados. Este programa cuenta con muchos archivos de materiales, superficies y elementos en su base de datos que hace mucho mejor la experiencia.

Añadimos unas rocas, junto con algo de vegetación en los laterales y en el centro creamos una estructura en forma de cubo, que adornamos con un arco, columnas y otros elementos. En su interior tiene mobiliario.

En la parte exterior colocamos una hoguera que incorpora sonido, así como una estatua y un maniquí similar al que utilizamos para desplazarnos.

El resultado final es simple pero nos ha ayudado a familiarizarnos con los diferentes controles, bibliotecas y elementos, así como con la creación de entornos a tiempo real.

Cartel Semana Cultural

Una de las prácticas a realizar durante la asignatura es la del cartel de la Semana Cultural 2023. En este caso, este fue el cartel que realicé junto a Rosario Escudero.

Para ello, utilizamos el software Adobe Illustrator. Quisimos unir la cultura y arte romano de gran importancia en Mérida junto con las diferentes actividades que nos podemos encontrar durante estos días.

Incluimos en la parte inferior un código QR que nos dirige a la página web del consejo en la que ver las actividades e inscribirse.

A continuación adjunto nuestro cartel:

QR, Interfaz gráfica, Infografía y Redes Sociales

 Para comenzar con esta práctica, nos registramos en LinkedIn y copiamos la URL de nuestro perfil; en mi caso es www.linkedin.com/in/maria-carrasco-carrasco-vdf .

En QRCode Monkey personalizamos nuestro código QR, cambiando el color, añadiendo logos, imágenes, incluso la forma del diseño interior. Exportamos este QR y lo guardamos para usarlo más tarde.

Nos registramos en Piktochart para realizar nuestra infografía. Ahí encontramos una gran variedad de plantillas que nos van a facilitar las cosas.

A continuación, adjunto la infografía que he realizado cuya temática es el diseño exterior del tren de pruebas de Hidrógeno de Talgo.

Por último, plasmamos esta infografía en un archivo de Illustrator que nos permita imaginar cómo se vería en un dispositivo móvil. Personalizamos toda la interfaz con botones, iconos y otros elementos para dar más sensación de realismo.

Práctica con RA

 Durante esta semana hemos realizado prácticas con realidad aumentada a través de diversas aplicaciones, en mi caso, alboomar.

Para ello, nos registramos en la página web https://www.alboompro.com/products/ar/ y accedemos al apartado AR.

Dentro de este apartado, creamos nuestra colección añadiendo una foto que active la RA y el vídeo que queremos que se reproduzca.

Descargamos la App en nuestro móvil y abrimos el visor, con el cual enfocaremos al objeto que hemos seleccionado en la vida real.

Vemos que al pasar la cámara por encima a través de la aplicación, comienza a reproducirse el vídeo.

Para visualizar mi colección podéis hacerlo a través del enlace https://alboom-r.app.link/7hpdPcRsWyb 

o insertando el código practica-scm-35987 en la aplicación.

Esta práctica ha resultado sencilla pero muy útil y aplicable a nuestros diseños futuros.

Práctica con Bootstrap

 Durante la práctica de esta semana hemos tratado la configuración de páginas web mediante Bootstrap, concretamente Bootstrap 4. Para ello, nos hemos ayudado de la página W3 Schools que cuenta con una gran variedad de código destinado a diferentes funciones a aplicar. 

A continuación, adjunto el enlace de mi página de prueba: Mi página web

En la parte superior he insertado un mensaje inicial. La página web se distribuye en tres columnas; en las dos primeras encontramos una breve descripción con imágenes y en la tercera podemos ver una colección de imágenes en forma de carrusel.

Cuenta con una barra de navegación a través de la cual se puede acceder tanto a mi blog personal como al blog de la asignatura, y en la parte inferior, una carta con mi perfil personal y un botón con el que acceder a mi perfil de Linkedin.

Dejo a continuación el código completo utilizado:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Ejemplo de Bootstrap</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<button class="btn btn-primary" disabled>

  <span class="spinner-grow spinner-grow-sm"></span>

  ¡Hola!Espero que te guste el contenido de mi web.

</button>

<div class="container">

<pre>

</pre>

<h2 class="text-center"  > Página web de María</h2>

<pre>

</pre>

</div>

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

<nav class="navbar navbar-expand-sm bg-light navbar-light">

  <ul class="navbar-nav">

    <li class="nav-item active">

      <a class="nav-link" href="#">Inicio</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="https://scm-mariacc2023.blogspot.com/">Mi blog</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="https://scm-cum.blogspot.com/">Blog de la asignatura</a>

    </li> 

  </ul>

</nav>

<div class="container">

<pre>

</pre>

</div>

<div class="container">

  <div class="row">

    <div class="col-sm-4">

      <h3><div class="spinner-grow spinner-grow-sm text-info"></div>  Mar</h3>

      <p>Masa de agua salada que cubre aproximadamente las tres cuartas partes de la superficie terrestre.</p>

      <img class="img-fluid" src="imagen5.jpg" class="rounded-circle" alt="Paisaje">

    </div>

    <div class="col-sm-4">

      <h3><div class="spinner-grow spinner-grow-sm text-success"></div> Paisaje </h3>

      <p> Cualquier área de la superficie terrestre producto de la interacción de los diferentes factores presentes en ella y que tienen un reflejo visual en el espacio.</p>

 <img class="img-fluid" src="imagen4.jpg" alt="Paisaje">

    </div>

    <div class="col-sm-4">

      <h3><div class="spinner-grow spinner-grow-sm"></div> Colección</h3>        

      <p>Imágenes de alta resolución</p>       

<div id="demo" class="carousel slide" data-ride="carousel">

  <ul class="carousel-indicators">

    <li data-target="#demo" data-slide-to="0" class="active"></li>

    <li data-target="#demo" data-slide-to="1"></li>

    <li data-target="#demo" data-slide-to="2"></li>

  </ul>

<div class="carousel-inner">

    <div class="carousel-item active">

      <img class="img-fluid" src="imagen1.jpg" alt="Paisaje">

    </div>

    <div class="carousel-item">

      <img class="img-fluid" src="imagen2.jpg" alt="Paisaje">

    </div>

    <div class="carousel-item">

      <img class="img-fluid" src="imagen3.jpg" alt="Paisaje">

    </div>

  </div>

</div>

<a class="carousel-control-prev" href="#demo" data-slide="prev">

    <span class="carousel-control-prev-icon"></span>

  </a>

  <a class="carousel-control-next" href="#demo" data-slide="next">

    <span class="carousel-control-next-icon"></span>

  </a>

</div>

<div class="container">

<pre>

</pre>

</div>

<div class="container-sm">

<div class="card" style="width:250px">

  <img class="card-img-top" src="perfil.jpg" alt="foto perfil">

  <div class="card-body">

    <h6 class="card-title">María Carrasco</h6>

    <p class="card-text">Estudiante de Ingeniería en Diseño Industrial y Desarrollo del Producto</p>

    <a href="https://www.linkedin.com/in/maria-carrasco-carrasco-vdf/" class="btn btn-primary">Visita mi LinkedIn</a>

  </div>

</div>

</div>

</div>

</body>

</html>

Práctica 5. Web 3D.

La siguiente práctica consistía en añadir a nuestra página web elementos dinámicos, con tres opciones diferentes: Añadir un vídeo de fondo, creando transformaciones en CSS o utilizando el Model Viewer para añadir elementos en 3D. 

En mi caso, decidí modificar ligeramente el código de base que nos facilitaban, añadir un enlace a mi blog y al blog de la asignatura y utilizar el vídeo de presentación de nuestra propuesta para Talgo como  fondo.

A continuación, dejo el enlace de acceso a mi página para que podáis comprobarlo:  Página web con Video de fondo de pantalla (000webhostapp.com)

Un saludo y hasta la semana que viene.💁🙋