Prototipando: Google Sites

Last updated 2 months ago

Prototipando: Google Sites

Bienvenido al cuarto capítulo de este módulo, donde trataré de guiarte en el uso de "Google Sites". Esta herramienta nos ayudará a visualizar nuestros prototipos en modo web. Ya sabes, seré lo más breve posible cuando se trate de conceptos, por lo que, si deseas profundizar en alguno siempre puedes visitar mi blog donde tiendo a explayarme más en el análisis de estos. De manera sencilla...

Google Sites es una herramienta gratuita que te permite crear sitios web de manera fácil y rápida, sin necesidad de conocimientos de programación. Esta te proporciona una interfaz intuitiva con plantillas predefinidas y una variedad de herramientas de diseño para que puedas crear un sitio web profesional en minutos, aunque he de decir que las web son bastante básicas, pero para prototipar nos vale.

Usualmente utilizo Google Sites cuando estoy prototipando una herramienta y quiero testear ciertas característica, o si tengo alguna idea de negocio y necesito extraer datos para validar la idea mediante una web básica.

Como comenté anteriormente, yo trabajo mucho con la suite de Google porque tiene muchas integraciones y una de ellas es Google Sites. Para ingresar solo necesitas entrar aquí con tu cuenta de Gmail. Y lo primero que verás es esto:

Empecemos...

...y de entrada te darás cuenta que es bastante minimalista. Tanto, que lo más importante está al pasar el mouse en el símbolo "+" que se encuentra en la esquina inferior derecha. Este símbolo te abrirá dos opciones: crear una nueva página o elegir una plantilla. Si le das clic directo al símbolo se creará una nueva página de manera automática. Puedes probar ambas, pero para este capítulo elegiremos "crear nueva página", representado por el icono de un lápiz.

Lo siguiente que verás es la interfaz donde podrás empezar a crear una página web:

Como puedes observar, todas las opciones están del lado derecho. Como este no es un capítulo de prototipado web, no entraremos en detalles de las herramientas. Por lo que, solo trabajaré con una en particular y es la que dice "Incorporar". Pero antes...

...para fines estéticos, pasaré el mouse por la parte gris que dice "Título de tu página" y en el lado inferior izquierdo aparecerá una opción para cambiar el tipo de portada. Yo elegiré el que dice "Solo el título".

Después procederé a borrar el "Título de tu página" dando click en la caja y selecciónando el tacho de basura que dice: "Eliminar"

Nos debe haber quedado una página totalmente en blanco. Con esta página empezaremos a trabajar en el ejemplo. Sin embargo, recalco que esto es a mi gusto y si tú deseas puedes trabajar sin hacer dichas modificaciones. Ahora sí...

Lo primero...

...vamos a preparar el código. Una particularidad de este tipo de página "No-code" es que solo puedes ingresar un lenguaje de programación y en su mayoría solo admiten HTML. Me pasa cuando quiero agregar código en páginas tipo "Wordpress" o "Google Sites".

Si ya sabes programar o vas a crear una web desde cero, entonces esta forma de prototipar no es para ti.

Entonces, lo que vamos a necesitar es que todo el códido de nuestro "reloj digital" se pase a un solo lenguaje "HTML". Como recordarás de las otras guías, nosotros teníamos tres códigos: HTML, CSS y JS por separado. Ahora le pediremos a la IA de Google que nos compile todo el código con el siguiente prompt:

Prompt de Compilación

-> Compila el HTML, CSS y JS, en un único cógido HTML para integrarlo en una web.

<!DOCTYPE html>
<html>
<head>
  <title>Reloj Analógico</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="clock">
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="center-dot"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

```css
.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  border: 5px solid #333;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  background-color: #333;
  border-radius: 5px;
}

.hour {
  width: 6px;
  height: 60px;
  margin-left: -3px;
}

.minute {
  width: 4px;
  height: 80px;
  margin-left: -2px;
}

.second {
  width: 2px;
  height: 90px;
  margin-left: -1px;
  background-color: red;
}

.center-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

```javascript
const hourHand = document.getElementById("hour");
const minuteHand = document.getElementById("minute");
const secondHand = document.getElementById("second");

function updateClock() {
  const now = new Date();
  const hours = now.getHours() % 12;
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  const hourDeg = (hours * 30) + (0.5 * minutes); // 360/12 = 30 grados por hora + 0.5 grados por minuto
  const minuteDeg = (minutes * 6) + (0.1 * seconds); // 360/60 = 6 grados por minuto + 0.1 grados por segundo
  const secondDeg = seconds * 6; // 360/60 = 6 grados por segundo

  hourHand.style.transform = `rotate(${hourDeg}deg)`;
  minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
  secondHand.style.transform = `rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
```

El resultado que nos arrojará será un solo código HTML, pero que tiene integraciones de CSS y JS para que pueda funcionar nuestro "reloj digital".

<!DOCTYPE html>
<html>
<head>
  <title>Reloj Analógico</title>
  <style>
    .clock {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #f0f0f0;
      position: relative;
      border: 5px solid #333;
    }

    .hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: 50% 100%;
      background-color: #333;
      border-radius: 5px;
    }

    .hour {
      width: 6px;
      height: 60px;
      margin-left: -3px;
    }

    .minute {
      width: 4px;
      height: 80px;
      margin-left: -2px;
    }

    .second {
      width: 2px;
      height: 90px;
      margin-left: -1px;
      background-color: red;
    }

    .center-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #333;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="center-dot"></div>
  </div>
  <script>
    const hourHand = document.getElementById("hour");
    const minuteHand = document.getElementById("minute");
    const secondHand = document.getElementById("second");

    function updateClock() {
      const now = new Date();
      const hours = now.getHours() % 12;
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const hourDeg = (hours * 30) + (0.5 * minutes); 
      const minuteDeg = (minutes * 6) + (0.1 * seconds); 
      const secondDeg = seconds * 6; 

      hourHand.style.transform = `rotate(${hourDeg}deg)`;
      minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
      secondHand.style.transform = `rotate(${secondDeg}deg)`;
    }

    setInterval(updateClock, 1000);
  </script>
</body>
</html>

Algo que debes de tener en cuenta es que, cuando quieras diseñar una herramienta o prototipo, lo primero que debes definir es si querrás que todo esté en un solo código o si deseas trabajarlo por separado.

La decisión, en mi opinión, depende de qué tanto quieras compartir los que has hecho. Por ejemplo: las herramientas que están en mi web he tenido que trabajarlas en un solo lenguaje HTML porque es lo que me permite agregar "Wordpress". Sin embargo, si estás prototipando una herramienta y solo lo quieres compartir en tu mismo equipo, no hay motivo para trabajarlo en un solo código.

Ahora sí...

...con el código compilado que nos ha generado antes la IA estamos listos para ponerlo en nuestro Google Sites. Lo primero que haremos es seleccionar la opción del lado derecho que dice "Incorporar".

Al dar click se nos abrirá una ventana con dos opciones donde marcaremos la de "Incorporar código", y en el cajón ingresaremos el código que nos generó la IA, quedándonos de la siguiente manera:

Al dar clic en "siguiente", se nos abrirá una previsualización del código insertado. Para ingresarlo en nuestra página le daremos clic en "Insertar".

Al insertar nuestro HTML lo siguiente es que lo acomodes según creas conveniente. Google Sites como tal nos da la facilidad para moverlo, cambiar el tamaño y continuar editando según creamos conveniente:

Por último, podrás ir al botón en la esquina superior derecha que dice "Publicar" para poder poner tu página en línea.

Adicionalmente, podrás dar clic en el icono con forma de "cadena" que dice "copiar vínculo" y con el link que se ha generado, podrás compartir tu página con las personas que desees y que de esta forma vean y prueben lo que has generado.

¿Qué te ha parecido? ¿Fácil? Es una forma bastante ágil y rápida de prototipar tus ideas y compartirlas, ¿no lo crees?. Considero que con esto podrías validar ideas, obtener opiniones, extraer datos, etc.

Ahora, antes de concluir con este capítulo, me gustaría comentarte algunas de las razones por las que uso "Google Sites" y que creo deberías tener en consideración:

Fácil de usar: Arrastra y suelta elementos como texto, imágenes, videos, mapas, formularios y más para crear tu sitio web. No se necesita código.
Plantillas predefinidas: Elige entre una variedad de plantillas para diferentes propósitos, como sitios web para empresas, portafolios, eventos o educativos.
Integración con Google Workspace: Inserta fácilmente documentos, hojas de cálculo, presentaciones y otros archivos de Google Drive en tu sitio web.
Diseño responsive: Tus sitios web se adaptarán automáticamente a diferentes dispositivos, como ordenadores, tablets y smartphones.
Colaboración en tiempo real: Trabaja en tu sitio web con otras personas al mismo tiempo, como lo harías con Google Docs o Slides.
Personalización: Ajusta el diseño y la apariencia de tu sitio web con opciones de personalización, como colores, fuentes e imágenes de fondo.
Gratuito: Google Sites es completamente gratuito para cualquier persona con una cuenta de Google.

Si me preguntas a mí, siempre te diré que la mejor opción es aprender más sobre Visual Studio Code, ya que te permite escalar mejor las ideas. Sin embargo, Google Sites es importantísimo cuando se trata de proponer ideas rápidas e iterar constantemente.

Ahora, esto es de momento lo que yo te muestro para hacer prototipos. Sin embargo, existen muchas más herramientas "No Code" como FlutterFlow o Bubble, que pueden ayudarte a convertir tus ideas más complejas en realidad. Hablaré de ellas después.

No olvides que tienes los "casos de uso" donde puedes guiarte y poner en práctica todo al respecto sobre lógica, comunicación y prototipado de las ideas con IA Generativa. Por ahora, eso es todo...

¡IA nos vemos pronto!

Last updated 2 months ago