Diseño Web Mobile con Sketch

CAMPO DE CONOCIMIENTO 1.DISEÑO WEB MOBILE FIRST CON SKETCH

SCORM 1. PRESENTACIÓN DE DISEÑO MOBILE FIRST CON SKETCH

Funcionalidad del curso Diseño web mobile first con Sketch

¿Qué es mobile first?

Que es y para que se usa Frameworks mobile first y retículas

Objetivo del curso Diseño web mobile first con Sketch

Briefing y planificación del proyecto

SCORM 2. EJERCICIO DISEÑO Y MAQUETACIÓN DE UNA LANDING PAGE. VERSIÓN MÓVIL

Crear documento en versión móvil

Diseño de la sección de bienvenida

Diseño de la sección de bienvenida

Bloque de contenidos con Sketch

Bloque full width con vídeo

Crear zona de testimonios

Diseño efectivo

SCORM 3. EJERCICIO DE DISEÑO Y MAQUETACIÓN DE UNA LANDING PAGE. VERSIÓN ESCRITORIO

Revisión y creación del documento de landing page

Escritorio de la sección de bienvenida

Bloque de contenidos

Bloque full width con vídeo

Tercer y cuarto bloque de contenidos

Uso y acción y newsletter

Footer de nuestra landing

CAMPO DE CONOCIMIENTO 2. DISEÑO WEB PARA DISPOSITIVOS MÓVILES CON HTML5 + CSS3 + JAVASCRIPT

CAMPO DE CONOCIMIENTO 1. JAVASCRIPT

SCORM 1. INTRODUCCIÓN A LAS PÁGINAS WEB

Introducción

Programación del lado del cliente

Programación del lado del servidor

¿Qué utilizaremos?

¿Qué necesita saber?

SCORM 2. INTRODUCCIÓN A JAVASCRIPT

La etiqueta SCRIPT

Contenido alternativo

Variables

Tipos de datos

Operadores

Cuadros de diálogo

SCORM 3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN

Introducción

Estructuras de decisión

Estructuras lógicas

Estructuras de repetición

Definir funciones

Llamadas a funciones

Ámbito de las variables

SCORM 4. OBJETOS EN JAVASCRIPT

Introducción

La jerarquía de objetos

Propiedades y eventos

Métodos

SCORM 5. LOS OBJETOS LOCATION E HISTORY

¿Qué es una URL?

El objeto Location

Redirigir a otra página

El objeto History

SCORM 6. EL OBJETO DOCUMENT

Introducción

La propiedad Title

Los colores de la página

El método write

El conjunto images

SCORM 7. EL OBJETO FORM

Formularios HTML

El conjunto forms

La propiedad elements

Validar la información

¿Cuándo realizar la validación?

Tipos de validación

SCORM 8. LOS OBJETOS FRAME, NAVIGATOR Y SCREEN

El conjunto frames

El objeto navigator

El objeto screen

CAMPO DE CONOCIMIENTO 2. DISEÑO WEB AVANZADO CON HTML5 + CSS3

SCORM 1. HERRAMIENTAS NECESARIAS

Introducción

Editor de texto

Navegadores

SCORM 2. INTRODUCCIÓN HTML

Introducción HTML

¿Cómo creamos documento HTML?

Características básicas

SCORM 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS

Textos en HTML

Enlaces

Listas en HTML

Imágenes y objetos

SCORM 4. TABLAS, FORMULARIOS Y ESTRUCTURAS

Tablas

Formularios

Estructuras y layout

SCORM 5. OTRAS ETIQUETAS IMPORTANTES

Otras etiquetas importantes

SCORM 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN

¿Qué es la Metainformación?

Accesibilidad

Validación

SCORM 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

SCORM 8. SELECTORES, UNIDADES DE MEDIDA Y COLORES

Selectores CSS

Unidades de medida

Colores

SCORM 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

SCORM 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

SCORM 11. TEXTO, ENLACES, IMÁGENES Y LISTAS

Textos en CSS

Enlaces

Imágenes

Listas

SCORM 12. TABLAS, FORMULARIOS Y SHORTHAND

Tablas

Formulario

SCORM 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

SCORM 14. FIREBUG

¿Qué es Firebug?

¿Como se instala?

¿Como usamos Firebug?

SCORM 15. 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

SCORM 16. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES

Introducción a atributos globales

Nuevos atributos

Introducción a los nuevos eventos.

SCORM 17. NUEVOS ELEMENTOS SEMÁNTICOS

Elemento bdi

Elemento command

Elemento data

Elementos details

Elemento mark

Elemento meter

Elemento progress

Elemento ruby

Elemento time

Elemento wbr

SCORM 18. 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

SCORM 19. 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

SCORM 20. INTRODUCCIÓN A CSS3

Introducción

Unidades, colores y fuentes

Nuevos Selectores y pseudo-clases

SCORM 21. ANIMACIONES, FONDOS Y BORDES

Propiedades para la animación

Nuevas propiedades para los fondos

Nuevas propiedades para Bordes

SCORM 22. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES

Propiedades de las cajas

Propiedades de las cajas flexibles

Propiedades del color

Propiedades para las Fuentes

SCORM 23. ENLACES Y MULTI-COLUMNAS

Propiedades para los hiperenlaces

Propiedades de las multi-columnas

SCORM 24. TEXTO Y 2D/3D TRANSFORMACIONES

Propiedades para texto

Propiedad 2D/3D Transform

SCORM 25. TRANSICIONES E INTERFAZ DE USUARIO

Propiedades para las transiciones

Propiedades para la interfaz de usuario

Validación CSS3

SCORM 26. MÓVILES

Introducción

Diseño web para teléfonos móviles con HTML5, CSS3 y Jquery mobile

Media Queries

Local Storage

Frameworks para la programación de aplicaciones móviles basadas en HTML

Publicar una aplicación en Google Play

Actividad Práctica