6.2: Sitios de Google
- Page ID
- 154279
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Objetivos de aprendizaje
- Crear un prototipo de sitio web que funcione
- Crear y personalizar un sitio web en la nube
- Desarrollar un sitio web con buena usabilidad
- Integrar texto y gráficos
- Integrar otros servicios en la nube
- Combina colores, logotipos, fuentes y otros elementos de diseño con la aplicación de tu iPhone
- Agregar y modificar botones de navegación
Ahora es el momento de construir nuestra tienda. Te guiaremos a través de algunos de los aspectos de la creación de páginas. Comenzaremos discutiendo plantillas y temas.
Obtener una cuenta de Google
Google Sites permite a los usuarios construir un sitio web en la nube usando solo un navegador web. El editor del sitio así como todo el contenido vive en la nube en los servidores de Google. Google Sites es gratuito para los titulares de cuentas de Gmail. Regístrate para obtener una cuenta de Gmail si aún no tienes una.
Sitios de inicio
Sitios se encuentra bajo el menú Más de tu cuenta de Gmail. Debe elegir un nombre de sitio único. Una forma de hacerlo único es agregar tu nombre de usuario de Gmail como prefijo o sufijo al nombre de tu sitio, por ejemplo, FrostCoolApp o CoolAppFrost.
Elija una plantilla de sitio = Páginas y temas preconstruidos
Una plantilla de sitio es un sitio preconstruido con texto e imágenes de marcador de posición lorem ipsum (galimatías latinas). Cada página ya está trazada. Por ejemplo, la plantilla Familia tiene Blog familiar, Calendario familiar, Mapa familiar, etc. Los usuarios de la plantilla simplemente intercambian su propio contenido.
Se proporcionan plantillas de sitio para diferentes tipos de aplicaciones, como un aula o una pequeña empresa. Si bien algunas de las plantillas son bastante resbaladizas, comenzaremos con la plantilla Blank para poder aprender Google Sites. La plantilla Blank contiene solo una página de inicio con un tema simple. Agrega páginas a la plantilla Blank según sea necesario.
Elegir un tema = Diseño y formato
El tema es similar a un tema en PowerPoint. Cada página del sitio deriva su apariencia, diseño, colores, fuentes, etc. del tema. Debe elegir un tema de la misma familia que el sitio web de Class Store ya que su sitio es parte de la tienda. Es más fácil elegir un Tema cuando creas el sitio pero puedes cambiarlo más tarde accediendo a:
Más acciones > Administrar sitio > Temas
<< Volver al sitio
La pantalla de apertura de Google Sites te permite elegir una plantilla, nombre para tu sitio y un tema. Para nuestros propósitos nos quedaremos con la plantilla Blank para que aprendamos a construir un sitio desde cero.
Google Sites: Administración
Las plantillas y temas incorporados son un buen comienzo. Sin embargo, querrás controlar la apariencia del sitio para que coincida con tus estándares corporativos y la marca.
Ajusta el tema
Si bien el tema es un buen comienzo, es posible que desee modificar el tema en su sitio tanto como podría modificar la Diapositiva maestra en PowerPoint. Modificar elementos como el encabezado y la barra lateral, que se muestran en cada página. Modifique los colores de fondo y las fuentes para las diferentes regiones de la página si es necesario.
Más acciones > Administrar sitio
> Configuración del sitio > General > Nombre del sitio... > Guardar cambios
> Apariencia del sitio > Diseño del sitio... > Guardar cambios
> Apariencia del sitio > Colores y fuentes
<< Volver al sitio
Capas en una página
Cuando se trabaja con colores y fuentes es útil entender que una página web se compone de una serie de capas apiladas una encima de la otra. Aquí está el orden de las capas comenzando con el Fondo de Página en la parte inferior.
- Fondo de la página
- Envoltura de página
- Antecedentes de contenido
- Contenido
Crear páginas a partir de plantillas de página
Google Sites se construyó para apoyar la colaboración en grupos de trabajo. Por lo tanto, tiene algunas plantillas de página interactivas preconstruidas (Anuncios, Archivador y Lista). Probablemente te quedarás con la simple plantilla de página web para la mayoría de las páginas. Desafortunadamente, incluso esta plantilla a veces permite al usuario adjuntar archivos y publicar comentarios en páginas individuales. Tendrá que desactivar esta función como se describe a continuación.
Seleccione la plantilla para la página. Más acciones > Cambiar plantilla de página
- Página Web (elija esta para la mayoría de las páginas)
- Anuncios (anuncios al equipo)
- Archivador (si quieres que los usuarios puedan subir archivos)
- Lista (mantener listas de tareas para un sitio web de grupo de trabajo)
Eliminar archivos adjuntos y comentarios de los usuarios
- Más acciones > Configuración de página
Seleccionar diseño para cada página
En modo de edición se puede editar el área de contenido de cada página. En nuestra experiencia, el diseño se controla mejor insertando tablas para contener el contenido.
El menú Administrar sitio tiene potentes opciones que controlan la apariencia del sitio. Los cambios realizados desde este menú afectan a todas las páginas del sitio.
Sitios de Google: texto, gráficos, video y gadgets
Agregar texto
Añadir texto a las páginas. Sea consistente en el formateo en todo el sitio. Elija los estilos de encabezados apropiados. Elija los tamaños de fuente apropiados si es necesario.
Agregar imágenes
Antes de poder agregar imágenes necesitas guardarlas y preparar un lugar en la página para recibir las imágenes. Al usar imágenes desde la aplicación de tu iPhone puedes guardarlas de dos maneras. Puede hacer clic derecho sobre la imagen y guardarla como archivo PNG. (Puede que tengas que agruparlo primero). Alternativamente, puedes tomar capturas de pantalla de tu aplicación.
Para preparar la página para recibir imágenes, inserte una tabla para recibir las imágenes. Después Insertar > Imagen. Cambie el tamaño y alinee las imágenes en sus celdas de tabla según sea necesario.
Insertar Gadgets
Los gadgets pueden agregar una funcionalidad tremenda a una página. Utilizaremos un gadget que capture la información de los clientes para los clientes que se registren para recibir actualizaciones de productos. El gadget es un formulario que guarda en una hoja de cálculo de Google Docs. Google Docs es otro servicio gratuito de Google que te permite almacenar y colaborar en documentos en la nube. Accede a Google Docs haciendo clic en el enlace Documentos en la parte superior de tu cuenta de Gmail. Crea y guarda un Formulario en Google Docs. Documentos > Crear > Formulario. Después inserta el Formulario en tu página web. Editar página > Insertar > Formulario de hoja de cálculo. Para probar, intente visitar la página y rellenar el formulario con algunos datos de prueba. Después regresa a Google Docs para ver la hoja de cálculo de los clientes.
Hay muchos otros gadgets disponibles en el menú Editar página, incluida la posibilidad de incrustar videos de YouTube.
El menú Insertar se utiliza para insertar imágenes y gadgets. Si recibe el siguiente mensaje de error al insertar un gadget, responda NO, de lo contrario, solo obtendrá una parte del gadget, la parte que se puede entregar de forma segura.
Claves para llevar
- Google Sites intenta simplificar el proceso de desarrollo al proporcionar plantillas prediseñadas para diferentes negocios y temas para controlar el aspecto general.
- Los gadgets son para Google Sites qué aplicaciones son para el iPhone.
- Puede realizar la mayoría de las operaciones en Google Sites sin escribir una sola línea de código HTML.
Preguntas y ejercicios
- ¿De qué manera Google Sites es similar a un procesador de textos? ¿De qué manera es diferente?
- ¿Qué elementos repetidos del tema de la tienda se requieren para que tu página parezca parte de la tienda? Explique.