Curso gratis Diseño Web Mobile con Sketch

Curso Gratis Online para Trabajadores y Empresas

Si eres trabajador en Régimen General, disfruta del curso gratis online a través de la formación bonificada para empresas.

Nuestros cursos gratis están disponibles en modalidad online o a distancia, consúltanos para informarse de la modalidad del curso gratis para trabajadores de su interés.

OBJETIVOS DEL CURSO GRATIS DISEÑO WEB MOBILE CON SKETCH

Si trabaja en el sector de la programación y desarrollo y desea especializarse en el diseño web este es su momento, con el Curso de Diseño Web Mobile con Sketch podrá adquirir los conocimientos necesarios para desarrollar esta labor con éxito. Con este curso, aprenderás a mejorar las páginas Web de modo sencillo, sin ser necesaria una experiencia previa en programación, además de aprender el diseño web para teléfonos móviles con HTML5, CSS3 y JavaScript y diseñando una web dando importancia al contexto en el que se verá.

CONTENIDO DEL CURSO GRATIS DISEÑO WEB MOBILE CON SKETCH

PARTE 1. Diseño Web Mobile First con Sketch

Unidad Didáctica 1. Introducción al diseño Mobile First con Sketch

1. Propósito y contenido del curso de Diseño web Mobile First usando Sketch
2. ¿Qué significa Mobile First y por qué es importante?
3. Frameworks Mobile First y retículas: conceptos, usos y ventajas
4. Metas y objetivos del curso de Diseño web Mobile First con Sketch
5. Briefing y planificación previa del proyecto

Unidad Didáctica 2. Ejercicio práctico: Diseño y maquetación de una landing page en versión móvil

1. Creación del documento para la vista móvil
2. Diseño de la sección de bienvenida
3. Desarrollo de la sección de bienvenida (repetido por error, se puede eliminar o ajustar)
4. Construcción del bloque de contenidos con Sketch
5. Diseño de un bloque de ancho completo con vídeo incluido
6. Creación de una zona para testimonios de usuarios
7. Aplicación de técnicas de diseño efectivo para captar la atención

Unidad Didáctica 3. Ejercicio práctico: Maquetación de una landing page en versión escritorio

1. Revisión y elaboración del documento completo de la landing page
2. Maquetación de la sección de bienvenida en escritorio
3. Desarrollo del bloque de contenidos principal
4. Configuración del bloque de ancho completo con vídeo
5. Diseño de los terceros y cuartos bloques de contenido
6. Implementación de llamadas a la acción y newsletter
7. Creación del footer de la landing page

Parte 2. Diseño Web adaptado a dispositivos móviles con HTML5, CSS3 y JavaScript

Módulo 1. JavaScript

Unidad Didáctica 1. Fundamentos de las páginas web

1. Introducción a las páginas web y su estructura
2. Programación del lado del cliente: qué es y cómo funciona
3. Programación del lado del servidor: conceptos básicos
4. Herramientas y tecnologías que utilizaremos
5. Conocimientos previos necesarios para aprender JavaScript

Unidad Didáctica 2. Introducción a JavaScript

1. La etiqueta <script> y su uso
2. Contenido alternativo y fallback
3. Variables y su declaración
4. Tipos de datos en JavaScript
5. Operadores básicos y avanzados
6. Uso de cuadros de diálogo: alert, confirm, prompt

Unidad Didáctica 3. Conceptos básicos de programación

1. Introducción a la lógica de programación
2. Estructuras condicionales: if, else, switch
3. Operaciones lógicas y booleanas
4. Estructuras de repetición: for, while, do-while
5. Definición y uso de funciones
6. Llamadas y parámetros en funciones
7. Ámbito y alcance de las variables

Unidad Didáctica 4. Objetos en JavaScript

1. Introducción a los objetos y su importancia
2. Jerarquía y estructura de objetos en JS
3. Propiedades y eventos asociados
4. Creación y uso de métodos en objetos

Unidad Didáctica 5. Objetos Location y History

1. ¿Qué es una URL y cómo funciona?
2. El objeto location: manipulación y redirecciones
3. Cómo redirigir a otra página con JavaScript
4. El objeto history: navegación entre páginas

Unidad Didáctica 6. El objeto Document

1. Introducción al objeto Document
2. Propiedad title: cambiar el título de la página
3. Modificar colores y estilos a través del DOM
4. El método write(): escribir contenido dinámico
5. Manipulación del conjunto de imágenes

Unidad Didáctica 7. El objeto Form

1. Formularios HTML y su estructura
2. El conjunto forms y su utilización
3. Propiedad elements: acceder a los campos
4. Validar datos ingresados por el usuario
5. Momentos adecuados para validar
6. Tipos de validación: en cliente y en servidor

Unidad Didáctica 8. Otros objetos en JavaScript: Frame, Navigator y Screen

1. El conjunto frames: manejo y uso
2. El objeto navigator: información del navegador
3. El objeto screen: detalles de la pantalla del usuario

Módulo 2. Diseño avanzado de páginas web con HTML5 y CSS3

Unidad Didáctica 1. Herramientas esenciales

1. Introducción a las herramientas necesarias
2. Elegir y usar un editor de texto adecuado
3. Navegadores para pruebas y debugging

Unidad Didáctica 2. Introducción a HTML

1. Conceptos básicos de HTML
2. Cómo crear y estructurar un documento HTML
3. Características fundamentales y buenas prácticas

Unidad Didáctica 3. Texto, enlaces, listas, imágenes y objetos multimedia

1. Trabajar con textos en HTML
2. Creación de enlaces y navegación
3. Listas ordenadas y desordenadas
4. Incorporación de imágenes y objetos multimedia

Unidad Didáctica 4. Tablas, formularios y estructuras de diseño

1. Construcción de tablas para datos
2. Creación y validación de formularios
3. Estructuras y layout para organizar contenidos

Unidad Didáctica 5. Etiquetas importantes y su uso

1. Otras etiquetas relevantes para estructurar contenido

Unidad Didáctica 6. Metainformación, accesibilidad y validación

1. ¿Qué es la metainformación y cómo usarla?
2. Principios de accesibilidad web
3. Procedimientos y herramientas para validar código

Unidad Didáctica 7. Introducción a CSS

1. Conceptos básicos de CSS
2. Compatibilidad y soporte en navegadores
3. Especificación y sintaxis oficial
4. Formas de incluir CSS en la web
5. Estilos básicos y reglas
6. Medios y adaptaciones
7. Comentarios y organización del código
8. Sintaxis y reglas de definición

Unidad Didáctica 8. Selectores, unidades y colores

1. Principales selectores CSS
2. Unidades de medida para estilos
3. Paletas y gestión de colores

Unidad Didáctica 9. Modelos de cajas, posicionamiento y visualización

1. Modelo de cajas en CSS
2. Propiedades para manipular las cajas
3. Margenes, rellenos, bordes y estructura de cajas
4. Posicionamiento de elementos y técnicas de visualización
5. Tipos de posicionamiento (static, relative, absolute, fixed)
6. Propiedades de visualización: block, inline, flex, grid

Unidad Didáctica 10. Diseño de layouts y estructura de páginas

1. Introducción a layouts en CSS
2. Cómo centrar una página horizontalmente
3. Cómo centrar una página verticalmente
4. Crear estructuras y layouts adaptables
5. Control de alturas y anchuras máximas y mínimas
6. Estilos avanzados para layouts complejos

Unidad Didáctica 11. Estilización de textos, enlaces, imágenes y listas

1. Estilizar textos con CSS
2. Enlaces y su aspecto visual
3. Imágenes y su presentación
4. Listas y estilos asociados

Unidad Didáctica 12. Tablas, formularios y código abreviado (shorthand)

1. Creación y estilo de tablas
2. Diseño y validación de formularios

Unidad Didáctica 13. Otras utilidades y trucos con CSS

1. Estilos para impresión
2. Personalización del cursor
3. Hacks, filtros y efectos especiales
4. Prioridad y cascada en las declaraciones CSS
5. Validar y depurar CSS
6. Recomendaciones para un código limpio y eficiente
7. Recursos y herramientas útiles

Unidad Didáctica 14. Uso de Firebug y herramientas de desarrollo

1. ¿Qué es Firebug y para qué sirve?
2. Cómo instalar y configurar Firebug
3. Cómo aprovechar Firebug para depurar y editar estilos

Unidad Didáctica 15. Introducción a HTML5

1. ¿Qué es HTML5 y cuáles son sus ventajas?
2. Mejoras principales respecto a versiones anteriores
3. Etiquetas obsoletas y su reemplazo
4. Etiquetas que han sido modificadas
5. Listado completo de etiquetas HTML5
6. Atributos eliminados y cambios en atributos
7. Otros cambios relevantes
8. Organización básica de una estructura HTML5
9. Nuevo esquema del <body> y elementos de estructuración

Unidad Didáctica 16. Nuevos atributos, eventos y pseudo-clases en HTML5

1. Introducción a atributos globales y nuevos atributos
2. Eventos nuevos y cómo utilizarlos

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 formularios con HTML5

1. Nuevos elementos para formularios
2. Actualizaciones en el atributo type en <input>
3. Nuevos atributos en <form>
4. Nuevos atributos en <fieldset>
5. Nuevos atributos en <input>
6. Nuevos atributos en <textarea>

Unidad Didáctica 19. Otras mejoras en HTML5 y multimedia

1. Introducción a 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 y SVG
9. Conceptos básicos de Drag and Drop
10. Validador oficial de HTML5

Unidad Didáctica 20. Introducción a CSS3

1. Qué es CSS3 y sus beneficios
2. Unidades, colores y fuentes en CSS3
3. Nuevos selectores y pseudo-clases para estilos avanzados

Unidad Didáctica 21. Animaciones, fondos y bordes en CSS3

1. Propiedades para crear animaciones
2. Nuevas propiedades para fondos y degradados
3. Nuevas propiedades para bordes y efectos

Unidad Didáctica 22. Cajas, flexbox, colores y tipografías

1. Propiedades de las cajas y layouts flexibles
2. Gestión avanzada del color y fondos
3. Propiedades para definir fuentes y tipografías

Unidad Didáctica 23. Enlaces, multi-columnas y layout

1. Propiedades para estilos en enlaces
2. Configuración de multi-columnas en CSS

Unidad Didáctica 24. Texto y transformaciones 2D/3D

1. Estilización avanzada de textos
2. Transformaciones en 2D y 3D con CSS

Unidad Didáctica 25. Transiciones y diseño de interfaces

1. Propiedades para transiciones suaves
2. Estilizado de componentes de interfaz con CSS
3. Validación y compatibilidad con CSS3

Unidad Didáctica 26. Diseño móvil con CSS3 y JavaScript

1. Introducción al diseño adaptable para móviles
2. Web responsive con HTML5, CSS3 y jQuery Mobile
3. Uso de Media Queries para diseño adaptable
4. Almacenamiento local: Local Storage
5. Frameworks para desarrollar apps móviles basadas en HTML
6. Cómo publicar una app en Google Play
7. Actividad práctica de desarrollo móvil