Mostrando entradas con la etiqueta tutorial. Mostrar todas las entradas
Mostrando entradas con la etiqueta tutorial. Mostrar todas las entradas

sábado, 30 de diciembre de 2017

Como hacer una linterna en Android con Xamarin


(No olvides suscribirte)

Linterna en android con Xamarin

  Una aplicación imprescindible, que en la mayoría de los casos no viene incluida en nuestros teléfonos, si tienes alguna duda puedes ver el tutorial de arriba, a continuación el código fuente 



using Android.App;
using Android.Widget;
using Android.OS;
using Android.Hardware;
using static Android.Hardware.Camera;
using Java.Lang;

namespace TutorialLinterna
{
    [Activity(Label = "TutorialLinterna", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            bool tieneFlash = ApplicationContext.PackageManager.HasSystemFeature(Android.Content.PM.PackageManager.FeatureCameraFlash);
            ToggleButton bswitch = FindViewById(Resource.Id.bswitch);
            TextView textoAviso = FindViewById(Resource.Id.TextoAviso);
            if (!tieneFlash)
            {
                AlertDialog alerta = new AlertDialog.Builder(this).Create();
                alerta.SetTitle("No tienes flash");
                alerta.SetMessage("Con que pensabas alumbrar si no tienes flash");
                alerta.SetButton("OK", (o, s) => { return; });
                alerta.Show();
            }
            Camera camara;
            try
            {
                camara = Camera.Open();
            }catch(RuntimeException ex)
            {
                camara = null;
            }

            bswitch.Click += (o, s) =>
            {
                if(camara != null)
                {
                    if (bswitch.Checked)
                    {
                        Parameters cparams = camara.GetParameters();
                        cparams.FlashMode = Parameters.FlashModeTorch;
                        camara.SetParameters(cparams);
                        camara.StartPreview();
                        textoAviso.Text = "Linterna encendida";
                    } else
                    {
                        Parameters cparams = camara.GetParameters();
                        cparams.FlashMode = Parameters.FlashModeOff;
                        camara.SetParameters(cparams);
                        camara.StartPreview();
                        textoAviso.Text = "Linterna apagada";
                    }
                } else
                {
                    AlertDialog alerta = new AlertDialog.Builder(this).Create();
                    alerta.SetTitle("Error!");
                    alerta.SetMessage("Hubo un error en la camara");
                    alerta.SetButton("OK", (o2, s2) => { return; });
                    alerta.Show();
                }
            };
            
        }
    }
}

Enlaces Sociales

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, 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, 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, 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:

domingo, 18 de diciembre de 2016

Controles de windows en C++ para Win32


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


Los controles de Windows

   Como pudiste aprender en el tutorial de arriba son en esencia ventanas con clases predefinidas que nos ayudan a convertirlas en el control que queramos, es muy importante no confundir la "clase de ventana" con las clases de programación orientada a objetos, si tienes dudas en cuanto a esto te recomiendo revisar el tutorial anterior donde se habla de esto en profundidad, a continuación los enlaces:

  • BUTTON
  • STATIC
  • EDIT
  • COMBOBOX
  • LISTBOX

Estilos específicos

  Un nuevo concepto trabajado en este tutorial, se refiere a que cada control puede tener asociado un estilo especifico, como vimos entonces "estilo" es quizás una palabra algo confusa en este sentido, para que no te confundas simplemente recuerda que "estilo de ventana" no solo se refiere a apariencia si no también a comportamiento, comparto contigo la referencia en la página de la microsoft, para los estilos de cada uno de los controles:



domingo, 11 de diciembre de 2016

Cual es la diferencia entre Swing y AWT para crear GUIs en Java


(No olvides suscribirte)

AWT vs Swing

    Ambas forman parte del grupo de librerías que en Java nos permiten construir nuestra propia interfaz gráfica, pero ¿Acaso una de ellas es mejor que la otra? empecemos diciendo que AWT es realmente el método "viejo", ya que fue la primera librería proporcionada por Java para crear nuestra propia GUI, Swing por otro lado sería el método "nuevo" ya que llegó con la intención de subsanar los inconvenientes que representaba AWT, estos inconvenientes solo se evidenciaban bajo el concepto de multiplataforma de Java, observa la tabla a continuación :


AWT Swing
Usa componentes del S.O. Dibuja sus propios componentes
El S.O. maneja los eventos Java maneja los eventos
La apariencia cambia con el S.O Tienen la misma apariencia en cualquier S.O.
La apariencia es estática Se puede personalizar con los Look & Feel

  Luego de ver esta tabla y el video que encabeza esta entrada, nos queda claro el principal inconveniente al usar AWT, en cada sistema operativo nuestra interfaz va a tener una apariencia diferente y es posible que incluso parte del comportamiento sea diferente también, ya que los eventos son manejados por el sistema operativo, esto hacía que desarrollar aplicaciones con interfaz gráfica en Java fuera algo tedioso, había que verificar que servía y que no en cada sistema, por lo que el eslogan de java: "Escribe una vez y ejecútalo donde quieras" se veía un poco afectado.

sábado, 10 de diciembre de 2016

Que son y como usar Sprites en CSS


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


Las peticiones y la velocidad

  Algo que pareciera obvio mencionar es que cada vez que colocamos imágenes en nuestra web esta va a tardar mas en descargar, esto no solo se debe al peso agregado de estos archivos de imagen, si no también al aumento en el número de peticiones hacia el servidor web, por supuesto que no tiene sentido simplemente dejar de utilizar imágenes, estas no son imprescindibles para el funcionamiento de nuestra página, pero sin ellas perdería atractivo y con ello dejaría de atraer visitantes. Peticiones adicionales al servidor se crean cuando, por ejemplo, hacemos un efecto de "hover" con imágenes, ya que javascript solicitaría una nueva imagen al servidor.
   Nos podemos ahorrar muchas peticiones al servidor usando una técnica muy sencilla, que es mas que todo útil a la hora de trabajar con iconos en nuestra web, simplemente posicionemos todos nuestros iconos en una sola imagen grande y con CSS la movemos para mostrar solamente el icono que queremos usar, esta imagen grande la podemos denominar "Sprite" y a continuación te muestro dos de los ejemplos usados en el videotutorial de arriba:




  En el tutorial de arriba aprenderás no solo implementar los Sprites en Css, sino como también a hacer tu propio sprites desde Photoshop

Descargas

HTML :



Imágenes :



Otros
Estos archivos representan el contenido de los iframes usados en el video



Conectate con migo





   

sábado, 3 de diciembre de 2016

Como hacer Ventanas en Java, introducción a las GUI Clase 9


Para ver en Youtube clic aquí
Para ver la lista de reproducción completa clic aquí
(No olvides suscribirte)


Ventana básica en Java

   En este tutorial principalmente se enseña a hacer una ventana básica, esto a modo de introducción a la creación de interfaces gráficas. Existen 3 modos de crear ventanas en Java, en el video se tratarán  los 3, la primera con swing, luego con awt y por último usando el diseñador de Netbeans, en este caso estamos usando igualmente swing pero con la ayuda del diseñador es mucho más simple.

Elementos Swing

  Aquí solo compartiré una referencia para que observen los diferentes elementos Swing que se pueden colocar en una ventana, la página está en inglés pero es una guía visual así que no es necesario leer mucho, en el tutorial dedicado al tema de los componentes profundizaremos mas al respecto

¿Que son las Layouts?

  Las layouts son simplemente una forma de decirle a Java como organizar los elementos que vamos colocando en cada ventana, cada layout de dice el tamaño y la ubicación que debe tener cada elemento, a continuación las layouts mas comunes:
  • BoderLayout: Permite organizar los elementos usando puntos cardinales, norte, sur, este y oeste
  • BoxLayout: Crea columnas o filas de elementos
  • FlowLayout: Organiza los elementos en lineas, con tamaño justo para su contenido
  • GridLayout: Podemos crear una matriz para colocar los elementos en ella, el tamaño será lo que ocupe cada celda
  • GridBagLayout: Es uno de los mas sofisticados, al igual que el de arriba nos permite crear una matriz, pero aquí podemos especificar que un elemento ocupe dos celdas, o que su tamaño no cubra la celda entera
  Aquí se intentó explicar las layouts de forma muy resumida, en futuras clases se hablará mas profundamente acerca de este tema, faltaron algunos layouts por mencionar, puedes ver una referencia completa en este enlace (está en inglés):

WindowAdapter

  Es la clase que permite sobrescribir los métodos que se llaman en un evento de ventana, a continuación una descripción de cada uno:
  • windowActivated: Cuando la ventana se activa
  • windowColsed: Cuando la ventana es cerrada
  • windowClosing: Cuando la ventana se esta cerrando
  • windowDesactivated: Cuando la ventana se desactiva
  • windowsDeiconified: Cuando la ventana se des-iconifica
  • windowGainedFocus: Cuando gana el foco
  • windowIconified: Cuando la se iconifica
  • windowLostFocus: Cuando la ventana pierde el foco
  • windowOpened: Cuando se abre la ventana
  • windowStateChanged: Cuando cambia el estado de la ventana
Mas info aquí

Descarga los ejemplos del Blog





sábado, 26 de noviembre de 2016

Como hacer un juego de Pong con Javascript y Canvas


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


Uno de los primeros juegos comerciales

   Este juego fue creado y lanzado por Nolan Bushnell el 29 de Noviembre de 1972, para una de las primeras generaciones de videoconsolas, las famosas Atari y está basado en el tenis de mesa. Este clásico a su vez también esta rodeado de controversia, ya que en sus inicios fue objeto de una demanda por parte Magnavox Odyssey ya que estos poseían un juego similar.

Descargas

Plantilla HTML: Base inicial del código visto en el tutorial

domingo, 20 de noviembre de 2016

Que es y como usar requestAnimationFrame en javascript


Recuerda a suscribirte

No mas setInterval

  Hace no mucho tiempo, la única alternativa para poder ejecutar nuestro bucle de juego, era anidar setTimeout recursivamente o simplemente llamar a setInterval, pero estas nunca fueron ni de cerca la mejor alternativa, simplemente eran las únicas. En este punto nos podemos preguntar, ¿Cual de las dos es mejor? definitivamente setInterval es más eficiente que setTimeout, pero eso no significa que la primera este libre de problemas.

requestAnimationFrame

   Esta función fue inicialmente introducida por la gente de Mozilla y pronto fue adoptada por los demás navegadores, anteriormente el uso de las ya mencionadas "setTimeout" y "setInterval" requerían que el desarrollador se encargara de ajustar la frecuencia de los cuadros para que el juego o animación en cuestión, se ejecutase correctamente, te recomiendo ver el video de arriba para que veas un ejemplo práctico del uso de esta función.
  La frecuencia de los cuadros con "requestAnimationFrame" es ajustada directamente por el navegador, lo que permite simplificar el desarrollo, esta puede llegar hasta unos 60 cuadros por segundo, a continuación veremos algunos problemas causados por "setInterval" para que entendamos mejor la ventaja de usar "requestAnimationFrame"

Las colas y el exceso de memoria 

   A "setInterval" no le importa si el navegador esta listo, o no, para ejecutar el siguiente cuadro de animación o juego, su segundo parámetro realmente no nos dice cuando será llamada la función, simplemente nos dice cuando esta será agregada a la cola, si el navegador está muy ocupado, "setInterval" continuará agregando llamadas a nuestra función de cuadros a la cola, lo que se traduce en un excesivo e innecesario uso de la memoria, si se está ejecutando en un dispositivo móvil esto se traducirá en consumo de batería. Cuando hacemos una llamada a nuestra función de cuadro con requestAnimationFrame, esta se encarga de preguntarle al navegador si es posible renderizar el cuadro o no, evitando así acumular peticiones en cola alguna.

El navegador no es vidente

  Con "setInterval" no es posible saber que se va a llevar a cabo, ya que esta función fue creada con un propósito muy genérico, en cambio "requestAnimationFrame" le informa al navegador la intención de realizar una animación, lo que permite al navegador optimizar sus prioridades lo mas posible, resultando en ejecuciones mas fluidas y menos propensas a retrasarse.

Las animaciones solo son relevantes si se pueden ver

  Con eso dicho, si minimizamos o cambiamos de pestaña, el navegador reducirá la prioridad para nuestro juego o animación, por lo que se evitará el exceso de consumo en recursos, esto no necesariamente tiene que ser así con "setInterval".

Descargar archivos del tutorial

   A continuación en los siguientes enlaces podrás descargar los archivos usados en el videotutorial, códigos fuentes e imágenes.
Instrucciones de descarga: Luego de hacer clic, se abrirá otra pestaña, debes esperar unos segundos a que aparezca el botón con el texto: "Saltar publicidad", debes hacer clic en ese botón y se abrirá nuevamente otra pestaña con el archivo deseado para que lo descargues 

Plantilla HTML: Documento html con etiqueta canvas y el estilo css

Código fuente final: Ejemplo completo de lo hecho en el video tutorial

Imagenes usadas: Para el botón play y pausa


Más información






sábado, 12 de noviembre de 2016

Juego del dinosaurio de Chrome en Javascript


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


Juego del T-rex

   El famoso dinosaurio de google, odiado por muchos, ya que su presencia se traduce automáticamente en la perdida de una de las cosas que mas anleamos en la actualidad: El internet, lo que algunos no conocen de este infame personaje es que puede cobrar vida con tan solo presionar la tecla de espacio, hecho esto tendremos que esquivar cactus y pterodactylus con forme la velocidad aumenta con el tiempo y a su vez nuestro puntaje, parece algo muy simple, pero contrario a todo pronostico se ha convertido en adicción de muchos.

  En el video de arriba aprenderás a programar tu propia versión del juego en Javascript, y acontinuación aprenderás a agregar algunos elementos que se omitieron en el video para no hacerlo muy largo

Nuestra versión hecha en Javascript

La versión original de Google Chrome

Implementando las nubes

  Si ya completaste el tutorial, no te será muy dificil implementar las nubes, lo haremos de forma similar a lo que hicimos con los cactus, pero como no necesitamos iterar a través de ellas, no llevaremos la cuenta de los elementos siguientes, solo las dibujaremos, debemos recordar que para darle un efecto de profundidad estas deben moverse a una menor velocidad, esto se conoce como parallax y en la imagen a continuación podemos ver un ejemplo


  Vamos a implementar las nubes de la forma más sencilla posible, por lo que no le daremos distancia ni tamaño aleatorio, si no fijo, en nuestro mundo agregamos las siguientes lineas al constructor:

                this.imgNube = document.createElement("img");
this.imgNube.src = "imagenes/nube.png";
this.nx = 350;
this.ny = 50;
this.nd = 250;
Acabamos de agregar la imagen con la cual vamos a dibujar las nubes, y luego procedemos a darle: posición "x", "y" y distancia, que como dije arriba serán fijos, pero no te desanimes por esto, el resultado de esta forma se ve bien.
  Luego en nuestro método "mover" haremos lo siguiente:
                
                this.nx-=2;
  
  Esto logrará que nuestras nubes se muevan mas lentamente que el resto de nuestro mundo, creando el efecto de profundidad

Descargar  imágenes y código fuente

Nota: al hacer clic en el enlace se abrirá una nueva ventana, deberás esperar a que aparezca el botón con el texto "Saltar publicidad" debes hacer clic en él y debería llevarte al archivo deseado, si no es así avísame inmediatamente en un comentario

Pack de imágenes y sonido  Este archivo es un winrar con todas las imagenes utilizadas en el tutorial

Plantilla HTML  Documento html con sus canvas divs botones e imagenes ya listo para que solo tengas que escribir Javascript

Código fuente del video  Este archivo representa lo hecho en el video tutorial, osea el juego sin las nubes ni los pterodactylus (Solo archivo javascript para el resto la plantilla HTML)

Código fuente completo  Todo lo hecho tanto en esta entrada como en el video (Solo archivo javascript para el resto la plantilla HTML)

Sigueme en mis redes sociales y suscríbete a mi canal de Youtube


domingo, 6 de noviembre de 2016

Controles animados para el reproductor HTML5 en Css3


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


Reproductor HTML5 personalizado

  A continuación te presento una lista con todos los enlaces a los tutoriales del reproductor HTML5
    Parece ser un elemento esencial de los reproductores personalizados, bien sea aparecer o desplazarse hacia arriba, le da un toque mucho más especial a nuestro reproductor, en este tutorial aprenderás a animar la barra de controles de un reproductor html5 personalizado.

Descargar código fuente

Nota: Luego de hacer clic en el enlace debes esperar a que aparezca el botón de saltar publicidad, debes hacer clic en ese botó y debería llevarte directamente al archivo



lunes, 31 de octubre de 2016

Juego de Pong en C# con WPF


(No olvides suscribirte)

Windows Presentation Fundation

      Windows Presentation Foundation (WPF) es una tecnología de Microsoft, presentada como parte de Windows Vista. Permite el desarrollo de interfaces de interacción en Windows tomando características de aplicaciones Windows y de aplicaciones web.

WPF ofrece una amplia infraestructura y potencia gráfica con la que es posible desarrollar aplicaciones visualmente atractivas, con facilidades de interacción que incluyen animación, vídeo, audio, documentos, navegación o gráficos 3D. Separa, con el lenguaje declarativo XAML y los lenguajes de programación de .NET, la interfaz de interacción de la lógica del negocio, propiciando una arquitectura Modelo Vista Controlador para el desarrollo de las aplicaciones.

Descargar código fuente



sábado, 8 de octubre de 2016

Hojas con rotación en Css3 y Javascript


Para ver en youtube clic aquí
No olvides suscribirte

Acerca del tutorial

   En el video que acabas de ver, se muestra una forma muy creativa de organizar contenido variado en tu página web, es similar a las pestañas, pero en este caso estaría limitado a 4 hojas solamente. Crearemos una especie de "cubo" usando el contenido que queramos mostrar y lo rotaremos en relación a lo que el usuario desee ver

Código fuente y plantilla Html

Nota: Lego de hacer clic en el enlace, debes esperar unos segundos a que te aparezca el botón de saltar publicidad, luego debes hacer clic en él para ir al archivo deseado




domingo, 2 de octubre de 2016

Listas enlazadas en Java


Para ver en youtube clic aquí
Para más videos como este clic aquí
(No olvides suscribirte)


¿Que es una estructura de Datos?

    Son formas particulares de organizar los datos para que estos se puedan utilizar de forma eficiente, se pueden utilizar en variedad de aplicaciones, pero existen ciertos tipos que son altamente especializados en tareas especificas. Son un medio para manejar grandes cantidades de datos como por ejemplo en Bases de Datos

La lista enlazada

  Si queremos guardar diferentes datos de información variada, que está de alguna manera relacionada entre sí, puede ser de mucha utilidad el uso de Arrays.


   Si la cantidad de información a almacenar es fija no tendremos ningún problema, pero si necesitamos agregar constantemente elementos, tenemos un problema. Siempre podríamos crear una Array enorme mas allá de nuestras necesidades, pero eso podría traducirse en desperdicio de memoria.
  La lista enlazada nos permite crear una estructura eficiente, ya que solicita memoria de acuerdo a las necesidades, y sencilla, ya que descubrirás que no es para nada difícil de hacer, funciona como un Array en donde no tenemos límite de elementos a almacenar.

¿Java no contiene ya algo así de forma pre-establecida?

  Si, tenemos a "LinkedList", "ArrayList", "Vector" y varios otros, pero saber como crearla es importante en tu proceso de aprendizaje como programador, aprender a construirla te permitirá y creando estructuras cada vez más complejas y además conocerás como estas estructuras trabajan "bajo el capó".

Otras estructuras similares

Las Colas

   Las colas son como las listas enlazadas, almacenan varios elementos, pero estas se rigen por una regla muy especifica, que para entenderla, podemos hacer una analogía con el mundo real. Cuando estas en el banco o en el supermercado esperando para pagar, estas en una "fila" o "cola", en donde el primero en llegar es el primero en salir. En las colas podemos almacenar la cantidad que queramos de elementos, al igual que con las listas enlazadas, pero solo podemos obtener elementos de acuerdo al orden que estos fueron agregados, tal cual una fila o cola, el primero en ser ingresado en la cola será el primero en salir
  Los sistemas operativos son muy dependientes de estas estructuras, el ejemplo más sencillo de entender es la cola de impresión

Las pilas

  Al igual que las colas, estas tienen un análogo en el mundo real, cuando colocas varios papeles uno encima de otro ¿Que obtienes? una pila de papeles, y la única forma de sacar hojas de la pila es quitando primero las de arriba. En las pilas los últimos en ingresar son los primeros en salir, esto permite diversas aplicaciones como por ejemplo invertir el orden de un grupo de elementos.

Cosas del video ¿Que es "This"?

  Se usa para referenciar a la clase misma, desde dentro de ella, por ejemplo si tenemos un método con parámetro "dato", como en el video, pero la clase también posee una variable "dato" ¿Como hace Java para diferenciarlos? si decimos "this.dato" nos estamos refiriendo a la variable de la clase y con "dato" (Dentro del método en cuestión) nos estamos refiriendo al parámetro del método.

Códigos fuente

Nota: Luego de hacer clic en el enlace se abrirá una nueva pestaña, luego debes esperar unos segundos a que aparezca el botón de "saltar publicidad", debes hacer clic en ese botón y deberías ser llevado al archivo en cuestión


sábado, 1 de octubre de 2016

Como hacer loaders en CSS3


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


¿Que es un Loader?

   Conocemos como "Loader" a esas pequeñas animaciones que usamos para mostrarle a los visitantes de nuestra web que hay información pendiente por cargar. Su uso más común se encuentra en aplicaciones AJAX y videos HTML5, pero también se puede encontrar en otro tipo de contenido.
  Es común utilizar animaciones GIF como loaders, pero esto representa una pequeña desventaja, ya que podría tardar en descargarla, dependiendo de la imagen. En el video tutorial que protagoniza esta entrada aprenderás a crear un loader con CSS3 solamente, sin nada de Javascript, descubrirás que es muy sencillo y no hay que escribir mucho código.

Archivos del tutorial

Nota: Los enlaces están patrocinados por "Adfly", luego de hacer clic debes esperar a que aparezca el botón de saltar publicidad, al hacer clic en ese botón debería llevarte al archivo deseado

Fondos para loader de barra: Sugiéreme en algún comentario si deseas que agregue alguna otra combinación de colores





domingo, 25 de septiembre de 2016

¿Es necesario el ingles para ser un buen programador?


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


La lengua del mundo

   Si contamos el número de hablantes nativos, el ingles, podría no cobrar mucha importancia, en este sentido se encuentra de tercer lugar, después del chino y del español. Pero cuando miramos el número de personas que hablan inglés como segunda lengua, este escala posiciones hasta llegar a un punto en el cual, no estamos seguros si supera al chino o no.
   Una mejor manera de evaluar la importancia de un idioma es mirar la cantidad de estudiantes, o personas que están aprendiendo este idioma, en este sentido el inglés supera por mucho a las demás lenguas.
  Si viajas por ejemplo a un país como Corea, y no sabes nada de coreano, es muy altamente probable que encuentres a alguien que hable aun quesea algo mínimo de inglés, cosa que no pasa con el español, por lo que es muy importante aprender a hablar este idioma en el campo profesional.
  Te invito a ver este corto video que evalúa esto mismo desde la perspectiva de un programador.

Dame like en Facebook:

Sígueme en Twitter:

Mi perfil de codepen: