Aula: HTML

Acerca 'Atelier'

'Atelier" ha sido desarrollado para ponerlo al alcance de ingenieros que se desenvuelven en el area de Control de Proyecto, en sectores de la gran mineria, oil & gas, otros; que aun no han desarrollado sus habilidades con respecto a código de programación .
'Atelier', al igual que 'Graphs' tiene dos (02) partes: la primera, es este mismo espacio donde se explica el tema que se esta presentando; luego la segunda parte, es el 'editor web' donde se exhiben tanto el 'código' del ejercicio como su 'resultado'
ahora vamos a explicar como usar el editor
paso 1 : para acceder al editor solo hay que hacer click en el boton inferior donde dice 'ver imagen', 'ver ejemplo' o 'ver ejercicio'
la pantalla del editor consta de dos partes pantalla-izquierda fondo negro es la que exhibe el codigo y pantalla-derechha fondo blanco es la que exhibe el resultado
paso 2 : despues de familiarizarte con el codigo entender como funciona empieza a hacer pequenos cambios en el texto pantalla-izquierda; haz pequenos cambios cuantas veces quieras y no te preocupes si algo no sale bien
paso 3 : para ver resultado de tus pequeños cambios haz click en boton run
paso 4 : para volver al codigo inicial solo tienes que hacer click en el simbolo reload this page del window

Qué es HTML?

Al inicio HTML significara términos nuevos expresados en idioma ingles
no se preocupen, con el tiempo se familiaran con ellos
todo documento HTML tiene una estructura basica que incluye los siguientes elementos: !DOCTYPE html, <.html>, <.head>, <.body>.
dentro del <.head> se incluye principalmente el 'title', los 'meta', y el link del archivo 'style.css', pero tambien en algunos casos se incluye un o mas 'scripts'
en el html template (A) que se presenta, observaran lo descrito anteriormente; notaran que la pantalla derecha del editor muestra una pantalla en blanco, es decir vacia; esto es debido a que el html template muestra la estructura basica de una pagina web pero no tiene contenido
agreguemos un poquito de contenido, como un parrafo, al template, y veamos que pasa
el contenido siempre va dentro de <.body>
ahora, nuestro template (B) muestra un contenido que dice Que tal Ninos! al que se le ha adicionado un poquito de estilo css para que las letras tengan un color yellowgreen, y un tamano de 30 pixels

Elements

como mencionamos HTML significara, para uds, empezar a aprender nuevos terminos expresados en idioma Ingles
en idioma ingles porque sus creadores y/o inventores hablaban ingles
a vuestra edad, es mejor que los aprenden en ingles (no traten de traducirlos al castellano); porque cuando sean jovenes encontraran que el mundo del coding es casi todo en ingles

tres términos para empezar son: elements, tags, and attributes

empezemos por definir 'elements'
Elements definen la estructura y el contenido de los objetos dentro de una página web
tal como 'headings' (identificados como elements que van del 'h1' al 'h6')
y 'paragraphs' (identificados como 'p')
hagan click en 'Ver imagen'
el editor expone una imagen (no esta mostrando un parrafo) que muestra como se identifican el element, el attribute, y el tag en una expresion html.
Nota: la imagen esta insertada en un elemento html denominado 'canvas'; en las proximas 'Aulas' van a aprender que es un 'canvas'.

Attributes

Attributes son propiedades utilizadas para proporcionar información adicional sobre un element. Ejemplo: el attribute id, que identifica un element
los 'attributes' se definen dentro del tag de apertura, después del nombre de un element
su formato es asi: 'nombre' del attribute seguido del signo igual (=) y luego un 'valor' de la propiedad entre comillas.
Hacer click en 'Ver imagen'
ahora empezemos la fiesta!, en ver ejemplo encontraran un ejercicio web que les muestra lo dicho anteriormente
deslizen de arriba hacia abajo el cursor de la pantalla izquierda color negro del editor para que observen como esta compuesto este ejercicio
primero notaran que la composicion de los tags va como sigue: 'html' 'head' 'style' 'body' 'div' 'span' 'input'; que tienen tanto el tag de apertura como el tag de cierre
segundo noten los attributes de nombre 'class' en los elements 'div', 'span', 'input'
tercero noten que los 'valores' de cada attribute 'class' de cada element 'div' son diferentes
notaron todo lo anterior entonces Bravo

HTML Document

Como se dijo anteriormente, todo documento HTML tiene una estructura que incluye los siguientes elementos: '!DOCTYPE html', 'html', 'head', y 'body'.
siguiente, todo desarrollo web se inicia en un archivo llamado 'index.html'
dentro de este archivo index.html se inserta la 'estructura del documento' que incluye los elements: '!DOCTYPE html', 'html', 'head', 'body' mencionados lineas arriba.
otro element que suele formar parte de la estructura principal de un documento html es el 'header'; que se utiliza como el encabezado de una pagina, y que va como el primer element dentro del 'body'
el siguiente ejercicio tambien les muestra los elements denominados 'ul' y 'li' que se utilizan para ordenar de modo horizontal y vertical la presentacion de objetos (en este ejemplo: imagenes) o otros elements (en este ejemplo: los 'button') dentro del diseno web
Hacer click en 'Ver ejemplo-1'
Luego click en 'Ver ejemplo-2'

Aula: CSS

Qué es CSS?

CSS son los estilos usados para pintar el documento HTML
unos cuantos terminos para empezar son: selectors, properties, and values.; al
al inicio del 'aula html' se dijo que todo documento html tiene una estructura que incluye elementos; cuando se aplican estilos al documento html se lo hace siguiendo dicha estructura
el ejercicio que se muestra a continuacion se presenta de dos modos: templates (A) y (B)
en template (A): deslizen el cursor de arriba a abajo y observen que dentro de los tags <.style> se enumeran con letras color rojo los terminos 'pinguino' 'pinguino-superior' 'pinguino-inferior' etc; luego hacia abajo en los tags <.body> noten que a los elementos 'div' les fueron asignados el attribute 'class' que muestran como 'valor' los mismos terminos 'pinguino' 'pinguino-superior' 'pinguino-inferior' etc en letras color verde
ahora noten que en: '--pinguino-barriga' '--pinguino-pico' 'ojo-derecho {background}' 'ojo-izquierdo {background}' 'color-mejilla-derecha {backgroung}' 'color-mejilla-izquierda {backgroung}' 'body {background}' no tienen incluido el valor que va entre ":' y el ";" como resultado la pantalla muestra una silueta de color negro
ahora hagan click en template (B), noten los valores incluidos en los terminos mencionados parrafo anterior y su resultado

Qué es un Selector?

A medida que se agregan elementos a una página web, se pueden estilar con reglas CSS
Un selector CSS es la primera parte de una regla CSS
las reglas CSS se suelen especificar en lo que se llama 'una hoja de estilos': la cual, origina un archivo generalmente llamado 'style.css' pero uds pueden llamarlo con cualquier otro nombre

en esta hoja de estilos, el selector identifica el elemento o elementos html a los que se aplicarán los estilos que queremos aplicar
para ello, primero elegimos que propiedades del elemento queremos estilar y, luego aplicamos valores a cada propiedad que hayamos elegido
hagan click en 'Ver imagen'

repasemoa lo dicho anteriormente
un selector designa a qué elemento o elementos apuntar y aplicar estilos dentro del documento HTML (como: color, tamaño, posición, otros)
selectors generalmente apuntan a un valor de la propiedad, como un 'id' o a un valor 'class' , o apuntan al tipo de elemento, como 'h1' o 'p'.
vayan a 'Ver ejemplo' y fijense en los selectors identificados en este diseno web, los cuales estan dentro de los tags 'style'

Property

Una vez que se selecciona un elemento, una propiedad determina los estilos que se aplicarán a ese elemento.
Los nombres de las 'propiedades' van después de un selector, entre llaves, {}, e inmediatamente antes de dos puntos (:)
Hay numerosas 'propiedades' que podemos usar, como: fondo, color, tamaño de fuente, alto y ancho, y a menudo se agregan nuevas proiedades.
Hay numerosas 'properties' que podemos usar como: fondo, color, tamaño de fuente, alto y ancho, y a menudo se agregan nuevas properties.
Hay numerosas 'properties' que podemos usar como: fondo, color, tamaño de fuente, alto y ancho, y a menudo se agregan nuevas properties.
Hay numerosas 'properties' que podemos usar como: fondo, color, tamaño de fuente, alto y ancho, y a menudo se agregan nuevas properties.
Hacer click en 'Ver Ejemplo'

Value

Hasta ahora, hemos seleccionado un 'elemento' con un 'selector' y hemos determinado qué estilo nos gustaría aplicar con una 'propiedad'
Ahora podemos determinar el comportamiento de esa 'propiedad' con un 'valor'
los valores values se pueden identificar como el texto que va entre 'dos puntos' (:), y el 'punto y coma' (;)
por ejemplo: seleccionamos todos los elementos 'p' y establecemos que para la propiedad color su valor sea orange (naranja), y para la propiedad 'font-size' su valor sea 16 píxels.
hagan click en 'Ver imagen' donde se muestra un grafico en ingles que ilustra lo mencionado en parrafo anterior
ahora vayan a ver ejemplo que muestra una resena de algo muy querido y usado por los ninos
YOUTUBE
lean y relean el contenido mostrado dentro de los tags style identifiquen los selectors, las propiedades y sus valores
sino pueden en un inicio no importa recuerden que son ninos y que estan aprendiendo cosas nuevas y de todas maneras poco a poco empezaron a entender e identicarlos y para cuando sean quinceaneros seran unos expertos

Tipos de Colores

ahora hablemos del uso de colores en CSS
los colores se pueden describir a) usando una 'palabra clave' ejemplo: amarillo, b) usando lo que se denomina un 'valor hexadecimal' mismo ejemplo (amarillo) pero en valor hexadecimal: #ffff00
de los dos, el mas completo y por lo tanto el mas usado es el 'valor hexadecimal'
a continuacion mostraremos dos ejercicios: en ejercicio-A, se muestra como dar 'color a un texto' en modo de gradiente haciendo uso del estilo denominado 'linear-gradient' el cual describe como colorear el texto con la expresion: (to right, #30CFD0 0%, #330867 100%)
la cual se leea asi: hacia la derecha primero el color '#30CFD0' luego el color '#330867' y especifica paradas de color con los porcentajes (%)
en ejercicio-B como su mismo titulo sugiere '3 Gradientes de Color' se muestra como dar 'color a un fondo' (background) tambien en modo de gradiente con el uso del estilo 'linear-gradient'
en este ejercicio podran apreciar mejor lo dicho anteriormente, de que el 'valor hexadecimal' es el modo mas completo para dar color

@keyframes & @media rules

la regla @keyframes se utiliza para especificar códigos de animación. Una animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro. Durante una animación, se puede cambiar el conjunto de estilos CSS muchas veces. Para utilizar keyframes, se crea una regla de @keyframes con un nombre
en el ejercicio que se presenta se crean dos reglas @keyframes: 1) @keyframes odd-fold, y 2) @keyframes even-fold; que luego son utilizadas por la propiedad 'animation-name' : 1) animation-name : odd-fold; 2) animation-name : even-fold;
la regla @media tiene que ver con el tipo de celular, laptop, tablet u otro dispositivo que el usuario esta usando; se utiliza para adaptar los estilos especificados (a los elementos del documento html) a las dimensiones 'ancho (width)' y 'alto (height)' del celular; asi como a la 'orientacion' del mismo sea que el usuario tenga el dispositivo en posicion 'horizontal (landscape)' o en posicion 'vertical'
en el ejercicio que se presenta se especifican cuatro @media
(max-width:480px), (max-width:650px), (max-width:1050px), (max-width:1290px)
hagan click en cada imagen

Aula: JavaScript

Web Programming

Qué es JavaScript
En programación, un script es una secuencia de instrucciones que es ejecutado por un lenguaje de programación; en este caso, el lenguaje se denomina JavaScript
js nos permite escribir código que se ejecuta dentro del navegador (chrome); de esta forma el código se ejecuta más rápido
js nos da la capacidad de manipular directamente el DOM (la denominacion que se da a la página web en programacion)
cómo usamos js
ya sabemos que html describe la estructura de una página web en términos de etiquetas
entonces, para agregar js a una página usamos etiquetas de script que le dicen a chrome que cualquier cosa entre estas etiquetas debe interpretarse como código que chrome debe ejecutar;

Tema 1: escribamos esta línea de código alert(‘hello’);
vamos a incluirla dentro de las etiquetas de head; ahora al abrir la página, esta alerta aparece en la parte superior
chrome sabe que cuando llamamos a la función alert chrome debe exhibirla
este es nuestro primer ejemplo de código js;

Tema 2: podemos imaginar el agregar funciones adicionales a la página web
un área donde js es bastante poderoso es con la 'programación impulsada por eventos',
que es pensar en las acciones que pasan en la web en términos de eventos
como cuando un usuario hace 'click' en un boton, o desliza el ratón por la pagina, o envía un formulario; o usa el teclado para disparar un misil (en la demostración de juegos)
todo lo que el usuario hace se puede pensar como un evento y lo que podemos hacer con js es agregar eventListeners o eventHandlers que digan que cuando ocurre un evento, se siga adelante y se ejecute este código
así que sigamos adelante; coloquemos este código de alerta dentro de las llaves; ahora hemos creado una función llamada "hola"
ahora hagamos que esta función se ejecute cuando el usuario haga click en un botón; entonces creamos el botón
ahora la página muestra el botón, y para hacer que suceda algo cuando usuario hace click se le agrega un atributo llamado onclick
que agregará un onclick handler al botón, el cual dirá que debe suceder cuando usuario haga click; y vamos a establecer que este atributo sea igual a ejecutar la función ‘hola’
ahora la función y el botón están unidos
ahora actualizamos la página y cuando hacemos click, obtenemos la alerta

Tema 3: también tenemos la capacidad de incluir variables
veamos, creemos otra página "counter.html" usando el mismo hello.html
y cambiamos click here por contar, vamos a crear un programa que cuente de 0 a 1, 2, etc;
para tener un contador, necesitamos una variable; hacemos ‘let counter = 0’;
luego para incrementar el valor del contador hacemos ‘counter++’
y luego mostrar la alerta que tiene cualquiera que sea el valor actual del contador.
ahora haciendo click en el botón de conteo vemos una alerta que muestra el número 1 y haciendo click nuevamente vemos el número 2 y cada vez que hacemos click se va a incrementar el valor de la variable contador.

Web Programming

Tema 4:
ahora seguimos adelante y usamos js para cambiar el contenido de la página web; js nos permite manipular el DOM
volvamos al primer ejercicio, vamos a usar la misma 'función hola' para manipular algo dentro de la página; vamos a manipular el encabezado que dice 'Hola' que está dentro del elemento h1, vamos a cambiar ese elemento
cómo podemos hacer eso?
en js tenemos acceso a una función llamada 'document.querySelector' y lo que esta función va a hacer es darnos la capacidad de examinar la página y extraer este elemento para que podamos manipularlo.
así que para seleccionar este elemento h1 lo incluimos dentro del paréntesis, lo que significa ir a través de la página y encontrar el elemento h1, luego lo manipulamos asi: document.querySelector(‘’h1).innerHTML = ‘Adiós!’
qué esta pasando aqui?
cuando se hace click en el botón que tiene el atributo onclick que es igual a hello (), se esta llamando a la 'función hola'
la cual le va a decir al querySelector: búscame el elemento h1, y cuando lo encuentres quiero que cambies ese elemento, lo cual haras modificando su propiedad innerHTML
ahora cuando abrimos esta página y hacemos click en el botón, la palabra Hola cambia a Adiós! y cada vez que hacemos click en el botón no sucede nada más; porque solo hemos pedido un cambio

Tema 5:
pero tal vez lo que realmente queremos es a capacidad de alternar entre Hola y Adiós
una forma de hacer esto es usando ‘conditions’; js tiene "if" y "else" que nos permiten describir condiciones tales como que solo se ejecute un bloque de código cuando una expresión en particular es verdadera
así que dentro de la 'función hola' se puede hacer lo siguiente: if {document.querySelector ('h1'). innerHTML === 'Hola'} entonces, adelante y dejarlo en Adiós, y 'else' adelante actualice el elemento h1 y ponerlo en Hola
noten que la línea de código que pertenece a la condición if está entre corchetes y lo mismo para la condición else
ahora, cuando el usuario hace click en el botón, Hola cambia a Adiós y cuando el usuario hace click de nuevo, Adiós cambia a Hola y cada vez que el usuario hace click en el botón, se alternará entre Hola y Adiós

Tema 6:
podemos mejorar el diseño de este código
de esta modo tenemos 3 líneas de código diferentes para 'querySelector' pero podemos factorizarlas buscando el elemento h1 solamente una vez, y luego manipularlo
para hacer eso podemos almacenar un elemento dentro de una variable de la misma manera que un variable puede almacenar un número o una cadena de texto
así mejoramos la eficiencia del programa pero también reducimos la cantidad de caracteres de código a escribir, las líneas serán mucho más cortas y fáciles de leer y esto se considerará una mejora en el diseño

Web Programming

Tema 7:
y resulta que hay otra mejora que podemos hacer aquí, usando "const"

y resulta que hay otra mejora que podemos hacer aquí, usando "const"

Tema 8:
ahora con esta capacidad de manipular el DOM; volvamos a nuestro programa contador y realmente mejorarlo; podemos hacer algo mejor que mostrar una alerta
en lugar que h1 sea igual a 'hello' podemos configurarlo para que muestre ‘0’ como el valor inicial del contador y ahora, en el script se incrementa el valor del contador: en lugar de mostrar una alerta en cambio va a mostrar: element.querySelector(‘h1’).innerHTML = counter;
que esta diciendo: encuentra el elemento html 'h1' actualiza su innerHTML y configuralo para que sea igual a cualquiera que sea el valor de la variable counter
ahora, al actualizar esta página, el valor de 'h1' inicialmente es 0 y cada vez que el usuario haga click en count, actualizará el contenido del elemento h1, o sea cambiará el valor de la variable y también manipulará el DOM; realizando cambios para producir el efecto que el usuario desea ver en esta página..

Tema 9:
Qué otra mejora podemos hacer aqui?
a menudo no queremos mezclar nuestro código js con el contenido html de la página; cuando la página comienza a complicarse es un poco molesto mantener fragmentos de código dentro de elementos html, el código se considerará mal diseñado
lo que realmente queremos es separar todo código js de todo html, así que hagamos eso agregando un eventListener: document.querySelector(‘button’).onclick = count;
qué sucede aqui?
querySelector va a encontrar este botón en la página y cuando lo obtenga accederá a la propiedad onclick que se ha establecido sea igual a count (el nombre de la función); count es en sí mismo una función y, lo que se está diciendo aquí es que se establezca el valor de la propiedad onclick igual a count, que count es la función que se debe ejecutar cuando se hace click en el botón.
y noten que en realidad no se está llamando a la función, solo se está configurando count literalmente a la función count en sí mismo, sin llamar a la función y lo que va a hacer va a decir que cuando se haga click en este botón y solo entonces se deberá ejecutar la función count
por lo tanto, en js, las funciones pueden tratarse como valores en si mismas, al igual como se puede establecer que una variable sea igual a una cadena de texto o a un número o a un elemento html, también se puede establecer que una variable sea igual a una función y pasar eso como un valor

Array of Objects

Que es Array of Objects in js?
un array se usa para almacenar una colección de datos acerca de un objeto dado; por ejemplo: almacenar caracteristicas de un carro, como: marca, color, tipo.
primero, creamos un objeto relacionado con carros; sera algo asi: {"marca": "suzuki", "color": "azul", "tipo": "minivan"}
ahora si en vez de un solo objeto tenemos varios del mismo tipo; entonces, podemos representar el ejemplo anterior como un array, de este modo: let carros = [{"marca": "suzuki", "color": "azul", "tipo": "minivan"}, {"marca": "volvo", "color": "rojo", "tipo": "van"}, { }, ...]
la razon por la cual se agrupan objetos en un array se debe a que tenemos que lidiar no con uno sino con muchos, por ejemplo queremos elegir un carro y, lidiamos con 100 carros

Tema 10: Array of Objects:
aqui se muestra como se ve un array of objects en un script
este script carece de instrucciones, es solo ilustrativo con respecto al array

Tema 11: Array Methods:
ahora veamos como se manipulan los array of objects en javascript
para manipular un array of objects js provee varios metodos que pueden resolverlo
usando 'comments' (//......), este ejercicio lista varios metodos que pueden resolver el array of objects mostrado en 'tema 10'; pero aun no ejecutan nada debido a los comments; se listan para que vayan conociendolos

Tema 12: Array Methods:
ahora vamos a repetir el contenido del 'tema 11' con el fin de que uds hagan practica
primero, vayan al listado de metodos que estan comentados (// ....) y, quiten los comments en el primer metodo de la lista; no toquen la primera linea que dice '// for loop' sino las siguientes tres lineas; pongan el cursor delante de la primera letra de cada linea y con la barra espaciadora vayan hacia atras hasta borrar las diagonales (//)
ahora para ver el listado reproducido hagan lo siguiente: 1) hagan click en run, 2) haciendo click en boton derecho de su mouse hagan click en 'inspect' esto abrira una ventana en la parte derecha de la pantalla; 3) dentro de esta ventana, hagan click en el tab 'console' ubicado en la parte superior de la ventana; alli veran el listado de objetos, 4) hagan click en cada objeto y, veran sus detalles
hagan click en el actualizador de windows
vuelvan a repetir el ejercicio pero esta vez con el siguiente metodo denominado 'for each'; y asi sucesivamente

Array Methods

Tema 13: Loops
primero, definamos qué es un loop (bucle) y por qué se necesita usarlo en js; intentemos con lo siguiente: cuando nos gusta mucho una cancion lo que hacemos es escucharla una y otra vez, es decir la repetimos constantemente; bueno, eso es un loop
en programacion, un loop (bucle) es una forma de hacer uso repetido de algo
en js los loops (bucles) son utilizados como una forma rápida y sencilla de hacer algo sobre un array o un objeto, basandose en una condicion
uno de los loops más utilizados en js es el 'for loop'
en 'for loop' el codigo se repite hasta que la condicion se evalua como falsa; uno de los usos del 'for loop' es recorrer un array
en uso, se ve algo como en este ejercicio
for(let i =0; i <5 ; i++){ //hacer algo }

Tema 14: For Loop
ahora, veamos un ejemplo más real
tienes un sitio web donde deseas agregar películas que viste y deseas mostrarlas en la pantalla; primero, en nuestro html, creamos nuestro div donde representaremos dichas películas.
en nuestro js creamos el array con las películas que podemos agregar o eliminar.
ahora obtenemos nuestro div de nuestro html con 'getElementById'
luego creamos un string vacío donde vamos a renderizar todas las películas: let myList = "";
ahora queremos recorrer las películas que tenemos y, podemos crearlas con el 'for loop'

Tema 15: For Loop
y qué podemos hacer para mejorarlo?; bueno, ¿y si queremos agregar otra película?
lo que queremos es que se repita hasta que la variable que estamos usando para el loop (i) sea menor que la cantidad de películas; y al programar, la cantidad de peliculas del array es igual a la longitud del array, por lo que se utiliza 'length'
y así no tenemos que preocuparnos si agregamos otra película, porque siempre se repetirá.
ahora para renderizar en la pantalla, creamos: myList = myList + `li ${movies[i]} li`;
finalmente, envolvemos todo dentro de la funcion 'function myMovies()'

Web Programming

A ser publicado y comentado durante las proximas semanas

Animation with JavaScript

con js podemos escribir un codigo para hacer una animación sobre un elemento html, logrando un mayor control sobre todos los aspectos de cómo se comportará la animación

en muchas animaciones se necesita 'precisión'; esta precisión dificulta la animación de muchos escenarios realistas; algunos escenarios incluyen:

1) mover un elemento alrededor de una curva; 2) simular un objeto en caída libre bajo la influencia de la gravedad (por ejemplo: el efecto de nieve cayendo); 3) ajustar las propiedades por un valor aleatorio;

4) cambiar la interpolación entre keyframes, la cual se puede utilizar para: animar movimiento, producir efectos, ajustar niveles de audio, realizar ajustes de imagen, lograr transparencia, producir cambios de color, y muchos otros elementos visuales y de audio; 5) mucho mas

Animando Aviones

vamos a hacer que dos avioncitos vayan de izquierda a derecha en la pantalla, mediante un 'script'
primero: declaramos lo que se llama variable, en este caso tenemos cuatro variables : var rockets, altitude, speed, distance;
segundo: creamos la función, y le damos un nombre : function activateRockets(){}
tercero: dentro de la función usamos lo que en javascript se llama metodo for loop para que de los dos aviones incluidos: el programa muestre en la pantalla cada avion segun las variables especificadas: altitude, speed, distance.
cuarto: seleccionamos el area del documento HTML donde van nuestros avioncitos ('div.rockets') con la expresion: 'rockets = document.querySelectorAll('div.rockets')'
listo, hemos creado la función con sus variables pero todavia no realiza la animación
falta un paso: lo que en javascript se denomina llamar a la función
quinto: llamamos la función, usando el window.addEventListener, el cual va a continuación de la función (no dentro).

requestAnimationFrame

Cuando creas una animación, se desea que la animación se ejecute sin problemas y con fluidez cuando alguien la esté viendo.

Si estas utilizando animaciones CSS, entonces no tienes nada de qué preocuparte. Como se menciono anteriormente, tu navegador (chrome) se encarga de todo por ti.

si se esta utilizando JavaScript, ahora se tiene ayuda en forma de la función 'requestAnimationFrame'.

si en una animacion necesitamos repetir un 'frame' a una frecuencia dada (por ejemplo: 60 frames por segundo); necesitamos hacerlo que paresca 'suave'

aplicando 'requestAnimationFrame', el navegador (chrome) puede optimizarlo, por lo que las animaciones serán más fluidas

ahora vamos a presentar dos ejercicios, para que aprendas acerca de esta función mágica y cómo se puede usarla para crear animaciones fluidas.

Colition Detection

Qué es Detección de Colisiones?
una colisión es cuando dos objetos entran en contacto entre sí, ejemplo: la colision de dos autos crea un 'accidente'; luego, detección es 'el acto de detectar' dicha colisión
en el mundo de los video-juegos, la detección de colisiones está en todas partes, es un acto primordial; para luego programar algún efecto resultante de esa colisión.

en Ejercicio A; primero se empieza por identificar a los actores del juego, en este caso: 1) enemigos, y 2) el disparador
luego creamos la funcion initCanvas (para crear los enemigos, que son seis); la funcion renderEnemies (para reproducirlos), la funcion Launcher (para crear el disparador); y declaramos una variable animate (para crear la animacion); utilizamos el metodo for loop para que el programa muestre en pantalla cada enemigo segun la variable de posicion especificada asi como su desplazamiento
ahora hagan practica con los detalles indicados dentro de la funcion initCanvas
observen la expresion: var enemies = [ { } ]
esta variable 'var enemies' declara en lo que se llama un 'array' [ ] , cuantos enemigos hay (6), y su posicion u ubicacion dentro del canvas; ahora observen las 'x' 'y' 'w' 'h'
practiquen (cambien) los valores dentro de las "x" (100, 225, 350), y vean que pasa

el Ejercicio B presenta un clone del Ejercicio A, pero con ligeras variaciones con respecto: el numero de enemigos (ahora son 9), y
respecto del contenido del script: 1) en el ejercicio anterior a la funcion que crea los enemigos se le llamo 'initCanvas', ahora hemos llamado a dicha funcion 'initDraw'; lo que se les quiere decir con esto, es que uds pueden nombrar las funciones como mejor les paresca; luego 2) la animacion (animate) la creamos con una funcion;
ahora, uds estan viendo que segun sea el tema que se quiere desarrollar (en este caso, juegos) se necesita mas de una funcion para dar vida al tema
al igual que en ejercicio anterior, practiquen (cambien) los valores dentro de las "x" , "y".

Aula: HTML5 Canvas

Que es HTML5 Canvas

El elemento HTML5 canvas (lienzo, traducción literal del ingles) se utiliza para dibujar gráficos,
El elemento canvas es solo un contenedor (un área rectangular en una página HTML) en el que podremos dibujar lo que nos parezca, básicamente como si estuviésemos utilizando el Paint de Windows
pero eso si hay que decirle cada cosa que se quiera hacer mediante una instrucción (en otras palabras, mediante un script)

por lo tanto, la etiqueta Canvas siempre será como el código que se muestra en 'Ver Código':
<.canvas width="700" height="400"><./canvas>
con los cambios lógicos del ancho y alto para cada situación.

Canvas tiene varios métodos para dibujar trazados, cuadros, círculos, texto y agregar imágenes.
Los siguientes ejemplos mostraran cómo puede aplicar JavaScript para conectarse al HTML5 Canvas
Pero tambien mostraran cómo puede aplicar JavaScript para animar elementos HTML5 del canvas

Dibujar Formas

Ahora vamos a dibujar algunas formas geométricas en canvas.
Dentro del documento HTML, escribimos el elemento"canvas" con un width de 500, un height de 300 y un id=”canvas”, en estilos CSS aplicaremos al elemento canvas un borde sólido de 5px y de color negro y un border radius de 16px.
Para dibujar usamos JavaScript, comenzamos declarando la función draw() y dentro de esta definimos el contexto “2d”
Además dentro del elemento body agregamos el evento onload=”draw();” que ejecutará la función draw luego de que la página esté cargada.
Comenzaremos dibujando un círculo, para esto vamos a usar: 1) la propiedad 'fillStyle' en donde estableceremos un color, 2) el método arc(), que se encargará de dibujar y 3) el método fill() que va a establecer un color de relleno.
Lo siguiente que haremos será sobreponer figuras una encima de otra.”
Creamos otro círculo, esta vez más pequeño y en el centro de este vamos a agregar un rectángulo utilizando el método fillRect()
Finalmente agregamos un último círculo, solo que esta vez aún más pequeño que el anterior y con esto ya terminamos de formar nuestra figura.

Dibujar Imágenes

El canvas tamibén se puede usar como contenedor para imágenes
para dibujar una imagen usando HTML5 Canvas podemos usar el método drawImage () ; el cual requiere tres parámetros:
un objeto imagen, y las coordenadas ' x, y' donde se situa la imagen; siendo (x, y) el punto de destino donde se colocará la esquina superior izquierda de la imagen
entonces, la lectura de este método seria: drawImage(objeto_imagen, x, y)
dado que este método drawImage () requiere un objeto_imagen, lo primero que debemos hacer es: a) crear una imagen y b) luego esperar a que se cargue antes de crear una instancia del drawImage ().
a) la creacion de una imagen puede darse de varias maneras: 1) utilizar una imagen desde un archivo, 2) usando una imagen que ya existe en la página, 3) utilizando una imagen previamente dibujada en otro canvas.
b) cargar la imagen se logra usando la propiedad 'onload' del objeto_imagen
cuando la imagen se carga hace una llamada a la función y se ejecuta el código que la función tiene programado

Amplify

Los siguientes dos ejercicios son proporcionados por CHRIS, un joven Developer de EE.UU.
quien nos sugiere que se deben desarrollar cuatro habilidades esenciales para dominar la programacion de cualquier ejercicio HTML5 Canvas
1. Crear y cambiar el tamaño del canvas
2. Elementos de Dibujo
3. Elementos de Animación
4. Interactuar con los elementos

En Amplify, Chris empieza declarando la variable canvas con la expresion para senalar la ubicacion del elemento canvas en el documento HTML5
A continuacion declara las variables content, mouse, maxPullDistance
Luego crea tres funciones Bar, createBars, animate y adiciona addEventListeners para finalmente llamar a las funciones

Perimetro Convexo

Como se menciono anteriormente, este ejercicio es proporcionado por CHRIS, un joven Developer de EE.UU.

Que clase de objetos se pueden dibujar en canvas
Las tres clases de objetos mas usados para dibujar en canvas son rectangulos, lines arcos circulos

Este ejercicio se basa en Lineas
JavaScript Sort Function
Chris empieza declarando la variable canvas con la expresion para senalar la ubicacion del elemento canvas en el documento HTML5
Luego declara variables globales Event Listeners
Luego crea tres funciones Bar, createBars, animate y adiciona addEventListeners para finalmente llamar a las funciones

Rainbow Snake

Como se menciono anteriormente, este ejercicio es proporcionado por CHRIS, un joven Developer de EE.UU.
Que clase de objetos se pueden dibujar en canvas
Las tres clases de objetos mas usados para dibujar en canvas son rectangulos, lines arcos circulos
Este ejercicio se basa en Lineas
JavaScript Sort Function
Chris empieza declarando la variable canvas con la expresion para senalar la ubicacion del elemento canvas en el documento HTML5
Luego declara variables globales Event Listeners
Luego crea tres funciones Bar, createBars, animate y adiciona addEventListeners para finalmente llamar a las funciones

DIGitalS

Aula: HTML

Acerca 'Atelier'

Qué es HTML?

Elements

Tags

Attributes

HTML Document

Aula: CSS

Qué es CSS?

Qué es un Selector?

Property

Value

Tipos de Colores

@keyframes & @media rules

Aula: JavaScript

Web Programming

Web Programming

Web Programming

Array of Objects

Array Methods

Web Programming

Animation with JavaScript

Animando Aviones

requestAnimationFrame

Colition Detection

Aula: HTML5 Canvas

Que es HTML5 Canvas

Dibujar Formas

Dibujar Imágenes

Amplify

Perimetro Convexo

Rainbow Snake