desarrolloweb, programacion iv

Programación Web

DESARROLLOWEB

PROGRAMACIÓN IV

HTMLCSSVBASP.NET

U C E N MU C E N MUniversidad Cristiana Evangelica Nuevo Milenio

En un principio la web era sencillamente una colección de páginas estáticas, documentos, etc., para su consulta o descarga. El paso inmediatamente posterior en su evolución fue la inclusión de un método para elaborar páginas dinámicas que permitieran que lo mostrado tuviese carácter dinámico (es decir, generado a partir de los datos de la petición). Este método fue conocido como CGI ("Common Gateway Interface") y definía un mecanismo mediante el que se podía pasar información entre el servidor y ciertos programas externos. Los CGIs siguen utilizándose ampliamente; la mayoría de los servidores web permiten su uso debido a su sencillez. Además, dan total libertad para elegir el lenguaje de programación que se desea emplear.

El funcionamiento de los CGIs tenía un punto débil: cada vez que se recibía una petición, el servidor debía lanzar un proceso para ejecutar el programa CGI. Como la mayoría de CGIs estaban escritos en lenguajes interpretados, como Perl o Python, o en lenguajes que requerían "run-time environment", como Java o VisualBasic, el servidor se veía sometido a una gran carga. La concurrencia de múltiples accesos al CGI podía comportar problemas graves.

Por eso se empiezan a desarrollar alternativas a los CGIs que solucionaran el problema del rendimiento. Las soluciones llegan básicamente por 2 vías: 1) se diseñan sistemas de ejecución de módulos mejor integrados con el servidor, que evitan la instanciación y ejecución de varios progrmas, y 2) se dota a los servidores un intérprete de algún lenguaje de programación que permita incluir el código en las páginas de forma que lo ejecute el servidor, reduciendo el intervalo de respuesta.

Entonces se experimenta un aumento del número de arquitecturas y lenguajes que permiten desarrollar aplicaciones web. Todas siguen alguna de estas vías. Las más útiles y las más utilizadas son las que permiten mezclar los 2 sistemas: un lenguaje integrado que permita al servidor interpretar comandos "incrustados" en las páginas HTML y, además, un sistema de ejecución de programas mejor enlazado con el servidor, que no implique los problemas de rendimiento propios de los CGIs.

La popularidad de las Aplicaciones Web se debe a que basta con tener solamente una PC, un navegador Web y acceso a la Internet. La facilidad de uso, la habilidad para actualizar y mantener aplicaciones Web sin distribuir e instalar software es otra razón de su enorme popularidad.

Una aplicación Web es aquella que los usuarios usan accediendo a un servidor Web a través de Internet o de una intranet. Esto es igual que entrar a www.mercadeo.com u otro sitio Web que se encuentra en la Internet. Las aplicaciones Web son cada día más comunes, debido a la popularidad y extensión que tiene la Internet. La facilidad para usar, actualizar y mantener aplicaciones Web, sin distribuir e instalar software, es otra razón de su popularidad. Esto sin mencionar el bajísimo costo de las mismas.

Las aplicaciones Web, por ejemplo un programa de contabilidad, generan en forma dinámica páginas en formato HTML o XHTML. Generalmente cada página Web individual es vista por el cliente como un formulario o documento estático, pero la secuencia de páginas provee de una experiencia interactiva.

INTRODUCCION

Desarrollo web 2

-Describir lo temas de desarrollo web de una manera practica y rapida.

-Presentar los lenguajes soportados para el desarrollo enfoncandonos principalmente en HTML, CSS, ASP.NET y Visual Basic que es el complemento para explotar al maximo ASP.NET.

-Presentar los principales serivicios y caracteristicas de estas tecnologia para el desarrollo web.

-Explicar como encajan ambas tecnologias a medida que vayamos avanzando en este libro.

OBJETIVOS

Desarrollo web 3

Indice

Desarrollo web 4

Conceptos Básicos y Estructura de HTML 5Partes del Documento 6Formatos de Párrafos en HTML 7Encabezados 10Formato de Texto 12Atributos de Pagina 13Enlaces en HTML 15Imagenes en HTML 18Tablas en HTML 20Formulario 27

CSS Hojas de Estilo en Cascada 41Sintaxis 44Definición de Hojas de Estilos 45Identificadores y las Clases 49Seleccion Contextual 50Especificación de estilo Para Elementos Individuales 51Formato de Elemento de Bloque 52Pseudo Clase Selector 54Tablas en CSS 55

VB.NET Microsoft Visual Studio.Net 61Declaración de variables 62Estructuras de Control 63Bucles y/o Ciclos 63Procedimientos y Funciones 64Clases en VB.Net 65

Plataforma Microsoft .NET 67Plataforma Microsoft .NET 68NET Framework 68Componentes del .NET Frameworke 69Espacios de Nombres 71

ASP.NET 2.0 73Introducción ASP.NET 74Planear un Sitio web de ASP.NET 76Requisitos 82Instalación de IIS 82Entorno desarrollador Visual Studio.NET 85Crear Formularios Web Forms con ASP.NET 86Uso de controles de Servidor 90Crear código HTML específico del navegador 91Tipos de controles de servidor 92Agregar código a un formulario Web Form con Microsoft ASP.NET 104

¿Qué son las páginas de código subyacente? 105Uso de los eventos de página 109

Acceso a datos con Microsoft ADO.NET 114Conexión a una base de datos 116Acceso a datos con DataSets. 119Utilizar un DataView 122

Administración del estado 124Tipos de administración del estado 125El archivo Global.asax 127Variables de aplicación y de sesión 129Sesiones con y sin cookies 131

HTMLLenguaje de Marcas de Hipertexto

Partes del Documento 6Formatos de Párrafos en HTML 7Encabezados 10Formato de Texto 12Atributos de Pagina 13Enlaces en HTML 15Imagenes en HTML 18Tablas en HTML 20Formularios 27

Desarrollo web 5

HTML es el lenguaje con el que se escriben las páginas web. Las paginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las paginas webs al usuario, siendo hoy en dia la interface mas extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imagenes y combinarlos a nuestro gusto.

Además, y es aqui donde reside su ventaja, el HTML nos permite la introducción de referencias a otras paginas por medio de los enlaces hipertexto.

El HTML se creo en un principio con objetivos divulgativos. No se penso que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creo sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.

Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos son los estandares del HTML. Numerosos estandares se han presentado ya.

El HTML 4.01 es el ultimo estandar a septiembre de 2001.

Esta evolucion tan anarquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccion de otras tecnologias accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos son las CSS, JavaScript u otros.

Otros de los problemas que han acompanado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al desarrollador web a, una vez creada su pagina, comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o al menos, los mas utilizados. Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamo sevidentemente otra herramienta capaz de crear la pagina en si. Un archivo HTML (una pagina) noes mas que un texto. Es por ello que para programar en HTML necesitamos un editor de textos.

Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo para nuestros fines utilizaremos la macromedia dreamweber. Hay que tener cuidado con algunos editores mas complejos como Wordpad o Microsoft Word, pues colocan su propio codigo especial al guardar las paginas y HTML es únicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores específicos para la creación de paginas web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo mas sencilla posible para poder prestar la maxima atencion a nuestro codigo y familiarizarnos lo antes posible con el.

Es importante tener claro todo ello puesto que en funcion de vuestros objetivos puede que, masque aprender HTML, resulte mas interesante aprender el uso de una aplicacion para la creacion de paginas.

INTRODUCCION A HTML

Desarrollo web 6

Sintaxis del HTML

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes:

-Una apertura de forma general <etiqueta>

-Un cierre de tipo </ etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Asi por ejemplo:

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente codigo:

<b>Esto esta en negrita</b>

El resultado Sera: Esto esta en negrita

Las etiquetas <p> y </p> definen un parrafo. Si en nuestro documento HTML escribieramos:

<p>Hola, estamos en el parrafo 1</p>

<p>Ahora hemos cambiado de parrafo</p>

El resultado seria: Hola, estamos en el parrafo 1

Ahora hemos cambiado de parrafo

Asi pues, una pagina es un archivo donde esta contenido el codigo HTML en forma de texto. Estos archivos tienen extension .html o .htm (es indiferente cual utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extension .html, por ejemplo mipagina.html

Partes de un documento HTML

Ademas de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de indole informativo como por ejemplo el titulo de nuestra pagina.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que sera donde colocaremos nuestro texto e imagenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:<html><head>Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pagina pero que son importantes para catalogarla: Titulo, palabras clave,...</head><body>

Concepto Basicos y Estuctura de HTMLP

art

e d

el D

oc

um

en

to

Desarrollo web 7

<Html><head></head>

<body>

</body></Html>

Etiquetas y contenidos del cuerpo

Parte del documento que sera mostrada por el navegador: Texto e imagenes</body></html>

Las mayúsculas o minúsculas son indiferentes al escribir etiquetas.

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacion de mayusculas y minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con nuestro HTML (XML por ejemplo).

Nuestra primera pagina

Podemos ya con estos conocimientos, y alguno que otro mas, crear nuestra primera pagina. Para ello, abrimos el editor de textos y copiamos y pegamos el siguiente texto en un nuevo documento.

<html>

<head>

<title>Cocina Para Todos</title>

</head>

<body>

<p><b>Bienvenido,</b></p>

<p>Estas en la pagina <b>Comida para Todos</b>.</p>

<p>Aqui aprenderas recetas faciles y deliciosas.</p>

</body>

</Html>

Ahora guardamos ese archivo con extension .html o .htm en tu disco duro. Para ello accedemos al menu Archivo y seleccionamos la opcion Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html.


art

e d

el D

oc

um

en

to

Desarrollo web 8

Haciendo doble clic sobre el archivo recientemente creado para visualizar los resultado en nuestro navegador que tenemos configurado por defecto.

Si ahora hacemos click con el boton derecho sobre la pagina y elegimos Ver codigo fuente (o View page source) veremos como en una ventana aparece el código de nuestra pagina. Este recurso es de extremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para la confección de páginas.

Formato de párrafos en HTMLFormatear un texto pasa por tareas tan evidentes como definir los parrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, italica...

Los parrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificacion en el interior de la etiqueta por medio de un atributo align. Un atributo no es mas que un parametro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma mas personal.

Asi, si deseasemos introducir un texto alineado a la izquierda escribiriamos:

<p align="left">Texto alineado a la izquierda</p>

El resultado seria:


art

e d

el D

oc

um

en

to

Desarrollo web 9

Concepto Basicos y Estuctura de HTML

Texto alineado a la izquierda

Para una justificación al centro:

<p align="center">Texto alineado al centro</p> que daria:

Texto alineado al centro

Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p> cuyo efecto seria:

Texto alineado a la derecha

Como vemos, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

Ejercicip práctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podemos resolver en nuestras maquinas. Simplemente queremos construir una pagina que tenga, por este orden:

2 Parrafos centrados

3 Parrafos alineados a la derecha

Un salto de linea triple

1 parrafo alineado a la izquierda

Encabezados

Existen otras etiquetas para definir parrafos especiales, formateados como titulos. Son los encabezados o Header en ingles.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados mas grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado mas pequeño.

<h1>Encabezado de nivel 1</h1>

Se vera de esta manera en la pagina:

Encabezado de nivel 1

Fo

rma

to d

e P

árr

afo

Desarrollo web 10


Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro.

<h2 align="center">Encabezado de nivel 2</h2>

Se puede ver a continuacion.

<html>

<head>

<title>Todos los encabezados</title>

</head>

<body>







</body>

</html>

Para ver los resultados en nuestros basta con copiar y pegar en nuestro blog de notas el código y luego guarda el archivo con extensión html.

Formateando el texto

Además de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy común y practico presentar texto resaltado en negrita, itálica y otros. Paralelamente el uso de índices, subíndices resulta vital para la publicación de textos científicos. Todo esto y mucho más es posible por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.

-Negrita

Podemos escribir texto en negrita incluyendolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razón de esfuerzo.

En

ca

be

za

do

s

Desarrollo web 11


Escribiendo un código de este tipo:

<b>Texto en negrita</b>

Obtenemos este resultado: Texto en negrita

-Itálica

Tambien en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco mas larga: <em> y </em>.

Un ejemplo de texto en italica:

<i>Texto en italica</i>

Que da el siguiente efecto: Texto en itálica

-Subíndices y supraíndices

Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son:

<sup> y </sup> para los supraindices

<sub> y </sub> para los subíndices

Aquí tenemos un ejemplo:

La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido.

Anidar etiquetas

Todas estas etiquetas y por supuesto el resto de las vistas y que veremos mas adelante pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes.

Asi, podemos sin ningún problema crear texto en negrita e italica embebiendo una etiqueta dentro de la otra:

<b>Esto solo esta en negrita <i>y esto en negrita e italica</i></b>

Esto nos daria: Esto sólo está en negrita y esto en negrita e itálica

Fo

rma

to d

e T

ex

to

Desarrollo web 12


Color, tamaño y tipo de letra

A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto determinado.

Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir. A continuación los atributos principales de esta etiqueta:

Atributo face: Define el tipo de letra que se va utilizar.

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografia</font>

Atributo size: Define el tamaño de la letras

<font size=4>Este texto es mas grande</font>

Atributo color: Define el color del texto a tener en cuenta.

<font color="red">Este texto esta en rojo</font>

Ejemplo

<html>

<head>

<title>Color, Tamaño y Tipo de Letra</title>

</head>

<body>

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografia</font><BR>

<font size=4>Este texto es mas grande</font><BR>

<font color="red">Este texto esta en rojo</font>

</body>

</Html>

Atributos para páginas

Las paginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pagina muy personalizado. Podemos definir atributos como el color de

Fo

rma

to d

e T

ex

to

Desarrollo web 13


fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decíamos son generales a toda la pagina.

-Atributos para fondos

bgcolor: especificamos un color de fondo para la pagina.

background: sirve para indicar la colocación de una imagen como fondo de la pagina.

Ejemplo de fondo

<body bgcolor="black">

<body background="fondo.jpg">

-Color del texto

text: este atributo sirve para asignar el color del texto de la pagina. Por defecto es el negro.

link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)

vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el color que tendran los enlaces que ya hemos visitado.

Ejemplo de color del texto

Vamos a ver una pagina donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto blanco y los enlaces amarillos, mas resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello escribiríamos la etiqueta body así:

<html>

<head>

<Title>Color del Texto</title>

</head>

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">

<p><b>Bienvenido,</b></p>

<p>Estas en la pagina <b>Comida para Todos</b>.</p>

<p>Aqui aprenderas recetas faciles y deliciosas.</p>

<P><a href=”http://www.google.org”>Aqui aprenderas obtendras recetas faciles y deliciosas.</a></p>

</body>

</html>

Atr

ibu

tos

de

Pá

gin

a

Desarrollo web 14


-Márgenes

Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las paginas, lo que es muy util para eliminar los margenes en blanco que aparecen a los lados, arriba y debajo de la pagina.

leftmargin: para indicar el margen a los lados de la pagina. Valido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la pagina. Para iexplorer.

marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados)

marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo)

<html>

<head>


<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">

<table width=100% bgcolor=ff6666><tr><td>

<h1>Hola amigos</h1>

<br>

<br>

Gracias por visitarme!

</td></tr></table>

</Body>

</html>

Esta pagina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pagina podremos ver que la tabla ocupa el espacio en la pagina sin dejar sitio para ningún tipo de margen.

Enlaces en HTML

Hasta aquí, hemos podido ver que una pagina web es un archivo HTML en el que podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos enseguida). Del mismo modo, un sitio web podrá ser considerado como el conjunto de archivos, principalmente paginas HTML e imágenes, que constituyen el contenido al que el navegante tiene acceso.

Atr

ibu

tos

de

Pá

gin

a

Desarrollo web 15


La sintaxis general de un enlace es por tanto de la forma:

<a href="url”>contenido</a>

Siendo el contenido un texto o una imagen. Es la parte de la pagina que se colocara activa y donde deberemos pulsar para acceder al enlace.

En funcion del destino los enlaces son clasicamente agrupados del siguiente modo:

Enlaces internos: los que se dirigen a otras partes dentro de la misma pagina.

Enlaces locales: los que se dirigen a otras paginas del mismo sitio web.

Enlaces remotos: los dirigidos hacia paginas de otros sitios web.

Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.

Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

-Enlaces internos

<a href="#abajo">Ir abajo</a>

El símbolo #; es el quien especifica al navegador que el enlace apunta a una sección en particular.

-Enlaces locales

Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:

<a href="archivo.html">contenido</a>

Para hacer un enlace desde index.html hacia yyy.html:

<a href="seccion1/paginas/yyy.html">contenido</a>

Para hacer un enlace desde xxx.html hacia yyy.html:

<a href="../seccion1/paginas/yyy.html">contenido</a>

Para hacer un enlace desde yyy.html hacia xxx.html:

<a href="../../seccion2/xxx.html">contenido</a>

Los enlaces locales pueden a su vez apuntar ya no a la pagina en general sino mas precisamente a una sección concreta. Este tipo de enlaces resultan ser un hibrido de interno y local. La sintaxis es de este tipo:

<a href="archivo.html#seccion">contenido</a>

En

lac

es

Desarrollo web 16


Como para los enlaces internos, en este caso hemos de marcar la sección con otro enlace del tipo:

<a name="seccion"></a>

Para acabar con los enlaces vamos a ver los ultimos 3 tipos de enlaces que habiamos senalado.

-Enlaces remotos

Son los enlaces que se dirigen hacia paginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio.

Este tipo de enlaces es muy comun y no representa ninguna dificultad. Simplemente colocamos en el atributo HREF de nuestra etiqueta <A> la URL o dirección de la pagina con la que queremos enlazar.

Será algo parecido a esto.

<a href="http://www.guiarte.com">ir a guiarte.com</a>

Solo cabe destacar que todos las direcciones web (URLs) empiezan por http://. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la web.

Otra cosa interesante es que no tenemos que enlazar con una pagina web con el protocolo http necesariamente. También podemos acceder a recursos a traves de otros protocolos como el FTP. En tal caso, las direcciones de los recursos no comenzaran por http:// sino por ftp://.

-Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección de mail determinada. Estos enlaces son muy habituales en las paginas web y resultan la manera mas rápida de ofrecer al visitante una vía para el contacto con el propietario de la pagina.

Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href. del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.

<a href="mailto:[email protected]">[email protected]</a>

-Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo senalamos aqui porque son un tipo de enlaces muy habitual y que presenta alguna complicacion para el usuario novato.

En

lac

es

Desarrollo web 17


El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la unica particularidad de que en vez de estar dirigidos hacia una pagina web esta dirigido hacia un archivo de otro tipo.

Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la pagina se escribiria un enlace asi.

<a href="mi_fichero.zip">Descarga mi_fichero.zip</a>

Si pinchamos un enlace de este tipo nuestro navegador descargara el fichero, haciendo la pregunta típica de "Que queremos hacer con el archivo. Abrirlo o guardarlo en disco".

Ejemplo:

<html>

<head>


</head>

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">

<p><b><a href="#abajo">Ir abajo</a></b></p>

<p><b><a href="http://www.google.hn">www.google.hn</a></b></p>

<p><b><a href="ftp://mi_fichero.zip">Descarga mi_fichero.zip</a></b></p>

<P><a href="mailto:[email protected]">[email protected]</a></p>

<P>

<a name="abajo">aqui es abajo</a></p>

</Body>

</html>

Imágenes en HTML

Sin duda uno de los aspectos mas vistosos y atractivos de las paginas web es el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a explicar mas fácilmente nuestra información y darle un aire mucho mas estético. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distracción para el navegante, quien tendrá mas dificultad en encontrar la información necesaria, y un mayor tiempo de carga de la pagina lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un poco impaciente.

En

lac

es

Desarrollo web 18


Sintaxis:

<img src="camino hacia el archivo">

Ejemplo práctico

<Html>

<head>


</head>

<body>

<img src="c:/REY.jpg" width="200" height="300" alt="Rey" border="3">

<br>

<br>

<img src="C:/PIÑA.jpg" width="200" height="300" alt="Piña" border="0">

<br>

<br>

<img src=”C:/REY.jpg" width="200" height="300" alt="Rey" border="0">

<br>

<br>

<img src=”C:/peces1.gif" width="56" height="42" alt="Peces” border="0">

</body>

</Html>

Para efectos de explicación los nombres de la imágenes no las veran si copian el contenido tal y como

esta aquí en este ejemplo: Reemplacen las imágenes por otras que puedan tener en su computadora

copiando exactamente la dirección donde se encuentra, en este ejemplo use un directorio local. Para un

directorio remoto utilizar de la siguiente forma:

<img src=”http://www.dibujos.com/images/REY.jpg” width=”200” align=”left” alt=”Dibujo de un Rey”>

Imá

ge

ne

s

Desarrollo web 19


Tablas en HTML

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.

En un principio nos podría parecer que las tablas son raramente utiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada.

Hoy, gran parte de los diseñadores de paginas basan su maquetacion en este tipo de artilugios. En efecto, una tabla nos permite organizar y distribuir los espacios de la manera mas optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la pagina o poner de una manera sencilla un pie de foto a una imagen.

Las tablas son definidas por las etiquetas

<table> y </table>.

Las tablas son descritas por lineas de izquierda a derecha. Cada una de estas lineas es definida por otra etiqueta y su cierre: <tr> y </tr>.

Asimismo, dentro de cada linea, habra diferentes celdas. Cada una de estas celdas sera definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas sera donde coloquemos nuestro contenido.

<html>

<head>

<Title>Tablas</title>

</head>

<Body >

<Table borde=1>

<tr>

<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>



Ta

bla

s

Desarrollo web 20


</tr>

</table>

</body>

</html>

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les incorporamos toda una batería de atributos aplicados sobre cada tipo de etiquetas que las componen.

Tablas en HTML. Atributos para filas y celdas.

Hemos visto en el capitulo anterior que las tablas estan compuestas de lineas que, a su vez, contienen celdas. Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto en negrita y centrado) y constituyen un entorno independiente del resto del documento.

Esto quiere decir que:

Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, dar forma a su contenido.

Las etiquetas situadas en el interior de la celda no modifican el resto del documento.

Las etiquetas de fuera de la celda no son tenidas en cuenta por esta.

La forma mas útil y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada que ya tendremos la oportunidad de abordar mas adelante.

Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:

Align: Justifica el texto de la celda del mismo modo que si

Ta

bla

s

Desarrollo web 21


fuese el de un parrafo.

-Valign: Podemos elegir si queremos que el texto aparezca

arriba (top), en el centro (middle) o abajo (bottom)

de la celda.

-Bgcolor: Da color a la celda o linea elegida.

-Bordercolor: Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

-background: Nos permite colocar un fondo para la celda a partir

de un enlace a una imagen.

-Height: Define la altura de la celda en pixels o porcentaje.

-Width: Define la anchura de la celda en pixels o porcentaje.

-Colspan: Expande una celda horizontalmente.

-Rowspan: Expande una celda verticalmente.

A titulo de ejemplo:

<td width="80">

Dara una anchura de 80 pixels a la celda. Sin embargo,

<td width="80%">

Dara una anchura a la celda del 80% de la anchura de la tabla.

Análogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabrá a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos diseñar. No esta de mas si la prediseñamos en papel si la complejidad es importante. El HTML resulta en general fácil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente.

<td colspan="2">

Fusionara la celda en cuestion con su vecina derecha.

Del mismo modo,

<td rowspan="2">

Ta

bla

s

Desarrollo web 22


Ejemplo

<html>

<head>

<Title>Filas y Celdas de una Tabla</title>

</head>

<body>

<table border=1>

<tr>

<td colspan="2" rowspan="2" bgcolor=”Orange”>Esta celda se ecuentra fusionada<br></td>

</tr>

<tr>



</tr>

</table>

</body>

</Html>

Tablas en HTML. Atributos de la tabla y conclusión.

Ademas de los atributos especificos de cada celda o linea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aqui aquellos que pueden parecernos en un principio importantes:

-align: Alinea horizontalmente la tabla con respecto a suentorno.

-background: Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.

-bgcolor: Da color de fondo a la tabla.

-border: Define el numero de pixels del borde principal.

-bordercolor: Define el color del borde.

-cellpadding: Define, en pixels, el espacio entre los bordes de la

Ta

bla

s

Desarrollo web 23


celda y el contenido de la misma.

-cellspacing: Define el espacio entre los bordes (en pixels).

-height: Define la altura de la tabla en pixels o porcentaje.

-width: Define la anchura de la tabla en pixels o porcentaje.

Ejemplo

<html>

<head>

<Title>Atributos de las Tablas </title>

</head>

<body>

<table width=”50%” bgcolor=”#ffff000” border=1 align=”center” cellspacing=10px cellpadding=10px>

<tr>

<td colspan="2" rowspan="2">Esta celda se ecuentra fusionada<br></td>

</tr>

<tr>



</tr>

</table>

</body>

</Html>

Tablas anidadas

Muy util también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la situación puede complicarse si el numero de tablas embebidas dentro de otras es elevado.

Vamos a ver un código de anidación de tablas. Veamos primero el resultado y luego el

Ta

bla

s

Desarrollo web 24


código, así conseguiremos entenderlo mejor.

<html>

<head>

<title>Tablas Anidadas</title>

</head>

<body>

<table cellspacing="10" cellpadding="10" border="3">

<tr>

<td align="center">

Celda de la tabla principal

</td>

<td align="center">

<table cellspacing="2" cellpadding="2" border="1">

<tr>

<td>Tabla anidada, celda 1</td>


</tr>

<tr>



</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Ta

bla

s

Desarrollo web 25


Actividades de este capitulo

Importante ahora realizar algún ejemplo de realización de una tabla un poco compleja. Apartir de las siguientes imágenes cree esa misma tablas y presentela en el explorador:

Tabla de Animales en peligro de extinción: Recrea la misma poniedo en practica el los codigos HTML que hasta ahora hemos adquirido.

Ejercicio numero 2 haga lo mismo que se le pidió en el ejercicio anterior. Ta

bla

s

Desarrollo web 26


Formularios HTML

Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la información, esencialmente mediante texto, imágenes y enlaces. Nos queda por ver de que forma podemos intercambiar información con nuestro visitante. Desde luego, este nuevo aspecto resulta primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el Web: Comprar un articulo, rellenar una encuesta, enviar un comentario al autor...

Hemos visto anteriormente que podíamos, mediante los enlaces, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátil si lo que deseamos es que el navegante nos envié una información bien precisa. Es por ello que el HTML propone otra solución mucho mas amplia: Los formularios.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas paginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.

Usando HTML podemos únicamente enviar el formulario a un correo electrónico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco mas compleja ya que tendremos que emplear otros lenguajes mas sofisticados. Por supuesto, existe otra alternativa que es la de aprender lenguajes como ASP.NET lenguaje sobre el trataremos mas pero es necesario que comprendamos primero el lenguaje HTML antes de dar ese salto.

Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta <form> debemos especificar algunos atributos:

action

Define el tipo de acción a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades:

El formulario es enviado a una dirección de correo electrónico

El formulario es enviado a un programa o script que procesa su contenido.

En el primer caso, el contenido del formulario es enviado a la direccion de correo electrónico especificada por medio de una sintaxis de este tipo:

Fo

rmu

lari

os

Desarrollo web 27


<Form action="mailto:[email protected]" ...>

Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la dirección del archivo que contiene dicho programa. La etiqueta quedaría en este caso de la siguiente forma:

<form action="direccion del archivo" ...>

La forma en la que se expresa la localización del archivo que contiene el programa es la misma que la vista para los enlaces.

Method

Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prácticos, daremos siempre el valor post.

Enctype

Se utiliza para indicar la forma en la que viajara la información que se mande por el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain". Así conseguimos que se envié el contenido del formulario como texto plano dentro del email.

Si queremos que el formulario se procese automáticamente por un programa, generalmente no utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos enctype dentro de la etiqueta <form>

Ejemplo de etiqueta <form> completa

Asi, para el caso mas habitual -el envió del formulario por correo- la etiqueta de creación del formulario tendrá el siguiente aspecto:

<form action="mailto:[email protected] (o nombre del archivo de proceso)" method="post" enctype="text/plain">

Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darán forma a nuestro formulario, las cuales serán vistas en capítulos siguientes.

Fo

rmu

lari

os

Desarrollo web 28


Elementos de Formularios.

El HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros formularios. Estas van desde la clásica caja de texto hasta la lista de opciones pasando por las cajas de validación.

Veamos en que consiste cada una de estas modalidades y como podemos implementarlas en nuestro formulario.

Texto corto

Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name.

La etiqueta es de la siguiente forma:

<input type="text" name="nombre">

De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido será llamado nombre (por ejemplo). El aspecto de este tipo de cajas es de sobra conocido:

Caja de texto

<html>

<head>

<title>Formularios</title>

</head>

<body>

<form action="prueba1.htm" method="post">

<h1>Caja de Texto</h1>

<input type="text" name="nombre">

</form>

</body>

</html>

Fo

rmu

lari

os

Desarrollo web 29


El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de formulario que usan esta misma etiqueta.

El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras o conjuntos de palabras de longitud relativamente corta.

Propiedades de la caja de texto

-size:Define el tamano de la caja en numero de caracteres.

-Maxlength: Indica el tamano maximo del texto que puede ser tomado por el formulario.

-Value: En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestion.

<input type="text" name="nombre" value="Perico Palotes">

Genera un campo de este tipo:

Texto oculto

Podemos esconder el texto escrito por medios asteriscos de manera a aportar una cierta confidencialidad. Este tipo de campos son análogos a los de texto con una sola diferencia: remplazamos el atributo type="text" por type="password":

<input type="password" name="nombre">

En este caso, podemos comprobar que al escribir dentro del campo en lugar de texto veremos asteriscos.

Estos campos son ideales para la introducción de datos confidenciales, principalmente códigos de acceso.

<html>

<head>


</head>

<body>

Fo

rmu

lari

os

Desarrollo web 30



<h1>Texto oculto</h1>

<input type="password" name="nombre">

</form>

</body>

</Html>

Texto largo

Si deseamos poner a la disposición de usuario un campo de texto donde pueda escribir cómodamente sobre un espacio compuesto de varias líneas, hemos de invocar una nueva etiqueta:

<textarea> y su cierre correspondiente.

Este tipo de campos son practicos cuando el contenido a enviar no es un nombre telefono o cualquier otro dato breve, sino mas bien, un comentario, opinion, etc.

Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que sera asemejado a una variable en los programas de proceso. Además, podemos definir las dimensiones del campo a partir de los atributos

siguientes:

Rows: Define el numero de líneas del campo de texto.

cols:Define el número de columnas del campo de texto.

La etiqueta queda por tanto de esta forma:

<textarea name="comentario" rows="10" cols="40"></textarea>

Fo

rmu

lari

os

Desarrollo web 31


<Html>

<head>


</head>

<body>


<h1>Caja Texto Largo</h1>

<textarea name="comentario" rows="10" cols="40">Puede escribir aquí tus comentarios</textarea>

</form>

</body>

</Html>

Otros elementos de formulario

Efectivamente, los textos son una manera muy práctica de hacernos llegar la información del navegante. No obstante, en muchos casos, los textos son difícilmente adaptables a programas que puedan procesarlos debidamente o bien, puede que su contenido no se ajuste al tipo de información que requerimos. Es por ello que, en determinados casos, puede resultar más efectivo proponer una elección al navegante a partir del planteamiento de una serie de opciones. Este es el caso de, por ejemplo, ofrecer una lista de países, el tipo de tarjeta de credito para un pago,...

Fo

rmu

lari

os

Desarrollo web 32

Este tipo de opciones pueden ser expresadas de diferentes formas. Veamos a continuación cuales son:

Listas de opciones

Las listas de opciones son ese tipo de menús desplegables que nos permiten elegir una (o varias) de las múltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta con su respectivo cierre: <select>

Podemos ver, a partir de estas directivas, la forma mas típica y sencilla de esta etiqueta:

<html>

<head>


</head>

<body>


<h1>Listas desplegables</h1>

<select name="estacion">

<option>Primavera</option>

<option>Verano</option>

<option>Otono</option>

<option>Invierno</option>

</select>

</form>

</body>

</Html>

Esta estructura puede verse modificada principalmente a partir de otros dos atributos:

size:Indica el número de valores mostrados de la lista. El resto pueden ser vistos por medio de la barra lateral de desplazamiento.

Múltiple:Permite la selección de más varios elementos de la lista. La elección de mas de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o

Concepto Basicos y Estuctura de HTMLF

orm

ula

rio

s

Desarrollo web 33


shift. Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable común.

Veamos cual es el efecto producido por estos dos atributos cambiando la linea:

<select name="estacion">

<html>

<head>


</head>

<body>


<h1>Listas desplegables</h1>

<select name="estacion" size="3" multiple>

<option>Primavera</option>

<option>Verano</option>

<option>Otono</option>

<option>Invierno</option>

</select>

</form>

</body>

</Html>

Botones de radio

Existe otra alternativa para plantear una elección, en este caso, obligamos al internauta a elegir únicamente una de las opciones que se le proponen.

La etiqueta empleada en este caso es <input> en la cual tendremos el atributo type ha de tomar el valor radio. Veamos un ejemplo:

<html>

<head>


Fo

rmu

lari

os

Desarrollo web 34


</head>

<body>


<h1>Botones de Radio</h1>

<input type="radio" name="estacion" value="1">Primavera

<br>

<input type="radio" name="estacion" value="2">Verano

<br>

<input type="radio" name="estacion" value="3">Otono

<br>

<input type="radio" name="estacion" value="4">Invierno

</form>

</body>

</Html>

Cajas de validación

Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestión. La sintaxis utilizada es muy similar a las vistas anteriormente:

<html>

<head>


</head>

<body>

<Form action="prueba1.htm" method="post">

Fo

rmu

lari

os

Desarrollo web 35


<h1>Cajas de Validación</h1>

<input type="checkbox" name="paella">Me gusta las baleadas

</form>

</body>

</Html>

Envio, borrado y demás en formularios HTML

Los formularios han de dar plaza no solamente a la información a tomar del usuario sino también a otra serie de funciones. Concretamente, han de permitirnos su envió mediante un botón. También puede resultar practico poder proponer un botón de borrado o bien acompañarlo de datos ocultos que puedan ayudarnos en su procesamiento.

En este capitulo, para terminar la saga de formularios, daremos a conocer los medios de instalar todas estas funciones.

botón de envío

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el navegante ha de validarlo por medio de un botón previsto a tal efecto. La construcción de dicho botón no reviste ninguna dificultad una vez familiarizados con las etiquetas input ya vistas:

<input type="submit" value="Enviar">

Como puede verse, tan solo hemos de especificar que se trata de un botón de envió

(type="submit") y hemos de definir el mensaje del botón por medio del atributo value.

Fo

rmu

lari

os

Desarrollo web 36


botón de borrado

Este botón nos permitirá borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura sintáctica es análoga a la anterior:

<input type="reset" value="Borrar">

A diferencia del botón de envió, indispensable en cualquier formulario, el botón de borrado resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy cerca del botón de envió y de distinguir claramente el uno del otro.

Ejemplos de ambos botones

<html>

<head>


</head>

<body>

<Form action="prueba1.htm" method="post">

<h1>Botones de envio y borrado</h1>

<input type="submit" value="Enviar">

<input type="reset" value="Borrar">

</form>

</body>

</Html>

Ejemplo de formulario

Con este capitulo finalizamos nuestro tema de formularios. Pasemos ahora a ejemplificar todo lo aprendido a partir de la creación de un formulario que consulta el grado de satisfacción de los usuarios de una línea de autobuses ficticia. El formulario esta construido para que envíe los datos por correo electrónico a un buzón determinado.

Vemos el formulario en esta página.

Fo

rmu

lari

os

Desarrollo web 37

Concepto Basicos y Estuctura de HTMLF

orm

ula

rio

s

Desarrollo web 38


Codigo del Fomulario anterior

<html>

<head>

<title>Formulario</title>

</head>

<body>

<Form action="mailto:[email protected]" method="post" enctype="text/plain">

Nombre <input type="text" name="nombre" size="30" maxlength="100">

<br>

Email <input type="text" name="email" size="25" maxlength="100" value="@">

<br>

Poblacion <input type="text" name="poblacion" size="20" maxlength="60">

<br>

Sexo

<br>

<input type="radio" name="sexo" value="Varon" checked> Hombre

<br>

<input type="radio" name="sexo" value="Hembra"> Mujer

<br>

<br>

Frecuencia de los viajes

<br>

<select name="utilizacion">

<option value="1">Varias veces al dia

<option value="2">Una vez al dia

<option value="3">Varias veces a la semana

<option value="4">varias veces al mes

</select>

<br>

<br>

Comentarios sobre su satisfaccion personal

<br>

<textarea cols="30" rows="7" name="comentarios"></textarea>

<br>

<br>

<input type="checkbox" name="recibir_info" checked>

Fo

rmu

lari

os

Desarrollo web 39


Deseo recibir notificacion de las novedades en las lineas de autobuses.

<br>

<br>

<input type="submit" value="Enviar formulario">

<br>

<br>

<input type="Reset" value="Borrar todo">

</form>

</body>

</html>

Actividades de este capitulo:

Cree un formulario de catálogo de libro a partir de los siguientes datos:

-Nombre: Caja Texto

-Correo: Caja Texto

-Edad: Caja Texto

-Sexo: Botones de Radio

-Libro: Debe presentar 5 libro en forma de lista desplegable

-Comentarios: Texto Lago

-Botones de envio y borrado.

Con lo visto hasta el momento de HTML estamos listo para crear nuestra propia pagina HTML poniendo en practica los conceptos básicos. El objetivo de esta breve explicación de HTML es para aquellas personas que no han tenido contacto con este tipo de programación lo cual les permitira tener una idea mas clara de lo que significa el desarrollo web.Con esto podemos seguir al siguiente apartado en donde conoceremos el CSS un lenguaje que ha venido a complementar el código HTML para hacer paginas mas atractivas y con muchas funcionalidades que facilita el trabajo mediante plantillas bien definidas y una amplia gama de codigo que enriquece nuestras paginas.

Fo

rmu

lari

os

Desarrollo web 40

CSSHojas de Estilo en Cascada

Introducción 42Sintaxis 44Definición de Hojas de Estilos 45Identificadores y las Clases 49Seleccion Contextual 50Especificación de estilo Para Elementos Individuales 51 Formato de Elemento de Bloque 52Pseudo Clase Selector 54Tablas en CSS 55

Desarrollo web 41

Conceptos Basicos de CSS

Introducción a CSS

CSS, el lenguaje de hojas de estilo usado en páginas web. Este vistazo básico pretende hacer una introducción a este lenguaje, métodos para separar estilo de contenido, etc.

Se trata de introducir los conceptos, propiedades y estilos básicos de este lenguaje para que después cada uno haga sus propios diseños.

Con la llegada del CSS no sólo estos "antiguos" métodos están "desfasados", sino que son bastante más complicados de utilizar y mucho menos accesibles (como para navegadores en modo texto, reproductores orales, robots...).

Lo ideal sería que en los lenguajes de estructuración como HTML no incluyésemos nada acerca del estilo de los elementos, sino de su estructura.

Es decir, en el documento HTML en lugar de decir "esto lo quiero a tamaño 24 y en cursiva, esto en rojo" lo mejor es estructurar el documento: "esto es un encabezado, esto una lista ordenada, esto un párrafo" sin incluír ningún elemento de diseño y presentación.

Despues, creamos un documento CSS en el que sí "diseñamos" cada parte del documento, incluyendo colores, posición, bordes y demás adornos.

Las ventajas son evidentes: un navegador o sistema en modo texto o que no soporte CSS, se quedará con el documento HTML con el contenido estructurado.

Pero los que soporten CSS podrán ver el documento con todo sus estilos, adornos, etc.

También hay más ventajas, como el hecho de poder incluír la misma hoja de estilos en varias páginas HTML, lo que es muy cómodo y útil.

De esta manera podremos —po r ejemplo— c ambiar la fuente de los párrafos de dieciocho páginas con sólo editar un archivo; cosa que sería mucho más compleja si hubiésemos usado las viejas etiquetas como <font>.

Se da por entendido que si se encuentra en este apartado es que tiene conocimientos básicos en cuanto a HTML, estructuración de contenidos, párrafos, etc.

Desarrollo web 42


El estándar CSS y navegadores

CSS es un estándarrecomendación libre del W3C ; con unas especificaciones que los navegadores que soporten CSS deberían de implementar.

Sin embargo algún navegador como Microsoft Internet Explorer no cumple con algunas de estas especificaciones y a veces hace lo que "desea hacer" en vez de lo que debería hacer según el estándar.

Es por esto por lo que no es nada recomendable diseñar CSS basándose en el resultado que se obtiene en este navegador, ya que si te fías de él probablemente estés en realidad creando unos verdaderos desastres.

Por supuesto sí es posible hacer CSSs que se vean bien tanto en el IE como en los navegadores que respetan los estándares, pero a veces hay que recurrir a "trucos" o cosas raras o no estándares.

Por tal para ver los ejemplos que haremos recomiendo usar exploradores que no se han IE por ejemplo les recomiendo usar Mozilla Firox para ver las prestaciones de este lenguaje web.

Creación y hojas de EstiloDefinición de Hojas de Estilo con la etiqueta <STYLE> Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head> ... </head>. La etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegúrate de utilizar <style> antes de <body>. Cuando use <style> podrá

especificar el atributo type para indicar que tipo de sintaxis se va a emplear. El siguiente ejemplo define una hoja de estilo que especifica que todos los títulos de nivel 4 serán en mayúsculas y azules, y todos los bloques en cursiva y rojos:

<html>

<head>

<title>CSS</title>

<head>

<style type="text/css">

h4 {text-transform: uppercase; color: blue;}

blockquote {font-style: italic; color: red;}

</style>

Desarrollo web 43


</head>

<body>

<h4>Hola Bienvenido a CSS</h4>

<blockquote>Este bloque en cursiva es rojo.<blockquote>

</body>

</Html>

Sintaxis CSSLa sintaxis de compones de lo siguiente:

-Etiqueta para definir el css: <style type="text/css"></style>

-Llave: Aqui es donde definimos los estilos css” { }”

-Selector: Puede ser cualquier etiqueta HTML o CSS “h4”

-Propiedad: Es el atributo del selector “ text-transform”

-Valor: Es le valor que le definimos a la propieda o atributo del selector “uppercase”.

-----> Etiqueta de apertura css <style type="text/css">

selector---> h4 -->llave de apertura{propiedad--->text-transform: --->valor uppercase; color: blue;}0

selector--->blockquote -->llave de apertura{font-style: italic; color: red;}

----->Etiqueta de cierre</Style>

La sintaxis básica de una hoja de estilo se define por la apertura de la etiqueta

<style type=”text/css”> y su cierre </style>. Aque existe 3 tipos de forma para dar utilizar el css las cuales mencionamos a continuación:

-Entre la cabezera HTML “<head><style type=”text/css”> </style></head>” utilizandolo de esta forma el programdor tiene que definir los estilos al principio.

-Dentro de las etiquetas HTML ejemplo: <p style="color:#000000;"></p>

-Utilizando una pagina externa con extension css escribiendo la dirección de la hoja de estilo en el cuerpo del encabezado <head></head> de la siguiente forma: <link rel="stylesheet" type="text/css" href="miEstilo.css" />

Durante la lectura iremos comprendiendo en que momento utilizamos las distintas forma de crear codigo css.

Desarrollo web 44


Definición de Hojas de Estilo

Ficheros Externos

Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y después enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo así definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio Web sin más que incluir un enlace al fichero con el estilo en cada página.

La sintaxis para definir estilos en ficheros es idéntica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta <style>. He aquí un ejemplo:

Utilizando el bloc de nota, como lo hemos hecho hasta hora, con la intención de amigarnos con el codigo. Aunque existen entornos de desarrollo web como dreamweber un potente desarrollador web en cual sacariamos mayor provecho ya que el mimos define el codigo mediante la tecnologia intellese. Pero para fine de estos concepto utilizamos el bloc de notas para adaptarno a la estructura basica del CSS. Y una vez conociedo esto podemos sacar mayor provecho a estos grandes entorno de desarrollo web.

-Abrimos el blog de nota

-Pegamos el codigo siguiente.

Sintaxis CSS

/* hoja de estilo externa estilo.html */

all.BOLDBLUE {color: blue; font-weight: bold;}

h1 {line-height: 18pt;}

p {color: yellow;}

/* fin de fichero */

-Lo guardamos con la siguiente extesion mihojaestilo.css

-Abrimos otra blog de nota y copiamos lo siguiente

<html>

<head>

<title>CSS</title>

<head>

Desarrollo web 45


<head>

<Style type="text/css">

.GREENBOLD {color: green; font-weight: bold;}

</style>

</head>

<body>

<h3 class=GREENBOLD>Este es un estilo externo</h1>

<p class=GREENBOLD>Este párrafo usa la case de estilo GREENBOLD.Se puede utilizar el atributo class

para especificar una clase de estilo para cualquier elemento HTML</p>

</body>

</Html>

Cuando se definen clases de estilo se puede especificar a qué elementos se podrán aplicar dicha clase. En el siguiente ejemplo se crea una clase de estilo amarillo que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.

<html>

<head>

<title>CSS</title>

<Head>


.amarillo {color: yellow; font-weight: bold;}

p.rojo {color: red; font-weight: bold;}

blockquote.rojo {color: red; font-weight: bold;}

</style>

</head>

<Body>

Uso de la hoja de estilo

<p class="rojo">Este párrafo es rojo.</p>

<p>Este párrafo es del color por defecto, porque no utiliza la clase rojo</p>

<blockquote class="rojo">Este bloque usa la clase rojo.</blockquote>

<h4 class="rojo">

Este título intenta usar la clase rojo, pero no le está permitido

Desarrollo web 47


</h4>

<p class="amarillo">Este párrafo es amarillo</p>

<h4 class="amarillo">

Este título es amarillo porque usa la clase amarillo

</h4>

</Body>

</Html>

Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizará la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y amarillo. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.

Ejemplo:

<p class="rojo" class="amarillo">Otro párrafo rojo.</p>

Definición de Estilos Individuales con Nombre

Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.

En el siguiente código se define una clase de estilo PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlinea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo color es azul.

<html>

<head>

<title>CSS</title>

<head>


.PRINCIPAL

{

line-height: 20pt;

font-size:15pt;

Desarrollo web 48


font-weight: bold;

color: red;

}

#AZUL1 {color: blue;}

</style>

</head>

<body>

<p class="PRINCIPAL">

Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlinea y el tamaño de la fuente son mayores de lo habitual.

</p>

<p class="PRINCIPAL" id="AZUL1">

Este párrafo es casi igual al anterior. Está en negrita y su fuente es mayor de lo habitual. Aunque usa la clase

PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1.

</p>

</body>

</Html>

Para esto usamos los identificadores y las clases.

La principal diferencia entre ellos es que los ID tienen que ser únicos en todo el documento HTML mientras que las clases pueden repetirse en varias etiquetas.

Los IDs se suelen usar mucho con etiquetas "neutras" como div y span para marcar las diferentes partes del documento y después aplicar diferentes estilos a cada una.

Una clase se define con un punto y seguido la clase ejemplo “ .colorazul {color:”#0000”;}

Un identificador se define con un numeral seguido el nombre ejemplo: “ #colorazul{color:” #0000”;}

La invocación de ambos en una etiqueta es: para las clases se utiliza e “class=nombre de la clase” y para el identificador es “ID= nombre del identificador”.

Desarrollo web 49


Uso de Criterios de Selección Contextual

Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podríamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si el texto enfatizado está en el interior de un título de tamaño 4. Se puede conseguir este nivel de control sobre la aplicación de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicará sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves.

<html>

<head>

<title>CSS</title>

<head>


h4 em {color: green;}

</style>

</head>

<body>

<h4>El <em>texto enfatizado</em> de este titulo es verde.</h4>

<p>En cambio este <em>texto enfatizado</em> no es verde.</p>

</body>

</Html>

En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los párrafos MAGENTA que estén dentro de un <div> estarán en cursiva. Además los textos dentro de <b> anidados dentro de párrafos dentro de un <div> en MAGENTA usarán una fuente grande.

<html>

<head>

<title>CSS</title>

<head>

Desarrollo web 50


<Style type="text/css">

.MAGENTA {color: magenta;}

div p.MAGENTA {font-style: italic;}

div p.MAGENTA b {font-size: large;}

</style>

</head>

<body>

<div class=MAGENTA>

<h4> Titulo h4 en MAGENTA</h4>

<p>Este párrafo debería ser magenta y cursivo. Ahora viene un <b>texto grande</b>. Conseguimos este efecto con selección

contextual</p>

</div>

<p class="MAGENTA">Este párrafo todavía es MAGENTA, pero como no está dentro de un bloque <div>, no es cursivo.</p>

</body>

</Html>

Especificación de Estilos para Elementos Individuales

De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Así es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algún cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos.

<html>

<head>

<title>CSS</title>

<head>

</head>

<body>

<p style="color: green; font-weight: bold; margin-right: 20%;

Desarrollo web 51


margin-left: 20%; border-width: 2pt; border-color: blue;">

Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene un borde azul.

</p>

<p>

Este párrafo es del color habitual, pero esta <span

style="color: red; font-style: italic;">palabra</span> es diferente al resto.

<p>

</body>

</Html>

Formato de Elementos de Bloque

En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Después se discutirá cada opción de formato en detalle. Para finalizar se miraremos su comportamiento respecto a la herencia de propiedades.

Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja puede tener características de estilo propias tales como márgenes, bordes, separadores y una imagen o color de fondo. Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. Los separadores ("padding") indican la separación entre el borde de los elementos y el contenido de los mismos. También se puede fijar la anchura de los elementos de bloque, bien mediante un valor específico, o bien

mediante un porcentaje de la anchura total del documento.

En este caso es redundante fijar los márgenes derecho o izquierdo y la anchura. Si se especifican la anchura y los dos márgenes, el valor del margen izquierdo tiene prioridad sobre los demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia máxima desde el borde derecho de elemento que lo contiene. El valor de anchura es utilizado sólo si no sobrepasa los límites de anchura del elemento que lo contiene.

El alineamiento horizontal puede ser a la izquierda, derecha o centrado. Esto se consigue usando la propiedad float en CSS. En los siguientes ejemplos se muestra el uso de márgenes, separadores, bordes, fondos y alineamiento.

Desarrollo web 52


<html>

<head>

<title>CSS</title>

<head>


p {

color: "#00000"; /* blanco */

/* márgenes */

margin-left: 20%; margin-right: 20%;

/* anchura del borde */

border-top-width: 10pt; borde-bottom-width: 10pt;

border-right-width: 5pt; border-left-width: 5pt;

/* estilo y color del borde */

border-style: outset; border-color: blue;

/* separadores */

padding-top: 10pt; padding-bottom: 10pt;

padding-right: 20pt; padding-left: 20pt;

}

h3 {

/* tamaño y peso de la fuente*/

font-size: 14pt; font-weight: bold;

background-image: url("file:///C|/naranja.png");

/* centra el titulo y le da una anchura del 90% */

width: 90%; float: center;

borde-color: green; borde-style: solid;

/* todas las partes del borde tienen la misma anchura */

borde-width: 10pt;

/* todos los separadores del borde son igual de anchos */

padding: 5%;

}

</style>

</head>

<body>

<h3>Titulo h3 con borde sólido y fondo</h3>

<p>Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.</p>

<p>Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado

Desarrollo web 53


anchos, pues de lo contrario ocuparán

demasiado espacio.</p>

</body>

</Html>

Pseudo Clase Selector

• hover: Esta pseudoclase se activa mientras el ratón está por encima del objeto.

Generalmente se aplica a enlaces y formularios.

• visited: Esta pseudoclase se activa en los enlaces que ya han sido visitados.

• link: Enlaces en estado normal (no visitados y el ratón no encima)

• active: Esta pseudoclase se define mientras el objeto está activo.

<html>

<head>

<title>CSS</title>

<head>


a { padding:3px 10px; margin:20px 10px; text-decoration:none;

display:block; width:260px;

Desarrollo web 54


border-left:1px solid dimgray; border-right:2px solid black;

border-top:1px solid dimgray; border-bottom:2px solid black; }

a:link { color:black; background-color:white; }

a:visited { color:gray; background-color:white; }

a:hover { color:white; background-color:green; }

a:active, a:focus { color:green; background-color:gold; }

</style>

</head>

<body>

<h1>Pseudo Clase Selector</h1>

<p>

<a href="http://www.google.com">a:link -- unvisited link</a>

<a href="http://www.google.com">a:visited -- visited link</a>

<a href="http://www.google.com">a:hover -- mouse hovering</a>

<a href="http://www.google.com">a:active -- visiting a link</a>

</p>

</body>

</html>

Tablas en CSS

Las tablas como las demás etiquetas también se les puede aplicar estilo con el objeto de crear uniformidad y ahorranos tener que codificar cada vez que necesitemos una tablas con las misma especificaciones en el siguiente ejemplo podra ver que solo escribimos una vez el código y como este se puede volver a utilizar para la etiqueta tabla.

<html>

<head>

<title>CSS</title>

<head>


table { width:auto; height:1px; table-layout:auto; border-collapse:collapse;

margin-left:20px; border:1px solid black; }

td, th { width:50px; height:1px; overflow:hidden; visibility:visible;

Desarrollo web 55


border:1px solid black; padding:5px; background:gold;

text-align:center; vertical-align:middle; text-indent:5px; }

</style>

</head>

<body>

<h1>Table</h1>

<h2>Simples Tablas</h2>

<table>

<tr> <th>1</th> <th>2</th> <th>3</th> <th>4 </th> <th>5 </th> <th>6 </th> </tr>

<tr> <th>7</th> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr>

</table>

<h2>Tablas con celdas y filas combinadas</h2>

<table>

<tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr>

<tr> <td>8</td> <td>9</td> <td> </td> <td> </td> <td>12</td> </tr>

</table>

</Body>

</HMTL>

Para culminar con este apartado CSS. Ya que sabemos la sitanxis y las grandes prestaciones que nos brinda este lenguaje que practicamente ha llevado a mucho desarrolladores web emigrar todos sus sitios creados con HTML a CSS por ser un lenguaje que permite con poco codigo crear sitios de gran enbergadura. Finalizaremos con la presentacion de una pagina hecha con este tipo de codificación en la cual abarcaremos todo lo visto hasta el momento. Para ver el resultado del siguiente codigo basta con solo copiar ese codigo al blog de nota y guardalo en formato HTML, luego habrimos la pagina en nuestro navegador, recomendablemente otro que no se ha IE.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Pagina hecha en css</title>


body

{

Desarrollo web 56


margin: 0;

padding: 0;

font-family: Georgia, Times, "Times New Roman", serif;

color: #000;

width: 600px;

border-right: 1px solid black;

}

#marco

{

margin: 0;

}

#cabecera

{

background-color: #CC6600;

border-bottom: 1px solid #333;

}

#cabecera h1 {

margin: 0;

padding: .5em;

color: white;

}

#columnaIzq {

float: left;

width: 160px;

margin-left: 10px;

padding-top: 1em;

}

#columnaIzq p { margin-top: 0; }

#columnaDer

{

padding-top: 1em;

margin: 0 2em 0 200px;

}

#columnDer h2 { margin-top: 0; }

#pie

{

clear: both;

Desarrollo web 57


background-color: #ccc;

padding-bottom: 1em;

border-top: 1px solid #333;

padding-left: 200px;

}

#navsite h5 {

display: none;

}

#navsite {

font-size: 0.7em;

font-weight: bold;

width: 125px; border-right: 1px solid #666; padding: 0 0 0 0; margin-bottom: 1em; font-family: Verdana, Helvetica, Arial, sans-serif;

}

#navsite ul {

list-style: none; margin: 0; padding: 0; }

#navsite ul li {

margin: 0; }

#navsite ul li a:link {

display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #369; border-right: 1px solid #69c;

border-bottom: 1px solid #369;

background-color: #036; color: #fff; text-decoration: none; width: 100%; }

html>body #navsite ul li a { width: auto; }

#navsite ul li a:hover {

border-left: 10px solid #036;

border-right: 1px solid #69c;

border-bottom: 1px solid #369; background-color: #69f; color: #fff; }

</style>

</head>

<body>

Desarrollo web 58


<div id="marco">

<div id="cabecera">

<h1>Pagina hecha con CSS</h1>

</div>

<div id="columnaIzq">

<p>

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla

</p>

<div id="navsite">

<h5>Site Navigation:</h5>

<ul>

<li><a href="/">Inicio</a></li>

<li><a href="/about/">Descargas</a></li> <li><a href="/archives/">Online</a></li>

<li><a href="/writing/">Colaboraciones</a></li>

<li><a href="/speaking/">Foros</a></li>

<li><a href="/contact/">Contactar</a></li>

</ul>

</div>

</div>

<div id="columnaDer">

<img src="punto.png" width="100%" height="200">

<h2><a href="/products/">Epsum factorial non</a></h2>

<p>Lorem ipsum dolor sit <a href="/products/">amet</a>, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.</p>

<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>

</div>

Desarrollo web 59


<div id="pie">

<p>Copyright 2003 Lorem ipsum dolor sit amet.</p>

</div>

</div>

</body>

</Html>

Actividad

-Analice el codigo y trate de encontrar la logica, apunte todo aquellos codigos que no logra entender e investiguelo.

-Si lo investigado no lo deja claro proceda a consultar a su catedratico o catedratica.

-Haga la siguiente modificaciones que se le indica a continuación:

1.Cambiar el nombre del titulo y el color de fondo

2.Reemplace el contenido que se encuentra despues del encabezado

3.Reemplace el rectangulo que se encuentra despues del menu por una inmagen

4.Reemplace el contenido y cambie el tipo de letra que se encuentra después del recuadro.

-Trate al maximo de hacer imitar esta pagina pero solo con codificación HTML sin utilizar

el CSS.

Desarrollo web 60

VB.NETMicrosoft Visual Studio.Net

Declaración de variables 62Estructuras de Control 63Bucles y/o Ciclos 63Procedimientos y Funciones 64Clases en VB.Net 65

Desarrollo web 61

Repaso de Visual Basic

Una página ASP.Net puede ser desarrollada sobre cualquier tecnología incluida en .Net Framework y Visual Studio .Net. Para indicarle al intérprete que la página utiliza Visual Basic .Net, incluimos la etiqueta mostrada arriba. Los parámetros ContentType y ResposeEncoding indican el tipo de contenido y de codificación que se enviará.

Comentarios: Los comentarios se indican, através del signo de apóstrofe (’). Los comentarios multilinea no existen, por lo que para comentar entre varias lineas, habrá que colocar un apóstrofe por cada línea de comentario.

Declaración de variables

La palabra reservada Dim permite declarar variables. Puede indicarse el tipo de dato de la variable incluyendo As [Type]. También puede definirse valores de inicialización para las variables recién declaradas.

Dim x As Integer

Dim s As String

Dim s1, s2 As String

Dim obj As New Object()

Public name As String

Dim s As String = "Hello World"

Dim i As Integer = 1

Dim a() As Double = { 3.00, 4.00, 5.00 }

Instrucciones: No se puede incluir más de una instrucción por línea.

Acceso a Propiedadades Indexadas: En Visual Basic .Net, el acceso a propiedades indexadas se realiza indicando entre paréntesis el nombre de la llave.

Dim s, value As String

s = Request.QueryString("Name")

value = Request.Cookies("Key").Value

Matrices: Generalmente, las matrices, deben ser definidas con un tamaño fijo, antes de poder ser utilizadas. Pueden definirse matrices de varias dimensiones y solamente de un tipo.

Dim a(2) As String

Desarrollo web 62


a(0) = "1"

a(1) = "2"

a(2) = "3"

Dim a(2,2) As String

a(0,0) = "1"

a(1,0) = "2"

a(2,0) = "3"

Estructuras de Control

Siempre se conserva la sintáxis de Visual Basic para la definición de estructuras de control.

If Not (Request.QueryString = Nothing)

Instrucciones…

End If

Siempre he considerado que la estructura de control Switch en Visual Basic es muy diferente a las de lenguajes como C o Java. En especial por que su definición no es Switch sino Select Case y por que no existe la instrucción Break:

Select Case FirstName

Case "John"

Instrucciones…

Case "Paul"

Instrucciones…

Case "Ringo"

Instrucciones…

Case Else

Instrucciones…

End Select

Bucles y/o Ciclos:

Dim I As Integer

For I = 0 To 2

a(I) = "test"

Desarrollo web 63


Next

While

Dim I As Integer

I = 0

Do While I

Console.WriteLine(I.ToString())

I += 1

Loop

Una estructura de bucle muy útil en la estructura For Each. Esta estructura sirve para enumerar miembros dentro de una colección, como un vector de un tipo específico de dato.

Dim S As String

For Each S In Coll

Instrucciones…

Next

Ahora, otra estructura muy importante es la estructura de control de excepciones. Anteriormente, era manejada con la instrucción On Error, pero ahora, ha sido reemplazada por la estructura Try .. Catch

Try

‘ Code that throws exceptions

Catch E As OverflowException

‘ Catch a specific exception

Catch E As Exception

‘ Catch the generic exceptions

Finally

‘ Execute some cleanup code

End Try

Procedimientos y Funciones

La programación modular es beneficiosa, por que permite fragmentar un programa complejo en varios subprogramas, permitiendo al programador, centrarse en procedimientos que ejecutan instrucciones específicas. Visual Basic .Net, no escapa de

Desarrollo web 64


La sintáxis anterior describe la definición de un procedimiento o función sin retorno de valor. En Visual Basic .Net, se declara de maneja diferente los procedimientos a las funciones.

Function StringFunction() As String

Instrucciones…

Return CStr(val)

End Function

Function ParmFunction(a As String, b As String) As String

Instrucciones…

Return CStr(A & B)

End Function

Para programadores anteriores a Visual Basic .Net, la sintáxis para la declaración de funciones en Visual Basic, difería en que el valor de retorno se indicaba igualando una variable con el nombre de la función, con el valor a devolver. Ahora, la nueva sintáxis de VB.Net, tiene el agregado de la palabra reservada Return.

Las funciones es VB.Net, se definen con la palabra reservada Function, seguida del nombre de la función. Si se reciben parámetros, estos se indican dentro de paréntesis, junto con el tipo de dato. Finalmente, se termina la definición, indicando el tipo de dato que regresará la función.

Dim s1 As String = StringFunction()

Dim s2 As String = ParmFunction("Hello", "World!")

Clases en VB.Net

Siempre será importante, la utilización de clases, que nos faciliten la tarea en asuntos rutinarios. Las clases permiten agrupar procedimientos y funciones comunes.

Imports System

Public Class ClassName

Public Sub New()

MyBase.New()

End Sub

Desarrollo web 65


‘ Procedimiento Principal

Public Shared Sub Main()

Instrucciones…

End Sub

End Class

Al igual que en Java, en VB.Net, pueden definirse clases con herencia.

Imports System

Namespace MySpace

Public Class Foo : Inherits Bar

Dim x As Integer ‘ En este caso, una propiedad

Public Sub New()

MyBase.New() ‘ Crea el objeto, utilizando New()

x = 4

End Sub

Public Sub Add(x As Integer)

Me.x = Me.x + x ’ Hace referencia a la propiedad X

End Sub

Public Function GetNum() As Integer

Return x ‘ Tambien hace referencia a X

End Function

End Class

End Namespace

Con estos finalizamos el repaso de VISUAL BASIC. Con el objeto de volverlos a familizarisar con el

leguaje ya que para sacar provecho al lenguaje ASP.NET es de vital importancia conocer Visual Basic.

Desarrollo web 66

PlataformaMicrosoft .NET

Plataforma Microsoft .NET 68NET Framework 68Componentes del .NET Frameworke 69Espacios de Nombres 71

Desarrollo web 67

¿Qué es la plataforma Microsoft .NET?

La plataforma .NET proporciona:

Un modelo de programación coherente e independiente del lenguaje para todas las capas o niveles de una aplicación.

-Una interoperabilidad transparente entre tecnologías.

-Una fácil migración desde tecnologías existentes.

-Un completo soporte de tecnologías de Internet independientes de la

plataforma y basadas en estándares, incluyendo Hypertext Transfer Protocol

(HTTP), Extensible Markup Language (XML) y Simple Object Access

Protocol (SOAP).

La plataforma .NET es un conjunto de tecnologías diseñadas para transformar Internet en una plataforma informática distribuida a escala completa.

Proporciona nuevas formas de desarrollar aplicaciones a partir de colecciones de Servicios Web. La plataforma .NET soporta totalmente la infraestructura existente de Internet, incluyendo HTTP, XML y SOAP.

.NET FrameworkEl .NET Framework se basa en un nuevo entorno de ejecución de lenguaje común (CLR - Common Language Runtime). Este motor de ejecución proporciona un conjunto de servicios comunes para los proyectos generados en Visual Studio .NET, con independencia del lenguaje. Estos servicios proporcionan bloques de desarrollo

Plataforma Microsoft .NET

Desarrollo web 68

fundamentales para aplicaciones de cualquier tipo, para todas las capas y niveles de la arquitectura de aplicaciones.

Servicios .NET Building Blocks

Los servicios .NET Building Block son servicios programables distribuidos que están disponibles tanto en modo conectado como desconectado. Un servicio puede invocarse desde un ordenador aislado no conectado a Internet, ofrecido por un servidor local dentro de una empresa, o puede ser accedido a través de Internet. Los servicios .NET Building Blocks pueden utilizarse desde cualquier plataforma que soporte el protocolo SOAP. Los servicios pueden incluir identidad, notificación y mensajería, personalización, almacenamiento esquematizado, calendario, directorio, búsqueda y distribución de software.

Visual Studio .NET

Visual Studio .NET ofrece un entorno de desarrollo de alto nivel para desarrollar aplicaciones que se ejecutan sobre el .NET Framework. Proporciona las tecnologías fundamentales para simplificar la creación, implantación y evolución constante de aplicaciones y Servicios Web seguros, escalables y de alta disponibilidad. También permite crear una nueva generación de aplicaciones basadas en Windows con numerosas y nuevas características disponibles gracias al .NET Framework.

Componentes del .NET Framework

Los componentes principales del .NET Framework son los siguientes:

-Common Language Runtime - CLR

-Biblioteca de clases del .NET Framework

-ADO.NET: datos y XML

-ASP.NET: Formularios Web y Servicios Web

-Interfaz de usuario

Common Language Runtime

El CLR (Common Language Runtime) simplifica el desarrollo de aplicaciones,

proporciona un entorno de ejecución robusto y seguro, soporta múltiples lenguajes, simplifica la implantación y administración de aplicaciones y proporciona un entorno gestionado.


Desarrollo web 69

¿Qué es un entorno gestionado?

Un entorno gestionado es aquel que proporciona servicios comunes de forma automática. Algunos ejemplos de los tipos de servicios que proporciona un entorno gestionado son el recolector de basura y la seguridad.

Biblioteca de clases del .NET Framework

La biblioteca de clases del .NET Framework

expone características del entorno

de ejecución y proporciona en una jerarquía de objetos otros servicios de alto

nivel que todo programador necesita. Esta jerarquía de objetos se denomina espacio de nombres.

Visual Basic .NET. Por ejemplo, el espacio de

nombres Collections añade numerosas posibilidades nuevas, como clasificación,

colas, pilas y matrices de tamaño automático.

La clase de sistema Threading también ofrece nuevas posibilidades a los desarrolladores de El espacio de nombres System contiene clases fundamentales y clases base que

definen tipos de datos valor y referencia comúnmente utilizados, eventos y descriptores de eventos, interfaces, atributos y procesamiento de excepciones.

Otras clases proporcionan servicios como la conversión de tipos de datos o la manipulación de parámetros de métodos, operaciones matemáticas, invocación local y remota de programas, administración de los entornos de aplicaciones y la supervisión de aplicaciones gestionadas y no gestionadas.

El espacio de nombre System.Collections proporciona listas clasificadas, tablas hash y otras formas de agrupar datos. El espacio de nombres System.IO proporciona E/S de archivos, flujos, etc. El espacio de nombres System.NET proporciona soporte de Transmission Control Protocol/Internet Protocol (TCP/IP) y sockets.

ADO.NET: Datos y XML

Espacio de nombres System.Data

El espacio de nombres System.Data está compuesto por clases que constituyen el modelo de objetos ADO.NET. A alto nivel, el modelo de objetos ADO.NET se divide en


Desarrollo web 70


dos capas: la capa conectada y la capa desconectada. El espacio de nombres System.Data incluye la clase DataSet, que representa múltiples tablas y sus relaciones. Estos conjuntos de datos son estructuras de datos completamente autocontenidas que pueden poblarse desde diversas fuentes de datos. Una posible fuente de datos podría ser XML, otra podría ser OLE DB, y una tercera fuente de datos podría ser el adaptador directo para SQL Server.

ASP.NET: Formularios Web y Servicios Web

ASP.NET es un marco de trabajo de programación basado en el Common

Language Runtime y que puede ser utilizado en un servidor para crear potentes aplicaciones Web. Los Formularios Web de ASP.NET proporcionan una forma fácil y potente de generar interfaces de usuario (IUs) Web dinámicos. Los Servicios Web de ASP.NET proporcionan las piezas para construir aplicaciones distribuidas basadas en la Web. Los Servicios Web están basados en estándares abiertos de Internet, como HTTP y XML. Podemos pensar en un Servicio Web como un componente reutilizable accesible a través de Internet, en lugar de estar limitado a clientes Windows en una red de área local.

El Common Language Runtime proporciona un soporte nativo para crear y exponer Servicios Web utilizando una abstracción de programación coherente y familiar para desarrolladores tanto de Active Server Pages (ASP) como de Visual Basic. El modelo resultante es escalable y extensible. Este modelo se basa en estándares abiertos de Internet (HTTP, XML, SOAP y SDL) y, por tanto, puede ser accedido e interpretado desde cualquier cliente o dispositivo habilitado para Internet. Algunas de las clases ASP.NET más habituales se describen en los siguientes párrafos.

Espacio de nombresEn el espacio de nombres System.Web, existen servicios como la gestión de caché, seguridad, configuración y otros que son compartidos por los Servicios Web y por el interfaz de usuario (IU) Web.

Espacio de nombres System.Web.Services

El espacio de nombres System.Web.Services gestiona los requerimientos de los

Desarrollo web 71


Servicios Web como los protocolos de transporte y el descubrimiento de

Servicios.

Espacio de nombres System.Web.UI

El espacio de nombres System.Web.UI proporciona dos clases de controles: los controles HTML y los controles Web. Los controles HTMLControl proporcionan un mapeado directo de las etiquetas HTML, como <INPUT>. Existen también otros controles WebControl más ricos que permiten estructurar controles mediante plantillas (por ejemplo, un control de rejilla).

Interfaz de usuario

Las aplicaciones Windows pueden ahora proporcionar interfaces de usuario más potentes que nunca utilizando los espacios de nombres System.Windows.Forms y System.Drawing del .NET Framework. El aspecto de los nuevos formularios Windows Forms de .NET resultará muy familiar para

los desarrolladores de Visual Basic.

Espacio de nombres System.Windows.Forms

Podemos utilizar las clases del espacio de nombres System.Windows.Forms

para crear el IU cliente. Esta clase nos permite implementar el IU de Windows estándar en nuestras aplicaciones .NET. Muchas funciones a las que anteriormente sólo podían accederse mediante llamadas a la API (Application Programming Interface) están ahora disponibles como parte de los propios

formularios, lo cual hace el desarrollo mucho más fácil y potente.

Espacio de nombres System.Drawing

El espacio de nombres System.Drawing proporciona acceso a la funcionalidad de gráficos básica de GDI+. Los espacios de nombres System.Drawing.Drawing2D, System.Drawing.Imaging y System.Drawing.Text ofrecen funcionalidades más avanzadas.

Desarrollo web 72

ASP.NET 2.0

Introducción ASP.NET 74Planear un Sitio web de ASP.NET 76Requisitos 82Instalación de IIS 82Entorno desarrollador Visual Studio.NET 85Crear Formularios Web Forms con ASP.NET 86Uso de controles de Servidor 90Crear código HTML específico del navegador 91Tipos de controles de servidor 92Agregar código a un formulario Web Form con Microsoft ASP.NET 104

¿Qué son las páginas de código subyacente? 105Uso de los eventos de página 109

Acceso a datos con Microsoft ADO.NET 114Conexión a una base de datos 116Acceso a datos con DataSets. 119Utilizar un DataView 122

Administración del estado 124Tipos de administración del estado 125El archivo Global.asax 127Variables de aplicación y de sesión 129

Desarrollo web 73

ASP .NET

¿Que es ASP.NET?

ASP.NET es un marco de programación basado en el .NET Framework que se utiliza para generar aplicaciones Web. Los formularios Web Forms ASP.NET, que forman parte de una aplicación Web ASP.NET, proporcionan un modo fácil de generar sitios Web dinámicos. ASP.NET también incluye la tecnología necesaria para generar servicios Web XML, que proporcionan los bloques básicos para construir aplicaciones distribuidas basadas en la Web.

Desarrollar aplicaciones Web ASP.NET sobre el .NET Framework es similar a desarrollar aplicaciones Windows. El componente fundamental de ASP.NET es el formulario Web Form. Un formulario Web Form es la página Web que los usuarios visualizan en un navegador. Una aplicación Web ASP.NET consta de uno o más formularios Web Form. Un Web Form es una página dinámica que puede acceder a recursos del servidor.

Por ejemplo, una página Web tradicional puede ejecutar scripts en el cliente para realizar tareas básicas. En cambio, un formulario Web Form ASP.NET también puede ejecutar código en el lado servidor para acceder a una base de datos, generar formularios Web Forms adicionales, o aprovechar la seguridad incorporada en el servidor.

Además, como un formulario Web Form ASP.NET no depende de utilizar scripts en el cliente, no depende del tipo de navegador del cliente o del sistema operativo. Esta independencia permite desarrollar un único formulario Web Form que puede ser visualizado prácticamente en todos los dispositivos que dispongan de acceso a Internet y de un navegador Web.

Debido a que ASP.NET forma parte del .NET Framework, podemos desarrollar aplicaciones Web ASP.NET en cualquier lenguaje basado en .NET.

Aplicación Web ASP.NET

Las partes de una aplicación Web ASP.NET incluyen:

-Formularios Web Forms o páginas .aspx

Los formularios Web Forms y las páginas .aspx proporcionan la interfaz de usuario para la aplicación Web.

-Páginas con código trasero

Las páginas con código trasero están asociadas a los formularios Web

Forms y contienen el código del servidor

Desarrollo web 74

ASP .NET

para el formulario Web Form.

-Archivos de configuración

Los archivos de configuración son archivos XML que definen la configuración predeterminada para la aplicación Web y para el servidor Web. Cada aplicación Web tiene un archivo de configuración Web.config. Además, cada servidor Web tiene un archivo machine.config.

-Archivo Global.asax

Los archivos Global.asax contienen el código necesario para responder a los

eventos a nivel de aplicación provocados por ASP.NET.

-Enlaces a servicios Web XML

Los enlaces a servicios Web XML permiten a la aplicación Web enviar y recibir datos de un servicio Web XML.

-Conectividad a bases de datos

La conectividad a bases de datos permite a la aplicación Web transferir datos desde y hacia fuentes de base de datos.

-Caché

El uso de caché permite a la aplicación Web devolver más rápidamente

formularios Web Forms y datos tras la primera petición.

Modelo de ejecución de ASP.NET

Cuando el cliente solicita una página Web por primera vez, se genera el siguiente conjunto de eventos:

1. El navegador cliente envía una solicitud GET HTTP al servidor.

2. El parseador ASP.NET interpreta el código fuente.

3. Si el código no se ha compilado todavía en una biblioteca de enlace

dinámico (DLL), ASP.NET invoca el compilador.

4. El CLR carga y ejecuta el código Microsoft intermediate language (MSIL).

Desarrollo web 75

ASP .NET

Cuando el usuario invoca la misma página Web por segunda vez, se genera elsiguiente conjunto de eventos:

1. El navegador cliente envía una solicitud GET HTTP al servidor.2. El CLR carga y ejecuta inmediatamente el código MSIL que ya se hacompilado durante el primer intento de acceso del usuario.

Planear un sitio web de ASP.NETAntes de crear un sitio web, es decir, antes de empezar a crear las páginas y escribir el código, siempre es útil planear el sitio. Esto puede facilitar el diseño de la apariencia total del sitio y de su navegación.

El tamaño de un sitio web a menudo puede determinar la cantidad de planeación que se debe realizar. Un pequeño sitio web de tipo folleto que simplemente proporcione información estática puede ser un sitio relativamente básico que requiera poco planeamiento. Un sitio web que tiene acceso a un almacén de datos, autentica a los usuarios y presenta restricciones de localización y accesibilidad, pueden requerir una mayor planeación. Si disponemos de un plan, ahorrará tiempo en el desarrollo y el mantenimiento del sitio.

En los temas siguientes se trata información relacionada con el sitio web en conjunto, que incluye información sobre los siguientes aspectos:

-El tipo de sitio web que selecciona. -Cómo se navega por el sitio. -Maneras de crear un aspecto y un diseño coherentes para todas las páginas del sitio. -Cómo tener acceso a los datos de un almacén de datos.

Decidir el tipo de proyecto del sitio web

El modelo de proyecto de sitio web predeterminado utiliza una estructura de directorios de archivo para definir el contenido del proyecto. En este modelo, no hay ningún archivo de proyecto y todos los archivos del directorio forman parte del proyecto.

En un proyecto de aplicación web, sin embargo, sólo forman parte del proyecto los archivos a los que se hace referencia de forma explícita en el archivo de proyecto de la solución. Estos archivos se muestran en el Explorador de soluciones y son los únicos archivos que se compilan en una compilación.

El archivo de proyecto de un proyecto de aplicación web facilita la implementación de algunos escenarios. Por ejemplo, puede subdividir una aplicación ASP.NET en varios proyectos de Visual Studio si hace referencia a los archivos en diferentes archivos de proyecto. También puede excluir fácilmente archivos del proyecto.

Desarrollo web 76

ASP .NET

Tener acceso a datos de un almacén de datos El enlace de datos de ASP.NET permite enlazar componentes con orígenes de datos y con propiedades, colecciones, expresiones y métodos simples. Esto proporciona mayor flexibilidad a la hora de utilizar datos de una base de datos u otros orígenes.

Si el sitio web tiene acceso a un almacén de datos, debe plantearse la utilización de controles de origen de datos, ya que forman parte de un modelo de datos común. Este modelo de datos separa el código de acceso a datos y el código de lógica empresarial de las páginas web que forman la capa de presentación del sitio web. Una capa de acceso a datos consta de métodos que se utilizan para tener acceso a un almacén de datos.

Una capa de lógica empresarial agrega reglas a la capa de acceso a datos, como la restricción del acceso para ver o cambiar los datos. La capa de presentación consta de páginas a las que tienen acceso los usuarios para ver y modificar los datos.

También debe considerar si el sitio web debe utilizar datos en memoria (almacenados en memoria caché). Si una parte significativa de los datos de aplicación no cambia con frecuencia y es común entre diferentes sesiones o usuarios, puede mantener los datos en memoria en el servidor web. De esta forma puede reducir el número de solicitudes a la base de datos y acelerar las interacciones del usuario. Para crear una base de datos en memoria, se usa la clase DataSet. Otro aspecto útil del objeto DataSet es que permite a una aplicación introducir subconjuntos de datos de uno o más orígenes de datos en el espacio de la aplicación.

Navegación en sitios Cuando un sitio crece y cuando se mueven sus páginas, rápidamente puede hacerse complicado administrar todos los vínculos. La navegación del sitio de ASP.NET consta de clases y controles de servidor que permiten proporcionar a los usuarios una manera coherente de navegar en el sitio. Puede almacenar los vínculos a todas las páginas en una ubicación central (normalmente un archivo XML). Puede representar esos vínculos en listas o menús de navegación en cada página incluyendo un controlSiteMapDataSource para leer información del sitio.Una parte clave de la navegación del sitio de ASP.NET es el proveedor del mapa del sitio. Ésta es una clase que se utiliza con un origen de datos del mapa del sitio y expone la información de navegación.

Por ejemplo, el proveedor del mapa del sitio de ASP.NET obtiene los datos de mapa del sitio de un archivo XML que se denomina Web.sitemap y comunica estos datos directamente al control de servidor web SiteMapPath.

Definir una apariencia homogénea del sitio web Varias características de ASP.NET ayudan a crear y mantener un aspecto y un diseño homogéneos del sitio web, como los temas de ASP.NET y las páginas maestras de ASP.NET. Estas características se pueden utilizar en las primeras fases del proceso de desarrollo para proporcionar un aspecto homogéneo del sitio web.

Desarrollo web 77

ASP .NET

Los temas de ASP.NET definen el aspecto de páginas y controles en el sitio web. Un tema de ASP.NET puede incluir archivos de máscara, que definen valores de propiedad para los controles de servidor web de ASP.NET. También puede incluir archivos de hoja de estilos en cascada (archivos .css) y gráficos. Cuando aplica un tema, puede dar a las páginas del sitio web un aspecto más uniforme. Al crear un tema o un conjunto de temas para un sitio en las primeras fases del proceso de desarrollo, puede aplicar estos temas a cada nueva página que crea.

Las páginas maestras de ASP.NET permiten crear un diseño de página (una página maestra) que se puede aplicar en páginas seleccionadas (páginas de contenido) del sitio web. Las páginas maestras pueden simplificar en gran medida la tarea de crear un aspecto coherente para el sitio. También se pueden anidar páginas principales. Por ejemplo, puede utilizar páginas maestras anidadas para crear un diseño maestro del sitio completo y otro diseño maestro para secciones individuales de un sitio. También puede utilizar páginas maestras con temas. . Utilizar características de administración de estados HTTP es un protocolo sin estado. Cada solicitud se atiende a medida que se recibe y, una vez procesada, los datos se descartan. Los estados no se mantienen entre las diferentes solicitudes, aunque procedan del mismo cliente. Sin embargo, en la mayoría de las aplicaciones web, resulta útil mantener el estado entre las distintas solicitudes. ASP.NET proporciona funcionalidad de administración de estado intrínseca que permite almacenar información entre las solicitudes de página, como la información de clientes o el contenido del carro de la compra. Puede guardar y administrar información específica de la aplicación, específica de la sesión, específica de la página, específica del usuario y definida por el desarrollador. ASP.NET dispone de varios métodos de administración de estados que se pueden seleccionar, entre los que se incluyen la utilización de cookies, el estado de vista, el estado de sesión, el estado de aplicación y las propiedades de perfil. Esta información puede ser independiente de cualquier control de la página, Al planear un sitio web, debe considerar qué métodos de administración de estados necesitará.

Almacenar datos en memoria caché para aumentar el rendimiento A menudo, puede aumentar el rendimiento de un sitio web si almacena en memoria los datos a los que se tiene acceso con más frecuencia y cuya creación requiere un tiempo de procesamiento significativo. Por ejemplo, si la aplicación procesa grandes cantidades de datos utilizando una lógica compleja y, a continuación, los devuelve en un formato de informe, resulta eficiente evitar la creación de dicho informe cada vez que un usuario lo solicita. De manera similar, si la aplicación incluye una página que procesa datos complejos pero que no se actualiza frecuentemente, no resulta eficiente que el servidor vuelva a crear dicha página en cada solicitud. La caché de ASP.NET es una utilidad de la memoria caché de uso general para los sitios web. Proporciona una interfaz simple para almacenar en memoria caché y una interfaz

Desarrollo web 78

ASP .NET

más avanzada que expone servicios de expiración y de dependencia de cambios. Para ayudarle a aumentar el rendimiento de la aplicación en estas situaciones, ASP.NET proporciona dos mecanismos de almacenamiento en caché. El primero es el almacenamiento en caché de aplicaciones, que permite almacenar en caché los datos que se generan, como un objeto DataSet o un objeto de negocios de informe personalizado.

El segundo es el almacenamiento en caché de los resultados de las páginas, que permite guardar los resultados del procesamiento de páginas y reutilizarlo, en lugar de volver a procesar la página cada vez que un usuario la solicite de nuevo. Si el diseño del sitio web tiene en cuenta el almacenamiento en caché de páginas determinadas, puede crear un sitio web más eficaz.

Infraestructura de seguridad -Además de las características de seguridad de .NET Framework, ASP.NET proporciona una infraestructura de seguridad para autenticar y autorizar el acceso de los usuarios, así como para realizar otras tareas relacionadas con la seguridad. Puede autenticar los usuarios mediante la autenticación de Windows que proporciona IIS. También puede administrar la autenticación mediante la autenticación de formularios de ASP.NET y la pertenencia de ASP.NET. Además, puede administrar la autorización para el acceso a los recursos de la aplicación web mediante grupos de Windows o bien mediante el uso de una base de datos de funciones personalizada y las funciones de ASP.NET. Resulta fácil quitar, agregar o reemplazar estos esquemas dependiendo de las necesidades de la aplicación.

ASP.NET siempre se ejecuta con una identidad particular de Windows de modo que puede asegurar su aplicación utilizando capacidades de Windows como las listas de control de acceso (ACL) del sistema de archivos NTFS y los permisos de la base de datos.

Otras consideraciones Antes de codificar un sitio web, también debe tener en cuenta los temas de esta sección. Si incorpora la información de estos temas en la planeación, puede ahorrar tiempo y conseguir un sitio conforme a las normas actuales de web.

AccesibilidadLa programación de accesibilidad es el proceso que se encarga de diseñar y desarrollar aplicaciones que funcionen con el sistema operativo de un equipo para adaptarse a deficiencias específicas, como por ejemplo, una limitación de movimiento o problemas de visión. ASP.NET puede ayudarle a crear aplicaciones Web con un acceso más fácil para personas con discapacidades. Las aplicaciones Web accesibles permiten utilizar tecnologías de ayuda, como lectores de pantalla, para trabajar con páginas Web. Las aplicaciones Web accesibles ofrecen las ventajas siguientes:

Desarrollo web 79

ASP .NET

-Pueden utilizarlas un mayor número de personas. -Implican principios de diseño que con frecuencia benefician a todos los usuarios, no sólo a los que tienen discapacidades. -Cumplen los requisitos de muchas instituciones en el sentido de que todas las aplicaciones Web sean accesibles.

El conocimiento de los consejos para la accesibilidad y de cómo puede ayudarle ASP.NET a seguirlos le permitirán crear aplicaciones con las que las personas que tienen discapacidades tendrán la posibilidad de interaccionar con mayor facilidad. En la mayoría de las ocasiones, los controles ASP.NET representan marcado que crea páginas que cumplen las normas de accesibilidad. También pueden exponer propiedades que puede establecer de forma que la página cumpla los criterios de accesibilidad. Sin embargo, hay veces en que los controles ASP.NET representan resultados que no cumplen con los estándares de accesibilidad.

Globalización y localizaciónLa globalización es el proceso mediante el cual se diseñan y desarrollan aplicaciones que pueden funcionar con diversas referencias culturales. Localización es el proceso mediante el cual se personaliza una aplicación para una referencia cultural y configuración regional determinadas. Si crea páginas web que leerán personas que hablan idiomas diferentes, debe permitir que los lectores vean las páginas en su propio idioma. ASP.NET permite crear una página que puede obtener contenido y otros datos basándose en la configuración de idioma preferido del explorador o en la elección explícita del idioma por parte del usuario. Este contenido y otros datos se denominan recursos; los datos de este tipo se pueden almacenar en archivos de recursos o en otros orígenes. En la página Web ASP.NET, configure controles para obtener los valores de sus propiedades de los recursos. En tiempo de ejecución, las expresiones de recursos se reemplazan con recursos del archivo de recursos adecuado.

Generar páginas individuales y precompilarLa generación de una página o de un sitio Web forma parte del desarrollo de un sitio, y una de sus finalidades es ayudar a encontrar los errores en tiempo de compilación que pueden producirse en cualquier parte del sitio. Aunque el proceso de compilación compila las páginas, no genera un ensamblado que se pueda implementar.

Se puede implementar un sitio sin compilarlo copiando todos los archivos del sitio web en un servidor de producción. Cuando los usuarios solicitan páginas del servidor de producción, ASP.NET compila dinámicamente el sitio, realizando de hecho los mismos pasos que el proceso de compilación realiza en Visual Studio. ASP.NET almacena en caché los resultados que se obtienen para que las páginas no se tengan que volver a compilar con cada solicitud. Si desea compilar el sitio en ensamblados y otros archivos que se puedan implementar, puede publicar el sitio. El proceso de publicación realiza los mismos pasos de compilación que el proceso de generación, pero guarda los resultados en una carpeta y

Desarrollo web 80

ASP .NET

en subcarpetas que, a su vez, se pueden implementar en el servidor de producción.

Desarrollo web 81

ASP .NET

Requisitos previo a la continuación de esta lectura

El alumno y el catedrático debe contar con lo siguiente:

-Procesador Pentium 4 o superiores-Memoria mínima 256 MG-Sistema operativo Windows XP Service Pack 2.0-Microsoft Visual Estudio 2005 o 2003-Servidor ISS para correr localmente nuestra pagina

Nota: Por lo general al instalar Microsoft Visual Estudio.Net no es necesario instalar el servidor ISS pero siempre es necesario, si queremos correr nuestra aplicación fuera del entorno desarrollador Net. Ademas el Net.Framewok se instala con Microsoft Visual Estudio 2005 o 2003

Instalación de IISInstalación desde el CD de WindowsInsertamos el CD, y vamos a Instalación de Componentes Opcionales de Windowso bien ..

Instalación desde el Panel de ControlVamos al Panel de Control (con Inicio, Configuración, Panel de Control, o Mi PC, Panel de Control)

Luego Agregar Quitar Programas y Agregar Quitar Componentes de Windows

Desarrollo web 82

ASP .NET

En la ventana de Componentes Adicionales de Windows, debemos elegir Servicios de Internet Information Server, y le damos en Detalle.

Fuimos a Detalle, para asegurarnos de marcar todos los elementos, de forma que no tengamos inconvenientes de faltantes cuando avancemos con ASP y/o ASP.NET

Desarrollo web 83

ASP .NET

Finalmente, salimos con Aceptar de la ventana de Servicios de IIS, y nuevamente Aceptar en la ventana de Componentes de Windows, y cerramos el Panel de ControlCon estos sencillos pasos estaría listo nuestro Servidor Local de Paginas Web's, soportando ASP y ASP.NET

En nuestro disco duro, la carpeta por defecto sera c:\inetpub\wwwroot que equivale a Http://localhostHagamos ahora nuestro primer y sencillo ASP para comprobar el funcionamiento de nuestro Servidor Web Local:-Vamos a Inicio-Ejecutar-escribimos notepad c:\inetpub\wwwroot\index.asp-le diremos que queremos crear un archivo (ya que no existe)y adentro escribimos<%Response.Write("Nuestro Primer ASP.net")%>-Y cerramos el Block de Notas, guardando el archivo-Luego lo abrimos

Desarrollo web 84

Caja de Herramientas

Menu

Propiedades

Explorador de Soluciones

Escenario

Menu de Diseño, Codigo HTML

Pestañas aspx, aspx.vb

ASP .NET

Entorno desarrolladorVisual Studio.NET

Sobre este escenario trabajáremos durante este periodo. El entorno desarrollador cuenta con una serie de panales pero lo mas usados son los que están viendo en la imagen superior. Los demás panales los pueden ver solo basta con entrar a la aplicación y darse un vistazo para ambientarse a este entorno.

Desarrollo web 85

ASP .NET

Crear formularios Web Forms conASP.NET

Estudiaremos cómo crear y poblar formularios Web Forms. Los formularios Web Forms son páginas Web programables que sirven como interfaz de usuario (IU) para un proyecto de aplicación Web utilizando ASP.NET. Un formulario Web Form presenta información al usuario visualizable en cualquier tipo de navegador, e implementa lógica de aplicación utilizando código ejecutable en el servidor

Los formularios Web Forms están formados por una combinación de HTML, código y controles que se ejecutan en un servidor Web ejecutando Microsoft Internet Information Services (IIS). Los formularios Web Forms muestran una interfaz de usuario que genera HTML y que se envía al navegador, mientras que el código de soporte y los controles que la componen permanecen en el servidor Web. Esta división entre el interfaz en el cliente y el código en el servidor es una importante diferencia entre los formularios Web Forms y las páginas Web tradicionales. Mientras una página Web tradicional requiere que todo el código se envíe y se procese en el navegador, los formularios Web Forms únicamente necesitan enviar al navegador los controles de la interfaz, y el proceso de laspáginas se mantiene en el servidor. Esta división entre IU y código aumenta el número de navegadores soportados e incrementa la seguridad y funcionalidad de la página Web.

Extensión .aspx -Atributos de página -Directiva @ Page -Atributos de cuerpo -Atributos de formulario

<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb"SmartNavigation="true"%><html><body ms_positioning="GridLayout"><form id="Form1" method="post" runat="server"></form></Body>

Extensión .aspxLos formularios Web Forms se denominan habitualmente páginas ASP.NET o páginas ASPX. Los formularios Web Forms tienen una extensión .aspx y funcionan como contenedores para el texto y los controles que deseamos mostrar en el navegador.

Desarrollo web 86

ASP .NET

Atributos de la páginaLas funciones de un formulario Web Form están definidas por tres niveles de atributos. Los atributos de página definen las funciones globales, los atributos de cuerpo definen cómo se mostrará una página y los atributos de formulario definen cómo se procesarán los grupos de controles.

La etiqueta <@Page> define atributos específicos de la página que utiliza el parseador de páginas ASP.NET y el compilador. Únicamente podemos incluir una etiqueta <@ Page> por archivo .aspx. Los siguientes ejemplos son etiquetas <@ Page> típicas para Microsoft Visual Basic® .NET y para Microsoft Visual C#™ .NET:

Visual Basic .NET<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" SmartNavigation="true" %>

Los atributos de una etiqueta <@ Page> incluyen:

-LanguageEl atributo Language define el lenguaje en el que está escrito el script de lapágina Web. Algunos de los valores de este atributo son: vb, c# y Jscript.

-Página CodebehindEl atributo de página Codebehind identifica la página de código subyacente que tiene la lógica que soporta el formulario Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, también crea una página de código subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs.

-SmartNavigationEl atributo SmartNavigation de ASP.NET permite al navegador actualizar únicamente las secciones del formulario que han cambiado. Las ventajas de SmartNavigation son que la pantalla no parpadea mientras se actualiza; en lugar de ello, se mantiene la posición de desplazamiento y se mantiene la "última página" en el historial. Smartnavigation únicamente está disponible para los usuarios con Microsoft Internet Explorer 5 o superior.

Atributos del cuerpoLos atributos de la etiqueta <Body> definen el aspecto de los objetos que semuestran en el navegador del cliente. La siguiente es una etiqueta <Body>Típica:

<body ms_positioning="GridLayout">

Los atributos de una etiqueta <Body> incluyen:

Desarrollo web 87

ASP .NET

-PageLayoutEl atributo pageLayout (etiquetado como ms_positioning) determina cómo se posicionan los controles y el texto en la página. Existen dos opciones para pageLayout:

• FlowLayoutEn FlowLayout, el texto, las imágenes y los controles fluyen por la pantalla, dependiendo del ancho de la ventana del navegador.

• GridLayoutEn GridLayout, los campos de texto, las imágenes y los controles de una página están fijados por coordinadas absolutas. GridLayout es el valor de pageLayout predeterminado para Visual Studio .NET. El siguiente código de ejemplo muestra cómo implementar GridLayout y situar un cuadro de texto:

<body ms_positioning="GridLayout"><form id="Form1" method="post" runat="server">

<asp:textbox id="txtField1" style="Z-INDEX: 101;LEFT: 65px; POSITION: absolute; TOP: 98px"runat="server" Height="26px" Width="194px">

</asp:textbox></form></Body>

Atributos del formulario

La etiqueta <Form> define cómo se procesarán los grupos de controles. La etiqueta <Form> es diferente del término Web Form utilizado para definir la página Web completa. Los atributos de la etiqueta <Form> definen cómo se procesarán los controles. Aunque podemos tener muchos formularios HTML en una página, únicamente podemos tener un formulario del lado del servidor en una página .aspx.

El siguiente ejemplo es de una etiqueta <Form> típica:

<form id="Form1" method="post" runat="server">...</Form>

Los atributos de una etiqueta <Form> incluyen:

-MethodEl atributo Method identifica el método para enviar valores de control deretorno al servidor. Las opciones de este atributo son:

• PostLos datos se pasan en pares nombre/valor dentro del cuerpo de la

Desarrollo web 88

ASP .NET

petición HTTP (Hypertext Transfer Protocol).• GetLos datos se pasan en una cadena de consulta.

-RunatUna de las principales características de un formulario Web Form es que los controles se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique información de control de retorno a la página ASP.NET en el servidor donde se ejecuta el código de soporte. Si el atributo runat no está establecido en "server", el formulario funciona como un formulario HTML normal.

Ejemplo con Visual Basic .NET

<%@Page Language="vb" AutoEventWireup="false"Codebehind="WebForm1.aspx.vb"Inherits="WebApplication1.WebForm1"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><Title>WebForm1</title>

<meta name="GENERATOR" content="Microsoft VisualStudio.NET 7.1"><meta name="CODE_LANGUAGE" content="Visual Basic 7.1"><meta name="vs_defaultClientScript" content="JavaScript"><meta name="vs_targetSchema"Content="http://schemas.microsoft.com/intellisense/ie5">

</head><body MS_POSITIONING="GridLayout">

<form id="Form1" method="post" runat="server">' HTML y controles aquí

</Form></body></Html>

Aplicaciones Web nuevasCuando creamos un nuevo proyecto en Visual Studio .NET, se incluye automáticamente en el proyecto un formulario Web Form predeterminado denominado WebForm1.aspx.

Crear un nuevo proyecto de aplicación Web ASP.NET y un formularioWeb Form predeterminado

1. En Visual Studio .NET, en la Página de inicio, hacer clic en Nuevoproyecto.

Desarrollo web 89

ASP .NET

2. En el cuadro de diálogo Nuevo proyecto, hacer clic en Aplicación WebASP.NET, escribir el nombre del proyecto en el campo Ubicación y hacer clic en Aceptar.

Visual Studio .NET crea una nueva aplicación Web y un formulario Web Form predeterminado denominado WebForm1.aspx.

Crear formularios Web Forms adicionalesSi estamos expandiendo un proyecto existente, podemos utilizar el Explorador de soluciones para agregar rápidamente formularios Web Forms adicionales.

- Agregar formularios Web Forms adicionales a un proyecto de aplicación Web

1. En la ventana del Explorador de soluciones, hacer clic con el botón derecho en el nombre del proyecto, seleccionar Agregar, y hacer clic en Agregar formulario Web Form. Se abrirá el cuadro de diálogo Agregar nuevo elemento - NombreProyecto.

2. En el cuadro de diálogo Agregar nuevo elemento - NombreProyecto,cambiar el nombre del formulario Web Form, y hacer clic en Abrir. Se creará un nuevo formulario Web Form y se agregará al proyecto.

Uso de controles de Servidor

Estudiaremos cómo utilizar controles de servidor ASP.NET,como botones, cuadros de texto y listas desplegables. Estos controles de servidor son diferentes de los controles HTML en los que la lógica de soporte se ejecuta en el servidor y no en el navegador del usuario.

¿Qué es un control de servidor?

Los controles de servidor ASP.NET son componentes que se ejecutan en el servidor y encapsulan la IU y demás funcionalidades relacionadas. Los controles de servidor se utilizan en páginas ASP.NET y en las clases de código subyacente. Los controles de servidor incluyen botones, cuadros de texto y listas desplegables. El siguiente ejemplo es el de un control de servidor Button:

<asp:Button id="Button1" runat="server" Text="Submit" />

Runat=“server”Los controles de servidor tienen un atributo runat="server", el mismo atributo que los formularios Web Forms. Esto significa que la lógica del control se ejecuta en el servidor y no en el navegador del usuario. Los controles de servidor se diferencian de los controles HTML en que éstos últimos únicamente se ejecutan en el navegador del cliente y no realizan ninguna acción en el servidor.

Desarrollo web 90

ASP .NET

Funcionalidad incluidaLa funcionalidad de un control es lo que se produce cuando el usuario hace clicen un botón o en un cuadro de lista. A estos procesos se denominan procedimientos de eventos. Como programadores del formulario Web Form, debemos determinar los procedimientos de eventos asociados a cada control de servidor.

Modelo de objetos común

En ASP.NET, los controles de servidor se basan en un modelo de objetos común, y por tanto, comparten varios atributos entre sí. Por ejemplo, cuando deseamos establecer el color de fondo de un control, siempre utilizamos el mismo atributo BackColor, independientemente delcontrol. El código HTML siguiente del botón de un control de servidor Webmuestra algunos de los atributos típicos de un control de servidor:

Crear código HTML específico del navegador

Cuando un navegador interpreta una página, los controles de servidor Web determinan el tipo de navegador que solicita la página, y envía el código HTML adecuado.

Por ejemplo, si el navegador soporta scripting de cliente, como Internet Explorer versión 4.0 o posterior, los controles generan scripts de cliente para implementar su funcionalidad. Sin embargo, si el navegador no soporta scripting de cliente, los controles crean código del lado del servidor y requieren más viajes de ida y vuelta al servidor para obtener el mismo comportamiento.

El siguiente ejemplo es el código HTML de ASP.NET en un formulario Web Form que deberíamos escribir para crear un cuadro de texto con el texto predeterminado: "Introduzca su nombre de usuario”

<asp:TextBox id="TextBox1" runat="server" Width="238px" Height="25px">Introduzca su nombre de usuario</asp:TextBox>

Cuando un usuario con Internet Explorer 6 accede a esta página, el CLR crea el siguiente código HTML personalizado para Internet Explorer 6:

<input name="TextBox1" type="text" value="Introduzca su nombrede usuario" id="TextBox1" style="height:25px;width:238px" />

Como el control de servidor crea código HTML personalizado en función de lascaracterísticas disponibles en el navegador del cliente, podemos escribir códigopara las últimas versiones de navegadores sin tener que preocuparnos de que losusuarios que no estén actualizados puedan ser bloqueados por errores del

Desarrollo web 91

ASP .NET

Tipos de controles de servidor

Existen numerosos tipos de controles de servidor disponibles en ASP.NET. Algunos controles de servidor se parecen mucho a los controles HTML tradicionales, mientras que otros son nuevos en ASP.NET. Esta amplia variedad de controles nos permite personalizar nuestro formulario Web Form para que se adapte a la aplicación que estamos creando.

Por defecto, el servidor no tiene disponibles los elementos HTML de una página de un formulario Web Form; los elementos HTML son tratados como texto opaco que pasa a través del navegador. Sin embargo, al agregar el atributo runat="server" se convierten los elementos HTML en controles de servidor HTML, exponiéndolos por tanto como elementos que podemos programar con código del lado del servidor.

Controles de servidor Web Los controles de servidor Web no sólo incluyen controles de tipo formulario, como botones y cuadros de texto, sino también controles con funcionalidad especial, como el control calendario. Los controles de servidor Web son más abstractos que los controles de servidor HTML, porque su modelo de objetos no refleja necesariamente la sintaxis HTML.

Los controles de servidor Web se clasifican como:

-Controles intrínsecosLos controles intrínsecos concuerdan con los sencillos elementos HTML, como botones o cajas de listas. Utilizamos estos controles del mismo modo que utilizamos los controles de servidor HTML.

-Controles de validaciónLos controles de validación incorporan lógica que permite verificar la entrada de datos de un usuario. Para probar la entrada de un usuario, adjuntamos un control de validación al control de entrada y especificamos las condiciones de entrada de datos de usuario correctas. Módulo “Validar la entrada de datos de usuario”.

-Controles ricos estándarLos controles estándar son controles complejos que incluyen múltiples funciones. Ejemplos de controles estándar incluyen el control AdRotator, que se utiliza para mostrar una secuencia de anuncios o el control Calendar, que proporciona un calendario de citas.

-Controles enlazados a listasLos controles enlazados a listas pueden mostrar listas de datos en una página ASP.NET. Estos controles nos permiten mostrar, reformatear, clasificar y editar datos.

Desarrollo web 92

ASP .NET

Ejemplo de controles equivalentes

Este ejemplo muestra el código HTML de tres controles de tipo botón: un botón HTML, un botón de control de servidor HTML y un botón de control de servidor Web. Todos los controles botón parecen idénticos en el navegador del usuario. El botón HTML únicamente puede invocar eventos del lado del cliente, mientras que el botón de control de servidor HTML y el botón de control de servidor Web producen eventos del lado del servidor.

-El siguiente es el código de un control de botón HTML:<INPUT type="button" value="HTML Button">

-Si agregamos el atributo runat="server" el control de botón HTML anterior se convierte en un control de servidor HTML que se ejecutará en el servidor. Además del atributo runat="server", también debemos agregar un atributo id para que el control funcione como un control de servidor. El botón de control de servidor HTML se muestra en el siguiente ejemplo:

<INPUT type="button" value="HTML Server Control" id="button1" runat="server">

-El botón de control de servidor Web utiliza código HTML de ASP.NET:<asp:Button id="Button1" runat="server" Text="Web control"/>

Guardar el estado de la vistaUno de los retos de los sitios Web es resolver el almacenamiento del estado delos controles (configuración o entrada de datos del usuario) en una página Webmientras el código HTML viaja entre el cliente y el servidor. Como con cualquier tecnología basada en HTTP, los formularios Web Forms no tienen estado, lo que significa que el servidor no conserva ninguna información sobre las peticiones anteriores del cliente.

Los formularios Web Forms ASP.NET gestionan este problema de almacenamiento del estado del control de servidor Web agregando un control oculto denominado _VIEWSTATE que registra el estado de los controles en el formulario Web Form. Concretamente, _VIEWSTATE se añade al formulario del lado del servidor indicado por la etiqueta <Form … runat="server">, y únicamente registra el estado de los controles en esta sección. Mientras la página viaja desde el cliente al servidor, el estado del control de servidor Web se almacena con la página y puede actualizarse en cualquier extremo de la transacción (en el cliente o el servidor).

Como el estado de la página Web se guarda dentro del formulario del servidor,la página Web puede ser aleatoriamente enrutada en una granja de servidores Web y no necesita volver al mismo servidor. La ventaja del proceso _VIEWSTATE es que el programador puede concentrarse en el diseño de la página y no necesita generar la

Desarrollo web 93

ASP .NET

infraestructura necesaria para realizar el seguimiento del estado de la misma.

Control Oculto

El control _VIEWSTATE es un control oculto que contiene el valor de una cadena de pares nombre-valor que lista el nombre de cada control y el último valor de ese control.Con cada petición, el control _VIEWSTATE se actualiza y se envía al servidor. La respuesta del servidor puede a su vez actualizar el control _VIEWSTATE, que se devuelve con la respuesta. El resultado es que la configuración de la página permanece coherente de una solicitud a la siguiente. El siguiente ejemplo incluye el código HTML generado por un formulario Web Form y enviado al cliente:

<form name="Form1" method="post" action="WebForm1.aspx"id="Form1"><input type="hidden" name="__VIEWSTATE" value="dDw3NzE0MTExODQ7Oz4=" />'HTML aquí</Form>

Deshabilitar y habilitar ViewStateDe forma predeterminada, un formulario Web Form guarda el estado de la vista de los controles en el formulario Web Form. Para formularios Web Forms con múltiples controles, el tamaño del campo valor de las propiedades _VIEWSTATE puede ralentizar el rendimiento. Para maximizar el rendimiento de la página, podemos deshabilitar el atributo ViewState a nivel de página y habilitar ViewState únicamente para determinados controles.

Para deshabilitar el almacenamiento del estado de la vista a nivel de página Web, estableceremos el atributo EnableViewState de la directiva @Page, como se muestra en el siguiente código:

<%@ Page EnableViewState="False" %>

Para habilitar el almacenamiento del estado de la vista de un control específico,estableceremos el atributo EnableViewState del control, como se muestra en el siguiente código:

<asp:ListBox id="ListName" EnableViewState="true" Runat="server"></asp:ListBox>

Controles de servidor WebLos controles de servidor Web se basan en un modelo de objetos común; por ello, todos los controles comparten varios atributos, incluyendo la etiqueta <asp:TipoControl...>, y un atributo id. Los controles de servidor Web existen en el espacio de nombres System.Web.UI.WebControls y pueden utilizarse en cualquier formulario Web Form.

Desarrollo web 94

ASP .NET

Controles de servidor Web intrínsecos

Control de servidor Web Control HTML equivalente Función del control de servidor Web<Asp:button> <input type=submit> Crea un botón que envía una

petición al servidor.

<Asp:checkbox> <input type=checkbox> Crea una casilla de verificaciónque puede seleccionarsehaciendo clic.

<Asp:hyperlink> <a href="…"> </A> Crea un hiperenlace a unaetiqueta anchor HTML.

<Asp:image> <img src="…"> Crea un área que se utiliza paraMostrar una imagen.

<Asp:imagebutton> <input type=image> Crea un botón que incorpora lavisualización de una imagen enlugar de texto.

<asp linkButton> Ninguno Crea un botón que tiene elAspecto de un hiperenlace.

<Asp:label> <span> </span> Crea texto que los usuarios nopueden modificar.

<Asp:listbox> <select size="5"> Crea una lista de opciones. Permite</Select> múltiples selecciones.

<Asp:panel> <div> </div> Crea una división sin bordes en elformulario que se utiliza comocontenedor para otros controles.

<Asp:radiobutton> <input type=radiobutton> Crea un único control de botón deOpción.

<Asp:table> <table> </table> Crea una tabla.

<Asp:textbox> <input type=text> Crea un control de cuadro de texto.

Controles de validación

Los controles de validación son controles ocultos que validan la entrada de datos del usuario comparándolos con patrones predeterminados. La siguiente tabla muestra algunos de los controles de validación que se utilizan más habitualmente.

Control FunciónCompareValidator Requiere que la entrada concuerde con una

segunda entrada o campo existente.

CustomValidator Requiere que la entrada concuerde con una condición como que sean números primos o

Desarrollo web 95

ASP .NET

RangeValidator Requiere que la entrada concuerde con un intervalo especificado.

RegularExpressionValidator Requiere que la entrada concuerde con un formato especificado como un número de teléfono

de un determinado país o una contraseña que tenga números y letras.

RequiredFieldValidator Requiere que el usuario introduzca algún valor antes de que el control sea procesado.

ValidationSummary Recopila todos los mensajes de error de los controles de validación para una visualización

centralizada.

Controles ricos estándaresLos controles estándares proporcionan una rica funcionalidad a nuestro formulario Web Form insertando funciones complejas. La siguiente tabla muestra los controles ricos disponibles actualmente..

Contro lFunción

AdRotator Muestra una secuencia (predefinida o aleatoria) de imágenes.

Calendar Muestra un calendario gráfico en el que los usuarios pueden seleccionar fechas.

Controles enlazados a listasLos controles enlazados a listas pueden mostrar datos desde una fuente de datos. La siguiente tabla muestra algunos de los controles de lista que se utilizan habitualmente.

Control Función

CheckBoxList Muestra datos como una columna de casillas de verificación.

Repeater Muestra información desde un conjunto de datos utilizando el conjunto de elementos y controles HTML que especifiquemos. El control Repeater repite el elemento una vez por cada registro del DataSet.

Desarrollo web 96

ASP .NET

DataList Similar al control Repeater, pero con más opciones de formato y presentación, incluyendo la

posibilidad de mostrar información en una tabla. El control DataList también nos permite especificar el comportamiento de edición.

DataGrid Muestra información, normalmente enlazada a datos en forma tabular, con columnas. También proporciona mecanismos para permitir editar y clasificar.

DropDownList Muestra datos en un menú desplegable.

Listbox Muestra datos en una ventana.

RadioButtonList Muestra datos en una columna de botones de Opción.

Actividad:

Identificar el código HTML generado por los controles de servidor Web

En esta actividad, agregaremos controles de servidor Web a un formulario Web Form y visualizaremos el código fuente en un navegador para determinar qué código HTML se ha enviado al cliente.

1. Iniciar Visual Studio .NET.2. Crear un proyecto de aplicación Web y establecer la ubicación enhttp://localhost/Practices03.3. Abrir la página WebForm1.aspx.4. Agregar los controles TextBox, Button, Label, ListBox, Image,Hyperlink y Calendar al formulario Web Form.5. Hacer clic con el botón derecho en WebForm1.aspx en el Explorador desoluciones y clic en Generar y examinar.6. Hacer clic con el botón derecho en el navegador y clic en Ver fuentepara ver el código HTML enviado al cliente.7. Cumplimentar la siguiente tabla con las etiquetas HTML del control.

Ingrese los siguientes controles

asp:textboxasp:buttonAsp:labelasp:listboxasp:imageasp:hyperlinkasp:calendar

Desarrollo web 97

ASP .NET

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Font-Size="Large" Height="25px" Style="z-index: 100; left: 192px; position: absolute; top: 36px" Text="Fomulario de Prueba" Width="178px"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server" Style="z-index: 101; left: 189px; position: absolute; top: 82px" Width="300px"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Style="z-index: 102; left: 342px; position: absolute; top: 121px" Text="Aceptar" Width="104px" />

<asp:ListBox ID="ListBox1" runat="server" DataMember="Ever, Dos" Style="z-index: 103; left: 191px; position: absolute; top: 114px"> <asp:ListItem>Honduras</asp:ListItem> <asp:ListItem Selected="True">Salvador</asp:ListItem> <asp:ListItem>Costa Rica</asp:ListItem> <asp:ListItem>Nicaragua</asp:ListItem> <asp:ListItem></asp:ListItem> </Asp:ListBox>

<asp:Image ID="Image1" runat="server" Height="102px" ImageUrl="C:\Documents and Settings\Administrator\My Documents\Visual Studio 2005\WebSites\libro\Image0003.JPG" Style="z-index: 104; left: 193px; position: absolute; top: 202px" Width="137px" />

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="htt://www.fragua.org" Style="z-index: 105; left: 196px; position: absolute; top: 307px">Mi Pais</asp:HyperLink>

<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black" DayNameFormat="Shortest" Font-Names="Times New Roman" Font-Size="10pt" ForeColor="Black" Height="124px" NextPrevFormat="FullMonth" Style="z-index: 107; left: 365px; position: absolute; top: 165px" TitleFormat="Month" VisibleDate="2008-06-13" Width="260px"> <SelectedDayStyle BackColor="#CC3333" ForeColor="White" /> <TodayDayStyle BackColor="#CCCC99" /> <SelectorStyle BackColor="#CCCCCC" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt" ForeColor="#333333" Width="1%" /> <DayStyle Width="14%" /> <OtherMonthDayStyle ForeColor="#999999" /> <NextPrevStyle Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" ForeColor="#333333" Height="10pt" /> <TitleStyle BackColor="Black" Font-Bold="True" Font-Size="13pt" ForeColor="White" Height="14pt" />

Desarrollo web 98

ASP .NET

</asp:Calendar> </div> </form></body></Html>

Desarrollo web 99

ASP .NET

Actividad

-Abrir Miscrosoft Visual Studio.NET-Nuevo WebSite-Elegir ASP.NET web Site-Selecione en Location: HTTP-Escriba en dirección : http://localhost/ejercicio-Click en aceptar-En el panel de soluciones Explore haga click derecho sobrehttp://localhost/ejecicio y luego elija Add Item- Inserte los siguietes controles-Calendar arrestrelo y sueltelo sobre el area de trabajo-Click derecho sobre calendar y seleccione Auto Format-Elija Colorful1 y aceptar-Arrastre al escenario tres caja de texto y tres Label-A los label cambielo por nombre, edad y País-Arrastre 2 botones de radio-A los radio cambie el texto a cada uno "Casado" y "Civil"-Arrastre un botón y cambie el texto por guardar

Siga las pantallas para uno mejor orientación. Se da por entendido que el alumno de programación 4 ya conoce este entorno por tal no hago mucho incapie en conocer el entorno pero haré un pequeño repaso con esta practica.

-Seleccionamos ASP.NET web site y en location seleccione HTTP y cambie el nombre que aparece en la caja de texto por “http://localhost/PRACTICA.

Desarrollo web 100

-En el panel de soluciones Explore haga click derecho sobrehttp://localhost/ejecicio y luego elija Add Item

Seleccionamos en la caja de herramientas el control calendar y lo arrastramo hacia el escenario

ASP .NET

Desarrollo web 101

Una vez agregado el control calenderio hacemos click derecho y seleccione Auto Format

Se nos ha desplegado una ventana en la cual selecciona la forma colorful1 y damos aceptar.

Seleccione en la caja de herramientas las cajas de texto y arrastremos tres de ella hacia el escenario.

ASP .NET

Desarrollo web 102

Arrastramos tres controles label de la caja de herramienta al escenario y cambiamos el texto por: Nombre, Edad, País

Arrastramos dos controles botomRadio y cambio el texto a: Casado y Soltero como se aprecia en la pantalla

Por ultimo arrastramos el control botom de la caja de herramienta al escenario y cambio el texto por “Guardar” y listo ya podemos ejecutar y ver nuestro formulario en un explorador web.

ASP .NET

Desarrollo web 103

Agregar código a un formulario WebForm con Microsoft ASP.NET

Estudiaremos los distintos métodos que pueden utilizarse para agregar código a nuestra aplicación Web con Microsoft® ASP.NET. También estudiaremos los procedimientos de evento para los controles de servidor Web, cómo utilizarlos y el orden en que funcionan. Estudiaremos el uso de las páginas de código subyacente, que son el método preferido de Microsoft Visual Studio® .NET para agregar código a páginas Web. Finamente, estudiaremos cómo se utilizan los eventos de página, en particular al evento Page_Load.

También estudiaremos cómo se utilizan las páginas de código subyacente y en qué se diferencian del código en línea.

Tres métodos para agregar código:

-Ubicar el código en el mismo archivo que el contenido (mezclado)-Ubicar el código en una sección distinta del archivo de contenido (código en línea )-Ubicar el código en un archivo distinto (páginas de código subyacente)-Las páginas de código subyacente son el método predeterminado de Visual Studio .NET

Código mezclado. El código se encuentra en el mismo archivo que el contenido Web, entremezclado con el contenido Hypertext Markup Language (HTML). Este método es el menos elegido, ya que es difícil leer y trabajar con un archivo de este tipo. Sin embargo, es un método utilizado con frecuencia en páginas Active Server Pages (ASP).

Código en línea. El código se encuentra en el mismo archivo en una sección SCRIPT distinta, al igual que el contenido HTML.

Código subyacente. El código se encuentra en un archivo distinto del contenido HTML. El archivo de código se denomina página de código subyacente. Cuando se utiliza Visual Studio .NET, el método predeterminado es ubicar todo el código en una página de código subyacente.

Escrbiendo Codigo en Linea

<HTML><asp:Button id="btn" runat="server"/></HTML><SCRIPT Language="vb" runat="server">Sub btn_Click(s As Object, e As EventArgs) Handles btn.Click...End Sub

ASP .NET

Desarrollo web 104

ASP .NET

</SCRIPT>

Cuando se utiliza código en línea en una página Web, el HTML y el código se encuentran en secciones distintas de un único archivo .aspx. Esta separación se produce para ofrecer claridad en la lectura de la página; la funcionalidad, el código y HTML pueden coexistir en cualquier lugar de la página.

¿Qué son las páginas de código subyacente?

El método predeterminado para implementar código en el lado del servidor en Visual Studio .NET es utilizar páginas de código subyacente. Cuando utilizamos páginas de código subyacente, la lógica de programación se encuentra en un archivo distinto de los elementos visuales de la página. Separar la lógica del diseño permite a los desarrolladores trabajar en la página de código subyacente mientras los diseñadores de la interfaz de usuario (IU) trabajan en la página ASP.NET.

Poner nombre a las páginas de código subyacente

Las páginas de código subyacente contienen toda la lógica de programación para una sola página Web. Cada página de una aplicación Web tiene su propia página de código subyacente. De forma predeterminada, una página de código subyacente tiene el mismo nombre que la página Web a la que está asociada; sin embargo, la página de código subyacente también tiene una extensión .aspx.vb o .aspx.cs, dependiendo del lenguaje utilizado en la página de código subyacente. Por ejemplo la página Web PRACTICA2.aspx tendrá una página de código subyacente Microsoft Visual Basic® .NET denominada PRATICA.aspx.vb.

Cómo funcionan las páginas de código subyacente

-Crean archivos distintos para la interfaz de usuario y la lógica de la interfaz-Utilizan la directiva @ Page para enlazar los dos archivos-Pre-compilación o compilación JIT

Desarrollo web 105

ASP .NET

Para que las páginas de código subyacente funcionen, cada página .aspx debe estar asociada a una página de código subyacente, y esa página de código subyacente debe estar compilada antes de que la información se envíe de vuelta a un navegador cliente que la solicite.

Aunque cada página Web Form está formada por dos archivos distintos (la página .aspx y la página de código subyacente), ambos archivos forman una única unidad cuando se ejecuta la aplicación Web. La página de código subyacente puede ser precompilada por Visual Studio .NET cuando generamos el proyecto de aplicación Web, o puede ser compilada just-in-time (JIT) la primera vez que un usuario accede a la página.

Enlazar los dos archivosLa página .aspx debe estar asociada a la página de código subyacente. Visual Studio .NET agrega los tres atributos siguientes a la directiva @ Page de la página .aspx para conseguir esta asociación:

<% @ Page Language="vb" Inherits="Project.WebForm1" Codebehind="Page1.aspx.cs" Src = "Page1.aspx.cs" %>

-Codebehind. Es el atributo que Visual Studio .NET utiliza internamente para asociar los archivos.

-Src. Este atributo es el nombre de la página de código subyacente, y se utilizasi la aplicación Web no está precompilada.

-Inherits. Este atributo permite a la página .aspx heredar clases y objetos de lapágina de código subyacente.

Compilación JITCuando una página está compilada JIT, las páginas de código subyacente se compilan la primera vez que un cliente solicita la página .aspx. Tras la primera petición, las siguientes utilizan el archivo compilado existente. Por tanto, la primera petición de una página dura más, pero las siguientes peticiones son más rápidas.

Desarrollo web 106

ASP .NET

Si se desea utilizar la compilación JIT para una página, debería utilizarse elatributo Src de la directiva @ Page.

Agregar procedimientos de evento a controles de servidor Web

Los formularios Web Forms dinámicos e interactivos normalmente reaccionan a la entrada de datos del usuario. Los procedimientos de evento se utilizan para gestionar las interacciones de los usuarios en un formulario Web Form.

Cuando un usuario interactúa con un formulario Web Form, se genera un evento. Diseñamos nuestra aplicación Web para realizar una determinada tarea cuando se genera el evento. Un procedimiento de evento es la acción que ocurre en respuesta al evento generado.

Ejemplo de un procedimiento de eventoCuando hacemos doble clic en un control en Visual Studio .NET, Visual Studio .NET declara una variable (con el mismo nombre que el atributo id del control) y crea una plantilla para el procedimiento de evento. Cuando utilizamos Visual Basic .NET, Visual Studio .NET también agrega la palabra clave Handles, que adjunta el procedimiento de evento al control. La palabra clave Handles permite crear múltiples procedimientos de evento a un único evento.

<form id="form1" method="post" runat="server"><asp:Button id="cmd1" runat="server"/></Form>

El siguiente código Visual Basic .NET muestra la declaración de variables necesaria en la página de código subyacente.

Protected WithEvents cmd1 As _ System.Web.UI.WebControls.Button

En el código anterior, el nombre de la variable debe coincidir con el id del control Web, y debemos utilizar la palabra clave WithEvents para indicar que este control hace que se ejecuten los procedimientos de evento.

En el siguiente código Visual Basic .NET, que muestra el procedimiento de evento para el evento Click, la palabra clave Handles indica que el procedimiento de evento se ejecuta en respuesta al evento Click del control cmd1:

Private Sub cmd1_Click(ByVal s As System.Object, _ByVal e As System.EventArgs) _Handles cmd1.Click

Desarrollo web 107

ASP .NET

Todos los eventos pasan dos argumentos al procedimiento de evento: el remitente del evento y una instancia de la clase que guarda los datos del evento. Normalmente, este último es del tipo EventArgs, y a menudo no contiene ninguna información adicional; sin embargo, para algunos controles, es de un tipo que es específico para ese control.

Por ejemplo, para un control Web ImageButton, el segundo argumento es de tipo ImageClickEventArgs, que incluye información sobre las coordenadas donde el usuario ha hecho clic. El siguiente procedimiento de evento envía las coordenadas de la ubicación donde ocurre un clic en un control Label:

Sub img_OnClick(ByVal s As System.Object, _ByVal e As System.Web.UI.ImageClickEventArgs) _Handles ImageButton1.ClickLabel1.Text = e.X & ", " & e.YEnd Sub.

Recreación de este formulario

-Inserte un label, una caja de texto y boton -Haga click derecho en label1 y reemplace el contenido por cambiar titulo-Lo mismo haga con el boton cambie el el contenido por “cambiar”

Para generar este evento haga doble click sobre el boton lo cual lo llevara a la pagina adyacente donde esta la programacion VB codigo que no sera extraño para ustedes.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = TextBox1.Text End Sub

Como pueden ver aparece este una serie de codigo pero para darnos cuenta aquien

Desarrollo web 108

ASP .NET

perntenece hay que buscar en el Handles Button,Click este atributo nos dice que tipo de control es y que eventos tiene.

Solo nos resta guarda lo modificado y probarlo en nuestro explorador.

Uso de los eventos de página

Estudiaremos cómo utilizar los eventos de página. En primer lugar, estudiaremos el ciclo de vida de los eventos de página. A continuación, veremos cómo funciona el proceso de postback, y estudiaremos el orden de los eventos. También veremos cómo trabajar con el evento Page_Load.

Ciclo de vida de los eventos de página

Cuando se solicita una página ASP.NET, se producen una serie de eventos depágina. Estos eventos siempre ocurren en el mismo orden, denominado ciclo devida de los eventos de página.

El ciclo de vida de los eventos de página consta de los siguientes eventos depágina, que ocurren en el siguiente orden:

1. Page_Init. Este evento de página inicializa la página creando e inicializandolos controles de servidor Web de la página.

2. Page_Load. Este evento de página se ejecuta cada vez que se solicita laPágina.

3. Eventos Control. Este evento de página incluye eventos de cambio (porejemplo, Textbox1_Changed) y eventos de acción (por ejemplo,Button1_Click).

Desarrollo web 109

ASP .NET

4. Page_Unload. Este evento de página ocurre cuando la página se cierra ocuando el control pasa a otra página.

El final del ciclo de vida de los eventos de página incluye el borrado de la páginaen memoria.

La mayoría de eventos de control no ocurren hasta que el formulario Web Form se envíe de nuevo al servidor. Por ejemplo, los eventos Change se gestionan en orden aleatorio en el servidor después de que el formulario haya sido enviado. En cambio, los eventos Click pueden hacer que el formulario sea enviado al servidor inmediatamente.

Por ejemplo, si un usuario introduce texto en varios controles de un formulario y hace clic en un botón Submit, los eventos Change de los controles de texto no se procesarán hasta que el evento Click envíe el formulario al servidor.

Postbacks

En ASP.NET, los formularios están diseñados para enviar información de retorno a la página ASP.NET remitente para su procesamiento. Este proceso se denomina postback. Los postbacks pueden producirse por determinadas acciones del usuario. De modo predeterminado, únicamente los eventos click Button hacen que el formulario sea enviado de nuevo al servidor. Sin embargo, si establecemos la propiedad AutoPostBack de un control a true, forzamos un postback para los eventos de ese control.

Por ejemplo, el siguiente código HTML es un ejemplo del uso de AutoPostBack en un cuadro de lista. Cada vez que el usuario modifica el valor del cuadro de lista, el evento SelectedIndexChanged se invoca en el servidor y actualiza el cuadro de texto:



<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:DropDownList id="ListBox1" runat="server" AutoPostBack="True"><asp:ListItem>Tegucigalpa</asp:ListItem>

Desarrollo web 110

ASP .NET

<asp:ListItem>San Pedro Sula</asp:ListItem></asp:DropDownList> </div> </form></body></Html>

Este codigo pertenece a la pagina subyacente

Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ListBox1.SelectedIndexChanged TextBox1.Text = ListBox1.SelectedItem.Value End Sub

Gestión de los eventos Page.IsPostback

El evento Page_Load se ejecuta en cada petición de una página, tanto si es laprimera petición de la página o un postback.

Debido a que el evento Page_Load se ejecuta con cada petición de una página, todo el código del evento Page_Load se ejecutará cada vez que la página sea solicitada. Sin embargo, cuando utilizamos eventos postback, es posible que no deseemos que se ejecute nuevamente todo el código. Si éste es el caso, podemos utilizar la propiedad Page.IsPostBack para controlar qué código se ejecuta únicamente cuando la página se solicita por primera vez, como muestra el siguiente código:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then 'ejecución sólo en la carga de página inicial End If 'este código se ejecuta en cada petición End Sub

Desarrollo web 111

ASP .NET

Vínculo entre dos controles

Podemos vincular un control con el contenido de otro. Vincular es especialmente útil para mostrar valores de cuadros de lista o listas desplegables.

El siguiente código de ejemplo muestra cómo vincular un control Label alcontenido de una lista desplegable. Utilizando las etiquetas de enlace <%# y %>, establecemos el atributo Text del control Label para el elemento seleccionado (SelectedItem) del cuadro de lista:

<asp:Label id="lblSelectedValue" runat="server" Text="<%# lstOccupation.SelectedItem.Text %>" />

El siguiente ejemplo muestra el código de un formulario Web Form que se utiliza para vincular el control Label al cuadro de lista:



<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="Form1" runat="server"><asp:DropDownList id="lstOccupation"autoPostBack="true" runat="server" ><asp:ListItem>Tegucialpa</asp:ListItem><Asp:ListItem>San Pedro Sula</asp:ListItem><asp:ListItem>Choluteca</asp:ListItem></asp:DropDownList><P>Usted selecciono: <asp:Label id="lblSelectedValue"Text="<%# lstOccupation.SelectedItem.Text %>"runat="server" />

Desarrollo web 112

ASP .NET

</p></form></body></Html>

En el procedimiento de evento Page_Load, invocamos el método DataBind de toda la página o del control Label, como muestra el siguiente código:

Sub Page_Load (s As Object, e As EventArgs) _ Handles MyBase.LoadLblSelectedValue.DataBind()

End Sub

Desarrollo web 113

ASP .NET

Acceso a datos con MicrosoftADO.NET

Crear un sitio Web dinámico que responda a las peticiones de los usuarios con datos personalizados puede requerir que vinculemos nuestra aplicación Web a varias fuentes de datos. Microsoft® ADO.NET es la herramienta que nos permite acceder programáticamente a fuentes de datos desde un formulario Web Form.

ADO.NET está diseñado para cargar datos desde una fuente de datos y trabajar con esos datos en modo desconectado. Este estado de desconexión permite al formulario Web Form operar de forma semi-independiente de las fuentes de datos, reduciendo así el tráfico de red. ADO.NET utiliza Extensible Markup Language (XML) como formato universal de transmisión de datos, lo cual garantiza la interoperabilidad con cualquier plataforma donde esté disponible un parser XML.

Uso de DataSets frente a DataReaders

DataSet DataReadersAcceso lectura/escritura a Sólo lecturaDatos

Incluye múltiples tablas de Basado en una instrucción SQLdistintas bases de datos de una base de datos

Desconectado Conectado

Vinculado a múltiples controles Vinculado a un único control

Búsqueda de datos hacia Sólo hacia delantedelante y hacia atrás

Soportado por las herramientas Codificación manualde Visual Studio .NET

Los objetos DataSet son objetos complejos que nos permiten almacenar múltiples tablas de datos DataTables desde una fuente de datos. Los objetos DataSet son como una base de datos virtual ubicada dentro de una aplicación Web. Los objetos DataSet también pueden contener relaciones entre los datos de las DataTables, y pueden utilizar esas relaciones para recuperar datos.

Los objetos DataReader son objetos ligeros que se utilizan para leer datos desde una fuente de datos; los objetos DataReader proporcionan acceso sólo hacia delante (forward-only) y de sólo lectura (read-only) a los datos de una base de datos.

Desarrollo web 114

ASP .NET

La elección entre utilizar objetos DataSet u objetos DataReader debería basarse en el uso previsto para los datos. Normalmente, los objetos DataReader se utilizan para leer datos en situaciones en las que es necesario el acceso una única vez, y de solo lectura, como cuando accedemos a una contraseña almacenada, o se cumplimenta un control enlazado a una lista. Los objetos DataSet se utilizan para un acceso a datos más complejo, como elacceso a todo el historial de pedidos de un cliente.

Algunos de los aspectos relativos al acceso a datos que se deben tener en cuentaa la hora de decidir entre objetos DataSet y DataReader incluyen:

- Acceso a datosSi nuestra intención es leer y escribir a nuestra fuente de datos, debemos utilizar un objeto DataSet. Los objetos DataReader son conexiones de sólo lectura y deberían utilizarse únicamente cuando los datos vayan a utilizarse en una situación de sólo lectura.

-Acceso a múltiples bases de datosSi nuestra intención es combinar tablas de una o más bases de datos, debemos utilizar un objeto DataSet. Los objetos DataReader se basan en una única instrucción SQL de una sola base de datos.

-Enlace a controlesSi nuestra intención es enlazar los datos a más de un control, debemos utilizar un objeto DataSet. Los objetos DataReader sólo pueden vincularse a un único control.

Modo conexiónSi nuestra intención es trabajar en un modo desconectado, debemos utilizar un objeto DataSet. Los objetos DataReader deben ejecutarse en modo conectado.

- Búsqueda (scanning) de datosSi nuestra intención es buscar los datos hacia atrás y hacia delante, debemos utilizar un objeto DataSet. Los objetos DataReader buscan hacia adelante a medida que los datos fluyen desde la base de datos.

-Velocidad de accesoSi necesitamos acceso de alta velocidad a nuestra fuente de datos, utilizaremos un objeto DataReader. Los objetos DataSet son más lentos que los objetos DataReader en el acceso a una base de datos, debido a que los objetos DataSet almacenan los datos en un objeto del servidor Web.

También la sobrecarga es mayor en la creación del objeto DataSet debido a la capacidad de leer y escribir datos y búsqueda hacia delante y hacia atrás.

Desarrollo web 115

ASP .NET

Los objetos DataReader son más rápidos debido a la naturaleza del objeto más ligera. Hay muy poca sobrecarga para el objeto DataReader, ya que éste trabaja sólo hacia delante y sólo de lectura.

-Soporte de herramientasSi nuestra intención es utilizar Microsoft Visual Studio® .NET para crear la conexión a datos, utilizaremos objeto DataSet. Con los objetos DataSet, podemos elegir entre escribir nuestro propio código o utilizar el código máquina de Visual Studio .NET. Con los objetos DataReader, debemos escribir todo el código de soporte.

Conexión a una base de datos

-Seguridad SQL Server-Crear la conexión-Demostración: establecer la seguridad SQL Server

El primer paso en el uso de una base de datos para soportar nuestra aplicación Web es crear una conexión segura a la base de datos. Las conexiones no seguras pueden exponer a ataques mal intencionados tanto la aplicación Web como la base de datos.

Desde la perspectiva del usuario, el acceso a datos desde una base de datos SQL Server es un proceso en dos pasos. En primer lugar, el usuario envía una petición a la aplicación Web, y ésta se conecta a la base de datos SQL Server para satisfacer la solicitud. Existen dos métodos principales para que una aplicación Web se conecte a una base de datos SQL Server: autenticación en modo mixto y autenticación en modo sólo Windows. El método más utilizado es la autenticación sólo Windows.

Autenticación En modo mixtoLa autenticación en modo mixto utiliza la configuración predeterminada de ASP.NET y de la aplicación Web. Cada usuario de la aplicación Web debe tener una cuenta de usuario añadida al grupo logins de SQL Server. El punto débil de la autenticación en modo mixto

Desarrollo web 116

ASP .NET

es que los nombres de usuario y las contraseñas se envían al equipo que ejecuta SQL Server en código HTML no encriptado. Estos datos expuestos podrían permitir a terceros obtener las credenciales de inicio de sesión. Además, es necesario administrar cuentas de usuario tanto en el servidor Web como en el equipo que ejecuta SQL Server.

Para utilizar la autenticación en modo mixto, configurar SQL Server en modo de autenticación mixto (SQL Server y Windows). El siguiente código puede utilizarse para conectar a un SQL Server con autenticación en modo mixto:

Dim strConn As String = "data source=localhost; " & _"initial catalog=northwind; " & _"user id=CohoUser;password=1Coho”Dim conn As New SqlConnection(strConn)

Autenticación sólo Windows

La autenticación en modo sólo Windows es el método más utilizado para conectar una aplicación Web a una base de datos SQL Server. Cuando utilizamos la autenticación en modo sólo Windows, SQL Server no necesita el nombre de usuario y la contraseña. Sólo se requiere una confirmación de que el usuario ha sido autenticado por una fuente de confianza para procesar la petición a la base de datos.

El proceso de la autenticación en modo sólo Windows utiliza una sola cuenta denominada ASPNET para todos los accesos a SQL Server desde la aplicación Web. Esta única cuenta elimina los problemas de transmitir nombres de usuario y contraseñas no encriptados entre la aplicación Web y SQL Server, junto con la necesidad de mantener cuentas de usuario en ambos servidores.

Con la autenticación en modo sólo Windows, los usuarios acceden al formulario Web Form como usuarios anónimos. ASP.NET se conecta a SQL Server y se autentica utilizando la cuenta de usuario ASPNET. Los datos solicitados son devueltos por SQL Server y utilizados por la aplicación Web.

Finalmente, el formulario Web Form que incluye los datos solicitados se devuelven al usuario.

Para utilizar la autenticación en modo sólo Windows, configuramos SQL Server con la autenticación en modo sólo Windows. El siguiente código puede utilizarse para conectar a un SQL Server con autenticación en modo sólo Windows:

Dim strConn As String = _"data source=localhost; " & _”initial catalog=northwind; " & _"integrated security=true"Dim conn As New SqlConnection(strConn)

Desarrollo web 117

ASP .NET

Configurar el SQL Server para ejecutar autenticación en modo mixto o sólo Windows

Cuando utilizamos la autenticación en modo sólo Windows, podemos mantener a SQL Server en el modo de autenticación predeterminado de sólo Windows. Si utilizamos la autenticación en modo mixto, necesitamos modificar el modo de autenticación de SQL Server

Crear la conexión

Para ello, debemos identificar el nombre del servidor de base de datos, el nombre de la base de datos, y la información de inicio de sesión requerida.

Dependiendo del tipo de base de datos al que accedamos, podemos utilizar un objeto SqlConnection o un objeto OleDbConnection. Utilizamos un objeto SqlConnection para conectar a bases de datos SQL Server 7.0 o posterior, y objetos OleDbConnection para conectar al resto de bases de datos.

Creamos un objeto SqlConnection pasando una cadena de conexión que proporciona los parámetros necesarios para crear una conexión a una fuente deDatos.

Dim strConn As String = _"data source=localhost; " & _"initial catalog=northwind; " & _"integrated security=true"Dim conn As New SqlConnection(strConn)

Parámetros de la cadena de conexión

La siguiente tabla describe algunos de los parámetros más habituales de unobjeto de conexión:

Connection Timeout: El intervalo de tiempo de espera en segundos en una conexiónal servidor antes de finalizar el intento y generar una excepción. 15 segundos es el tiempo predeterminado.

Data Source: El nombre del servidor SQL Server utilizado cuando se abre una conexión, o el nombre del archivo que se utiliza cuando en la conexión a una base de datos Microsoft Access.

Initial Catalog: El nombre de la base de datos.

Integrated Security: El parámetro que determina si la conexión es o no segura. Losvalores posibles son True, False y SSPI. SSPI es elequivalente a True.

Desarrollo web 118

ASP .NET

Password: La contraseña de inicio de sesión en la base de datos SQL Server.

Persist Security Info: Cuando está establecido a False no se devuelve informaciónsensible a la seguridad (como la contraseña) como parte de la conexión, si la conexión está abierta o ha estado en un estado abierto. Establecer esta propiedad a True puede constituir un riesgo de seguridad. La configuración predeterminada es False.

Provider: La propiedad que se utiliza para establecer o devolver el nombre del proveedor de la conexión; este parámetro se utiliza únicamente para objetos OleDbConnection.

User ID: El nombre de cuenta de inicio de sesión de SQL Server

Acceso a datos con DataSets.

El objeto DataSet representa una copia local de los datos que provienen de una o más fuentes de datos. El uso de un objeto DataSet permite que un formulario Web Form se ejecute de forma semi-independiente de las fuentes de datos. El objeto DataSet puede utilizar un objeto DataAdapter para cargar los datos de una fuente de datos y puede desconectarse de la misma.

El usuario puede entonces utilizar y manipular los datos. Cuando los datos necesitan ser actualizados contra la fuente de datos, se utiliza un objeto DataAdapter para volver a conectarse y actualizar la fuente de datos.

Crear un DataAdapter

El objeto DataSet representa una copia local de datos de una fuente de datos.Cuando se utiliza sin una fuente de datos, el objeto DataSet resulta útil para guardar datos locales a los cuales pueden acceder los formularios Web Forms.

Sin embargo, para actuar como una herramienta de gestión de datos real, unobjeto DataSet debe poder interactuar con una o más fuentes de datos.

Para conseguir esta interacción, el .NET Framework proporciona las clasesSqlDataAdapter y OleDbDataAdapter.

Un objeto DataAdapter actúa como enlace entre un objeto DataSet y una fuente de datos que puede utilizarse para recuperar y guardar datos. La clase DataAdapter representa un conjunto de comandos de base de datos y una conexión a una base de datos que utilizamos para rellenar un objeto DataSet y actualizar la fuente de datos. Cada objeto DataAdapter intercambia datos entre un único objeto DataTable en un objeto DataSet y un único conjunto de

Desarrollo web 119

ASP .NET

Visual Studio .NET pone a disposición dos clases principales DataAdapter para su uso con bases de datos:

-Clase OleDbDataAdapterEsta clase es adecuada para utilizarse con cualquier fuente de datos expuestapor un OLE DB Data Provider.

-Clase SqlDataAdapterEsta clase es específica para una base de datos SQL Server versión 7.0 o posterior. El objeto SqlDataAdapter es más rápido que el objeto OleDbDataAdapter porque funciona directamente con SQL Server y no debe funcionar a través de una capa OLE DB Data Provider.

Cuando utilizamos objetos DataAdapter para intercambiar datos entre un objeto DataSet y una fuente de datos, podemos especificar las acciones que deseamos realizar utilizando una de las cuatro propiedades DataAdapter. Las propiedades DataAdapter ejecutan una instrucción SQL o invocan un procedimiento almacenado.

Las propiedades que están disponibles con la clase DataAdapter se muestranen la siguiente tabla.

SelectCommand: La propiedad SelectCommand recupera filas de la fuente de datos.

InsertCommand: La propiedad InsertCommand escribe filas insertadas del DataSet a la fuente de datos.

UpdateCommand: La propiedad UpdateCommand escribe filas modificadas delDataSet a la fuente de datos.

DeleteCommand: La propiedad DeleteCommand elimina filas en la fuente deDatos.

Ejemplo de SqlDataAdapter

'Create a connection Dim conn As New SqlConnection _ ("data source=localhost;initial catalog=pubs;" & _ "integrated security=true;persist security info=True;")'Create the DataAdapterDim da As New SqlDataAdapter _("select * from Authors", conn)

Crear un DataSet

Para crear una copia local de una base de datos, creamos y poblamos un objeto DataSet utilizando objetos DataTable.

Desarrollo web 120

ASP .NET

El primer paso para crear un objeto DataSet es declarar el nombre del objeto DataSet. El siguiente código crea un objeto DataSet denominado ds:

Dim ds As New DataSet()

Tras crear un objeto DataSet, rellenamos los objetos DataTable creando un objeto DataAdapter. Invocamos el método Fill en el objeto DataAdapter y especificamos el objeto DataTable que deseamos rellenar. El siguiente código rellena la tabla Authors del objeto DataSet ds utilizando un DataAdapter denominado da:

da.Fill(ds, "Authors")

El método Fill ejecuta implícitamente una consulta SQL en la propiedad SelectCommand del objeto DataAdapter. Los resultados de la consulta SQL se utilizan para definir la estructura del objeto DataTable, y para poblar la tabla con datos.

El siguiente código de ejemplo muestra cómo crear un objeto SqlDataAdapter da, e invocar a continuación el método Fill para almacenar los datos en el objeto DataSet ds.

'Create a connection Dim conn As New SqlConnection _("data source=localhost;initial catalog=pubs;" & _ "integrated security=SSPI;persist security info=True;")

'Create the DataSetDim ds As New DataSet()

'Create the DataAdapterDim da As New SqlDataAdapter _("select * from Authors", conn)

'Fill the DataSet dsda.Fill(ds, "Authors")

Una vez insertados los datos en un objeto DataSet, podemos acceder programáticamente a los datos. Como muestra el siguiente código, cada objeto DataSet está formado por uno o más objetos DataTable a los que podemos hacer referencia por su nombre o posición ordinal:

ds.Tables("Authors")-o- ds.Tables(0)

Las clases DataRow y DataColumn son los componentes principales de una clase DataTable. Utilizaríamos un objeto DataRow con sus propiedades y métodos para recuperar y evaluar los valores de un objeto DataTable. DataRowCollection representa los objetos DataRow reales que se encuentran en el objeto DataTable, y

Desarrollo web 121

ASP .NET

ataColumnCollection contiene los objetos DataColumn que describen el esquema del objeto DataTable.

La propiedad Rows del objeto DataTable proporciona acceso programático a DataRowCollection. La propiedad Columns del objeto DataTable proporciona acceso programático a DataColumnCollection.

El siguiente código de ejemplo agrega los nombres de columnas de un objeto DataSet al control ListBox denominado lstItems:

Dim col As DataColumnFor Each col In ds.Tables(0).Columns lstItems.Items.Add(col.ColumnName)Next

Tanto el objeto DataRowCollection como el objeto DataColumnCollection tienen una propiedad Count que nos permite determinar el número de filas o columnas de un objeto DataTable, como muestra el siguiente código de ejemplo:

ds.Tables("Authors").Rows.Countds.Tables("Authors").Columns.Count

Contar las filas y columnas del objeto DataTable nos permite acceder a campos individuales del objeto DataTable. Podemos acceder a campos por posición ordinal (basada-en-0) o por el nombre. En el siguiente código, x es el índice de la fila de datos a la que deseamos acceder:

DataSet.Tables(0).Rows(x)(1)DataSet.Tables(0).Rows(x)("fieldname")

El siguiente código recorre en bucle cada fila del objeto DataTable denominado Authors y crea una cadena utilizando los campos segundo y au_lname de Authors:

Dim r As DataRowDim str As StringFor Each r in ds.Tables("Authors").Rowsstr &= r(1)str &= r("au_lname")Next

Utilizar un DataView

Para mostrar los datos que almacena un objeto DataSet, podemos vincular el objeto DataSet directamente a un control enlazado a una lista o utilizar un objeto DataView. Un objeto DataView es una vista personalizada y enlazable de un único objeto DataTable.

Desarrollo web 122

ASP .NET

Después de crear un objeto DataView, el usuario puede utilizarlo para clasificar, filtrar, buscar, editar y navegar por datos.

Los objetos DataView pueden personalizarse para presentar un subconjunto de datos de un objeto DataTable. Esta personalización permite tener dos controles vinculados al mismo objeto DataTable, pero con cada control mostrando distintas versiones de los datos.

Por ejemplo, un control puede estar vinculado a un objeto DataView mostrando todas las filas de la tabla, y un segundo control puede estar vinculado a otro objeto DataView configurado para mostrar únicamente las filas que se han eliminado del objeto DataTable.

Cada objeto DataTable de un objeto DataSet tiene una propiedad DefaultView, que devuelve la vista predeterminada de la tabla. El siguiente código muestra cómo podemos acceder al objeto DataView dv predeterminado, de un objeto DataTable denominado Authors:

Dim dv As DataView = ds.Tables("Authors").DefaultView

Desarrollo web 123

ASP .NET

Administración del estado

Microsoft® ASP.NET permite administrar el estado de una aplicación Web. El estado es la capacidad de una aplicación Web de conservar la información del usuario.

La conexión que se establece entre un usuario (el equipo cliente) y un servidor Web se denomina sesión. Las sesiones pueden abarcar múltiples páginas Web y su seguimiento se realiza mediante la administración del estado.

La administración del estado es el proceso por el cual mantenemos la misma información a través de múltiples peticiones para las mismas o distintas páginas Web.

Al igual que las tecnologías basadas en Hypertext Transfer Protocol (HTTP), los formularios Web Forms no tienen estado, lo que significa que no indican automáticamente si las peticiones de una secuencia son todas del mismo cliente ni si una única instancia de navegador sigue visualizando de forma activa una página Web o un sitio Web. Además, las páginas Web se destruyen y vuelven a crearse a continuación con cada nueva petición al servidor Web; por tanto, la información de las páginas no existe más allá del ciclo de vida de una única página.

ASP.NET ofrece una administración del estado que guarda información en el servidor entre páginas, que ayuda a mantener la continuidad de la información del usuario (estado) durante una visita a un sitio Web.

Si se mantiene el estado entre páginas, la información suministrada originalmente por los usuarios puede ser reutilizada; por ello, los usuarios no necesitan volver a introducir la misma información varias veces cada vez que se envía una página de retorno al servidor.

Por ejemplo, en la ilustración anterior, el usuario, John Chen, introduce su nombre en el

Desarrollo web 124

ASP .NET

formulario login.aspx. Después de introducir sus datos personales, esa información se envía al servidor y se muestra la página siguiente, el formulario greetings.aspx. Sin administración del estado, la información que el usuario ha introducido en la primera página se ha perdido.

Sin embargo, si se utiliza administración del estado en la aplicación Web, puede mantenerse el estado a través de varias páginas Web. Por tanto, cuando la información personal del usuario se envía al servidor, la segunda página, el formulario greetings.aspx, da la bienvenida al usuario con su nombre, John Chen, que el usuario introdujo en el formulario login.aspx, la primera página de la aplicación Web.

Tipos de administración del estado

Administración del estado en Administración del estado enel lado del servidor el lado del cliente

ASP.NET proporciona dos tipos de administración del estado que pueden utilizarse para mantener el estado entre envíos y respuestas al servidor. La elección de uno de los dos tipos de administración del estado disponibles en ASP.NET depende principalmente de la naturaleza de la aplicación Web.Los dos tipos de administración del estado son:

-Lado servidorLas opciones de la administración del estado en el lado del servidor utilizan recursos del servidor para almacenar la información del estado. La seguridad de estas opciones es mayor que en el lado del cliente.

-Lado clienteLa administración del estado en el lado del cliente no utiliza recursos del servidor para almacenar la información del estado. Las opciones en el lado del cliente tienden a tener

Cookies - Archivo de texto que almacenainformación para mantener elEstado

Propiedad ViewState -Conserva valores entre múltiplespeticiones para la misma página

Cadenas de consulta -Información añadida al final deuna URL

Estado de la aplicación- La información está disponiblepara todos los usuarios de unaaplicación Web

Estado de sesión -La información está disponibleúnicamente para el usuario de unasesión específica

Base de datos -En algunos casos, se utiliza elsoporte de base de datos paramantener el estado en el sitio Web

Desarrollo web 125

ASP .NET

seguridad mínima, pero ofrecen un rápido rendimiento del servidor porque no existe demanda en el servidor paramantener el estado. La administración del estado en el lado del servidor contiene diferentesopciones a escoger, incluyendo:

- Estado de aplicaciónEn el estado de aplicación, la información está disponible para todos los usuarios de una aplicación Web; por ejemplo, almacenar el número de visitantes a una aplicación Web.

-Estado de sesiónEn el estado de sesión, la información está disponible únicamente para un usuario de una sesión específica de una aplicación Web; por ejemplo, almacenar el esquema de colores preferido de un usuario.

Base de datos Microsoft SQL Server™ o un servidor de estado Otra opción de la administración del estado en el lado del servidor es utilizar la tecnología de bases de datos. Podemos utilizar una base de datos SQLServer o un servidor de estado para almacenar información específica del usuario cuando el almacén de información es de gran tamaño. La base de datos SQL Server o un servidor de estado pueden utilizarse conjuntamente con el estado de sesión y cookies.

-El objeto CacheTambién podemos utilizar el objeto Cache para administrar el estado a nivel de aplicación.

Del lado del ClienteLa administración del estado en el lado del cliente también ofrece distintas opciones para mantener el estado. Estas opciones incluyen:

-CookiesUna cookie es un archivo de texto que puede utilizarse para almacenar pequeñas cantidades de información necesarias para mantener el estado.

-La propiedad ViewStateLos formularios Web Forms proporcionan la propiedad ViewState como una estructura incluida para conservar automáticamente valores entre múltiples peticiones a la misma página. La propiedad ViewState se mantiene como un campo oculto en la página.

-Cadenas de consulta Una cadena de consulta es información que se añade al final de una URL(Uniform Resource Locator). Un ejemplo típico podría ser el siguiente: http://www.contoso.com/listwidgets.aspx?category=basic&price=100

Desarrollo web 126

ASP .NET

En la ruta URL anterior, la cadena de consulta se inicia con un signo de interrogación (?) e incluye dos pares atributo-valor, categoría y precio.

El archivo Global.asax

El archivo global.asax es un archivo declarativo que se utiliza para la gestión de eventos mientras la aplicación Web se está ejecutando.

Algunas de las características del archivo global.asax son:

-Por cada aplicación Web ASP.NET se soporta un archivo global.asax.-El archivo global.asax se almacena en la raíz del directorio virtual de la aplicación Web.-El archivo global.asax puede gestionar eventos de aplicación y de sesión (inicio y final) que pueden utilizarse para inicializar variables de aplicación y de sesión.-El archivo global.asax es opcional. Si no definimos el archivo, el marco detrabajo de las páginas ASP.NET asume que no hemos definido ningúncontrolador de eventos de aplicación o sesión

El archivo global.asax soporta tres categorías de eventos:

-Eventos que se invocan cuando se solicita una página.-Eventos que se invocan cuando se envía la página solicitada.-Eventos de aplicación condicionales.

La siguiente tabla lista los eventos que se invocan cuando se solicita una Página.

Application_BeginRequest: Este evento se invoca cada vez que se recibe una nueva petición.

Application_AuthenticateRequest: Este evento indica que la petición está preparada para ser autenticada.

Application_AuthorizeRequest: Este evento indica que la petición está preparada para ser autorizada.

Application_ResolveRequestCache: Este evento es utilizado por el módulo de la caché de salida para detener el procesamiento de peticiones que han sido almacenadas en caché.

Application_AcquireRequestState: Este evento indica que debería obtenerse el estado para cada petición.

Desarrollo web 127

ASP .NET

Application_PreRequestHandlerExecute: Este evento indica que el gestor de peticiones está a punto de ejecutarse.

Eventos invocados cuando se envía la página solicitada

Global.asax también incluye eventos invocados cuando la página solicitada se envía de vuelta al cliente. La siguiente tabla lista estos eventos.

Application_PostRequestHandlerExecute: Este evento es el primero disponible después de que el controlador, como una página ASP.NET o un servicio Web, haya finalizado su trabajo.

Application_ReleaseRequestState: Este evento se invoca cuando el estado de la petición debe almacenarse, porque la aplicación Web ASP.NET finaliza con él.

Application_UpdateRequestCache: Este evento indica que el procesamiento de código ha finalizado y que el archivo está preparado para ser agregado a la caché de ASP.NET.

Application_EndRequest: Este evento es el último evento que se invoca cuando finaliza la aplicación Web ASP.NET.

Eventos de aplicación condicionales

Los eventos de aplicación condicionales son eventos que pueden o no ser lanzados durante le procesamiento de una petición. La siguiente tabla muestra algunos de los eventos de aplicación condicionales más habituales.

Application_Start: Este evento se invoca cuando se inicia una aplicación Web ASP.NET.

Application_End: Este evento es otro evento de ocurrencia única. Es el evento ecíproco de

Session_Start: Este evento se invoca cuando se inicia la Session de un usuario en una aplicación Web ASP.NET.

Session_End: Este evento es un evento reciproco de Session_Start; este evento se invoca cuando finaliza la sesión de un usuario.

Application_Error: Este evento se invoca cuando ocurre un error no controlado en una aplicación Web ASP.NET.

Desarrollo web 128

ASP .NET

Variables de aplicación y de sesión

Podemos utilizar las variables de aplicación y de sesión para compartir información entre las páginas de una aplicación Web ASP.NET. Estudiaremos cómo inicializar y utilizar las variables de aplicación y de sesión. También estudiaremos cómo especificar la duración de las variables de aplicación y de sesión y cómo afectan al almacenamiento escalable. Finalmente, estudiaremos cómo almacenar las variables de aplicación y de sesión en una base de datos.

Inicializamos las variables de aplicación y de sesión en los procedimientos de eventos Start de los objetos Application y Session del archivo global.asax.

Utilizamos el objeto Session para almacenar la información necesaria de una sesión de usuario concreta. Las variables que se almacenan en el objeto Session no se desecharán cuando el usuario viaje por las distintas páginas de la aplicación Web. En lugar de ello, estas variables persistirán durante toda la sesión del usuario.

El siguiente código de ejemplo muestra cómo se utilizan las variables de sesión para almacenar el esquema de colores preferido de una determinada sesión deUsuario:

Sub Session_Start(ByVal Sender As Object, _ByVal e As EventArgs)Session("Color1") = "beige"Session("Color2") = "black"

End Sub

Podemos utilizar el objeto Application para compartir información de estado entre todos los usuarios de una aplicación Web. Cuando el primer usuario de la aplicación Web solicita un archivo .aspx, se crea un objeto Application. El objeto Application se destruye cuando todos los usuarios han abandonado la aplicación Web y, a continuación, se descarga la aplicación Web.

Por ejemplo, podríamos almacenar el número total de visitantes de un sitio Weben una variable de nivel de aplicación:

Sub Application_Start(ByVal Sender As Object, _ByVal e As EventArgs)Application("Numero_visitantes") = 0

End Sub

Para utilizar variables de aplicación y de sesión en ASP.NET, simplemente utilizamos una clave de cadena y establecemos un valor.

Para establecer la variable de sesión, debemos proporcionar una clave que identifique el elemento que estamos almacenando, utilizando una instrucción

Desarrollo web 129

ASP .NET

como la siguiente:

Session("Color") = "azul”

La instrucción anterior agrega una clave, denominada Color, al estado de sesión con el valor azul.

Puede accederse a las variables de aplicación en un entorno de múltiples usuarios; por ello, cuando se actualicen los datos de Application, debemos evitar que otros usuarios o aplicaciones actualicen los datos simultáneamente.

ASP.NET proporciona un sencillo conjunto de métodos de bloqueo, Application.Lock() y Application.UnLock(), que pueden utilizarse para evitar el acceso múltiple y simultáneo de la variable de aplicación. El siguiente código muestra el uso de los métodos Application.Lock() y Application.UnLock():

Application.Lock()Application("Numero_visitante") += 1Application.UnLock()

Para utilizar una variable de sesión o de aplicación en una página ASP.NET, simplemente necesitamos leer el valor del objeto Session o Application:

strBgColor = Session("Color")lblNbVisitor.Text = Application("Numero_visitante”)

Ejemplo

-Cree dos formularios ASP.NET -A formulario uno insertamos un control HyperLink y le cambiamos el titulo por Siguiente.Vamos ala propiedad NavigateUrl hacemos click en el boton que tiene en lateral derecho ahi eligimos el formulario 1 que creamos.-Insertamos una control Label y sustituimos el contenido por un valor (0)-Insertemo otro label y sustituimos el contenido por “Contador 1”-Abrimos la hoja de codigo adyacente que contiene el evento page_load y escribios el siguiente codigo:

Session(”contador”)+=3Label1.Text= Session(”contador2”) + 1

-El fomulario numero 2 que creamos insertemos un control HyperLink y cambiamos el contenido por “Atras”. Vamos ala propiedad NavigateUrl hacemos click en el boton que tiene en lateral derecho ahi eligimos el formulario 1 que creamos.-Insertamos una control Label y sustituimos el contenido por un valor (0)

Desarrollo web 130

ASP .NET

-Insertemo otro label y sustituimos el contenido por “Contador 2”-Abrimos la hoja de codigo adyacente que contiene el evento page_load y escribios el siguiente codigo:

Session(”contador2”)+=4Label1.Text= Session(”contador”) + 1

Sesiones con y sin cookies

Las cookies son un medio por el cual la aplicación Web que se ejecuta en el servidor Web puede hacer que un cliente devuelva información al servidor Web con cada solicitud HTTP. La devolución de información puede utilizarse para mantener el estado con el cliente entre múltiples peticiones. Las cookies se envían al cliente como parte del encabezado HTTP en una solicitud del cliente, o se envían en una respuesta del servidor.

Podemos crear cookies utilizando la propiedad Cookies del objeto Response y la clase Request. La propiedad Cookies representa una colección de cookies y es una instancia de la clase HttpCookieCollection.

El siguiente código crea una nueva cookie denominada myCookie:

Dim objCookie As New HttpCookie("myCookie")Dim now As DateTime = DateTime.Now

El siguiente código agrega un par de claves y valores:

objCookie.Values.Add("Time", now.ToString())objCookie.Values.Add("ForeColor", "White")objCookie.Values.Add("BackColor", "Blue")

El siguiente código establece en una hora el tiempo de expiración de la cookie:

objCookie.Expires = now.AddHours(1)

Si no agregamos el código anterior cuando creamos una cookie, ésta será una cookie temporal. La cookie temporal se añade a la memoria del navegador, pero no se almacenará en un archivo. Cuando el usuario cierra el explorador, la cookie se elimina de la memoria.

Agregar el código sobre el tiempo de expiración convierte la cookie temporal en una cookie persistente. La cookie persistente se guarda en el disco duro. Con una cookie persistente, si el usuario cierra el explorador y lo abre de nuevo, puede acceder a la misma página Web otra vez hasta que la cookie persistente expire. La expiración de la

Desarrollo web 131

ASP .NET

cookie persistente depende del tiempo de expiración establecido en el código. En el código anterior, la cookie persistente se eliminará transcurrida una hora.

El siguiente código agrega la nueva cookie a la colección de cookies del objeto

Response:Response.Cookies.Add(objCookie)

Supongamos que deseamos crear una cookie, denominada Username, que contiene el nombre de un visitante a nuestro sitio Web. Para crear esta cookie, el servidor Web enviará un encabezado HTTP como muestra el siguiente código:

Set-Cookie: Username=John+Chen; path=/; domain=microsoft.com;Expires=Tuesday, 01-Feb-05 00.00.01 GMT

El encabezado del código de ejemplo anterior manda al navegador que agregue una entrada a su archivo cookie. El explorador agrega la cookie, denominada Username, con el valor John Chen.

El atributo domain del código de ejemplo anterior limita el dominio dónde el navegador puede enviar la cookie. En el código de ejemplo anterior, la cookie únicamente puede enviarse al sitio Web Microsoft.com. La cookie nunca se enviará a ningún otro sitio Web de Internet.

Después de que el servidor Web cree una cookie, el navegador la devuelve encada petición que realiza a ese sitio Web. El explorador devuelve la cookie enun encabezado similar al siguiente:

Cookie: Username: John+Chen

Las cookies que se almacenan en formato de archivo de texto son las cookies persistentes. De forma predeterminada, este archivo se almacena en la carpeta \Documents and Settings\NombreUsuario\Cookies.

Cuando las cookies persistentes se almacenan utilizando Internet Explorer, elformato del archivo de texto es:

[email protected]

Con esto finalizamos la serie de ASP.NET con estos concepto basico ya estmos listo para poder crear paginas ASP.NET es ya voluntad propia si desean ahondar mas en sobre esta tectología de desarrollo web. Acontinuacion se presenta una serie de codigo con el fin de que puedan analizar e identificar que es HTML, CSS, y ASP.NET

Desarrollo web 132

ASP .NET

Actividad

Este archivo codigo es el HTML que lo pueden copiar en nuevo formulario que lo pueden crear en ASP.NET. Antes darle copy y paste traten de realizarlo desde cero esto les ayudara a poder comprender aun mas lo visto en este libro y el código nuevo que encuentre detenerse e investigarlo.

<%@ Page Language="vb" Inherits="primera" src="apoyo/primera.vb" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head>

<title> Primera página ASP.NET </title><meta name="Generator" content=""><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content="">

<style>a:link {color: Blue; font-weight: bold;}a:visited{color: Purple; font-weight: bold;}a:hover{color: Red; font-weight: bold;}body {margin-left: 15px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10pt;}table {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10pt;}</style> </head> <body><div align="center"><table align="center" border="0" width="550" id="table1"> <tr> <td> <p align="justify">Página sencilla con varios controles Web de tipo etiqueta (<b>asp:label</b>), en una de ellas se muestra una variable, contenida en un cuadro de texto (<b>asp:textbox</b>), al pulsar en un botón (<b>asp:button</b>) que forman parte de un formulario Web (<b>asp:form</b>). También hay un control imagen (<b>asp:image</b>) que sólo se hace visible al pulsar el botón.<br /> </td> </tr></table>

Desarrollo web 133

ASP .NET

<br> <asp:Label id="lbMensaje1" font-bold="True" font-size="22pt" forecolor="blue" runat="server"></asp:Label></div><div align="center"> <form runat="server"> <h3 align="center"><font color="blue">Escribe tu nombre:</font></h3> <div align="center"> <asp:TextBox id="tbMensaje" Width="102px" Runat="server"></asp:TextBox> <asp:Button id="btEnviar" onclick="tbMensaje_Change" Runat="server" BorderWidth="2px" BorderStyle="Solid" BackColor="White" ForeColor="Black" Text="Enviar"></asp:Button> <p></p> <asp:Label id="lbMensaje2" font-bold="True" font-size="14pt" forecolor="blue" runat="server"></asp:Label> <asp:Label id="lbMensaje3" font-bold="True" font-size="10pt" forecolor="blue" runat="server"></asp:Label> <br><br> <asp:Image id="Image1" runat="server" ImageUrl="../img/net.gif"></asp:Image> </div> </form> </Div></Body>

Desarrollo web 134

ASP .NET

Este el codigo escrito en lenguaje Visual Basic en otras palabras este código tendrán que copiarlo a la pagina adyecente de la pagina anteriormente hecha

Imports System Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls

Public Class primera : Inherits Page

Public tbMensaje As TextBox Public btEnviar As Button Public lbMensaje1 As Label Public lbMensaje2 As Label Public lbMensaje3 As Label Public Image1 As Object

Sub Page_Load (obj as Object, e as EventArgs) lbMensaje1.Text = "Bienvenido a ASP.NET" Image1.Visible = False End Sub

Sub tbMensaje_Change (sender as Object, e as EventArgs) If tbMensaje.Text = "" Then lbMensaje2.Text = "" lbMensaje3.Text = "(Escribe tu nombre en la caja de texto)" Else lbMensaje3.Text = "" lbMensaje2.Text = "Hola, " + tbMensaje.Text.ToUpper() Image1.Visible = True End If End Sub

End Class

Desarrollo web 135

ASP .NET

Este seria el resultado final con la inmagen pueden usar otra o bien la pueden buscar en la web.

Desarrollo web 136