Mostrando entradas con la etiqueta programacion. Mostrar todas las entradas
Mostrando entradas con la etiqueta programacion. 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, 19 de noviembre de 2017

Como usar la Web Workers API

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

Los Web Workers

   Normalmente javascript se ejecuta en un solo hilo, esto significa que todos los procesos corren uno detrás de otro, un proceso debe esperar a que termine el anterior para poder ejecutarse, esto significa que si tenemos una aplicación web compleja, y no tomamos en cuenta la complejidad de cada proceso individual, esta podría llegar a colgarse, esto podría ser el resultado de un solo proceso que este tomando mas tiempo del que teníamos previsto. Un web worker nos permite crear hilos independientes de ejecución, como los Threads en java, hilos que no se interrumpen entre sí, lo cual nos permite crear aplicaciones web mucho mas complejas y seguras.
  Mira el video tutorial para aprender como implementar esta API

Descargas



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:

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

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, 22 de octubre de 2016

Efecto persiana en Css3 y Javascript


(Recuerda suscribirte)

Acerca del Tutorial

  En este nuevo tutorial aprenderemos a crear un efecto de transición de persiana, mas específicamente me refiero al estilo de persiana veneciana, la cual está compuesta de diferentes paneles que se ladean para revelar lo que se encuentra detrás, este efecto puede ser útil para crear galerías. Es de notar que este efecto no esta incluido en css3 por lo que hay que hacerlo manualmente en javascript.

La persiana Veneciana

  Están compuestas de láminas de distintos materiales como madera, aluminio, plástico, pvc... dispuestas en forma horizontal. Según la inclinación que demos a las láminas nos permite regular el paso de luz. En la veneciana de aluminio los fabricantes realizan una pequeña curvatura a la lámina para aumentar su resistencia. Es muy utilizada en decoración, bien sola u ocupando el lugar del visillo.


Descargar código fuente


Nota: Luego de hacer clic en el enlace se abrirá una ventana nueva, debes esperar a que aparezca el botón de "Saltar publicidad", al hacer clic en ese botón debería llevarte directamente al archivo deseado








sábado, 15 de octubre de 2016

Efecto tarjeta en Css3


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


Efecto tarjeta

   Este efecto consiste en hacer rotar el contenido para revelar información que se encuentra detrás, se puede lograr usando CSS3 enteramente. Decidí llamarlo efecto tarjeta ya que guarda semejanza con una tarjeta girando en el mundo real

Descargar Códigos 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, 24 de septiembre de 2016

Navegación por pestañas en Html5 y Javascript


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


Las pestañas

  Si tenemos mucha cantidad de texto u otros elementos en nuestra página, puede ser útil pensar en alguna forma de que nuestro contenido no se vea tan cargado y que a su vez permita a los visitantes una lectura menos "lineal", si no en su lugar permitirles interactuar con la página y darles la opción de elegir el contenido que deseen leer

Descargar código fuente

 Nota: Luego de hacer clic en el enlace, debes esperar unos segundos a que te salga el texto de "Saltar publicidad", debes hacer clic en ese botón y debería llevarte al archivo a descargar, si no es así comunícate con migo a través de un comentario 

Plantilla html  Este archivo es el html básico del cual partimos para empezar el tutorial



¡Ponte en contacto con migo!

  Si quieres pedirme algún tutorial que quieras o necesites, puedes hacerlo a través de mis redes sociales, o por un comentario de Youtube (Recuerda suscribirte) 



  

miércoles, 14 de septiembre de 2016

La primera programadora y el primer programa, La historia de Ada Lovelace


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


¿Quien fue la primera persona que programó?

  Parece una pregunta difícil de responder, ya que para poder programar hacer falta un computador, esto hace que la pregunta sea comparable al famoso: ¿Quien fue primero el huevo o la gallina? Los biólogos evolucionistas han respondido esta pregunta, y por si no lo sabes, primero fue el huevo. Te invito a ver el video de arriba para que descubras la historia de la primera persona que programó y así responder a la pregunta: ¿Quien fue primero la computadora o el programador? 

Dame like en Facebook:


Sígueme en Twitter


Mi perfil de codepen

sábado, 3 de septiembre de 2016

Como hacer un Juego de Snake en Javascript


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


Juego de Snake

 Este juego fue lanzado a mediados de lo años 70, a diferencia de lo que muchos creen no fue desarrollado por la Nokia, pero gracias a esta última adquirió una popularidad masiva debido a que venia pre-instalado en los teléfonos de esta marca.
Fuente Wikipedia


Código fuente

Nota: Los enlaces están patrocinados por adfly, luego de hacer clic, debes esperar unos segundos y te aparecerá un boton con el texto "Saltar publicidad", al hacer clic en él te debe llevar directamente al archivo, si no lo hace comunicate conmigo a través de un comentario.



Ver en Codepen


domingo, 28 de agosto de 2016

Que lenguaje de programación Aprender primero | Mi recomendación


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

Mi recomendación

  En el video que acabas de ver yo te recomiendo considerar a Java y a C# como una buena opción para que sean tus primeros lenguajes de programación a aprender, ya que cumplen con los criterios descritos en el video:
  • Son orientados a objetos
  • Tienen una sintaxis común a varios otros lenguajes
  • No son ni muy fáciles ni muy difíciles
  • Son estrictamente orientados a objetos

Pseudocódigo

   Esta es una recomendación aparte, sea cual sea el lenguaje que decidas aprender de primero, combina ese aprendizaje con pseudocódigo

Links del Video

  Nota: Algunos enlaces están patrocinados por Adfly, luego de hacer clic, debes esperar unos segundos para luego hacer clic en el botón que dice "Saltar publicidad" luego de esto serás llevado directamente a la página solicitada, si no es así comunícate conmigo inmediatamente a través de un comentario


Entornos de programación




Curso de Java

  Yo tengo publicado un curso de Java en mi canal de youtube, a continuación de dejo el enlace a la lista de reproducción: