Embedded Files
INTRODUCCIÓN A Adobe Dreamweaver CON APOYO DE IA
INTRODUCCIÓN A Adobe Dreamweaver CON APOYO DE IA
Paso 1: Configurar el sitio en Dreamweaver
Paso 1: Configurar el sitio en Dreamweaver
Lo primero que debes hacer es decirle a Dreamweaver dónde se guardarán todos los archivos de tu proyecto (HTML, CSS, JavaScript, imágenes, etc.).
Abre Dreamweaver.
Ve a Sitio > Nuevo sitio.
En la ventana que se abre, dale un nombre a tu sitio, por ejemplo, "Revista Digital de Diseño".
En la opción Carpeta de sitio local, haz clic en el icono de la carpeta y selecciona la carpeta donde has guardado (o guardarás) todos tus archivos. Es fundamental que crees una carpeta principal para todo tu proyecto.
Haz clic en Guardar.
Una vez configurado, Dreamweaver creará una estructura de archivos en el panel de Archivos, lo que te ayudará a mantener todo organizado.
Paso 2: Crear los archivos HTML, CSS y JavaScript
Paso 2: Crear los archivos HTML, CSS y JavaScript
Ahora que tienes el sitio configurado, es hora de crear los archivos que contendrán el código.
Crear el archivo HTML:
Ve a Archivo > Nuevo.
Selecciona Tipo de documento: HTML.
Haz clic en Crear.
Guarda el archivo en la carpeta de tu sitio con el nombre index.html (es el nombre estándar para la página de inicio).
Crear el archivo CSS:
Ve a Archivo > Nuevo.
Selecciona Tipo de documento: CSS.
Haz clic en Crear.
Guarda el archivo en la misma carpeta que el HTML con el nombre style.css.
Crear el archivo JavaScript:
Ve a Archivo > Nuevo.
Selecciona Tipo de documento: JavaScript.
Haz clic en Crear.
Guarda el archivo con el nombre script.js.
Paso 3: Pegar y editar los códigos
Paso 3: Pegar y editar los códigos
Ahora que tienes los archivos vacíos, puedes copiar y pegar los códigos generados por IA.
Abre el archivo index.html que creaste.
Copia el código HTML completo y pégalo en la ventana de código de Dreamweaver.
Abre el archivo style.css.
Copia el código CSS y pégalo.
Abre el archivo script.js.
Copia el código JavaScript y pégalo.
Paso 4: Vincular los archivos
Paso 4: Vincular los archivos
Este es un paso crucial. Debes asegurarte de que tu archivo HTML "sepa" dónde están los archivos CSS y JavaScript para poder aplicarlos.
En el archivo index.html, busca la etiqueta <head>.
Asegúrate de que la línea para vincular el CSS sea la correcta:
HTML
<link rel="stylesheet" href="style.css">
Si tu archivo CSS se llama diferente o está en una subcarpeta (por ejemplo, css/style.css), asegúrate de que la ruta coincida.
Ahora, busca el final de tu código HTML, justo antes de la etiqueta de cierre </body>.
Asegúrate de que la línea para vincular el JavaScript sea correcta:
HTML
<script src="script.js"></script>
Paso 5: Previsualizar y depurar
Paso 5: Previsualizar y depurar
Dreamweaver te permite ver cómo se ve tu página en tiempo real y corregir posibles errores.
Con el archivo index.html abierto, haz clic en el botón Vista en directo o Vista previa en navegador para ver cómo se renderiza tu sitio.
Si los estilos o las interacciones no funcionan, revisa los siguientes puntos:
Nombres de archivos: ¿Escribiste correctamente los nombres de los archivos en las etiquetas <link> y <script>? Por ejemplo, si tu archivo se llama Style.css con "S" mayúscula, asegúrate de que la etiqueta lo refleje.
Ubicación de archivos: ¿Están todos los archivos (HTML, CSS y JS) en la misma carpeta? Si no es así, revisa que las rutas en los enlaces sean correctas.
Siguiendo estos pasos, podrás tener tu sitio web de revista digital funcionando. Dreamweaver te facilitará el trabajo de organizar los archivos y previsualizar los cambios de forma instantánea.
usamos PLANTILLAs EN ADOBE DREAMWEAVER
usamos PLANTILLAs EN ADOBE DREAMWEAVER
En esta actividad, vamos a utilizar una plantilla web profesional para crear la base de tu sitio. Sigue estos pasos para aprender a editar, optimizar y adaptar la plantilla a tu proyecto.
Paso 1: Descargar y configurar la plantilla
Paso 1: Descargar y configurar la plantilla
Lo primero es conseguir la plantilla y decirle a Dreamweaver dónde se encuentra.
Descarga la plantilla: Ve a la web de HTML5 UP y elige la plantilla que más te guste. Descárgala y descomprime el archivo ZIP en una carpeta en tu computadora.
Configura el sitio en Dreamweaver:
Abre Dreamweaver.
Ve a Sitio > Nuevo sitio.
Dale un nombre a tu sitio, por ejemplo, "Revista Digital".
En la opción Carpeta de sitio local, haz clic en el ícono de la carpeta y selecciona la carpeta que acabas de descomprimir.
Haz clic en Guardar.
Una vez configurado, Dreamweaver creará una estructura de archivos en el panel de Archivos. Esto te ayudará a mantener todo organizado.
Paso 2: Explorar y editar el contenido
Paso 2: Explorar y editar el contenido
Ahora vamos a explorar la estructura de la plantilla y a personalizar su contenido.
Explora la estructura de la plantilla:
Verás una estructura de carpetas y archivos en el panel de Archivos de Dreamweaver.
El archivo index.html es el documento principal.
La carpeta assets/css contiene las hojas de estilo.
La carpeta images guarda todas las imágenes de la plantilla.
La carpeta js contiene los archivos de JavaScript que dan interactividad.
Edita el contenido:
Abre el archivo index.html.
Usa la Vista en vivo de Dreamweaver para hacer clic en cualquier texto de la plantilla y edítalo directamente con el contenido de tu revista.
Si quieres ver el código al mismo tiempo, usa la Vista dividida. Esto te permite ver el código HTML y los cambios en vivo en la misma pantalla.
Paso 3: Asistencia de la Inteligencia Artificial
Paso 3: Asistencia de la Inteligencia Artificial
Usa herramientas de IA para optimizar tu trabajo.
Optimización de textos:
Si necesitas reescribir un título o generar un nuevo párrafo, puedes usar una herramienta de IA.
Copia el texto de la plantilla y pégalo en Gemini o ChatGPT con una instrucción como: "Adapta este texto para una revista digital de diseño".
Generación de código (opcional):
También puedes pedirle a la IA que te genere un fragmento de código simple.
Por ejemplo, pídele: "Genera el código HTML para un botón con el texto 'Más información'". Luego, copia y pega el código en tu archivo index.html.
Paso 4: Optimización e inserción de imágenes
Paso 4: Optimización e inserción de imágenes
Es fundamental que tus imágenes estén optimizadas para que la web cargue rápido.
Optimiza tus imágenes:
En Photoshop, abre las imágenes de tu revista.
Tamaño: Ajústalas a un tamaño web (por ejemplo, 1920px de ancho máximo) para que no sean archivos gigantes.
Resolución: La web solo necesita 72 ppi. Una resolución mayor solo aumenta el peso del archivo sin mejorar la calidad visual.
Formato: Guarda las imágenes como JPEG para fotos o PNG si necesitan transparencia.
Inserta las imágenes:
Guarda las imágenes optimizadas en la carpeta images de tu plantilla.
En el código HTML, busca la etiqueta <img> y cambia la ruta (src) para que apunte a tu nueva imagen.
Ejemplo: <img src="images/foto-revista.jpg" alt="Portada de la revista">
Paso 5: Creación de botones y enlaces
Paso 5: Creación de botones y enlaces
Aprende a crear hipervínculos para navegar en tu web.
Botones y enlaces:
La etiqueta <a> es la que se usa para crear hipervínculos.
Busca un botón en tu plantilla. Su código será algo parecido a: <a href="#nombre-seccion" class="button">Ver más</a>.
Cambia el valor del atributo href para que el botón enlace a otra página o a un sitio externo (ejemplo: <a href="https://ejemplo.com">Visitar web</a>).
Paso 6: Previsualizar y depurar
Paso 6: Previsualizar y depurar
Dreamweaver te permite ver el resultado y corregir errores.
Vista previa:
Con el archivo index.html abierto, haz clic en el botón Vista en directo o Vista previa en navegador para ver tu sitio.
Revisa los errores más comunes:
Nombres de archivos: ¿Los escribiste exactamente igual en el código y en tus carpetas? (Las mayúsculas y minúsculas importan).
Ubicación: ¿Están todos los archivos en la carpeta correcta y las rutas de enlace son adecuadas?
Adaptando tu sitio con adobe Dreamweaver
Adaptando tu sitio con adobe Dreamweaver
En esta actividad, vamos a optimizar la plantilla que editaste en la clase anterior para que se vea perfecta en cualquier pantalla. El objetivo es que aprendas a usar las herramientas de Dreamweaver para trabajar con diseño responsive de manera visual y práctica.
Paso 1: Abrir tu proyecto
Paso 1: Abrir tu proyecto
Abre el archivo index.html de la revista que creaste en la clase anterior. Asegúrate de que tu sitio esté correctamente configurado en Dreamweaver para que todos los archivos (HTML, CSS, imágenes) estén vinculados.
Paso 2: Usar las herramientas de vista previa
Paso 2: Usar las herramientas de vista previa
Dreamweaver tiene herramientas integradas que te permiten ver cómo se adapta tu diseño en diferentes dispositivos.
Asegúrate de estar en la Vista de diseño o Vista en vivo.
En la parte superior de tu ventana de trabajo, encontrarás una barra con iconos de dispositivos. .
Haz clic en los íconos de computadora, tableta y teléfono celular para ver instantáneamente cómo tu diseño cambia en cada tamaño de pantalla. Esto te ayuda a identificar rápidamente dónde necesitas hacer ajustes.
Paso 3: Identificar y modificar las Media Queries
Paso 3: Identificar y modificar las Media Queries
Ahora que sabes qué partes de tu diseño necesitan mejorar, es momento de usar las Media Queries.
Abre el archivo CSS de tu plantilla. Generalmente, se encuentra en una carpeta llamada assets/css o simplemente css.
Desplázate hasta el final del archivo. Las plantillas profesionales suelen colocar las Media Queries al final para anular los estilos predeterminados.
Busca los bloques de código que comienzan con @media. Estos bloques contienen las reglas de CSS que se aplican solo a ciertos tamaños de pantalla. Por ejemplo, verás algo como @media screen and (max-width: 768px).
Haz un cambio simple: Dentro de uno de estos bloques @media, haz una modificación. Por ejemplo, cambia el tamaño de la fuente de un título (font-size) o el margen de un contenedor (margin).
Observa el resultado: Vuelve a tu archivo HTML y cambia el tamaño de la pantalla usando la barra de vista previa de Dreamweaver. Verás cómo tu cambio en el código CSS se aplica solo cuando el diseño alcanza el tamaño de pantalla que especificaste en la Media Query.
Consejos adicionales:
Consejos adicionales:
No tengas miedo de experimentar. Cambia colores, tamaños de fuente y márgenes dentro de las Media Queries para ver cómo se comporta tu diseño.
La Vista dividida es tu mejor amiga. Te permite ver el código y el diseño al mismo tiempo, facilitando la depuración y la comprensión de lo que estás haciendo.
Recuerda la jerarquía. Los estilos que pongas dentro de un bloque @media anularán a los estilos generales que están fuera de él.
Introducción Intensiva a Figma para Diseñadores
Introducción Intensiva a Figma para Diseñadores
Objetivo: Comprender la interfaz, aplicar principios de sistemas de diseño básicos (colores, tipografía, componentes) y crear un prototipo simple de una interfaz de aplicación móvil.
parte 1: Conoce el Entorno Figma
parte 1: Conoce el Entorno Figma
1. La Interfaz y las Secciones Clave
1. La Interfaz y las Secciones Clave
Al abrir Figma, verás tres secciones principales:
A. Capas (Izquierda)
Descripción: Muestra la estructura jerárquica de tu diseño.
Foco UI/UX: Organización impecable: nombra tus capas y componentes.
B. Lienzo (Centro)
Descripción: El área de trabajo principal.
Foco UI/UX: Aquí diseñarás las pantallas (Frames).
C. Propiedades (Derecha)
Descripción: El panel de inspector. Cambia colores, tamaños, efectos, y gestiona el prototipado.
Foco UI/UX: El Panel de Diseño (pestaña Design) y el Panel de Prototipo (pestaña Prototype) son tus mejores amigos.
2. El Concepto Clave: El Frame (Marco)
2. El Concepto Clave: El Frame (Marco)
Diferencia fundamental con otras herramientas: En Figma, no usas "Mesas de trabajo", usas Frames (Marcos).
Frame (Atajo: F): Representa una pantalla, una sección, o un contenedor. Siempre debe ser tu elemento base al comenzar un nuevo diseño de UI.
Rectangle (Atajo: R): Es solo una forma geométrica para elementos internos (botones, tarjetas, fondos).
Primer Paso: Crea un nuevo Frame (F). En el panel de Propiedades (derecha), selecciona la plantilla Phone → iPhone 14 / 15.
3. Herramientas Esenciales
3. Herramientas Esenciales
Frame (F): Crea pantallas y contenedores principales.
Rectangle (R): Crea formas simples.
Text (T): Añade bloques de texto.
Pen Tool (P): Crea formas vectoriales personalizadas (similar a Illustrator).
Hand Tool (H): Mueve el lienzo (similar a la barra espaciadora en Adobe).
parte 2: Construyendo la Interfaz
parte 2: Construyendo la Interfaz
El diseño gráfico moderno para UI se basa en la reutilización y la consistencia. Aquí te centrarás en la eficiencia.
1. Define tus Estilos (La Base del Design System)
1. Define tus Estilos (La Base del Design System)
En el panel de propiedades (derecha), con nada seleccionado en el lienzo, verás las opciones para crear estilos:
A. Estilos de Color
En la sección Color Styles, haz clic en +.
Define al menos estos colores (usa valores hexadecimales o RGB que te gusten):
Color/Primary (El color principal de tu marca).
Color/Secondary (Color de acento o de acción secundaria).
Color/Background (Un blanco suave o gris claro).
Color/Text-Dark (Texto principal).
Color/Success (Verde para estados de éxito).
B. Estilos de Texto
Crea una capa de texto (T).
Dale formato (Fuente, tamaño, peso, etc.).
En la sección Text del Panel de Propiedades, haz clic en el icono de los 4 puntos para crear un nuevo estilo.
Define al menos tres estilos:
Type/H1 (Título de pantalla, ej. 24pt, SemiBold).
Type/Body (Párrafos, ej. 16pt, Regular).
Type/Caption (Texto pequeño/legal, ej. 12pt, Regular).
2. Creación de Componentes Reutilizables
2. Creación de Componentes Reutilizables
Los componentes son el corazón de la eficiencia en Figma. Una vez que creas un Componente Principal, todas las Instancias (copias) que uses se actualizarán automáticamente si modificas el principal.
A. El Botón Primario
Crea un Frame (F). No un rectángulo. Este Frame será tu botón.
Dentro del Frame, añade una capa de Texto (T) con el texto "Continuar".
Selecciona el texto y el Frame del botón. Usa Auto Layout (Atajo: Shift + A). Auto Layout es crucial para la adaptabilidad de la UI.
Aplica el Color/Primary como relleno al Frame.
Añade un Corner Radius (radio de esquina) de 8px.
Ajusta el relleno (Padding) de Auto Layout (ej. 16px horizontal, 12px vertical).
Selecciona el Frame del botón y haz clic en el icono "Crear Componente" (rombo en el menú superior) (Atajo: Ctrl + Alt + K / Cmd + Alt + K).
Nómbralo Component/Button-Primary.
¡Prueba! Copia (Ctrl+D) varias instancias de este botón. Cambia el color del Componente Principal para ver cómo se actualizan todas las instancias.
3. Layout y Adaptabilidad (Constraints)
3. Layout y Adaptabilidad (Constraints)
Layout Grids: Aplica una Layout Grid (cuadrícula) a tu Frame de iPhone (Panel de Propiedades > Layout Grid > +). Usa una cuadrícula de 12 columnas con margen de 16px para alinear los elementos como un desarrollador.
Constraints (Restricciones): Define cómo se comportan los elementos dentro de su Frame al cambiar su tamaño.
Los botones deben ser Left & Right (para que se expandan).
Las barras de navegación deben ser Top, Left & Right.
parte 3: Prototipado Simple y Flujo
parte 3: Prototipado Simple y Flujo
El prototipado convierte tu diseño estático en una experiencia interactiva.
1. El Flujo Básico
1. El Flujo Básico
Duplica el Frame de Inicio: Crea al menos 3 pantallas (Frames) para tu app. Ej:
01-Splash
02-Login
03-Home
Activa el Modo Prototipo: Selecciona la pestaña Prototype en el Panel de Propiedades (Derecha).
Define el Punto de Inicio: Selecciona el Frame 01-Splash y arrastra el pequeño conector al Frame 02-Login. Este será el primer flujo.
2. Conexiones Interactivas
2. Conexiones Interactivas
Para que un elemento navegue a otra pantalla, debes crear una conexión desde el elemento.
Selecciona tu botón (Component/Button-Primary) en el Frame 02-Login.
En el panel Prototype, haz clic en + junto a Interactions.
Trigger (Disparador): Selecciona On Click (Al hacer clic).
Action (Acción): Selecciona Maps To (Navegar a).
Target (Destino): Elige el Frame 03-Home.
Animation (Animación):
Comienza con Instant.
Para un toque más profesional, prueba Smart Animate (Animación Inteligente). Figma intentará animar las capas con el mismo nombre y posición similar entre las dos pantallas.
3. Visualiza tu Resultado
3. Visualiza tu Resultado
Selecciona el Frame de inicio (ej. 01-Splash).
Haz clic en el icono Present (el triángulo de "Play") en la esquina superior derecha. Se abrirá una nueva pestaña con tu prototipo interactivo.
Haz clic en los elementos que has conectado para probar la navegación.
Actividad Práctica
Actividad Práctica
Construye un Flujo de Pantalla de Perfil.
Tu Tarea: Usando los estilos de color, estilos de texto y el componente de botón que creaste, diseña el siguiente flujo de tres pantallas en un nuevo archivo Figma:
01-Inicio (Splash Screen): Un Frame con tu logo y tu Component/Button-Primary ("Empezar").
02-Perfil (Profile Screen): Una pantalla de perfil simple que contenga:
Una imagen de avatar circular.
El título de la pantalla (Type/H1) "Mi Perfil".
Un listado de 3 ítems de menú (ej. "Ajustes", "Historial de Pedidos") con texto Type/Body.
Un botón de Cerrar Sesión (Crea un nuevo componente llamado Component/Button-Secondary que use tu Color/Secondary).
03-Ajustes (Settings Screen): Una pantalla simple que solo tenga un texto Type/H1 "Ajustes" y un icono de "Atrás" que te lleve de regreso a la pantalla 02-Perfil.
Prototipado Requerido:
Conecta el botón "Empezar" de 01-Inicio a 02-Perfil.
Conecta el elemento "Ajustes" en 02-Perfil a 03-Ajustes.
Conecta el icono "Atrás" en 03-Ajustes a 02-Perfil.
Próximos Pasos (Para Profundizar)
Próximos Pasos (Para Profundizar)
¡Felicidades! Has cubierto los fundamentos del diseño de UI y el prototipado en Figma. Si deseas llevar tus habilidades al siguiente nivel, te recomiendo estudiar estos temas con los videos del canal Estudiando UX:
Variables y Modos: Cómo crear temas claros/oscuros y cambiar textos dinámicamente.
Propiedades de Componentes: Usar Variants (Variantes) para crear un solo componente que pueda ser de tipo "Primario", "Secundario" o "Deshabilitado".
Auto Layout Avanzado: Controlar el crecimiento de elementos con Fill Container (Llenar Contenedor) y Hug Contents (Abrazar Contenido).
Estudiando UX (Canal de YouTube)
Page updated
Report abuse