sábado, 23 de octubre de 2010

Introduccion a ASP.NET

Edit: Habia hecho una entrada, la que consideré algo enredada de entender, considerando que no se tienen conocimientos previos sobre programación para web, por lo que la eliminé y subo otra :P

Pagina web:Documento o archivo codificado en un lenguaje de marcado, usualmente HTML, que suele contener textos con hipervínculos (o links), imágenes, sonidos, etc., que en la mayoría de los casos reside en un sitio o servidor web, y puede ser consultado empleando un navegador web


HTML es un lenguaje de marcado, NO un lenguaje de programación

HTML: Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>)

Código HTML básico: La estructura básica de HTML se compone de todo el codigo HTML, dentro una cabecera y un cuerpo. Los comentarios en HTML a diferencia de varios lenguajes de programación, se realizan con <!-- este es un comentario !-->

<html>  <!-- Inicio del HTML --!>
     <head>  <!-- Inicio de la cabecera --!>
          <title> Este es el titulo de la pagina </title>
     </head>  <!-- fin de la cabecera --!>
     <body>  <!-- Inicio del cuerpo --!>
           Aqui yo puedo escribir mucho contenido.
           Puedo colocar un Link como este <a href = "http://www.google.cl"> Ir a Google </a>
           Puedo colocar un boton <input type="button" value="Boton!"/>
           Puedo colocar un titulo con formato predefinito <h1> Como este </h1>
           O un subsubsubtitulo <h5> Como este </h5>
     </body>  <!-- fin del cuerpo --!>
</html>  <!-- fin del HTML --!>




Actividad: Hacer pag HTML
1- Creamos un documento de texto (notepad, block de notas) en el escritorio llamado Web.txt.
2- En su interior colocamos el texto de ejemplo que escribí anteriormente.
3- Guardamos el archivo con extension HTML (osea, lo guardamos como Web.html)
4- Abrimos el nuevo archivo web.HTML que vemos?

1, 2 y 3
Click en la imagen para agrandar
4

Click en la imagen para agrandar

Eso es lo básico. En realidad en HTML podemos hacer muchas cosas, pero lo malo es que todas estáticas, nada de consultas a bases de datos, manejo de datos en si, quiere decir nada que podamos hacer en CodeBehind (por ejemplo, en los CS que hemos visto hasta ahora). HTML sirve para mostrar los datos, pero si queremos manejar con mayor presición qué es lo que vamos a mostrar, necesitamos de alguna otra tecnología por detras como es PHP, JSP (java en web :o), o ASP.Net  entre otros. En nuestro caso usaremos ASP.Net que es lo que estamos estudiando ;)

ASP.Net es usado por programadores para construir sitios web dinámicos, aplicaciones web y servicios web XML. Apareció en enero de 2002 con la versión 1.0 del .NET Framework, y es la tecnología sucesora de la tecnología Active Server Pages (ASP). La ultima version del Framework es la 4.0 la cual fue publicada en abril de este año (2010).

Con una página HTML estática (archivo .htm o .html), el servidor cumple una solicitud Web leyendo el archivo y enviándolo tal como está al explorador. Al contrario, cuando alguien solicita una página Web de ASP.NET (archivo .aspx), la página se ejecuta como un programa en el servidor Web. Mientras la página se está ejecutando, puede realizar cualquier tarea que requiera su sitio Web, incluido el cálculo de valores, la lectura o escritura de información de base de datos o la llamada a otros programas. Como su resultado, la página genera dinámicamente marcado (elementos en HTML u otro lenguaje de marcado) y envía este resultado dinámico al explorador.

Actividad: Hacer pag ASP.NET
1- Abrimos Visual Studio
2- Archivo-> Nuevo -> Proyecto -> solucion en blanco
3- Archivo-> Nuevo -> Sitio web -> Sitio web ASP.NET
4- En Default.aspx agregar un Label y un Button (arrastrar desde el "Cuadro de herramientas")
5- Que al hacer click en Button, el label me muestre "Hola a todos". Para esto, hacer doble click en el boton, y dentro del codebehind (Default.aspx.cs) en el metodo creado, escribir
NombreDelLabel.Text = "Hola a todos";
6- F5 para generar y ejecutar

ASP.NET se divide en 2 partes: el codigo en si de la web, y el code-behind
Ejemplo Aplicacion ASP.Net
codigo

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-ransitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ejemplo ASP.NET</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        Texto puede cambiar, ya que los controles asp.net son dinamicos
        <asp:Label ID="lblSaludo" runat="server"></asp:Label> <!-- control ASP.NET -->
        <asp:Button ID="btnSaludar" runat="server" Text="Button"
            onclick="btnSaludar_Click" /> <!-- control ASP.NET -->
    </div>
    </form>
</body>
</html>




code-behin

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
  {

  }

protected void btnSaludar_Click(object sender, EventArgs e)
  {
   lblSaludo.Text = "Hola!"; //le decimos que el control ASP.NET llamado lblSaludo dirá Hola!
  }
}

No hay comentarios: