Como usar Gridlayout en CSS3

Para ver en youtube clic aquí

(No olvides suscribirte)

CSS Grids

Código CSS 

.contenedor {
           display: grid;
           grid-template-columns: repeat(2, 65px);
           grid-template-rows: repeat(4, 45px);
           grid-gap: 10px 10px;
           grid-auto-rows: 80px;
       }
       .celda {
           background-color: red;
       }
       .uno {
           grid-column: 1;
           grid-row: 1;
       }
       .dos {
           grid-column: 2;
           grid-row: 1;
       }
       .tres {
           grid-column: 1;
           grid-row: 2;
       }
       .cuatro {
           grid-column: 2;
           grid-row: 2;
       }

       .cinco {
           grid-column: 1;
           grid-row: 3;
       }
       .seis {
           grid-column: 2;
           grid-row: 3;
       }
       .siete {
           grid-column: 1 / span 2;
           grid-row: 4;
       }
       .ocho {
           grid-column: 1;
           grid-row: 5;
       }
       .nueve {
           grid-column: 2;
           grid-row: 5;
       }

Código HTML

<div class="contenedor">
        <div class="uno celda">A</div>
        <div class="dos celda">B</div>
        <div class="tres celda">C</div>
        <div class="cuatro celda">D</div>
        <div class="cinco celda">E</div>
        <div class="seis celda">F</div>
        <div class="siete celda">G</div>
        <div class="ocho celda">H</div>
        <div class="nueve celda">I</div>
    </div>

Mis enlaces sociales

Facebook
Twitter
Google+
Patreon
Codepen

Como hacer una linterna en Android con Xamarin

Para ver en Youtube clic aquí

(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

Facebook

Twitter

Canal de Yotube

Patreon

Como hacer un juego de naves en CSS3 puro

Para ver en youtube clic aquí

(No olvides suscribirte)

Hacer juegos en CSS3 puro es teoricamente posible, pero es justo aclararle a los principiantes que

este no es el propósito de CSS3 por lo que hacerlo realmente se convierte en, un reto, un ejercicio interesante o una forma divertida de mostrar tus habilidades. En el tutorial de arriba haremos un juego de naves en CSS3 puro

Descargas

Imágenes usadas en el tutorial

Codigo fuente finalizado

Enlaces sociales

Facebook

Twitter

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

Plantilla HTML de inicio

Código fuente final

Como usar la Gamepad API

Para ver en Youtube has clic aquí

(No olvides suscribirte)

GamePad API

     Hacer juegos interesantes en javascript no solo consiste en desarrollar el juego propiamente dicho, también un buen juego es aquel que brinda a los jugadores de buenas opciones de interactividad, que mejor forma de interactuar con un juego que con un Gamepad, anteriormente acceder al hardware desde el navegador requería de plugins, pero la evolución constante de este lenguaje ahora nos permite acceder entre otras cosas a los Gamepads conectados en nuestra computadora, en el tutorial de arriba aprenderemos a utilizar esta API.

Descargas

Código fuente final

Las posiciones y el float en detalle

Para ver en youtube haz clic aquí

(No olvides suscribirte)

Las posiciones

   Sin CSS los elementos se posicionan de acuerdo al flujo del html, que no es mas que el orden en el cual aparecen en nuestro código. Con CSS tenemos varias opciones para cambiar esto, pero de forma intuitiva no es tan fácil saber la diferencia entre cada uno.

1. Static: La opción por defecto no hay que especificarla, los elementos se ubican de acuerdo al flujo HTML, y esto no se puede cambiar, propiedades como left o top son ignoradas.
2. Relative: Relativo a si mismo, el elemento se va a ubicar de acuerdo al flujo HTML y se va a respetar el espacio ocupado
3. Absolute: Los elementos quedan fuera del flujo HTML, el espacio ya no es ocupado
4. Fixed: Los elementos se ubican de acuerdo al "viewport"

  Para un mejor entendimiento de todo esto, te recomiendo ver el video que acompaña a esta entrada

El Float

  El float no es una posición como tal, pero si nos permite posicionar los elementos, la confusión con esta propiedad proviene del hecho de que, aplica un comportamiento, no solo al elemento como tal, si no a todos los elementos que le sigan. Puede recibir, 4 valores, pero los mas importantes son dos, rigth y left, que en español significa derecha e izquierda respectivamente, cada uno hace que el elemento se ubique lo mas hacia el lado como sea posible y luego todos los elementos siguientes se ubican alrededor del lado opuesto. Para una mejor explicación te recomiendo ver el video que acompaña a esta entrada, a partir del minuto 13:22 que es donde comienza el apartado sobre el float

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

  Descarga el código fuente del tutorial