En un mundo digital en continua evolución, el dominio del diseño de interfaces se ha convertido en una habilidad crucial para quienes buscan liderar en la creación de proyectos web y aplicaciones móviles atrayentes y funcionales. El curso «Master en Diseño de Interface en Proyectos Web, APPs: Especialidad en Sketch y Marvel» ofrece una formación integral en las últimas técnicas y herramientas esenciales del diseño digital. Desde los fundamentos de Adobe Photoshop CC para la composición visual hasta el diseño web profesional con Dreamweaver CC, este programa cubre aspectos vitales para el desarrollo web moderno. Además, se profundiza en el diseño responsivo, adaptando contenidos a dispositivos móviles a través de HTML5, CSS3 y JavaScript, habilidades demandadas en el mercado laboral actual.
Las interfaces intuitivas y la experiencia de usuario excepcional son el corazón de los productos digitales exitosos. Parte de la capacitación incluye el aprendizaje avanzado de diseño de interfaces, así como una especialidad práctica en Sketch y Marvel para la prototipación y pruebas de concepto, culminando con habilidades robustas en gestión de proyectos de diseño.
Este Master no solo está alineado con las tendencias actuales sino que prepara a los estudiantes para ser pioneros en el diseño interactivo, haciendo de esta experiencia educativa una inversión estratégica en su futuro profesional. Optar por esta formación es escoger un camino de excelencia, innovación y éxito en el vasto campo del diseño de interfaces.
El Master en Diseño de Interface para Web y APPs, con especialización en Sketch y Marvel, está diseñado para diseñadores gráficos, web y desarrolladores front-end que buscan profundizar en Adobe Photoshop CC, Dreamweaver CC y técnicas avanzadas con HTML5, CSS3 y Javascript. Ideal para aquellos interesados en el diseño de interfaces intuitivas y gestión de proyectos de diseño. Este curso es perfecto si deseas dominar el diseño responsive y crear experiencias de usuario memorables en distintas plataformas y dispositivos.
Objetivos
– Dominar Photoshop CC.
– Crear webs con Dreamweaver.
– Diseñar para móviles.
– Aprender JavaScript básico.
– Usar HTML5 y CSS3 avanzado.
– Manejar Sketch y Marvel.
– Gestionar proyectos de diseño.
Salidas Profesionales
El Máster en Diseño de Interface en Proyectos Web y APPs con especialización en Sketch y Marvel abre un amplio rango de salidas laborales. Graduados están capacitados para ser diseñadores UX/UI, expertos en Adobe Photoshop y Dreamweaver, y dominar el diseño web responsivo. Con habilidades en HTML5, CSS3 y JavaScript, podrán crear experiencias de usuario interactivas y visualmente atractivas. Además, estarán preparados para la gestión de proyectos de diseño, pudiendo liderar equipos en estudios de diseño, agencias digitales o como freelancers.
Objetivo del curso: Dreamweaver es uno de los programas más potentes para la creación de páginas Web.
Dirigido a: Diseñadores gráficos o Web que desean aprender a crear páginas Web
¿Que es un dominio de un sitio Web?
¿Qué es un servidor Web? Clases de Alojamiento Web: Alojamiento Web gratis, Alojamiento compartido, Housing o colocation
Resolución de pantalla y sus diferentes tamaños: Absoluto y relativo
Lenguaje HTML: el lenguaje con el que se escriben las páginas Web
Diferentes tipografías y colores en la Web
Prácticas
Sitios en Dreamweaver, Presenta los pasos a seguir para crear y configurar un sitio Web en el programa Macromedia Dreamweaver. Explica las diferencias entre el sitio local y sitio remoto, cómo organizarlos para albergar el contenido creado y las distintas formas de ver los archivos en el sitio local
Configurar un sitio Web
Administrar y editar sitios Web
Crear y abrir documentos: Creación de una página en blanco, Creación de una plantilla en blanco, Creación de una página basada en un archivo de muestra de Dreamweaver CC, Cómo abrir y editar documentos existentes
Espacio de trabajo de Dreamweaver CC
Vistas del documento: Código, Código dividida, Diseño, en vivo
Propiedades de la página: CSS, HTML
Prácticas
Insertar Texto: Se indica cómo introducir texto en las páginas Web a través del programa Macromedia Dreamweaver CC. Se estudia el formato del texto (fuente, tamaño, color, alineación, sangría,...), los estilos CSS, la posibilidad de crear listas (numeradas, no numeradas o de definición) e incluso la revisión de la ortografía. Finalmente, también se describe la utilización de otros objetos en las páginas, como reglas horizontales, comentarios y la fecha de la última modificación de la página
Importar documentos de Microsoft Word
Propiedades del texto: Propiedades HTML, Propiedades CSS
Creación de listas: Creación de una lista nueva, de una lista usando texto existente, de una lista anidada. Configuración de las propiedades de toda una lista
Caracteres especiales en HTML
Corregir y sustituir texto, revisión ortográfica, búsqueda y sustitución de texto
Crear un estilo CSS y definición
Web fonts: La tipografía es una parte esencial del diseño de páginas Web
Prácticas
Introducción: Explica cómo insertar hipervínculos en las páginas Web a través del programa Macromedia Dreamweaver: vínculos a un lugar determinado de una página (a través de un anclaje con nombre), vínculos a otras páginas (del mismo sitio o a cualquier página de Internet) y vínculos en un menú de salto. Se indican las diferencias entre rutas absolutas y relativas, así como la administración y modificación de hipervínculos en Dreamweaver. Por último, se describe el uso de comportamientos en las páginas, para ejecutar comandos en respuesta a determinados sucesos o eventos
Crear un enlace: Rutas absolutas y relativas al documento. Rutas relativas a la raíz del sitio
Vínculo a un correo: Creación de un vínculo de correo electrónico utilizando el comando Insertar vínculo de correo electrónico, creación de un vínculo de correo electrónico mediante el inspector de propiedades.
Menú de salto
Widget de barra de menús: Adición de un elemento de menú principal, Adición de un elemento de submenú, Eliminación de un elemento de menú principal o submenú
Comprobar vínculos: Comprobación de vínculos del documento actual, Comprobación de vínculos en una parte de un sitio local, Comprobación de los vínculos de todo el sitio, Reparación de los vínculos en el panel Verificador de vínculos
Estilos en vínculos: Link, Visited, Active
Prácticas
Insertar una imagen: se describe el modo de incorporar imágenes en las páginas Web a través del programa Macromedia Dreamweaver. Se presentan los formatos gráficos que se pueden utilizar en una página Web y sus diferencias, así como la creación de imágenes de sustitución, mapas de imagen y barras de navegación
Propiedades de la imagen: El inspector de propiedades
Alinear y redimensionar una imagen
Rollover: una imagen al visualizarse en un navegador cambia
Mapas de imagen
Marcadores de posición
Objetos Inteligentes
Prácticas
Tablas: Explica la forma de distribuir o colocar los elementos en las páginas Web con el programa Macromedia Dreamweaver: la utilización de capas, tablas y la utilización del modo de diseño, asignación del formato, incluir el contenido, etc
Insertar tablas
Selección de elementos de la tabla
Propiedades de la tabla: inspector de propiedades
Propiedades de las celdas
Tamaño de tablas: Cambio del tamaño de tablas, columnas y filas
Copiar, pegar, combinar y anidar tablas
Formato CSS de tablas
Prácticas
Las capas: Explica que las capas por lo general se definen con las etiquetas div y span y pueden contener cualquier objeto, por ejemplo un formulario, un fragmento de texto o un plug-in
Posiciones de las cajas: Estática, Relativa, absoluta y fija
Insertar capas
Propiedades de las capas: inspector de propiedades
Panel Diseñador de CSS
Capas prediseñadas
Comportamientos: código JavaScript
Aplicar un comportamiento
Prácticas
Hojas de estilo: Reglas CSS. Explica que las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el aspecto del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación
Panel estilos: permite supervisar las reglas y propiedades CSS que afectan al elemento de página seleccionado
Crear y adjuntar hojas de estilo
Propiedades de tipo: definición de la configuración básica de la fuente
Propiedades de fondo
Propiedades de bloque
Propiedades del cuadro
Propiedades del borde
Definir consulta de Medios
Definir selectores
Definir propiedades
Prácticas
Propiedades lista: Aprenderemos más reglas css para una Web atractiva
Propiedades de posición
Propiedades de extensiones
Transiciones
Trabajar con Hojas de estilo
Aplicar varias clases estilos
Hojas de estilos de muestra de Dreamweaver
Diseño de páginas con CSS
Prácticas
Incluir archivos swf: Presenta elementos multimedia dinámicos que podemos insertar en las páginas Web a través del programa Macromedia Dreamweaver: animaciones de Flash, vídeos de Flash, botones y textos Flash. También se describen varias posibilidades de trabajo conjunto entre Dreamweaver y Fireworks, como la creación de un álbum de fotos Web o la inserción de HTML procedente de Fireworks en una página Web diseñada con Dreamweaver
Elementos multimedia y jQuery
Insertar archivos FLV
Insertar sonido: Formatos de Audio, Incrustación de un archivo de sonido, Incrustación de un archivo de video
Inserción de un widget de jQuery UI
Widget de acordeón: Personalización del widget de acordeón
Widget de Autocompletar
Prácticas
Plantillas: Tipos de regiones de plantillas. Aprenderemos que una plantilla es un tipo especial de documento que sirve para crear un diseño de página fijo, es muy útil
Creación de plantillas: Creación de una plantilla a partir de un documento existente, Utilización del panel Activos para crear una plantilla nueva
Crear regiones editables
Crear regiones repetidas: Inserción de una tabla repetida
Regiones opcionales de una plantilla: Inserción de una región opcional no editable, Inserción de una región opcional editable
Basar páginas en una plantilla
Edición y actualización de plantillas
Panel activos: Adición de un activo a un documento
Biblioteca: Creación de un elemento de biblioteca basado en una selección, Creación de un elemento de biblioteca vacío, Actualizar documento
Prácticas
Formularios: Describe lo que son, cómo se crean y cómo se configuran los formularios en Macromedia Dreamweaver, para que el visitante del sitio Web envíe información al servidor Web. Se explica el trabajo con los distintos campos que se pueden crear, viendo para qué se usa cada uno y sus propiedades
Creación de un formulario HTML: Objetos de formulario
Propiedades de objetos I
Propiedades de objetos II
Validar un formulario con JavaScript
Sitios remotos
Panel archivos: sitio local y remoto
Prácticas
Diseño de cuadrícula fluida: Nos permite crear un diseño que se adaptará la pantalla del dispositivo que se utilice para visualizarlo, sea este un móvil, una tablet o la pantalla de un ordenador
Sincronizar FTP
FTP Multicanal
jQuery Mobile
Temas
Panel muestras
Agregar Contenidos
Prácticas
Introducción
Programación del lado del cliente
Programación del lado del servidor
¿Qué utilizaremos?
¿Qué necesita saber?
La etiqueta SCRIPT
Contenido alternativo
Variables
Tipos de datos
Operadores
Cuadros de diálogo
Introducción
Estructuras de decisión
Estructuras lógicas
Estructuras de repetición
Definir funciones
Llamadas a funciones
Ámbito de las variables
Introducción
La jerarquía de objetos
Propiedades y eventos
Métodos
¿Qué es una URL?
El objeto Location
Redirigir a otra página
El objeto History
Introducción
La propiedad Title
Los colores de la página
El método write
El conjunto images
Formularios HTML
El conjunto forms
La propiedad elements
Validar la información
¿Cuándo realizar la validación?
Tipos de validación
El conjunto frames
El objeto navigator
El objeto screen
MÓDULO 2. DISEÑO WEB AVANZADO CON HTML5 + CSS3
Introducción
Editor de texto
Navegadores
Introducción HTML
¿Cómo creamos documento HTML?
Características básicas
Textos en HTML
Enlaces
Listas en HTML
Imágenes y objetos
Tablas
Formularios
Estructuras y layout
Otras etiquetas importantes
¿Qué es la Metainformación?
Accesibilidad
Validación
Introducción CSS
Soporte de CSS en navegadores
Especificación oficial
Funcionamiento básico de CSS
¿Cómo incluir CSS en la Web?
Estilo básico
Medios CSS
Comentarios
Sintaxis de la definición
Selectores CSS
Unidades de medida
Colores
Modelo de cajas
Propiedades de las cajas
Margen, relleno, bordes y modelo de cajas
Posicionamiento y visualización
Posicionamiento
Visualización
Introducción a layout
¿Cómo centrar una página horizontalmente?
¿Cómo centrar una página verticalmente?
Estructura y layout
Altura/anchuras máximas y mínimas
Estilos avanzados
Textos en CSS
Enlaces
Imágenes
Listas
Tablas
Formulario
Versión para imprimir
Personalizar el cursor
Hacks y filtros
Prioridad en las declaraciones
Validar CSS
Recomendaciones Generales
Recursos útiles
¿Qué es Firebug?
¿Como se instala?
¿Como usamos Firebug?
¿Qué es HTML5?
¿Cuáles son las mejoras?
Etiquetas Obsoletas
Etiquetas modificadas
Lista de etiquetas HTML5
Atributos eliminados
Otros cambios
Estructura HTML5
Nueva estructuración del body
Otros elementos nuevos de estructuración
Introducción a atributos globales
Nuevos atributos
Introducción a los nuevos eventos.
Elemento bdi
Elemento command
Elemento data
Elementos details
Elemento mark
Elemento meter
Elemento progress
Elemento ruby
Elemento time
Elemento wbr
Nuevos elementos para los Formularios
Cambios en el atributo type (input)
Nuevos atributos para form
Nuevos atributos para fieldset
Nuevos atributos para input
Nuevos atributos para textarea
Introducción a los elementos multimedia
Etiqueta source
Etiqueta track
Elemento video
Elemento audio
Elemento embed
Elemento canvas
Introducción a MathML
Introducción a SVG
Introducción a Drag and Drop
Validador HTML5
Introducción
Unidades, colores y fuentes
Nuevos Selectores y pseudo-clases
Propiedades para la animación
Nuevas propiedades para los fondos
Nuevas propiedades para Bordes
Propiedades de las cajas
Propiedades de las cajas flexibles
Propiedades del color
Propiedades para las Fuentes
Propiedades para los hiperenlaces
Propiedades de las multi-columnas
Propiedades para texto
Propiedad 2D/3D Transform
Propiedades para las transiciones
Propiedades para la interfaz de usuario
Validación CSS3
Introducción
Diseño web para teléfonos móviles con HTML5, CSS3 y Jquery mobile
Media Queries
Local Storage
Frameworks para la programación de aplicaciones móviles basadas en HTML
Publicar una aplicación en Google Play
Actividad Práctica
Funcionalidad de curso de diseño de interfaz
Archivos base de Ejemplo práctico de diseño de interfaz
Interfaz y novedades de Sketch 2 y Sketch 3
Trabajar con Sketch
Colores y tipografía en Sketch
Añadir imágenes
Qué es un UI Kit
Crear un menú web
Completamos para menú web
Sistemas de paginación en Sketch (Ejemplos)
Formulario en nuestra interfaz
Botones sociales en nuestro para interfaces
Notificaciones para nuestro kit de interfaz
Botones básicos con Sketch y bloques de contenido
Simulando un FAQ con Sketch
Presentación de perfil en nuestro kit de interfaz
Tag cloud o nube de etiquetas
Cita de autor en nuestro kit
Mini player musical: fondo, barra y botones
Finalización
Funcionalidad del curso Diseño de interfaz con Sketch y Marvel
Desarrollo Diseño de interfaz con Sketch y Marvel
Creación de Briefing y planificación del proyecto con Sketch
Aplicaciones y creación de documento Sketch
Creación con Sketch
Diseño de la pantalla para login de Sketch
Asistente de vestuario en Sketch
Resumen de la aplicación creada con Sketch y resultado
Organización y contenido del documento en Sketch
Pantallas adicionales en la aplicación creada con Sketch
Capacidades y extracción de contenidos en Sketch
Estilo en la aplicación de Sketch
Herramienta de prototipado Marvel
Crear interacción con la herramienta Marvel
Creación del prototipo con Marvel
Creación de diseño del prototipo con Marvel
Compartimos nuestro prototipo
Conceptos previos de normalización y estandarización
Relación de la norma con otros estándares de gestión de proyectos: PMBOK®, PRINCE2…
Introducción a la norma UNE-ISO 21500:2013
Objeto y campo de aplicación de la norma
Historia, contexto actual y futuro de la ISO 21500
Costos de implantación de la norma
Periodo de vigencia de la norma
Estructura de la norma ISO 21500
Definición de conceptos generales de la norma
Clasificación de los procesos en grupos de proceso y grupos de materia
Grupo de procesos del inicio del proyecto
Grupo de procesos de planificación del proyecto
Grupo de procesos de implementación
Grupo de procesos de control y seguimiento del proyecto
Grupo de procesos de cierre del proyecto
Introducción a la materia “Integración”
Desarrollo del acta de constitución del proyecto
Desarrollar los planes de proyecto
Dirigir las tareas del proyecto.
Control de las tareas del proyecto
Controlar los cambios
Cierre del proyecto
Recopilación de las lecciones aprendidas
Introducción a la materia “Partes Interesadas”
Identificar las partes interesadas
Gestionar las partes interesadas
Introducción a la materia “Alcance”
Definir el alcance
Crear la estructura de desglose de trabajo (EDT)
Definir las actividades
Controlar el alcance
Introducción a la materia “Recursos”
Establecer el equipo de proyecto
Estimar los recursos
Definir la organización del proyecto
Desarrollar el equipo de proyecto
Controlar los recursos
Gestionar el equipo de proyecto
Introducción a la materia “Tiempo”
Establecer la secuencia de actividades
Estimar la duración de actividades
Desarrollar el cronograma
Controlar el cronograma
Introducción a la materia “Coste”
Estimar costos
Desarrollar el presupuesto
Controlar los costos
Introducción a la materia “Riesgo”
Identificar los riesgos
Evaluar los riesgos
Tratar los riesgos
Controlar los riesgos
Introducción a la materia “Calidad”
Planificar la calidad
Realizar el aseguramiento de la calidad
Realizar el control de la calidad
Introducción a la materia “Adquisiciones”
Planificar las adquisiciones
Seleccionar los proveedores
Administrar los contratos
Introducción a la materia “Comunicaciones”
Planificar las comunicaciones
Distribuir la información
Gestionar la comunicación
Titulación
Doble Titulación: – Titulación de Máster en Diseño de Interfaz de Usuario con Sketch y Marvel con 1500 horas expedida por EDUCA BUSINESS SCHOOL como Escuela de Negocios Acreditada para la Impartición de Formación Superior de Postgrado, con Validez Profesional a Nivel Internacional – Titulación Propia Universitaria en Gestión Integrada Proyectos – Project Management con 5 Créditos Universitarios ECTS