Departamento

de Lenguajes y Sistemas InformAcos

Tema 9. Aplicaciones Web.

Capa de Interfaz (I)
Herramientas Avanzadas para el Desarrollo de Aplicaciones

Escuela Politcnica Superior

Universidad de Alicante

Aplicaciones web vs escritorio

Simple creacin de interfaz de usuario.
Distribucin de actualizaciones ms fcil y rpido y
menos costoso.
Procesamiento distribuido.

Muchsimo ms fcil proveer procesamiento del lado del

servidor.
La web provee protocolos estndar (HTTP, HTML, XML)
para facilitar aplicaciones n-capa.

Cliente (navegador)

Cliente (navegador)

Cliente (navegador)

Internet

Servidor con
Aplicacin web

Tecnologa dependiente del servidor

La ventaja principal radica en la seguridad que tiene
el programador sobre su cdigo:
ste se encuentra nicamente en los archivos del
servidor que al ser solicitado a travs del web, es
ejecutado.
Los usuarios no tienen acceso ms que a la pgina
resultante en su navegador

Qu es ASP.NET?
Plataforma de para construir Aplicaciones Web y
Servicios Web que funcionan bajo IIS.
Parte del Framework .NET
Tecnologa del lado del servidor

Lenguajes ASP.NET

Orientados a Objeto
Dirigidos por Eventos
Compilados en el Servidor

Soporte de mltiples lenguajes:

C#
VB.NET
Jscript.NET
J#

Framework de Microsoft .NET

XML Web
Services

Web
Forms

ASP.NET
C# VB.NET J# C++

Windows
Forms

Capa de clases
destinadas a servicios
web, pgs. web y form.
windows

Capa de clases de datos

y XML

Datos y Clases XML

Clases Base del Framework
Common Language Runtime

Clases base del entorno

Ejecucin
Cmo funciona?

Llamada a una pgina ASP .NET

Peticin .aspx
(II)

Internet
Intranet
Extranet
Servidor

Cliente

(II)
Respuesta HTML
(II)

Generacin
Compilacin
Instancia
del proceso

Slo la
primera vez

Aplicaciones Web ASP.NET

Combinacin de archivos, pginas, manejadores,

mdulos y cdigo ejecutable que puede invocase
desde un directorio virtual.
Se dividen en varias pginas web.
Comparten un conjunto de recursos y opciones de
configuracin comn.
Cada aplicacin tiene su propio:

Conjunto de cach
Datos de estado de sesin

Dnde se guarda la aplicacin??

Directorio Virtual
Una aplicacin web slo existe en una localizacin que
ha sido publicada por IIS como un Directorio Virtual.
Un directorio virtual es un recurso compartido
identificado por un alias que representa la localizacin
fsica en el servidor.
//localhost es la carpeta virtual raz del ordenador
(\InetPub\wwwroot)

Directorio virtual

Directorio virtual: estructura de agrupacin bsica

que delimita una aplicacin.
Creacin y administracin desde IIS (Internet
Information Server)

IIS
Dominio aplicacin

Pginas web

Servicios web

Archivos de
configuracin

Datos de sesin
y aplicacin

Formularios Web (I)

Tcnicas para Rpido Desarrollo de Aplicaciones
(RAD).
Podemos:

Arrastrar y soltar controles en un formulario

Escribir el cdigo soporte

La aplicacin se desarrolla para un servidor web.

Los usuarios interactan con la aplicacin a travs
de un navegador.

Formularios Web (II)

Proporcionan una aproximacin orientada a:
objetos
eventos
gestin de estado

Programacin del lado del servidor para manejar

eventos del lado del cliente:
pueden ejecutarse, virtualmente, sobre cualquier
navegador compatible con HTML.

Formularios Web (III)

Todos los controles de servidor deben aparecer dentro de
una etiqueta <form>, y esta etiqueta tiene que contener el
atributo runat="server".
Este atributo indica que el formulario se debe procesar en
el servidor.
Tambin indica que los controles que contiene pueden ser
accedidos por scripts del servidor:
<form runat="server">

...HTML + controles de servidor

</form>

Una pgina .aspx debe contener un nico control

<form runat="server">

En VisualStudio
Sitio Web o Proyecto Web?
SiAo Web: conjunto de pginas Web
independientes.
Para pginas Web sencillas (ej, pgina Web personal)

Proyecto Web: conjunto de pginas Web

enlazadas con un archivo de proyecto.
Para aplicaciones avanzadas
Podemos referenciar DLLs, etc

Necesitamos Internet Information

Server?
Visual Studio dispone de su propio servidor de
desarrollo, por lo que para hacer pruebas en
nuestro ordenador no necesitamos tener
instalado IIS.
Sin embargo, para poder desplegar nuestra
aplicacin en un servidor, si lo necesitaramos.

En Visual Studio
Dnde se guarda la aplicacin?

File system
C:\Documents and Settings\aaaa\Mis documentos
\Visual Studio 2005\WebSites\WebSite2
http://localhost:3371/WebSite2/Default.aspx

Local IIS: Carpeta del sitio web por defecto (

http://localhost)
Por ejemplo C:\Inetpub\wwwroot\WebSite1

Code-inline vs Code-behind
}
}

Etiquetas declarativas

HTML, controles de servidor, texto esttico

A diferencia de ASP, buena separacin entre el
cdigo y las etiquetas

nico archivo
(Code-inline)

cdigo
<etiquetas>
Form1.aspx

Archivos separados (Code-behind)

<etiquetas> cdigo
Form1.aspx

Form1.cs

Code-behind
El cdigo para manejar eventos se sita en un archivo
fsico separado de la pgina que contiene los
controles de servidor y las etiquetas.
Extensin .aspx
Extensin .cs, .vb (code-behind)

UTIL mantenerlo por separado :

Es comn en grupos de proyectos tener

diseadores trabajando en la IU de la aplicacin

y desarrolladores en el comportamiento o cdigo.

Ver cdigo (C#)

Expander, contraer

Definicin de una clase parcial

Procedimiento que responde al evento LOAD de la
pgina

Indice
1.
2.
3.
4.
5.

Pginas maestras
Controles de servidor
Eventos
Maquetacin con CSS
Navegacin entre WebForms

Pginas
maestras

Pgina maestra
Las pginas maestras permiten crear un diseo
coherente para las pginas de la aplicacin.
Se puede denir el aspecto, el diseo y el
comportamiento estndar que desea que tengan todas
las pginas (o un grupo de pginas) de la aplicacin en
una sola pgina maestra.
A conAnuacin, se crean pginas de contenido
individuales que incluyan el contenido que desea
mostrar.

Al solicitar una pgina

Cuando los usuarios solicitan las pginas de
contenido, stas son combinadas con la pgina
maestra con el n de generar una salida que
combine el diseo de la pgina maestra con el
de la pgina de contenido.

Ventajas
Realizacin de cambios de diseo en una sola ubicacin; los
cambios se vern reejados en todas las pginas que usan la
pgina maestra.
ReuAlizacin de la interfaz de usuario
Mejor experiencia del usuario nal: pginas ms coherentes

Cmo funciona
Master pages definen el contenido comn y los
contenedores de contenido (content placeholders)
Content pages hacen referencia a las paginas maestras y
llenan a los contenedores con su contenido.

Site.master

ContentPlaceHolder

default.aspx

Content

http://.../default.aspx

En tiempo de ejecucin
IIS controla las pginas maestras en la secuencia siguiente:
Los usuarios solicitan una pgina escribiendo la direccin URL de
la pgina de contenido.
Cuando se captura la pgina, se lee la direcAva @ Page. Si la
direcAva hace referencia a una pgina maestra, tambin se lee la
pgina maestra. Si las pginas se solicitan por primera vez, se
compilan las dos pginas.
La pgina maestra con el contenido actualizado se combina en el
rbol de control de la pgina de contenido.
El contenido de los controles Content individuales se combina en
el control contentplaceholder correspondiente de la pgina
maestra.
La pgina combinada resultante se representa en el explorador.

Page.Master
Nueva propiedad (Master) de System.Web.UI.Page
Esta propiedad contiene una referencia a la pgina
maestra de la pgina de contenido, por tanto provee a
una pgina contenido de acceso programtico a la
pgina maestra
Determina si la pagina tiene asociada una maestra
Acceso a los controles definidos en la maestra pudiendo
escribir cdigo soporte en las pginas de contenido
Acceso a mtodos pblicos y propiedades definidas en la
maestra

Integracin a nivel cdigo de las pginas maestras y

contenidos

Desde el navegador..
Desde la perspecAva del usuario, la combinacin de las
pginas maestras y las pginas de contenido da como
resultado una nica pgina. La direccin URL de esta pgina es
la de la pgina de contenido.

En Visual Studio
Herencia visual
Master Page
Content Page

Controles de
servidor

Los controles de servidor

Tienen propiedades que pueden ser establecidas
declarativamente (en la etiqueta)
o mediante programacin (en el cdigo).

Junto con la pgina, tienen eventos que los

desarrolladores pueden manejar

para ejecutar acciones especificas durante la ejecucin

de la pgina
o en respuesta a una accin del lado del cliente que
enva la pgina al servidor.

Controles de servidor
Soporte para caractersticas avanzadas: enlace
de datos, plantillas..
Se emplea el prefijo asp: junto con el atributo
runat=server.
<asp:TextBox id=text runat=server/>

Tipos de controles ASP.NET

1. Controles HTML
2. Controles estndar (web)
3. Controles de validacin
4. Controles de login
5. Controles de navegacin
6. Controles Webparts
7. Controles de datos
8. Controles de usuario

Principales controles web (estndar)

Label

Se utiliza para mostrar texto dinmico

(cambiamos sus propiedades a travs del cdigo del
servidor)

Hyperlink

Muestra un enlace a otra pgina.

TextBox

Permite introducir texto al usuario. Propiedad

Textmode valores: Single, Multiline o Password.

Image

Sirve para mostrar una imagen en la pgina web.

Button

Se usa en un Formulario web para crear un control de

tipo submit (evento OnClick) o un control de comando
tipo botn (evento OnCommand).

LinkButton

Apariencia de hipervnculo pero funciones de control

de un botn (envo formulario)

ImageButton

Muestra una imagen que maneja eventos tipo click.

Checkbox

Sirven para aadir casillas de verificacin a una pgina.

RadioButton

Crea un botn de radio individual en la pgina.

Principales controles web

DropDownList

Proporciona un buen mtodo para que los usuarios

elijan elementos de una lista en un espacio
pequeo.
Cada elemento se crea con un control ListItem.

ListBox

Propiedad SelectionMode: Single, Multiple.

Cada elemento se crea con un control ListItem.

CheckBoxList

Permite presentar una lista de opciones pudiendo

el usuario seleccionar varias.

RadioButtonList

Permite crear una lista de botones de radio de

opciones excluyentes.

Panel

Puede usarse como contenedor de otros controles.

Table, TableRow,
TableCell

Permiten crear dinmicamente una tabla mediante

programacin.

 Controles estndar
AdRotator
PlaceHolder
ImageMap
BulletedList
HiddenField
FileUpload
Wizard
Xml
MultiView
Substitution

TextBox
Pgina aspx
<form id="form1" runat="server">
<div>
<p>
Username: <asp:TextBox id="userTextBox"
TextMode="SingleLine"
Columns="30" runat="server" />
</p>
<p>
Password: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30"
runat="server" />
</p>
<p>
Comments: <asp:TextBox id="commentsTextBox"
TextMode="MultiLine" Columns="30" Rows="10
runat="server" />
</p>
</div>
</form>

Button
Pgina aspx
<form id="form1" runat="server">
<asp:Button id="BotonEnviar" Text="Enviar"
runat="server OnClick="WriteText" />
<asp:Label id="Label1" runat="server" />
</form>
Pgina aspx.cs
protected void WriteText(object sender, EventArgs
e)
{
Label1.Text = "Hola mundo";
}

ImageButton
Pgina aspx
<form id="form1" runat="server">
<div>
<asp:ImageButton id="BotonImagen" ImageUrl="~/
garfield.gif"
runat="server" OnClick="WriteText" />
<asp:Label id="Label4" runat="server" /></form>
Pgina aspx.cs
protected void WriteText(object sender, ImageClickEventArgs e)
{
Label4.Text = "Coordenadas:" + e.X + "," + e.Y;
}

Panel
Pgina aspx
<form id="form1" runat="server">
<asp:Panel id="myPanel" BackColor="Beige" Width="220" runat="server">
<p>Username: <asp:TextBox id="usernameTextBox" Columns="30
runat="server" /></p>
<p>Password: <asp:TextBox id="TextBox1 TextMode="Password"
Columns="30" runat="server" /></p>
</asp:Panel>
<asp:Button id="hideButton" Text="Hide Panel" OnClick="HidePanel
runat="server" />
<asp:Button id="showButton" Text="Show Panel" OnClick="ShowPanel
runat="server" />
</form>
Pgina aspx.cs
protected void HidePanel(object sender, EventArgs e)
{ myPanel.Visible = false; }
protected void ShowPanel(object sender, EventArgs e)
{ myPanel.Visible = true; }

Eventos de los
controles de
servidor

Modelo de eventos
En las pginas Web ASP.NET, los eventos asociados a los
controles de servidor se originan en el cliente (explorador)
pero los controla la pgina ASP.NET en el servidor Web.
La informacin del evento se captura en el cliente y se
transmite un mensaje de evento al servidor mediante un
envo HTTP.
La pgina debe interpretar el envo para determinar el evento
ocurrido y, a conAnuacin, llamar al mtodo apropiado del
cdigo del servidor para controlar dicho evento.

Enlazar eventos a mtodos

Un evento es un mensaje que enva un objeto cuando ocurre
una accin (Ej. "se ha hecho clic en un botn) . La accin
puede estar causada por la interaccin del usuario, como un
clic, o por otra lgica del programa.

En una aplicacin, se debe traducir el mensaje en una llamada
a un mtodo del cdigo.
El enlace entre el mensaje del evento y un mtodo especco
(es decir, un controlador de evento) se lleva a cabo uAlizando
un delegado de eventos.

Eventos y delegados
El objeto que provoca el evento se conoce como remitente
del evento. El objeto que captura el evento y responde a l se
denomina receptor del evento.
En las comunicaciones de eventos, el remitente del evento no
sabe qu objeto o mtodo recibir los eventos que provoca.
Se necesita un intermediario (o mecanismo de 9po puntero)
entre el origen y el receptor.
.NET Framework dene un Apo especial (Delegate) que
proporciona la funcionalidad de un puntero a funcin.

Eventos y delegados
Un delegado es una clase que puede guardar una
referencia a un mtodo.
A diferencia de otras clases, una clase de delegado
9ene un proto9po y puede guardar referencias
nicamente a los mtodos que coinciden con su
proto9po.
Por lo tanto, un delegado equivale a un puntero a
funcin con seguridad.

Por convencin, los delegados de evento de .NET
Framework Aenen dos parmetros, el origen que
provoc el evento y los datos del evento

Eventos y delegados
Los delegados de evento personalizados slo son necesarios
cuando un evento genera datos de evento. Muchos eventos,
incluidos algunos eventos de interfaz de usuario, como los clics,
no generan datos de evento.
En estos casos, es apropiado el delegado proporcionado en la
biblioteca de clases para el evento sin datos,
System.EventHandler.
delegate void EventHandler(object sender, EventArgs e);

Los delegados de evento son de mulAdifusin, lo que signica
que pueden guardar referencias a ms de un mtodo de
control de eventos.

Manejadores de eventos
El prototipo de los mtodos manejadores de
eventos deben coincidir con el prototipo del
delegado EventHandler.
Por tanto, los manejadores de evento en ASPnet
devuelven void y tienen dos parmetros:
Objeto que lanza el evento
Argumentos del evento: informacin especfica del
evento (EventArgs o tipo derivado)

Por ejemplo, para un control ImageBufon de servidor Web, el

segundo argumento es de Apo ImageClickEventArgs, que incluye
informacin sobre las coordenadas donde el usuario ha hecho clic..

Consumir eventos
En las pginas Web ASP.NET, no es necesario codicar
explcitamente delegados si el control se crea mediante declaracin
(en el marcado) en la pgina.
Para consumir eventos denidos en otra clase, se debe denir y
registrar un controlador de eventos. El controlador de eventos debe
tener la misma rma de mtodo que el delegado declarado para el
evento.
Puede registrar su controlador de eventos agregando el controlador
al evento. Una vez agregado, se llama al mtodo siempre que la
clase provoca el evento.
Suponemos el delegado de eventos:

public delegate void AlarmEventHandler(object sender,
AlarmEventArgs e);

1. DeXinir un mtodo controlador

de eventos
con la misma rma que el delegado de eventos.

public class WakeMeUp
{
// AlarmRang has the same signature as AlarmEventHandler.
public void AlarmRang(object sender, AlarmEventArgs e)
{...};
...
}

2. Crear una instancia del delegado

uAlizando una referencia al mtodo controlador de eventos.
Cuando se llama a la instancia de delegado, sta, a su vez,
llama al mtodo controlador de eventos.
// Create an instance of WakeMeUp.
WakeMeUp w = new WakeMeUp();

// InstanAate the event delegate.
AlarmEventHandler alhandler = new AlarmEventHandler
(w.AlarmRang);

3. Agregar la instancia de delegado al evento.

Cuando se provoca el evento, se llama a la instancia de
delegado y a su mtodo de controlador eventos asociado.
// InstanAate the event source.
AlarmClock clock = new AlarmClock();

// Add the delegate instance to the event.
clock.Alarm += alhandler;

Asociar el manejador al control

Escribirlo manualmente
Archivo Default.aspx
<asp:Button ID="Button1" runat="server"
onclick=EventoClick" Text="Button" />
Archivo Default.aspx.cs
protected void EventoClick(object sender,
EventArgs e)
{}

Pulsar doble click sobre un control en

vista diseo (evento por defecto)
protected void Button1_Click(object sender,
EventArgs e)

Al compilar la pgina,
ASP.NET busca un
mtodo denominado
EventoClick y conrma
que ste Aene la rma
adecuada (acepta dos
argumentos, uno de Apo
Object y otro de Apo
EventArgs). A
conAnuacin, ASP.NET
enlaza automAcamente
el evento al mtodo

Asociar el manejador al control

Seleccionar el evento de la ventana de propiedades
del control (y asociar un nombre de mtodo
manejador del evento o doble click)

Para crear un controlador de eventos en

tiempo de ejecucin con Visual C#

Normalmente esto se hace cuando se estn creando controles

mediante programacin.
Para ello se ha de crear una instancia del delegado
EventHandler, a la que se debe pasar la direccin del mtodo
al que se va a enlazar.
Despus es necesario agregar el objeto delegado a la lista de
mtodos a los que se llama cuando se produce el evento.
En el ejemplo de cdigo siguiente se muestra la manera de
enlazar el evento Click del control Bufon1 a un mtodo
denominado myEventHandler:

BuMon1.Click += new System.EventHandler
(this.myEventHandler);

Ejemplo
Bufon b = new Bufon;
b.Text = "Click";
b.Click += new System.EventHandler(BufonClick);
Placeholder1.Controls.Add(b);

Tipos de eventos
Eventos de envo (POSTBACK). Son los eventos lanzados
por controles que emiten un envo (post) al servidor de
manera inmediata para procesar el Web Form.
Por ejemplo al enviar un formulario pulsando sobre el botn de
aceptacin. Estos controles son: Bufon, Link Bufon e Image
Bufon.

Eventos de cach (NO-POSTBACK). Estos eventos se

producen en la vista y sern procesados en el servidor
cuando se enve la informacin mediante un evento de
envo.
Por ejemplo el seleccionar un elemento de una lista provoca un
cambio de estado de la misma que luego, en servidor, podremos
obtener. Controles con eventos de cach son TextBox,
DropDownList, CheckBox...

Eventos postback vs no-postback

Una pgina se carga despus de cada peticin:
fenmeno conocido como PostBack (=envo).
Eventos Postback:

causan que la informacin del formulario se enve al

servidor inmediatamente.

Eventos no-Postback (o cached):

la informacin se enva en el siguiente evento

postback.
Los eventos se guardan en una cola en el cliente hasta
que un evento postback ocurre.

Eventos postback vs no-postback (II)

Button, Link Button y Image Button causan eventos
postback.
TextBox, DropDownList, ListBox, RadioButton y
CheckBox, proveen eventos cached.

Sin embargo podemos sobrecargar este comportamiento

en los controles para poder realizar eventos postback,
cambiando la propiedad AutoPostback a true.

Conectar varios eventos con un

nico controlador de eventos
<asp:Bufon ID="Bufon1" onclick="Bufon_Click" runat="server"
Text="Bufon1" />
<br />
<asp:Bufon ID="Bufon2" onclick="Bufon_Click" runat="server"
Text="Bufon2" />

Para determinar el control que provoc el evento
private void Bufon_Click(object sender, System.EventArgs e)
{
Bufon b = (Bufon) sender;
Label1.Text = b.ID;
}

se muestra el controlador del evento Click de un control BuMon al que
llaman varios botones diferentes. El controlador muestra la propiedad ID
del botn que provoc el evento.

Eventos de pgina
Las pginas ASP.NET provocan eventos de ciclos de vida como
Init, Load, PreRender y otros.
De manera predeterminada, los eventos de pgina se pueden
enlazar a los mtodos uAlizando la convencin de
nomenclatura Page_nombreDeEvento.
Por ejemplo, con el n de crear un controlador para el evento
Load de la pgina, se puede crear un mtodo denominado
Page_Load.
En Aempo de compilacin, ASP.NET buscar los mtodos que se
basen en esta convencin de nomenclatura y realizar el enlace
automAcamente entre el evento y el mtodo.

Se puede uAlizar la convencin Page_nombreDeEvento para

cualquier evento expuesto por la clase Page.

Eventos de pgina
Las pginas ASP.NET enlazan automAcamente los eventos de
pginas a los mtodos que Aenen el nombre Page_evento.
Este enlace automAco lo congura el atributo
AutoEventWireup de la direcAva @ Page, cuyo valor se
establece de forma predeterminada en true.
Si establece AutoEventWireup en false, la pgina no busca
automAcamente los mtodos que usen la convencin de
nomenclatura Page_evento. Por tanto, se pueden crear los
mtodos con cualquier nombre y enlazarlos a los eventos de
pginas explcitamente.

Propiedad IsPostBack

Una pgina se carga despus de cada peticin: fenmeno

conocido como PostBack (=envo).
El evento Page_Load se produce en cada peticin.

Page.IsPostBack para ejecutar cdigo condicional

protected void Page_Load(object sender, EventArgs e)

{
if (IsPostBack)
{
Response.Write("<br>Page has been posted back.");
}
Importante: Los mtodos de control de eventos de pgina no
requieren ningn argumento. Estos eventos (como Load) pueden
}

aceptar los dos argumentos estndar, pero en estos argumentos no

se pasa ningn valor.

Maquetacin
con CSS

Qu es CSS?
CSS es una herramienta que permite definir la
presentacin de un documento
Permite crear un conjunto de estilos en una nica
localizacin
Las pginas a las que se aplica la misma hoja de
estilos tendrn las mismas fuentes, colores y
tamao
Proporcionan una esttica homognea en todas las
pginas de un sitio web

Tipos de hojas de estilos

Hoja de estilo externa

Se emplazan todas las reglas de estilo en una nica

hoja de estilos externa
Se enlaza esta hoja de estilos externa con todas las
pginas que vayan a tener la misma apariencia
En un formulario web:

<link rel=Stylesheet" type="text/css" href=~/

hoja.css" />

Se sita dentro del elemento HEAD

Tipos de hojas de estilos

Hoja de estilo interna

Hoja de estilo incrustada dentro de un documento

Se definen las reglas de estilo entre las etiquetas:
<style type="text/css">
a { background-color: #ff9;
color: #00f; }
</style>

Problema: Se debe reescribir en cada pgina

Se sita dentro del elemento HEAD

Tipos de hojas de estilos

Hoja de estilo en lnea

Permiten asignar un estilo a un elemento determinado,

usando el atribulo style
<a href="/" style="background-color: #ff9;
color: #00f;"> Home</a>

Selectores de estilos
En caso de utilizar hojas externas o internas cada
regla de estilo tiene un selector
Un selector es el tipo de elemento al que se va a
aplicar el estilo
Ejemplo:
a {
background-color: #ff9;
color: #00f;
}
En ASP.NET hay dos tipos de selectores:
Tipos de elementos y clases

Selector de tipo elemento

El estilo se aplica a todos los elementos del mismo
tipo
h2 { color: #369;}
Cambia de color todas las cabeceras de segundo
nivel

Selector de tipo clase

Se utiliza cuando asignamos a cada elemento una
clase determinada
<p class="pageinfo">
Copyright 2010
</p>
La hoja de estilos contendr para cada clase una
serie de caractersticas
.pageinfo
Los selectores de
{
clase van
precedidos por un .
font-family: Arial;
font-size: x-small;
}

Propiedades de estilo
Font: Tipo de fuente, tamao, color
Background: color de fondo, imagen de fondo
Block: espacio entre prrafos, lneas, palabras
Box: personalizar tablas, colores, bordes
Border: dibuja bordes alrededor de diferentes
elementos

CssClass
Asociar selector de tipo clase en Formularios Web en
ASP.NET:
<head runat="server">
<title>Probando CSS</title>
<link rel="Stylesheet" type="text/css" href=hoja.css />
</head>
<asp:TextBox ID="TextBox1" CssClass="textbox"
runat="server" />

hoja.css

.textbox { font-family:
Arial; background-color:
#0099FF; border: 1px
solid}

Maquetacin con CSS

maquetar una pagina web es pasar el diseo a cdigo HTML,
poniendo cada cosa en su lugar (una cabecera, un menu, etc.).
Hasta hace unos aos la nica manera de maquetar una pagina web
era mediante tablas HTML (<table>), pero esto Aene muchas
desventajas y limitaciones

el uso de las tablas est condicionado a la mera tabulacin de datos,

Un diseo con tablas no es exible, es decir, que no podemos
cambiar la distribucin de los elementos en la pgina, a menos que la
volvamos a hacer.
Cada Explorador renderiza de manera disAnta cada documento
HTML y con estructuras con tablas el cambio es ms notorio
Ocupa ms espacio y ms ancho de banda.
Google no indexa de igual manera las pginas con estructuras
basadas en tablas.

Por eso la tcnica de maquetacin fue evolucionando con los aos

hasta llegar al punto donde no se usan tablas, si no capas (los
famosos DIVs) a las que se le dan formato mediante CSS.

Divs
Las capas, layouts o divs son la misma cosa con disAnto
nombre, para tener un concepto mental de lo que son,
podemos imaginarlos como contenedores o bloques donde
podemos meter lo que queramos dentro (imgenes, texto,
animaciones, otro bloque, o todo al mismo 9empo) a los que
se le asigna un ancho, alto y posicin, de esta manera se van a
ir posicionando consiguiendo la estructura que queremos.

Formato a un DIV
Para darle formato a un DIV tenemos que idenAcarlo
de alguna forma, para esto existe el atributo ID, en el
pondremos el nombre del DIV para luego llamarlo
desde la hoja de esAlos, la forma de escribirlo es as:

<div id="capa1">Esta es mi primer capa!</div>
#capa1{
width:210px;
height:300px;
background-color:green;
}

Class o id?
La diferencia entre una clase (.) y un bloque (#) es que el
bloque es nico e irrepeAble en la pagina, es decir, si creamos
un esAlo de bloque "#busqueda" para mostrar el cuadro de
bsqueda no podremos usarlo otra vez en la misma pagina, en
cambio si a "#busqueda" lo converAmos en una clase
".busqueda" podremos usarlo cuantas veces queramos.

Propiedades de maquetacin
<div style = "display: table; margin-lev: auto; margin-right: auto;
width: 500px;">
<div style = "height: 45px; width: 500px;"></div>
<div style = "oat: lev; height: 75px; width: 150px;"></div>
<div style = "oat: right; height: 75px; width: 350px;"></div>
<div style = "clear: both; height: 35px; width: 500px;"></div>
</div>

Los elementos DIV pueden centrarse uAlizando los atributos margin-
le^: auto; margin-right: auto;
La propiedad oat ajusta los elementos hacia el margen indicado
(cuando tenemos capas adyacentes).
A veces necesitars tener una capa o bloque que no tenga capas a su/s
lados, para eso esta la propiedad CSS Clear. (ej el pie de pgina).
Esta propiedad se uAliza en conjunto con oat y sirve para evitar que
una capa se posicione a cualquiera de los lados

Cuidado
En las estructuras clsicas con tablas, podamos uAlizar
tamaos en porcentaje. Aunque aqu, tambin podemos
uAlizar porcentajes, el dibujado de la pgina puede no verse
como se esperaba.

Maquetar con CSS links

hfp://www.comocrearunsiAoweb.com/conceptos-basicos-css
hfp://www.webexperto.com/arAculos/art/232/por-que-
maquetar-con-estandares/
hfp://www.desarrolloweb.com/manuales/manual-css-hojas-
de-esAlo.html
hfp://www.comocrearunsiAoweb.com/maquetando-pagina-
web-css

Navegacin
entre
formularios

Navegacin tradicional
En HTML:

Elemento <a> y atributo href

<a runat=server href=Login.aspx>Regstrate aqu
</a>
La pgina Login.aspx debe estar en el mismo
directorio que la pgina que contiene el enlace
Despus de pulsar sobre el enlace se muestra la
pgina Login.aspx

En ASPx:

<asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl="~/Login.aspx">Regstrate aqu</
asp:HyperLink>

Diferentes formas de navegar

Control hipervnculo

Navega a otra pgina

Mtodo Response.Redirect

Navega a otra pgina por medio del cdigo. (Equivalente

a navegar a travs de un enlace)

Hipervnculos y Redireccin
Los hipervnculos responden a eventos click
mostrando la pgina especificada en la propiedad
NavigateURL del control.
Si quieres capturar un click en el cdigo, debes usar
los eventos de un LinkButton o ImageButton y utilizar
Response.Redirect(SiguientePagina.aspx);
Tambin podemos pasar parmetros a la nueva
pgina.

Paso de parmetros a otra pgina

Paso de parmetros en la URL.

Almacena los datos en la coleccin QueryString

Mltiples parmetros separados por &

int valor = 22;

int valor1 = 25;
Response.Redirect("Default4.aspx?par1=" + valor);
Response.Redirect("Default4.aspx?par1=" + valor +
"&par2=" + valor1);

http://localhost:49999/Default4.aspx?
par1=22&par2=25

 Limitaciones con QueryString

Los caracteres utilizados deben ser caracteres

permitidos en una URL
La informacin es visible a los usuarios en la barra del
navegador
Los usuarios pueden modificar la informacin
provocando errores inesperados
Muchos navegadores imponen un lmite en la longitud
de la URL

 Caracteres especiales:

& (para separar mltiple query strings)

+ (alternativa para representar un espacio)
# (especifica un marcador en una pgina web)

Solucin:

Utilizar los mtodos de la clase HttpServerUtility para

codificar los datos
Response.Redirect("WebForm2.aspx?par1="+
Server.UrlEncode( &hola ));

 El mtodo UrlEncode reemplaza los caracteres especiales

por secuencias de escape
http://localhost:49999/WebForm2.aspx?par1=+%26hola+

La recuperacin de datos codificados mediante el

mtodo UrlEncode con QueryString es automtica
en ASP.NET (no es necesario utilizar un mtodo
que decodifique los datos)

Objeto Request
Request: proporciona informacin sobre la

peticin HTTP del cliente que ha provocado la

carga de la pgina actual.
Informacin sobre el cliente (Request.Browser,
Request.Browser.IsMobileDevice, Request.Browser.Id)
Cookies (Request.Browser.Cookies)
Parmetros pasados a la pgina:
if (Request.QueryString["par1"] != "")
Label1.Text = Request.QueryString["par1"];