viernes, 29 de abril de 2011

Imagen de Sustitución con CSS y JavaScript

El dia de hoy les mostrare como crear una imagen de sustitución, que es el efecto que se muestra al pasar el mouse por enzima de una imagen  o texto. y para ello les traigo dos formar de lograrlo.

La primera es utilizando CSS, para lo cual tenemos el siguiente codigo:

<style type="text/css">
.caja{
background: url(Imagen 1) no-repeat;
height:80px;
width:80px;
text-align:center;
}
.caja:hover{
background: url(Imagen 2) no-repeat;
}
</style>


que pegaremos antes del </head> de nuestro codigo html.

donde vemos que  ya tenemos nuestro estilo caja, donde definimos nuestro fondo, el tamaño, la alineacion, etc. como se puede observar en background estoy poniendo la url de mi imagen que sera la primera que se mostrara al cargar nuestra pagina. Cabe aclarar que toy utilizando una imagen con fondo trnasparente, si gustaran ponerle un color de fondo para apreciar mejor el efecto seria de la siguiente forma:
background:#E8F4C1 url(Imagen 1) no-repeat;
Donde como paso primero se le asigna el color deseado y posteriormente dentro de la misma declaracion la url de nuestra imagen.

Paso seguido a esto pones una pseudo-clase de caja con hover (similar a rollover de flash) para poder realizar el cambio o sustitucion de nuestra imagen por otra, a lo cual queda de la siguiente forma

.caja:hover{
background: url(https://sites.google.com/site/jdxtavo/files/3.png) no-repeat;
}
</style>

Teniendo nuestro estilo ya definido procedemos a crear el efecto, para ello utilizo un div al cual le asigno la clase caja para que herede sus propiedades.
<div class="caja">
</div>
con ello ya tenemos nuestro efecto creado, que se veria asi:


si quisieramos perzonalizar nuestro efeco, dentro de nuestro div, podriamos poner otra imagen con un link a otra pagina, para ello tenemos el siguiente codigo.

<div class="caja">
   <a href="http://xtavo.blogspot.com/"><img src="Imagen Link" />
   </a>
</div>
 y con ello tendriamos el efecto como se muestra a continuacion.

Imagen de sustitucion con CSS




La segunda forma es utilizando javascript.
En esta parte lo podemos realizar mediante Dreamweaver, ya que nos proporciona en vista diseño la forma de realizarlo. para ello solo basta ir a nuestro barra de menus - insertar - Objetos de imagen - Imagen de sustitución (Ver imagen 1).





Imagen1

Imagen 1.

 Paso seguido a esto nos muestra la siguiente ventana (Ver imagen 2):






Imagen 2

Imagen 2.

Donde:
En nombre de imagen: le damos un nombre a nuestra imagen.
Imagen origen: la primera imagen que se muestra al cargar nuestra pagina.
Imagen de sustitución: la imagen que se mostrara al pasar el mouse sobre la primera.
Texto alternatico: el texto que muestra nuestra imagen. como submenu y por ultimo.
Al hacerse clic, ir a URL: aqui especificamos la direccion o link al cual queremos que nos dirija una vez que demos clic.
Pasando a la parte de código en Dreamweaver, podemos observar que nos creo el siguiente script:

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

y dentro de nuestra etiqueta <Body> realiza lo siguiente
<body onload="MM_preloadImages('Imagen 1')">:

esto para cargar el efecto una vez que se inicie la pagina ()y el codigo que realiza la animacion en texto html queda de la siguiente forma:


<img src="Imagen 1" alt="Hi :)" name="Nombre" width="70" height="85" border="0" id="Id Imagen" /> .


 Con estos sencillos pasos tenemos terminado nuetra imagen de sustitución de forma mas rapida.
cualquier duda o comentario no duden en comentarlo. 

Un saludo Cordial!
Atte.
LSCA. Gustavo Ortiz Gamez.

jueves, 28 de abril de 2011

Enviar correo con SMTP en C#.

image
El envió de correo por medio de SMTP (Simple Mail Transfer Protocol) desde nuestra aplicación win y web form es muy sencillo, para ello necesitamos dos librerías importantes para lograrlo: System.Net.Mail y System.Net en nuestro código, utilizando un Using.

Para ello necesitamos un servidor de correo, podemos utilizar los servidores de Gmail, Hotmail, o si tenemos uno propio de igual forma. (les dejo el SMTP de estos dos con sus respectivos puertos)
/*
* Cliente SMTP
* Gmail: smtp.gmail.com puerto:587
* Hotmail: smtp.liva.com puerto:25
*/

Bien adentrándonos a lo importante, crearemos una nueva clase llamada Correos, en la cual are una instancia de SmtpClient para poder trabajar con nuestro cliente de correo, la cual utilizaremos mas adelante.
SmtpClient server = new SmtpClient("smtp.gmail.com", 587);
Ahora utilizare el método publico Correos donde ya empezaremos a proporcionarle la información necesaria para el envió,  donde ingresaremos la cuenta de correo origen o credencial de una cuenta existente.

server.DeliveryMethod = SmtpDeliveryMethod.Network;
server.Credentials = new NetworkCredential ("CorreoOrigen", "Contraseña");
server.EnableSsl = true;

Nota: podemos dejar fijo el correo y la contraseña, o bien hacer que nuestros método reciba estos dos parámetros cuando se invoca la clase.
Como paso siguiente declare un método llamada MandarCorreo el cual recibirá el cuerpo del mensaje de tipo MailMessage.
server.Send(mensaje);

Y enviaremos el correo. mensaje es mi variable donde guardo el cuerpo del correo, puede ser un texto plano o bien podemos elaborar un cuerpo mas sofisticado, armándolo por medio de código HTML, con imágenes, link, y dándole un formato mas personalizado, para ello lo hacemos de la siguiente forma:

mensaje.Subject = "Correo Prueba"; // Es el titulo del correo o asunto.
mensaje.Body = cuerpo; // Aquí utilizo una variable de tipo string donde guardo mi codigo html o texto plano que viene siendo el cuerpo del correo.
mensaje.IsBodyHtml = true; // Esta instrucción es para indicarle a nuestro código que acepte el cuerpo del correo en formato HTML.
mensaje.BodyEncoding = System.Text.Encoding.UTF8; // Por ultimo solo podemos la codificación del correo, por eso de los acentos. con esto tenemos armado nuestra variable ahora solo faltaría invocar nuestro método y enviar el correo.


Bien después de esta breve explicación les dejo el código que utilizo.

class Correos
{
     SmtpClient server = new SmtpClient("smtp.gmail.com", 587);
    
public Correos()
   {  
   server.DeliveryMethod = SmtpDeliveryMethod.Network;
   server.Credentials = new NetworkCredential("CorreoOrigen", "Contraseña");
   server.EnableSsl = true;
   }
public void MandarCorreo(MailMessage mensaje)
{
     try
        {
         server.Send(mensaje);
        }
     catch (SmtpException smtpe)
        {
         throw smtpe;
        }
}


Con esto ya solo invocamos en nuestro código nuestra clase de la siguiente forma: y le pasamos el parámetro con nuestro mail ya construido.
Correos mail = new Correos();
mail.MandarCorreo(mensaje);

Espero les sirva este pequeño ejemplo, si tienen alguna duda no duden en comentarlo y con gusto les daré una respuesta.

Atte.
LSCA Gustavo Ortiz Gamez.

sábado, 23 de abril de 2011

Hablando de Entity Framework y LINQ.

Esto es el comiezo de todo el mundo que contiene Entity Framework y LINQ, para ello empezaremos citando a MSDN de Microsoft donde tenemos las definiciones para Entity Framework y LINQ, respectivamente.

Entity Framework: "Entity Framework es un conjunto de tecnologías de ADO.NET que permiten el desarrollo de aplicaciones de software orientadas a datos. Los arquitectos y programadores de aplicaciones orientadas a datos se han enfrentado a la necesidad de lograr dos objetivos muy diferentes. Deben modelar las entidades, las relaciones y la lógica de los problemas empresariales que resuelven, y también deben trabajar con los motores de datos que se usan para almacenar y recuperar los datos. Los datos pueden abarcar varios sistemas de almacenamiento, cada uno con sus propios protocolos; incluso las aplicaciones que funcionan con un único sistema de almacenamiento deben equilibrar los requisitos del sistema de almacenamiento con respecto a los requisitos de escribir un código de aplicación eficaz y fácil de mantener."

viernes, 22 de abril de 2011

El uso de listas (coleccion de datos)... (Parte 3)

Ahora veremos cómo podemos recorrer nuestra lista. 

Esto es fácil si ya hemos manejado arreglos y matrices, existen diversas formas de lograrlo, tenemos los ciclos for y foreach, con los cuales podemos trabajar de la siguiente forma:
Ciclo for.
Para ello recordando la sintaxis for(x=0; x<=total; x++)
Dónde:
x=0: representa un dato de tipo int
 con el cual recorremos nuestro ciclo, inicializándolo en 0.
x<=total: es el número de elementos que vamos a recorrer. Como condición que x sea menor o igual al total.
x++: un decremento a nuestra variable de tipo int que suma 1 en cada iteración de nuestro ciclo
Bueno recordando los anteriores post y tomando de ejemplo las listas, tenemos lo siguiente 
for(int x = 0; x<= MyList.Count + 1; x++)
{
//codigo a ejecutar
}

Donde vemos que inicializamos nuestra variable x de tipo int (de igual forma podemos declaras la variable fuera del ciclo así la podremos reutilizar en otro ciclo), con un valor de 0, luego le agregamos la condición de que x sea menor o igual que el total de nuestra lista menos 1 (recordando que los datos de la lista se guarda de la posición 0 a n), y por ultimo incrementamos nuestra variable por cada iteración.

Con esta forma estamos recorriendo nuestra lista. Y bien para acceder a los elementos de ese nodo o posición solo basta poner MyList[x]. y VS les desplegara los elementos que tenemos como se muestra en la siguiente imagen.


Donde [x] es el número de nodo con el cual estamos trabajando, de igual forma si conociéramos ya el nodo a editar podríamos poder directamente MyList[2].Sexo y con ello se accede al nodo que se encuentra en la posición 2.

Con ello podemos modificar el elemento de la lista, borrarlo o en caso que no exista algún dato poder insertar o llenar ese campo.
Como por ejemplo.

for(int x = 0; x<= MyList.Count + 1; x++)
{
//Actualizar

MyList[x].Sexo = "Hembra";
//Borrar
MyList[x].Sexo = "";
}

O bien utilizamos un RemoveAt para eliminar el registro de la posición indicada de la lista  MyList.RemoveAt(1);

Ciclo foreach.

Otra forma de recorrer nuestra lista es por medio de un foreach, recordando que es por cada elemento de nuestra lista se hace una iteración. O bien una definición más completa de MSDN que nos proporciona Microsoft

“La instrucción foreach repite un grupo de instrucciones incluidas en el bucle para cada elemento de una matriz o de un objeto collection. La instrucción foreach se utiliza para recorrer en iteración una colección de elementos y obtener la información deseada, pero no se debe utilizar para cambiar el contenido de la colección, ya que se pueden producir efectos secundarios imprevisible”


foreach (animal ani in MyList)
{
//codigo a ejecutar
}
 En este caso abrimos nuestro foreach y decimos que por cada ani de tipo animal  (recordando que nuestra lista es de ese tipo) en nuestra lista vamos a realizar algo. Como bien lo dice la descripción es un poco inestable editar nuestra lista por esta instrucción, pero si es posible realizarlo de la siguiente manera:
foreach (animal ani in MyList)
       ani.Edad = 2;
       ani.Tipo ="";
}

Donde vemos que ani contiene los elementos de nuestra lista en cada recorrido

Y bien con esto concluimos la forma de utilizar nuestra lista. Ya con una lista llena podemos realizar el llenado de los GridView

dataGridView1.DataSource = MyList;

O poder utilizar nuestra lista con LINQ (Un modelo de programación que simplifica y unifica la implementación de acceso a cualquier tipo de datos) para poder hacer consultas con la información de nuestra como por ejemplo:

var lista = MyList.Where(a => a.Sexo == "Macho");

Donde lista guarda los nodos de nuestra lista mientras el sexo sea igual a "Macho"
En nuestro siguiente por explicare más a la brevedad las ventajas que nos ofrece LINQ.

Un saludo Cordial esperando les haya sido de utilidad este 3 post.

Atte.,
LSCA Gustavo Ortiz Gámez.

jueves, 21 de abril de 2011

Problemas de configuracion con Visual Studio (cualquier version)

Hace tiempo cuando trabajaba en SIC "Sistema Integral de Compensaciones" desde mi laptop, tuve algunos problemillas con mi Visual Studio 2005, el cual era que tenia todo el VS desconfigurado, si queria agregar un nuevo proyecto o solucion de plano estas ya no salian en las plantillas predeterminadas que nos proporciona VS, llego al punto de desesperarme y pense en reinstalar mi VS, pero gracias al ya casi Bendito Google :), encontre una solucion a mi problema.


domingo, 17 de abril de 2011

¿Es lo mismo escribir String que string?

Pues bien el dia de hoy trabajando, me encontre con una duda.
A la hora de declaras unas variables de tipo string y puse lo siguiente:


string mivariable = "";
String mivariable1 = "";


 podemos ver que las dos declaraciones son de tipo string, pero existe unas diferencias, una es evidente los colores de las dos palabras una color azul mas claro y la otra sale del color de una clase, y la otra diferencia es que una empieza con la letra mayuscula. Pues bien me di a la tarea de despejar mi duda y encontre lo siguiente.

jueves, 14 de abril de 2011

Mover, Copiar y Eliminar directorios

El día de hoy les hablare de cómo copiar, mover y eliminar archivos de un directorio para ello tenemos una importar el espacio de nombre System.IO a nuestro proyecto para poder acceder a los métodos que nos proporciona;

El espacio de nombres System.IO contiene los tipos que permiten leer y escribir en los archivos y secuencias de datos, así como tipos que proporcionan compatibilidad básica con los archivos y directorios para poder manejarlos a nuestra conveniencia.
Bueno sin más preámbulos les explico cómo poder mover, copia y eliminar un archivo.
El copiar directorio nos permite realizar una copia de una ruta a otra de un archivo o varios archivos, para ello tenemos

miércoles, 13 de abril de 2011

El uso de listas (coleccion de datos)... (Parte 2)

Bien ahora hablaremos de cómo podemos  llenar nuestra lista. 

Explicare en forma detallada como podemos agregar elementos a nuestra lista de datos.
Para ello utilizaremos la clase animal ya creada en mi anterior post, recordando que estos fragmentos de código son en lenguaje C#
Para ello primero declaramos nuestra lista a la cual llamare MyList.
List<animal> MyList = new List<animal>();

Una vez realizado esto, procedemos a crear una instancia de nuestra clase a la cual llamare newanimal.

animal newanimal = new animal();

lunes, 11 de abril de 2011

El uso de listas (coleccion de datos)... (Parte 1)

¿Por qué el uso de Listas o colección de datos?

   Una lista es una de las estructuras de datos fundamentales en programación, esta puede ser implementada en otras estructuras de datos.
   Las listas consisten en una secuencia de nodos, en los que se almacenan campos de datos arbitrarios en un orden ascendente, actúan similarmente a las arreglos (array), constan de un índice que determina el orden de los datos insertados, con ellos podemos acceder a las posiciones de la lista, así como actualizar o eliminar datos siempre y cuando se conozca o localice el punto.
   Sin abordar más en la teoría, que por lo regular cuando se busca la forma de cómo utilizar los recursos que nos proporciona C#, VB o algún otro lenguaje normalmente la teoría no la tomamos en cuenta, aunque desde mi punto de vista es importante conocer algunas detalles teóricos

viernes, 1 de abril de 2011

Nunit

Bueno en esta ocasión voy a hablar de algo no tan nuevo pero casi no utilizado.
Se trata de Nunit, un framework para nuestro Visual Studio 2008 en adelante.

Dirán para que sirve? pues bien este framework se encarga de las pruebas o testing de nuestro código desarrollado ya sea en C# o VB, aun no se si tenga el alcance con otro lenguaje pero de igual forma esta Junit para java .

Esto es un pequeño adelanto indagare mas en la información y los beneficios que nos proporciona a nosotros como programadores

Saludos! desde mi Mail