Certificado del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... Francisco Javier Cervigon Ruckauer

Certificado del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS pdf

Certificado

Certificado

Certificado

Francisco Javier Cervigon Ruckauer

Módulos del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... Francisco Javier Cervigon Ruckauer

Francisco Javier Cervigon Ruckauer

Archivo del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... Francisco Javier Cervigon Ruckauer

Archivo del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS...

Francisco Javier Cervigon Ruckauer

Índice del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... Francisco Javier Cervigon Ruckauer

Índice del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS...

Módulo 0: Introducción al desarrollo en HTML5, CSS y JavaScript de Apps Web
- Tema 0: Transparencias del módulo
- Tema 1. Introducción al curso y al programa
- Tema 2. Introducción a Internet y al Web
- Tema 2. Cuestionario obligatorio

Modulo 1: Introducción a los elementos básicos de HTML, CSS
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. HTML/CSS - Mi primera página Web
- Tema 1. Cuestionario obligatorio
- Ejercicio P2P opcional
- Tema 2. Mi primera página con ViSHub.org
- Tema 3. Cómo utilizar el editor Sublime Text
- Tema 4. Mi primera página con navegador y Sublime Text
- Tema 5. HTML/CSS - Estructura HTML
- Tema 5. Cuestionario obligatorio
- Ejercicio P2P opcional
- Tema 6. Tema 6. HTML/CSS - Herencia CSS
- Tema 6. Cuestionario obligatorio
- Tema 6. Ejercicio P2P opcional
- Entrega P2P obligatoria

Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Mi primera página con DreamWeaver
- Tema 2. HTML/CSS: Estructura CSS
- Tema 2. Cuestionario obligatorio
- Ejercicio P2P opcional
- Ejercicio P2P opcional
- Tema 3. HTML/CSS: vídeo, audio e imagen
- Ejercicio P2P opcional
- Tema 4. Integración de objetos y de multimedia en HTML5
- Tema 5. Publicación y entrega en Neocities
- Entrega P2P obligatoria

Modulo 3: JavaScript: sentencia, expresión, variable, función, objeto y DOM
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. JavaScript. Expresiones
- Tema 2. La consola JavaScript del navegador.
- Tema 2. Cuestionario obligatorio
- Tema 3. Programas, sentencias y variables
- Tema 3. Cuestionario obligatorio
- Tema 4: Expresiones con variables
- Tema 4. Cuestionario obligatorio
- Tema 5. Funciones.
- Tema 5. Cuestionario obligatorio
- Tema 6. Objetos, propiedades, métodos y DOM
- Tema 6. Cuestionario obligatorio
- Tema 7. Modificación y depuración de un ejercicio en el navegador
- Entrega P2P obligatoria

Módulo 4: Booleano, if/else, string, número, DOM, eventos e interacción
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Booleanos y sentencia If/ELSE
- Tema 1. Cuestionario obligatorio
- Tema 2. El Tipo String
- Tema 2. Cuestionario obligatorio
- Tema 3. El Tipo Number
- Tema 3. Cuestionario obligatorio
- Tema 4. Booleanos
- Tema 4. Cuestionario obligatorio
- Tema 5. DOM, eventos e interacción con el usuario
- Entrega P2P obligatoria

Módulo 5: Bucles. Arrays. Funciones como objetos. Ámbitos. Cierres. jQuery
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Bucles
- Tema 1. Cuestionario obligatorio
- Tema 2. Arrays
- Tema 3. Cómo depurar un ejercicio
- Tema 4. Funciones como objetos
- Tema 4. Cuestionario obligatorio
- Tema 5. Ámbitos de visibilidad y cierres (closures)
- Tema 5. Cuestionario obligatorio
- Tema 6. Introducción a la librería JQuery
- Tema 6. Cuestionario obligatorio
- Tema 7. Eventos DOM y JQuery
- Entrega P2P Obligatoria

Módulo 6: jQuery UI. Interacción con usuario. Bootstrap. Diseño adaptativo
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Notación array, propiedades dinámicas, For/In y DOM
- Tema 1. Cuestionario obligatorio
- Tema 2. JQuery UI
- Tema 3. Documentación API jQuery UI
- Tema 4. Eventos táctiles
- Tema 5. Ejemplo: Tangram
- Tema 6. Bootstrap: Diseño Responsive
- Ejercicio P2P opcional
- Tema 7. Carrusel con Bootstrap
- Entrega P2P obligatoria

Modulo 7: Profundización en arrays, objetos, propiedades, métodos, tipos
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Tipos, objetos y clases
- Tema 1 Cuestionario obligatorio
- Tema 2. Referencias a objetos
- Tema 2. Cuestionario obligatorio
- Tema 3. Algunos métodos de Arrays
- Tema 3. Cuestionario obligatorio
- Tema 4. Objetos y Arrays. Ejemplo citas
- Tema 5. Carrusel con citas
- Tema 6. Editar carrusel de citas
- Entrega P2P obligatoria

Módulo 8: LocalStorage, iFrames, Origin policy y JSON
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Ejemplo de un cronómetro
- Ejercicio P2P opcional
- Tema 2. Memoria local en HTML5
- Tema 3. iFrames y Política de origen (Origin Policy)
- Tema 4. JSON (JavaScript Object Notation)
- Tema 4. Cuestionario obligatorio
- Entrega P2P obligatoria

Módulo 9: Introducción a gráficos y animaciones SVG. Geolocalización.
- Tema 0. Transparencias y ejemplos del módulo
- Tema 1. Geolocalización en HTML5
- Tema 2: Aplicación geolocalizada con Google Maps
- Ejercicio P2P opcional
- Tema 3: HTML5 SVG - Scalable Vector Graphics
- Entrega P2P obligatoria

Módulo 10: Empaquetar aplicaciones Web para Android, iOS o FirefoxOS
- Tema 0: Transparencias y ejemplos del módulo
- Tema 1. PhoneGap Desktop
- Tema 2. PhoneGap Build
- Tema 3. Certificados de Apple para PhoneGap Build
- Tema 4. Aplicaciones Firefox OS
- Tema 5. Reloj SVG como App Firefox OS
- Cuestionario obligatorio final

Francisco Javier Cervigon Ruckauer

Descripción del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS... Francisco Javier Cervigon Ruckauer

Descripción del curso Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS...

Este curso ha sido concebido como una introducción al diseño de aplicaciones Web en HTML5, tanto de tipo genérico como para Firefox OS. Sus contenidos tienen como objetivo capacitar para la programación y el diseño de aplicaciones, utilizando HTML5, CSS y JavaScript.

Capacita para un primer nivel de desarrollo de aplicaciones para terminales fijos y móviles (PC, teléfono móvil, tableta, ..) en HTML5, CSS3 y JavaScript5, con las que se diseñan la mayoría de las aplicaciones de cliente en Internet (Google, Twitter, Facebook, Amazon, …).

Es un curso para principiantes, que describe con rigor y profundidad los elementos necesarios, ilustrándolos con ejemplos sencillos, pero realistas. Todo ello con un enfoque multi-disciplinar que cubre la programación en JavaScript y el diseño de gráfico. Se ilustra también el uso de librerías tales como jQuery o jQuery UI, Bootstrap (diseños adaptable), gmaps (integración de Google Maps) o phonegap (creación de apps).

Los participantes pueden aprendender a diseñar apps adaptadas a PC, teléfono móvil o tableta, a programar nuevas aplicaciones en JavaScript, a ejecutarlas y depurarlas en el navegador Web o a empaquetarlas para las tiendas de aplicaciones de Android, iOS (Apple) o FirefoxOS.

Este curso es el primero del programa "Diseño de servicios en la nube para acceso móvil y multi-dispositivo con HTML5 "impulsado y patrocinado por Red.es, Universia, CENATIC, Telefónica Digital y TED. El programa consta de 5 cursos, que se incorporan progresivamente en MiríadaX.

Esta iniciativa está recogida dentro de la medida “Formación para el Empleo” del Plan de Inclusión Digital y Empleabilidad de la Agenda Digital para España.

Aunque el curso explica los conceptos desde la base, para que las personas que comienzan a programar puedan seguirlo, se recomienda que los asistentes tengan nociones básicas de programación aunque sea en otros lenguajes, tales como Java, C, Basic, PHP, Python, Pascal, etc. Quien carezca de tales conocimientos puede compensarlo con un trabajo más intenso. El curso explica JavaScript con rigor y también es de interés para programadores expertos que quieran adquirir una panorámica del diseño de aplicaciones web en HTML5 y CSS3 y JavaScript5.

Francisco Javier Cervigon Ruckauer

Módulo 0: Introducción al desarrollo en HTML5, CSS y JavaScript de Apps Web. Francisco Javier Cervigon Ruckauer

Módulo 0: Introducción al desarrollo en HTML5, CSS y JavaScript de Apps Web

Tema 0: Transparencias del módulo

El fichero contiene las transparencias del Módulo 0.

Descargar documento: mod_00_transparencias.pdf

Francisco Javier Cervigon Ruckauer

Tema 1. Introducción al curso, programa y metodología. Francisco Javier Cervigon Ruckauer

Tema 1. Introducción al curso y al programa

Introducción al curso, programa, y a la metodología utilizada durante el mismo.

Francisco Javier Cervigon Ruckauer

Tema 2. Introducción a Internet y al Web: la nube, URLs, HTTP, HTML5, CSS, Javascript. Francisco Javier Cervigon Ruckauer

Tema 2. Introducción a Internet y al Web

Introducción a Internet y al Web: la nube, URLs, HTTP, HTML5, CSS, Javascript.

Francisco Javier Cervigon Ruckauer

Modulo 1: Introducción a los elementos básicos de HTML, CSS. Tema 0. Transparencias y ejemplos del módulo. Francisco Javier Cervigon Ruckauer

Modulo 1: Introducción a los elementos básicos de HTML, CSS

Tema 0. Transparencias y ejemplos del módulo

Las transparencias y los ejemplos están en el fichero ZIP adjunto y se deben descargar en esta actividad.
Haciendo clic aquí, acceden al editor/simulador de ejemplos del modulo en el ViSH.

Descargar documento: mod_01.zip

Francisco Javier Cervigon Ruckauer

Tema 1. HTML/CSS - Mi primera página Web. Francisco Javier Cervigon Ruckauer

Tema 1. HTML/CSS - Mi primera página Web

Francisco Javier Cervigon Ruckauer

Ejercicio 1 Modulo 1: Introducción a los elementos básicos de HTML, CSS. Francisco Javier Cervigon Ruckauer

Modulo 1: Introducción a los elementos básicos de HTML, CSS

Ejercicio 1 opcional

Sobre el archivo facilitado al estudiante llamado "mi_primera_pagina_con imagen.html", añadir estilos css para modificar el color del fondo, de la fuente, la familia tipográfica y el tamaño.

Francisco Javier Cervigon Ruckauer

Tema 2. Mi primera página con ViSHub.org. Francisco Javier Cervigon Ruckauer

Tema 2. Mi primera página con ViSHub.org

Francisco Javier Cervigon Ruckauer

Tema 3. Cómo utilizar el editor Sublime Text. Francisco Javier Cervigon Ruckauer

Tema 3. Cómo utilizar el editor Sublime Text

Francisco Javier Cervigon Ruckauer

Tema 4. Mi primera página con navegador y Sublime Text. Francisco Javier Cervigon Ruckauer

Tema 4. Mi primera página con navegador y Sublime Text

Francisco Javier Cervigon Ruckauer

Tema 5. HTML/CSS - Estructura HTML. Francisco Javier Cervigon Ruckauer

Tema 5. HTML/CSS - Estructura HTML

Francisco Javier Cervigon Ruckauer

Ejercicio 2 Modulo 1: Introducción a los elementos básicos de HTML, CSS. Francisco Javier Cervigon Ruckauer

Modulo 1: Introducción a los elementos básicos de HTML, CSS

Ejercicio 2 opcional

Realiza un esquema sencillo de este documento HTML a su estructura tipo árbol, que resuma brevemente las relaciones directas entre elementos de la página, clarificando la jerarquía del árbol.

< !doctype html>
< html>
< head>
< meta charset="utf-8">
< title>Ejercicio opcional árbol</title>
< /head>
< body>
< header>
    <img src="firefox-os.png" alt="FirefoxOS Logo" width="200"
height="164">
< /header>
< nav>
    <ul>
<li>Menú 1</li>
<li>Menú 2</li>
<li>Menú 3</li>
    </ul>
< /nav>
< article>
<h1>Titular de nivel 1</h1>
<p>Contenido de la página</p>
< /article>
< footer>Pie de página</footer>
< /body>
< /html>

Francisco Javier Cervigon Ruckauer

Tema 6. HTML/CSS - Herencia CSS. Francisco Javier Cervigon Ruckauer

Tema 6. HTML/CSS - Herencia CSS

Francisco Javier Cervigon Ruckauer

Tema 6. Ejercicio Modulo 1: Introducción a los elementos básicos de HTML, CSS. Francisco Javier Cervigon Ruckauer

Tema 6. Ejercicio opcional

Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:

< !doctype html>
< html>
< head>
< meta charset="utf8">
< title>Herencia</title>
< /head>
< body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
< /header>
</div>
< /body>
< /html>

Francisco Javier Cervigon Ruckauer

Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia Francisco Javier Cervigon Ruckauer

Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia

Estructuración de interfaces en HTML5 y CSS3 adaptados a un entorno multi-pantalla adaptativo a móviles y tabletas.

Tema 0. Transparencias y ejemplos del módulo

Las transparencias y los ejemplos están en el fichero ZIP adjunto y se deben descargar en esta actividad.
Haciendo clic aquí, acceden al editor/simulador de ejemplos del modulo en el ViSH.

Descargar documento: mod_02.zip

Francisco Javier Cervigon Ruckauer

Tema 1. Mi primera página con DreamWeaver Francisco Javier Cervigon Ruckauer

Tema 1. Mi primera página con DreamWeaver

Francisco Javier Cervigon Ruckauer

Tema 2. HTML/CSS: Estructura CSS Francisco Javier Cervigon Ruckauer

Tema 2. HTML/CSS: Estructura CSS

Francisco Javier Cervigon Ruckauer

1º Ejercicio Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia. Francisco Javier Cervigon Ruckauer

Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia

1º Ejercicio opcional

Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:

< !doctype html>
< html>
< head>
< meta charset="utf-8">
< title>Herencia</title>
< /head>
< body>
< div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
< /header>
< /div>
< /body>
< /html>

Instrucciones: fichero HTML.

Francisco Javier Cervigon Ruckauer

2º Ejercicio Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia Francisco Javier Cervigon Ruckauer

2º Ejercicio Modulo 2: Estructura HTML5/CSS3 para multipantalla y objetos multimedia.
Ejercicio opcional

Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente ‘Fira’ del Sistema Operativo de Firefox FiraOpenType, que puedes descargar aquí:
https://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/

o la ‘Roboto’ del Sistema Operativo Android que puedes descargar aquí:

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

Francisco Javier Cervigon Ruckauer

Tema 3. HTML/CSS: vídeo, audio e imagen. Ejercicio . Francisco Javier Cervigon Ruckauer

Tema 3. HTML/CSS: vídeo, audio e imagen

(Ejercicio opcional:

Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG).

Francisco Javier Cervigon Ruckauer

Tema 4. Integración de objetos y de multimedia en HTML5 Francisco Javier Cervigon Ruckauer

Tema 4. Integración de objetos y de multimedia en HTML5

Francisco Javier Cervigon Ruckauer

Tema 5. Publicación y entrega en Neocities

Publicación de una página en Internet, usando como ejemplo la plataforma gratuita proporcionada por Neocities.org.

Francisco Javier Cervigon Ruckauer

Modulo 3: JavaScript: sentencia, expresión, variable, función, objeto y DOM. Tema 0. Transparencias y ejemplos del módulo. Francisco Javier Cervigon Ruckauer

Modulo 3: JavaScript: sentencia, expresión, variable, función, objeto y DOM

Introducción a JavaScript: programas y sentencias, expresiones con números y strings, variables, funciones, objetos, propiedades y métodos.

Tema 0. Transparencias y ejemplos del módulo

Las transparencias y los ejemplos están en el fichero ZIP adjunto y se deben descargar en esta actividad.
Haciendo clic aquí, acceden al editor/simulador de ejemplos del modulo en el ViSH.

Descargar documento: mod_03.zip

Francisco Javier Cervigon Ruckauer

Tema 1. JavaScript. Expresiones Francisco Javier Cervigon Ruckauer

Tema 1. JavaScript. Expresiones

Francisco Javier Cervigon Ruckauer

Tema 2. La consola JavaScript del navegador. Francisco Javier Cervigon Ruckauer

Tema 2. La consola JavaScript del navegador.

Francisco Javier Cervigon Ruckauer

Tema 3. Programas, sentencias y variables Francisco Javier Cervigon Ruckauer

Tema 3. Programas, sentencias y variables

Francisco Javier Cervigon Ruckauer

Tema 4: Expresiones con variables Francisco Javier Cervigon Ruckauer

Tema 4: Expresiones con variables

Francisco Javier Cervigon Ruckauer

Tema 5. Funciones. Francisco Javier Cervigon Ruckauer

Tema 5. Funciones.

Francisco Javier Cervigon Ruckauer

Tema 6. Objetos, propiedades, métodos y DOM Francisco Javier Cervigon Ruckauer

Tema 6. Objetos, propiedades, métodos y DOM

Francisco Javier Cervigon Ruckauer

Tema 7. Modificación y depuración de un ejercicio en el navegador Francisco Javier Cervigon Ruckauer

Tema 7. Modificación y depuración de un ejercicio en el navegador

Francisco Javier Cervigon Ruckauer

Ejercicio obligatorio MODULO 3: JAVASCRIPT: SENTENCIA, EXPRESIÓN, VARIABLE, FUNCIÓN, OBJETO Y DOM Francisco Javier Cervigon Ruckauer

Ejercicio obligatorio MODULO 3: JAVASCRIPT: SENTENCIA, EXPRESIÓN, VARIABLE, FUNCIÓN, OBJETO Y DOM

Ampliar la siguiente aplicación Web (muestra la fecha y la hora):

<!DOCTYPE html><html>

<head>

</head>

<body>

<h2 id="h2">La fecha y la hora son:</h2>

var fecha = new Date();

var msj;

if (fecha.getHours() < 7) { msj = "Buenas noches";}

else if (fecha.getHours() < 12) { msj = "Buenos días";}

else if (fecha.getHours() < 21) { msj = "Buenas tardes";}

else { msj = "Buenas noches";}

document.getElementById("h1").innerHTML = msj;

document.getElementById("fecha").innerHTML = fecha;

</script>

</body>

</html>

Incluyendo los siguientes elementos:

1) El nombre de la persona que hace la entrega debajo del titulo <h1>

2) Un bloque <div> debajo de la fecha y la hora y las instrucciones JavaScript necesarias para que muestre en dicho bloque el contenido de las siguientes propiedades DOM en líneas separadas, que comiencen por el nombre de la propiedad(es) mostrada(s):

a) Contenido de innerHTML de elemento identificado por id="h2"

b) Contenido de outerHTML de elemento identificado por id="h1"

c) Contenido de de la propiedad global: location.href
d) Contenido de de la propiedad global: location
e) Contenido de de las propiedades globales: screen.width y screen.heigth

Subir dicha aplicación a la cuenta de neocities.org

Instrucciones: incluir el URL de la página Web (o app) publicada en Internet

Francisco Javier Cervigon Ruckauer