AJAX, El complemento perfecto. Parte 1



Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

Este es el primer post de 3 que realizare explicando el funcionamiento y ejemplos de AJAX.


AJAX es una forma de desarrollo web para crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el cliente (en este caso el navegador de los usuarios), y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

Cuando empece a desarrollar para la web, surgio una necesidad que a todos en algun momento nos surge, y es poder ejecutar codigo en el servidor por debajo y sin recargar la pagina, fue cuando comence a investigar y descubri AJAX, al principio cuando lei hacerca de esto pense que era algo muy dificil y me tomaria mucho tiempo aprenderlo pero 60 minutos despues ya lo manejaba "perfectamente".

Hay distintas formas de utilizar AJAX en tus aplicaciones web, todas varian dependiendo el tipo de aplicacion que estes desarrollando y lo que necesites.

Aqui les voy a hablar de 3 formas de utilizar AJAX en una aplicacion de ASP.NET - C#, talvez existan mas formas ustedes me diran cual, pero yo solo he trabajado con estas 3 y me parecen EXCELENTES.

1. Ajax Control Tool Kit:: Es un proyecto de codigo abierto desarrollado por Microsoft. Se trata de un esfuerzo conjunto entre Microsoft y la comunidad de ASP.NET AJAX que proporciona una infraestructura de gran alcance para escribir reutilizables, personalizables y extensibles de ASP.NET y los controles extensores de AJAX, así como un amplio abanico de controles que pueden ser utilizados fuera de la caja para crear una experiencia web interactiva.. La instalacion es facil:

Lo primero que tienen que hacer es descargar el archivo Aqui

Seleccionar elementos Ajax ToolKit
Luego descomprimir el .zip e ir a Visual Studio, ubicar la barra de herramientas (ToolKit, si no aparece busquen en el menu la opcion Ver - Barra de herramientas o presionen Ctrl + A + X) y dar Click derecho -  "Choose items" (Seleccionar elementos).








En la ventana que se abre den en la opcion Browse y ubicaremos la ruta donde descomprimimos el archivo descargado anteriormente, dentro de esta carpeta hay muchas mas y un archvio llamado "AjaxControlToolkit.dll" este sera el que seleccionaremos y presionamos abrir y ok. Al hacer esto, veremos como van apareciendo los controles de el ToolKit y ya estaran listos para usarse.
Pueden escoger entre la amplia gama de controles y animaciones que ofrecen .
Usarlos es muy facil, simplemente arrastran un control a la pagina y ya esta, la primera vez, Visual Studio agrega una serie de archivos y DLL a la carpeta BIN asi que no se asusten.

Ah pero OJO para que funcionen correctamente deberan argregar al principio de cada pagina donde deseen usar estos controles un ScriptManager porque de lo contrario les saldra el siguiente error:

Server Error in '/Ajax' Application.

Could not find any resources appropriate for the specified culture or the neutral culture.  Make sure "AjaxControlToolkit.Properties.Resources.NET4.resources" was correctly embedded or linked into assembly "AjaxControlToolkit" at compile time, or that all the satellite assemblies required are loadable and fully signed.


Aqui les dejo Los ejemplos oficiales de Ajax Control ToolKit en ASP.NET - C# para que lo descarguen:
Descargar Ejemplos Ajax Control ToolKit

La documentacion completa con ejemplos de implementacion la encuentran en este Link

Quedo atento a sus comentarios!

Esperen pronto la segunda parte de este interesante Post.


Leer más...

JQUERY, Mi amigo del alma!


plugins, jquery, programacion jquery
JQuery es una biblioteca o mejor dicho un framework JavaScript que pone a disposicion del desarrollador una serie de metodos y funciones que facilitan laiteraccion con los elementos de la pagina, es muy utilizado para manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.

Para utilizar jQuery, solamente es necesario descargar la librería y enlazar en nuestras páginas el único archivo JavaScript que la forma:

1. <script type="text/javascript" src="jquery.js"></script>
o
2. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

La librería se puede descargar en dos versiones: la versión descomprimida ocupa 61 KB y es la mejor opción para desarrollar aplicaciones. La versión comprimida ocupa sólo 20 KB y es la opción ideal en el servidor de producción, para minimizar el tiempo de carga de la aplicación, estas se agregan al proyecto web y se llaman como esat en la primera opcion.

La segunda opcion se utiliza cuando no quieres descargarte la libreria, simplemente copias ese codigo en tu encabezado y automaticamente se hara el llamado a la libreria que esta almacenada en un servidor de JQuery.


El codigo de este framework es libre y de codigo abierto asi que no se preocupen por cuestiones de licensamiento o pagos, pueden usarlo, modificarlo y hacer lo que ustedes quieran (ojala todo fuera asi).
Jquery te ahorra mucho codigo JavaScript ya que simplifica en un 70% el codigo utilizado permitiendote hacer las mismas cosas y mucho mas.

Ej:
Con JavaScript

// Seleccionar un elemento
document.getElementById("miParrafo");
// Seleccionar todos los enlaces
document.getElementsByTagName("a");
// Seleccionar todo lo anterior
?
// Seleccionar mediante la clase CSS
?

Con jQuery

// Seleccionar un elemento
$("#miParrafo");
 // Seleccionar todos los enlaces
$("a");
// Seleccionar todo lo anterior
$("#miParrafo, a")
// Seleccionar mediante la clase CSS
$(".miClase")

Como vemos es mucho mas practico y tiene mas funcionalidades. Existe mucha documentacion en internet, la oficial la pueden encontrar en este Link .

Uno de los componentes más impresionantes de jQuery es el de sus selectores, que permiten olvidarse de los aburridos document.getElementById() y del código JavaScript complejo. jQuery utiliza lo mejor de CSS 1, CSS 2, CSS 3 y XPath para seleccionar de forma sencilla cualquier elemento de la página sin necesidad de saturar el código XHTML con atributos “id”. Ejemplos:

// Seleccionar todos los párrafos de la página que tengan al menos un enlace
$("p[a]")
// Seleccionar todos los "div" que no estén ocultos
$("div:visible")
// Seleccionar todos los radio buttons que han sido seleccionados
$("input[@type=radio][@checked]")
// Seleccionar varios elementos mediante sus "id" y "class" (devuelve un array)
$("p.importante, div#menu, span#introduccion p.especial a") 



Hay infinidades de plugins jquery que otros desarrolladores ya han creado y ponen a disposicion del publico para usarlos en cualquier proyecto, con unas pocas configuraciones tendremos desde un cambio en el icono del puntero hasta un poderozo SlideShow que te diga el futuro.

Aqui les dejo unos ejemplos:

55 plugins para descargar

240 Plugins Jquery

Libro online de los fundamentos de JQuery

Libro PDF JQuery

Espero que les haya gustado y comenten. ;=)



Leer más...

El extensible XML


Empezare diciendo lo mismo que wikipedia:

XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y adaptación del SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades, de ahí que se le denomine metalenguaje.1 Algunos de estos lenguajes que usan XML para su definición son XHTML, SVG, MathML.

http://es.wikipedia.org/wiki/Extensible_Markup_Language

XML, es como lo llamo una forma de estructurar informacion de una manera facil y entendenble, es utilizado en muchos casos, como lo son para enviar y recibir informacion por WSDL.
XML es una tecnología en realidad muy sencilla que tiene a su alrededor otras tecnologías que la complementan y la hacen mucho más grande y con unas posibilidades enormes y básicas para la manipulacion de la información.

Aqui un pequeño ejemplo:

<?xml version="1.0"?>

<libro>

<titulo> Cien años de soledad </titulo>

<disponible tiempo="24" unidad="horas"/>

<autor> Gabriel García Márquez </autor>

<formato> Rústica </formato>

<publicacion>1967 </publicacion>

<precio cantidad="9.99" moneda="euro"/>

<descuento cantidad="5"/>

<enlacelibro href="/exec/ISBN/84-473-0619-4"/>

</libro>

Aqui les dejo una pagina donde muestran los principios de XML
XML Tutorial

Libro pdf de introduccion a XML:
Descargar Libro

Quedo atento a sus comentarios.


Leer más...

JavaScript, Concepto y Ejemplos


 

JavaScript facil y sencillo
JavaScript, es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML
Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad con la mayoría de los navegadores modernos, es el lenguaje de programación del lado del cliente más utilizado.
Aunque comparte muchas de las características y de las estructuras del lenguaje Java, fue desarrollado independientemente. El lenguaje Javascript puede interactuar con el código HTML, permitiendo a los programadores web utilizar contenido dinámico.
Por ejemplo, hace fácil responder a los acontecimientos iniciados por usuarios (como introducción de datos en formularios) sin tener que utilizar CGI.
El lenguaje Javascript es opensource, por lo que cualquier persona puede utilizarlo sin comprar una licencia.

Nuestro primer programa será el famoso "Hola Mundo", es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo".

 
<html>
<head>
</head>
<body> 

<script language="javascript">
document.write('Hola Mundo');
</script>

</body>
</html>

El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad type con la cadena javascript:

<script type="javascript">
</script>
 
Como el objetivo de este post es hacer una pequeña introduccion a JavaScript, aqui les dejo algunos libros muy buenos que encontre en la web:

Introduccion a JavaScript
JavaScript Basico
Manual de JavaScript
Leer más...

Que es CSS, y con que se come ?

 

  Que es CSS?



Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentación de la estructura del HTML, es un conjunto de reglas por las que podemos dar estilo a cualquier elemento de nuestro HTML.

Funciona aplicando estilo a los elementos HTML, entre las que incluyen, tipos de letra, color de fondo, tamaño, color del texto, márgenes, etc... Quedando de esta manera todo lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.

Este lenguaje desarrollado por la W3C, se esta haciendo cada vez mas importante entre los diseñadores y desarrolladores, gracias a la facilidad de uso y a los óptimos y flexibles resultados.

CSS tiene 3 elementos principales que son:

  1.  Atributos: Son los que usaremos para indicar cual estilo queremos modificar, por ejemplo: si queremos cambiar el color de la letra, usamos el atributo "font-color", si es el fondo, el atributo "background", etc.
  2.   Valores: Se utiliza para definir como queremos  modificar el atributo, o la propiedad que le daremos.
      Por ejemplo, si queremos que un tipo de letra sea blanca, usamos el atributo "font" y el valor  "white".
  3.   Selectores: Se utilizan  para definir sobre cuales elementos HTML vamos a aplicar los estilos, si         queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta del documento.

Hay tres tipos de selectores:
  1.  Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
  2.     Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un id: Ej:
    .
  3.     El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:   .mi_clase.


La sintaxis:

Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separándolos con un espacio o un salto de línea. En CSS se deben escribir los atributos y valores con minúsculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar. A continuación les mostrare ejemplos de esto:



 

/*CSS sobre selector de etiquetas*/

body {
       font-family: arial;
       font-size: 12px;
       color: black;
       background-color: #cccccc;
}

 

/*CSS sobre selector de identificador:

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo:

 
*/

#header {
       background-color: #ff0000;
       color: #ffffff;
       font-size: 26px;
}


/*CSS sobre selector de clase.

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:

 -- 

Aqui el contenido
*/ .mi_clase {        margin: 5px;        height: 100px;        width: 200px; }



Aqui les dejo un libro que encontre de CSS el cual es muy bueno:
introduccion_css.pdf 

Tambien este tutorial online: http://es.html.net/tutorials/css/

Leer más...

Tutorial de introduccion a html


¿Qué son los archivos HTML?



HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
HTML es el lenguaje utilizado como base para crear las páginas web.

Puede que mas de uno al escuchar hablar de un lenguaje informatico se asuste y piense en lo dificil que puede ser eso, pero no se preocupen, HTML no deja de ser una forma un poco peculiar de darle formato a los textos e imagenes para poderlos visualizar en un navegador como: Firefox, Chrome,Internet Explorer, etc.

HTML es el lenguaje como se escriben las paginas web, estas pueden ser vistas por los usuarios mediante un navegador ( Firefox, Chrome,Internet Explorer, etc ), por lo tanto podemos decir que HTML es el lenguaje que utilizan los navegadores para mostrar las paginas web.

HTML cuando se desarrollo fue pensado para divulgar informacion pero no se imaginaron el auge tan grande que iria a tener este con lo contenidos multimedia y todos los usos que se darian y es aqui donde aparece otros conceptos CSS y JAVASCRIPT de los cuales estaremos hablando en otros posts.

Ahora si empecemos:

Les recomiendo utilizar el Bloc de notas para realizar los archivos HTML:

Abramos Bloc de notas, luego seleccionemos en el menu - Archvo - Guardar Como: Seleccionaremos una ruta y le pondremos como nombre prueba.html y acontinuacion pegaremos el siguiente codigo:

  
<html>

 <head>

  <title>Mi primera página Web</title>

 </head>


 <body>

  Hola Mundo

 </body>

</html>


Ahora presiona Ctrl + G o ves a Archvio - Guardar.
Ubica la pagina y dale Doble Click, se abrira el navegador y tendras lo que has escrito en el Body: "Hola Mundo"

Asi abras empezado esta travesia por el impresionante mundo del HTML.
Les dejare unos libros y tutoriales que encontre:

Tutorial Online

introduccion_xhtml.pdf



Leer más...

Posts de introduccion





Hola Csharpedianos, voy a empezar a escribir una serie de post que tendran como objetivo inrtoducir en las tecnologias necesarias a todooooos aquellos que no conocen muy bien el tema de la programacion y el desarrollo web, asi tendran las bases necesarias para seguirnos en esta aventura y descubrir lo poderoso que podemos llegar a ser con .NET.

Los post van a abarcar temas como:
HTML, CSS, JAVASCRIPT, JQUERY, SERVIDORES DOMINIOS Y HOSTING.

Les dejare libros, mauales, tutoriales adicionales que podran hacer muy facilmente para practicar y aprender cada vez mas estas tecnologias.

En internet el conocimieento es libre, hay miles de cosas que aprender y hacer pero eeehhhh uno a la vez!!

Espero comenten los posts y me escriban para saber su opinion y poder mejorar lo mas posible:

Que el poder los acompañe Csharpedianos!!
Leer más...

Subir archivos al servidor


 Muchas veces necesitamos que nuestros usuarios puedan subir archivos al servidor  ya sean imágenes,pdf, rar,zip,etc, y es común que quieran encontrar métodos fáciles y agiles para realizar esto. Es por eso que hoy les traigo un post donde les enseñare a crear una aplicación en ASP.NEET Y C# para que puedan subir archivos a una carpeta del servidor.
Es muy simple, pero vaya que nos es útil, y más cuando es para satisfacer las necesidades de nuestro cliente.
Sin hablar más aquí vamos:
Lo primero que haremos es crear una aplicación en Visual Studio - ASP.NET y escogeremos como lenguaje C#, luego agregaremos una nueva WebPage y agregaremos los siguientes controles:
FileUpload – Label - Boton
Le cambiaremos los id de los controles  y les pondremos nombres descriptivos por aquello de las Buenas practicas de programación. La propiedad Text del botón le pondremos “Enviar”.
Crearemos una carpeta en el server que se llame “Archivos” para esto daremos Click derecho en el explorador de soluciones y “Agregar nueva carpeta”  (Add New Folder)  la que tendrá el grandioso nombre de  “Archivos”.
En la vista Dividir (Split) daremos doble click en el botón enviar y se creara el evento click de ese botón, al cual le agregaremos el siguiente código:

  
  try
        {
            FlpArchivo.SaveAs(Server.MapPath("~/Archivos/") + FlpArchivo.FileName);
            lblinformacion.Text = "El archivo " + FlpArchivo.FileName + " ha sido subido correctamente";
        }
        catch
        {
            lblinformacion.Text = "Ha ocurrido un error al intentar subir el archivo al servidor";
        }


Ahora pasare a explicar cada una de las lineas anteriores:

1. Inserto el codigo que voy a utilizar dentro de un try{}cattch{} para controlar cualquier error, que no sea visible para el usuario y se muestre solo un mensaje en el label.

2. Invoco el metodo SaveAs del FileUpload - "FlpArchivo" el cual se encarga de guardar el archivo dentro de una ruta especificada.
Este metodo recibe como parametro un string el cual lleva la ruta donde se va a guardar el archivo.
Para obtener la ruta correcta de la carpeta utilizo el metodo Server.MapPath() al cual le digo que mi carpeta esta en la parte principal de mi proyecto (~) y paso a decirle el nombre de la carpeta, este metodo me devuelve la ruta formateada de la carpeta y le concateno el nombre del archivo, que lo obtengo llamando a la propiedad FileName del FileUpload - FlpArchivo.

3.  Escribo en el Label que la operacion ha sido exitosa en caso que no saliera ningun error, de lo contrario se ejecutara catch y escribira en el label que hubo un error.

y listo de esta forma podremos subir cualquier cantidad de archivos a nuestro server desde ASP.NET, C#, aunque hay que tener en cuenta que cuando tiene un tamaño muy grande se producira un error en la aplicacion, el cual estaremos analizando en un proximo post.

Aqui les dejo el archivo de proyecto para descargar en ASP.NET Y C#:

SubirArchivos.Zip


Leer más...

Enviar email desde C#



Hoy les voy a mostrar rapidamente como enviar emails desde C# con una cuenta de Gmail:

Lo unico que tienen que hacer es copiar el siguiente codigo y pegarlo en su CodeBehind o donde lo deseen.
El codigo ya viene comentado y tendran que cambiar los valores que estan ahy por los que ustedes deseen.
Tendran que añadir la referencia: System.Net.Mail;



    



  private bool EnviarEmail() {        

MailMessage msg = new MailMessage();

        msg.To.Add("Email a quien se le envia ");

        msg.From = new MailAddress("Email que quieras que aparezca de quien envia", "Nombre de quien envia", System.Text.Encoding.UTF8);

        msg.Subject = "Aqui va el asunto";

        msg.SubjectEncoding = System.Text.Encoding.UTF8;

        msg.Body = "Y aqui el contenido";

        msg.BodyEncoding = System.Text.Encoding.UTF8;

        msg.IsBodyHtml = false; //Si vas a enviar un correo con contenido html entonces cambia el valor a true
          //Aquí es donde se hace lo especial

        SmtpClient client = new SmtpClient();

        client.Credentials = new System.Net.NetworkCredential("Debes escribir aqui un email verdadero de gmail", "Aqui debes colocar la contraseña verdadera del anterior email");

        client.Port = 587;

        client.Host = "smtp.gmail.com";//Este es el smtp valido para Gmail

        client.EnableSsl = true; //Esto es para que vaya a través de SSL que es obligatorio con GMail

        try

        {
            client.Send(msg);

            return true;
        }

        catch ()

        {
            return false;
        }

    }

Leer más...

Creando nuestro primer sitio Web con ASP.net y C#

Para crear un proyecto web debemos seleccionar desde el entorno del Visual Studio (Yo utilizo el 2010): Archivo ->Nuevo sitio web. Inmediatamente aparece un diálogo donde podemos configurar que versión de Framework será compatible nuestra aplicación, la ubicación dentro del disco donde se almacenará, el lenguaje de programación a utilizar:
Podria coger la opcion ASP.NET Web Site, esta te crear una plantilla de ejemplo desde la cual podras empezar a trabajr, pero trae muchas cosas innecesarias y para nuestro ejemplo elegiremos la segunda opcion: ASP.NET Empty Web Site.
Este nos quedo guardado en la ruta C:\Projects\WebSite1.




 Se creara automaticamente un archivo llamado web.config, este lo dejaremos sin modificar.
Ahora tendremos que añadir las paginas que vamos a utilizar y para eso ubicaremos a nuestra derecha el explorador de soluciones (si no te aparece ves a Ver - Eplorador de soluciones).
 Damos click derecho en la parte superior donde esta el nombre de la aplicacion (En este caso : WebSite1) y seleccionamos la tercera opcion [Add New Item]. O presionar Ctrl + Shift + A.




Luego Se pasa a configurar la pagina, se selecciona el tipo de archivo (Web Form), el lenguaje (C#), se selecciona la opcion "Place Code in Separate File" esto es para que cree un archivo independiente donde manejaremos los eventos de los controles en nuestra pagina y por ultimo le damos Click en agregar (Add).
Puedes si lo deseas cambiarle el nombre a la pagina pero para este ejemplo lo dejaremos con el nombre que trae (Default.aspx).



El siguiente paso sera agregar un TextBox a la pagina, un Label y un Boton desde la barra de de herramientas (ToolBox) que esta situada en la parte derecha de Visual Studio, si no te aparece ves al Menu Vista - Barra de herramientas o Ctrl + Alt + X, Soolo arrastras los controles y ya esta.
Por Buenas practicas de programacion renombraremos el ID de los controles utilizando nombres mas descriptivos:
 TextBox = TxtNombre, Label = LblDisplay, Boton = BtnAccion
Cambiaremos la propiedad Text del Boton a "Ejecutar."
Al  Label le quitaremos el valor que contiene la propiedad Text y  pondremos "Ingresa tu nombre"
y agregaremos entre cada control dos
.




Ahora escogeremos la vista Spllit ( Dividida ) y daremos doble Click en el boton. Agregaremos el siguiente codigo:

  

LblDisplay.Text = "Hola " + TxtNombre.Text + " Bienvenido!!"; //Aqui concatenamos el valor del TexBox con el texto que querramos
TxtNombre.Visible = false; //Ocultamos el TextBox
 BtnAccion.Visible = false; //Ocultamos el Boton


 Ejecutamos la pagina presionando F5 y listo tenemos nuestro "Hola Mundo" en ASP.NET Y C#.

Les dejo el ejemplo para su descarga:

WebSite1.zip

Leer más...
Google