Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo...

5
Curso de Diseño Web 60 HRS www.maclearn.mx

Transcript of Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo...

Page 1: Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos] 45 HORAS Adobe Dreamweaver® se ha rediseñado

Curso de Diseño Web60 HRS

www.maclearn.mx

Page 2: Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos] 45 HORAS Adobe Dreamweaver® se ha rediseñado

Adobe Dreamweaver®

Adobe XD es una plataforma para diseñar, crear prototipos y compartir experien-cias de usuario.

Cambie fácilmente entre diagramas funcionales, diseño visual, diseño de interac-ción, creación de prototipos, vista previa y uso compartido, todo en una potente herramienta.

Adobe XD® [ Diseño y creación de prototipos ]

15 HORAS

Adobe XD®

• ¿PorqueutilizarAdobe• XD®?

• Qué es AdobeXD• Crearyconfigurarunnuevoproyecto• Creación de un documento• Uso de la interfaz y navegación en la aplicación• Atajos de teclado (shortcuts)• Artboards (mesas de trabajo)• Grids y layouts ( uso de guías,retículas y trabajo con columnas)• Uso de Capas

• Uso de el color• Generar paletas de color• Uso de Adobe Color

• Uso de herramientas de Diseño• Formas• Alinear y combinar formas• Diseñar icono (importación de iconos)• Textos y tipografía (intsalación y uso de fuentes gratuitas, google fonts)

Page 3: Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos] 45 HORAS Adobe Dreamweaver® se ha rediseñado

Adobe Dreamweaver® Adobe XD®

• Imágenes y máscaras (uso e importación de imágenes, formatos de imagen)

• Pluma• Optimizar el trabajo con herramientas avanzadas• Recursos de trabajo (sitios de descarga de imágenes, vectores e iconos)• Repetición de elementos• Cargar contenido en repetición de elementos (repeat grid tool)• Componentes• Panel de assets• Tamaño responsivo (Responsive Resize)• Uso de UI Kits (Elementos prediseñados)• Previsualización del proyecto• Paletas de color• Uso del color para el diseño de interfaces

• Prototipado• Crear prototipos interactivos• Como vincular elementos• Animaciones automáticas con Adobe XD

• Previsualizaciónfinaldelproyecto• Grabar interacciones• Exportación de Proyectos

Page 4: Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos] 45 HORAS Adobe Dreamweaver® se ha rediseñado

Adobe Dreamweaver®

Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos]

45 HORAS

Adobe Dreamweaver® se ha rediseñado con una interfaz moderna y un motor de codificaciónflexibleyrápidoparaofreceralosdiseñadoreswebyalosdesarrol-ladores de aplicaciones o interfaz de usuario formas más sencillas de crear, codi-ficarygestionarsitioswebconunaaparienciaespectacularencualquierpantalla. Descubre cómo puedes crear con rapidez sitios web adaptativos, previsualizarlos en dispositivos móviles reales.

Adobe Dreamweaver®

• Interfaseyespaciodetrabajo

• Vistas del programa• Ventanas• Seleccionar espacio de trabajo• Barra de herramientas• Personalizar preferencias

• HTML

• ¿Qué es el HTML?• Uso del HTML• Código HTML• Introducción al HTML

• HojasdeEstilo(CSS)

• ¿Que son las Hojas de estilo (CSS)?• HTML o CSS• PrincipalesEtiquetasHTML• Modelo CSS• Reglas de Estilo• Propiedades de las hojas de estilo• Aplicar Hojas de estilo (CSS)• Hojas de Estilo Nivel 2 y 3 (CSS 2, CSS3)• Formato a texto• Formato a objetos

Adobe XD®

Page 5: Curso de Diseño Web 60 HRS - MACLEARN · 2019-08-06 · Adobe Dreamweaver® [ Diseño y desarrollo de sitios web modernos y adaptativos] 45 HORAS Adobe Dreamweaver® se ha rediseñado

Adobe Dreamweaver® Adobe Dreamweaver®

• Diseñarunapáginaweb

• Principios del Diseño Web• Opciones para diseñar una página web• DefinirunsitioenDreamweaver• Pantalla de Bienvenida• Previsualización de archivos• Modificarundiseñopredefinido• Construir una página web• Estructura básica de una página web• Modificaralineación• Modifircarelanchoyelfondo• Modificarformatoycontenido• Insertar nuevos elementos• Insertar un contenedor de imagen• Insertar un contenedor de texto• Modificarelpiedeldocumento

• TrabajoconHojasdeEstilo(CSS)

• Ventana CSS• Adjuntar hojas de estilo externas• Creación de nuevas reglas de estilo• Como aplicar reglas de estilo• Modificarpropiedades• Trabajo con tipografía• Trabajo con reglas de estilo• Menú interactivo• Creación de columnas “falsas”• Hojas de estilo incrustadas• Hojas de estilo externas

• Trabajocontablas,textoylistas

• Creaciónymodificacióndetablas• Definicióndeencabezadosycuerpode trabajo• Importar texto, insertar, crear y dar estilo a texto• Creación de lista ordenadas y no ordenadas

• Trabajoconimágenes

• Como utilizar imágenes para web• Como insertar imágenes• Ajustar posiciones de imagen con clases CSS• Ventana de insertar• Optimizacióndegráficos• Inserción de archivos de photoshop• Copiar y pegar desde photoshop

• Navegación

• Creación de hipervinculos (links)• Como vincular páginas de un mismo documento• Como insertar hípervinculos externos• Como insertar hípervinculos de correo• Como insertar anclas (anchors)

• Páginasinteractivas

• Aplicación de comportamientos (behaviors) Javascript• Abrir ventanas de navegador• Modificarcomportamientos• Ocultar y mostrar• Efectos con JQuery y Dreamweaver• Uso de widgets•• ImplementacióndeEfectosCSS3

• CajasconesquinasredondeadasconCSS3• Uso de sombra paralela con CSS3• Creación de degradados con CSS3• Creación de transparencias con CSS3•• NuevosusosdeTipografía

• ¿Que son las fuentes web?• Declarando @ familias font-face• La implementación de efectos de tipo CSS3

• Construcción de formularios

• Añadir un formulario a una página• Inserción de campos de texto • Inserción de radio buttons• Inserción de checkboxes• Trabajo con listas

• Botones• Estilizado de formularios

• DiseñoresponsivoconBootstrap

• ¿Que es Responsive Web Design?• ¿Que es Bootstrap?• Creación de un sitio• Uso de plantillas• Trabajo con Fluid Grid Layout • Diseño para Smart Phone• Diseño para Tablet• Diseño para Desktop• Uso de columnas• Uso de menus• EtiquetasHTML5• Insertar contenido• Añadir columnas• Añadir menus • Imágenesflexibles• Manipulación CSS • Añadir galeria de imágenes• Uso de componentes de Bootstrap• Inserción de video• Creación/ Inserción de formulario

• Comopublicarunsitioweb

• Definirunservidorremoto• Colocar sitio en internet