Responsive Web Design con Jquery

PARTE 1 – FUNDAMENTOS DE PROGRAMACIÓN

12 HORAS

MÓDULO 1 – ALGORITMOS Y PROGRAMAS

2 HORAS

** Los algoritmos son el fundamento de la programación de ordenadores. Son el conjunto de acciones u operaciones, el orden en el que se realizan y todos los datos que se manipulan desde un ordenador para llegar a la solución de un problema. Su correcto diseño y funcionamiento es la base para toda programación.

1.1. Qué es un algoritmo.
1.2. Programas y aplicaciones.

1.3. Lenguajes de programación.

1.4. Traductores e intérpretes.

1.4. Compiladores.

MÓDULO 2 – TIPOS DE PROGRAMACIÓN

2 HORAS

2.1. Fases del ciclo de vida de una aplicación.

2.2. Programación desordenada.

2.3. Programación estructurada.

2.4. Programación modular.

2.5. Programación orientada a objetos.

MÓDULO 3 – DIAGRAMAS DE FLUJO

1 HORA

** Los diagramas de flujo son la representación gráfica de un algoritmo. Con ellos podemos representar la secuencia lógica de las operaciones o acciones que debe realizar el ordenador, facilitando a los programadores el entendimiento del problema que resuelve el programa a realizar.

3.1. Diagramas de flujo.

3.2. Elementos de los diagramas de flujo.

3.3. Realizando diagramas de flujo.

MÓDULO 4 – PSEUDOCÓDIGO

1 HORA

** Son instrucciones escritas en un lenguaje orientado a ser entendido por un ordenador. Nos permiten desarrollar los programas que han sido definidos utilizando una serie de elementos y siguiendo unas normas que nos ayuden a entender el problema al que nos enfrentamos para poder después traducirlo al lenguaje de programación elegido.

4.1. Líneas.

4.2. Líneas auxiliares y rayos.

4.3. Rectángulos.

4.4. Círculos.

4.5. Arcos.

4.6. Elipses.

MÓDULO 5 – ELEMENTOS DE UN PROGRAMA

1 HORA

5.1. Instrucciones primitivas.

5.2. Instrucciones de asignación.

5.3. Instrucciones de entrada y salida.

5.4. Palabras reservadas.

5.5. Comentarios.

5.6. Contadores.

5.7. Acumuladores.

5.8. Interruptores.

MÓDULO 6 – ESTRUCTURAS DE CONTROL

1 HORA

6.1. Estructuras de control.
6.2. Alternativa simple.

6.3. Alternativa doble.

6.4. Alternativa múltiple.

6.5. Estructura mientras.

6.6. Estructura repetir.

6.7. Estructura para o desde.

6.8. Estructuras selectivas anidadas.

6.9. Estructuras repetitivas anidadas.

MÓDULO 7 – ESTRUCTURAS DE DATOS: TABLAS

2 HORAS

** Una tabla es una estructura de datos que nos permite almacenar información necesaria para la ejecución de nuestro programa o aplicación. Es importante conocer y analizar los diferentes tipos de tablas que podemos encontrar según sus dimensiones.

7.1. Tablas unidimensionales.

7.2. Tablas bidimensionales.

7.3. Tablas multidimensionales.

7.4. Operaciones con tablas.

MÓDULO 8 – PROGRAMACIÓN MODULAR

1 HORA

** El diseño modular en programación nos permite usar el conocido lema “divide y vencerás”, programación que consiste en dividir un programa en módulos que deben ser lo más específicos posibles.

8.1. La programación modular.

8.2. Funciones.

8.3. Procedimientos.

8.4. Parámetros.

8.5. Paso de parámetros.

8.6. Ámbito de las variables.

8.7. Recursividad.

MÓDULO 9 – PROGRAMACIÓN ORIENTADA A OBJETOS

1 HORA

** Es el tipo de programación más moderna y, a la vez, más utilizada. Se basa en intentar que el código de los programas sea lo más parecido posible a la forma de pensar de las personas.

9.1. La programación orientada a objetos.

9.2. Clases.

9.3. Objetos.

9.4. Relaciones entre clases.

9.5. Abstracción.

9.6. Encapsulamiento.

9.7. Herencia.

9.8. Polimorfismo.

PARTE 2 – RESPONSIVE WEB DESIGN

6 HORAS

MÓDULO 1 – RESPONSIVE WEB DESIGN

2 HORAS

** A raíz del avance experimentado en las últimas décadas en las comunicaciones disponemos de múltiples dispositivos portátiles desde los que acceder a Internet (tablets, netbook, móviles, etc.). El tipo de diseño que permite que nuestra página web se vea correctamente en todos los dispositivos se define como Responsive Web Design.

1.1. Qué es Responsive Web Design.

1.2. Características.

1.3. Ventajas e inconvenientes.

1.4. Crear un diseño adaptable: CSS.

1.5. Ejemplo de una página web con diseño Responsive Web Design.

1.6. Ejemplo de una página web sin diseño Responsive Web Design.

1.7. Cómo comprobar el diseño de tu página web.

1.8. CSS: Medias Queries.

1.9. Mobile first.

1.10. Patrones de diseño adaptivo.

1.11. Diseñar para varios dispositivos en papel.

1.12. Plantillas para diseñar.

1.13. Navegadores que soportan Responsive Web Design.

MÓDULO 2 – CREANDO UN DISEÑO ADAPTABLE

2 HORAS

** Para crear una web Responsive Design tenemos que cumplir una serie de características y utilizar una serie de herramientas como html, CSS u hojas de estilo en cascada.

2.1. Cómo comenzar a diseñar.

2.2. Cómo crear un diseño adaptable.

2.3. El html de mi diseño adaptable.

2.4. Meta tags.

2.5. El CSS de mi diseño adaptable.

2.6. Medias Queries.

2.7. Diseño web fluido.

2.8. Cálculo de porcentajes.

2.9. Fuentes flexibles.

2.10. Imágenes flexibles.

2.11. Resize Windows.

MÓDULO 3 – WEB CON RESPONSIVE DESIGN

2 HORAS

** Cuando realizamos un diseño Responsive Web Design podemos ayudarnos de plantillas creadas por otros desarrolladores que ponen a nuestra disposición los planos para crear nuestros propios diseños. Estos planos o diseños es lo que conocemos como frameworks y este módulo analiza los modelos más comunes.

3.1. Frameworks.

3.2. Booststrap.

3.3. Semantic.

3.4. Skeleton.

3.5. Less Frameworks.

3.6. Columnal.

PARTE 3 – PROGRAMACIÓN CON HTML5

12 HORAS

MÓDULO 1 – HTML5

2 HORAS

1.1. Qué es HTML5.

1.2. La plantilla de HTML5.

1.3. DOCTYPE.

1.4. El elemento HTML.

1.5. El elemento HEAD.

1.6. El elemento body.

1.7. El elemento meta.

1.8. El elemento title.

1.9. El elemento link.

1.10. Funciona HTML5 en navegadores antiguos.

1.11. Cierre de etiquetas en HTML5.

MÓDULO 2 – ESTRUCTURA DE PÁGINAS HTML5

2 HORAS

** Las páginas HTML5 tienen una estructura básica en la que se establecen todos los elementos que va a tener la página, elementos analizados en este módulo.

2.1. El esquema de documento.

2.2. Elemento HEADER.

2.3. Elemento NAV.

2.4. Elemento SECTION.

2.5. Elemento ASIDE.

2.6. Elemento FOOTER.

2.7. Elemento ARTICLE.

2.8. Elemento HGROUP.

2.9. Elemento FIGURE.

2.10. Elemento FIGCAPTION.

2.11. Elemento MARK.

2.12. Elemento PROGRESS y METER.

2.13. Elemento TIME.

2.14. Elemento DIALOG.

2.15. Elemento EMBED.

MÓDULO 3 – NUEVAS CARACTERISTICAS

2 HORAS

3.1. Elementos eliminados en HTML5.

3.2. Atributos eliminados en HTML5.

3.3. Elementos de bloque dentro de vínculos.

3.4. Cambios en el texto.

3.5. Negrita.

3.6. Cursiva.

3.7. Tamaño del texto.

3.8. Elemento CITE.

3.9. Listas de descripción.

3.10. Elemento DETAILS.

3.11. Listas ordenadas personalizadas.

3.12. Estilos con scoped.

MÓDULO 4 – VIDEO Y AUDIO CON HTML5

1 HORA

4.1. El video con HTML5 en los navegadores.

4.2. Elemento VIDEO.

4.3. Atributos del elemento video.

4.4. Formatos de video.

4.5. El atributo AUTOPLAY.

4.6. El atributo LOOP.

4.7. El atributo PRELOAD.

4.8. El atributo POSTER.

4.9. Elemento audio.

4.10. Crear controles personalizados.

MÓDULO 5 – FORMULARIOS WEB CON HTML5: ATRIBUTOS

2 HORAS

5.1. El atributo REQUIRED.

5.2. El atributo AUTOFOCUS.

5.3. El atributo MIN.

5.4. El atributo MAX.

5.5. El atributo PATTERN.

5.6. El atributo PLACEHOLDER.

5.7. El atributo STEP.

5.8. El atributo ACCEPT.

5.9. El atributo READONLY.

5.10. El atributo MÚLTIPLE.

5.11. El atributo FORM.

5.12. El atributo AUTOCOMPLETE.

5.13. El atributo DATALIST.

5.14. El atributo LIST.

MÓDULO 6 – FORMULARIOS WEB CON HTML5: ELEMENTOS

2 HORAS

6.1. Nuevas entradas de datos en formularios.

6.2. El elemento OUTPUT.

6.3. El elemento KEYGEN.

6.4. El elemento FORM.

6.5. El elemento OPTGROUP.

6.6. El elemento TEXTAREA.

MÓDULO 7 – CANVAS DE HTML5

1 HORA

7.1. La etiqueta Canvas de HTML5.

7.2. Para qué sirve Canvas.

7.3. Preparando el lienzo.

7.4. Canvas de HTML5 y JavaScript.

7.5. Dibujo de figuras con Canvas de HTML5.

7.6. Dibujo de líneas y combinación.

7.7. Procesando imágenes.

PARTE 4 – HOJAS DE ESTILO CSS3

12 HORAS

MÓDULO 1 – INTRODUCCIÓN A CSS3

2 HORAS

** El lenguaje CSS u hojas de estilo en cascada nos permite dar estilo a un documento de marcas realizado con HTML o XML. CSS3 es la última versión disponible del lenguaje de marcas y a través de este módulo conoceremos sus principales características.

1.1. Qué es CSS3.

1.2. Selectores CSS3.

1.3. Selectores relacionales.

1.4. Selectores de atributo.

1.5. Pseudo-clases.

1.6. Pseudo-clases estructurales.

1.7. Pseudo-elementos y contenido generado.

1.8. Contenido generado.

MÓDULO 2 – COLORES Y TEXTO EN CSS3

2 HORAS

** El lenguaje CSS nos permite trabajar con los colores y el texto de nuestras páginas web dando un estilo propio a las mismas. CSS3 da soporte a nuevas formas de escribir colores en las páginas web mediante las opciones HSL, HSLA y RGBA.

2.1. Colores HSL.

2.2. Colores HSLA.

2.3. Colores RGBA.

2.4. Opacidad.

2.5. Text-Shadow.

2.6. Text-Overflow.

2.7. Rotura de palabras largas.

2.8. Web Fonts.

2.9. Border-Radius.

2.10. Sombras.

MÓDULO 3 – DEGRADADOS EN CSS3

2 HORAS

** El lenguaje CSS3 nos permite trabajar con diferentes tipos de degradados, lineales, radiales y de repetición. Además, nos da soporte para insertar múltiples imágenes de fondo y definir el tamaño que van a tener nuestras imágenes.

3.1. Degradados lineales.

3.2. Degradados radiales.

3.3. Degradados lineales de repetición.

3.4. Degradados radiales de repetición.

3.5. Múltiples imágenes de fondo.

3.6. Tamaño de fondo.

MÓDULO 4 – TRANSFORMACIONES Y TRANSICIONES

2 HORAS

** El lenguaje CSS3 nos permite realizar transformaciones y transiciones animadas sin necesidad de utilizar otros lenguajes de programación. Son sencillas y pueden ser visualizadas de forma correcta en dispositivos móviles con potencia limitada.

4.1. Transiciones.

4.2. Transition-property.

4.3. Transition-duration.

4.4. Transition-timing-function.

4.5. Transition-delay.

4.6. La propiedad abreviada transition.

4.7. Múltiples transiciones.

4.8. Transformaciones.

4.9. Traslación.

4.10. Escalar.

4.11. Rotación.

4.12. Inclinación.

4.13. Cambiar el origen de la transformación.

MÓDULO 5 – ANIMACIONES EN CSS3

2 HORAS

5.1. Animaciones.

5.2. Fotogramas clave.

5.3. Propiedad animation-name.

5.4. Propiedad animation-duration.

5.5. Propiedad animation-timing-function.

5.6. Propiedad animation-iteration-count.

5.7. Propiedad animation-direction.

5.8. Propiedad animation-delay.

5.9. Propiedad animation-fill-mode.

5.10. Propiedad animation-play-state.

5.11. Propiedad abreviada animation.

MÓDULO 6 – FUENTES Y DISEÑO MULTICOLUMNA EN CSS3

2 HORAS

** El lenguaje CSS3 nos permite trabajar con diferentes fuentes para nuestras páginas web mediante el uso de Font-Face, regla CSS que permite encapsular varias reglas juntas en una declaración para servir como instrucciones para el procesador CSS del navegador.

6.1. Importar fuentes tipográficas mediante Font-face.

6.2. Aplicar la fuente.

6.3. Tipos de fuentes y navegadores.

6.4. La propiedad column-count.

6.5. La propiedad column-gap.

6.6. La propiedad column-width.

6.7. La propiedad abreviada columns.

6.8. Columnas y la propiedad height.

6.9. Propiedad column-rule.

6.10. Salto de columna.

6.11. Inserción de imágenes.

6.12. Textos multicolumna.

PARTE 5 – PROGRAMACIÓN CON JAVASCRIPT

14 HORAS

MÓDULO 1 - JAVASCRIPT

2 HORAS

** JavaScript es un lenguaje de programación que nos permite crear páginas web interactivas con estilo. Los programas realizados con JavaScript no necesitan ser compilados para ejecutarlos, se pueden probar directamente en cualquier navegador.

1.1. ¿Qué es JavaScript?

1.2. Integrar JavaScript en una página web.

1.3. Primer programa en JavaScript.

1.4. Instrucciones.

1.5. Tipos de datos.

1.6. Literales.

1.7. Conversión de tipos.

1.8. Operadores.

1.9. Uso de variables.

1.10. Trabajo con variables.

1.11. Comentarios en JavaScript.

1.12. Sentencia IF.

1.13. Sentencia SWITCH-CASE.

1.14. Bucle while.

1.15. Bucle do-while.

1.16. Bucle for.

1.17. Sentencia BREAK y CONTINUE.

1.18. Matrices.

MÓDULO 2 – FUNCIONES JAVASCRIPT

2 HORAS

2.1. Declaración de funciones.

2.2. Definición de parámetros.

2.3. Valores de retorno.

2.4. Ámbito de las variables.

2.5. Función NUMBER.

2.6. Función STRING.

2.7. Función isNaN.

2.8. Función isFinite.

2.9. Función parseInt.

2.10. Función parseFloat.

2.11. Función ESCAPE.

2.12. Función UNESCAPE.

2.13. Función EVA.

MÓDULO 3 – OBJETOS DE JAVASCRIPT

2 HORAS

3.1. Objeto envoltorio.

3.2. Objeto ARRAY.

3.3. Objeto DATE.

3.4. Objeto MATH.

3.5. Objeto RegExp.

3.6. Objetos del navegador.

3.7. Objeto WINDOW.

3.8. Objeto NAVIGATOR.

3.9. Objeto SCREEN.

3.10. Objeto HISTORY.

3.11. Objeto LOCATION.

3.12. Objeto DOCUMENT.

3.13. Objeto ANCHOR.

3.14. Objeto LINK.

3.15. Objeto IMAGE.

MÓDULO 4 - DOM

2 HORAS

4.1. Árbol de nodos.

4.2. Tipos de nodos.

4.3. Acceso directo a los nodos.

4.4. Creación y eliminación de nodos.

MÓDULO 5 – TRABAJAR CON JAVASCRIPT Y CSS

2 HORAS

5.1. DOM para CSS.

5.2. Atributo STYLE.

5.3. Manipular clases de CSS.

5.4. Manipular reglas de CSS.

5.5. Manipular hojas de estilo.

5.6 Activar y desactivar hojas de estilo.

5.7. Incluir o importar hojas de estilo.

5.8. Embeber hojas de estilo.

MÓDULO 6 - EVENTOS

2 HORAS

** Cuando trabajamos con JavaScript disponemos de una amplia variedad de eventos que podemos utilizar según nuestras necesidades para obtener determinados efectos en nuestras páginas web.

6.1. Eventos en JavaScript.

6.2. Eventos en una página HTML.

6.3. Trabajar con eventos.

6.4. Manejadores como atributos HTML.

6.5. Trabajar con eventos en JavaScript.

6.6 El objeto EVENT.

6.7. Propiedades.

MÓDULO 7 – FORMULARIOS EN JAVASCRIPT

2 HORAS

** Cuando queremos que nuestras páginas web tengan interactividad con los usuarios debemos controlar las acciones que realizan para responderles de algún modo. Una de las opciones que tenemos para llevar a cabo esta interacción son los formularios.

7.1. Definir formulario.

7.2. Cabecera del formulario.

7.3. Elementos del formulario.

7.4. Eventos de formulario.

7.5. Submit.

7.6. Focus.

7.7. Blur.

7.8. Click.

7.9. Change.

7.10. Enfoque de un campo.

7.11. Deshabilitar campos de un formulario.

7.12. Ocultar campos de un formulario.

7.13. Validación de formularios.

7.14. Añadir reglas de validación.

7.15. Mensajes de error avanzados.

7.16. Validación básica.

7.17. Validación avanzada.

7.18. Validación de casillas de selección y botones de opción.

7.19. Dar formato a los mensajes de error.

PARTE 6 – PROGRAMACIÓN CON JQUERY

4 HORAS

MÓDULO 1 – JQUERY

2 HORAS

** JQuery es una biblioteca especial de JavaScript que permite simplificar el modo de interactuar con los documentos HTML. Facilita el desarrollo del código fuente del lado del cliente con JavaScript.

1.1. ¿Qué es JQuery?

1.2. Añadir JQuery a una página HTML.

1.3. Selección de elementos.

1.4. Comprobar selecciones.

1.5. Selección de elementos de un formulario.

1.6. Trabajar con selecciones.

1.7. Utilizar clases para aplicar estilos CSS.

1.8. Dimensiones.

1.9. Atributos.

1.10. Recorrer el DOM.

1.11. Manipulación de elementos.

1.12. Crear nuevos elementos.

1.13. Manipular atributos.

MÓDULO 2 – EVENTOS Y EFECTOS CON JQUERY

2 HORAS

** Cuando trabajamos con JQuery podemos controlar los eventos que se producen en las páginas web. Además se puede trabajar con una serie de efectos que define JQuery, de este modo se permite que el usuario pueda interactuar con la página web.

2.1. ¿Qué es un evento?

2.2. Eventos de ratón.

2.3. Eventos de documento/ventana.

2.4. Eventos de formulario.

2.5. Eventos de teclado.

2.6. Utilizar eventos con JQuery.

2.7. Carga del código HTML.

2.8. Eventos de JQuery.

2.9. El objeto evento.

2.10. Detener el comportamiento normal de un evento.

2.11. Eliminar eventos.

2.12. Gestión avanzada de eventos.

2.13. Mostrar y ocultar efectos.

2.14. Hacer aparecer y desaparecer elementos.

2.15. Deslizar elementos.