Haz clic para llenar formulario (Todos los Grupos)
Conoce los Acuerdos de Académia
dESARROLLO DE MAQUETADO de la página web CON creately
En esta etapa de sexto semestre el estudiante debera aprender a construir un prototipo web funcional utilizando el ecosistema visual de Creately, mediante la incorporando componentes esenciales de navegación y contenido como textos, imágenes y botones, así mismo, aprenderá a gestionar el entorno de diseño mediante el uso avanzado de las herramientas de configuración del área de trabajo, garantizando una estructura organizada y profesional que será socializada y compartida directamente con el docente como parte de esta 1er. etapa de la evidencia de aprendizaje para esta semana.
📌El Lienzo Infinito (Workspace): Es el área central de trabajo. A diferencia de un papel fijo, este espacio se expande según tus necesidades, permitiéndote maquetar desde una simple sección hasta el mapa completo de un sitio web en una sola vista.
📌El Panel de Bibliotecas y Formas (Left Sidebar): Es tu almacén de materiales. Aquí encontrarás los Stencils de UI (botones, campos de texto, marcos de navegador e imágenes) que arrastrarás al lienzo para construir la estructura de tu página.
📌Barra de Herramientas Contextual (Floating Toolbar): Este es el componente más inteligente. Aparece solo cuando seleccionas un objeto (como un botón o un texto) y te permite cambiar instantáneamente colores, estilos de fuente, alineación y añadir enlaces.
📌Panel de Configuración del Área de Trabajo: Ubicado generalmente en los bordes de la pantalla, permite activar rejillas (grids), guías de alineación y niveles de zoom. Es la herramienta clave para que tu diseño web sea simétrico y profesional.
📌 Buscador Universal de Iconos y Multimedia: Un acceso directo integrado para importar imágenes y vectores sin salir de la plataforma. Facilita la personalización visual del prototipo con recursos gráficos de alta calidad.
📌Gestor de Capas y Páginas: Permite organizar la jerarquía de tu maquetado. Puedes crear diferentes "vistas" para simular cómo se vería tu web en un móvil frente a una computadora de escritorio.
📌Módulo de Colaboración y "Share": Situado en la esquina superior derecha, es el puente de comunicación. Desde aquí se generan los enlaces de invitación o se exporta el material final para que el profesor pueda revisar el proyecto en tiempo real.
✨ Bondades Técnicas de sus Herramientas.
Arrastrar y Soltar con Precisión: Sus bibliotecas de componentes predefinidos (barras de navegación, formularios, pies de página) permiten crear prototipos de alta fidelidad en minutos, manteniendo proporciones reales.
Conectividad Dinámica: A diferencia de un dibujo estático, Creately permite trazar flujos de usuario. Esto ayuda a los estudiantes a entender la lógica de navegación: si el usuario hace clic "aquí", ¿a dónde llega después?
Sincronización de Datos: La capacidad de añadir notas y metadatos a cada forma permite documentar el proyecto técnico (por ejemplo, especificar qué color de CSS o qué fuente se usará) dentro del mismo diagrama.
🏁 Conclusión: El Poder del Maquetado Inteligente con Creately Maquetar una página web en Creately transforma radicalmente el flujo de trabajo de un desarrollador. La mayor bondad de esta herramienta radica en su lienzo infinito e inteligente, que permite visualizar la arquitectura de la información antes de escribir una sola línea de código en HTML o CSS. Al emplear sus librerías específicas de UI Mockups, los alumnos dejan de pelear con el diseño visual para enfocarse en la usabilidad y la jerarquía, asegurando que cada botón y cada sección tengan un propósito claro para el usuario final.
🚨 A continuación, encontrarás un tablero organizado en tres pestañas con toda la información clave de esta semana: Práctica, Sube tu Archivo y Retroalimentación. 🗂️✨ Para navegar, solo debes hacer clic en cada una de ellas y explorar los materiales que he preparado para que desarrolles tu proyecto electrónico con éxito. 🖱️🚀 ¡Mucho éxito en tu creación digital! 🔥💻
En esta primera etapa, el estudiante desarrollará el diseño conceptual de su proyecto mediante la creación de un prototipo funcional en Creately. Utilizando la metodología Drag and Drop (arrastrar y soltar), integrará elementos clave como botones, cuadros de texto, imágenes y formas básicas para dar vida a la interfaz principal del sitio web o página de inicio. Este diseño servirá como base para la futura incorporación de páginas y objetos adicionales. Es indispensable compartir el producto final con el profesor para su revisión y seguimiento."
Instrucciones I: Accede al sitio web de Creately a través del enlace: https://creately.com/ con tu navegador web preferente. Al estar dentro del portal se tendrá que crear y/o asociar por necesidad de trabajo tu cuenta de correo electrónica institucional, para lograrlo tendrás que dar un clic en la parte superior derecha registrarse, tal como se observa en la ilustración inferior:
Una vez que asocies tu cuenta institucional, el frame se actualizará para permitirte la creación de contenido. En la siguiente imagen podrás observar la distribución del área de trabajo e identificar los elementos principales de Creately, tales como los menús desplegables, el catálogo de plantillas, el espacio de diseño, tu perfil y el panel de configuración.
Comienza haciendo un clic en la opción "blank", en blanco para comenzar el prototipo, esto te dará la oportunidad de trabajar ya dentro del área de trabajo con los diversos objetos que se despliegan para poder adaptar el contenido solicitado de nuestra "página de Inicio", tal como se observa en la ilustración del lado izquierdo
La imagen inferior muestra que, una vez que hayas hecho clic en el botón "Blank", se te solicitará el tipo de diagrama que realizarás para comenzar. Seleccionaremos la opción marcada en rojo; esto permitirá que el área de trabajo sea flexible para cualquier tipo de diagrama que desees crear, poniendo a tu disposición todos los objetos disponibles. }
Sera importante que después de seleccionar la opción anterior solo des clic en "Creately Workspaces", ya que en esa ruta se creara y se almacenaran los cambios del prototipo que realizaras.
A continuación se presenta la pantalla principal del sitio web, exponiendo sus principales funciones, sera importante a tí como estudiante que aprendas a identificar cada una de ellas para que desarrolles la adecuada habilidad al momento de utilizar cada una de ellas, cada uno delos componentes esta destacado con un color particular para comprender el significado de los objetos o menús, lee detenidamente y relacionalos.
Instrucciones II. Desarrollo del modelo "Página de Inicio"
1. Una vez que el profesor te mostro la forma de como darte de alta en el sitio web y de haber realizado un reconocimiento de la aplicación estarás listo paracomenzar a maquetar tu página de inicio.
2. Considera que para hacerlo deberás arrastrar diversos objetos al área de trabajo para integrar la ilustración convenida, las cuales son muy necesarias para posteriormente retomar este voceto y llevarlo para su construcción en la interfaz de Kompozer
IMPORTANTE... El prototipo se llamará “Mí Página de Inicio”, por lo que te recomiendo que para su realización identifiques los objetos que se presentan en la ilustración inferior, para que tú mismo logres crear el concepto de diseño en la Interfaz de Komopozer y te familiarices con la inserción de los objetos, por otro lado, se te recomienda que los tipos de colores y fuentes, así como el color de fondo del proyecto están totalmente a tu cargo, es decir a tu propio gusto, con la finalidad de que logres diferenciar tu prototipo con respecto a los demás compañeros de clase, finalizo que es imperativo que tú compartas el enlace del trabajo efectuado a traves de este sitio web en la sección "Sube tu Archivo", a continuaión se te presenta la ilustración del como se debe construir el prototipo, observalo y analizalo de manera detenida para hacerlo.
NOTA: Considera la constante y correcta alineación de cada uno de los componentes que se presentan en el prototipo, tendras que lograr cierta habilidad con el mouse para que logres ajustar los tamaños correctos, asi mismo, sera muy bueno que utilices la herramienta de zoom para que logres ampliar el área de trabajo y manipules de manera eficiente.
