April 12, 2016

No Comments

Que es Modernizr

 

Modernizr es una librería de JavaScript que forma parte de gran número de sitios web en la actualidad, la principal característica que lo hace una herramienta de gran utilidad es la capacidad de detectar tecnologías desde el navegador del usuario, por ejemplo, HTML 5 Y CSS3.

 

 

Con la aparición y el avance de diversas tecnologías, tenemos la posibilidad de crear nuevos elementos, más llamativos, detallados y con excelentes diseños y los usuarios en ocasiones no van a la par de esta tecnología y es donde esta va superando a los navegadores, lo que ocasiona que nuestro sitio se vea inadecuadamente y puede ser una experiencia desagradable para el usuario.

 

Es por eso que existe esta herramienta, ya que nos permite comprobar si el navegador del usuario cuenta con ciertas funciones o características, y si no es así, queda por nuestra parte está ejecutar un script específico para navegadores anteriores y tratar de emular lo que si pueden interpretar los navegadores actuales.

 

Las versiones de estas herramientas se encuentran disponibles desde su página:

 

https://modernizr.com/

 

 

Donde encontraremos 2 versiones, la de desarrollo y la de producción, donde la diferencia, es que la de desarrollo cuenta con todas las pruebas que se realizaron, es decir, es una versión sin comprimir y la versión de producción es la versión compacta de las características de esta herramienta.

A continuación se muestra un ejemplo de cómo incluir las funcionalidades de esta herramienta:

 

<script src=”modernizr.js” type=”text/javascript”></script>

 

Posteriormente agregamos la siguiente línea:

 

<html class=”no-js”>

 

Esto es necesario ya que con esto podemos detectar si un usuario tiene deshabilitado el JavaScript, en caso de estar todo correcto Modernizr reemplazará esta clase por la clase js.

 

Con esto ya tenemos configurado nuestro ambiente para poder contar con las ventajas que Modernizr le ofrece a nuestro sitio web, si inspeccionamos el código que interpreta el navegador, podemos observar que se han añadido muchas clases a la etiqueta HTML, esto lo hace la herramienta y depende de las características que tenga el navegador de los usuarios, es decir, entre más reciente sea el navegador, menor cantidad de clases va a tener porque cuenta con las ultimas funcionalidades.

 

En el caso contrario se agregaran varias debido a que no será compatible con la mayoría de las funcionalidades.

 

Modernizr también nos ofrece una funcionalidad con la cual podemos comprobar la compatibilidad de nuestro navegador, esto se realiza de la siguiente manera:

 

If (!Modernizr.borderradius) {

    alert(‘El navegador no cuenta con dicha característica’);

};

 

Como podemos ver es una herramienta de gran utilidad, en este caso disparamos un aviso de que no es compatible, pero esto puede ser cambiado por una funcionalidad que sustituya borderradius.

December 15, 2015

No Comments

Tendencias del desarrollo web para el 2016

 

Cierre de año, cierra de cuentas y ¿qué sigue? Bueno en este aporte trataremos de explicar las nuevas tendencias del desarrollo web, cuales son las innovaciones, que pide los navegantes de la red para satisfacer sus necesidades y sentirse más cómodos.

 

Material Design

Son directrices, interfaces con la página web. Es desarrollado por google y están inspirados en papel y tinta, así nada más. Su objetivo está basado en el estilo y la tecnología conjuntar estos temas

Google pensó en la interacción desde la luz, los colores todo un arte minimalista

Tipografía

Si se pensaba que el texto era únicamente para informar, ser leído, etc. Pues ya deja de serlo para ser una forma vistosa de presentar una página, que sea más vistosa y atractiva

Animaciones

No han dejado de ser una herramienta en página, pero se perfecciona y muestra nuevas tendencias de vistas, interacciones y efectos.

Esta mencionada Paralax, lo que realiza es una interacción con imágenes de forma dinámica, conforme te desplazas en la página muy atractiva y llamativa

Animaciones bastante extravagantes dejan de lado lo clásico, lo rutinario.

Ejemplo de animación loaders

Patrones UI

Los patrones UI le dicen adiós al scroll, lluvia de información con tal solo dar un click, bastante intuitiva se vuelve la web con esta innovación

 

Lo que está por venir es una web mucho más intuitiva, mas enriquecida y vistosa al usuario más dinámica aunque con bombardeos de gráficos y un poco de desorden.

 

Referencias

http://www.40defiebre.com/tendencias-diseno-web-2016/

http://www.vintagehope.co.uk/

http://blog.dashaft.net/que-es-material-design-de-google/

December 2, 2015

No Comments

Visual Studio Code: Open Source

Se anuncia un editor de código multiplataforma open source de Microsoft, favor de no confundir con el poderoso Visual Studio corriendo en Windows, podrá ser utilizado en las otras principales opciones de sistemas operativos como es Linux y Mac

Por ser open source hay una comunidad en github participando en mejorarla, apenas entro la versión 10.2 en noviembre de 2015

Instalando y probando

 

Sinceramente no le veo más peligro que “Notepad++”, es un entorno agradable a la vista y tiene la elegancia del IDE ya mencionado, pero tiene algunos problemas aún, por ejemplo este: al querer agregar una dll envía un elemento distinto

Algunos lenguajes de programación que reconoce la herramienta

Es una buena oferta la que hace Microsoft, ha convocado gran cantidad de gente que está participando para optimizar esta herramienta

Estas son algunas extensiones que ofrece la aplicación

Referencia

http://www.muylinux.com/2015/11/18/microsoft-visual-studio-code-open-source

https://marketplace.visualstudio.com/#VSCode

https://code.visualstudio.com/updates#_vs-code-is-open-source

 

June 8, 2015

No Comments

Procesos paralelos c#

 

En ocasiones al desarrollar una aplicación nos enfrentamos a situaciones en las cuales debemos ejecutar procesos de forma simultánea y es un problema debido a que los procesos se vuelven lentos y el tiempo de respuesta para el usuario es elevado.

Por ejemplo, si estamos desarrollando una aplicación online de una farmacia que tiene 3 sucursales, la cual vamos a utilizar para saber si algún medicamento está disponible y en cuál de las sucursales lo podemos encontrar, nuestro sistema tendría que buscar en cada una de las farmacias la misma información y regresarla, lo cual haría el sistema bastante lento y no sería eficiente para la operación.

Este tipo de problemas lo podemos resolver utilizando el paralelismo, que significa que vamos a ejecutar los llamados al mismo tiempo pudiendo obtener la información necesaria de cada una de las sucursales.

Vamos a realizar un pequeño ejemplo de cómo es que funciona y como es que podemos implementarlo en nuestra aplicación.

 

Ejemplo:

 

  1. Obtenemos información de la Farmacia 1 y así por cada una de las 3

 

private void Farmacia1()

{

      Thread.Sleep(1000);

      MessageBox.Show(“Farmacia 1″);

}

 

  1. Asignamos al método Farmacia1 como una tarea

 

Task t = new Task(this.Farmacia1);

t.Start();

 

Y realizamos este proceso con cada una de las 3 sucursales que son parte de la Farmacia

 

  1. Por último sincronizamos la ejecución de las tareas

 

Task t = new Task(this.Farmacia1);

t.Start();

 

Task t2 = new Task(this.Farmacia2);

t2.Start();

 

Task t3 = new Task(this.Farmacia3);

t3.Start();

 

Task.WaitAll(new Task[] { t, t2, t3 });

 

Con esta estructura podemos implementar diferentes instrucciones para cada una de las farmacias de una manera rápida y eficiente.

June 8, 2015

No Comments

Tipos dinámicos c#

 

El tipo dynamic permite la comunicación o post de una variable y que se omita la comprobación de tipo en tiempo de compilación. En su lugar, se resuelven estas operaciones en tiempo de ejecución, de la siguiente manera:

 

El tipo dynamic se comporta como el tipo object en la mayoría de las circunstancias, ya que el compilador no resuelve o no comprueba el tipo de las operaciones que contienen expresiones de tipo dynamic.

 

El compilador empaqueta información sobre la operación y esa información se utiliza después para evaluar la operación en tiempo de ejecución. Como parte del proceso, las variables de tipo dynamic están compiladas en las variables de tipo object. Por lo que el tipo dynamic sólo existe en tiempo de compilación, no en tiempo de ejecución.

 

Ejemplo:

 

dynamic d = 1;

var suma = d + 3;

System.Console.WriteLine(suma);

 

 

La ventaja principal de este tipo de dato es que no tenemos que preocuparnos si el objeto obtiene su valor de una API de COM, de un lenguaje dinámico, de DOM (Document Object Model) HTML, de la reflexión o de cualquier otra parte del programa.

 

A continuación podemos ver con el siguiente ejemplo la diferencia entre el tipo de dato obj y el tipo de dato Dynamic

 

Public class Program

{

static void Main(string[] args)

{

dynamic dyn = 1;

object obj = 1;

 

System.Console.WriteLine(dyn.GetType());

System.Console.WriteLine(obj.GetType());

}

}

 

Las instrucciones WriteLine muestran los tipos en tiempo de ejecución de dyn y obj. En ese punto, ambos tienen el mismo tipo, entero. Se produce el siguiente resultado:

 

System.Int32

System.Int32

 

Posteriormente asignamos un nuevo valor a las variables aumentándoles un 2, de la siguiente manera:

 

dyn = dyn + 2;

obj = obj + 2;

 

A continuación el sistema nos muestra un error del compilador que notifica un intento de suma de un entero y un objeto en la expresión obj + 2.

 

Sin embargo, no se notifica ningún error para dyn + 2. En tiempo de compilación no se comprueba la expresión que contiene dyn porque el tipo de dyn es dynamic.

May 22, 2015

No Comments

QUE ES SDL?

También conocido como Lenguaje Declarativo Simple por sus siglas en inglés (Simple Declarative Language.) Facilita la descripción de mapas, listas y árboles de datos de una manera sencilla de leer. Permite acceder a todas la estructura de los datos de la clase con una serializacion simple. El SDL es una alternativa al XML este tipo de serializacion la podemos encontrar en lenguajes como Java o C#.

Características

  • Es una estructura que facilita el manejo en archivos de configuración
  • Tiene un manejo de estructura básico
  • Es una estructura que es utilizado en los sistemas de desarrollo como .NET y Eclipse

SDL ha sido adoptado en los últimos 5 años por organizaciones que incluyen Oracle y Bank que han participado también como colaboradores analizando y agregando bibliotecas a otros idiomas, también incluyendo Ruby y C++, SDL se encuentra en su actualizacion1.1 para Java que incluye mejoras en los espacios de nombres y una API mejorada. La versión de .NET 2.2 que ya está incluida en Visual Studio 2012

Un ejemplo de este tipo de estructura:


				people location="Tokyo" {

person “Akiko” friendly=true {

hobbies {

hobby “hiking” times_per_week=2

hobby “swimming” times_per_week=1

}

}

Vamos a ver la diferencia ente una estructura XML a SDL

  • XML
01 <Perro Nombre=”Firulais” Altura=”1.5″ Peso=”10″>

 

02     <Correas>

 

03         <Correa Color=”azul” />

 

04         <Correa Color=”Roja” />

 

05     </Correas>

 

06     <Habilidades>

 

07         <Correr velocidad =”10″ />

 

08         <Saltar Altura =”0.5″ />

 

09     </Habilidades>

 

10 </Perro>

  • SDL
1 Perro Nombre=” Firulais “ Altura =1.5 Peso =10 {

 

2     Correas “azul” “roja”

 

3     Habilidades {

 

4         Correr Velocidad=10

 

5         Saltar Altura=0.5

 

6     }

 

7 }

Búsqueda en la dentro de una estructura SDL con C#

Tag root = SDL.read(new File(“/mis documentos/perro.sdl”));

List<Tag> Perro = root.getChild(“Perro”).getChild(0).getChild(“Correas”).getChildren();

May 22, 2015

No Comments

¿Qué es el FileSystemWatcher?

En ocasiones al realizar un desarrollo que requiera que ser automatizado totalmente sin necesidad de adecuarlo para nuevas implementaciones que se requieran dependiendo de las necesidades del usuario, es indispensable contar con algún método que se encuentre “monitoreando” constantemente archivos para que cuando estos cambien, automáticamente el sistema los pueda incluir.

Y esto podemos lograrlo implementando las siguientes instrucciones:

  1. Creamos una instancia de FileSystemWatcher

 

FSWatcher = new FileSystemWatcher();

 

  1. Especificamos la ruta donde se encuentra el archivo XML

FSWatcher.Path = path;

 

  1. Incluimos las siguientes configuraciones:

 

FSWatcher.IncludeSubdirectories = true;

FSWatcher.EnableRaisingEvents = true;

 

  1. Definimos los eventos para saber que se tiene que realizar dependiendo de qué acción haya sido aplicada al archivo XML.

 

Creación:

 

FSWatcher.Created+=new FileSystemEventHandler(FSWatcher_Created);

 

Se produce cuando se crea un archivo o un directorio en la ruta de acceso indicada en la propiedad Path especificada.

 

Borrado:

 

FSWatcher.Deleted+=new FileSystemEventHandler(FSWatcher_Deleted);

 

Se produce cuando se elimina un archivo o un directorio de la ruta de acceso indicada en la ruta especificada.

 

Cambio en el archivo:

 

FSWatcher.Changed+=new FileSystemEventHandler(FSWatcher_Changed);

 

Se produce cuando cambia un archivo o un directorio incluido en la ruta de acceso indicada en la ruta especificada.

Renamed:

 

FSWatcher.Renamed+=new RenamedEventHandler(FSWatcher_Renamed);

 

Se produce cuando se cambia de nombre un archivo o un directorio de la ruta de acceso indicada en la ruta especificada.

  1. Implementamos:

private void FSWatcher_Created(object sender, System.IO.FileSystemEventArgs e)

{

//Especificamos las acciones que queremos que se realicen con la creación del archivo

}

 

Con este funcionamiento nosotros podemos crear un componente para inspeccionar archivos en un equipo local, una unidad de red o un equipo remoto y realizar determinadas acciones dependiendo del cambio que tuvo el archivo.

May 22, 2015

No Comments

¿Qué son los ORM?

En el desarrollo de una aplicación vemos involucradas dos partes fundamentales para el funcionamiento de la misma como son: La parte del código que se genera para poder hacerla funcionar y por otro lado el acceso a los datos que son los que harán funcional la aplicación, que debido a los cambios que puedan llegar a surgir el manejo de estos se puede llegar a complicar con la evolución.

En la actualidad contamos con un sistema de base de datos relacionales que nos permite mantener entidades con sus respectivas relaciones y atributos.

 

Ejemplo: En un sistema que lleva la información de una escuela.

 

Entidades: Alumno, profesor, salones, boleta, etc.

Relaciones: Una boleta corresponde a un estudiante, etc.

Atributos: Una boleta contiene nombre, materia, calificación, etc.

 

Este sistema posee una interfaz para acceder a los datos llamada Query que es un Lenguaje Estructurado de Consultas y con este realizamos las peticiones a la Base de Datos, ejemplo:

Select * from Boleta where IdAlumno = 1

Antes de la aparición de los ORM las consultas tenían que realizarse en código duro dentro de las aplicaciones, con lo cual se perdía la ventaja de los lenguajes orientados a objetos, ya que se realizaba una petición a la base de datos de manera manual, por lo que era necesario contar con una adaptación de los datos a la aplicación.

Con los ORM nosotros podemos reducir la cantidad de código necesario y lograr una integración de tal manera que las entidades sean ocupadas como objetos, siendo el propio sistema el que se encargue de convertir esta información a SQL y a realizar el procesamiento.

Ejemplo:

Public Class Boleta

{

Int IdBoleta { get; set; } ;

Int IdAlumno { get; set; } ;

List<String> Materias { get; set; };

}

 

El desarrollo de capas de acceso a datos con ORM es una técnica de programación que mapea una base de datos relacional a una serie de objetos que pueden ser manipulados mediante código.

Lo que se persigue con los ORM es facilitar y automatizar el proceso para acceder a la información que va a ser manipulada por nuestro sistema.

 

Un sistema ORM nos proporciona las siguientes ventajas:

 

  • Autonomía completa del desarrollador: Podemos desarrollar una aplicación de acceso a datos sin escribir ninguna línea en lenguaje SQL, únicamente interviniendo directamente con las entidades.

     

  • Reducción en tiempo de desarrollo: Para desarrollar los métodos de acceso a datos solo se requieren una serie de líneas de código, lo que reduce los tiempos, permitiendo centrarnos más en la capa de presentación y en la de lógica de negocio.

     

     

  • Errores en tiempo de ejecución: Cuando se ejecuta cualquier operación de acceso a datos se obtienen errores de codificación en tiempo de compilación lo cual permite saber exactamente donde se encuentra el error.

     

Desventajas:

 

El principal inconveniente de los ORM es la poca escalabilidad que tienen, ya que realiza la traducción a lenguaje SQL de todas las operaciones que programemos a través del lenguaje ORM a emplear, siendo el problema las malas traducciones y la mala calidad del código traducido, por lo que para cierto tipo de sistemas es mejor utilizar procedimientos almacenados con buena estructura y optimización de código que las traducciones que realizan los ORM.

En conclusión los modelos ORM proporcionan muchas ventajas ya que nos permiten tener acceso a los datos de forma rápida y sencilla.

Al no ser la única manera de acceder a los datos, se debe ser preciso en saber cuál va a ser el mecanismo por el cual nuestro sistema tenga acceso a la información ya que para algunos sistemas tendrá un mejor rendimiento el no utilizar un ORM por las desventajas antes mencionadas.

May 22, 2015

No Comments

CROSS SITE REQUEST FORGERY

También conocido como XSRF este tipo de ataque se aprovecha de la confianza que tiene un sitio web con el usuario esto puede ser con el acceso desde cookies o cuando el usuario no finaliza la sesión que tiene abierta de algún sitio de confianza y sigue navegando por otros sitios web.

 

Como funciona

El usuario pepito tiene su administración bancario por medio de la banca electrónica ya que no le da tiempo de ir al banco y aprovecha la tecnología, pepito al momento de ingresar a la página del banco le pide que se identifique y pepito ingresa su usuario y contraseña y algunos otros datos que el banco pide para tener más seguridad y confiar que es en verdad pepito.

Suponiendo que el banco no tiene identificado el problema de XSRF y no lo previene, pepito termina de hacer sus transacciones y decide navegar un rato por Google buscando algunas pantallas de segunda mano, Por mala suerte pepito llega a una página maliciosa que se va aprovechar de su autentificación verdadera en el banco.

La página maliciosa tiene programado en su HTML una liga que está apuntando al banco de donde pepito ya está registrado, este HTML tiene anexado una trasferencia a una cuanta en la que se depositara una suma de dinero a nombre de pepito, ya que esta liga está aprovechando de que pepito aún sigue autentificado con la página y cualquier transición que el realice el banco la tomara como autentificada

 

Prevenir ataques CSRF en aplicaciones ASP .NET

 

El Framework de .NET nos incluye los Anti-Forgery tokens que es una estrategia para la prevención de los ataques por CSRF estos se generan por cada sesión de usuario y son enviados al servidor permitiendo tener una validación, estos son los atributos que incluye el Framework de .NET para la mitigación de estos ataques.

 

  • EnableViewStateMac
  • ViewStateUserKey

 

Estos atributos están disponibles desde la versión 4.5.2 del Framework aun que aun así existe diferentes plugins que pueden tener más opciones para poder mitigar este ataque desde nuestro desarrollo en .NET