domingo, 10 de septiembre de 2017

Como usar la notifications API en Javascript


Para ver en youtube clic aquí
(No olvides suscribirte)

Notifications API

   Las notificaciones se han convertido en un elemento ubicuo de cualquier aplicación web, mostrarlas nos permite tener un contacto mas directo y personalizado con nuestros usuarios. En este tutorial aprenderemos lo básico necesario para mostrar notificaciones en nuestro sitio web

Descargas



  

domingo, 20 de agosto de 2017

Que es y como usar la Web Animations API

(No olvides suscribirte)

  En este nuevo tutorial del canal, aprenderemos a utilizar la Web Animations API, que nos permite animar los elementos del DOM, accediendo a las mismas características disponibles en las animaciones CSS3, esto se logra combinando el modelo de tiempo con el modelo de animación. Como veremos la sintaxis a utilizar recuerda mucho a los "@Keyframes" usados en CSS3, pero la potencia de un lenguaje de programación nos permitirá un mayor control de la misma

¿Que diferencia tiene con requestAnimationFrame?

  Esa es una buena pregunta, si te la estas haciendo felicidades, básicamente Web Animations API va de la mano con el DOM, por lo que sirve exclusivamente para animar elementos presentes en el DOM, no podremos usarla para animar pixeles dentro del Canvas.
  En el video de la próxima semana se hablará mas profundamente sobre esto así que te recomiendo pasarte por el canal y suscribirte

Descargas


domingo, 13 de agosto de 2017

Las historias de hackeo mas impresionantes


Para ver en youtube clic aquí
(No olvides suscribirte)

   En este nuevo vlog analizo a las historias de los hacker mas famosos,  pero desde una perspectiva anecdotica, echando un vistazo a las anécdotas que los hicieron mas famosos. Desde trampas en concursos telefónicos hasta supuestas evidencias de contactos extraterrestres, al fin y al cabo que es un personaje sin una buena historia que lo rodee, espero que lo disfrutes.

Enlaces sociales

domingo, 6 de agosto de 2017

Top de editores livianos

Para ver en youtube clic aquí
(No olvides suscribirte)

  Editores livianos hay muchos, ¿Pero cual elegir? en este video te comparto mi opinión personal al respecto, comparando las principales características de los editores que yo mas conozco. Obviamente hay muchos otros y sería imposible nombrarlos todos es por eso que hago énfasis al mencionar que estos son los que yo conozco.

Enlaces sociales:

domingo, 30 de julio de 2017

IDE vs Editor de código ¿Cual usar?

(No olvides suscribirte)

  Herramientas para editar código hay muchas, pasado el tiempo te darás cuenta que las funciones que incorporan, su peso, y otros factores, hacen que las podamos agrupar en dos categorías: IDES y Editores livianos, ambas muchas veces se solapan entre sí hasta el punto en el que hacen que nos preguntemos si tiene sentido separarlas, y la verdad no hay una separación clara, no existe por ejemplo una manual universal que nos indique las diferencias entre cada una, y esto ocurre porque la separación aveces puede llegar a ser un poco subjetiva, dependiendo de la herramienta en cuestión, ya que muchas intentan pararse justo en el medio de ambas categorías para combinar lo mejor.
  Claro esta hay editores de código cuya posición es clara, por ejemplo Notepad++, a este no se le puede comparar con un IDE y de esto no hay duda, y luego tenemos a Visual Studio Code autodenominado editor pero con capacidades de depuración y el muy aclamado Intellisense, lo cual no es mas que el nombre que Microsoft le da a las sugerencias de código, por lo tanto este último lo podemos ubicar en el medio pero inclinandose mas hacia el lado de los editores.
   Te invito a ver el video que acompaña a esta entrada, con una visión muy personal intentaré indicarte cuando es mejor usar cada uno, pero te aclaro desde ya que esto puede llegar a ser bastante subjetivo, así que coméntame tu opinión para que otros la puedan ver y así también les sea de utilidad

miércoles, 26 de julio de 2017

Como usar Variables en CSS3

(No olvides suscribirte)

  Las variables CSS son entidades definidas por autores CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black;) y se accede mediante la función var () (por ejemplo, color: var (- main-color);). Sitios web complejos tienen cantidades muy grandes de CSS, a menudo con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en cientos de lugares diferentes, que requieren búsqueda global y reemplazar si ese color necesita cambiar.
    Fuente MDN

Descargas


domingo, 23 de julio de 2017

Como hacer un juego en CSS puro

(No olvides suscribirte)

Como hacer juegos en CSS

    Es posible, haciendo uso de nuestra creatividad, hacer juegos en CSS puro y sin nada de javascript, hay que entender que este no es el propósito de CSS por lo que nos vamos a ver muy limitados. Básicamente podríamos afirmar que los juegos en CSS son una forma de arte, una forma de mostrar nuestros conocimientos o de aprender.
    CSS no es una alternativa a javascript, esto es importante aclararlo, hacer juegos en CSS no tiene ningún valor comercial directo, si quieres desarrollar juegos para la web lo mejor es utilizar javascript.
  En el video de arriba aprenderás a hacer un juego de tiro al blanco con patos en CSS

Descargas

  En esta sección podrás descargar el código fuente del tutorial y las imágenes:

domingo, 25 de junio de 2017

Mejorar el rendimiento de juegos HTML5

No olvides suscribirte

   Dependiendo de nuestro juego, el rendimiento puede llegar a ser un dolor de cabeza, y en general para el desarrollo de juegos es algo que casi siempre hay que tener presente, tanto en el video como en esta entrada voy a hablar de 3 técnicas para mejorar el rendimiento.

Pre-renderizar

  Por una razón que cuesta un poco entender, es mas eficiente dibujar en un canvas virtual y luego cargar todo al canvas principal, que directamente dibujar en un solo canvas. Esto es muy sencillo de lograr.
  Primero el canvas virtual lo hacemos así :
 var preRender = document.createElement("canvas");
 var vctx = preRende.getContext("2d");

  Todo el juego va a ser dibujado usando este contexto "virtual", y luego en el canvas "real" hacemos así:
ctx.drawImage(preRender, 0, 0);
  
Donde "ctx" es el contexto del canvas "real"

Extracción de propiedades

  Cuando limpiamos el canvas usando "clearRect" y en alguna otra circunstancia, aveces hacemos cosas como: "canvas.width" si esto se hace dentro de nuestro bucle de juego, en cada iteración se va a extraer la propiedad del objeto a través del DOM lo cual requiere mas trabajo que pasar el número directamente, o crear una variable que almacene el valor una sola vez:
   var anchoJ = canvas.width;
   var altoJ = canvas.height;
Luego en nuestro bucle de juego las usamos así:
  canvas.clearRect(0,0,anchoJ,altoJ);
 En lugar de "extraer" la propiedad en cada iteración 

Limpiar solo las diferencias y no to el canvas

  Para lograr la animación es necesario el uso de "clearRect", pero no siempre es necesario que se limpie todo el canvas, podemos limpiar solamente lo que necesitemos ahorrandonos una infinidad de recursos en el camino. Esto puede variar dependiento de cada juego, puedes ver un ejemplo en mi video, pero en general sería algo así :
  canvas.clearRect(prevX, prevY, ancho, alto);

  Donde las variables "prevX" y "prevY" son las últimas posiciones "X" e "Y" utilizadas, las variables "ancho" y "alto" van a depender también del área que queramos limpiar.  Una forma de tratar esto, como lo hago en mi video es que cada objeto en su función de movimiento, se limpie a si mismo, por lo que estas dos últimas variables sería en ancho y alto del objeto en cuestión.

Descargas

  Aquí puedes descargar el código fuente hecho en el video:

domingo, 4 de junio de 2017

Placeholder animados en CSS3


Para ver en Youtube clic aquí

Placeholder animados

  El placeholder es una porción de texto que se puede colocar para indicarle al usuario lo que debe rellenar en un formulario, existen formas de estilizarlo desde css3, para que no se convierta en un simple texto aburrido, estas sin embargo son experimentales y no funcionan de la misma manera en todos los navegadores. Aquí aprenderemos a usarlas y haremos efectos muy interesantes usando las transiciones.

Descargas


Ponte en contacto conmigo 


lunes, 22 de mayo de 2017

Como hacer un juego de Breakout en Javascript


Para ver en Youtube Click aquí
(No olvides suscribirte)


¿Que es eso de Breakout?

   Breakout es un videojuego arcade desarrollado por Atari, Inc. y lanzado al mercado el 13 de mayo de 1976.1 Fue creado por Nolan Bushnell y Steve Bristow, influenciados por el videojuego de 1972 Pong, también de Atari. En 1978 se distribuyó la versión para el Atari 26002 y en 1983 la versión para MSX.2 Posteriormente fue mejorado en videojuegos como el Super Breakout.

  En la parte inferior de la pantalla una rayita simulaba una raqueta de front-tenis que el jugador podía desplazar de izquierda a derecha. En la parte superior se situaba una banda conformada por rectángulos que simulaban ser ladrillos. Una pelotita descendía de la nada y el jugador debía golpearla con la raqueta, entonces la pelota ascendía hasta pegar en el muro, los ladrillos tocados por la pelota desaparecían. La pelota volvía a descender y así sucesivamente. El objetivo del juego era terminar con la pared de ladrillos.


Tamaño de fuente en el Canvas

    Para cambiar el tamaño de la fuente del texto en nuestro canvas podemos utilizar la propiedad "font" de la siguiente manera : ctx.font = "30px Arial", primero definimos el tamaño y luego la familia de la fuente, mas información aquí :  HTML canvas font Property

Archivos del Tutorial

 Código fuente final completo


Redes sociales:

domingo, 9 de abril de 2017

Animaciones para juegos HTML5


Para ver en youtube clic aquí (No olvides suscribirte)


Las Animaciones

   Un juego es prácticamente una animación controlada, así que las mismas son uno de los ejes centrales a la hora de desarrollar juegos en cualquier lenguaje, si ya viste la clase a continuación, una descripción detallada de cada una de las funciones usadas en los ejemplos y al final los enlaces de descarga para los ejemplos desarrollados

Funciones de animación

  • setTimeout() : Posee dos parámetros el primero es la función a llamar y el segundo es el tiempo en mili-segundos que la función va a esperar antes de llamar a la función del primer parámetro
  • setInterval() : Al igual que la anterior posee dos parámetros, el primero la función y el segundo el tiempo, igual que el anterior, la diferencia es que la función se va a estar llamando continuamente, separada por el espacio de tiempo definido en el segundo parámetro que al igual está en mili-segundos
  • requestAnimationFrame() : Simplemente intenta llamar a la función que representa nuestro cuadro de animación, asegurándose primero de que existan los recursos disponibles para ejecutar dicho cuadro, para poder usarla en animaciones hay que hacer llamadas recursivas, mas información en este video: https://www.youtube.com/watch?v=zlclLs_m0mI

Explicando las funciones de dibujo

  • fillRect(x,y,w,h) : Nos dibuja un rectángulo, el primer parámetro (x) representa la coordenada x del mismo,  el segundo (y) la coordenada y, el tercero (w) el ancho y por último el cuarto (w) el alto
  • clearRect(xy,w,h) : Definimos un rectángulo con los mismos parámetros de la función anterior, todo lo que esté en el área de efecto de este rectángulo se borrará
  • fillStyle : No es una función sino una propiedad, aquí definimos el color que llevará el canvas

Descargas de códigos fuente


Enlaces útiles


Enlaces sociales



domingo, 2 de abril de 2017

SVG vs Canvas vs Divs Gráficos para juegos HTML5


Para ver en youtube clic aquí


Gráficos para juegos

  Tenía desde el pasado diciembre la promesa de subir un curso dedicado a juegos, el día de hoy comparto con ustedes la primera clase, aprenderemos aquí cual es la mejor opción para los gráficos y la razón detrás de esto, veremos también algunos ejemplos que nos serán de mucha utilidad, si el video te gusta y te es útil por favor no se te olvide hacer clic en el pulgar arriba y suscribirte al canal

Links útiles

sábado, 4 de febrero de 2017

Como crear instaladores para Inno Setup





Un tutorial en dos partes

   Para que el video no resultara muy largo, decidí dividirlo en dos partes, en la primera haremos el instalador básico y la pantalla personalizada que nos permitirá agregar los datos de conexión a nuestra base de datos, en la segunda parte verificaremos la instalación de Java y haremos la asociación a la extensión .MP.
  Los dos videos serán publicados aquí mismo, en esta misma entrada cuando esten disponibles.


Tipos de objeto usados


  •    TInputQueryWizardPage: Tipo de clase que denota, exclusivamente páginas para ingresar información, hay otros tipos de página como por ejemplo: TInputOptionWizardPage, TInputDirWizardPage, TInputFileWizardPage, que respectivamente son para páginas de, opciones, selección de carpetas y selección de archivos.
  • TSetupStep: Estado o "paso" en el cual se encuentra la instalación, tenemos: ssInstall que ocurre justo antes de que la instalación comience, ssPostInstall justo después de que la instalación termina, ssDone cuando nuestro programa setup finaliza luego de una instalación exitosa. Este tipo de objeto lo usamos en la función CurStepChanged

Constantes que denotan las páginas de nuestro setup

  En las funciones para crear nuestras pantallas personalizadas, el primer parámetro es una constante que denota la página después de la cual va a estar ubicada nuestra pantalla personalizada, a continuación cada una de esas constantes:
  • wpWelcome: La página de bienvenida, no usada en el tutorial
  • wpLicense: Donde aparece el contrato de licencia, la primera página del setup que creamos en el tutorial
  • wpPassword: Si nuestro instalador solicita contraseña para instalar esta será la página, no usada en el tutorial
  • wpInfoBefore: Información que deseemos mostrar antes de instalar, no usada en el tutorial
  • wpUserInfo: Información del usuario
  • wpSelecDir: Página donde se selecciona la carpeta de instalación, la usamos en el tutorial para indicar que después de esta página va nuestra página personalizada
  • wpSelectComponents: Seleccionar los componentes de la aplicación que se deseen instalar, no usada en el tutorial
  • wpSelectTask: Donde aparecen ciertas tareas adicionales, como por ejemplo crear el acceso directo a escritorio
  • wpReady: Donde nos muestra el resumen de lo que se va a instalar
  • wpPreparing, wpInstalling: Respectivamente, donde se empieza a preparar la instalación y donde comienza la instalación propiamente
  • wpInfoAfter: Información que deseemos mostrar al finalizar la instalación
  • wpFinished: Página final de nuestro setup

MsgBox y sus valores

  Como vimos en el video, la función MsgBox toma tres valores, el texto a mostrar, icono y el número de botones. Estos dos últimos se denotan con constantes que les voy a mostrar a continuación:

Primero los iconos
  • mbInformation 
  • mbConfirmation 
  • mbError 
  • mbCriticalError 
   Ahora los botones
Estos son nemotécnicos así que no los voy a describir: MB_OK, MB_OKCANCEL, MB_ABORTRETRYIGNORE, MB_YESNOCANCEL, MB_YESNO, MB_RETRYCANCEL

Las funciones de evento

  Si nos vamos a esta página en la documentación de Inno Setup, podremos ver que la cantidad de funciones de evento es enorme, así que aquí me voy a limitar a hablar de las funciones utilizadas en el tutorial:
  • NextButtonClick: Aquí estamos reaccionando a los clics en el botón de "Siguiente", esta función se declara con "function" ya que devuelve valores, y tiene un parámetro de tipo entero que denota el "ID" de la página, si en esa página nuestra función devuelve "False" el instalador no avanzará de esa página. Para obtener el "ID" simplemente hacemos: nombreDePagina.ID
  • CurStepChanged: Aquí estamos reaccionando cada vez que alcancemos un paso diferente en nuestra instalación, se declara con "procedure" ya que no devuelve valores, se le pasa un parámetro del tipo TSetupStep, en esta misma entrada en la sección "Tips de objeto usados" puedes ver las constantes usadas para esos pasos

Valores de espera y visualización para Exec y ShellExec


    Como se mostraran las ventanas:
  • SW_SHOW y SW_SHOWNORMAL: Son esencialmente lo mismo muestran la ventana de forma predeterminada
  • SW_SHOWMAXIMIZED: Muestra la ventana totalmente maximizada
  • SW_SHOWMINIMIZED: Muestra la ventana minimizada
  • SW_SHOWMINNOACTIVE: Ventana no activa, va a quedar atrás en el foco 
  • SW_HIDE: No se va a mostrar la ventana, la aplicación que ejecutemos va a quedar en segundo plano
  Valores de espera, esto significa si vamos a esperar a que termine de ejecutarse antes de continuar
  • ewNoWait: No se va a esperar a que termine la ejecución de la aplicación llamada
  • ewWaitUntilTerminated: El instalador va a esperar a que la aplicación llamada se cierre totalmente antes de continuar
  • ewWaitUntilIlde: El instalador va a esperar a que la aplicación llamada quede inactiva, pero esta va a seguir ejecutandose

Aclaratoria

  En el video, se me olvidó explicar algo, cuando seleccionamos los archivos y carpetas que va a copiar nuestro instalador:


  En el botón de "Add folder" podemos seleccionar una carpeta entera para que nuestro instalador copie su contenido, en el tutorial seleccionamos la carpeta "lib" que contiene el conector de MySQL, esto en nuestro script nos genera la siguiente linea en la sección de "[Files]" :

Source: "C:\Users\satur\Documents\Proyectos innoSetup\Tutorial\lib\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

  La sección "DestDir" indica la carpeta de destino, que como sabemos usando la constante "{app}" se refiere a la carpeta de instalación de nuestro programa.  Pero en este caso solo nos copiará los archivos dentro de la carpeta, mas no la carpeta como tal, si queremos que nos copie la carpeta completa debemos hacer lo siguiente:

DestDir : "{app}/nombreDeCarpeta"

Descargas



Mantente en contacto conmigo:


domingo, 22 de enero de 2017

Curso de Java clase 12 Los Threads


(No olvides suscribirte)

Los Threads

    Si queremos hacer un reloj, una animación, o crear una especie de evento personalizado, necesitamos crear un proceso paralelo a nuestro "Main" ya que cualquier cosa que coloquemos ahí se va a ejecutar en orden, por lo que podría impedir que se ejecute el resto del código. La solución es usar Threads que nos permiten crear procesos paralelos, que se ejecutan sin causar interrupción alguna en nuestro "Main", en el video de arriba aprenderás a hacer lo ya mencionado, y a continuación podrás descargar los códigos fuente realizados en el tutorial

Códigos fuente

   GUI.java
  

domingo, 8 de enero de 2017

Juego de Anagrama en Java



Juego de Anagrama

  Un anagrama (del griego ἀνά -ana-, prefijo que significa "de vuelta", y γράμμα -gramma-, "letra") es una palabra o frase que resulta de la transposición de letras de otra palabra o frase. Dicho de otra forma, una palabra es anagrama de otra si las dos tienen las mismas letras, con el mismo número de apariciones, pero en un orden diferente. Por ejemplo, las palabras amor y mora son anagramas porque las dos se componen de las mismas letras: a, m, o y r.

  Sabiendo lo que es un anagrama podemos entender mejor de lo que se trata el juego, simplemente vamos a tomar una palabra aleatoria de un archivo de texto con muchas palabras, la desordenamos, y luego deberemos adivinar de que palabra se trata, un juego que pone a prueba nuestras neuronas, tanto al escribirlo como al jugarlo

Descargas



Enlaces sociales



domingo, 1 de enero de 2017

Eventos y componentes Swing Curso de Java clase 11


Para ver en youtube clic aquí
(No olvides suscribirte)

Para una mejor comprensión se recomienda ver el siguiente material

Ejemplo KeyAdapter y KeyListener

Como prometí en el video a continuación podrás descargar un ejemplo en el cual respondemos a eventos usando tanto la interfaz como la clase, en clases futuras se tratará esto en profundidad, por ahora puedes observar y comparar que se hacer exactamante igual que con los otros ejemplos:

Código fuente de la clase

  En el enlace a continuación podrás descargar lo hecho en el vídeo: