Si te sirvió lo que buscabas, agradecer es compartir. Comparte el artículo en tus redes sociales favoritas.

Monday, September 11, 2017

JQuery - no me funciona .load [Solución]

In jQuery 3.0.0 I got the issue, that a window load callback inside a ready state gets not triggered anymore. I think this is because it's async since 3.0.0. But this is used in jQuery plugins, to be only executed after all page content is loaded. And this is often wraped in a ready state by users.

Lo cierto es que si estás aquí, es porque estas usando cierta versión de JQuery y además tenés un pedazo de código que hace uso de .load y no te funciona.

Bueno, es algo que me ha pasado anoche ya que inicialmente yo estoy trabajando con JQuery-3.2.1 y me he descargado unas líneas de código que me han parecido geniales agregarlas a mi proyecto pero resulta que en mi proyecto no me funciona (el proyecto que me descargué usa el JQuery-1.11.2)

El código es tan simple como este (ya no funciona):


Entonces, debemos hacerles las siguientes modificaciones (código funcional):


Thursday, August 31, 2017

Breadcrumbs

Keywords: Breadcrumbs, web design, diseño de navegación



Los breadcrumbs son un elemento de navegación ideal para reducir el número de pasos que debe realizar un usuario, especialmente cuando tenemos taxonomías jerárquicas. Los breadcrumbs mejoran en general la encontrabilidad de los elementos y le facilitan al usuario determinar su estado actual y rutas de regreso.

El término breadcrumb, o miga de pan, proviene del cuento de Hansel y Grettel, donde los niños utilizaban migas de pan para encontrar su camino a casa. Los breadcrumbs están compuestos normalmente por textos en secuencia clickeables que permiten ir directamente a la categoría padre del elemento.

Veamos algunos ejemplos de breadcrumbs:

1. Basados en la ubicación
Éstos se basan directamente en la taxonomía, utilizando los niveles de jerarquía como las categorías padre que se incluyen en los breadcrumbs.

2. Basados en atributos
Son muy útiles en las taxonomías facetadas, listando los atributos que se van filtrando y permitiendo eliminar los filtros aplicados.

3. Basados en ruta 
En este caso, los breadcrumbs no se fijan en la taxonomía, sino en el recorrido que ha realizado el usuario hasta llegar a la página actual. De esta forma, muestra las páginas a las que ingresó antes de llegar a la que se encuentra actualmente.

Wednesday, August 30, 2017

Conceptos utilizados en el entorno de proyecto para el desarrollo de aplicaciones web

Si estás empezando con el desarrollo de aplicaciones web, seguramente las herramientas utilizadas en la configuración del entorno de proyecto en la entrada anterior, son nuevas para ti. A continuación, te dejo algunos conceptos que tomé de la web, son claros para iniciar:

Node.js es un entorno Javascript del lado del servidor, basado en eventos. Node ejecuta javascript utilizando el motor V8, desarrollado por Google para uso de su navegador Chrome. Aprovechando el motor V8 permite a Node proporciona un entorno de ejecución del lado del servidor que compila y ejecuta javascript a velocidades increíbles. El aumento de velocidad es importante debido a que V8 compila Javascript en código de máquina nativo, en lugar de interpretarlo o ejecutarlo como bytecode. Node es de código abierto, y se ejecuta en Mac OS X, Windows y Linux.

NPM (node package manager) es el gestor de paquetes javascript de NODE.JS por excelencia. Gracias a él, tenemos casi cualquier librería disponible a tan solo una linea de comando de distancia, permitiéndonos utilizarla en cuestión de segundos. NPM nos ayudará a administrar nuestros módulos, distribuir paquetes y agregar dependencias de una manera sencilla.
NPM utiliza el archivo package.json para almacenar todos los datos relevantes a nuestra aplicación. 
Cuando instalamos nuevos paquetes lo que hace npm es instalarlo de manera local en nuestro proyecto dentro de la carpeta node_modules, pero nosotros podemos decirle que lo instale de manera global de ser necesario.

Gulp es un manejador de tareas (Task manager), una increíble herramienta para todo desarrollador que te permitirá de forma automática, gestionar toda clase de tareas comunes y a la vez tediosas en el desarrollo de cualquier aplicación.
Gulp sirve para automatizar tareas. Mediante Gulp se define cómo deben ejecutarse esas tareas, y únicamente ejecutamos un comando en la terminal para que se encargue de hacer todo el trabajo por nosotros.

¿Qué es Bower?
Es un gestor de dependencias desde el lado cliente desarrollado por Twitter, el cual es algo similar a lo que hace composer, npm o nugget. La finalidad de Bower es gestionar las dependencias de nuestros archivos del lado cliente como, bootstrap, jquery, entre otros. Es decir, que vamos a tener todo nuestras dependencias en una archivo json y mediante un comando se descargará todo a nuestro proyecto, si hay futuras versiones de las librerías estas podrán ser actualizadas dejando a un lado la tediosa tarea de ir a la web, descargar y agregarlo manualmente.

Yeoman es un conjunto de herramientas compuesto por Yo, Bower y Grunt , con el que podrás tener en menos de 5 minutos el esqueleto de tu proyecto web. Como ves,  nos ayudará a empezar cualquier proyecto nuevo en cuestión de minutos.

Configuración de entorno de proyecto para el desarrollo de aplicaciones web [UI/UX]

Configuración de entorno de proyecto para el desarrollo de aplicaciones web con una buena experiencia de usuario

Keywords: Node.js, NPM, Bower, Gulp, Yeoman

Para la creación del presente proyecto, necesitaremos Node.js, si aun no lo tienes, puedes descargarlo desde: https://nodejs.org/en/download/

Descargas e instalas Node.js. A continuación, abre tu ventana de comandos. (Si usas Windows, presionas las teclas windows + R y typeas cmd o inicio node command prompt.) En el siguiente paso instalaremos las herramientas que nos permitirán generar la estructura de nuestro proyecto, correr tareas automáticas y gestionar nuestros paquetes.

Te creas un folder en la unidad de tu disco duro que desees. Ingresas al folder y estando adentro ejecutas los siguientes comandos paso a paso:

npm install  --global yo gulp-cli bower

Luego, instalamos el generador de aplicaciones web:

npm install -global generator-webapp

Ahora, ya se puede crear la aplicación con el comando:

yo webapp

Aquí, te pedirá elegir opciones:

Seleccionar las siguientes opciones:
1. which additional features would you like to include?
Elije Sass
2. would you like to include JQuery?
Elije Y (de Yes)
3. choose your style of DSL
Elije BDD porque es orientado al usuario final.

Chequeas tu directorio, si en tu directorio creado, no ves la carpeta bower_components, debes ejecutar el siguiente comando:

bower install

Finalmente, ejecuta el siguiente comando para que corra el servidor de desarrollo

gulp serve

Se te deberá abrir un sitio web base con el siguiente aspecto:



ESTRUCTURA INICIAL DEL PROYECTO.
bower.json: librerias del cliente
package.json: librerias del servidor.
gulpfile.js: donde se registran las tareas automáticas del proyecto incluyendo la recarga automática, mimificacion de archivos, concatenación, entre otros.
carpeta app: se encuentran los archivos del proyecto, incluyendo carpetas para fuentes, imágenes, scripts y estilos.
carpeta scripts: tenemos el main.js archivo de código de script principal.
carpeta styles: tenemos el main.scss, el archivo de  estilo principal.
carpeta bower_components: donde se descargan las librerías del cliente.
carpeta node_module: donde se descargan las librerías del servidor.
carpeta test, se incluyen pruebas automáticas para nuestro proyecto.

INSTALACION FRAMEWORK RESPONSIVE
Para este ejemplo, instalaremos el framework materialize css, puedes utilizar el de tu preferencia. Para ello, ejecutar el comando siguiente dentro del directorio anteriormente creado.

bower install materialize --save

VERIFICACIÓN FRAMEWORK RESPONSIVE

Para verificar que haya sido instalado correctamente el framework, editaremos el archivo index.html que se encuentra dentro del folder app. Agregaremos el siguiente código:


Ahora, tu sitio web tendrá el siguiente aspecto: (recuerda tener levantado tu servidor con el comando gulp serve)


Monday, August 28, 2017

CRUD - ASP.NET MVC 5 + ADO.NET C# - [Eliminar]

Bien, ahora para completar el proyecto nos queda pendiente la vista Eliminar.

En las partes anteriores de esta entrada, aquí vimos las vistas [Listado y Ver] y aquí las vistas [Crear y Editar]

La vista Eliminar luce como sigue:


ProductoController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Business;
using Entity;
using System.Data;

namespace Web.Controllers
{
    public class ProductoController : Controller
    {
        private ProductoBusiness _business;
        private ProveedorBusiness prov;
        private CategoriaBusiness cate;

        public ProductoController()
        {
            _business = new ProductoBusiness();
            prov = new ProveedorBusiness();
            cate = new CategoriaBusiness();
        }



        [HttpGet]
        public ActionResult Eliminar(int id)
        {
            Producto p = new Producto();
            p = _business.GetById(id);
            return View(p);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Eliminar(int id, Producto p)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    if (_business.Delete(id))
                    {
                        WriteMessage(Eoperacion.delete, Etipo.success);
                        ModelState.Clear();
                    }
                    else
                    {
                        WriteMessage(Eoperacion.delete, Etipo.danger);
                    }
                }
            }
            catch (DataException)
            {
                ModelState.AddModelError("", "Unable to delete the record.");
                WriteMessage(Eoperacion.delete, Etipo.danger);
            }
            return View(p);
        }

        #region Metodos Auxiliares      
        public enum Eoperacion : byte
        {
            insert = 1,
            update = 2,
            delete = 3,
            find = 4,
            reset = 5
        }

        public enum Etipo : byte
        {
            success = 1,
            danger = 2,
            info = 3
        }

        public void WriteMessage(Eoperacion Operacion, Etipo Tipo)
        {
            if (Tipo == Etipo.success)
            {
                switch (Operacion)
                {
                    case Eoperacion.insert:
                        ViewBag.MensajeExito = "El producto ha sido correctamente creado.";
                        break;
                    case Eoperacion.update:
                        ViewBag.MensajeExito = "El producto ha sido correctamente editado.";
                        break;
                    case Eoperacion.delete:
                        ViewBag.MensajeExito = "El producto ha sido correctamente eliminado.";
                        break;

                }
            }
            else if(Tipo == Etipo.danger)
            {
                switch (Operacion)
                {
                    case Eoperacion.insert:
                        ViewBag.MensajeError = "No se ha podido crear el producto.";
                        break;
                    case Eoperacion.update:
                        ViewBag.MensajeError = "No se ha podido editar el producto";
                        break;
                    case Eoperacion.delete:
                        ViewBag.MensajeError = "No se ha podido eliminar el producto";
                        break;

                }

            }
            else
            {
                switch (Operacion)
                {
                    case Eoperacion.find:
                        ViewBag.MensajeBusqueda = "No se encontraron resultados para su búsqueda.";
                        break;
                    case Eoperacion.reset:
                        ViewBag.MensajeBusqueda = "";
                        break;

                }
            }
        }
        #endregion

    }

}
De igual manera como los otros métodos, clic derecho y agregar vista.

Vista Eliminar Producto

@model Entity.Producto

@{
    ViewBag.Title = "Eliminar Producto";
}

Eliminar Producto

@using (Html.BeginForm()) { @Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
@Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.TextAreaFor(model => model.Descripcion, new { @class = "form-control", @rows = "3", @cols = "50" }) @Html.ValidationMessageFor(model => model.Descripcion, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.PrecioUnitario, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.PrecioUnitario, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PrecioUnitario, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Stock, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Stock, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Stock, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Proveedor, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Proveedor, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Proveedor, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Categoria, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Categoria, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Categoria, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Estado, htmlAttributes: new { @class = "col-sm-3 col-md-4 col-lg-2 col-form-label font-weight-bold text-md-right" })
@Html.EditorFor(model => model.Nombre_Estado, new { htmlAttributes = new { @class = "form-control" } })

|@Html.ActionLink("Regresar al Listado", "Listado")
}
@ViewBag.MensajeExito
@ViewBag.MensajeError