#CSS3 ¿Qué son las CSS (Hojas de Estilo en Cascada) ?

El significado de CSS corresponde a Cascading Style Sheets y es un lenguaje que podemos entenderlo como el complemento perfecto de HTML. Sin duda alguna CSS lo utilizamos para aplicar estilos al contenido de nuestras páginas Web.  Para poder escribir la códificación de hojas de estilo es necesario contar con un editor de texto como puede ser:

NOTA: Es importante señalar que es muy distinto un editor de texto a un procesador de texto, Microsoft Word, Notepad++, Wordpad, no son el software para realizar maquetación de sitios web o la mejor herramienta para la generación de FrontEnd, EVITE UTILIZARLOS.

Por ejemplo, en el siguiente código vamos aplicar un estilo de tipografía para nuestro sitio. No es necesario que entienda ahorita todo el código colocado, poco a poco en base a una serie de artículos que iré publicando en este blog, vamos a ir aprendiendo de la mano, igual se aceptan sugerencias y/o recomendaciones Smile.

   1: .tipografia{

   2:     font-family: 'Arial';

   3:     font-size: 10px;

   4: }

Como se puede observar en la códificación anterior, esto corresponde a un conjunto de reglas, las cuales son encerradas por llaves, a su vez, cada propiedad CSS, deberá de contener dos puntos y su valor a ser asignado, como parte de su declaración. Es recomendable que las propiedades CSS sean colocadas en orden alfabético, esto apoyando a que el código sea más legible.

Mediante este artículo podemos concluir que las hojas de estilo en cascada o bien CSS van apoyarnos a los diseñadores Web a poder “vestir” o darle forma a nuestros sitios web,mediante colores, centrado de texto, y actualmente a responder a las necesidades de los diversos dispositivos que se ecuentran en el mercado como pueden ser tablets, celulares, smart tv’s , etc.

Cualquier duda o comentario van a ir saliendo mientras vayamos avanzando en la comprensión de los diferentes temas que abarcan las CSS.

Twitter: @sarellano

Samuel Arellano

 

[C#] ¿Cómo agregar una Enumeración a una Estructura?

En este post lo que pretendo mostrar es que con lo que hemos aprendido hasta el momento, podemos utilizar nuestras enumeraciones dentro de una estructura y darle un mejor sentido a nuestros desarrollos con C#. Vamos a hacer un ejemplo sencillo, vamos a crear una estructura denominada: Contacto y emplearemos una enumeración que nos permita definir el género de una persona (si es Masculino o Femenino).

Te dejo el código comentado Open-mouthed smile.

using System;

namespace EjemploEstructurasEnumeraciones
{
    class Program
    {
        //Creamos nuestra estructura con la palabra reservada struct
        public struct Persona
        {
            //Aquí podemos apreciar que podemos utilizar Enumeradores dentro de nuestra estructura.
            //La utilizamos para definir el genero: Si es Masculino o Femenino.
            public enum Genero
            {
                Masculino,
                Femenino
            };

            //Definimos lo que vamos a almacenar en nuestra estructura.
             public string nombre;
             public string apellido;
             public string email;
            //Si, definí el género dentro de mi estructura para almacenarlo, y lo utilizaré de mi enumerador.
             public Genero genero;
            
            //En este caso utilizo un constructor para pasar los valores a los miembros públicos
            //que tengo definidos para mi estructura.
            //Posteriormente explicaremos que son los constructores :D 
            public Persona(string _nombre, string _apellido, string _email, Genero _genero)
            {
                nombre = _nombre;
                apellido = _apellido;
                email = _email;
                genero = _genero;
            }

            //En este caso realice una sobrecarga del método ToString() para mandar imprimir
            //en consola los valores almacenados en mi estructura.
            public override string ToString()
            {
                return nombre + " " + apellido + " su correo es: " + email + " su genero es " + genero;
            }
        
        };

        
        static void Main(string[] args)
        {
            //Inicializo mi estructura con los valores correspondientes y lo imprimo en consola.
            Persona persona = new Persona("Samuel", "Arellano", "Sarellano@outlook.com", Persona.Genero.Masculino);
            Console.WriteLine(persona.ToString());
            Console.ReadKey();
        }
    }
}

Lo que mirarías en pantalla sería :

image

Lo interesante de este ejemplo es que veas las posibilidades que tienes de ir mejorando tu código con la utilización de elementos de .NET como son las estructuras y las enumeraciones.

Hasta la próxima.

Samuel Arellano

[C#] Enumeraciones

Este post tiene el objetivo de enseñarte la utilización de las Enumeraciones. Sin duda alguna el propósito fundamental de las enumeraciones, es simplificar la codificación, evitar errores de programación, pero sobretodo nos permite mejorar la legibilidad del código permitiendo utilizar valores más significativos en lugar de valores numéricos.  Es necesario utilizar las enumeraciones cuando en nuestros desarrollos requerimos de un conjunto de opciones que contengan un valor, por ejemplo para escolaridad, estado civil, etc.

Las enumeraciones son símbolos que se van a encontrar relacionados por sus valores fijos. Veamos un ejemplo en código. Para poder elaborar una enumeración, es necesario utilizar la palabra reservada enum.

using System;

namespace ConsoleApplication3
{
    class Program
    {
        //Declaramos nuestra enumeración con la palabra reservada: enum
        enum estadoCivil
        {
            //Hacemos el listado de opciones fijas dentro de nuestra enumeración
            Soltero,
            Casado,
            Divorciado
        };
        static void Main(string[] args)
        {
            //Accediendo a los valores de la enumeración.
            Console.WriteLine("El estado civil de Samuel Arellano es: {0}", estadoCivil.Soltero);
            Console.ReadKey();
        }
    }
}

Utilizar enumeraciones nos facilita demasiado la legibilidad de nuestro código en la utilización de banderas o de valores numéricos, en lugar de mandar un 0 o un 1, mandamos el valor de la enumeración..

En el siguiente post, vamos a realizar un ejercicio de como podemos incluir una enumeración dentro de una estructura.

Cualquier comentario es bienvenido en la cuenta de twitter @sarellano.

Saludos.

Samuel Arellano

[C#-Programadores .NET] Ordenar un Array y obtener el Máximo y Mínimo valor.

Hace unos momentos un colega pidió colaboración en elaborar un programa en Consola, que pidas la cantidad de números y puedas obtener el número máximo y mínimo del conjunto de valores. Me dió por buscar una solución (igual si alguien tiene una mejor y gusta compartirla estaría de lujo) y es aquí cuando la comparto.

En este caso utilicé los métodos:

Array.Sort: Ordena los elementos de toda una matriz Array unidimensional utilizando la implementación de IComparable de cada elemento de la matriz Array.

Array.Min: Permite obtener el valor mínimo de un arreglo.

Array.Maz: Permite obtener el valor máximo de un arreglo.

 

Paso 1: Abrir nuestro Visual Studio 2013 Preview

clip_image002

Paso 2: Presiona sobre New Project. El asistente de Visual Studio, nos presentará todas las plantillas que tenemos disponibles para elaborar distintos tipos de proyectos. En nuestro caso seleccionamos Console Application (disculpen mi pulso para iluminar la opción jeje).

clip_image004

 

Paso 3: Coloque el nombre del proyecto que logre identificar lo que vamos a realizar, en mi caso pondré MaximoMinimoApplication

using System;

namespace EstructurasApplication
{
    class Program
    {
      
        static void Main(string[] args)
        {
            //Declaramos una variable que almacenará la cantidad de valores que va a capturar el usuario
            int cantidadnumeros = 0;
            //Definimos nuestro arreglo
            int[] numeros;
            //Solicitamos al usuario la cantidad de números que desea introducir por la aplicación en consola.
            Console.WriteLine("¿Cuántos números deseas introducir?");
            //Leemos en número por la consola.
            cantidadnumeros=int.Parse(Console.ReadLine());
            //Dimensionamos nuestro array
            numeros= new int[cantidadnumeros];
            //Realizamos el pedido de los números dependiendo la cantidad que solicitó el usuario.
            for(int i=0; i<cantidadnumeros; i++)
            {
                Console.WriteLine("Dame el número {0}",i+1);
                numeros[i]= int.Parse(Console.ReadLine());
            }
            //Método que permite ordenar los valores del arreglo.
            Array.Sort(numeros);
            //Mandamos imprimir en consola los valores ordenados.
            Console.WriteLine("Los números ordenados son:");
            for (int i = 0; i < cantidadnumeros; i++ )
            {
                Console.WriteLine(numeros[i]);
            }

            //Imprimimos el valor máximo mediante el método Max
            Console.WriteLine("El número máximo es: {0}", numeros.Max());
            //Imprimimos el valor mínimo mediante el método Min
            Console.WriteLine("El número mínimo es: {0}",numeros.Min());
            Console.ReadLine();
        }
    }
}

Si alguien gusta colaborar con alguna idea, podemos discutirlo mediante correo electrónico sarellano@outlook.com

Saludos.

Samuel Arellano

[C#] Crear tipos definidos por el usuario.

Que tal amigos, en este post aprenderemos acerca de los tipos definidos por el usuario (conocidos en el bajo mundo como Estructuras, o structs, la cual es la palabra reservada o palabra clave para poder crearlos). Es necesario aclarar que al igual que los demás tipos por valor, las instancias de los tipos definidos por el usuario también se almacenan en el stack y contienen sus datos directamente.

 

Para poder crear una estructura, realizaremos los siguientes pasos:

 

Paso 1: Abrir Visual Studio 2013 Preview

 

clip_image002

 

Paso 2: Presiona sobre New Project. El asistente de Visual Studio, nos presentará todas las plantillas que tenemos disponibles para elaborar distintos tipos de proyectos. En nuestro caso seleccionamos Console Application.

 

clip_image004

 

Paso 3: Coloque el nombre del proyecto que logre identificar lo que vamos a realizar, en mi caso pondré EstructurasApplication

clip_image006

Paso 4: En este caso aprenderemos a definir una estructura. Esto se realiza con la palabra reservada struct, seguida posteriormente del nombre que identifique a la estructura. Visualiza el siguiente ejemplo:

clip_image007

Paso 5: Para poder acceder a las propiedades u elementos de nuestra estructura, es necesario utilizar la palabra reservada New.

clip_image008

NOTA: Cabe mencionar que si cambiamos la palabra reservada struct por class, podemos disponer de una clase (un tema que trataremos más adelante), aunque aumentaríamos los bytes dentro de nuestra aplicación.

Los puntos a considerar para utilizar una estructura son los siguientes:

·         Representan únicamente un valor lógicamente.

·         Tiene un tamaño de instancia que debe ser menor a 16 bytes, de lo contrario considere en utilizar una clase.

·         No se realizan cambios con frecuencia después de crearla.

Con este artículo ya podrás diferenciar cuando utilizar una estructura.

Saludos.

Samuel Arellano

[C#] ¿Cómo declarar una variable de tipo valor?

En este post aprenderemos a cómo podemos declarar una variable de Tipo por valor. Primeramente para poder utilizar un tipo, es necesario declarar la instancia del tipo que vamos a utilizar. Un punto importante a señalar es que los tipos por valor tienen un constructor de manera implícita, por lo que se declara una instancia de manera automática (es decir, no se tiene que incluir la palabra reservada New como se hace con las clases, el constructor asigna un valor por defecto, generalmente es nulo) para la nueva instancia.

Se debe siempre de inicializar la variable dentro de la declaración, como buena práctica de desarrollo.

Para poder efectuar la declaración de variables, utilizaremos el entorno de desarrollo de Visual Studio, en este caso Visual Studio 2013 Preview, en caso de no tenerlo, puedes descargarlo del siguiente enlace: http://www.microsoft.com/visualstudio/esn#2013-downloads.

En este caso vamos a realizar un aplicación de consola para ejemplificar la declaración de tipos por valor:

Paso 1: Abrir nuestro Visual Studio 2013 Preview

clip_image002

Paso 2: Presiona sobre New Project. El asistente de Visual Studio, nos presentará todas las plantillas que tenemos disponibles para elaborar distintos tipos de proyectos. En nuestro caso seleccionamos Console Application (disculpen mi pulso para iluminar la opción jeje).

clip_image004

 

Paso 3: Coloque el nombre del proyecto que logre identificar lo que vamos a realizar, en mi caso pondré TiposValorApplication

clip_image006

Paso 4: La plantilla de las aplicaciones de Consola, nos va a preparar los archivos necesarios para comenzar con nuestra aplicación. En este caso aún no vamos a desarrollar un programa, solamente aprenderemos a cómo declarar nuestros tipos por valor (vamos poco a poco aprendiendo y realizando nuestro aprendizaje).

Para declarar un tipo por valor, especificamos el tipo, posteriormente el nombre de nuestra variable y su inicialización.

Cabe mencionar que cuando escribimos el tipo dentro de Visual Studio, contamos con el Intellisense, el cual nos brinda las posibilidades u opciones a elegir para nuestra declaración.

Por ejemplo, si quisiéramos un entero:

clip_image007

clip_image008

NOTA 1: Para tomar en cuenta, si eres desarrollador de VB.NET, encontrarás que siempre se capitalizan las palabras reservadas, esto con la finalidad de mejorar la legibilidad.

NOTA 2: C# distingue entre mayúsculas y minúsculas, cosa que es distinta en VB.NET, ya que para este último sería la misma variable.

Cabe mencionar que también podemos declarar nuestras variables como nulas.

clip_image009

Espero que este post sea de tu utilidad.

Saludos.

Samuel Arellano (@sarellano)

[C#] ¿Qué son los Tipos por Valor?

http://linuxgazette.net/85/misc/ortiz/types.png

Dentro del .NET Framework existen tipos tan simples (o sencillos), los cuales los utilizamos principalmente del tipo númerico y booleanos, estos son conocidos como tipos de valor.  Para entender el concepto de tipos de valor, lo podemos definir como “aquellas variables que contienen sus datos directamente en lugar de contener una referencia a los datos almacenados en la memoria”.

Un punto muy importante a tomar en cuenta es que las instancias que se realizan de los tipos de valor son almacenadas en un área de memoria llamada pila (stack), el cual durante el tiempo de ejecución se puede crear, leer, eliminar o actualizar.

Existen tres tipos de valor los cuales son:

·         Tipos integrados

·         Tipos definidos por el usuario

·         Enumeraciones

NOTA: Todos los tipos anteriormente comentados se derivan del tipo base System.ValueType.

En la tabla que muestro en la parte inferior, se pueden apreciar los tipos por valor que tenemos disponibles dentro del .NET Framework, así como los rangos de valores que permiten almacenar cada uno de ellos.

http://www.c-sharpcorner.com/UploadFile/prvn_131971/types-in-C-Sharp/Images/table5.3.gif

 

Es importante señalar que se puede emplear el nombre largo o bien el alias, para poder declarar tipos por valor, aunque la mayoría de los desarrolladores optemos por emplear alias, ya que es fácil recordar el nombre corto.

Aunque los tipos de valor a menudo representan valores simples, estos pueden funcionar como objetos, es decir, pueden emplearse métodos como puede ser ToString();, el cual permite mostrar los valores como texto.

NOTA: TODOS los tipos se derivan de System.Object. Esto permite establecer el sistema de tipo común utilizado en el .NET Framework.

 

En los siguientes artículos aprenderemos a como declarar tipos por valor en C#.

Saludos.

Samuel Arellano (@sarellano)

Entendiendo los conceptos de BackEnd y FrontEnd.

Sin duda alguna hoy en día dentro del desarrollo de software es común escuchar los términos de BackEnd y FrontEnd, pero considero importante que se conozcan bien los términos para clasificarnos en alguna de las categorías.

Un desarrollador (o programador en algunos casos) BackEnd, es aquel que se encarga de elaborar la parte que interactua con el lado del servidor, como puede ser el acceso a bases de datos de la índole de MySQL, Microsoft SQL Server, Oracle, etc., mediante lenguajes de programación como .NET, PHP, Ruby, o el de su preferencia.

   

En cambio, los desarrolladores FronEnd (Lado del cliente), son aquellos que emplean HTML, CSS, HTML5, CSS3, JavaScript o bien algún framework de JS como puede ser jQuery. En este caso pueden ser tanto programadores como diseñadores los que lleven a cabo esta tarea de maquetar la estructura de un sitio web con HTML, diseñar la apariencia del mismo con hojas de estilo (CSS) y la parte más interesante para mi punto de vista, la interacción con el usuario mediante (JavaScript).

 

Cabe mencionar que igual se puede lograr diversas tareas con HTML5 y sus funcionalidades de audio y video, geolocalización, canvas, lo cual permite a los fronend’s hacer volar su imaginación para crear sitios de una visualización increíble.

Es importante señalar que no todos los diseñadores web tienen que ser por fuerza fronends, ya que estos tienen experiencia en la interfaces gráficas y en parte en la interacción de los mismos, con herramientas de diseño como Photoshop, Illustrator, entre otras.

Podemos destacar hoy en día que es algo complicado (no imposible), que se logren manejar las dos áreas, por eso siempre hay que definir el camino que queremos tomar en nuestra carrera profesional y entender las posibilidades y herramientas que debemos dominar para lograr la satisfacción de nuestros clientes, los usuarios que van a interactuar con nuestras aplicaciones y nuestra línea de experiencia.

Espero que con este pequeño post logres comprender los conceptos mencionados.

Saludos,

Samuel Arellano (@sarellano)

Fiddler: Depurador HTTP.

Qué tal amig@s,

En el post anterior miramos como HTTP nos sirve a los desarrolladores para entender más allá de unas líneas de código que representen una página Web.

image

Sin duda alguna es de suma importancia contar con un depurador de HTTP como es Fiddler. Es una herramienta gratuita de Telerik, la cual nos permite a nosotros como Desarrolladores Web, tener la facilidad de depurar todo el HTTP, como puede ser el tráfico entre nuestro equipo de cómputo e Internet. Nos permite hacer una inspección de dicho tráfico, establecer puntos de interrupción, etc. Esta herramienta es gratuita y la aplicación soporta cualquier servidor proxy, incluyendo Internet Explorer, Chrome, Safari, Mozilla, Opera, etc., así como una de sus grandes características es que permite también depurar de dispositivos de la talla de un Windows Phone Smile (excelente no cree Smile with tongue out). Vamos a instalarlo e interactuar con la herramienta.

 

Existen 2 versiones disponibles de Fiddler, una especificamente para el Microsoft Framework 2.0 y otra para el 4.0. Va a depender de cual de los dos Framework’s tengamos instalados en nuestro equipo de cómputo para poder hacer uso de la herramienta anteriormente comentada. En mi caso instalaré la del 4.0.

NOTA: Para los amigos que ya están utilizando Windows 8, también lo pueden instalar Open-mouthed smile.

 

image

 

Es necesario descargar cualquiera de los versiones del software de Fiddler. El programa de instalación nos mostrará el acuerdo de licenciamiento. Se recomienda leerlo y posteriormente aceptar.

 

image

Como la mayoría de los asistentes de instalación, tenemos la ventaja de seleccionar la ruta (path) donde deseamos instalar la aplicación. Les recomiendo la sugerida por Fiddler.

 

image

Se comenzará a instalar la aplicación.

 

image

Por último les dejo un pequeño video de como podemos ver las peticiones al navegar www.bing.com y las respuestas de cada una de ellas.

 

Saludos.

 

Samuel Andreé Arellano Díaz

La importancia de conocer HTTP para el desarrollo Web

Qué tal amig@s,

Sin duda alguna uno de los puntos importantes dentro del desarrollo de software y especialmente en el ámbito Web es conocer o tener nociones respecto a HTTP. A veces el afán de dominar una tecnología o un lenguaje de desarrollo Web nos hace perder el piso y nos ubica como técnicos de alto perfil sin entender la razón de conceptos fundamentales como HTTP, Sesiones, Peticiones, etc., los cuales son vitales para poder crear aplicaciones Web de calidad y funcionalidad correcta.

Entrando en materia, en este post estaré explicando los siguientes conceptos:

  • Concepto de HTTP
  • Sesiones
  • Peticiones
  • Respuestas
  • Entendiendo que son las cabeceras y el cuerpo

Empecemos por el concepto de HTTP. Es el protocolo de transporte basado en el modelo OSI, el cual es empleado para la Web, el cual dependen de otros protocolos como son TCP e IP. Para aquellos colegas que no tengan claro que es el modelo OSI, este es una normativa formada por siete capas que define las diferentes fases por las que deben pasar los datos para viajar de un dispositivo a otro sobre una red de comunicaciones.. Como cultura general podemos comentar que las 7 capas del modelo OSI son las que enumero a continuación:

image

Cabe mencionar que HTTP es un protocolo basado en peticiones y respuestas, esto quiere decir que el cliente es el que realiza una petición, a la cual el servidor le da una respuesta. A su vez no cuenta con estado dicho protocolo, lo cual quiere decir que no requiere almacenar información del cliente.

Entendiendo lo anteriormente comentado sobre HTTP, otro concepto a tener muy en cuenta es cuando escuchamos de Sesiones. Una sesión http, es un grupo o conjunto de mensajes que se dan entre un cliente y un servidor, entendiendo que el cliente siempre será el encargado de enviar las peticiones y el servidor se encargará de responder.

Las peticiones enviadas por las sesiones o el conjunto de mensajes, cuentan con 2 elementos de vital importancia los cuales son:

  • El recurso, identificable mendiante la URL.
  • La acción que va a realizar el recurso, esto se va a definir mediante los verbos http GET o POST (o cualquiera de los 9 que existen… me queda de tarea explicarles los otros 7 Smile)

Los más populares verbos utilizados por nosotros los desarrolladores son sin duda alguna GET y POST, los cuales se puede decir que:

GET: Como he comenttado anteriormente el recursos esta representado por una URL, es el más utilizado cuando utilizamos una dirección en la barra de direcciones de nuestro navegador web.

POST: Estos datos son procesados a la hora de enviarse mediante un cuerpo que se le da a la petición.

Como he comentado a lo largo del artículo, a toda petición corresponde una respuesta http. El elemento clave de una respuesta es el código, el cual es un número que va a indicarnos el tipo de respuesta que se trata. Este tipo de códigos son los tan famosos 404 que es el código de la muerte (error) en nuestros proyectos web o bien el 200 en donde todo marcha excelente.Empieza a tomar sentido esto de HTTP, verdad? Open-mouthed smile

Como punto final puedo decirles que tanto las respuestas como las peticiones pueden contar con cabeceras y cuerpo. Las cabeceras tienen un funcionamiento similar a un Dictionary, es decir cuantan con clave y valor de tipo cadena  y permiten dar a conocer información adicional tanto de las peticiones como de las respuestas.

Por el concepto de cuerpo podemos entender como el contenido que se envía, puede estar vacía esa información en el caso de que la petición sea GET ya que estás no contienen un cuerpo.

Y para final, como cultura general cuando nosotros accedemos a un sitio web mediante el navegador de nuestra preferencia, esto genera varias peticiones, cada una con su respectiva respuesta.

Espero que te haya servido este post y te aclare dudas sobre conceptos que tratamos día a día cuando desarrollamos aplicaciones Web.

Saludos,

Samuel Arellano Díaz