Archivo de la categoría: Informatica

Si me gusta te lo pago.

¡Esta es una de las imagen que merece el oro!

Cierto, al trabajar en el área de desarrollo y ademas al ser mi hermano diseñador gráfico, he notado que extrañamente una de las carreras mas desprestigiadas monetaria mente cabe la casualidad que es el diseño y el desarrollo.. si os ponéis a pensar que tal vez lo son porque no conforman una parte importante y de aporte de para la sociedad, déjame decirte que creo que deberías tomar un pañuelo echarle cloroformo, colgarte en un árbol y aspirar del pañuelo porque estas equivocado, Osea abramos los ojos! En la actualidad practica mente TODO lo que podemos percibir esta basado en diseño e informática o la gran mayoría, acaso si sales a la calle y un semáforo no funciona, tienes idea del caos que seria circular por las calles? Tan solo caminando, ni siquiera hablando de viajar en automóvil, te has puesto pensar lo horrible que serian las casas, calles, automóviles si alguien no se preocupara de embellecerl@s? Y ni hablar de los caóticos y desagradables a la vista que serian las paginas web en la Internet que por cierto están a base de sistemas informáticos.

Si te sientes completamente identificado con esta imagen como yo y muchos (puesto no es solo un patrón que se puede ver en el diseño) te diría que aprendas a valorar tu trabajo, pues una vez que tu lo valores podrás empezar a proyectar el valor en los demás, la gente que paga y no conoce sobre el trabajo que lleva realizar este tipo de cosas tiende a menos preciar lo que ve, pero créeme que debes ser sumamente didáctico y comprensivo con ellos, pues bien la mayoría de la gente no tienen idea de ni siquiera para que sirve el diseño o la informática, generalmente cuando comento que soy informático, lo asocian rápidamente a que trabajo con software como Word, Excel y PowerPoint o que me dedico a estar formateando computadores o algo igual de ridículo.

¿Cual seria nuestro trabajo entonces?

Culturizarlos! si nadie les enseña a las personas lo que valen las cosas nunca podrán saberlo, y la persona que debe empezar a hacerlo eres tu mismo.

Diseños DeskModding

En muchas oportunidades le he dedicado tiempo a hacer mi desktop mas atractivo, amigable y personalizado, generalmente me enfoque en buscar estos puntos.

– Flexibilidad
– Diseño
– Personalización
– Eficiencia (existen muchas herramientas que te lo dejan «bonito» pero te consumen una enormidad.. ni hablar de la filosofía de funcionamiento)



Si mi diseño cumplia con estos puntos simplemente me sentia a gusto y con el objetivo completado, lo que el 99% de la veces tenia el resultado esperado.

Ambientes sobre los cuales los aplique fueron:

– Windows XP
– Windows 7
– Linux Ubuntu

Entre las herramientas mas usadas y optimas estan:

Windows:
– RocketDock
– RainMeter
– Yahoo Weather

Linux:

– GTK 2.0
– Temas de GnomeLook.org

Plantillas Smarty

Las plantillas Smarty son un motor de templates para php, que básicamente lo que realiza es permitir que un Framework separare lo que corresponde a la capa de presentación a la capa de lógica de negocios, para alcanzar algo parecido a un modelo vista controlador aunque de una manera mas simple pero bastante decente desde mi punto de vista, aunque en aplicaciones que el nivel de complejidad es alto, no las recomendaria porque tienen algunas limitaciones en las cuales se hace mas fácil y recomendable utilizar un framework mas avanzado.

Al optar por las plantillas Smarty podemos obtener cosas muy interesantes sobre todo cuando realizamos trabajo en equipo con un diseñador, algunas de las cosas que podemos encontrar y lograr son:

  • Separar físicamente los archivos de lógica php con los archivos de interfaz en archivos de planillas con la extension TPL.
  • Obtenemos un un codigo mas legible y ordenado.
  • Nos permite una mayor escalabilidad.

 

Ademas para mayor flexibilidad las nuevas versiones de las plantillas smarty nos permite incorporar estructuras de control que nos van a facilitar mucho las cosas en algunos casos.

Como es costumbre en este blog… dejare un ejemplo basico de el uso de plantillas smartys y ademas de una pequeña WebGrafia de donde se puede obtener tutoriales mas detallados y avanzados.

Ejemplo:

Lo que se hará aquí es un típico mantenedor de personas en el que podamos realizar una inserción, listado y visualización de personas.. ademas se le agrega una fotografía la cual ira a ser almacenada en la base de datos MySql.

Lo que necesitamos:

– Servidor local que corra php (obvio!)
– Una base de datos Mysql
– Las ganas.. 😛

Veamos los ficheros y su descripción:
– configuracion.php : Un poco evidente.. pero es el archivo en donde se configuran las credenciales de acceso a la base de datos mysql.
– index.php: La pagina principal en donde se carga el menú de opciones, esto simplemente no tiene ninguna gran logica.
– buscar_persona.php: Esta pagina nos permite ingresar un patrón de búsqueda con respecto al nombre para buscar una persona que hayamos agregado.
– ingresar_persona.php: Aqui realizamos algunas comprobaciones y agregamos a una persona al sistema
– listado.php: Total de usuarios agregados al sistema y enlace a su detalle.
– persona.php: Detalle de una persona junto con un enlace a la fotografía que se almaceno en la base de datos para esta.
– ver_fotografia.php: El código que nos extrae la fotografía y muestra por pantalla.

El flujo que sigue el código seria el siguiente:
Se ejecuta el php que contiene la llamada a la plantilla (.tpl) ->Se ejecuta la plantilla tpl cargando la interfaz gráfica con la variables enviadas desde php -> Al presionar un boton (mediante form) llamamos a la pagina que referenciamos en el formulario, de ser la misma que llamo a la plantilla se ejecuta de nuevo realizando el mismo ciclo.

Resumidamente:
php -> tpl -> php -> tpl

Explicando:

index.php:
– este codigo lo que va a realizar es mostrar el menú de los componentes del sistema, así que solo cargaremos la plantilla mediante php en donde se encuentra el menu con los enlaces correspondientes. – como podemos ver en el codigo lo primero que se realiza es la importación de la libreria de Smarty la cual como se vera mas adelante se carga en todos los codigos en donde se utilicen las plantillas como es lógico, esto lo realizamos mediante la linea:

require(‘/libs/Smarty.class.php’);

Luego cargamos la plantilla «index.tpl» por medio de las siguiente cinco lineas de codigo:

$smarty = new Smarty;
$smarty->debugging = false;
$smarty->caching = false;
$smarty->cache_lifetime = 120;

$smarty->display(‘index.tpl’);

ingresar_persona.php
– en este bloque se realiza la insercion de los datos de la persona en donde incluimos rut, nombre, telefono y la foto que va a ir a la base de datos, en primer lugar tenemos la funcion «carga_imagen» que es la que nos permite codificar la imagen en base 64 para almacenarla en la base de datos, posteriormente tenemos las acciones secuenciales al pulsar el click en donde pasamos por una serie de restricciones para final mente permitir insertar el registro, y por ultimo cargamos la plantilla smarty. Secuencialmente hablando la pagina Php carga estas funciones pero no las ejecuta hasta el momento que en el tpl se produce el clic al botón y se cargue de nuevo el php.

buscar_persona.php
– buscar persona lo que realiza primero es llamar a la plantilla pasandole la variable «$tabla» sin nada, posterior al presionar el clic e ingresar algún texto de búsqueda realiza una consulta en la cual los resultados son trabajados mediante un bucle while a una estructura html que se almacena en la variable «$tabla», de modo que esta ahora queda con codigo html que sera enviado nuevamente a la plantilla.

listado.php
– el listado hace básicamente lo mismo que buscar_persona.php con la diferencia que los trae inmediatamente sin esperar un clicc y ademas trae a todas las personas que existen en la tabla de la base de datos.

persona.php
– este código lo primero que hace es rescatar el parámetro enviado por get «$nombre = $_GET[‘nombre’];» para trae el detalle del la persona que le estemos pasando mediante el parámetro, la única diferencia con los otros es que esta consulta solo trae la información para una determinada persona y de esta forma mostrar sus detalles por pantalla mediante una tabla.

ver_fotografia.php
– finalmente tenemos a ver fotografia .php que se encarga solamente de traer la foto de la persona de una persona determinada mediante el parametro get, como vemos no carga ninguna plantilla puesto que este código solo descodifica la información que viene almacenada de la base de datos y la muestra por pantalla.


Descargar Ejemplo
 

Pagina Oficial de Smarty: www.smarty.net

@gnzandrs

Aplicacion 3 Capas ASP.NET

En esta oportunidad se construyo un prototipo de una aplicacion aspx en C#, que ilustra la forma en que se puede realizar un sistema web multicapa básico, con las denominadas capa de presentacion, negocio y acceso a datos:

DAL (Data Access Layer) : Es la capa que se comunica directamente con la capa de la Base de datos y realiza las consultas y obtiene las respuestas.
BLL (Business Logic Layer): Es la capa intermedia entre la capa de interfaz de usuario y la de peticiones a la base de datos, es en esta capa donde se aplican las reglas de negocio.
UI (User Interface): La capa de presentación para el usuario, generalmente es orientada al diseño, aquí podemos aplicar todo tipo de validaciones ya sean de aspx o javascript.

*No entrare en mucho detalle sobre estas capas pues existe bastante información en Internet, y posteriormente le dedicare un post entero a esta filosofía de programación.

La programación en capas es uno de los estándares de alto nivel utilizados para desarrollo de software, porque permite una mantenibilidad y legibilidad del código mucho mejor, ademas, en aplicación grandes el rendimiento de la aplicación es clave, sin considerar el lado de la mantención. Sin embargo en este ejemplo no se trabaja con un modelo multicapa al 100% pues no se trabajan con objetos definidos para un negocio en especifico, lo que correspondería al trabajo con entidades, pero es un modelo que puede ser utilizado incluso en aplicaciones complejas funcionando bien y de manera rapida (por lo que se lo consideraria especial para un tipo de programación extrema o XP), ademas permite la mantenibilidad del código y desaparacion básica de roles entre capa.



Instrucciones:
La magia de este código también radica en que para hacerlo funcionar solamente necesitas realizar tres cosas.
1. Escoger si lo vas a correr en sql server u oracle.
2. Ingresar a la base de datos y ejecutar el script pertinente para la creacion de la tabla ejemplo junto con la inserción de datos.
3. Abrir el proyecto (generado para vs2010) y editar el webconfig la siguiente linea : «» de manera que si lo deseamos correr en sql server lo configuramos con el parámetro «sqlserver» y de desearlo en oracle solo configuramos la palabra «oracle» 🙂

– Web.config


– Insert



Descargar Ejemplo

Envio texto entre Forms C#

En este humilde código lo desarrolle hace años cuando estaba recién manoseando C# con el pretendo ilustrar a un principiante como se manejan los textos entre las pantallas de los Form de una aplicación desarrollada con Visual Studio ademas de los mensajes de decisión, es un código muy simple y basico como se muestra en las pantallas espero les sirva de utilidad.


Descargar Ejemplo

La biblia de Ubuntu

En esta ocasión quisiera compartir este libro en pdf que encontré en cierto momento y me ha resultado muy útil y practico, si eres novato en temas de Linux este libro es para ti, contiene historia instalación, comandos básicos, instalación de programas, y todo lo que necesita saber un novato, Solo desearía que hubiesen existido este tipo de textos en mis primeros pasos en linux..

Para descargar has clic AQUÍ.

Bloquear formulario mediante JavaScript

Si en algun momento deseamos bloquear las actividades que realiza un usuario sobre la pantalla por algún motivo, podríamos hacer algo mucho mas simple que utilizar un “loader”.

Para este ejemplo solamente se utilizara JavaScript aunque claro esta se puede desarrollar con Jquery, En el ejemplo se muestra un formulario muy simple que podria ser un registro usuario, el cual posee campos y un boton, que pueden ser los elementos del formulario que deseamos bloquear. Con el botón aceptar se bloqueara y con el enlace de mas abajo lo volvemos al estado original:

Este metodo trabaja sobre el siguiente mensaje contenido en un div:

<div id=»mensaje_mc» style=»display:none»;><font color=»red»>*Por favor espere mientras su archivo es borrado.</font></div>

Rapido, Simple, Barato.

 

 

¿Que es AJAX?

Tengo que reconocer que me costo bastante entender lo que era ajax. Para comenzar ajax es una tecnología, o mas bien un conjunto de lenguajes  no un lenguaje en sí que está compuesto principalmente por html, javascript, DOM y el objeto htttpRequest que vendria siendo un objeto DOM que el el nucleo de Ajax, siendo principalmente Javascript quien maneja la interacción entre estos.

Segun wikipedia:

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

 

Otro punto que me gustaria dejar en claro sobretodo a un principiante es una pregunta que me surgió luego de leer un tutorial: ¿Para usar ajax es necesario mucha programacion?

La respuesta vendria siendo: Si y NO.

No: Pues la mayoria de los efectos que utilizamos en la web con ajax, estan programados o existen multiples lugares de donde se pueden descargar librerias con estos efectos y solo debemos realizar unas configuraciones en codigo para utilizarlos en nuestra web.

Si: En el caso deseásemos inventar o realizar un efecto nuevo o personalizado, obviamente deberemos meter manos, a una librería ya echa o bien empezar una desde cero.

Para la gran mayoría de personas que desea incluir efectos en la web que ya estan diseñados, existen ambientes de desarrollos sobre los cuales se puede trabajar, cabe mencionar que estos ambientes o librerías se encuentran programados o desarrollados con javascript, Estos ambientes nos proveen generalmente el «motor» o «núcleo» básico que le va a permitir a nuestros efectos u animaciones funcionar, ademas estos ambientes incluyen por su parte una serie herramientas que pueden ser gran utilidad siendo mas basicos pero no menos importantes.

Según yo, creo que cada persona debe aprender un grado de ajax que le sea comodo y cubra sus necesidades, pues.. ¿Tiene sentido aprender a contruir un computador desde las tarjetas electronicas hasta la programacion del sistema operativo si lo que deseamos finalmente es usar paint?

Entonces, para las personas que desean trabajarlo solamente para añadirle estilo a una web con efectos ya creados vamos a ver unos ejemplo y después dejare unas referencias muy útiles para una persona que desea conocer hasta las entrañas de ajax.

AJAX Básico

– Primero que todo yo voy a utilizar un servidor local para hacer pruebas que monte con xaamp, pero si lo deseáis lo puedes hacer tu hosting o espacio en la web.

– Segundo para utilizar el efecto vamos a utilizar la libreria jquery, tambien existe la mootools que tambien es buenisima. Una librería para quien esta medio perdido, como ya comente, vendria a ser un conjunto de objetos y funciones ya definidas que permiten el funcionamiento de efectos y la tecnología de ajax, pues el efecto que probaremos los utiliza para funcionar correctamente, en el fondo vendria siendo como un Framework.

Podemos descargar Jquery desde la pagina oficial que es AQUÍ

El efecto que probaremos sera thickbox que es un complemento que sirve para ver una imagen en un modal, se descarga desde AQUÍ

Primero que todo en una estructura de html, incluiremos la libreria de jquery. de la siguiente manera:

< script src="lib/jquery-1.7.2.js" type="text/javascript">< /script >

Ejemplo 1:

Vamos a probar uno de los efectos básico que la librería de Jquery trae incluido:

Explicando el código:

1. Lo primero que se realiza dentro del script es esperar que la jerarquia de objetos DOM se carge  (vale decir: botones, divs, textboxs, tags) para posteriormente realizar lo que deseamos por esa razon es la que siempre se debe incluir la siguiente estructura:

$(document).ready(function(){

// AQUI TODO LO QUE QUERAMOS HACER..

});

2. Luego le añadimo al enlace con el nombre «ocultar» el evento del clic, y dentro de esto le añadimos el comportamiento o accion que deseamos que realice al presionar clic:

$(«#ocultar»).click(function(event){

// AQUI EL COMPORTAMIENTO AL HACER CLIC

});

3. Posteriormente seleccionamos el elemento de la pagina con el nombre «capaefectos» y le aladimos la llamada el metodo «hide» y con el parametro «slow» para que sea de forma pausada:

$(«#capaefectos»).hide(«slow»);

 

Y tenemos el primer comportamiento definido, si miramos el código que sigue, es exactamente lo mismo pero para realizar el efecto inverso, osea para mostrar el contenedor o div que habremos ocultado.

Ejemplo 2:

Aquí vamos a probar a el efecto aviaslider del cual necesitaremos importar la librería nueva.

Explicando el código:

La estructura del html es la misma, como habíamos visto en el ejemplo anterior, se importa la librería de JQuery pero ademas la libreria de thickbox (thickbox.js) y la hoja de estilo de thickbox (thickbox.css):

< script type="text/javascript" src="lib/thickbox.js" >
< link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />

Posteriormente deberemos agregar el enlace que nos va a desplegar el efecto y la imagen, esto lo realizamos mediante una etiqueta < a > especificando la ruta o la imagen que nos va a mostrar al hacer clic href=»imagenes/animales.jpg» y ademas como propiedad especial que nos vincularía la etiqueta < a > con thickbox, debemos añadirle la clase css thickbox (class=»thickbox»):

< a href="imagenes/animales.jpg" title="Imagen" class="thickbox">CLIC < /a >

AJAX Avanzado.

Bien, como fue enunciado anteriormente 😛 puede resultar interesante o necesario sumerguirse en las extrañas de ajax, esto tal ves si necesitamos hacer una modificacion a una libreria determinada, agregar cosas sacarlas o si somos mas creativos y audaces crear nuestro propio efecto.

No pretendiendo reinventar la rueda, me ha resultado sumamente útil y placentero leer un tutorial tan completo como el siguiente, en el cual se explican conceptos básicos hasta técnicas mas avanzadas de como se realizan estos efectos y como manejar correctamente el DOM de la pagina para crear efectos prácticos y bellos.

Manual de AJAX www.rincondeajax.com

 

GoodLuck&Thanks.