Ejercicio1. Página web desde Google Sites
Haz clic aquí para recordar como se crea una página web desde Google Sites. Ten en cuenta:
- La página web es única para los 2 miembros del grupo. Asegúrate que no vas a tener problemas con esto. En caso contrario crea tu propia página individual.
- Título de la página: tico2_xx: publicación de contenidos
- Páginas que cuelgan de la principal (4 páginas):
- texto y logos
- PDF y presentaciones
- audios y vídeos
- aplicaciones
- Publica tu página, copia el enlace de tu página y comprueba que funciona desde un nuevo navegador. Llama al profesor.
- Si todo va bien sube el enlace a tu página a Classroom/eva3_2/documentos.
Ejercicio2. Editando la página principal (home)
- El tema (menú Temas) es personal. El mostrado es Vision.
- Añadimos un logo al título de la página: haz clic en Añadir logotipo/Imágenes de marca/Subir y sube el logo creado en una actividad previa. Si quieres crear un nuevo logo que incluya tu nombre: Free Logo Design, hatchful o Free Logo Maker.
- Añadimos los 5 botones para navegar por nuestra web: haz clic en Insertar/botón y crea el primer botón: texto y logos. Selecciona el link apropiado para ese botón (página web). Repite el mismo procedimiento para el resto de botones. Añade el botón Extra sin ningún enlace.
- Añadimos nuestro avatar al final de la página: haz clic en Insertar/imágenes y sube tu avatar (creado en una actividad previa). Céntralo: selecciona la imagen y arrástrala hasta que quede en medio de la página.
Ejercicio3. Creando un botón de retorno a la página principal (home)
Ahora vas a añadir un botón al inicio de cada página que cuelga de la principal. Es un botón de vuelta a la página principal.
- Accede a hatchful y haz clic en Get Started, selecciona tema Tech, un estilo a tu elección (el mostrado es Industrial) y añade HOME como Business name y tu nombre de grupo como (tico2_teacher) eslogan.
- A continuación indica que vas a usar tu logo en un sitio web y de los posibles logo elige uno que incluya tanto HOME como tu nombre de grupo.
- Haz clic en Edit logo por si quieres cambiar algo y captura el logo siguiendo el mismo procedimiento que usaste en el anterior logo. Renombra tu logo como logo2_tico2_xx.png y súbelo Classrom/eva3_2/documentos.
- Ahora accede a tu sitio web. Desde cada subpágina has de hacer clic en Insertar/imágenes y subir tu logo. Céntralo y añádele el enlace a Home.
Ejercicio4. Creando botones de avance y retroceso en cada página
Ahora vas a crear 2 botones (animaciones) para ir a la siguiente página (avance) y para ir a la página anterior (retroceso). Estos botones han de ir a la izquierda (retroceso) y a la derecha (avance) del botón de retorno a la página principal. Ambos son animaciones creadas desde imágenes (frames) en movimiento.
- Accede a Brush Ninja y crea los 2 btones. Fíjate en el mostrado más abajo:
- La animación tiene velocidad 10 (frame rate), 10 frames, texto (T), trazado con la brocha (paint brush) y un fondo a color (background)
- En el primer frame ha de aparecer el nombre del grupo (T), el trazo ADELANTE y el trazo inicial de la flecha de avance (paint brush).
- He duplicado el primer frame y avanzado un poco el trazo de la flecha. Este proceso lo he repetido hasta el frame 6. En este frame la flecha ya está completa.
- El frame 7 es un frame en blanco (vacío). Lo mismo es el frame 9.
- El frame 8 es sólo la flecha completa. Lo mismo es el frame 10.
- Podemos ver como va quedando haciendo clic en el botón Play Animation.
- Luego le he añadido un fondo de color.
- Cuando tengas la animación terminada descárgala desde Export (boton_avance.gif). También puedes guardarlo (Save) para continuar con su edición en otro momento. Llama al profesor.
- Para crear el botón de retroceso puedes, en el frame correspondiente, seleccionar los distintos trazos que hiciste al crear la flecha eliminarlos. Lo mismo con los trazos con la palabra ADELANTE para cambiarla por ATRÁS (selecciónalos todos juntos).
- Cuando tengas la animación terminada descárgala desde Export (boton_retroceso.gif).
- Sube tus animaciones a Classrom/eva3_2/documentos.
- Ahora accede a tu sitio web.
- Accede a la página textos y logos, y sube loas 2 animaciones. Ajusta su tamaño y sitúalas en su correcta posición.
- Selecciona el botón retroceso y asígnale el enlace a la página anterior (home, en este caso).
- Selecciona el botón avance y asígnale el enlace a la página siguiente (PDF y presentaciones, en este caso)
- Publica los cambios y comprueba que funciona.
- Repite los 4 últimos pasos con las 3 páginas restantes. El botón de avance de la página aplicaciones nos lleva a la página extra.
- Ahora accede a tu sitio web.
- Accede a la página textos y logos, y sube loas 2 animaciones. Sitúalas en su correcta posición.
- Selecciona el botón retroceso y asígnale el enlace a la página anterior (home, en este caso).
- Selecciona el botón avance y asígnale el enlace a la página siguiente (PDF y presentaciones, en este caso)
- Publica los cambios y comprueba que funciona.
- Repite los 4 últimos pasos con las 3 páginas restantes.
Ejercicio5. Creando un título para cada subpágina
Para cada una de las 5 subpáginas vas a crear un título a través de una imagen que lo muestre. Has de insertar esa imagen debajo del botón de retorno a la página principal y centrada. Todos los títulos han de llevar el nombre del grupo.
- Accede a Picas y crea el primer título: Textos y Logos (tico2_xx). Guárdalo como titulo1.png
- Para crear el mostrado se ha utilizado fuente Special Elite, tamaño 70, color 8000ff....
- Otras webs para crear títulos: BlogGIF, Glowtxt and Supalogo.
- Repite la operación para las otras subpáginas:
- PDF y Presentaciones (tico2_xx). Guárdalo como titulo2.png
- Audios y Vídeos (tico2_xx). Guárdalo como titulo3.png
- Aplicaciones (tico2_xx). Guárdalo como titulo4.png
- Extra (tico2_xx). Guárdalo como titulo5.png
- Sube las 5 imágenes a Classrom/eva3_2/documentos
Ejercicio6. Creando un fichero de texto para esta página
Para crear el documento de texto con formato accede a la herramienta Documentos de tu cuenta de Google. Para crear el texto sigue el siguiente procedimiento:
- Haz clic en crear un documento en blanco.
- Archivo/Configuración de la página: comprueba que se trata de un tamaño DIN A4, con 2,54 cm en cada borde
- Formato: el estilo general del documento es Texto normal, Roboto 12
- Formato/Interlineado 1,5 líneas y texto justificado (icono).
- Insertar encabezados y piés de página (o haz doble clic en la parte superior de la página, luego en la inferior): el encabezado está creado con fuente Merriweather, tamaño 11 (tu grupo: tico2_xx);
- El pié de página (misma fuente que el encabezado) está creado a través de una tabla (Insertar/Tabla de 2 columnas x 1 fila):
- la celda de la izquierda incluye el texto Publicación de documentos, alineado a la izquierda
- la celda de la derecha incluye el texto Página y el nº de página automático (clic en Opciones) que se muestra en la primera página. Este texto está alineado a la derecha.
- Para hacer los bordes de la tabla invisibles haz clic con el botón derecho sobre una de las celdas y selecciona Propiedades de la tabla: Color/Borde de 0 puntos.
- Ahora descarga este fichero, ábrelo con Pluma y copia el texto. Sitúate en la primera línea de tu documento en blanco y pega lo copiado. Comprueba que si seleccionas parte del texto pegado tiene el formato antes descrito. Si no es así, revisa el proceso. Cambia el nombre del documento a tico2_xx_texto.
- Elementos con formato:
- Texto: fuente Merriweather, tamaño 24, color rojo, centrado
- tico2_teacher (tu grupo): fuente Merriweather, tamaño 24, color verde, centrado
- Primer párrafo: formato predeterminado con sangría. Para ello: Formato/Alinear y aplicar.../Opciones... y aplicamos una sangría sólo en la primera línea de 1,5 cm.
- Cada vez que creas una nueva línea con Enter estarás aplicando el formato del párrafo anterior. Sule ser muy útil para cuando queremos mantener el formato entre párrafos. También tenemos la opción de utilizar la herramienta de copiar formato (la brocha).
- Al estilo Encabezado (tenemos 2) se accede desde Formato/Estilos de párrafo y se pueden aplicar con el texto ya escrito:
- Tenemos 2 Encabezado 1: Imágenes vectoriales y Mapas de bits (bitmaps).
- El formato es fuente Cambria, tamaño 14, color azul y con numeración automática.
- La numeración se obtiene aplicando la correspondiente de la Lista numerada (el tercer icono, arriba).
- Las viñetas se insertan desde Formato/Viñetas y numeración.
- La tabla con las imágenes (pic03, pic04 y pic05, todas imágenes png) es una tabla de 3 columnas y 1 fila. Primero has de Insertar las imágenes y, después, desde Propiedades de la tabla: Alineación seleccionar, para cada imagen (celda) la correspondiente alineación vertical: las imágenes 1 y 3, en medio de la celda; la imagen 2 abajo. Llama al profesor en caso de duda.
- íNDICE: fuente Cambria, tamaño 30, color rojo, centrado
- Para Insertar el índice (tabla de contenidos) primeros debemos tener títulos en nuestro texto.
- No te olvides de cambiar a color lila (morado) texto que aparece en el documento con ese color.
- Una vez terminado el texto has de crear 2 copias, ambas con el mismo nombre tico2_xx_texto (Archivo/Descargar): una como documento docx y otra como pdf. Sube ambos ficheros a tu Classroom/eva3_2/ficheros.
- Ahora accede a tu sitio web. Desde Insertar/Documentos selecciona tu documento tico2_xx_texto.docx y modifica su caja para que se vea entero desde Ver sitio web publicado. Llama al profesor.