Sesión 4. Practica JavaScript

 

En esta sesión, vamos a añadir diferentes funciones a la página web que realizamos anteriormente, mediante la creación de un archivo con la extensión .js.

https://sesion3carlos.w3spaces.com

Sesión 3. Practica CSS

En esta sesión, vamos a partir de un sitio web dado y lo vamos a modificar creando nuestro propio estilo, modificando el código css. Cambiamos aspectos como la tipografía, la gama de colores, etc.

https://sesion3carlos.w3spaces.com

Sesión 2. Práctica Html

Sesión Práctica HTML

Autor: Carlos Carro Baños

En esta sesión practicaremos las etiquetas de html

Este es un párrafo alineado al centro

Este es un párrafo alineado a la izquierda

---

Lista ordenada de trabajos a exponer en SCM

1. Herramientas páginas web
2. Web 3D
3. Redes sociales
4. Audio/Video/Fotografía
5. Inteligencia Artificial
6. Realidad Aumentada
7. Realidad Virtual

Lista no ordenada

• Audio/Video/Fotografía
• Web 3D
• Redes sociales
• Herramientas páginas web
• Realidad Virtual
• Realidad Aumentada
• Inteligencia Artificial

Visita la página de nuestro centro

Centro Universitario de Mérida

 

Horario de SCM

	Lunes	Martes	Miércoles	Jueves	Viernes
Mañana	11:00 – 13:00	9:00 - 11:00	---	---	---

Cartel semana cultural

 

WEB 3D

¿Qué es Pointed Sword y cómo crear un objeto 3D en él?

Pointed Sword es una plataforma web para crear y mostrar objetos 3D de forma sencilla, sin necesidad de manejar directamente librerías complejas como Three.js. Ofrece un entorno que facilita la integración de modelos 3D en páginas web, ideal para diseñadores y desarrolladores que buscan rapidez y simplicidad.

En Pointed Sword no se puede usar directamente Three.js, por lo que para crear una esfera metálica animada adapté el enfoque usando Canvas 2D para simular una esfera con un degradado que da volumen y brillo, animando la luz para generar movimiento.

Este método es compatible con la plataforma y permite mostrar objetos visualmente atractivos sin necesidad de importar librerías externas.

En resumen, Pointed Sword es una buena opción para proyectos 3D básicos que requieran rapidez y facilidad de uso, aunque con algunas limitaciones para objetos más complejos.

Mi objeto:

Enlace

RRSS, INFOG. Y QR

 Se nos pidió elaborar una infografía sobre un tema que nos resulte interesante. En mi caso, he decidido crear un tríptico sobre las marcas de coches más famosas. Es un tema que siempre me ha llamado la atención, ya que el mundo automotriz es fascinante tanto por la innovación tecnológica como por el impacto que tiene en nuestra vida cotidiana.

En el tríptico, he destacado algunas de las marcas más emblemáticas, como Ferrari, BMW y Toyota, explicando un poco sobre su historia, sus modelos más representativos y lo que las hace únicas en el mercado.

Una vez diseñado el tríptico, utilicé QR.io para generar un código QR que permita acceder fácilmente a la información. Este generador ofrece opciones para personalizar tanto el diseño del código como la forma en que se muestra la infografía.

INTELIGENCIA ARTIFICIAL (IA)

 

Aquí esta la conversación con la IA y los diferentes argumentos con sus enlaces:

Aquí están los argumentos a favor y en contra del uso de la IA en el ámbito de la educación, la universidad y carreras como diseño industrial:

Argumentos a favor:

• La IA puede automatizar tareas administrativas y personalizar el proceso de aprendizaje, lo que aumenta la eficiencia y la efectividad de la enseñanza. 1
• La IA, especialmente la IA generativa, puede ayudar a los estudiantes con tareas como la redacción de ensayos y la resolución de problemas, lo que les permite ser más creativos y enfocarse en el aprendizaje. 1
• La IA puede utilizarse para diseñar planes de estudio y recursos de aprendizaje más adaptados a las necesidades individuales de los estudiantes. 7
• En carreras como diseño industrial, la IA puede ser una herramienta valiosa para la innovación y el desarrollo de la creatividad de los estudiantes. 3

Argumentos en contra:

• El uso de la IA en la educación puede alterar la dinámica tradicional de enseñanza y aprendizaje, lo que requiere que las instituciones aborden los desafíos y oportunidades que presenta. 1
• Existe preocupación por la propiedad intelectual y la autenticidad del trabajo de los estudiantes cuando utilizan herramientas de IA generativa. 6
• Algunos docentes pueden tener dificultades para diseñar prácticas educativas que integren efectivamente la IA y aprovechen su potencial. 9
• La implementación de la IA en la educación requiere inversiones significativas en infraestructura y desarrollo de habilidades, lo que puede ser un desafío para algunas instituciones. 4

APLICACIONES MÓVILES

 

📱 Primeros pasos creando apps con App Inventor

Hoy quiero compartir una experiencia muy interesante que he tenido en clase: mi primer acercamiento al diseño de aplicaciones móviles, y lo mejor de todo... ¡de forma sencilla y divertida!

Durante la sesión, nuestras compañeras nos presentaron una práctica utilizando App Inventor, una herramienta desarrollada por el MIT que permite crear apps para Android sin necesidad de programar con código tradicional. Mi misión era clara: diseñar una pequeña aplicación que mostrara el mensaje “¡Hola mundo!” al pulsar un botón.

---

🛠️ ¿Cómo lo hicimos?

La tarea resultó más sencilla de lo que imaginábamos. Te explico los pasos que seguimos:

1. En la pestaña "Designer":

   • Insertamos un botón y cambiamos su texto por “Salúdame”.

   • Añadimos una etiqueta (Label) debajo y dejamos su texto en blanco, ya que lo cambiaríamos después con la acción del botón.

2. En la pestaña "Blocks":

   • Programamos el evento que se activa al pulsar el botón.

   • Indicamos que, cuando se haga clic, la etiqueta muestre el texto: “¡Hola mundo!”.

Fue increíble ver cómo, en apenas unos minutos, ya tenía una aplicación funcional en pantalla.

---

💡 Reflexiones sobre App Inventor

App Inventor me ha parecido una herramienta muy intuitiva y visual, perfecta para comenzar en el mundo del desarrollo móvil. A pesar de que para muchos era un terreno completamente nuevo, la práctica fue tan accesible y entretenida que despertó nuestra curiosidad por seguir explorando.

Este primer proyecto, aunque simple, me dejó con una gran sensación: crear una app no está tan lejos como parece. Solo hace falta dar el primer paso.

AUDIO Y VIDEO

 

🎬 Descubriendo InShot: Mi primer vídeo con paisajes de Mérida

En esta sesión, vamos a realizar un vídeo de unos 10 segundos de temática libre con el editor de vídeo InShot.

Quise aprovechar la ocasión para explorar esta herramienta y, al mismo tiempo, rendirle un pequeño homenaje visual a Mérida, una ciudad llena de historia, luz y paisajes que inspiran. Así nació un breve vídeo montaje que reúne algunos de sus rincones más bonitos.

---

📱 ¿Qué es InShot y cómo se usa?

InShot es una aplicación de edición de vídeo para móviles (iOS y Android) que permite crear contenido visual de forma rápida y sencilla. Es ideal si quieres editar clips para redes sociales, hacer reels, vlogs, o como en mi caso, un mini proyecto creativo.

Estos son los pasos que seguí para crear mi vídeo:

1. Abrí la app y elegí "Vídeo" para comenzar un nuevo proyecto.

2. Importé varios clips y fotos de paisajes de Mérida que ya tenía en mi galería.

3. Usé la herramienta de recorte para ajustar cada fragmento y lograr una duración total de 10 segundos.

4. Añadí una transición suave entre cada escena para que el montaje tuviera más fluidez.

5. Apliqué un filtro cálido que resaltara los colores dorados del atardecer sobre las ruinas romanas.

6. Incorporé una breve música de fondo desde la biblioteca integrada.

7. Finalmente, ajusté el formato a 16:9 para que se viera bien en cualquier pantalla.

El resultado es un vídeo breve pero lleno de alma, que transmite la belleza serena de una ciudad que parece detener el tiempo.

DISEÑO DE UNA PÁGINA WEB

 

🧩 ¿Qué es Wix?

Wix es una plataforma online para crear páginas web sin necesidad de saber programar. Utiliza un sistema de edición visual (drag and drop) que te permite diseñar tu sitio web arrastrando y soltando elementos como texto, imágenes, botones, formularios, etc.

Es ideal para:

• Páginas personales o portfolios

• Tiendas online

• Blogs

• Sitios para negocios y marcas personales

Wix ofrece plantillas prediseñadas, alojamiento gratuito (con subdominio), y opciones de pago si quieres usar un dominio propio o funciones avanzadas.

---

🛠️ ¿Cómo se usa Wix?

1. Crear una cuenta en www.wix.com

2. Elegir una plantilla según el tipo de página que quieres crear.

3. Editar visualmente con el editor de Wix (puedes cambiar textos, imágenes, colores, secciones, etc.).

4. Agregar funcionalidades desde el panel lateral: formularios, mapas, botones, menús, blogs, e-commerce, etc.

5. Publicar el sitio (en wixsite.com o con tu propio dominio si tienes un plan premium).

También puedes usar Wix Studio (antes "Editor X") si quieres más control sobre diseño responsivo y personalización avanzada.

---

🎨 ¿Se puede usar Bootstrap (CSS) en Wix?

Directamente no se puede usar Bootstrap como en HTML tradicional, porque Wix no permite importar frameworks externos completos como Bootstrap. Pero sí puedes usar fragmentos de código CSS y HTML personalizados en secciones específicas. Aquí te explico cómo hacerlo:

---

🔧 Cómo insertar código CSS (inspirado en Bootstrap) en Wix

Opción 1: Usar bloques de "HTML iFrame" con estilos

1. En el editor de Wix, haz clic en “Agregar” → “Insertar código” → “HTML iframe embebido”.

2. Pega el siguiente ejemplo de código:

html

<style>
  .boton-bootstrap {
    background-color: #0d6efd;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
  }

  .boton-bootstrap:hover {
    background-color: #0b5ed7;
  }
</style>

<button class="boton-bootstrap">Haz clic aquí</button>

Este botón simula el estilo de Bootstrap, pero está escrito con CSS personalizado.

 Mi pagina de Wix es antigua de otro año pero sirve como ejemplo:

        https://carlosx8ttr.wixsite.com/my-site

REALIDAD VIRTUAL

En esta sesión, aprenderemos a importar modelos 3D en Unity y a visualizarlos dentro de un entorno de Realidad Virtual.

Una vez listo el entorno, accedimos a la web Sketch Fab para buscar modelos 3D en formato .glb o .fbx. Esta parte resultó ser la más complicada, ya que varios modelos no se cargaban correctamente o presentaban problemas con las apariencias.

Finalmente, decidí insertar un modelo 3D de un motor. Al importarlo, observamos que aparecía a una escala muy pequeña, así que lo primero que hicimos fue aumentar su tamaño multiplicando su escala por 5.

Siguiendo las instrucciones de la práctica, añadimos una luz direccional y, como último paso, incorporamos el componente XR Grab Interactable. Esto permite que quienes usen gafas de realidad virtual puedan agarrar y girar el modelo con las manos o los controladores.

Y así logramos visualizar nuestro modelo 3D en el entorno de realidad virtual. ¡Esperamos que les guste!

REALIDAD AUMENTADA

 Introduccion:

 Introducción a la Realidad Aumentada

Vivimos en una era donde la línea entre lo físico y lo digital es cada vez más delgada. Uno de los avances tecnológicos que mejor ejemplifica esta fusión es la realidad aumentada (RA). A diferencia de la realidad virtual, que crea un mundo completamente nuevo, la RA superpone elementos digitales (como imágenes, sonidos o datos) sobre el entorno real, enriqueciendo nuestra percepción sin alejarnos del mundo físico.

Desde filtros en redes sociales y videojuegos interactivos hasta aplicaciones en medicina, educación o arquitectura, la realidad aumentada ya forma parte de nuestra vida cotidiana, aunque a veces no lo notemos. Esta tecnología no solo transforma la forma en que interactuamos con nuestro entorno, sino que también abre nuevas posibilidades para comunicar, aprender y experimentar de manera más inmersiva y personalizada.

En esta entrada exploraremos qué es la RA, cómo funciona, sus aplicaciones actuales y el impacto que puede tener en el futuro cercano. Porque lo que antes parecía ciencia ficción, hoy es parte de nuestra realidad… aumentada.

Practica:

En esta práctica se puede usar cualquier herramienta gratuita para crear una experiencia de Realidad Aumentada. Se proponen Assemblr: (https://www.assemblrworld.com/) o Merge Cube (https://mergeedu.com/): • Diseñar un objeto virtual, usar un modelo 3D que hayáis creado en otras asignaturas o algún objeto que ofrezca la aplicación elegida. • Integrarlo en un entorno real. • Capturar la imagen y redactar una descripción de la práctica para publicarla en vuestro blog de la asignatura.

Mi primera entrada en Blogger

 

Bienvenid@ a este viaje de crecimiento interior

Hola, gracias por estar aquí.

Hoy nace este espacio con una intención sencilla pero poderosa: compartir herramientas, reflexiones y experiencias que nos ayuden a crecer por dentro. En un mundo que va tan deprisa, a veces olvidamos lo más importante: cuidarnos por dentro para vivir mejor por fuera.

“El verdadero viaje del descubrimiento no consiste en buscar nuevos paisajes, sino en mirar con nuevos ojos.” – Marcel Proust

Este blog no pretende tener todas las respuestas (nadie las tiene), pero sí quiere ser un lugar donde podamos hacernos buenas preguntas. Esas que incomodan un poco, pero que abren puertas.

Aquí hablaremos de temas como:

• Hábitos que nutren el cuerpo y la mente
• Gestión emocional y autoconocimiento
• Cómo encontrar equilibrio en medio del caos
• La importancia de tener propósito y claridad
• Pequeños pasos para grandes cambios

No importa si estás comenzando tu camino o si llevas tiempo explorando estos temas. Aquí hay espacio para todos: los que dudan, los que buscan, los que ya se han caído y los que están aprendiendo a levantarse.

“No tienes que ser grande para comenzar, pero tienes que comenzar para ser grande.” – Zig Ziglar

Este es solo el comienzo. Gracias por acompañarme. Si algo de lo que leas aquí te resuena, compártelo. Tal vez alguien más lo necesita tanto como tú.

Con cariño,
[Charles]