Curso Gratuito Master en Diseño de Interface y Front-End con HTML, CSS3 y JQuery + Titulación Universitaria

Información gratuita

Nombre y apellidos

Email

Teléfono

Situación laboral

País

Provincia

Acepto la Política de Privacidad, el Aviso Legal y la Política de Cookies de cursosgratuitos.es

Curso 100% Bonificable si eres trabajador contratado en el régimen general y envías la documentación de matrícula (en el caso de ser estudiante, desempleado, autónomo, funcionario o jubilado puedes realizar este curso de forma parcialmente subvencionada)

Busca otros cursos gratuitos

Para qué te prepara:

El Master en Diseño de Interface y Front-End con HTML, CSS3 y JQuery le prepara para tener una visión amplia y precisa del sector de la programación y diseño web, llegando a realizar y diseñar interfaces de páginas web con diferentes herramientas.

A quién va dirigido:

El Master en Diseño de Interface y Front-End con HTML, CSS3 y JQuery está dirigido a todos aquellos profesionales del sector que quieran ampliar su formación o especializarse en las funciones de diseño de interfaces con Front-End o herramientas de diseño gráfico como Photoshop e Illustrator.

Titulación:

Titulación Múltiple: - Titulación de Master en Diseño de Interface y Front-End con HTML, CSS3 y JQuery con 600 horas expedida por EUROINNOVA BUSINESS SCHOOL como Escuela de Negocios Acreditada para la Impartición de Formación Superior de Postgrado y Avalada por la Escuela Superior de Cualificaciones Profesionales- Certificación Universitaria en Analista Programador JQuery con 4 Créditos Universitarios ECTS (Curso Homologado y Baremable en Oposiciones de la Administración Pública) con 110 horas

Objetivos:

- Aprender sobre UML 2.0 para la iniciación al mundo de los patrones de diseño de software. - Conocer los diferentes diagramas de UML 2, desde la descripción de los requisitos a partir de casos de uso, hasta el diagrama de componentes pasando por los diagramas de interacción, de clases, de estructura compuesta, de estados transiciones y de actividades. - Aprender a crear guiones o scripts que se incluyen en las páginas web y que son ejecutados por el navegador que utiliza el usuario. Tareas como la validación de los datos enviados por el usuario en un formulario pueden ser llevadas a cabo mediante la programación del lado cliente. - Estudiar el concepto de Modelo de Objetos del Documento o DOM. - Estudiar las novedades que aportan HTML5 y CSS3 como evolución de los dos principales estándares web. - Conocer las novedades que aparecen con la versión Nivel 3 de las Hojas de estilo en cascada (CSS3).

Salidas Laborales:

Programación, Desarrollo, Informática, Diseño web, Diseño gráfico.

Resumen:

Si trabaja en el ámbito de la programación y desarrollo y quiere especializarse en el diseño de web e interfaces este es su momento, con el Master en Diseño de Interface y Front-End con HTML, CSS3 y JQuery podrá adquirir los conocimientos oportunos para desarrollar esta función de la mejor manera posible, aplicando diferentes estrategias para desarrollar interfaces con herramientas como Photoshop e Illustrator.

Metodología:

Entre el material entregado en este curso se adjunta un documento llamado Guía del Alumno dónde aparece un horario de tutorías telefónicas y una dirección de e-mail dónde podrá enviar sus consultas, dudas y ejercicios. Además recibirá los materiales didácticos que incluye el curso para poder consultarlos en cualquier momento y conservarlos una vez finalizado el mismo.La metodología a seguir es ir avanzando a lo largo del itinerario de aprendizaje online, que cuenta con una serie de temas y ejercicios. Para su evaluación, el alumno/a deberá completar todos los ejercicios propuestos en el curso. La titulación será remitida al alumno/a por correo una vez se haya comprobado que ha completado el itinerario de aprendizaje satisfactoriamente.

Temario:

PARTE 1. PROGRAMACIÓN DE PÁGINAS WEB CON JAVASCRIPT

UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A LAS PÁGINAS WEB
  1. Introducción
  2. Programación del lado del cliente
  3. Programación del lado del Servidor
  4. ¿Qué utilizaremos?
  5. ¿Qué necesita saber?
  6. Nuestro primer ejemplo
UNIDAD DIDÁCTICA 2. INTRODUCCIÓN A JAVASCRIPT
  1. La etiqueta SCRIPT
  2. Contenido Alternativo
  3. Variables
  4. Tipos de Datos
  5. Operadores
  6. Cuadros de diálogo
  7. Práctica 2
UNIDAD DIDÁCTICA 3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN
  1. Introducción
  2. Estructuras de decisión
  3. Estructuras lógicas
  4. Estructuras de repetición
  5. Definir funciones
  6. Llamadas a funciones
  7. Ámbito de las variables
  8. Práctica 3
UNIDAD DIDÁCTICA 4. OBJETOS EN JAVASCRIPT
  1. Introducción
  2. La jerarquía de objetos
  3. Propiedades y Eventos
  4. Métodos
  5. Práctica 4
UNIDAD DIDÁCTICA 5. LOS OBJETOS LOCATION E HISTORY
  1. ¿Qué es un URL?
  2. El Objeto Location
  3. Redirigir a otra página
  4. El Objeto History
  5. Práctica 5
UNIDAD DIDÁCTICA 6. EL OBJETO DOCUMENT
  1. Introducción
  2. La propiedad Title
  3. Los colores de la página
  4. El método write
  5. El conjunto images
  6. Práctica 6
UNIDAD DIDÁCTICA 7. EL OBJETO FORM
  1. Formularios HTML
  2. El conjunto forms
  3. La propiedad elements
  4. Validar la información
  5. ¿Cuándo realizar la validación?
  6. Tipos de Validación
  7. Práctica 7
UNIDAD DIDÁCTICA 8. LOS OBJETOS FRAME, NAVIGATOR Y SCREEN
  1. El conjunto frames
  2. El objeto navigator
  3. El objeto screen
  4. Práctica 8

PARTE 2. UML 2.0: PATRONES DE DISEÑO DE SOFTWARE

UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A UML
  1. Introducción
  2. El origen del UML: Unified Modeling Language
  3. El Proceso Unificado
  4. MDA: Model Driven Architecture
UNIDAD DIDÁCTICA 2. CONCEPTOS DE LA ORIENTACIÓN A OBJETOS
  1. Introducción
  2. El objeto
  3. La abstracción
  4. Clases de objetos
  5. Encapsulación
  6. Herencia
  7. Especialización y generalización
  8. Clases abstractas y concretas
  9. Polimorfismo
  10. Composición
  11. La especialización de los elementos: la noción de estereotipo en UML
UNIDAD DIDÁCTICA 3. MODELADO I
  1. Modelado de Requisitos: Diagrama de los casos de uso

    2. - Casos de uso

    - Actor

    - Escenario

    - Representación textual de los casos de uso

  2. Modelado de la dinámica

    3. - Diagrama de secuencia

    - Diagrama de comunicación

    - Marcos de interacción

  3. Modelado de objetos

    4. - Conocer los objetos del sistema por descomposición

    - Representación de clases

    - Las asociaciones entre objetos

    - Relación de generalización/especialización entre clases

    - Diagrama de objetos o instancias

    - Diagrama de estructura compuesta

UNIDAD DIDÁCTICA 4. ESTRUCTURACIÓN DE LOS ELEMENTOS DE MODELADO
  1. Introducción
  2. Empaquetado y diagrama de empaquetado
  3. Asociaciones entre empaquetados
UNIDAD DIDÁCTICA 5. MODELADO II:
  1. Modelado de objetos

    2. - La noción de estado

    - El cambio de estado

    - Elaboración del diagrama de estados-transiciones

    - El diagrama de timing

  2. Modelado de las actividades

    3. - Las actividades y los encadenamientos de actividades

    - Las particiones o calles

    - Las actividades compuestas

    - El diagrama de vista de conjunto de las interacciones

  3. Modelado de la arquitectura del sistema

    4. - El diagrama de componentes

    - El diagrama de despliegue

UNIDAD DIDÁCTICA 6. LOS PERFILES
  1. Introducción
  2. Los perfiles
  3. Estereotipos
  4. Tagged values
UNIDAD DIDÁCTICA 7. VISUAL PARADIGM
  1. Introducción
  2. Instalación
  3. Interface
  4. Crear un Proyecto
  5. Guardar un proyecto
  6. Diagrama de clases

    7. - Crear Y editar un diagrama de clases

    - Crear y editar elementos

    - Agregar atributos y operaciones

    - Crear generalización

    - Crear asociación

  7. Análisis textual

    8. - Crear diagrama de análisis textual

    - Determinar clases y elementos

    - Crear clases candidatas

  8. Diagrama de componentes

    9. - Crear un componente

    - Crear una interface

PARTE 3. PROGRAMACIÓN EN JQUERRY

MÓDULO 1. PROGRAMACIÓN CON JQUERY

UNIDAD DIDÁCTICA 1.INICIACIÓN A LAS PÁGINAS WEBS CON JQUERY
  1. Introducción
  2. Presentación
  3. ¿Cómo iniciar Jquery?
  4. ¿Dónde podemos documentarnos?
  5. Herramientas necesarias
UNIDAD DIDÁCTICA 2.CONCEPTOS BÁSICOS DE JAVASCRIPT
  1. Introducción
  2. Sintaxis Básica
  3. Operadores
  4. Control de flujo
  5. Arrays y Objetos
  6. Funciones
UNIDAD DIDÁCTICA 3.CONCEPTOS BÁSICOS DE JQUERY
  1. Introducción
  2. Obteniendo JQuery 1.9.1
  3. El nucleo de jQuery
  4. Cargar Jquery desde Google
  5. Novedades de Jquery 1.9
UNIDAD DIDÁCTICA 4.SELECTORES
  1. Introducción
  2. Selectores básicos en jQuery
  3. Selectores de jerarquía
  4. Filtros en Jquery
UNIDAD DIDÁCTICA 5.EVENTOS
  1. Introducción
  2. Evento de carga de Página
  3. Eventos en Jquery
  4. El objeto Event
  5. Todavía más Eventos de Jquery
UNIDAD DIDÁCTICA 6.ATRIBUTOS EN JQUERY
  1. Introducción
  2. Operaciones sobre clases
  3. Leer Atributos
  4. Modificar Atributos
  5. Modificar varios valores de atributos a la vez
  6. Añadir atributos con Attr
  7. Eliminar un atributos con removeAttr()
UNIDAD DIDÁCTICA 7.CSS EN JQUERY
  1. Introducción
  2. Acceso a propiedades con .css()
  3. Modificar propiedades css con .css(nombre_propiedad_css, valor)
UNIDAD DIDÁCTICA 8.AJAX EN JQUERY
  1. Introducción
  2. Conceptos Claves
  3. Cargar un Archivo
  4. El método GET o POST
  5. Cargar un Script
  6. El método AJAX de jQuery
UNIDAD DIDÁCTICA 9.FORMULARIOS
  1. Introducción
  2. Formularios
UNIDAD DIDÁCTICA 10.EFECTOS EN JQUERY
  1. Introducción
  2. Los efectos show() y hide()
  3. Efectos de fundido
  4. Creación de una animación
  5. Envío de funciones callback
  6. Cola de efectos
  7. Efectos con desplazamientos
UNIDAD DIDÁCTICA 11.JQUERY UI
  1. Introducción
  2. Instalación
  3. Usando jQuery UI en nuestra página web
  4. Plugin draggable
  5. Componente Dialog
  6. Componente Button
UNIDAD DIDÁCTICA 12.PLUG-IN EN JQUERY
  1. Plugins
  2. Desarrollar Plug-ins
  3. Añadir nuevos métodos abreviados
  4. Parámetros del método
  5. Otras funciones para plug-ins
  6. Compartir un Plug-in

MÓDULO 2. CURSO PRÁCTICO JQUERY

PARTE 4. DISEÑO WEB AVANZADO CON HTML5 Y CSS3

UNIDAD DIDÁCTICA 1. HERRAMIENTAS NECESARIAS
  1. Introducción
  2. Editor de texto
  3. Navegadores
UNIDAD DIDÁCTICA 2. INTRODUCCIÓN HTML
  1. Introducción HTML
  2. ¿Cómo creamos documento HTML?
  3. Características básicas
UNIDAD DIDÁCTICA 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS
  1. Textos en HTML
  2. Enlaces
  3. Listas en HTML
  4. Imágenes y objetos
UNIDAD DIDÁCTICA 4. TABLAS, FORMULARIOS Y ESTRUCTURAS
  1. Tablas
  2. Formularios
  3. Estructuras y layout
UNIDAD DIDÁCTICA 5. OTRAS ETIQUETAS IMPORTANTES
  1. Otras etiquetas importantes
UNIDAD DIDÁCTICA 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN
  1. ¿Qué es la Metainformación?
  2. Accesibilidad
  3. Validación
UNIDAD DIDÁCTICA 7. INTRODUCCIÓN CSS
  1. Introducción CSS
  2. Soporte de CSS en navegadores
  3. Especificación oficial
  4. Funcionamiento básico de CSS
  5. ¿Cómo incluir CSS en la Web?
  6. Estilo básico
  7. Medios CSS
  8. Comentarios
  9. Sintaxis de la definición
UNIDAD DIDÁCTICA 8. SELECTORES, UNIDADES DE MEDIDA Y COLORES
  1. Selectores CSS
  2. Unidades de medida
  3. Colores
UNIDAD DIDÁCTICA 9. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN
  1. Modelo de cajas
  2. Propiedades de las cajas
  3. Margen, relleno, bordes y modelo de cajas
  4. Posicionamiento y visualización
  5. Posicionamiento
  6. Visualización
UNIDAD DIDÁCTICA 10. ESTRUCTURAR UNA PÁGINA ?LAYOUT?
  1. Introducción a layout
  2. ¿Cómo centrar una página horizontalmente?
  3. ¿Cómo centrar una página verticalmente?
  4. Estructura y layout
  5. Altura/anchuras máximas y mínimas
  6. Estilos avanzados
UNIDAD DIDÁCTICA 11. TEXTO, ENLACES, IMÁGENES Y LISTAS
  1. Textos en CSS
  2. Enlaces
  3. Imágenes
  4. Listas
UNIDAD DIDÁCTICA 12. TABLAS, FORMULARIOS Y SHORTHAND
  1. Tablas
  2. Formulario
UNIDAD DIDÁCTICA 13. OTRAS UTILIDADES DE CSS
  1. Versión para imprimir
  2. Personalizar el cursor
  3. Hacks y filtros
  4. Prioridad en las declaraciones
  5. Validar CSS
  6. Recomendaciones Generales
  7. Recursos útiles
UNIDAD DIDÁCTICA 14. FIREBUG
  1. ¿Qué es Firebug?
  2. ¿Como se instala?
  3. ¿Como usamos Firebug?
UNIDAD DIDÁCTICA 15. INTRODUCCIÓN HTML5
  1. ¿Qué es HTML5?
  2. ¿Cuáles son las mejoras?
  3. Etiquetas Obsoletas
  4. Etiquetas modificadas
  5. Lista de etiquetas HTML5
  6. Atributos eliminados
  7. Otros cambios
  8. Estructura HTML5
  9. Nueva estructuración del body
  10. Otros elementos nuevos de estructuración
UNIDAD DIDÁCTICA 16. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES
  1. Introducción a atributos globales
  2. Nuevos atributos
  3. Introducción a los nuevos eventos.
UNIDAD DIDÁCTICA 17. NUEVOS ELEMENTOS SEMÁNTICOS
  1. Elemento bdi
  2. Elemento command
  3. Elemento data
  4. Elementos details
  5. Elemento mark
  6. Elemento meter
  7. Elemento progress
  8. Elemento ruby
  9. Elemento time
  10. Elemento wbr
UNIDAD DIDÁCTICA 18. MEJORAS EN LOS FORMULARIOS
  1. Nuevos elementos para los Formularios
  2. Cambios en el atributo type (input)
  3. Nuevos atributos para form
  4. Nuevos atributos para fieldset
  5. Nuevos atributos para input
  6. Nuevos atributos para textarea
UNIDAD DIDÁCTICA 19. OTRAS MEJORAS DE HTML5
  1. Introducción a los elementos multimedia
  2. Etiqueta source
  3. Etiqueta track
  4. Elemento video
  5. Elemento audio
  6. Elemento embed
  7. Elemento canvas
  8. Introducción a MathML
  9. Introducción a SVG
  10. Introducción a Drag and Drop
  11. Validador HTML5
UNIDAD DIDÁCTICA 20. INTRODUCCIÓN A CSS3
  1. Introducción
  2. Unidades, colores y fuentes
  3. Nuevos Selectores y pseudo-clases
UNIDAD DIDÁCTICA 21. ANIMACIONES, FONDOS Y BORDES
  1. Propiedades para la animación
  2. Nuevas propiedades para los fondos
  3. Nuevas propiedades para Bordes
UNIDAD DIDÁCTICA 22. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES
  1. Propiedades de las cajas
  2. Propiedades de las cajas flexibles
  3. Propiedades del color
  4. Propiedades para las Fuentes
UNIDAD DIDÁCTICA 23. ENLACES Y MULTI-COLUMNAS
  1. Propiedades para los hiperenlaces
  2. Propiedades de las multi-columnas
UNIDAD DIDÁCTICA 24. TEXTO Y 2D/3D TRANSFORMACIONES
  1. Propiedades para texto
  2. Propiedad 2D/3D Transform
UNIDAD DIDÁCTICA 25. TRANSICIONES E INTERFAZ DE USUARIO
  1. Propiedades para las transiciones
  2. Propiedades para la interfaz de usuario
  3. Validación CSS3

PARTE 5. FUNDAMENTOS DEL DISEÑO WEB FRONT-END

UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A FUNDAMENTOS DEL FRONT-END
  1. Desarrollando para front-end
  2. Frameworks, librerías, plugins, widgets
  3. Herramientas de creación de código
  4. Instalando el servidor Apache: WAMP
  5. Qué es responsive design y por qué es importante
  6. Archivos base de Fundamentos del front-end
UNIDAD DIDÁCTICA 2. TECNOLOGÍAS IMPLICADAS EN EL DESARROLLO FRONT-END
  1. HTML. La estructura de nuestra información
  2. HTML5 y en qué se diferencia de HTML
  3. La importancia de la estructura del HTML
  4. CSS y CSS3
  5. Wireframes, mockups y prototipos
  6. Responsive design: diseño fluido. Media queries
  7. JavaScript en front-end
  8. API de JavaScript
  9. Ejemplo de API: Canvas
  10. Ejemplo de API: Google maps
UNIDAD DIDÁCTICA 3. FRAMEWORKS: FACILITANDO LA PROGRAMACIÓN FRONT-END
  1. Frameworks CSS
  2. Frameworks JavaScript
  3. Introducción a Bootstrap. Aplicando Bootstrap a mi sitio
  4. Diseñando para Bootstrap
  5. Personalizando el HTML y el CSS
  6. Usando la rejilla de Bootstrap
  7. Formularios con Bootstrap. Controles del framework
  8. Comparación de los preprocesadores: LESS, Sass, Stylus
  9. Sass. Instalación y primeros pasos
  10. Usando variables y funciones CSS desde Sass
  11. Reutilizando código con los mixins
  12. Estructuras condicionales en Sass
  13. Introducción a jQuery. Aplicando jQuery a mi HTML
  14. Ejemplo de uso de eventos, selectores y métodos con jQuery
  15. Ajax. Modificando el HTML con jQuery
  16. Controles basados en jQuery UI: menú y acordeón
  17. Backbone.js y JavaScript orientado a objetos
  18. Creando colecciones de modelos: la parte Model
  19. Aplicando templates: la parte View
  20. Vinculando eventos: la parte Controller
  21. Qué es jQuery Mobile. PhoneGap
  22. Instalando jQuery Mobile y dando aspecto a mi app
  23. Construyendo contenidos con jQuery Mobile
  24. Navegación con jQuery Mobile
  25. Personalizando el diseño con jQueryMobile
UNIDAD DIDÁCTICA 4. BUENAS PRÁCTICAS EN DESARROLLO FRONT-END
  1. Trabajo en equipo: las partes del proyecto web
  2. Generación de código front-end
  3. Estructura de la aplicación completa

PARTE 6. EJEMPLO PRÁCTICO DE DISEÑO DE INTERFAZ

UNIDAD DIDÁCTICA 1. INTRODUCCIÓN AL CURSO DE DISEÑO DE INTERFAZ CON SKETCH
  1. Objetivos del curso Ejemplo práctico de diseño de interfaz
  2. Archivos base de Ejemplo práctico de diseño de interfaz
  3. Interfaz de Sketch 2
  4. Novedades en Sketch 3
  5. Cómo vamos a trabajar con Sketch
  6. Colores y tipografía en Sketch
  7. Dónde conseguir imágenes
  8. Qué es un UI Kit
UNIDAD DIDÁCTICA 2. COMPONENTES BÁSICOS DEL UI KIT
  1. Empezando a crear un menú web
  2. Completamos nuestro menú web
  3. Sistemas de paginación en Sketch
  4. Ejemplo de slider en Sketch
  5. Campos de formulario en nuestra interfaz
  6. Botones sociales en nuestro kit de interfaz
  7. Barras de progreso de nuestro kit
  8. Notificaciones para nuestro kit de interfaz
  9. Botones básicos con Sketch
  10. Bloques de contenido básico en nuestro kit
  11. Estilos de texto con Sketch 3
  12. Símbolos y exportación con Sketch 3
UNIDAD DIDÁCTICA 3. OTROS COMPONENTES DE NUESTRO UI KIT
  1. Simulando un FAQ con Sketch
  2. Presentación de perfil en nuestro kit de interfaz
  3. Tag cloud o nube de etiquetas
  4. Cita de autor en nuestro kit
  5. Mini player musical: fondo y barra
  6. Mini player musical: botones
  7. Despedida

PARTE 7. DISEÑO DE INTERFAZ CON PHOTOSHOP E ILLUSTRATOR

UNIDAD DIDÁCTICA 1. PREPARACIÓN
  1. Decisiones previas
  2. Contenidos
  3. Distribuir espacios
  4. Definir comportamientos
  5. Zonas con contenido
UNIDAD DIDÁCTICA 2. EL DISEÑO
  1. El Menú
  2. Los proyectos
  3. Zona de proyectos
  4. Mostrar los trabajos
  5. La zona de trabajos
  6. Parte de cliente
  7. Zona de cliente
  8. Ampliar visualización
  9. Presentar trabajos
  10. Datos de los trabajos
  11. Información escrita
UNIDAD DIDÁCTICA 3. LA PROGRAMACIÓN
  1. Recapitular para continuar
  2. Máscaras Flex
  3. Contenidos para Flex
  4. Posibilidades múltiples
  5. Resumiendo
UNIDAD DIDÁCTICA 4. LOS CONTENIDOS
  1. Los textos
  2. Las imágenes
  3. Cambiar tamaños
  4. Cambios restringidos
  5. Recapitulando
  6. Cierre y despedida