Tutorial de Google Sites - COMPLETO

Bienvenido a este video, estaremos viendo Google Site para que sirve el mismo es para hacer de manera mucho más fácil un sitio web no necesitamos si queremos hacer un sitio relativamente sencillo o algo empresarial no necesitamos de Wordpress o quizás Drupal, Joomla algo así tampoco necesitamos precisamente de un hosting dominio pues Google nos lo ofrece absolutamente todo a pesar de que tiene Blogger igual ha desarrollado una plataforma para lo cual nosotros podríamos crear un sitio desde cero, es muy agradable, el interfaz, tiene plantillas absolutamente todo y de manera gratuita teniendo una vez nuestra cuenta de Gmail hemos ingresado nuestro correo electrónico e inmediatamente ha registrado Google que estoy con ese correo electrónico navegando entonces va a ser mucho más fácil para nosotros ingresar a los diferentes servicios que nos ofrece Google por lo tanto entre los servicios como el Office que tiene el correo electrónico, YouTube, absolutamente todo, igual podemos buscar acá también Google Sites y hago Enter si vemos estaría acá sites.google.com es la página oficial no ingresemos a otros sino a la página oficial, ingreso inmediatamente me lleva a este lugar, vemos que junto con esto tendríamos los otros servicios que habíamos indicado como los documentos por ejemplo acá hojas de estilos en este caso de cálculos, presentaciones tipo PowerPoint, formularios y muchas cosas más como la nube propia de Google que sería Drive voy a hacer clic afuera una vez estando en Google Sites, no olvidemos que si o si tenemos que iniciar sesión con nuestra cuenta de Gmail estando acá puedo elegir uno en blanco e ir construyendo mi propio sitio web o buscar acá una gran cantidad de plantillas que tuviésemos por ejemplo acá si quiero ver más plantillas hago clic en esta pequeña opción y ahora se desplaza con las que contamos lo mejor de todo es que son totalmente modificables cada una de estas así que no vamos a tener que rigurosamente seguir los patrones que nos dan internamente con esta opción voy a retroceder y también podría ocultar todas las plantillas vamos a crear uno de este cero o puedo acá retornar a las plantillas anteriormente ya visualizadas por ejemplo acá yo tendría algo de mi interés que sería un salón de belleza o peluquería podría elegir esto e ir eliminando todos los elementos y quedarme sólo con lo necesario vamos a crear de este cero así que voy a retornar nuevamente voy a venir y hago un clic en esta pequeña opción de más y ahora ya tendría prácticamente mi elemento una especie de lienzo en blanco para que comience ya la edición entonces el título del sitio en la parte superior voy a poner acá salón de belleza inmediatamente todas las modificaciones que voy a hacer se van a guardar pero todavía no se van a publicar hasta que yo haga acá publicar entonces básicamente me está dando una pequeña opción que serían una especie de menú en la parte superior acá el nombre del sitio y un logo acá salón de belleza ha retomado el título de todo lo que sería el sitio web la parte de acá de agregar logo puedo hacer clic y cargar un logo desde mi computadora voy a cargarlo voy a venir acá un logo que ya tengo hecho y ya estaría simplemente lo cierro e incluso podría poner un favicon para la parte superior que aparezca en ese lugar vamos a ver si me permite este formato png acá tendría el favicon muy bien voy a cerrarlo ahora con x inmediatamente lo ha retomado y lo ha puesto acá acá también el logo cuando yo ya quiero ver o tener una vista previa del mismo en la parte superior acá tendré las siguientes opciones por ejemplo directo para ver una operación atrás una operación adelante una vez que he publicado me va a aparecer el link del sitio web acá puedo agregar para que otras personas más me ayuden con el sitio hacer algunas configuraciones de la página en general y acá también similarmente historial de versiones duplicado del sitio informar de algún problema que tienen y todo eso acá también en configuración vemos cómo va a estar el menú enseguida vamos a ver para poder visualizar obtener la vista previa hago clic aquí inmediatamente toda la página ha cambiado y vemos que el logo estaría en la parte superior puedo ver en la vista previa acá pantalla grande como regularmente es un sitio web de escritorio acá hay un tablet de este tamaño o tamaño celular voy a retornar a pantalla grande y voy a cerrarlo nuevamente estoy retornando a lo que sería la configuración del sitio en esta portada por ejemplo estaría acá como dijimos la parte del logo y el nombre acá también puedo editarlo si es necesario logo logotipo de la página voy a poner salón de belleza luego podría cambiar el fondo acá la imagen y estaríamos todo esto configurando puedo hacer clic en esta pequeña opción y decir cargar o seleccionar de mi drive de mi google drive voy a decir cargar voy a buscar algo incluso ya tengo en mi google drive si no me equivoco unos fondos en este lugar y voy a optar por uno de estos y voy a decir seleccionar ahora ya está cargando ya tendríamos el mismo no tenemos por qué atenernos a un solo tipo de encabezado donde acá por ejemplo está el título si vengo a vista previa acá estaría el título el logo en la parte de acá se va a encontrar el menú y acá el título completo entonces puedo hacer algunos cambios al respecto por ejemplo en tipo de encabezado puedo venir que sea tipo portada como vemos es mucho más grande o un banner relativamente grande el banner que estamos utilizando al principio o solo me quedo con el título nada más voy a decir portada que sea mucho más grande voy a venir a vista previa y vemos que es mucho más grande ahora vamos a continuar en la parte de abajo cada que quiera agregar un elemento simplemente tengo que elegir uno y cuando yo vaya aquí en la pestaña insertar agregar cualquiera de estos se va a ir acumulando en la parte inferior tendríamos principalmente tres pestañas insertar que sería los elementos que podemos poner acá en nuestro sitio web páginas serían todas las páginas con los cuales contamos si yo vengo ahora a yoneygallardo.com por ejemplo estas son las páginas el inicio, los tutoriales tutoriales sobre audio, sobre desarrollo web y así sucesivamente al igual que servicios todas estas son páginas entonces en este sentido acá sólo tengo página principal en la parte de acá puedo seguir creando más páginas luego tendríamos la tercera pestaña que sería temas es que no suele ser simplemente el agregado de elementos sino tiene que ver una coordinación de lo que existe en cuanto a colores para que exista uniformidad de colores eso es sumamente importante más que todo para que exista una coherencia en el sitio web con el que estaríamos utilizando ahora es esto ha detectado más o menos un color similar a lo que tendríamos en el logo pero yo puedo decir que los colores importantes que resalten sean estos por ejemplo el sencillo acá para que sea más notorio, enseguida vamos a ver que los botones, líneas, márgenes todo lo que vayamos a hacer va a estar muy relacionado a este estilo y lo voy a dejar de esa forma tendríamos otros más acá pre elaborados pero vamos a elegir algo bastante sencillo entonces voy a voy a trabajar con insertar, no olvidemos que estamos trabajando dentro de la página principal voy a seguir trabajando en insertar, en página por ejemplo puede agregar otra y voy a decir nosotros haciendo alusión a la empresa, la historia de la empresa, el personal con el que cuenta, todo eso hay muchas más opciones por ejemplo una ruta personalizada de otro sitio web podría ponerlo acá pero automáticamente me lo va a crear con nosotros si simplemente pongo listo, ya estaría este sería nosotros voy a continuar trabajando en página principal, en nosotros esto simplemente es la parte de la cabecera y falta poner el contenido voy a hacer clic en página principal, no olvidamos que al igual que aquí puedo usar como página principal la nueva página, duplicar la misma ver las propiedades, agregar sus páginas, ocultar en la barra de navegación que sería en la parte superior o eliminar por ejemplo acá está página principal puedo cambiarlo y directamente poner inicio, entonces vengo acá propiedades y pongo inicio vamos a colocar nuevamente ahora sí listo, como vemos tendríamos acá inicio y luego nosotros agregamos otra página y podemos poner servicios agregamos otra página y vamos a poner productos vamos a hacer cuenta que vendemos productos de belleza y por último contactos muy bien, como vemos ya tendríamos acá este de contactos puedo arrastrarle hasta abajo y el de nosotros mucho más arriba el de productos y servicios estaría ahí el de servicios mucho más arriba y ahora vemos cómo se ha reorganizado en la parte superior el menú automáticamente me dice que estamos trabajando en contactos, voy a hacer clic en inicio para trabajar en inicio entonces ahora retorno a insertar y qué cosas puedo poner un cuadro de texto por ejemplo elijo el elemento donde yo quiero debajo del mismo colocar cualquier de estos entonces elijo esto por ejemplo cuadro de texto, hago clic en la parte inferior tendría un cuadro de texto voy a buscar un Lorem Ipsum, un texto de relleno que suelen utilizarlo especialmente en diseño gráfico y diseño web y voy a pegarlo como vemos ya tendríamos nuestro texto, si vengo acá a vista previa tendría la parte de la bienvenida y acá el texto correspondiente, voy a cerrarlo muy bien, lo interesante de acá es que al igual que bootstrap podríamos nosotros mediante rejillas ir graduando el tamaño, el ancho del mismo y el alto lógicamente se va a adaptar por ejemplo acá si solo quiero hasta la mitad hasta ahí aproximadamente como rejilla y lo mantengo luego veamos que he seleccionado esto ahora debajo de esto, si yo seleccionase esto, debajo de esto me pondría el siguiente elemento pero voy a decir debajo del texto entonces en la parte de insertar después de cuadro de texto tengo imagen puedo cargarlo desde mi computadora o seleccionar desde google drive puedo cargarlo por ejemplo y voy a poner uno bastante cómodo acá voy a elegir entre estos muy bien, el uno voy a colocarlo acá tendríamos está debajo del texto pero yo puedo arrastrarlo y adaptarlo acá vemos que lo puedo poner de esa forma como observamos si me da más la capacidad de poder alargarlo mucho mejor entonces ahí tendríamos por ejemplo podría acomodarlo esto e ir eliminando o adaptando en la parte izquierda hasta ahí por ejemplo ya tendríamos nuestro texto y nuestra imagen el texto por ejemplo si quiero una especie de título pues puedo hacerlo, recordamos que selecciono el elemento pongo cuadro de texto y acá lo puedo poner bienvenido por ejemplo una vez estando acá cada uno de los elementos cuando hacemos clic tiene su propia configuración fácil de entender por ejemplo para imagen es para recortarlo, anular en este caso el recorte que habíamos hecho para insertar un vínculo o sea un impervínculo cuando hagan clic en la imagen que les lleva a un determinado lugar eliminar esta imagen e incluso puedo reemplazar la imagen por otra cargando desde mi computadora desde google drive puedo poner un texto alternativo que generalmente solemos agregar a las imágenes propiamente eso es muy importante también para el posicionamiento web o agregar un título a la imagen estos dos no se ven están internamente estos dos para que el sistema lo lea mucho mejor entonces si hago clic en texto así de esa forma al igual que tiene opciones imágenes también el texto tiene opciones por ejemplo el texto normal me dice si es simplemente un párrafo o es un título, un encabezado, un subtítulo en este caso lo puedo poner como un encabezado puede ser una operación atrás, el que quiero como encabezado es el que dice bienvenido pongo un encabezado el tipo de letra para mantener el equilibrio, la armonía del sitio web siempre es conveniente sólo utilizar una única familia tipográfica, una sola un solo tipo de letra, no variar entre una y otra así que con esa lógica lo vamos a mantener acá el tamaño si puedo variarlo por ejemplo hasta 36 luego puedo poner al igual que existe en Word o en otros programas como en WordPress por ejemplo, puedo poner negrita, cursiva, subrayado y elegir el color del texto evitemos utilizar por los sitios profesionales, evitan utilizar todos estos tipos de cosas si quiero un texto más grande puedo ponerlo más grande, si quiero que resalte más puedo elegir otro tipo de letra o una variante pero no es muy conveniente utilizar estos luego puedo convertir este texto en un link hago clic aquí simplemente a dónde voy a vincular, a mis páginas o sitios que ya lo he creado acá en la pestaña de páginas o a otra, por ejemplo si quiero que me lleve a mi página personal generalmente el protocolo es HTTP en mi caso es con seguridad HTTPS dos puntos, dos barras inclinadas y yoneygallardo.com entonces ustedes tienen que escribir hasta acá si no tiene un protocolo de seguridad solamente HTTP y digo aplicar si vengo a vista previa cuando hago clic en la parte de bienvenido vemos que me ha llevado ya a mi sitio web voy a salir de acá no quiero que esto sea un link así que puedo seleccionarlo y acá en lugar de insertar lo que sería el vínculo puedo eliminarlo acá también si no lo ha hecho de esa manera selecciono espero que este tooltip acá me de para editar o eliminar entonces ya estaría eliminado y el color hemos dicho que tratemos de mantener uno el natural, el negro que estamos utilizando acá si necesito que esté centrado hay más opciones para eliminar todo el bloque e incluso acá para tabulaciones, tachados cosas que deberíamos tratar de evitar de colocar puedo hacer clic afuera ahora cuando vengo a vista previa ya tendríamos acá bienvenido entonces nuestro texto nuestra imagen voy a cerrarlo luego puedo seguir agregando más cosas como incorporar ya estoy de incorporar cualquier elemento externo que me permita incorporar como mapas calendarios un vídeo de youtube todo va a estar disponible si vengo por ejemplo a youtube y vengo acá a yoney gallardo por ejemplo busco algún vídeo en particular por ejemplo este de moodle hago clic con el botón derecho acá o directamente hago clic y vemos que me va a permitir directamente la url en la parte superior copiar vengo acá voy a seleccionar debajo de esto que me pueda insertar acá un elemento mediante url o mediante código cualquiera de los dos es totalmente válido por ejemplo mediante url yo ya he copiado la parte superior vengo lo pego y digo insertar ya tendría mi vídeo a través de la incorporación de elementos voy a seleccionar y eliminarlo lo mismo puede hacer acá incorporar en lugar de directamente la url podríamos acá por ejemplo compartir y me dice que esto puedo copiar o acá incorporar como vemos tendríamos acá la pequeña opción de incorporar hago clic y copio todo esto haciendo clic directamente en copiar si vengo acá incorporar código vengo aquí y digo pegar en siguiente vemos que me lleva de todas formas al mismo lugar entonces digo insertar puedo cambiar el tamaño ya tendríamos nuestro vídeo como vemos ahí bastante cómodo entonces incorporar es eso no solamente vídeos de youtube cualquier elemento externo que vayamos a necesitar y que nos permite incorporar lo vamos a utilizar esto lo voy a eliminar esto porque para que exista una coherencia o acá puedo poner voy a poner tips salón de belleza acá vamos a elegir algunos como esto por ejemplo clic con el botón derecho incluso puede hacer clic voy a copiar la parte de la url vengo y aquí voy a editarlo voy a eliminar esto voy a incorporar entonces desde acá compartir incorporar copiar vengo y lo pego y digo siguiente y ya estaría acá guardar ya tendría un elemento relacionado puedo un poquito moverlo hago clic afuera y ya tendría acá si hago vista previa vengo a la parte inferior tendría mi vídeo voy a cerrarlo aparte puedo poner elementos que tenga en mi google drive hago clic si tengo una nube por ejemplo hay diferentes elementos como imágenes puede elegir cualquiera de esos entonces por ejemplo en flor hago un clic para seleccionar y luego en la parte inferior dice insertar ya tendría acá y puedo ampliarlo lo máximo posible hasta ahí vengo otra vez a vista previa en la parte inferior ya tendría acá mi imagen, mi vídeo y mi imagen voy a retornar hay un espacio considerable en este lugar esto voy a suspender hasta donde me lo permita vamos a venir a vista previa todavía un espacio más voy a cerrarlo ahora sí podría suspender tan sólo un poco más entonces e incluso esto podría ser lo más pequeño se está suspendiendo mucho mejor muy bien lo voy a dejar así aparte de estos elementos independientes como un cuadro de texto una imagen o incorporarlo desde mi nube puedo agregar diseños pre elaborados hago clic por ejemplo en todo esto e incluso esto lo puede arrastrar la imagen y ponerlo debajo de acá que comparta o mucho más abajo o agregar un nuevo elemento acá voy a hacer aquí como hacer control z más o menos y estoy retornando debajo de esto puedo agregar diseños acá por ejemplo me dice se agrega un diseño en la parte inferior a la izquierda tendría una imagen en la parte tendría para un título y aquí tendría para un texto si hago clic puedo cargar desde mi computadora hago clic en cargar voy a seleccionar esto, la segunda imagen ya tendría acá y vamos a decir acá por ejemplo atención personalizada y acá voy a poner usted será atendido con nuestro personal altamente capacitado con toda la amabilidad de la situación muy bien ahora si vengo acá a vista previa veo que en la parte inferior ya tendría aquí atención personalizada y mi imagen y el texto voy a hacer a la vista personalizada voy a retornar y no solamente esto, veamos que nos ha dado la oportunidad de agregar una imagen en la parte izquierda, un título y un texto los demás son iguales acá por ejemplo dos imágenes su título y su texto acá tres imágenes una grande uno en la parte superior izquierda otro en la parte inferior izquierda, acá tres imágenes su título y su texto acá distribuido dos imágenes como vemos cada imagen con su título y su texto y aquí cuatro imágenes si yo agrego por ejemplo este cuatro imágenes entonces puedo hacer clic aquí y decir cargar vamos a cargar desde acá esto por ejemplo W1 hago otro clic aquí, cargar este otro, el 2, acá también cargar este elemento 3 acá similarmente el 4, muy bien ya tendría y puedo agregar un título lógicamente entonces evento puedo poner ahí no olvidemos que cada texto podemos agregar un link que nos lleve a una parte concreta de la página o a una página externa entonces pongo evento 1 aquí evento 2 evento 3 y por último evento 4 ahora voy a venir a vista previa ya en la parte inferior tendríamos acá evento 1, 2, 3 y 4 voy a cerrarlo voy a venir a la parte inferior y puedo seguir agregando, voy a seleccionar esto vemos que hay diferentes modalidades en las cuales los diseños nos va a ayudar voy a colapsarlo aquí puedo desplazarlo nuevamente y vamos a continuar con qué cosas más tendríamos acá podemos poner muchos más, voy a seleccionar para que esté debajo por ejemplo texto que se puede contraer una especie de unos tabs horizontales, hago clic acá y ahora puedo poner acá primero y en la parte su texto correspondiente, voy a buscar un lorem ipsum texto de relleno, voy a buscar una vez que cargue acá tendría voy a copiarlo voy a venir y voy a pegarlo entonces acá tendría primero y su texto correspondiente si vengo a la vista previa en la parte inferior, acá tendría primero, vemos que el texto no se ve pero cuando hago clic recién se ve voy a cerrarlo rara vez utilizamos esto de manera independiente, o sea con un solo elemento, generalmente utilizamos con muchos elementos por ejemplo acá podría duplicar esto en la parte de izquierda dice duplicar o insertar uno nuevo texto que se puede, en la parte insertar texto que se puede contraer pongo acá como título segundo y el texto de relleno lo mismo otra vez hago y voy a escribir tercero texto de relleno otra vez aquí cuarto voy a copiar acá el texto y por último tendríamos quinto, solo hasta quinto vamos a hacer y su texto muy bien ahora cuando vengo a vista previa voy a bajar acá tendríamos primero segundo tercero y así sucesivamente entonces como vemos puede servir para muchas cosas voy a cerrarlo y voy a retornar a la parte inferior después de esto tendríamos un índice, rara vez utilizamos y de hecho todos los elementos que hemos insertado puede aparecer en el índice no lo vamos a utilizar, es muy antiestético para el mismo luego si podemos utilizar un carrusel de imágenes, esto generalmente solemos ponerlo después del encabezado, si hago clic en encabezado puedo poner un carrusel de imágenes dentro del mismo puedo agregar las imágenes, subir imágenes o seleccionar imágenes de mi google drive voy a seleccionar imágenes y voy a decir las que tengo acá esto, esto todas estas voy a necesitar con la tecla acá o directamente haciendo un clic varios me ha permitido seleccionar, acá me dice que he seleccionado cinco elementos voy a decir insertar y acá tendría los cinco elementos voy a decir ahora insertar como vemos tendríamos acá voy a gastrarlo totalmente voy a tratar de colapsarlo un poco de esa forma y ahora voy a venir a vista previa y en la parte superior vemos que después del encabezado tendríamos acá un slider como vemos unas diapositivas si lo podemos llamar que van pasando y acá tendríamos estos puntos de las diapositivas entonces también es bastante cómodo, si hubiéramos utilizado también un encabezado pequeño esto se vería mucho mejor voy a cerrarlo de hecho acá no está ocupando todo el ancho, puedo hacer que ocupe todo el ancho posible simplemente selecciono el elemento y trato de que sea lo más ancho posible hasta ahí vamos a ver, no me está dejando porque hay un margen que se debe respetar vamos a dejar así de esa forma esto hemos dicho que el tipo de encabezado, si yo solamente le hago banner pequeño esto se va a ver más imponente y si sólo le digo el título nada más cuando vengo a vista previa vemos que sólo está el título y ahora esto se ve muchísimo mejor porque es un slider que va recorriendo y de hecho lo voy a dejar así me parece mucho más estético voy a cerrarlo, voy a venir a la parte inferior entonces este de casualidad de imagen es para lo mismo hay otra cosa que tenemos que sería un botón entonces hago clic en botón acá puedo ponerlo y digo contactos y acá puedo vincular a la página haciendo clic esto se desplaza y puedo vincular a la página de contactos y digo insertar acá tendría la parte de contactos, voy a hacerlo más grande y lo voy a tratar de centrar acá hay contactos, muy bien ahora incluso puedo hacerlo editando acá puedo hacer los cambios o puedo acá hacer alguna modificación como el texto lo voy a decir con relleno puede ser solamente con contorno nada más o solamente texto nada más quiero con relleno habíamos elegido el tema este color así que está con esa coherencia del color si vengo otra vez a vista previa acá retorno y veo que acá tendría contactos voy a cerrarlo lo voy a mantener así incluso puedo hacerlo un poco más pequeño luego aparte de esto de contactos e insertar puedo en este caso del botón de contactos puede insertar varios botones también una línea divisora entonces hago clic y ya me ha puesto inmediatamente una línea si yo hubiera querido después de acá una línea hago clic después de aquí una línea ahora ya lo tendríamos, similarmente después de esto otra línea ahora cuando vengo a vista previa vemos que las líneas van a estar acá aquí en este lugar también y en la parte inferior también por ejemplo acá esto existe un espacio siempre tenemos que tratar de que exista coherencia acá por ejemplo el espacio en la parte inferior no se está notando solamente en la vista previa siempre vamos a tratar de cambiar de probar así un poco más para ir viendo hasta qué punto es el mejor siempre tenemos que tener cuidado al respecto ahí por ejemplo siempre tenemos que ver si no existe un espacio muy considerable acá voy a venir y vamos a corregir siempre algún elemento que esté interfiriendo muy bien lo hemos recorrido un poco y si es necesario podemos volver a insertarlo entonces cuando venga a vista previa el título, el slider un subtítulo, texto, imagen, el vídeo correspondiente la línea de división, una imagen aquí otras también que hemos visto, imágenes varias estos elementos y la parte de un botón si yo quiero poner acá por ejemplo una línea de división después de esto antes del vídeo puedo hacerlo vengo hago clic acá todo el elemento y digo acá línea divisora entonces ya tendría una vengo y observamos acá estaría la línea divisora voy a cerrarlo qué más contamos aparte de un botón acá la línea divisora hemos dicho luego un marcado de posición, ¿para qué es este marcado de posición? las últimas maquetaciones que se suelen hacer en Photoshop, Illustrator y hace tiempo ya InDesign e incluso en las nuevas versiones de lo que es el Office de la Microsoft y mucho más se utiliza una especie de marcadores de posición eso es para hacer una tentativa del trabajo y la organización previa antes del resultado final vamos a ejemplificar por ejemplo acá en lugar acá de productos por ejemplo hago clic en productos en la parte de abajo no tenemos nada entonces yo puedo agregar acá abajo vengo a insertar y puedo comenzar a maquetar todas las cosas que van a estar predispuestas con marcadores de posición entonces aquí hago clic primero luego hago clic en marcador de posición tengo uno y digo aquí va a estar una imagen hago lo mismo otra vez clic en marcador de posición y digo acá va a estar otra imagen otra vez clic en marcador de posición y acá va a estar un texto entonces y así sucesivamente puedo ir colocando otro marcador de posición voy a decir aquí va a venir una imagen destacada otro marcador acá va a venir una imagen muy pequeña otro marcador y lo arrastro a la parte de acá voy a decir aquí va a venir una imagen y así sucesivamente como vemos estamos siguiendo maquetando en la vista previa es una especie de maca una especie de elemento previo en donde van a ir los elementos llegado el momento puedo venir y directamente agregar por ejemplo aquí había acordado que tendría tres imágenes acá una sola imagen acá una imagen y un texto y así sucesivamente entonces puedo ir agregando hago clic y digo que puedo cargar seleccionar imagen puedo poner un vídeo un calendario un mapa o cualquier elemento pueda ir agregando en estos marcadores de posición por ejemplo puedo seleccionar una imagen de las que ya tengo acá por ejemplo esta y digo insertar el segundo elemento hago lo mismo seleccionar imagen o cargar desde la computadora da lo mismo selecciono digo insertar acá similarmente digo seleccionar y voy a decir insertar y así entonces sirven para esto voy a seleccionar otro por ejemplo acá entonces para eso sirven los marcadores de posición para ir colocando elementos para que nos ayuden luego con la maquetación y posteriormente poner las imágenes finales voy a retornar a páginas y páginas de inicio entonces acá continuamos ya sabemos para qué sirve esto de a los marcadores de posición en cuanto a youtube sabemos que es muy fácil simplemente hago clic e incluso puedo buscar acá algún vídeo concretamente entonces busco algo de Johnny Gallardo por ejemplo uno de mis vídeos este último voy a agregar el que hice de Moodle veo que tengo mi vídeo así de fácil incluso puedo hacerlo más grande vengo a vista previa y en la parte inferior estaría mi vídeo entonces lo voy a dejar de esa forma incluso lo voy a eliminar y voy a volver a insertar algo relacionado con salón de belleza digo youtube salón de belleza y busco y voy a ver uno de estos muy bien así seleccionar y ya estaría como vemos incluso un vídeo adicional después de esto podría poner una línea divisora ya está y acá agregar otro vídeo de youtube salón de belleza voy a ver acá muy bien vamos a ver de corazón de y esto lo voy a arrastrar al lado y ya estaría veo que tengo dos y con la línea divisora vengo a vista previa vengo a la parte inferior y acá tendría los dos vídeos voy a cerrarlo que puedo poner aparte del de los vídeos acá un calendario tengo que tener dije desde el principio una cuenta de gmail abierto entonces esto sería el que puedo utilizar hago clic y digo insertar de los diferentes calendarios tendría que elegir por ejemplo acá qué calendario voy a utilizar aquí en configuración puedo ver también mostrar el título la fecha botones de navegación mostrar la zona horaria absolutamente todo aquí modo de vista tipo agenda tipo semana vemos cómo está diferente sabemos que todo lo que vayamos a poner nuestra agenda acá esto lo puedo arrastrar así todo lo que vayamos a poner nuestra agenda automáticamente se va a ir colocando este sería agenda de johnny gallardo entonces vengo y digo agenda google ingreso acá vemos que este es un anuncio no es en la página oficial aquí sí es google.com calendario ingreso y acá tendría mi agenda entonces todas las actividades que vaya a colocar acá conferencias seminarios cursos de capacitación para peinados salones de belleza todo automáticamente se va a venir acá entonces lo voy a dejar como está luego de poner un calendario puedo poner un mapa voy a elegir un salón de belleza en cochabamba o voy a buscar salón los espejos cochabamba vamos a ver entonces puedo buscar cualquier cosa lo voy a buscar a bill web este es un sitio de desarrollo web y digo seleccionar ya estaría el mapa también puedo hacer a lo ancho y cuando digo acá vista previa es totalmente interactivo porque es de google esto entonces puedo acercarme alejarme moverlo es totalmente interactivo muy bien voy a cerrarlo no tiene que ocupar tanto campo y de hecho esto podemos hacerle la mitad esto también la mitad y que compartan acá ambos hasta ahí para que no sea tanto y acá una línea divisora ya tendríamos acá también otra línea divisora ahora vengo a vista previa en la parte inferior acá tendríamos estamos compartiendo lo que sería el calendario y esto y la línea puedo colocar algunos elementos acá de documento hago clic aquí o aquí también abajo esto puedo eliminar porque ya tendríamos otro una línea divisora voy a agregar un documento puede ser pdf o un punto doc o doc x que corresponde a microsoft word acá por ejemplo me dice que tengo estos documentos cargado en la nube entonces cualquiera de las cosas que vaya a querer siempre tengo que ir a buscar por ejemplo acá puede ser vamos a buscar no lo tengo aquí voy a buscar en google drive aquí probablemente esté mucho más arriba acá tengo youtube, noticias, contacto, acá tengo drive entonces en google drive puedo ir subiendo documentos, textos, imágenes, audios, vídeos todo eso va a estar disponible acá en cuanto a documentos pues solamente los documentos de word que haya utilizado o pdf incluso los documentos propios no olvidemos que que tiene su propia su propia ofimática tiene a google entonces los documentos relacionados al programa documentos pues también van a estar disponibles entonces en este caso están disponibles estos documentos, estos textos y voy a hacer clic en uno de ellos y digo insertar entonces ya tendría acá inserto mi documento puedo ampliarlo, hacerlo más grande, todo eso hasta ahí si vengo a vista previa vengo a la parte inferior vemos cómo podemos navegar a través de ello, entonces puedo hacerlo más cerca, más alejado, hay seis páginas puedo ir recorriendo y revisando de esta forma hemos insertado un documento regular dentro del sitio web entonces es de esa forma como puedo insertar documentos luego puedo hacer presentaciones como powerpoint entonces también hago presentaciones ya tendría uno acá por ejemplo este o este otro puede ser este por ejemplo de abril web digo insertar y lo puedo arrastrar al lado y ahora a diferencia del documento voy a venir en vista previa en la parte inferior vemos que esto recorre de esta manera, esta presentación no es con esta pequeña opción voy recorriendo como una presentación regular como un pase de diapositivas voy a cerrar, entonces puedo poner esas cosas más luego puedo poner una hoja de cálculo voy a hacer clic aquí hoja de cálculo vemos que tendríamos acá este es de excel si no me equivoco o es propio de hoja de cálculo de lo que sería correspondiente a google cualquier es totalmente válido, entonces hago clic insertar y ya tendría acá la hoja de cálculo ya hago clic en esta pequeña opción vista previa vengo a la parte inferior y tendría acá hoja de cálculo, puedo interactuar con el mismo y de hecho aquí puedo verlo totalmente de manera independiente con esta pequeña opción vemos que ahora ya tendría hoja de cálculo completa voy a retroceder un paso atrás acá tendríamos aparte puedo poner un formulario también en google nos da la oportunidad acá de tener lo que sería no solamente lo que hemos dicho documentos, hojas de cálculo o presentaciones como diapositivas sino también nos da la oportunidad de tener formularios, entonces vamos a buscar acá formularios, acá está formularios si ingreso puedo crear una infinidad de formularios y de hecho para las clases virtuales que suele ofrecer a través de MIT suelen poner muchos formularios los profesores, estos mismos formularios podemos utilizar nosotros para nuestro sitio web muy bien entonces tengo dos formularios podemos agregar muchos más en esta pequeña opción dependiendo del tipo de formulario que queremos, las preguntas, todo eso vamos a hacer otro vídeo completo de esto entonces acá digo formularios vamos a agregar uno de estos por ejemplo el de testimonios y digo insertar ya tendríamos acá el formulario y acá en vista previa voy a venir a la parte inferior, acá tendríamos el formulario después de llenarlo podemos enviar luego aparte del mismo tendríamos por último los gráficos también los gráficos pueden ser en excel o en hoja de cálculo propiamente de google hago clic y acá tendría uno que había hecho de prueba de google utilizando las hojas de cálculo de google selecciono el documento entero digo insertar y dentro del documento hay dos gráficas voy a insertar la segunda y digo añadir, ya tendríamos acá la gráfica incluso puedo poner al lado del formulario, acá tendríamos la gráfica vengo acá a vista previa y en la parte inferior ya tendría acá esta gráfica, incluso puedo verlo completo junto con el documento voy a cerrarlo eso sería básicamente todos los elementos que podemos insertarlo en la parte de la configuración de acá del menú y puedo venir aquí a configuración y le digo en cuanto a la navegación por ejemplo que esté en la parte superior cómo se encuentra o puedo decir lateral, acá vemos que tendríamos una especie de elemento para el menú de esa forma lo voy a dejar en la parte superior, voy a venir y le voy a decir en la parte superior y también puedo hacer que no sea transparente el fondo vemos acá que es medio transparente blanco puedo decirle que sea un color blanco o negro, si lo pongo negro vemos cómo estaría ahora el sistema contraste si vengo a vista previa acá tendríamos el menú el sistema contraste y se queda permanentemente arriba es muy muy cómodo y moderno entonces básicamente tendríamos eso, imágenes de marca, los logos que estamos utilizando, herramientas de lector, los íconos de información y algo interesante sería que puedo poner un dominio personalizado, si voy a comprar un hosting o un dominio nos van a dar los dns nosotros podemos ir configurando en este lugar entonces a medida que nos vaya pidiendo cosas nosotros vamos a ir también pidiendo a nuestro proveedor de hosting y de dominio las estadísticas de nuestro sitio web van a estar aquí y si tenemos la oportunidad en este caso de Google Analytics podemos relacionarlo y lo mismo pasa con los banner de anuncios y nosotros tendríamos Google Ads nos va a dar la oportunidad de insertar propaganda en nuestro sitio para ganar dinero entonces la siguiente sería acá páginas ir uno por uno modificando las páginas insertando todas las cosas que nosotros hemos visto entonces similarmente podemos ir agregando más páginas y dentro de las páginas ir modificando una vez que hemos terminado nuestro sitio acá recién apretó publicar y me dice la dirección web que voy a poner después de esto después de toda esta url recién va a poner nuestro sitio web no olvidemos que podemos tener nuestra propia url personalizada si contratamos un servicio de dominio y hosting especialmente de dominio de alguna empresa por ejemplo de aquí a billweb.com en Cochabamba Bolivia entonces nos da la oportunidad de comprar y esta persona que nos va a atender para los dominios y todo lo demás nos va a posibilitar esa información que nos va a pedir acá entonces en mi caso puedo poner salón de belleza Bolivia me dice que está disponible y digo publicar aquí si yo no quiero que esté indexado mi sitio pues lógicamente que voy a querer si el sitio ya está terminado si voy a querer que esté indexado a todos los buscadores especialmente a google que es el que predomina por ejemplo acá solicitar a motores de búsquedas públicos que no muestren mi sitio en este caso sí lo voy a habilitar porque esto es de prueba nada más no quiero que ya aparezca este sitio esta es la url ahora de mi sitio no olvidemos todo esto hasta aquí es la url del sitio web muy bien entonces voy a poner publicar y ya estaría publicado en este momento la parte de abajo me dice que puedo ver, hago clic ya tendría mi sitio web totalmente funcional con todo lo que se puede insertar la página de nosotros servicios, productos, contactos absolutamente todo la próxima vez que quiera modificar algo simplemente lo hago y luego lo publico o sea actualizar en este momento esta página tan solo era de ejemplo así que puedo retornar a la parte principal de google sites y aquí tendría mi sitio web desde este lugar puedo eliminarlo y voy a decir mover a la papelera y nuevamente no tendría ningún sitio