U5 HTML5

• VENTAJAS OBJETIVOS METODOLOGÍA Y PROGRAMA

Hoy HTML5 palabra de que se utiliza para indicar: HTML5 lenguaje de marcas en sí (especificación de HTML 5, de hecho), y otras tecnologías fijan, la web es un proceso abierto tecnologías de plataforma: WebSocket inseguro, WebWorker-ups, SVG, MathML, API de geolocalización, XmlHttpRequest, Contexto 2D, Fuentes Web o CSS3, por ejemplo.

Cada vez más aplicaciones web complejas se crean utilizando HTML5, aplicaciones que incluyen comunicaciones multimedia y de red, tanto para empresas como para recreación.

Al mismo tiempo, la complejidad que encontramos dentro de nosotros se vuelve transparente para el usuario. Los gráficos son finamente en la pantalla, el audio se oye perfectamente y las marcas de agua hechas con videos son grandes.

ASMOZ y UEU organizaron el curso MOOC básico del año pasado sobre HTML5. Había conceptos básicos sobre aplicaciones web que usaban HTML5. No está mal en 10 horas de curso! Pero al final del día, después de estudiar HTML5 y otras tecnologías relacionadas, completamos la segunda parte del curso. Es el uso de JavaScript, la programación orientada a objetos vamos a explorar, HTML5 y JavaScript en la aplicación web de depuración avanzada que aprendemos (Chrome DevTools equipos de uso) y el primer supuesto, el toque avanzamos aspecto con cierto detalle se discute el nuevo curso en los administradores de eventos, WebSocket insegura, WebWorker-ins Y nos sumergiremos en la biblioteca de jQuery. Por último, vamos a trabajar en una versión fácil de Tetris juego tratando de vincular todo lo que ves en la práctica. Como usted puede estar interesado, animarse a participar!

OBJETIVOS

Al final de este curso descubrirá temas avanzados que se utilizan en HTML5, no sólo en el aspecto teórico sino también en el aspecto práctico. Usted tendrá una base JavaScript fuerte, podrá acceder a la comunicación de red - recibir y enviar datos - a través de AJAX y WebSocketa, y podrá realizar aplicaciones avanzadas. Como ejemplo, aprenderá a programar el juego de Tetris usando HTML5.

Este curso está diseñado para estudiantes que han completado el curso HTML5 (I). En otras palabras, para saber cómo obtener el beneficio de este curso, es necesario saber qué es HTML5 (especialmente el componente <canvas> básico, <video> y <audio>) y tener un conocimiento mínimo de JavaScript. Con el fin de verificar esto, hemos preparado una pequeña prueba. Comience y muestre sus conocimientos! 🙂

PROGRMA

26 de octubre - 1 de noviembre

1. JavaScript avanzado

Programación objetiva

Constructures, atributos públicos y privados, instancia

herencia, prototipo, instanceof

aplicar, llamar, super y métodos de sobrescribir

modularización

Ejercicio Práctico: Máquinas, Humanos, Guerra Extraterrestre (juego)

2. Chrome DevTools

Aprenda a depurar las aplicaciones de JavaScript

2 de noviembre - 8 de noviembre

3. Gestores de eventos

onLoad, onClick, onBlur, onFocus

setInterval, setTimeout

Ejercicios prácticos:

* Insertar gestores de eventos en un sitio web

* Obtener una animación usando setTimeout

* Solicitar el ejercicio anterior usando requestAnimationFrame

4. Comunicación de datos

JSON y Ajax

Ejercicio práctico: API de openweathermap

9 de noviembre - 15 de noviembre

5. WebSockets

Ejemplos (DrawAnywhere, QuakeII, Plink)

Ejercicio práctico: juego multijugador simple

6. WebWorkers

Ejemplos

Ejercicio práctico: el primer motor de búsqueda de números

Del 16 de noviembre al 22 de noviembre

7. Biblioteca jQuery

Cómo cruzar, analizar, modificar el modelo DOM

Gestión de eventos

Ajax. Uso de la API REST

8. PRAKTICA: programación de un juego

MATRICULA

2.7.3. Objetos multimedia

HTML 5 tiene un soporte de soporte nativo; es decir, videos, animaciones, sonido, etc., sin necesidad de instalar plugins. Las etiquetas <audio> y <video> permiten un fácil acceso a nuestro sitio web para multimedia, y "controles" y nuevos atributos permiten al usuario iniciar o detener la ejecución.

<video>

Definición: Inserta un video o una animación.

Atribututos: global attributes, src, poster, preload, autoplay, loop, controls, width, height.

• src: Proporciona la URL de vídeo del vídeo de reproducción.

- Póster: muestra una imagen mientras el video no está disponible. - Preload - Mejora la visualización (ninguno, metadatos y valores automáticos). - autoplay: Este booleano indica que el video se reproducirá automáticamente. - Loop: Este booleano indica que el video se repetirá automáticamente. - controls: Este booleano le pide al usuario que agregue controles de usuario.

La especificación HTML 5 actual no indica qué formatos de vídeo utilizar, pero estos son los tipos más comunes:

· ogg: es un formato de gabinete; Es decir, tiene varios datos de audio y video comprimidos en un solo archivo. Fue desarrollado por Xiph.org como código abierto. El codec de vídeo es Thedora y el codec de audio Vorbis.

.ogg, .ogv, .oga, .ogx.

· mp4: un formato de gabinete de datos multimedia definido en mpeg-4 estándar. El códec de vídeo es H. 264 y el códec de audio AAC.

.mp4, .m4a, .m4p, .m4v, . 3gp, . 3g2.

· matroska: un formato de datos multimedia de gabinete, avi, mov, mp4 y similares formatos de código abierto alternativa.

mkv, mka, mks.

Ejemplo:

<video src="mivideo.ogv" width="300" height="200" controls>

Tu navegador no admite este tipo de video

</video>

<audio>

Definición: Inserta un archivo de sonido en el documento.

Atributos: global atttributes, src, poster, preload, autoplay, loop, controls.

La especificación HTML 5 actual no indica qué formatos de audio deben utilizarse, pero estos son los más comunes: ogg, mp3 y wav.

Ejemplo:

<audio src="miaudio.wav" autoplay controls>

Tu navegador no soporta el audio

</audio>

<source>

Definición: especifica el archivo de origen multimedia con más detalles. Se utiliza para especificar varios archivos de origen; En este caso, el primero muestra el navegador a través de un formato que puede reconocerse. Debe usarse con <video> o <audio>.

Atributos: global attributes, src, type, media.

- type: tipo de formato

ogg, mp4, x-matroska…

Ejemplo:

<video controls poster="downloading.jpg">

<source src="mivideo.ogv" type="video/ogg">

<source src="mivideo.mp4" type="video/mp4">

<source src="mivideo.mkv" type="video/x-matroska">

</video>

<canvas>

Definición: Define un espacio para los gráficos. Pueden ser imágenes, animaciones o gráficos vectoriales.

Atributuak: global attributes, width, height.

Adibidea: Para dibujar sobre lienzo, necesitamos usar lenguaje Javascript.

Métodos utilizados::

ctx = canvas.getContext() para establecer el contexto 2d

ctx.beginPath() indica el inicio de los dibujos

ctx.arc() para dibujar un arco

ctx.moveTo() para mover los pinceles

ctx.fillStyle(), ctx.fill() para colorear un campo

ctx.stroke() para hacer el dibujo

<html>

<head>

<script>

function dibujar(){

var var1 = document.getElementById('smile');

if (var1.getContext)

{

var ctx = var1.getContext('2d');

ctx.beginPath();

ctx.arc(80,80,50,0,Math. PI*2,false); //

ctx.moveTo(115,80);

ctx.arc(80,80,35,0,Math. PI,false); //

ctx.moveTo(70,65);

ctx.arc(65,65,5,0,Math. PI*2,false); //

ctx.moveTo(100,65);

ctx.arc(95,65,5,0,Math. PI*2,false); //

ctx.fillStyle='#efd';

ctx.fill();

ctx.stroke();

}

else {

alert('Tu navegador no soporta canvas');}

}

</script>

</head>

<body onload="dibujar();">

<canvas id="smile" width=160, height=160>

</body>

</html>