Vive el proceso de diseñar y crear tu página web utilizando Figma y programando con HTML5 y CSS3.
Detalles del Curso
Aprende a prototipar páginas web completas con las herramientas de diseño más actuales como FIGMA. Crearás webs adaptadas a móvil, tablet y desktop con potentes diseños y animaciones.
Los Mockups son fotomontajes que permiten a los diseñadores gráficos y web mostrar al cliente cómo quedarán sus diseños. Con tus diseños mockup podrás trabajar con otros programadores web de forma eficaz y dinámica.
Figma es una herramienta para diseñar interfaces y mockups que se está posicionando rápidamente al ser la primera en tener colaboración en tiempo real. Utilizaremos Figma para diseñar y maquetar páginas web responsive de manera sencilla y dinámica.
Aprenderemos y aplicaremos en proyectos prácticos los fundamentos de HTML5 y CSS3, los principales lenguajes de programación web, para entender, desarrollar y modificar la estructura de una web.
Tendrás un espacio propio en el servidor de Gesenco Formación para desarrollar todas tus prácticas del curso, acercándote lo más posible a la experiencia real del trabajo web, desde el concepto hasta el desarrollo y la publicación.
TEMA 1. EL DISEÑO
- Definición de Diseño
- La práctica del diseño
- Disciplinas del diseño
- Signo y Símbolo
- Elementos básicos del diseño
- Teoría de la percepción
TEMA 2. EL COLOR
- Teoría del color
- El círculo cromático
- La armonía
- Contrastes de color
- Psicología del Color
TEMA 3. TIPOGRAFÍA
- Definición de tipografía
- Características de los tipos
- Clasificación de los tipos
- Clasificación histórica
- Clasificación por forma
- Elementos tipográficos
- Tipografía digital
- La tipografía en el diseño
TEMA 4. TÉCNICAS DE COMPOSICIÓN
- ¿Qué es la composición?
- Estructuras compositivas
- El espacio
- La Sección Áurea
- Las figuras geométricas
- Los planos compositivos
- Ritmo visual
- Equilibrio visual
- Equilibrio estático
- Equilibrio dinámico
TEMA 5. DISEÑO PUBLICITARIO
- La publicidad
- Objetivos de la publicidad
- Medios publicitarios
- Identidad corporativa
- Logotipo y marca
- Estrategias de diseño
- Publicidad impresa
- Publicidad en televisión
- Packaging
- Del diseño a la realización
TEMA 6. MAQUETACIÓN
- ¿Qué es la maquetación?
- Preparar un documento para la maquetación
- Ocupando el espacio de la página
- Texto e imagen
- Composición del texto
- Errores frecuentes
TEMA 7. FOTOMECÁNICA E IMPRESIÓN
- ¿Qué es la fotomecánica?
- Pasos de una impresión
- Escaneado
- El escáner
- Filmación
- Fotolitos
- Las tintas
- Tipos de impresión
TEMA 8. DISEÑO WEB
- Qué implica el diseño Web
- Planificación de una página Web
- Tipos de sitios Web
- Análisis demográfico
- Definir el estilo
- Maquetación
- Creación del sitio
- Nociones básicas
- HTML
- CSS
- Flash
- Colgar el sitio en la red
- Promoción del sitio web
TEMA 9. DISEÑO 3D
- El diseño tridimensional
- Fundamentos
- Interfaces de navegación
- Modelado
- Animación
- Imagen final
- Materiales y texturas
- Iluminación y render
- Formatos
- Atajos de teclado
TEMA 1: INTRODUCCIÓN A INTERNET Y AL DESARROLLO WEB
- ¿Qué es internet?
- ¿Qué es la web?
- Hipervínculos
- Dominios
- Breve Historia de internet
TEMA 2: INTRODUCCIÓN AL DISEÑO WEB
- Introducción al diseño
- Introducción al diseño web
- Introducción al diseño UI (User Interface) o diseño de interfaces
- Introducción al diseño UX (User Experience) o de experiencia de usuario
- Colores
- Tipografía
- Composición
- Imágenes y resolución
TEMA 3: INTRODUCCIÓN AL DISEÑO RESPONSIVE
- Adaptación de elementos
- Mobile-First design
TEMA 4: MI PRIMER DISEÑO WEB
- Estructura web básica
- Práctica Diseño 1 – Estructura Web
- Secciones de una página web
- Práctica Diseño 2 – Contenido Web
TEMA 5: INTRODUCCIÓN AL HTML
- ¿Qué es HTML?
- Etiquetas HTML5: Head
- Etiquetas de HTML 5: Navegación
- Etiquetas HTML5: Insertar imágenes
- Etiquetas HTML5: Contenido
- Etiquetas HTML5: Footer
- La estructura de la página web
TEMA 6: INTRODUCCIÓN AL CSS
- ¿Qué es CSS
- Propiedades CSS
- Añadir CSS
- Ejemplo HTML y CSS
- Recursos CSS
TEMA 7: RECURSOS, HERRAMIENTAS Y PROGRAMAS.
- Recursos
- Portales de imágenes y vectores
- Webs de ejemplos de código
- CMS: WordPress
TEMA 1. INTRODUCCIÓN A LOS FUNDAMENTOS DEL DISEÑO VISUAL
- Principios de composición y diseño visual
- Principios de la Gestalt aplicados al diseño
- Jerarquía visual
TEMA 2. INTRODUCCIÓN A FIGMA
- ¿Qué es?
- ¿Qué usos tiene?
- Diseño colaborativo
- Diseño de productos digitales
- Comunidad Figma
- Planes
- La comunidad Figma
- Archivos
- Plugins
TEMA 3. CREACIÓN DE UNA CUENTA EN FIGMA E INSTALACIÓN
TEMA 4. LA INTERFAZ DE FIGMA
- Creación de proyectos
- Guardar Proyectos
TEMA 5. PRIMEROS PASOS CON FIGMA
- Herramienta Frame
- Herramienta Rectángulo y sus propiedades
- Importar elementos e imágenes SVG
- Grid, Grupos y Textos
- Alineación en Figma
- Herramienta Pluma.
- Trazados y rellenos
TEMA 6. ELEMENTOS VISUALES EN FIGMA
- Composición básica
- Tipografías y Google Fonts
- Paletas de colores
- Gráficos e Iconos
TEMA 7. CONFIGURACIÓN DE ESTILOS
- Guías de estilos
- Crear estilos de texto y párrafo
- Aplicar Estilos
- Modificar
- Eliminar Estilos
TEMA 8. PLUGINS EN FIGMA
- Instalación de Plugins
- Lorem Ipsum o Content Reel
- Get Waves
TEMA 9. WIREFRAMES
- ¿Qué es un Wireframe?
- Planificación previa del prototipo
- Del papel a Figma
- Creación de la Página de Inicio
- Componentes del Wireframe:
- Cabecera
- Menú
- Pie de página
- Wireframe Responsive
TEMA 10. COMPONENTES EN FIGMA
- Creación de componentes
- Duplicar componentes
- Modificar o eliminar componentes
TEMA 11. APLICACIÓN DE MÁSCARAS EN FIGMA
TEMA 12. PROTOTIPADO EN FIGMA
- ¿Cómo darle vida al prototipo?
- Interacciones de botones
- Vinculaciones a páginas y modales
- Prototipado colaborativo
TEMA 13. MOCKUPS EN FIGMA
- ¿Qué es un mockup?
- Mockups en figma
- Artboard Studio Mockups
- Vectary 3D Elements
TEMA 1. HERRAMIENTAS NECESARIAS
- Introducción
- Editor de texto
- Navegadores
TEMA 2. INTRODUCCIÓN HTML
- Introducción HTML
- ¿Cómo creamos documento HTML?
- Características básicas
TEMA 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS
- Textos en HTML
- Enlaces
- Listas en HTML
- Imágenes y objetos
TEMA 4. TABLAS, FORMULARIOS Y ESTRUCTURAS
- Tablas
- Formularios
- Estructuras y layout
TEMA 5. OTRAS ETIQUETAS IMPORTANTES
- Otras etiquetas importantes
TEMA 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN
- ¿Qué es la Metainformación?
- Accesibilidad
- Validación
TEMA 7. INTRODUCCIÓN CSS
- 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
TEMA 8. SELECTORES, UNIDADES DE MEDIDA Y COLORES
- Selectores CSS
- Unidades de medida
- Colores
TEMA 9. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN
- Modelo de cajas
- Propiedades de las cajas
- Margen, relleno, bordes y modelo de cajas
- Posicionamiento y visualización
- Posicionamiento
- Visualización
TEMA 10. ESTRUCTURAR UNA PÁGINA LAYOUT
- 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
TEMA 11. TEXTO, ENLACES, IMÁGENES Y LISTAS
- Textos en CSS
- Enlaces
- Imágenes
- Listas
TEMA 12. TABLAS, FORMULARIOS Y SHORTHAND
- Tablas
- Formulario
TEMA 13. OTRAS UTILIDADES DE CSS
- Versión para imprimir
- Personalizar el cursor
- Hacks y filtros
- Prioridad en las declaraciones
- Validar CSS
- Recomendaciones Generales
- Recursos útiles
TEMA 14. FIREBUG
- ¿Qué es Firebug?
- ¿Cómo se instala?
- ¿Cómo usamos Firebug?
TEMA 1. INTRODUCCIÓN HTML5
- ¿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
TEMA 2. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES
- Introducción a atributos globales
- Nuevos atributos
- Introducción a los nuevos eventos
TEMA 3. NUEVOS ELEMENTOS SEMÁNTICOS
- Elemento bdi
- Elemento command
- Elemento data
- Elementos details
- Elemento mark
- Elemento meter
- Elemento progress
- Elemento ruby
- Elemento time
- Elemento wbr
TEMA 4. MEJORAS EN LOS FORMULARIOS
- 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
TEMA 5. OTRAS MEJORAS DE HTML5
- 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
TEMA 6. INTRODUCCIÓN A CSS3
- Introducción
- Unidades, colores y fuentes
- Nuevos Selectores y pseudo-clases
TEMA 7. ANIMACIONES, FONDOS Y BORDES
- Propiedades para la animación
- Nuevas propiedades para los fondos
- Nuevas propiedades para bordes
TEMA 8. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES
- Propiedades de las cajas
- Propiedades de las cajas flexibles
- Propiedades del color
- Propiedades para las fuentes
TEMA 9. ENLACES Y MULTI-COLUMNAS
- Propiedades para los hiperenlaces
- Propiedades de las multi-columnas
TEMA 10. TEXTO Y 2D/3D TRANSFORMACIONES
- Propiedades para texto
- Propiedad 2D/3D Transform
TEMA 11. TRANSICIONES E INTERFAZ DE USUARIO
- Propiedades para las transiciones
- Propiedades para la interfaz de usuario
- Validación CSS3
TEMA 1. INTRODUCCIÓN
- Diferencias entre navegadores
- Mejorar la compatibilidad
- Normalizar estilos
- Media Queries
TEMA 2. MEDIA QUERIES
- Objetivo y orígenes
- Sintaxis de las media Queries
- Ubicación de las media Queries en CSS
- Tamaños de pantalla
- Móvil
- Tablet
- Escritorio PC
- Pantallas de TV, HD y 4K
- Viewport
- Cuadrículas
TEMA 3. DISEÑO WEB RESPONSIVE
- Introducción
- Cuadrículas responsive
- Imágenes
- Tipografías
- Tablas
TEMA 4. FRAMEWORKS
- ¿Qué son los Frameworks?
- Bootstrap
- Foundation
- Descargar plantillas
- Librerías y ejemplos
- Más ejemplos
- Casos de uso
TEMA 5. GOOGLE DEVELOPER TOOLS
- Inspeccionar y examinar HTML y CSS
- Editar HTML/CSS
- Habilitar y deshabilitar estilos
- Mover y eliminar elementos
- Registros de la consola y otros comandos
- Símbolos especiales de la consola
- Examinar la red y los recursos
- Otros complementos
TEMA 1. CARACTERÍSTICAS DE SEGURIDAD EN LA PUBLICACIÓN DE PÁGINAS WEB
- Seguridad en distintos sistemas de archivos
- Permisos de acceso
- Órdenes de creación modificación y borrado
TEMA 2. HERRAMIENTAS DE TRANSFERENCIA DE ARCHIVOS
- Parámetros de configuración
- Conexión con sistemas remotos
- Operaciones y Comandos / órdenes para transferir archivos
- Operaciones y Comandos / órdenes para actualizar y eliminar archivos
TEMA 3. PUBLICACIÓN DE PÁGINAS WEB
- Buscadores genéricos
- Buscadores especializados
- Descriptores: palabras clave y sistemas normalizados de «metadatos»
- Aplicaciones de publicación automatizada
- Procedimientos de publicación
TEMA 4. PRUEBAS Y VERIFICACIÓN DE PÁGINAS WEB
- Técnicas de verificación
- Herramientas de depuración para distintos navegadores
- Navegadores: tipos y plugins
Carpeta de estudios con el siguiente material:
- Manual de Publicación de Páginas Web
- Manual de Teoría y Fundamentos del Diseño Gráfico
- Manual de Diseño Web Avanzado con HTML5 y CSS3 (vol 1)
- Manual de Diseño Web Avanzado con HTML5 y CSS3 (vol 2)
- Manual de Responsive Web Design, Diseños y Cuadriculas
- Cuaderno de ejercicios de Publicación de Páginas Web
- Cuaderno de ejercicios de Diseño Web Avanzado con HTML5 y CSS3
- Cuaderno de ejercicios de Teoría y Fundamentos del Diseño Gráfico
- Bloc y Bolígrafo para tomar apuntes
La METODOLOGÍA ONLINE propuesta se ajusta a las características y necesidades de cada alumno/a, combinando las metodologías de enseñanza programada y de trabajo autónomo del alumnado con el asesoramiento de un/a formador/a especializado y mediante el uso de las nuevas tecnologías de la información y comunicación, creando un entorno de aprendizaje activo, próximo y colaborativo en el Campus Virtual.
- ENSEÑANZA PROGRAMADA:
Persigue transmitir los conocimientos al alumnado sin la intervención directa de el/la formador/a, a través de la organización y estructuración de los contenidos de forma secuencial. La realización periódica de ejercicios y pruebas de autoevaluación permiten afianzar lo aprendido y corregir los posibles errores en el aprendizaje.
- TRABAJO AUTÓNOMO:
Sistema de trabajo donde el/la alumno/a asume la responsabilidad de su proceso de aprendizaje, adaptándolo a su ritmo de trabajo y a sus propias necesidades, lo que exige una mayor implicación por su parte. Las acciones formativas están diseñadas para propiciar el fomento de las habilidades, conocimientos y experiencias relevantes para el desarrollo profesional dentro del ámbito de la temática del curso. El material didáctico objeto fundamental del proceso de enseñanza, será puesto a disposición del alumno en el Campus de manera ordenada y en los formatos más idóneos para ajustarlos a las especificaciones del curso. El alumno debe trabajarlos de manera autónoma dedicando un tiempo que dependerá de las necesidades individualizadas del alumno.
- TU PROFESOR PARTICULAR:
Te ayudará siempre que lo necesites. Cuando tengas alguna duda o algo no entiendas, tu profesor estará siempre dispuesto para guiar tus pasos y ayudarte a través de una llamada de teléfono ó por email. Te devolverá los ejercicios corregidos y las notas oportunas, asegurando el mejor objetivo final de tu aprendizaje.
El tiempo de duración del curso son 650 horas, al ser dentro de la Formación a Distancia, depende del tiempo que el alumno dedique cada día al estudio, no obstante, se dispone de hasta 18 meses para utilizar los servicios del centro y atención del Profesorado sin que varíen las condiciones de pago iniciales.
- Precio a consultar.
- Subvenciones entre el 15% y el 50% para diversos colectivos:
- Desempleados: Presentando la tarjeta del paro (hoja de sellado)
- Estudiantes: Presentando la matrícula del centro ó carnet de estudiante.
- Autónomos: Presentando el último recibo de autónomo.
- Discapacitados: Presentando certificado de discapacidad.
- Antiguos alumnos: Presentando la matrícula del curso anterior.
- Familia numerosa: Presentando el carnet de familia numerosa.
- Otros colectivos: Solicitar información personalizada.
- Formación bonificada para trabajadores en activo que trabajen por cuenta ajena y coticen bajo el Régimen General de la Seguridad Social. Si estás trabajando en una empresa, puedes beneficiarte de estas ayudas, siempre tramitándolo a través de tu propia empresa.
Estos descuentos no son acumulables entre sí.
- Formas de pago.
- Ingreso o transferencia a la cuenta del centro.
- Paypal, Tarjeta bancaria (crédito o débito).
- Financiación. (Sólo para alumnos en España). 100% pago seguro. Por medio de este método podrá aplazar los importes de los cursos en cómodas mensualidades hasta en 12 meses sin intereses. Es necesario tener una tarjeta de débito, donde se cargarán las cuotas correspondientes. La 1ª cuota se cargará en el momento de la matriculación de manera automática.
Una vez terminado el plan de formación y superadas todas las pruebas de evaluación y proyectos finales, se te enviará el Diploma que reflejará los temarios realizados, las horas de formación y la nota media obtenida para enriquecer tu Currículum personal y profesional.
El centro dispone de un acuerdo de colaboración con una agencia de colocación del Servicio Público de Empleo Estatal, para la realización de prácticas en empresas por parte de los alumnos que quieran acogerse a este programa, una vez acabada su formación, con la intención de que adquieran experiencia en su área profesional aprovechando al máximo las posibilidades derivadas del período de formación (prácticas empresariales formativas).
Para consultar más información acerca del programa de prácticas, haz click aquí.
El Centro dispone de una bolsa de trabajo, donde los alumnos Diplomados pueden tener la oportunidad de presentarse a puestos de trabajo relacionados con este sector en todas aquellas Empresas que nos lo solicitan. Igualmente se dispone de una agencia de colocación y empleo donde los alumnos pueden visionar cada día las diferentes ofertas de empleo que se van publicando.
Para consultar más información acerca de la bolsa de trabajo, haz click aquí.
