Transcripciones
1. Introducción a Google Sites para profesores en SkillShare: Hola, profesores.
Bienvenido a nuestro curso titulado Construyendo tu Classroom
Hub con Google Science. Su guía definitiva para
crear un sitio web de
aula funcional, atractivo y de estilo moderno que
mantendrá a sus alumnos motivados
y su enseñanza organizada. En este curso, aprenderás videotutoriales
paso a paso para ayudarte a personalizar tu encabezado para una
primera impresión profesional, agregar y organizar páginas para mantener tu sitio web estructurado
y fácil de usar. Crear secciones que muestren importantes
recursos y anuncios en el aula. Entiende los conceptos básicos de
temas y colores para diseñar un sitio web que refleje tu estilo único.
Pero eso no es todo. También compartiré
consejos y trucos prácticos para que su sitio web sea atractivo
y esté a prueba de futuro. Juntos, exploraremos
cómo hacer que su sitio web receptivo y cómo navegar alrededor de las limitaciones de Google
Sites. Integra otras
plataformas sin problemas para mantener tu aula dinámica. E interesante. Si eres un educador experto en tecnología
o un principiante total, este curso está diseñado pensando
en ti Al final, tendrás
un sitio web de aula que no solo funciona. Prospera. Entonces,
¿a qué esperas? Construyamos un
sitio web para el aula que refleje su brillantez docente y permita a sus
alumnos tener éxito Da clic en la primera lección
y comencemos. No puedo esperar a ver
lo que creas. Hagamos algo
increíble juntos.
2. Lección 1: encabezado de sitios: Oigan, todos. Antes de comenzar, necesitas tener
una cuenta de Gmail. Si no tienes uno,
te sugiero que detengas este video
y crees una cuenta. Empecemos por ir a la esquina superior derecha
de nuestra pantalla y busquemos el icono de la caja de dulces o los nueve
puntitos aquí mismo. Después baja y
haz clic en el icono de sitios. Si es la primera
vez que crea un sitio, posible
que no tenga la sección reciente del sitio, pero no se preocupe. Después de este curso, estoy
seguro de que
tendrás muchos
sitios recientes aquí abajo. Si quieres comenzar
con una plantilla como yo, entonces la
sección de galería de plantillas es el lugar para ti. Dentro de esta galería,
hay muchas plantillas
para elegir. Si tienes un evento, tenemos una plantilla para eso. También hay una plantilla
para proyectos estudiantiles, o puedes desplazarte hacia abajo aquí
para ver la sección de educación. Puedes hacer clic en este
si quieres un sitio instantáneo para tu clase, o si quieres inspirarte en el diseño
de la plantilla, solo tienes que seguir adelante y
hacer clic en este. Pero en este curso,
partiremos de cero. Regrese a la página de destino del
sitio y continúe y cree
un documento en blanco. Bueno, en realidad no está en blanco porque tienes un
encabezado por defecto. Justo en medio de esta
gran pancarta hay un texto grande. Si haces clic dentro del cuadro de texto, verás algún
menú familiar justo aquí arriba, que discutiremos más adelante Pero por ahora, hagamos
clic en la tecla de escape en su teclado y hagamos clic en el icono de
papelera para eliminarlo. Aquí arriba está el nombre
del documento de su sitio. Nombremos este sitio web
del aula. Esto creará automáticamente el mismo nombre dentro del
banner si no tienes uno. Entonces cambiemos
esto a clase de arte. También tienes la opción de
agregar un logotipo para tu sitio. Vamos a agregarlo más tarde. Por ahora solo agreguemos un
título dentro de nuestra cabeza. Bien, accidentalmente hago
doble clic. Entonces, mientras estamos aquí, este menú de
forma redonda aquí mismo es donde puedes encontrar los
cinco elementos más comunes que usas
en todo el sitio. Entonces, nuevamente, si quieres
agregar un título en tu sitio, simplemente haz doble clic en
cualquier parte de la sección. Después haga clic en el icono en el
medio para agregar un texto. ¿Bien? Por ahora saltemos
esto y
bajemos aquí cuando
diga cambio Imagen. Haga clic en esto para mostrar
dos opciones más. El botón de carga
significa que está obteniendo imágenes dentro del directorio de su
computadora, y la imagen de selección
significa que está obteniendo imágenes en línea. Entonces mejor que tengas esa URL de imagen si vas
a usar esta. Pero para mí, suelo
descargar primero la imagen, luego uso el botón de subir
para subir una imagen. Busca una imagen dentro tu directorio que quieras usar
para tu encabezado. Te sugiero que si no tienes una imagen disponible en este momento para tu clase que
descargues de un sitio con
imágenes libres de derechos como Pixabay Ahora que tenemos una
nueva imagen de encabezado, es el momento de explorar los tipos de
encabezado. Tienes el banner, que
es el tamaño predeterminado. También tienes una gran pancarta. Si tu sitio realmente
exige atención, entonces opta por el tipo de portada grande. Y si no te gusta que
las imágenes aparezcan en tu página, entonces puedes elegir
el título solo tipo. Por ahora, vamos
a ceñirnos al tamaño predeterminado. Bien, hay otra manera de
agregar texto en tu sitio, y eso está dentro de la pestaña
Insertar aquí mismo. Simplemente haga clic en el icono del cuadro de texto, y agregará un texto en
una sección del sitio El problema con
esto agregar texto desde el panel Insertar es que no tienes opción a la posición del
texto dentro del sitio. Déjame simplemente dar click fuera de la sección y
mostrarte algo aquí. Ves esta
línea punteada aquí mismo. Es posible que tengas la tentación de
usar esto para mover el texto dentro de la imagen
del encabezado Si hago clic y muevo
este contenedor, verás que
no pasará nada. Simplemente regresará a
su posición original porque no está
moviendo el texto en sí, sino que está tratando de
mover toda la sección. Entonces, si quieres agregar
texto a tu encabezado, haz clic en el campo de texto y arrástralo a la sección de encabezado, y así es como agregas
texto a tu encabezado. Así que vamos a nombrar esta clase de arte. Entonces cambiemos
el tamaño a título. No, eso es demasiado grande. Vamos a tratar de encabezar. También puedes cambiar
el estilo de fuente. Como puedes ver, tienes
muchas opciones aquí abajo. También puedes cambiar
el tamaño del texto. Cambiemos esto a
30 y hagamos esto audaz. También puede agregar
enlace al texto. Este icono es lo que ellos
llaman puntos suspensivos, y esto te mostrará un conjunto
adicional de menú Se puede establecer la línea
en el espaciado de párrafos, aumentar y disminuir en abolladura. Atraviesa, y este de aquí tiene un formato claro. Digamos que copia un conjunto de texto o un párrafo
en otro sitio, por
ejemplo, y esos textos
están en negrita o cursivas. Entonces este botón te ayudará a eliminar cualquier estilo o formato de esos textos y
volver a ponerlo en su texto original. Simplemente hagamos clic en esto para ver qué
pasará con nuestro texto. ¿Ves lo que pasó? Esto volverá a su estilo original, que es la luz LTO. Bien. Volvamos a hacer clic en esto
para que sea audaz. Agregar otro texto. ¿Sabes qué? No utilicemos el
botón Cuadro de texto en el panel Insertar. Y vamos a
hacer doble clic en el encabezado para mostrarte de nuevo ese menú
redondo. Con este menú, tienes la
opción de agregar texto, subir algo, agregar imágenes, incrustar un código HTML o videos, y también puedes obtener un archivo
dentro de tu Google Drive. Puedes hacer clic en
cualquier parte de cualquier sección de tu sitio, y agregará ese
elemento en la sección, pero seguirá
un cierto orden. Al igual que en este ejemplo, agregué tres cuadros de texto
separados, y me mostrará otro
menú que dice plegable Te voy a mostrar lo que eso puede
hacer en tan sólo unos segundos. Permítanme borrar
este último cuadro de texto justo aquí haciendo clic en
este icono de papelera Y vamos a darle a esto un
nombre, otro título. Como puede ver, en ambos extremos del cuadro
de texto hay un círculo sombreado. Esto significa que tiene una
opción para cambiar el tamaño del cuadro de texto. Y a medida que muevo este círculo
sombreado, no
sé si lo ves, pero hay
líneas de columna en el fondo Esas son guías
que te ayudarán a hora de mover elementos
dentro de secciones. Nuevamente, puedes ver este
menú en la parte superior del cuadro de texto. Agreguemos otro cuadro de texto y colóquelo debajo
del segundo texto Nombremos este subtítulo. Y si colocas el
puntero sobre el cuadro de texto, notarás que se está seleccionando todo el conjunto de texto Entonces si haces clic en él, el menú volverá a aparecer. Ahora tienes una opción para
hacer de este un texto plegable. Haga clic en esto y, a continuación, haga clic
fuera del cuadro de texto. Y da click en esta flecha aquí indicando que hay
una lista dentro de este texto. Bien, así es como puedes usar la opción de texto plegable Apaguemos eso otra vez. Y ¿ves aquí este ícono de
basura? Esto no eliminará
el menú plegable. Si haces clic en esto,
se eliminará todo. Así que no hagas clic en esto a menos
que cambies de opinión sobre el título y
quieras empezar de nuevo. Si estás de acuerdo con el título o cualquier texto que pongas aquí, entonces simplemente apaga esto. Bien, entonces esto es raro. ¿Sabes qué? Creo que voy a
eliminar este tercer cuadro de texto. ¿Ves estas tres estrellas en la parte inferior
izquierda de tu cabecera,
y dice, eliminar el ajuste de
legibilidad Si activas esto,
que está activado por defecto, ajustará automáticamente el contraste de la imagen de
tu encabezado. Entonces, sea cual sea el
color del texto dentro de
tu banner, tu alumno verá el texto, y no será difícil
para ellos leer el título. Por ahora, tengo una
imagen oscura para mi pancarta. Déjame cambiar esto por
un tiempo para que veas qué pasa si pongo una
imagen más clara en el fondo. Vamos a cambiar Imagen, Subir, y buscar una
imagen dentro de mi directorio. Tengo aquí una imagen clara en blanco y
negro. Sólo darte el
momento de ajustarte. Se puede ver que el texto
se volvió a un color negro, y la imagen de fondo
se volvió más clara, casi blanca, en realidad,
si me preguntas. Y si apago esto, verás que el fondo se
convertirá en una imagen más oscura, en blanco y
negro, y competirá por
tu atención visualmente. Bien, entonces déjame poner los gráficos originales para
mi encabezado. ¿Sabes qué? Antes de terminar este video, agreguemos un logo. Pongamos el puntero sobre la barra de navegación y hagamos
clic para agregar un logotipo. Y aquí mismo dentro de
la ventana de configuración, dentro de las imágenes de marca, tienes la opción de
subir un logotipo. Puedes ver
aquí abajo que también
tienes la opción de
subir un favcon El favcon es un pequeño logotipo o una pequeña imagen que aparecerá
en la parte superior de tu navegador ¿Bien? Entonces eso es todo
para el encabezado. En el siguiente video,
exploraremos páginas y elementos de maquetación
en la pestaña Insertar. Bien. Nos vemos en la siguiente película.
3. Lección 2: páginas de encabezado de sitios: Pero doy la bienvenida de nuevo. Aquí cambio algunas cosas. Sustituyo el nombre del sitio
por EdTech Basics Academy. Cambio el texto del encabezado para dar la
bienvenida a los estudiantes e
indicar el departamento, que es el departamento de arte. Puedes tener cualquier texto
aquí dentro del encabezado. Puedes tener un enlace a tus reuniones de
Google met o Zoom. También puedes poner un botón aquí y enviarlo a otra página. Si tienes una imagen
que es más grande que el tamaño del encabezado
y quieres
mover la imagen para que
una parte importante de esa imagen sea visible
para que tus alumnos vean, entonces puedes usar este
botón aquí abajo. Esta es la imagen de anclaje. Si haces clic en esto, tendrás opción de mover la
imagen dentro de tu encabezado. Si hago clic en las flechas, verás el reposicionamiento de la imagen en el encabezado ¿Bien? Entonces eso es todo con este botón o con
este botón de anclaje. Vamos a ponerlo de nuevo a
su posición original. Si miras la barra de
navegación de aquí mismo, notarás que no
hay enlaces. Eso es porque aún
no tenemos una página. Entonces agreguemos algunas páginas. Puedes ver, estamos
dentro del panel Páginas. En nuestra lección anterior, nos centramos principalmente en
el panel Insertar. Esta vez, centremos nuestra
atención en el panel Páginas. Si vas aquí abajo,
verás un signo más. Esto te mostrará dos opciones, crear una nueva página y
crear un nuevo enlace. Empecemos por
agregar una nueva página, y pongamos un nombre a estas aulas. También puedes ver esta opción
avanzada aquí mismo. Te mostraré cómo
puedes usar esto más adelante porque solo puedes usar esta opción después de
publicar el sitio. Ahora vamos a hacer clic en Hecho. Esto creará una nueva página, y también creará
un título en el centro del encabezado con el
mismo nombre que la página. También tienes la opción de
crear una página dentro de una página o una subpágina. Agreguemos otra página aquí. Llamemos a esta clase de animación. Haga clic en Listo. Entonces dentro tu aula es donde
puedes poner toda tu clase. A lo mejor este término
tienes dos materias. Bien, agreguemos otra. Pero esta vez vamos a
crear una página usando el icono más en la
parte inferior del panel de página. Clase especial o clase de efectos
especiales. Hagamos esto un
poco más largo para que
podamos usar la
opción avanzada más adelante. Después para hacer esta parte
de tu salón de clases, simplemente haz clic y arrastra la
página a la página del aula. Ahora tienes dos clases bajo
la página principal aulas. Agreguemos otra, y
llamemos a esta página referencias. Esta página contendrá todos
tus videos curados y otros materiales de aprendizaje que
tu estudiante puede descargar Para que este sitio web del aula sea
un poco más dinámico, agreguemos una página de juego. Más adelante en este
curso,
te mostraré cómo puedes agregar
juegos a tu sitio. Así que sigue viendo, y pasemos a la página siguiente. Llamemos a este
anuncio. Haga clic en Listo. Se puede ver que la página del
anuncio es visible en la barra de
navegación. Los anuncios son importantes,
pero quiero mostrarlo vez en cuando para que
mi alumno vea la urgencia cada vez que
vea el anuncio. Entonces por ahora, sólo voy a ocultarlo de la barra de navegación. Simplemente haga clic en los puntos suspensivos verticales y haga clic en Navegación HDF El anuncio ya se
ha ido del menú, pero todavía estamos en
la página de anuncios. Eso se debe a que esta página está
seleccionada en el panel de página. Si quieres obtener una
vista previa de tu sitio, simplemente haz clic en este
ícono aquí arriba, y ahora puedes consultar
los enlaces a tus páginas. Si miras aquí abajo, también
tienes la
opción de previsualizar tu sitio en una tableta
y en un celular Volvamos a
la vista de escritorio. Déjame mostrarte lo
receptivo que es ver tus páginas
en un dispositivo móvil. Cuando abres tu sitio
en una pantalla pequeña, automáticamente creará un menú receptivo
en tu encabezado. Si haces clic en este menú de
Hamburguesa, te mostrará tus páginas
en posición vertical ¿Ves? No hay necesidad de códigos
complicados. Bien, volvamos a la vista de escritorio y
cerremos la ventana de vista previa. Si estás satisfecho
con el resultado, entonces es el momento de
publicar tu sitio. Haz clic en el
botón Publicar aquí arriba. Tomará el nombre
del sitio que sea visible para tu alumno y
lo colocará como tu dirección web. Puedes cambiar el nombre
de tu sitio si quieres, pero por ahora, creo que me
quedaré con este. Puedes cambiar la configuración, obviamente sobre quién puede
ver o editar tu sitio. Si ha terminado, haga clic en Publicar. Puede ver su sitio haciendo
clic en este botón aquí abajo o copiar el enlace del sitio publicado usando este botón aquí arriba, haga clic en Copiar, y abramos
una nueva ventana del navegador y
luego peguemos el enlace aquí. Y vamos a ver. Haz clic en nter si
miras el enlace, notarás que el enlace del
sitio está configurado como home Este Home es la página visible para tu
alumno en este momento. Pero, ¿y si tienes un nombre de página
más largo y
quieres un nombre más corto
que se muestre en la parte superior en la barra de direcciones? Si miras al editor del sitio y pasas por el panel de página, tenemos aquí una subpágina
que tiene un nombre más largo. La clase de efectos especiales se
puede cambiar por
un nombre más corto. Vamos a hacer clic en el
icono de Elipsis para ver más opciones. Después haga clic en las propiedades. En el cuadro de diálogo de propiedades, tenemos las opciones avanzadas. Y aquí es donde asignas
un nombre personalizado para esta página. Volvamos a ver la página
de vista previa y mostrarte a lo que me refiero. Y vayamos al enlace del
aula y entremos en la página de la Clase de
Efectos Especiales. Si miras en la barra de direcciones, verás que el enlace
ahora nos muestra la clase de efectos especiales de barra diagonal en la última parte del enlace Si quieres
cambiar el nombre de esta página por un nombre
mucho más corto, puedes cambiarlo en
la sección avanzada. Volvamos al
panel de la página y vayamos dentro de
las propiedades de la página y cambiemos la ruta personalizada a FX
especiales, CF y X. Pero antes de que veas algún cambio, necesitas publicar tu sitio. Esto le mostrará la
página del borrador y la página actual. Esta es una vista previa de cualquier cambio que hayas
realizado en tu sitio. Todo lo que necesitas hacer aquí es
hacer clic en el botón Publicar. Algunos de ustedes
podrían tener la tentación de hacer clic en la pestaña de vista previa y simplemente
hacer clic en el botón de actualización, pero ese no es el caso ¿Ves? Incluso si vas al enlace
del aula y seleccionas
la clase de Efectos Especiales, solo
obtendrás el error de
cuatro oh cuatro. Es decir que la
página no existe. Entonces necesitas cerrar
la ventana de vista previa, luego copiar el enlace,
abrir una nueva pestaña, ir a la clase Efectos especiales. Ahora, puedes ver que el nombre personalizado se
aplica al enlace. Ahora es una versión más corta
del nombre original.
4. LECCIÓN 3, SECCIÓN 1: En esta lección,
agregaremos una sección a nuestra página. Podemos hacerlo de muchas maneras, una de las cuales es ir
al panel Layouts y elegir
uno de estos presets Seleccionemos el primero aquí. Si miras la nueva sección, puedes ver que
tienes un lugar donde
puedes poner tu título o subtítulo, un lugar donde puedes poner una descripción y
un
marcador de posición para tus medios Agreguemos un título
a nuestra nueva sección. Vamos a escribir en el sitio web del aula. Hagamos clic fuera del cuadro de texto y pasemos al
siguiente conjunto de textos Pero el problema
es que no estoy listo
para poner ninguna descripción
al título, así que solo voy a poner un texto
ficticio solo para ver
cómo se
verá si hay una descripción real
a esta sección Un texto ficticio es útil, especialmente si no tienes la copia o descripción
necesaria para tu sitio Tal vez todavía estás
esperando la descripción final, o simplemente quieres mostrar este sitio a tus
compañeros profesores para que
puedan verificar el diseño general o cómo diseñas el
contenido del sitio. Este dammi techs se
llama Lorem Ipsum. Pasemos a otro navegador y busquemos el generador de Lorem
Ipsum Haga clic en el lorem ipsum dot IO. Dentro del generador
Lorem Ipsum, adelante y crea
tres frases Después haz clic en Generar
después de generar, ahora
puedes copiar el texto ficticio luego ir a tu sitio y simplemente
colocarlo en el campo de texto Ahora tienes una descripción
temporal para la página web de tu aula. En el lado izquierdo de la
sección es donde pones una imagen o tu enlace de video de
YouTube. Esto se llama marcador de posición. También lo puedes encontrar aquí
dentro del panel Insertar. Hagamos clic en este ícono más y agreguemos algo aquí. Aquí hay seis opciones, pero por ahora, solo
agreguemos una imagen
de nuestro directorio. Se trata de una
gráfica sencilla que muestra un aula en línea
o una clase en línea. Como puedes ver, solo
tomará el lugar de nuestro marcador de También puedes usar el marcador cuando colaboras
con otros profesores Puedes pedirles que agreguen
sus fotos o sugieran una imagen para
describir mejor el título principal
dentro de la sección. Probablemente te estés preguntando qué este menú encima de esta imagen. Se puede recortar la imagen. Puede desrecortar insertar un
enlace, eliminar la imagen, y también puede reemplazar la imagen y poner leyendas
y mazos alternativos Vamos a mostrarte
lo que puede hacer este menú. Vamos a hacer clic en el botón de desrecortar porque la imagen está un
poco apagada a la derecha Puedes usar esto para
escalar la imagen. Y centrarlo en
el marcador de posición. Entonces si estás satisfecho con la posición de tu imagen, simplemente haz clic
aquí mismo en este icono para finalizar el resultado Ahora tenemos un nuevo diseño para nuestra primera sección en nuestro sitio. Vamos a previsualizar esto con el botón de
vista previa aquí mismo. No está mal, ¿verdad? Creo que el
encabezado es un poco demasiado pequeño. Me gusta un poco más de
espacio para este encabezado. Permítanme cerrar la ventana de
vista previa y cambiar el banner predeterminado
a un banner grande. Esto es sólo para darle más
énfasis al encabezado. Vamos a previsualizar esto de nuevo. Bien. Agreguemos más espaciado entre el encabezado
y la primera sección. Esto le dará
un aspecto más moderno o simplemente un espacio para respirar. Permítanme cerrar
la ventana de vista previa. Una cosa que noto con
Google Sites es que
estás limitado en términos de maquetación y diseño de
tu sección. Pero en esta sección, te
mostraré cómo superar esa limitación y encontrar una solución creativa para un problema
creativo como este. Empecemos por el espacio. Agreguemos una
sección en blanco. Como un cuadro de texto. Después arrastra toda la sección a la parte superior de la primera sección. Esto agregará un
espacio intermedio. Puedes ajustar más espacio
vertical simplemente reduciendo e
incrementando el tamaño de la fuente. Voy a cambiar esto
al tamaño más pequeño, solo para asegurarme de que este es el espacio más pequeño posible. Permítanme simplemente dar clic afuera
y previsualizar esta página. Ahora tenemos justo
espacio en el medio. Cerremos la ventana de vista previa y agreguemos otra sección de cuadro de texto Después mueve esto en la parte inferior
de la segunda sección. Esto es solo planear
con anticipación porque sé que hay otra sección siguiente que estará en mi
cuarta sección, realidad. ¿Sabes qué? Déjame mostrarte otra manera. De hecho, una forma
mucho más fácil de crear otra sección, y es duplicar
una nueva sección. Permítanme borrar
esto y
volvamos a la primera sección y clic en este icono
aquí mismo para duplicar la sección y luego arrastrar
esto hasta aquí abajo. Ahora, vamos a previsualizar esto
y ver el resultado. Es importante planificar
realmente con anticipación cuando estés diseñando el espaciado y el layout de tu sitio, ya que si encoges esto
a una pantalla del tamaño de una tableta, puedes ver que
habrá algún tipo de desalineación en la
sección porque está tratando de ser responsive y autoscale para diferentes
dispositivos móviles Entonces así de sencillo
es crear una sección y agregar
espacio a tu sitio.
5. TEMAS Y COLORES DE FUENTE: Asume a estas alturas que ya
sabes cómo agregar
texto a tu sitio. Si te saltas la lección anterior, te
sugiero que detengas este
video y regreses y veas eso porque esa es una de las
lecciones más importantes de este curso. ¿Bien? Empecemos. Voy a resaltar el texto y
puedo cambiar el
tamaño de fuente aquí mismo, o simplemente puedo cambiar de texto
normal a título. ¿Ves lo grande que es? Permítanme simplemente colocar esto en
medio de la sección. También verás que
el color de la fuente cambia. Si
vuelves esto al texto normal, este cambiará de nuevo a negro, que es el
color predeterminado del texto. Esto cambió de color debido
al tema establecido por este sitio. Echemos un vistazo al panel de
temas y comprobemos qué está causando que
la fuente cambie su color. Se puede ver que se
coloca una marca de verificación en esta paleta de colores. Si lo cambias a rosa, entonces el color del
título cambiará a rosa. Y también notas
que otros títulos con el mismo estilo se convierten
en un color rosa. Puedes experimentar con
diferentes colores para que se
adapten a la
marca general de tu sitio. Volvamos
al panel Insertar y volvamos a la
sección de la página. Después resalta el texto y
haz clic en este icono aquí mismo. Con este, también se puede cambiar el color con una
amplia selección de colores. Si no eres particular
con la combinación de colores de los sitios, entonces este proceso
es una buena opción. El único problema es que
tienes que cambiar
todos y cada uno de los títulos de la página si quieres tener
el mismo color. Pero entonces otra vez, es
sólo cuestión de gustos. Simplemente no lo hagas demasiado
confuso para tus alumnos. Entonces, si cambias de
opinión con los colores y quieres
volver desde el inicio, entonces simplemente haz clic en este icono, luego haz clic en este para
borrar o eliminar formato que
hicimos para este título. Centremos esto, luego haga clic en Entrar para crear un
espacio debajo del título principal. Entonces sigue adelante y
previsualiza esta página. Creo que puse demasiado espacio entre la cabecera y
la primera sección. Salgamos de la ventana de vista previa, y movamos la
segunda sección entre estas dos secciones. Esto creará un espacio para
respirar, por lo que es fácil de ver. Vamos a previsualizar de
nuevo esta página, luciendo bien. Espero que uses la sección en blanco
como parte de tu diseño. Esto también te dará un
aspecto más profesional. Eso es. Espero que aprendan algo, y para nuestra próxima lección, exploraremos
más sugerencias de diseño
y diseño de secciones . Entonces nos vemos en el siguiente video.
6. LECCIÓN 5, SECCIÓN 2: Agreguemos otra sección,
y en este tiempo, agreguemos algo que
contenga tres marcadores Este diseño es perfecto
si quieres mostrar un grupo de elementos o videos que suelen
juntarse. Al igual que en este ejemplo,
estaré explicando a mi clase cómo uso las tres plataformas
para nuestro sitio web de aula. Primero, necesitamos subir imágenes que representen
cada plataforma. Para
fines de demostración, estaré subiendo imágenes que
obtuve de Pixabay Ya descargué
estas imágenes. Sólo los estoy metiendo dentro de
la carpeta de mi directorio. Entonces permítanme simplemente hacer clic en el campo de texto proporcionado
por cada carpeta de lugar. Este es para Vimeo. El segundo es para FlipGrid. Y el tercero
es para YouTube. Agreguemos una descripción
para cada artículo. Y como no tenemos lista
una descripción, consigamos la ayuda
de A dammi text Vayamos a nuestro generador de
Lorem Ipsum, y digamos que
necesito dos frases para cada ítem dentro de
la sección de noticias Haga clic en Generar. Copia
el texto ficticio, vuelve al sitio web del
aula luego pega la
descripción temporal aquí abajo Vamos a pegar el mismo dummitex
al resto de los artículos. Si quieres alinear o cambiar el tamaño de las imágenes
dentro del marcador de posición, todo lo que necesitas hacer
es hacer doble clic y mover la imagen
dentro del marco También verá un control deslizante y una marca de verificación en la
parte superior del marco. Eso es para el cambio de tamaño de la imagen. Si ha terminado, simplemente haga clic fuera del
marco, y eso es todo. También puede hacer que esta
columna se pueda colapsar. Simplemente deslice el puntero hasta
el borde de la columna. Después haga clic para seleccionar el grupo. Enciende plegable. Hagamos lo mismo con
las otras dos columnas. Ahora puedes hacer clic en
este pequeño icono
desplegable en la parte inferior de cada imagen para
ver el contenido. También podemos cambiar el color del fondo
para nuestra sección. Vamos a hacer clic en este pequeño icono de
paleta aquí. A veces un diseño todo blanco es un poco demasiado minimalista
para algunas personas. Agregar un poco
de tono de gris puede ser bueno, o un poco de color de fondo puede romper ese
diseño todo blanco del sitio. También puedes agregar un
fondo de imagen a tu sección. Te recomiendo un fondo de textura solo para mantener la atención al contenido y evitar forzar los ojos de tu alumno porque tienes un fondo muy
colorido Incluso con el
ajuste de contraste activado, puede ver que el texto es un poco demasiado ligero
para el fondo. Eso lo podemos arreglar en las próximas
lecciones de este curso. Pero por ahora, da click fuera de la
página y previsualiza nuestro trabajo. Haga clic en los
elementos colapsables en la sección e intente obtener una vista previa de la página en
diferentes dispositivos móviles Volvamos a
la vista de escritorio y salgamos de la ventana de vista previa. Y así de fácil
es agregar secciones usando el diseño preestablecido
en el panel de inserción. En la siguiente película,
vamos a crear un carrusel de imágenes Nos vemos en el siguiente video.
7. LECCIÓN 6: CARRUSEL DE IMÁGENES: En esta lección, vamos
a crear un carrusel de imágenes. Pero antes de agregar otra
sección para el carrusel, necesitamos crear un espaciador
usando el cuadro de texto
entre la sección anterior y lo que sea que venga
después de eso Nuevamente, esto está planeando con anticipación. Si quieres agregar
otra sección, al
menos tienes ese espacio. También se suma a la
consistencia del diseño. Voy a establecer el tamaño de la fuente en 14. Nos dará un poco
más de holgura vertical. Si por alguna razón
no estás satisfecho con eso, simplemente haz doble clic de nuevo
y agrega otro cuadro de texto. Bien, movamos
nuestra atención a los artículos en el panel de inserción. Después busca la sección de
carrusel de imágenes. Aparecerá una ventana
donde podrás agregar imágenes para incluirlas
en tu carrusel ¿Bien? Entonces, hagamos clic en
el signo más y subamos imágenes. Ya tengo algunas imágenes
aquí dentro de mi carpeta. Seleccionaré una imagen, luego doble clic para Importar
agregaré tres imágenes más. Después de subir las
imágenes, simplemente haz clic en Insertar. A continuación, voy a
cambiar el tamaño del carrusel. Al arrastrar para cambiar el tamaño de la imagen, se
puede ver que hay
líneas en el fondo Estas son guías que te
ayudarán a
cambiar el tamaño o posicionar correctamente tus
elementos dentro de una sección Entonces voy a cambiar el
fondo a gris claro. Un sutil cambio de
color como este romperá el
diseño todo blanco del sitio. Ya puedes previsualizar
tu carrusel, pero antes de hacer clic en
el botón de vista previa, solo
quiero
mostrarte cómo puedes establecer el comportamiento
de este carrusel Haga doble clic en la imagen, luego busque el icono de engranaje en la parte superior derecha de la ventana de
edición del carrusel Se puede experimentar con estas
propiedades o atributos. Puede configurarlo en Auto Start y cambiar la velocidad de transición. Voy a hacer clic en
el Auto Start, luego establecer la velocidad
en, digamos, lenta. Luego haga clic en Actualizar y
salga de esta ventana. Si estás satisfecho con
el tamaño de tu carrusel, entonces es el momento de
previsualizar tu página Desplázate hacia abajo hasta el carrusel, dale algo de tiempo para observar el momento de la transición de la
imagen Y si piensas
que es demasiado rápido, entonces siempre puedes
volver a la ventana de edición de
tu sección de carrusel y modificar algunos atributos hasta que estés
satisfecho con el resultado Asegúrate de revisar
también otros dispositivos, cómo se verá en una
tableta y en un teléfono móvil. En la siguiente película,
agregaremos un pie de página a nuestra página.
8. SECCIÓN DEL PIE DE PIE DE LA LECCIÓN 7, PARTE 1: Esta lección, te daré una introducción rápida
a la sección de pie de página. Esta será la primera parte porque el sitio web aún está en proceso
de producción. Empecemos por
desplazarnos hasta aquí abajo. Si muevo mi puntero
sobre la página, puedes ver que
hay un botón
aquí abajo que dice agregar Pie de página. Puedes agregar un cuadro de texto,
pero para pies de página, suele ser un grupo de enlaces a todas las diferentes
páginas de tu sitio Puedo cambiar también el
color de fondo de la sección. Nuevamente, si
quieres cambiar el color, puedes subir una imagen o con un color recto
o sombreado O simplemente puedes ir
al panel de temas. Pero recuerden, también cambiará el color
del texto de los
encabezamientos y los subtítulos Como puedes ver, estos
colores también son los mismos porque es el tema de
color general de tu sitio. Así que repasemos el panel de
temas y veamos cómo se verá si
tenemos un color diferente. A partir de ahora, estamos
usando este color. Pero ¿qué pasa con el rosa o el verde? También es una buena idea
modelar el
tema de color de tu escuela. Hágalo más consistente como si el
sitio web de su aula fuera parte
del esfuerzo de la escuela para proporcionar
recursos adicionales para su estudiante. Si quieres editar tu pie de página,
obviamente, este pie de página
es un poco pequeño, por lo que es posible que necesites un pie de página de tamaño mucho
más alto, especialmente si
tienes muchas páginas en el sitio web de tu aula. Haz esto, es posible que tengas que hacer
clic en este botón aquí mismo. Haga clic en el Editar pie de página, y hagamos clic en el
cuadro de texto y haga clic en Entrar Esto es para agregar más
espacio vertical en el pie de página. También puede cambiar el tamaño del cuadro de texto. Ahora se convierte en una sección de
dos columnas. Si volvemos
al panel Insertar, y digamos que agregamos un marcador de posición y luego agarramos el marcador posición a
la segunda
columna de tu pie de página, ahora tienes un lugar
donde puedes subir imágenes o videos para que tu
pie de página sea más interesante Ahora, vamos a previsualizar nuestra página. Entonces vamos a desplazarnos hacia abajo hasta
nuestro Pie de Página, y eso es todo. Así es como creas un
pie de página en el sitio de Google. Por ahora aún no
ves nada. Al final de este curso, cuando se configuren todas las
páginas, volveremos a nuestro
pie de página y lo diseñaremos nuevamente. Así que mantente en el rumbo y
nos vemos en el siguiente capítulo.
9. LECCIÓN 8 MANTENIMIENTO: Antes de comenzar con las páginas dentro de nuestro sitio web del aula, agreguemos una página
llamada mantenimiento. Vamos a resaltar
el título aquí y cambiar el
mensaje de encabezado o Título dos. Esta página está en construcción. Después vuelve a resaltar el texto. Entonces alineemos
esto a la izquierda. Después haga clic en este icono
para mostrar más opciones. Vamos
a borrar cualquier formato de este texto y ponerlo negrita y establecer el
espaciado entre párrafos en un solo espacio. Entonces vamos a dar click afuera. Si esta página está
en construcción, tal vez un cambio de fondo nos
ayude con el mensaje. Así que vamos a subir una nueva imagen. De nuevo, si necesitas imágenes de
buena calidad, puedes
descargarlas desde Pixabay ¿Bien? Entonces como se puede
ver en el fondo, la imagen muestra un personaje con un letrero que dice
en construcción. Quiero que esto se muestre
en el encabezado, así que solo voy a
sacar este texto
del camino y tal vez
cambiar el tamaño a 48. O tal vez cambiar esto a, digamos 50 o tal vez cambiar
esto a título o encabezado. En fin, siempre se puede
cambiar esto más tarde. Podría volver a ponerlo a
64 para que sea más grande. Pasemos a nuestra primera sección y agreguemos un mensaje
a nuestro alumno. Creo que es mejor
darles alguna esperanza de que la página esté
disponible pronto. ¿Bien? Así que resalta el texto, luego cámbialo a título o tal vez encabezado y
hazlo en negrita. Entonces hagamos clic afuera
para obtener una vista previa rápida. Agreguemos otra sección. Haga doble clic en la página para ver el menú redondo o
el menú emergente. Seleccionemos el botón
central para agregar un texto y otra
sección en la página. Vamos al generador de
Lorem Ipsum, y vamos a copiar el texto generado
por defecto Después vuelve a nuestra página
y simplemente pegarla. Asegúrate de borrar cualquier
formato de nuestro texto. Después cambia el tamaño de la fuente a 14. Hagamos clic afuera para
tener una vista previa rápida. Creo que la fuente es
demasiado pequeña para 14. A lo mejor puede llegar a 18, y cambiemos el
color a un gris claro. Volvamos a hacer clic afuera
para ver el resultado. Bien, tal vez podamos ir
un poco más oscuros. La página es suficiente, y la explicación aquí abajo es solo una información secundaria
para los alumnos. Previsualicemos nuestra página
para ver el resultado. Creo que este es un diseño limpio
para la página de mantenimiento, pero hay un problema
con el espaciado entre el subtítulo
y el texto principal a continuación Bueno, volvamos
a nuestro editor. Esa debería ser una solución
rápida y fácil. Todo lo que tenemos que hacer
es seleccionar y cortar el subtítulo que
sería Control X para PC o Comando X en una Mac y pegarlo en
la parte superior del texto del cuerpo Entonces cambia esto a un tamaño
más grande como 24. Ahora
bien, esta sección de aquí mismo será un espaciador entre
las dos secciones. Cambiemos esto a texto normal y cambiemos el
tamaño del teléfono a ocho. Vamos a verificar dos veces, y
vamos a previsualizar esto. A ver. Creo que
necesitamos otro espaciador. Justo aquí abajo,
volvamos al editor de páginas. Y vamos a duplicar
esta sección aquí mismo, luego arrastramos esto aquí abajo y
vamos a previsualizar esto de nuevo. Y eso es todo para el diseño y maquetación de nuestra página de mantenimiento. Pero antes de terminar esta lección, permítanme simplemente ocultar el enlace de
mantenimiento en la barra de navegación. Vayamos al
panel de páginas y hagamos clic en las propiedades de
la página de mantenimiento y simplemente ocultémosla
de la navegación. Y ahora estamos listos para
construir nuestras páginas de aula. Entonces nos vemos en la siguiente lección.
10. PÁGINA DE CLASE DE LA LECCIÓN 9: Pasemos a
nuestra página individual en nuestro sitio web del aula. Empecemos con
una página de aula. Si haces clic en el enlace del aula, verás las dos clases
que se enumeran a continuación. Si hago clic en este enlace, irá directamente
a sus páginas. Aquí no hay nada que ver porque a partir de ahora, es solo una plantilla. Pero hay otro
enlace a este grupo, y esa es la página principal del
aula. Ocultemos la clase de animación
y la clase de efectos especiales. Pasemos a las propiedades de cada página y la ocultemos
de la navegación. Esto eliminará el
menú desplegable y obligará a
tu alumno a ver la página principal de aterrizaje del
aula antes de ingresar a
la asignatura principal. Esto también es una ventaja
porque puedes mostrarles una breve introducción visual a tu salón de clases o
a tus materias. Se puede colocar un video o una breve descripción de texto
o una imagen. Pero en este ejemplo,
elegiremos uno de los presets. Vamos a
crear un menú de tarjetas para cada uno de tus temas. Para la consistencia de
diseño y diseño, voy a agregar un espacio entre el encabezado y la
primera sección. Y también, voy
a colocar un espacio entre la primera
sección y nuestro pie de página. Vayamos a nuestra primera tarjeta. Sigue adelante y escribe
tu primer tema. Voy a escribir
aquí animación. Levanta eso. Así que vamos a escribir de
nuevo la clase de animación. El segundo son los efectos
especiales. ¿Sabes qué?
Permítanme cambiar esto a clase de efectos visuales. La tercera tarjeta será para
mi clase de producción de video. Y la última tarjeta aquí
será para mi clase de
pintura digital. También agregaré un
botón para cada una de las tarjetas para que los alumnos
puedan acceder a mis asignaturas. Pasemos por aquí dentro
del panel Insertar y
busquemos el botón. Sólo dale un nombre a este. Voy a nombrar
esto asistir a clase, y solo voy a señalar esto
a la página de mantenimiento porque la clase de animación aún no
está disponible o en construcción.
Haga clic en Insertar. Este botón está configurado para enlazar
a la página de mantenimiento. Entonces todo lo que tenemos que hacer ahora
es hacer cuatro copias de este botón para cada una
de nuestras materias de clase. Para duplicar, simplemente
haga clic en este icono luego arrástrelo a la columna de materias de su
clase. Ahora tenemos un botón
para cada una de nuestras tarjetas. Subiremos una imagen que
representará a cada tema. Ya descargué imágenes
de Pixabay para esta lección. Subamos una imagen para
la clase de efectos visuales, una imagen para mi clase de
producción de video y otra para mi clase de pintura
digital. Vamos a previsualizar esta página, y ahora esta es la página de destino del
aula. Aquí, puedes
agregar nuevas funciones o tutoriales o lecciones. Puedes agregar tu
video de bienvenida si quieres, o un breve blog o
casi cualquier cosa que haga que tu clase sea más
emocionante para tus alumnos. Intentemos hacer clic en el botón de
asistir
a clase para verificar si está
funcionando correctamente. Entonces volvamos a nuestra página de aterrizaje
en el aula. Creo que esta página es sencilla
y dinámica a la vez. Pero antes de hacer algún
elemento adicional a esta página,
sigamos adelante y
publiquemos el sitio. Después, vuelva a previsualizarlo. Es una buena práctica
previsualizar siempre tu trabajo porque de alguna manera en
mi caso, me mantiene en marcha. Así que cada adelanto es inspirador. En la siguiente lección,
exploraremos una de las
páginas más importantes de su sitio. Aparte de la
página de tu aula está la página de descarga. Esta sección
será la página de todos sus materiales de
aprendizaje descargables como archivos PDF, notas de
conferencia, formularios,
temario y más Ah, claro, puedes colocarlo en secciones
individuales de
lecciones de video, pero es bueno
saber que hay un lugar donde tu
alumno puede ir y buscar los archivos
que necesita sin ir a todas y cada una de las
páginas de tu sitio. Entonces, agreguemos un poco de
creatividad en la siguiente lección.
11. LECCIÓN 10: encabezado de la página de descarga: Como mencioné de
la lección anterior, esta página es una de las partes más importantes de su sitio web. La página de descarga es
un lugar donde
puedes poner todos tus materiales
descargables Si tu alumno
te preguntará dónde puede descargar los archivos de tus clases
quizá hace dos meses, entonces tienes una respuesta clara
y sencilla, y es ir a
la página de descargas. Empecemos por agregar
una nueva página y
ponerle el nombre Descargar. Haga clic en Listo. Como pueden ver, hay un texto grande en
medio de la pancarta. No lo necesito porque
voy a poner un gráfico sencillo en el banner. Así que vamos a hacer clic dentro del
cuadro de texto para hacerlo activo. Luego haga clic en la tecla de escape para
seleccionar todo el cuadro de texto. Luego haga clic en el
icono de papelera para eliminarlo. Ahora que se ha ido,
asegúrate de que el banner sea un poco
más grande que nuestro tamaño predeterminado. Este debe estar configurado en
una pancarta grande. No te preocupes por cambiar el tamaño de
tu banner en cada página porque
si miras otras páginas, no afectará el tamaño
de otra página del sitio. Así que vamos a la inserción final y agreguemos un marcador Esto creará una nueva sección, pero no necesitamos
la nueva sección. Necesitamos un marcador de posición para el banner porque
vamos a agregar una imagen encima del encabezado y editarla sin
ir a otros programas Confundido. No lo seas. Déjame mostrarte cómo
puedes hacer esto. Arrastremos el marcador de posición
a la sección de encabezado. Entonces agreguemos una imagen. Tengo aquí una imagen de una barra de progreso de
descarga. Este es
más grande de lo que esperaba. Entonces solo voy a arrastrar esta forma redonda aquí para reescalar la imagen hasta que la imagen esté en su tamaño completo y
sea visible para ti Voy a hacer clic en
el icono de desrecortar aquí para centrar la imagen Haré clic afuera, luego haga
doble clic en la imagen. Esto te mostrará un control deslizante en la
esquina superior izquierda de la imagen. Este
te ayudará a cambiar el tamaño de la imagen. Puede que tengas la tentación de hacer
clic y arrastrar estos bordes, pero este no funcionará Necesitas cambiar el tamaño de la imagen a donde quieras el borde
de la barra de progreso Salga del cuadro delimitador, luego haga clic afuera y vuelva a
hacer clic en la imagen. Ahora puedes hacer clic y arrastrar
los bordes para recortar la imagen. En este ejemplo, verá que el borde superior es
más delgado que el borde inferior. Para solucionarlo, puede hacer clic en
este icono de recorte aquí. Esto te dará la oportunidad mover la imagen a su posición. Vamos a hacer clic afuera. Después
haga clic de nuevo en la imagen. Arrastre las esquinas del
cuadro delimitador para cambiar el tamaño de la imagen. Solo ten cuidado
porque esto también moverá el
tamaño vertical de la imagen. No quiero que los espacios en blanco alrededor de la imagen se
muestren en el encabezado. Bien, agreguemos un texto. Haga doble clic en el encabezado, para que aparezca el menú redondo. Haga clic en el medio
para agregar un texto. Escriba aquí los archivos de descarga. Mueve el cuadro de texto en la parte superior
de la imagen de la barra de progreso. Resaltemos el texto y
cambiemos esto a encabezados. Da click afuera para ver el
resultado con mayor claridad. No hagamos un estilo de nomenclatura
tipo camello y reemplacemos la primera letra por letras
minúsculas Vuelva a hacer clic afuera,
y eso es todo. Este es un video de dos partes. Sólo tienes que ver la primera parte. En la siguiente lección,
vamos a diseñar el layout de esta página, así que nos vemos en la siguiente película.
12. LECCIÓN 10: PÁGINA DE DESCARGA Cuerpo: Continúa con nuestra página de descargas. Agreguemos nuestra primera sección. Creo que este primero en el diseño preestablecido
va a funcionar bien. Aunque necesitamos cambiar el tamaño de
esto a una sección más pequeña. Subamos una imagen para el primer archivo de descarga que
voy a dar a mis alumnos. Y ese es un robot de tres D o cualquier tipo de objeto tres D
que forme parte de la lección. Voy a cambiar el tamaño de esta imagen porque esta página albergará
más de un archivo de descarga Así que mejor hacer cada
sección un poco más pequeña. Como pueden ver, a medida
que escala la imagen, hay columnas
en el fondo. Nuevamente, esto te ayudará a encontrar el tamaño adecuado para cualquier
elemento dentro de la sección. Lo siguiente es mover y
expandir el área de texto. Voy a añadir un título
para esta sección. Voy a escribir
en clase robot. Lo siguiente es cambiar
esto a sub rubro. Quiero agregar una descripción
a esta descarga, y como esto es solo una demo, colocaré un
grupo temporal de textos. Vayamos al generador de Lorem
Ipsum y creamos dos frases Luego haz clic en Copiar. Pero primero, debes
hacer clic en Generar. Luego haz clic en Copiar. No olvides
borrar cualquier formato porque copiaste esto
de otro sitio. Esto mantendrá la
consistencia general del diseño del sitio. ¿Bien? Entonces cambiemos
el tamaño a 12. Entonces voy a agregar
una instrucción sencilla. Obtenga sus archivos aquí. La palabra aquí será el enlace. Creo que este es el
lenguaje universal cuando se trata de esto. Para crear un enlace, primero
necesitamos resaltar la palabra aquí. Entonces déjame arrastrar el
enlace a mi Google Drive. Asegúrese de que la
configuración de uso compartido esté configurada para que cualquier persona con un enlace pueda
acceder a estos archivos. Busca los archivos que
quieres que descarguen tus alumnos. Haga clic derecho y obtenga Enlace. Nuevamente, esto es muy importante. Seguro que esto está configurado para cualquier persona con el enlace
pueda ver este archivo. Entonces copiemos el enlace y
volvamos al editor de páginas. Mientras la palabra aquí
todavía está seleccionada, haga clic en el icono de Enlace, luego pase el enlace
y luego presione Aplicar. Al mirar nuestra sección, creo que la descripción
es un poco pequeña. Creo que un texto más grande
estaría bien, como 14. Y así, no pasa
nada. Tenemos que resaltar
primero el texto y luego cambiar el tamaño. Vamos con, otra vez, 14. Después resaltemos
los subtítulos y luego pongámoslo Entonces cámbielo a 18. clic fuera de la sección, dale un poco de tiempo para que
el diseño se sincronice. Entonces vamos a previsualizar esta página. Como puedes ver, esta sección
necesita algo de espacio para respirar. Volvamos
al editor de páginas, desplácese hacia abajo hasta la sección, haga
doble clic en la página, luego elija agregar texto. Entonces vamos a arrastrar esto por aquí. Agreguemos una nueva sección. Y como ya
tenemos una sección personalizada, simplemente
dupliquemos esto y
cambiemos algunas de sus partes. Vamos a hacer clic en la imagen.
Hagámoslo otra vez. Haga clic
aquí en esta línea vertical punteada , reemplace la imagen, suba. Busquemos nuestra segunda imagen. Después cambia esto a plantilla.
Después haga clic afuera. Tienes que recordar que si duplicas la sección y también
tienes un enlace en esa
sección como este enlace aquí, es posible que quieras
cambiar el enlace si
pretendes que esto vaya
a otra página. ¿Bien? Tomemos un momento para cambiar algo
en la sección. Cambiemos la sección
de plantilla para tener un color de fondo gris. Y luego vamos a duplicar
la sección en blanco. Entonces arrástrela hasta aquí abajo. No olvides
previsualizar la página. Si experimentas
algo como esto, mi pantalla de repente deja de moverse, dale un momento para ponerse al día. Estoy, después de todo,
grabando mi pantalla mientras tres a cuatro programas están abiertos al mismo
tiempo. Ahí vas. Bien, déjame comprobarlo. De alguna manera, el espacio
no se registra correctamente. Así que volvamos
al editor de páginas. El espacio todavía está aquí. Vamos a previsualizar esto de nuevo. Bien. Ahí está. Es por eso que necesitas
previsualizar tu página, solo para asegurarte de que
tu maquetación siga ahí y que el diseño esté funcionando. Volvamos al editor de páginas y sigamos agregando
más secciones. Quiero alternar
las secciones. El primero tiene un fondo
blanco. El segundo tiene un tono
claro, y el tercero tendrá,
nuevamente, un
fondo blanco y así sucesivamente. Así que simplemente duplicaré
esta primera sección y luego arrastraré esto
hasta aquí abajo. Entonces reemplacemos la
imagen por ésta. Haga clic en la línea de tres
puntos aquí. Adelante y sube una imagen. Permítanme elegir
esta imagen aquí, luego cambiarla a video. Vista previa de la página. Se ve bien. Cierre la ventana de vista previa. Si estás satisfecho
con el resultado, creo que es el momento de
publicar la página. Vamos a hacer clic en esta publicación. Te mostrará el
antes y el después. Haz clic en publicar de nuevo,
y ya terminamos. En la siguiente lección, agreguemos un
video en cajas a la mezcla
13. PÁGINA DE VIDEOS CURADOS DE LA LECCIÓN 11: Regresa. Vamos a
crear otra página, y pongamos un nombre a este video calificado. Haga clic en Listo. Vayamos
a nuestro panel Insertar. Bajar a Layout. Sigue adelante y elige la sección preestablecida de
dos columnas. Tendrás dos marcadores de posición
para esta sección. Para la primera columna,
agreguemos un video de YouTube. Aparecerá una ventana
donde podrás pegar en un enlace desde tu propio video
de tu canal de YouTube. Déjame mostrarte un ejemplo. Este es un video de mi canal
privado de YouTube. Todo lo que necesitas hacer
es hacer clic derecho en el video y seleccionar
Copiar URL del video, y luego volver a Google
Sites, más allá del enlace. Si haces clic en Buscar, el video aparecerá incluso si tu video está
configurado como no listado Es por eso que YouTube
es la manera perfecta de
agregar videos privados a la página web de
tu salón de clases. Da click en el video.
Lo siguiente es agregar un título. Vamos a nombrar a este tiempo
Vin o barco flotante. Agreguemos otro video a
nuestro segundo marcador de posición. Simplemente vamos a repetir todo
el proceso. Haga clic en el signo más,
vaya a YouTube, busque su video y luego haga clic derecho
y copie la URL del video. Después pegarlo en.
Da click en el video. Entonces agreguemos un título, nombra este diseño de póster. Entonces agreguemos una descripción
dammi. Vamos a nuestro generador de Lorem
Ipsum, copia el texto dammi Volver al editor de páginas. No olvides borrar
ese formato de texto. Hagamos lo mismo
con la siguiente columna. Y debido a que ya
copiamos el texto ficticio, todo lo que tenemos que hacer
es pegarlo Agreguemos otra sección. Podemos ir con este preset. Tiene cuatro columnas. Se presenta en posición
horizontal. Agreguemos otro video de YouTube. Simplemente pegaré un enlace que copié de mi canal de
YouTube. Como puedes ver, este es demasiado pequeño para ser un marcador de posición de video Entonces necesitamos extender el
tamaño tirando del lado hacia la izquierda hagámoslo
en el lado siguiente. Mueva el cuadro de texto a la derecha. Ahora sabemos que el video de YouTube no encajará con
nuestro marcador Hagamos algunos ajustes. ¿Bien? Adelante y
agrega otro video. Agreguemos un título a nuestros
videos y un texto ficticio. Entonces vamos a previsualizar esta página. En la ventana de vista previa, puede ver que necesitamos agregar más espacios para cada sección. Cerremos esta ventana. Entonces agreguemos
otra sección de texto. Después arrástrelo para ir entre el encabezado y
la primera sección. Desplázate hacia abajo para que podamos cambiar el fondo de esta
sección a un gris claro. Esto romperá todo
el diseño blanco, y también agregará una separación visual de la primera
sección de video a la siguiente. Vamos a crear una sección de video
alternativa duplicando secciones y
cambiando el fondo Entonces vamos a previsualizar la página. El espacio es un poco demasiado grande. Entonces, hagamos uso del
espacio agregando un título. Voy a cerrar
esta ventana de vista previa, hacer clic en el cuadro de texto, y vamos escribir solo
con fines educativos Resalta el texto, luego
cámbialo a encabezado. Normalmente hago esto, sobre todo
si no quiero que los alumnos
compartan las lecciones en línea
u otras plataformas. Por lo que deja claro
a tus alumnos que todos los contenidos
que pones en esta página o en todo
el sitio web son privados solo para tu clase. Por supuesto,
no se puede evitar compartan estas otras
dos secciones. Dales algo
en lo que pensar. Ahora, para separar el
título a otra sección, puedes usar un divisor, seleccionar la sección de encabezado. Después en el
panel de inserción, elija divisor. Esta es solo una delgada línea entre
la primera
y la segunda sección. Vamos a hacer clic en Vista previa. A partir de ahora, creo que el diseño es
limpio y organizado. Justo aquí abajo es
un poco demasiado apretado. Desplázate de nuevo hacia arriba.
Realmente creo que necesitamos agregar un espacio
justo antes del pie de página. Así que vamos a cerrar la ventana de
vista previa. Desplázate hacia abajo hasta la última sección. Visualmente, se puede ver que
hay un espacio antes del pie de página, pero en vista previa, ese no
es el caso. Entonces solo para asegurarnos,
agreguemos una nueva sección en el medio. Haga doble clic y seleccione la
letra T en el medio. Esto agregará un espacio en blanco. Ahora, volvamos a nuestra
vista previa y veamos el resultado. Desplácese hacia abajo. Tenemos
el espacio. Eso es bueno. Volvamos a nuestro
editor de páginas y publiquemos nuestro sitio. Aquí no hay nada que hacer
porque es sólo un adelanto. Así que adelante y
haz clic en Publicar de nuevo. Y esa es una forma de crear página para todos tus videos
seleccionados Solo recuerda que
esta página está aquí para ayudar a tu alumno
con su tema. Todos sabemos que las
técnicas que enseñamos, nuestros alumnos están disponibles. Estas nuevas técnicas están
fácilmente disponibles en YouTube, Vimeo, foros y blogs, y en base a mi experiencia, aunque les
des tutoriales ya hechos
de otros profesores, ellos preferirían los
que tú mismo grabaste Tómese el tiempo para grabar sus videos, crear su propio canal de YouTube y asegurarse de que
sus videos
también sean parte de sus videos
seleccionados En la siguiente película,
exploraremos algunas ideas que puedes incluir en la construcción del sitio web de
tu aula.
14. LECCIÓN 12 JUEGOS: Hola a todos. Bienvenidos al
Capítulo tres del Discurso. En esta lección, vamos a
agregar juegos a nuestro salón de clases. Pero para que agreguemos juegos, necesitamos la ayuda
de otro sitio, y eso es wordwall.net Este es un lugar donde puedes crear tus propios recursos
didácticos. Utilizo este sitio para
crear juegos y cuestionarios que sean más divertidos y
atractivos para mis alumnos En mi panel de actividades, verás que he creado diferentes tipos de
juegos para mis alumnos. Y una de mis favoritas es
esta actividad de globo pop. Cada una de estas cartas
tiene puntos suspensivos. Si hago clic en esto, me mostrará más opciones sobre cómo puedo
compartir o modificar esta actividad. Puedo abrir esto en otra pestaña o simplemente
compartirlo con mis alumnos. Puedo establecer esto como una tarea para que pueda obtener un registro
de sus partituras,
editar mis contenidos, cambiar el nombre de este juego, duplicarlo, moverlo
a una nueva carpeta, eliminarlo,
incrustarlo en mi sitio web, o crear un código QR
para este juego. En esta lección,
vamos a usar embed porque vamos a incrustar esto
en nuestro sitio web del aula. Aquí aparecerá una ventana, podemos establecer el tipo de visualización. Un marco I mostrará
todos los detalles de este juego. La miniatura mostrará
una imagen del juego, y el pequeño icono
solo mostrará un pequeño botón Seleccionemos iFrame. Después haz clic en el botón Copiar. Entonces volvamos a nuestro sitio. Haga doble clic en el espacio en blanco
y, a continuación, seleccionemos
el icono de incrustar. Dentro del cuadro de diálogo incrustar, tiene dos opciones. Se puede pegar en la URL. Si no tienes
el código incrustado, pero tienes la URL, entonces esta opción es para ti. En esta lección,
iremos por el código embed. Vamos a pegar en el código de inserción de Wordwall luego haga clic en insertar Insertar código en Google
Sites es muy fácil, y es perfecto
para la vista de escritorio Déjame mostrarte la
desventaja de esta técnica. Vamos a obtener una vista previa de esta
ventana en una vista de escritorio. La pantalla está bien, pero si
cambiamos el tamaño de la pantalla, como en una vista de tableta, puedes ver que
el video no responde al tamaño
de la pantalla, y eso puede ser un problema, sobre todo si tu alumno
se siente más cómodo usando un dispositivo móvil
como su celular. Entonces en la próxima película, vamos a
resolver este problema.
15. LECCIÓN 13: JUEGOS RESPONSIVOS: Lección anterior,
te mostré la opción de incrustar en sitio de
Google y
aprendí que
no era tan receptiva como
pensábamos que sería. En esta lección,
vamos a hacer que el elemento receptivo sin
tocar un solo código, y eso es a través de la
ayuda de otro sitio. Así que echa un vistazo a Wordwall
y te sugiero que busques en ese sitio o revises
mis minicors Vayamos directo
a mis actividades. Cada carta de visualización aquí representa los juegos o
actividades que creas puedes modificar cada
juego haciendo clic este icono de Elipsis en la
parte inferior derecha de cada carta Esto nos
proporcionará una lista de opciones. Adelante y haz clic en Insertar. Para el tipo de
pantalla, elija iFrame. Haga clic en Copiar. No vamos a pegar esto directamente
a los sitios de Google. Vamos a pedir la
ayuda de otro sitio, y eso es embed
responsively.com Hacer que los elementos en un sitio web sean
receptivos puede ser simple, pero para aquellos que
aún no están listos para la codificación, este sitio lo ayudará a que los elementos de
su sitio
sean más receptivos. Hagamos clic en el iframe
genérico y peguemos el
código embed de Wordwall Haga clic en Insertar, desplácese hacia abajo aquí para que podamos ver
el nuevo código de inserción. También puedes ver una
vista previa aquí arriba. Pero por ahora, resaltemos los códigos y
haga clic derecho y haga clic en Copiar. Ahora que tenemos
un nuevo código de inserción, volvamos a Google Sites. Haga doble clic en la página, particularmente en el espacio vacío. Haga clic en el icono de incrustar. Aparecerá un cuadro de diálogo. Podemos incrustar a través de
URL o código incrustado, que vamos a seleccionar. Voy a pegar
el nuevo código embed
de embed responsibility.com Haga clic derecho dentro del cuadro de texto, haga clic en Pegar o Control
V. Haga clic en Siguiente Se puede ver una pequeña
vista previa, haga clic en Insertar. Entonces vamos a previsualizar nuestra página. Después, obtenga una vista previa de su
página en un dispositivo diferente. Notarás la diferencia
entre dos elementos. La primera sección
contiene un elemento sin la ayuda de
embed responsibly.com Y la segunda sección, que es más receptiva, contiene los códigos
que generamos a través de la ayuda de
embed responsibly.com Espero que aprendas algo
nuevo con esta idea. Por lo tanto, considere
los dispositivos
y los tamaños de pantalla de sus alumnos cuando diseñe su sitio.
16. LECCIÓN 14: BANCO DE LECCIONES: Esta lección, vamos a
discutir sobre el Banco de Lecciones. El Banco de Lecciones es una
página en la que alojas todas tus nuevas
lecciones en video o imágenes. Este también es un lugar para todas
tus lecciones de video actualizadas, especialmente si estás
enseñando programas de software. Por ejemplo, si hay una
nueva característica, digamos,
en Photoshop, entonces solo
tienes que copiar y pegar la nueva lección
en tu página de tema. Déjame mostrarte un ejemplo. Vamos al panel de la página. Asegúrese de que la lección esté
oculta a la navegación. Simplemente vaya a los atributos
de la página haciendo clic en el icono de puntos suspensivos y vaya a
la ocultar de la navegación Ya está oculto. Sólo quiero mostrarte donde
puedes encontrar esa opción. Tengo aquí para fines
demostrativos un conjunto de nuevas lecciones que voy a insertar en mi nueva asignatura. Estas son técnicas actualizadas
en tres D de animación. Esto también tendrá sentido, especialmente para aquellos
profesores que están enseñando programas de
software
porque cada versión
del software a veces
proporciona técnicas simples y nuevas características que no se pueden lograr de
la versión anterior. Entonces el banco de lecciones es un
lugar para nuevas técnicas, nuevos conocimientos o
nuevos descubrimientos que están relacionados con la
materia que estás enseñando. Todo lo que necesitas hacer es
copiar Control C en la PC y Comando
C para Mac. Entonces vayamos al aula
y elijamos tu tema. En mi caso, voy a
hacer click en clase de animación. Después pega en tu sección
dentro de la página de asunto. Entonces ahora, tu alumno para
este trimestre se beneficiará con
las nuevas lecciones que coloques dentro de la página de la asignatura. Bien. Esto también beneficiará a tus alumnos anteriores
porque recuerda, todavía
tienen el enlace
a la página web de tu aula. Entonces, cada vez que quieran
actualizarse o actualizarse, todo lo que necesitan hacer es ir
a tu sitio. Volvamos a
nuestro banco de lecciones. Vamos por este
con el letrero actualizado. ¿Bien? Seleccione toda la sección, Control C para copiar. Esto es para PC o
Comando C para el mapa. Y volvamos a ir a nuestra clase de animación
y pegarla aquí. Control V para PC o Comando
V para el Mac otra vez. Para el diseño de nuestra página, puedes agregar espaciado o subtítulos para separar
las secciones, por lo que no estará demasiado abarrotada. Y también le agregará un aspecto
más profesional, o le va a tener un estilo algo
moderno. Así que vamos a previsualizar la página. Desplázate hacia abajo para ver el resultado. El banco de lecciones es una parte
muy importante del sitio web de tu aula. Este es el lugar para nuestros videos
nuevos y actualizados, nuevas investigaciones y descubrimientos que podemos
compartir con nuestros alumnos.
17. LECCIÓN 15: PÁGINA DE BORRADOR: La página del borrador también debe ser parte
del sitio web de su aula. Estas páginas son páginas temporales que contienen toda la información, una actualización importante del
tema, y también todo lo que
forma su sitio web. En mi ejemplo aquí mismo hay
una nueva página de anuncios. Tiene textos copiados
del generador Lorem Ipsum, pero los subtítulos están en encabezados realmente
comprensibles Nuevamente, como ya he dicho en
las lecciones anteriores, si no estás listo para llenar
esta página con información, sugiero que uses Dammitex Como puedes ver, nuestra página de borrador está visible en nuestra barra de
navegación, y como no estamos listos para mostrar esta página a nuestros alumnos, solo
ocultemos
esto por un tiempo. Ir a los atributos de la página y ocultarlo
de la navegación. También puedes arrastrar
esto para formar parte de otra página como subpágina. Solo asegúrate,
déjame solo mostrar esto que si arrastras esto para que
sea una subpágina de un enlace
en la navegación, una subpágina de un enlace
en la navegación,
solo asegúrate de ocultarlo de la navegación porque
aparecerá en la selección Entonces nuevamente, oculta la página de una página de borrador si
no estás listo para mostrársela
a tus alumnos. Como pueden ver, lo moví fuera del grupo de
página del aula. Realmente no
importa si mueves esto siempre y cuando
organices las páginas. También puedes crear una página
oculta a la navegación que contendrá todas tus páginas de
borrador, y eso es todo. Sigue adelante y diseña el
diseño de tu nueva página.
18. PÁGINA DE ANUNCIO DE LA LECCIÓN 16: Lección anterior,
presenté una nueva página, que es el borrador de la página de
anuncio. Imaginemos que
esta página está lista y la información dentro de esta
página está lista para entrar en línea. Vamos a la esquina superior
izquierda de la página. Este icono de engranaje escribe
aquí es donde
podemos encontrar los ajustes
de nuestra barra de navegación. En la ventana de configuración,
vamos al banner de anuncio. Encendamos el banner del espectáculo y cambiemos el color
a un rojo oscuro. Aunque podrías tener la tentación de
usar este rojo brillante porque un color cálido y brillante como este realmente
puede llamar la
atención de tus alumnos Pero por ahora, vamos a
apegarnos al rojo oscuro. Te voy a mostrar por qué antes terminar esta lección. Sigamos adelante. Agreguemos un mensaje.
Las licencias de software ya están disponibles. Para la etiqueta del botón, agreguemos Get now. Y para el enlace,
escojamos la nueva página. Esta es la página del borrador del
anuncio, y quiero que esto se abra en una nueva pestaña cuando
haga clic en el botón. Y para la visibilidad, quiero que esto aparezca solo
en la página principal. Siempre se puede dejar
por defecto,
que se establece en todas las páginas. Si ha terminado, simplemente haga clic en el botón X para
salir de esta ventana. No pasará nada
porque estás dentro de la página de
anuncio del borrador. Si volvemos a la configuración
en el banner del anuncio, desplácese hacia abajo aquí para ver que la visibilidad que configuré
es solo para la página principal. Entonces, si quieres
previsualizar tu banner, solo tienes que ir a la página principal, y aparecerá
en la parte superior de la página. Como puedes ver, este fondo rojo
oscuro
producirá un texto blanco
que mejorará la legibilidad de este banner. ' s jugar con
los colores por un tiempo y explicarte por qué este es el color que prefiero para
el banner de anuncio. Cambiemos el color
a rojo brillante del que
estaba hablando antes
al ser un color tentador Y cerremos esta
ventana y veamos el resultado. ¿Ves
lo difícil que es leer el texto? Bien, cambiemos esto de
nuevo a un rojo oscuro. Cierra esta ventana luciendo bien. Vamos a previsualizar la página. Veamos esto desde
diferentes dispositivos. Vamos a probar el botón
en nuestro banner. Asegúrate de que se
abrirá en una nueva pestaña. Esto caerá bajo las preferencias
personales, si quieres que esto
se abra a una nueva pestaña o no. Y eso es todo. Nos vemos
en la siguiente lección.
19. LECCIÓN 17 DISEÑO DE SECCIONES: diseño
de la sección preestablecido es muy limitado, y a veces
necesitamos modificarlo o personalizarlo para que se ajuste a nuestras necesidades, y también aterrizará en
diferentes partes del sitio web Creo que es una buena idea
si pudiéramos tener solo una página para todos estos diseños de secciones
únicas. Empecemos por crear una nueva página y ponerle un nombre
a la disposición de la sección. Haga clic en Listo. Vamos a
ocultarlo de la navegación. Para esta página,
realmente no necesitamos un banner, así que solo voy a cambiar
esto por un título solamente. Siguiente es ir a todas y
cada una de las páginas y ver cuáles son las
secciones que modificamos. Creo que tenemos uno aquí
en la página del aula. Todo lo que tenemos que
hacer es seleccionar la sección, Control C para PC o Comando
C para que la Mac copie, luego ir a la
página de diseño de sección y simplemente pasarla. Control V para PC y
Comando V para Mac. Creo que también tenemos alguna
sección única en la página
principal. Está justo aquí abajo. Seleccionemos la sección. De nuevo, copia y ve a la
página de maquetación de sección y pegarla en. Consigamos otro
en la sección curada. Copia y agrégalo de nuevo a
la página de diseño de sección. Al recopilar todo tu diseño de
sección único en una sola página, te
ayudaremos a construir una
nueva página mucho más rápido. Esta sección
se convertirá en tu propio preset, y en ocasiones
también se alineará con el tema y la marca
de la página web de tu aula.
20. LECCIÓN 18: PREGUNTAS FRECUENTES Y ORGANIZACIÓN: ¿Cansado de las mismas preguntas que te hacen
tus alumnos una y otra vez? Crear una página de preguntas frecuentes o una página de
preguntas frecuentes ayudará no solo a ti sino también a
tus alumnos. En este ejemplo, y esto
es sólo un borrador por ahora, se
puede ver la primera pregunta. Muchas veces los alumnos me preguntan, ¿por qué tengo una calificación de cero
en algunas de mis tareas? Y mi respuesta siempre es, si no entregas o subes
tu tarea correctamente, entonces hay una gran posibilidad o posibilidad de que
tengas una calificación de cero. Las preguntas frecuentes deben ser parte
de tu orientación. Por lo que el alumno
irá allí primero si tiene alguna inquietud
con respecto a tu clase. Y si la respuesta que
buscan no está ahí, entonces ese es el momento en que se
acercan a ti o te preguntan directamente
durante la clase. O si no quieres
dar tu número personal, entonces Advoice
será una buena opción Pero eso es para otro rumbo. Y también, asegúrate de que la página o el enlace estén
visibles en la barra de navegación. Si no te gusta
la posición de las preguntas frecuentes en tu barra de navegación, todo lo que necesitas hacer es entrar
al panel de páginas y
moverlo aquí abajo. Al hacer esto, también estás
moviendo la posición de las preguntas frecuentes en la
barra de navegación. ¿Sabes qué? Déjame mover todas
las páginas ocultas aquí
abajo solo para organizarlo. Creo que es una
buena limpieza, sobre todo si pones todas las páginas ocultas
en otra página. Vamos a crear uno y ponerle un nombre
a las páginas ocultas. Haga clic en De. Ocultemos esto de la navegación y arrastremos todas las páginas ocultas para
formar parte de esa página. Acabarás con un panel de páginas limpio
y organizado.
21. LECCIÓN 19: CREA UNA SECCIÓN NUEVA: Manera de organizar tu página en el sitio de
Google es crear
una nueva sección de menú. Déjame mostrarte la diferencia entre una página y
una sección de menú. Vamos a crear una nueva página. Haga clic en el signo más. La tercera opción aquí es
la nueva sección de menú. Vamos a nombrar esta página oculta. Haga clic hecho. La diferencia
de una sección de menú con una página normal es que una página normal tiene
su propia página de destino, y una página oculta no tiene
nada más que un enlace en
la barra de navegación. Si puedes agregar una
subpágina a una página normal, entonces también puedes hacerlo en una sección de menú. Déjame mostrarte. Agreguemos un submenú
a nuestra sección de menú. Voy a arrastrar
la sección de
menú de páginas ocultas hasta aquí y arrastrar algunas de las páginas ocultas para que sean una subpágina
de esta sección. Y voy a mostrar
esto en la navegación. Y ahora tienes
esta subpágina en la barra de navegación debajo de la
nueva sección de página oculta. Bien, vamos a esconderlos de
nuevo en el panel de páginas. Sólo voy a
arrastrar el resto de las páginas ocultas a
la nueva sección, luego ocultar esta sección
de la navegación. No olvides
publicar tu sitio. Verás el borrador y la vista previa actualmente publicada. Vuelva a hacer clic en Publicar. Notarás de las lecciones
anteriores que
no hay opción para una
nueva sección de menú. Se agregó
recientemente mostrándote que Google Sites está mejorando y seguiremos actualizando para
brindarte más herramientas. Y AdTech Basics
estará aquí para
ayudarte a crear tus
próximos Google Sites
Dan Vincent Caneo, Everything starts with the basics
