ESCUELA SUPERIOR POLITÉCNICA DE

CHIMBORAZO

FACULTAD DE INFORMATICA Y ELECTRONICA

TECNOLOGIAS DE LA INFORMACIÓN Y COMUNICACIÓN

USO DE LA HERRAMIENTA JCLIC

INTEGRANTES:
Granda Byron
CURSO:
PAO 4
DOCENTE:
ING. DIEGO BASTIDAS

MATERIA:
SISTEMAS INTERACTIVOS Y MULTIMEDIA

ORELLANA, 2023

Orellana-Ecuador
Teléfono: 593 (03) 2998-200
Gaspar de Carvajal, entre Quito y Napo
Código Postal: EC060155 Extensión: 3601
 TABLA DE CONTENIDO
TABLA DE CONTENIDO........................................................................................................................1

INTRODUCCIÓN.....................................................................................................................................2

DESARROLLO.........................................................................................................................................3

1. ¿Por qué se hace?...........................................................................................................................3

2. Pasos de descarga de la plantilla de una pagina web..................................................................3

3. Modificación de la plantilla...........................................................................................................6

CONCLUSIONES...................................................................................................................................10

RECOMENDACIONES.........................................................................................................................11

BIBLIOGRAFÍA.....................................................................................................................................11

Imagen 1_____________________________________________________________________________________3
Imagen 2_____________________________________________________________________________________4
Imagen 3_____________________________________________________________________________________4
Imagen 4_____________________________________________________________________________________5
Imagen 5_____________________________________________________________________________________5
Imagen 6_____________________________________________________________________________________6
Imagen 7_____________________________________________________________________________________6
Imagen 8_____________________________________________________________________________________7
Imagen 9_____________________________________________________________________________________7
Imagen 10____________________________________________________________________________________8
Imagen 11____________________________________________________________________________________8
Imagen 12____________________________________________________________________________________9
Imagen 13____________________________________________________________________________________9
Imagen 14___________________________________________________________________________________10
 INTRODUCCIÓN

El JCLIC es una potente herramienta educativa diseñada para promover la enseñanza y el

aprendizaje interactivos en el aula. Desarrollado por el Departamento de Educación de la

Generalitat de Catalunya, JCLIC se ha convertido en una referencia en el campo de la educación

digital debido a su versatilidad y facilidad de uso.

JCLIC proporciona a los profesores y estudiantes una amplia gama de recursos

interactivos que se adaptan a diferentes niveles educativos y áreas de conocimiento. Estos

recursos incluyen actividades multimedia, juegos, simulaciones y presentaciones, que permiten a

los estudiantes explorar conceptos de manera activa y participativa.

Una de las principales ventajas del JCLIC es su capacidad para personalizar y adaptar los

recursos educativos a las necesidades individuales de los estudiantes. Los profesores pueden

crear sus propias actividades y personalizarlas según los objetivos de aprendizaje específicos.

Además, JCLIC facilita el seguimiento del progreso de los estudiantes, lo que permite a los

educadores evaluar el nivel de comprensión y ofrecer retroalimentación en tiempo real.

Otra característica destacada del JCLIC es su disponibilidad multiplataforma. Los

recursos creados con JCLIC se pueden ejecutar en diversos dispositivos, como computadoras,

tabletas e incluso pizarras digitales, lo que fomenta la integración de la tecnología en el aula.

En resumen, el JCLIC ofrece un entorno interactivo y personalizable que enriquece el

proceso de enseñanza y aprendizaje. Su flexibilidad y capacidad para adaptarse a diferentes

contenidos y estilos de aprendizaje lo convierten en una herramienta invaluable para educadores

de todo el mundo.
 DESARROLLO

1. ¿Por qué se hace?

Una estrategia útil y fácil de usar para el desarrollo de actividades educativas de manera

más didáctica y amigable con el usuario, ya que este espacio brinda mas dinamismo en el

programa.

2. Pasos de descarga JCLIC.

 Paso 1:

Dirigirnos a la página “clic.xtec.cat” (XTEC, 2022).

Imagen 1

Página clic.xtec.cat
Fuente: Espoch, grupo1.

 Paso 2:

Abrir un nuevo archivo y rellenar los campos solicitados.

 Imagen 2

Fuente: Espoch, Grupo1.

 Paso 3:
En la parte de actividades nos vamos a la parte superior izquierda y nos sirve para brear actividades.
 Imagen 3
Descarga

Fuente: Espoch, Grupo1.

 Paso 3:

Una vez ya terminada la pagina, nos vamos a la parte de secuencias

Imagen 4
Extracción de la carpeta

Fuente: Espoch, Grupo1.

 Paso 4:
 Abrir Dreamwever y se visualizara los documentos de la plantilla. Previamente ya se
conecto al servidor de jnbtechnology.

Imagen 5
Dreamweaver

Fuente: Espoch, grupo1.

Empezaremos a modificar la plantilla, nos aparecerá todo los index.

 Imagen 6
Archivos Index

Fuente: Espoch, Grupo1.

3. Modificación de la plantilla.

Primero debemos saber cuál será el tema que vamos a realizar en la plantilla escogida. En

nuestro caso escogimos “Nova”, y con eso empezaremos a tener todo listo imágenes, e

información que iremos a utilizar mediante se va modificando.

Imagen 7
Plantilla inicial

Fuente: Espoch, grupo1.

Lo primero que hicimos fue modificar la vista principal de la página en la pestaña

“index.html” donde realizamos todo lo que tiene que ver con el cambio o edición del sitio

web, comenzamos por el menú de barra horizontal, agregamos la sección: inicio, acerca de,

servicios, catálogo y grupo. Cambiamos la imagen de fondo, el nombre y presentación de

nuestra página con una nueva fuente.

Imagen 8
Inicio

Fuente: Espoch, Grupo1.

Una vez hecho esto cargamos la información para poder visualizar el cambio en

nuestro sitio web como se muestra en la siguiente imagen.

Imagen 9
Inicio cambiado

Fuente: Espoch, Grupo1

Seguido de esto continuamos con la edición en Dreamweaver, en la misma pestaña nos
dirigimos a la sección “Grupo” donde realizamos la presentación de cada uno de los integrantes.

Agregamos los nombres, su función en el emprendimiento y fotos de cada uno.

Imagen 10
Cambio de nombres, funciones y fotos.

Fuente: Espoch, Grupo1.

Cargamos la pagina en la web y debe aparecer los cambios recién realizados en el

index.html, el cual ya empieza a notarse los cambios de nuestra plantilla. Nuestro tema en

cuestión es la Tecnología.

Imagen 11
Index.html Equipo

Fuente: Espoch, Grupo1.

 En la sección Contacto pondremos toda la información que ya tenemos a relación con

nuestra pagina web “Empresa de tecnología”, insertamos una imagen de nuestra ubicación desde

asset/img en Dreamweaver.

Imagen 12
Sección "Contacto"

Fuente: Espoch, Grupo1.

Por último, en esta misma sección agregamos una cajita de registro para los clientes todo

esto lo hicimos igualmente en la pestaña “index.html”, se implementó el ingreso de nombre.

Email, número de teléfono y una cajita de mensajes.

Imagen 13
Código donde se modifica e-mail entre otros.

Fuente: Espoch, Grupo1.

 Imagen 14
Visualización en la web

Fuente: Espoch, grupo1.

Después de realizar todos estos cambios. A continuación, mostramos el resultado de

nuestro sitio web: https://www.jnbtechnology.xyz/index.html.

CONCLUSIONES

En resumen, la combinación de Dreamweaver y Bootstrap es una opción poderosa

para desarrollar páginas web modernas y adaptables. Dreamweaver, como editor de

código y entorno de desarrollo visual, permite diseñar y construir sitios web de manera

intuitiva mediante características como la vista en tiempo real y la edición de arrastrar y

soltar.

Finalmente podemos concluir que Bootstrap es un framework front-end que ofrece

un conjunto de herramientas y componentes predefinidos, facilitando la creación de

diseños responsivos y estilos consistentes en el sitio web. Este framework cuenta con

características como un sistema de rejilla flexible, tipografía optimizada, componentes

interactivos y una amplia documentación.

RECOMENDACIONES

Es recomendable adquirir conocimientos básicos de HTML y CSS, a pesar de que

Dreamweaver permite diseñar sitios web visualmente sin necesidad de saber programar.

Comprender estos fundamentos es esencial para aprovechar al máximo las funciones de

Bootstrap y personalizar el sitio web según tus preferencias.

Antes de iniciar un proyecto, es importante familiarizarse con las características y

herramientas del completo software de diseño y desarrollo web, Dreamweaver. Explora las

opciones de diseño visual y las capacidades de programación para sacar el máximo provecho de

esta aplicación

BIBLIOGRAFÍA

Bootstrapmadre. (2020). Obtenido de https://bootstrapmade.com/