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

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

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

- Casos de uso

- Actor

- Escenario

- Representación textual de los casos de uso

2. Modelado de la dinámica

- Diagrama de secuencia

- Diagrama de comunicación

- Marcos de interacción

3. Modelado de objetos

- 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

- 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

- 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

- 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

- 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

- Crear diagrama de análisis textual

- Determinar clases y elementos

- Crear clases candidatas

8. Diagrama de componentes

- Crear un componente

- Crear una interface

MÓDULO 1. PROGRAMACIÓN CON JQUERY

MÓDULO 2. CURSO PRÁCTICO JQUERY

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

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

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

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