Responsive Web Design con Jquery

PARTE 1 – FUNDAMENTOS DE PROGRAMACIÓN

MÓDULO 1 – ALGORITMOS Y PROGRAMAS

** 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.

El correcto diseño y funcionamiento de los algoritmos es base para la 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

** Basándonos en la evolución del desarrollo de programas surgen diferentes tipos de programación que serán analizadas en este módulo del curso: desordenada, estructurada, modular y orientada a objetos.

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

** 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

** 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

** Cuando realizamos un algoritmo en pseudocódigo tenemos que realizar diversas instrucciones que definan lo que el algoritmo debe realizar y que deben ser leídas por el ordenador. Son las llamadas instrucciones primitivas y que van a ser analizadas a lo largo de este módulo.

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

** Las instrucciones de control nos permiten controlar el uso de órdenes de decisiones y de iteraciones en el flujo de nuestros programas.

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

** Una tabla es una estructura de datos que nos permite almacenar información necesaria para la ejecución de nuestro programa o aplicación. En este módulo analizaremos 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

** 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

** 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

MÓDULO 1 – RESPONSIVE WEB DESIGN

** En las últimas décadas ha cambiado el tipo de dispositivos desde los que accedemos a Internet. A raíz del avance en las comunicaciones disponemos de múltiples dispositivos portátiles desde los que acceder (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

** 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.

A lo largo de este módulo sabremos cómo crear nuestra web adaptable, qué necesitamos y qué debemos cumplir.

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

** 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

MÓDULO 1 – HTML5

** HTML es el acrónimo de Hyper Text Markup Language, lenguaje de marcas de hipertexto. Existen diferentes versiones de HTML y este módulo realiza un recorrido por los principales elementos disponibles en HTML5.

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

** 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

** El nuevo HTML5 ha desarrollado una serie de nuevas etiquetas para generar páginas web eliminando algunas válidas en la versión HTML4 y que habían quedado obsoletas.

En este módulo conoceremos los principales cambios entre las dos versiones.

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

** El nuevo HTML5 permite la inclusión de audio y video en las páginas web a través de nuevas etiquetas. En este módulo veremos cómo trabajar con las opciones de video y audio que nos ofrece HTML5.

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

** Los formularios web HTML5 incorporan nuevos elementos que nos permiten realizar acciones en nuestra web que antes solo era posible hacer mediante JavaScript.

En este módulo aprenderemos a trabajar con formularios en HTML5.

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

** Los formularios web HTML5 incorporan nuevos elementos que nos permiten realizar acciones en nuestra web que antes solo era posible hacer mediante JavaScript.

HTML5 nos aporta una serie de nuevas entradas para los formularios que serán analizadas a lo largo de este módulo.

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

** El API de Canvas es una de las nuevas opciones que ofrece HTML5 al desarrollador permitiéndole trabajar de forma visual e interactiva creando animaciones similares a las creadas con flash pero sin utilizar esta herramienta.

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.