Desarrolloweb, Programacion IV

DESARROLLO WEB Programacin Web
UCENM
Universidad Cristiana Evangelica Nuevo Milenio
PROGRAMACIN IV HTML CSS VB ASP.NET
INTRODUCCION
En un principio la web era sencillamente una coleccin de pginas estticas, documentos, etc., para su consulta o descarga. El paso inmediatamente posterior en su evolucin fue la inclusin de un mtodo para elaborar pginas dinmicas que permitieran que lo mostrado tuviese carcter dinmico (es decir, generado a partir de los datos de la peticin). Este mtodo fue conocido como CGI ("Common Gateway Interface") y defina un mecanismo mediante el que se poda pasar informacin entre el servidor y ciertos programas externos. Los CGIs siguen utilizndose ampliamente; la mayora de los servidores web permiten su uso debido a su sencillez. Adems, dan total libertad para elegir el lenguaje de programacin que se desea emplear. El funcionamiento de los CGIs tena un punto dbil: cada vez que se reciba una peticin, el servidor deba lanzar un proceso para ejecutar el programa CGI. Como la mayora de CGIs estaban escritos en lenguajes interpretados, como Perl o Python, o en lenguajes que requeran "run-time environment", como Java o VisualBasic, el servidor se vea sometido a una gran carga. La concurrencia de mltiples accesos al CGI poda comportar problemas graves. Por eso se empiezan a desarrollar alternativas a los CGIs que solucionaran el problema del rendimiento. Las soluciones llegan bsicamente por 2 vas: 1) se disean sistemas de ejecucin de mdulos mejor integrados con el servidor, que evitan la instanciacin y ejecucin de varios progrmas, y 2) se dota a los servidores un intrprete de algn lenguaje de programacin que permita incluir el cdigo en las pginas de forma que lo ejecute el servidor, reduciendo el intervalo de respuesta. Entonces se experimenta un aumento del nmero de arquitecturas y lenguajes que permiten desarrollar aplicaciones web. Todas siguen alguna de estas vas. Las ms tiles y las ms utilizadas son las que permiten mezclar los 2 sistemas: un lenguaje integrado que permita al servidor interpretar comandos "incrustados" en las pginas HTML y, adems, un sistema de ejecucin 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 razn de su enorme popularidad. Una aplicacin Web es aquella que los usuarios usan accediendo a un servidor Web a travs 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 da ms comunes, debido a la popularidad y extensin que tiene la Internet. La facilidad para usar, actualizar y mantener aplicaciones Web, sin distribuir e instalar software, es otra razn de su popularidad. Esto sin mencionar el bajsimo costo de las mismas. Las aplicaciones Web, por ejemplo un programa de contabilidad, generan en forma dinmica pginas en formato HTML o XHTML. Generalmente cada pgina Web individual es vista por el cliente como un formulario o documento esttico, pero la secuencia de pginas provee de una experiencia interactiva.
Desarrollo web
OBJETIVOS
-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.
Desarrollo web
Indice
Conceptos Bsicos y Estructura de HTML Partes del Documento Formatos de Prrafos en HTML Encabezados Formato de Texto Atributos de Pagina Enlaces en HTML Imagenes en HTML Tablas en HTML Formulario CSS Hojas de Estilo en Cascada Sintaxis Definicin de Hojas de Estilos Identificadores y las Clases Seleccion Contextual Especificacin de estilo Para Elementos Individuales Formato de Elemento de Bloque Pseudo Clase Selector Tablas en CSS VB.NET Microsoft Visual Studio.Net Declaracin de variables Estructuras de Control Bucles y/o Ciclos Procedimientos y Funciones Clases en VB.Net Plataforma Microsoft .NET Plataforma Microsoft .NET NET Framework Componentes del .NET Frameworke Espacios de Nombres ASP.NET 2.0 Introduccin ASP.NET Planear un Sitio web de ASP.NET Requisitos Instalacin de IIS Entorno desarrollador Visual Studio.NET Crear Formularios Web Forms con ASP.NET Uso de controles de Servidor Crear cdigo HTML especfico del navegador Tipos de controles de servidor Agregar cdigo a un formulario Web Form con Microsoft ASP.NET Qu son las pginas de cdigo subyacente? Uso de los eventos de pgina Acceso a datos con Microsoft ADO.NET Conexin a una base de datos Acceso a datos con DataSets. Utilizar un DataView Administracin del estado Tipos de administracin del estado El archivo Global.asax Variables de aplicacin y de sesin Sesiones con y sin cookies 5 6 7 10 12 13 15 18 20 27 41 44 45 49 50 51 52 54 55 61 62 63 63 64 65 67 68 68 69 71 73 74 76 82 82 85 86 90 91 92 104 105 109 114 116 119 122 124 125 127 129 131
Desarrollo web
HTML
Partes del Documento Formatos de Prrafos en HTML Encabezados Formato de Texto Atributos de Pagina Enlaces en HTML Imagenes en HTML Tablas en HTML Formularios
Lenguaje de Marcas de Hipertexto
6 7 10 12 13 15 18 20 27
Desarrollo web
INTRODUCCION A HTML
HTML es el lenguaje con el que se escriben las pginas web. Las paginas web pueden ser vistas por el usuario mediante un tipo de aplicacin 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. Adems, y es aqui donde reside su ventaja, el HTML nos permite la introduccin 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 carcter 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 utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, 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 cdigo de una manera unificada. Esto obliga al desarrollador web a, una vez creada su pagina, comprobar que esta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los mas utilizados. Adems 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 especficos para la creacin 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.
Desarrollo web
Concepto Basicos y Estuctura de HTML

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:
Parte del Documento
<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>
Desarrollo web

<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>
Parte del Documento
Las maysculas o minsculas son indiferentes al escribir etiquetas. A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacion de mayusculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas 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.
Desarrollo web

Haciendo doble clic sobre el archivo recientemente creado para visualizar los resultado en nuestro navegador que tenemos configurado por defecto.
Parte del Documento
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 cdigo de nuestra pagina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de pginas.
Formato de prrafos en HTML

Formatear un texto pasa por tareas tan evidentes como definir los parrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, italica... Los parrafos delimitados por etiquetas <p> pueden ser fcilmente 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:
Desarrollo web

Texto alineado a la izquierda Para una justificacin 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
Formato de Prrafo
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 prctico: 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 tamao 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 pequeo. <h1>Encabezado de nivel 1</h1> Se vera de esta manera en la pagina: Encabezado de nivel 1
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> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html> Para ver los resultados en nuestros basta con copiar y pegar en nuestro blog de notas el cdigo y luego guarda el archivo con extensin html.
Encabezados
Formateando el texto
Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y practico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y mucho ms 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 desempeada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por simple razn de esfuerzo.
Desarrollo web
11

Escribiendo un cdigo de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita -Itlica 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 itlica
Formato de Texto
-Subndices y suprandices Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: <sup> y </sup> para los supraindices <sub> y </sub> para los subndices 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 ningn 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 slo est en negrita y esto en negrita e itlica
Desarrollo web
12

Color, tamao 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 clsica y directa de definir color tamao 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 parmetros que deseamos definir. A continuacin 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 tamao 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, Tamao 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>
Formato de Texto
Atributos para pginas

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
Desarrollo web
13

fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decamos son generales a toda la pagina. -Atributos para fondos bgcolor: especificamos un color de fondo para la pagina. background: sirve para indicar la colocacin de una imagen como fondo de la pagina.
Ejemplo de fondo <body bgcolor="black"> <body background="fondo.jpg">
Atributos de Pgina
-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 estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos 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>
Desarrollo web
14

-Mrgenes 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> <title>Cocina Para Todos</title> <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>
Atributos de Pgina
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 ningn 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 imgenes (las veremos enseguida). Del mismo modo, un sitio web podr ser considerado como el conjunto de archivos, principalmente paginas HTML e imgenes, que constituyen el contenido al que el navegante tiene acceso.
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 direccin. Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.
Enlaces
-Enlaces internos <a href="#abajo">Ir abajo</a> El smbolo #; es el quien especifica al navegador que el enlace apunta a una seccin 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 seccin 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>
Desarrollo web
16

Como para los enlaces internos, en este caso hemos de marcar la seccin 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 direccin 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. Tambin 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 electrnico dirigido a una direccin de mail determinada. Estos enlaces son muy habituales en las paginas web y resultan la manera mas rpida de ofrecer al visitante una va para el contacto con el propietario de la pagina. Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo href. del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace. <a href="mailto:eugim@hotmail.com">eugim@hotmail.com</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.
Enlaces
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 tpica de "Que queremos hacer con el archivo. Abrirlo o guardarlo en disco". Ejemplo: <html> <head> <title>Cocina Para Todos</title> </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:eugim@hotmail.com">eugim@hotmail.com</a></p> <P> <a name="abajo">aqui es abajo</a></p> </Body> </html>
Enlaces
Imgenes en HTML
Sin duda uno de los aspectos mas vistosos y atractivos de las paginas web es el grafismo. La introduccin en nuestro texto de imgenes puede ayudarnos a explicar mas fcilmente nuestra informacin y darle un aire mucho mas esttico. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quien tendr mas dificultad en encontrar la informacin 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 conexin o si es un poco impaciente.
Desarrollo web
18

Sintaxis: <img src="camino hacia el archivo"> Ejemplo prctico <Html> <head> <title>Cocina Para Todos</title> </head> <body> <img src="c:/REY.jpg" width="200" height="300" alt="Rey" border="3"> <br> <br> <img src="C:/PIA.jpg" width="200" height="300" alt="Pia" 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>
Imgenes
Para efectos de explicacin los nombres de la imgenes no las veran si copian el contenido tal y como esta aqu en este ejemplo: Reemplacen las imgenes por otras que puedan tener en su computadora copiando exactamente la direccin 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>
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 podra 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 diseadores 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 peridicos, prefijar los tamaos 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>.
Tablas
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> <td> Celda 1, linea 2</td> <td> Celda 2, linea 2</td>
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 batera de atributos aplicados sobre cada tipo de etiquetas que las componen.
Tablas
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 prcticamente 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 lnea: Align: Justifica el texto de la celda del mismo modo que si
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 lnea 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. Anlogamente, 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 disear. No esta de mas si la prediseamos en papel si la complejidad es importante. El HTML resulta en general fcil 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">
Tablas
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> <td>Celda 1, linea 2</td> <td> Celda 2, linea 2</td>
Tablas
</tr> </table> </body> </Html>
Tablas en HTML. Atributos de la tabla y conclusin. 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
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> <td>Celda 1, linea 2</td> <td> Celda 2, linea 2</td> </tr> </table> </body> </Html>
Tablas
Tablas anidadas Muy util tambin es el uso de tablas anidadas. De la misma forma que podamos 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 situacin puede complicarse si el numero de tablas embebidas dentro de otras es elevado. Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y luego el
Desarrollo web
24

cdigo, 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> <td>Tabla anidada, celda 2</td> </tr> <tr> <td>Tabla anidada, celda 3</td> <td>Tabla anidada, celda 4</td> </tr> </table> </td> </tr> </table> </body> </html>
Tablas
Desarrollo web
25

Actividades de este capitulo
Importante ahora realizar algn ejemplo de realizacin de una tabla un poco compleja. Apartir de las siguientes imgenes cree esa misma tablas y presentela en el explorador:
Tabla de Animales en peligro de extincin: Recrea la misma poniedo en practica el los codigos HTML que hasta ahora hemos adquirido.
Tablas
Ejercicio numero 2 haga lo mismo que se le pidi en el ejercicio anterior.
Desarrollo web
26

Formularios HTML
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin, esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de que forma podemos intercambiar informacin 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 podamos, mediante los enlaces, contactar directamente con un correo electrnico. Sin embargo, esta opcin puede resultar en algunos casos poco verstil si lo que deseamos es que el navegante nos envi una informacin bien precisa. Es por ello que el HTML propone otra solucin 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 bsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en estos campos son enviados al correo electrnico del administrador del formulario o bien a un programa que se encarga de procesarlo automticamente. Usando HTML podemos nicamente enviar el formulario a un correo electrnico. 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 accin a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades: El formulario es enviado a una direccin de correo electrnico 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 electrnico especificada por medio de una sintaxis de este tipo:
Formularios
Desarrollo web
27

<Form action="mailto:direccion@correo.com" ...> Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la direccin del archivo que contiene dicho programa. La etiqueta quedara en este caso de la siguiente forma: <form action="direccion del archivo" ...> La forma en la que se expresa la localizacin 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 prcticos, daremos siempre el valor post.
Formularios
Enctype Se utiliza para indicar la forma en la que viajara la informacin que se mande por el formulario. En el caso ms corriente, enviar el formulario por correo electrnico, 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 automticamente 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 creacin del formulario tendr el siguiente aspecto: <form action="mailto:direccion@correo.com (o nombre del archivo de proceso)" method="post" enctype="text/plain"> Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darn forma a nuestro formulario, las cuales sern vistas en captulos siguientes.
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 clsica caja de texto hasta la lista de opciones pasando por las cajas de validacin. 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">
Formularios
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>
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.
Formularios
<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 anlogos 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 introduccin de datos confidenciales, principalmente cdigos de acceso. <html> <head> <title>Formularios</title> </head> <body>
Desarrollo web
30

<form action="prueba1.htm" method="post"> <h1>Texto oculto</h1> <input type="password" name="nombre"> </form> </body> </Html>
Formularios
Texto largo Si deseamos poner a la disposicin de usuario un campo de texto donde pueda escribir cmodamente sobre un espacio compuesto de varias lneas, 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. Adems, podemos definir las dimensiones del campo a partir de los atributos siguientes: Rows: Define el numero de lneas del campo de texto. cols:Define el nmero de columnas del campo de texto. La etiqueta queda por tanto de esta forma: <textarea name="comentario" rows="10" cols="40"></textarea>
Desarrollo web
31

<Html> <head> <title>Formularios</title> </head> <body>
<form action="prueba1.htm" method="post"> <h1>Caja Texto Largo</h1> <textarea name="comentario" rows="10" cols="40">Puede escribir aqu tus comentarios</textarea> </form> </body> </Html>
Formularios Otros elementos de formulario

Efectivamente, los textos son una manera muy prctica de hacernos llegar la informacin del navegante. No obstante, en muchos casos, los textos son difcilmente adaptables a programas que puedan procesarlos debidamente o bien, puede que su contenido no se ajuste al tipo de informacin que requerimos. Es por ello que, en determinados casos, puede resultar ms efectivo proponer una eleccin al navegante a partir del planteamiento de una serie de opciones. Este es el caso de, por ejemplo, ofrecer una lista de pases, el tipo de tarjeta de credito para un pago,...
Desarrollo web
32

Este tipo de opciones pueden ser expresadas de diferentes formas. Veamos a continuacin cuales son: Listas de opciones Las listas de opciones son ese tipo de mens desplegables que nos permiten elegir una (o varias) de las mltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta con su respectivo cierre: <select> Podemos ver, a partir de estas directivas, la forma mas tpica y sencilla de esta etiqueta: <html> <head> <title>Formularios</title> </head> <body>
Formularios
<form action="prueba1.htm" method="post"> <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 nmero de valores mostrados de la lista. El resto pueden ser vistos por medio de la barra lateral de desplazamiento. Mltiple:Permite la seleccin de ms varios elementos de la lista. La eleccin de mas de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o
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 comn. Veamos cual es el efecto producido por estos dos atributos cambiando la linea: <select name="estacion"> <html> <head> <title>Formularios</title> </head> <body>
Formularios
<form action="prueba1.htm" method="post"> <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 eleccin, 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> <title>Formularios</title>
Desarrollo web
34

</head> <body> <form action="prueba1.htm" method="post"> <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>
Formularios
Cajas de validacin Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestin. La sintaxis utilizada es muy similar a las vistas anteriormente: <html> <head> <title>Formularios</title> </head> <body> <Form action="prueba1.htm" method="post">
Desarrollo web
35

<h1>Cajas de Validacin</h1> <input type="checkbox" name="paella">Me gusta las baleadas </form> </body> </Html>
Formularios
Envio, borrado y dems en formularios HTML Los formularios han de dar plaza no solamente a la informacin a tomar del usuario sino tambin a otra serie de funciones. Concretamente, han de permitirnos su envi mediante un botn. Tambin puede resultar practico poder proponer un botn de borrado o bien acompaarlo 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. botn de envo 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 botn previsto a tal efecto. La construccin de dicho botn 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 botn de envi (type="submit") y hemos de definir el mensaje del botn por medio del atributo value.
Desarrollo web
36

botn de borrado Este botn nos permitir borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio. Su estructura sintctica es anloga a la anterior: <input type="reset" value="Borrar"> A diferencia del botn de envi, indispensable en cualquier formulario, el botn de borrado resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no ponerlo muy cerca del botn de envi y de distinguir claramente el uno del otro. Ejemplos de ambos botones <html> <head> <title>Formularios</title> </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 creacin de un formulario que consulta el grado de satisfaccin de los usuarios de una lnea de autobuses ficticia. El formulario esta construido para que enve los datos por correo electrnico a un buzn determinado. Vemos el formulario en esta pgina.
Formularios
Desarrollo web
37
Formularios
Desarrollo web
38

Codigo del Fomulario anterior <html> <head> <title>Formulario</title> </head> <body> <Form action="mailto:colabora@desarrolloweb.com" 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>
Formularios
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 catlogo 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 bsicos. El objetivo de esta breve explicacin de HTML es para aquellas personas que no han tenido contacto con este tipo de programacin 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 cdigo 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.
Formularios
Desarrollo web
40
CSS
Hojas de Estilo en Cascada
Introduccin Sintaxis Definicin de Hojas de Estilos Identificadores y las Clases Seleccion Contextual Especificacin de estilo Para Elementos Individuales Formato de Elemento de Bloque Pseudo Clase Selector Tablas en CSS
42 44 45 49 50 51 52 54 55
Desarrollo web
41
Conceptos Basicos de CSS

Introduccin a CSS
CSS, el lenguaje de hojas de estilo usado en pginas web. Este vistazo bsico pretende hacer una introduccin a este lenguaje, mtodos para separar estilo de contenido, etc. Se trata de introducir los conceptos, propiedades y estilos bsicos de este lenguaje para que despus cada uno haga sus propios diseos. Con la llegada del CSS no slo estos "antiguos" mtodos estn "desfasados", sino que son bastante ms complicados de utilizar y mucho menos accesibles (como para navegadores en modo texto, reproductores orales, robots...). Lo ideal sera que en los lenguajes de estructuracin como HTML no incluysemos 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 tamao 24 y en cursiva, esto en rojo" lo mejor es estructurar el documento: "esto es un encabezado, esto una lista ordenada, esto un prrafo" sin inclur ningn elemento de diseo y presentacin. Despues, creamos un documento CSS en el que s "diseamos" cada parte del documento, incluyendo colores, posicin, bordes y dems 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 podrn ver el documento con todo sus estilos, adornos, etc. Tambin hay ms ventajas, como el hecho de poder inclur la misma hoja de estilos en varias pginas HTML, lo que es muy cmodo y til. De esta manera podremos po r ejemplo c ambiar la fuente de los prrafos de dieciocho pginas con slo editar un archivo; cosa que sera mucho ms compleja si hubisemos usado las viejas etiquetas como <font>. Se da por entendido que si se encuentra en este apartado es que tiene conocimientos bsicos en cuanto a HTML, estructuracin de contenidos, prrafos, etc.
Desarrollo web
42

El estndar CSS y navegadores
CSS es un estndarrecomendacin libre del W3C ; con unas especificaciones que los navegadores que soporten CSS deberan de implementar. Sin embargo algn 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 debera hacer segn el estndar. Es por esto por lo que no es nada recomendable disear CSS basndose en el resultado que se obtiene en este navegador, ya que si te fas de l probablemente ests 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 estndares, pero a veces hay que recurrir a "trucos" o cosas raras o no estndares. 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.
Creacin y hojas de Estilo

Definicin 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 seccin <head> ... </head>. La etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegrate 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 ttulos de nivel 4 sern en maysculas 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 CSS
La 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 bsica 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 continuacin: -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 direccin 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

Definicin de Hojas de Estilo Ficheros Externos Se puede definir una hoja de estilo en un fichero distinto del que contiene la pgina y despus enlazarlos. Las ventajas de este mtodo son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podra pensar en una hoja de estilo as definida como en un patrn que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las pginas servidas desde un sitio Web sin ms que incluir un enlace al fichero con el estilo en cada pgina. La sintaxis para definir estilos en ficheros es idntica 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 intencin 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

<link rel = stylesheet type = "text/css" href = "mihojaestilo.css"> </Head> <body> <h1>Este es un estilo externo</h1> <p>Este parrafo deberia ser rojo pero debido a la crisis economica<br> se imprimio en blanco y negro para ahorra unos cuantos lempiras.</p> </body> </Html>
Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrn utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todas las etiquetas de ese tipo en el documento utilizarn dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los prrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los prrafos no ser la solucin correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y despus se utilizar empleando el atributo class en cualquier elemento. <html> <head> <title>CSS</title>
Desarrollo web
46

<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 prrafo 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 podrn aplicar dicha clase. En el siguiente ejemplo se crea una clase de estilo amarillo que podr utilizar cualquier elemento HTML. Tambin se crea una clase rojo que slo podrn utilizar prrafos y bloques. <html> <head> <title>CSS</title> <Head> <style type="text/css"> .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 prrafo es rojo.</p> <p>Este prrafo 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 ttulo intenta usar la clase rojo, pero no le est permitido
Desarrollo web
47

</h4> <p class="amarillo">Este prrafo es amarillo</p> <h4 class="amarillo"> Este ttulo es amarillo porque usa la clase amarillo </h4> </Body> </Html> Un elemento HTML slo puede utilizar una clase de estilo. Si se especifican dos o ms clases, se utilizar la primera. Por ejemplo, en el siguiente cdigo un prrafo 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 prrafo rojo.</p> Definicin 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 prrafo 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 cdigo 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. Tambin se define un estilo con nombre llamado AZUL1 cuyo color es azul. <html> <head> <title>CSS</title> <head>
<style type="text/css"> .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 prrafo la interlinea y el tamao de la fuente son mayores de lo habitual. </p> <p class="PRINCIPAL" id="AZUL1"> Este prrafo 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 despus 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 invocacin 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 Seleccin 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. Podramos, por ejemplo, querer que el texto enfatizado sea de color verde, pero slo si el texto enfatizado est en el interior de un ttulo de tamao 4. Se puede conseguir este nivel de control sobre la aplicacin de estilos usando los criterios de seleccin contextual. Estos, en general, permiten especificar que un estilo se aplicar slo 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> <style type="text/css"> 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 prrafos MAGENTA que estn dentro de un <div> estarn en cursiva. Adems los textos dentro de <b> anidados dentro de prrafos dentro de un <div> en MAGENTA usarn 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 prrafo debera ser magenta y cursivo. Ahora viene un <b>texto grande</b>. Conseguimos este efecto con seleccin contextual</p> </div> <p class="MAGENTA">Este prrafo todava es MAGENTA, pero como no est dentro de un bloque <div>, no es cursivo.</p> </body> </Html> Especificacin 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 aproximacin 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 ms fcil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algn cambio slo es necesario hacerlos una vez y el cambio automticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma ms fcil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. Tambin 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 prrafo, y slo este prrafo, es verde, esta en negrita y tiene un borde azul. </p> <p> Este prrafo 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 seccin se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva lnea. 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. Despus se discutir cada opcin 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 caractersticas de estilo propias tales como mrgenes, bordes, separadores y una imagen o color de fondo. Los mrgenes indican la separacin entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. Los separadores ("padding") indican la separacin entre el borde de los elementos y el contenido de los mismos. Tambin se puede fijar la anchura de los elementos de bloque, bien mediante un valor especfico, o bien mediante un porcentaje de la anchura total del documento. En este caso es redundante fijar los mrgenes derecho o izquierdo y la anchura. Si se especifican la anchura y los dos mrgenes, el valor del margen izquierdo tiene prioridad sobre los dems valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia mxima desde el borde derecho de elemento que lo contiene. El valor de anchura es utilizado slo si no sobrepasa los lmites 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 mrgenes, separadores, bordes, fondos y alineamiento.
Desarrollo web
52

<html> <head> <title>CSS</title> <head> <style type="text/css"> p{ color: "#00000"; /* blanco */ /* mrgenes */ 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 { /* tamao 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 slido y fondo</h3> <p>Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho ms que si no lo tiene.</p> <p>Este es otro prrafo con borde. Ten cuidado con los bordes, no los hagas demasiado
Desarrollo web
53

anchos, pues de lo contrario ocuparn demasiado espacio.</p> </body> </Html>
Pseudo Clase Selector

hover: Esta pseudoclase se activa mientras el ratn 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 ratn no encima) active: Esta pseudoclase se define mientras el objeto est activo. <html> <head> <title>CSS</title> <head> <style type="text/css"> 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 dems etiquetas tambin 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 cdigo y como este se puede volver a utilizar para la etiqueta tabla. <html> <head> <title>CSS</title> <head> <style type="text/css"> 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 codificacin 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> <style type="text/css"> 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 { #columnaDer { padding-top: 1em; margin: 0 2em 0 200px; } #columnDer h2 { #pie { clear: both; margin-top: 0; } margin-top: 0; }
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; fontfamily: 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 continuacin: 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 despus del recuadro. -Trate al maximo de hacer imitar esta pagina pero solo con codificacin HTML sin utilizar el CSS.
Desarrollo web
60
VB.NET
Declaracin de variables Estructuras de Control Bucles y/o Ciclos Procedimientos y Funciones Clases en VB.Net
Microsoft Visual Studio.Net
62 63 63 64 65
Desarrollo web
61
Repaso de Visual Basic

Una pgina ASP.Net puede ser desarrollada sobre cualquier tecnologa incluida en .Net Framework y Visual Studio .Net. Para indicarle al intrprete que la pgina utiliza Visual Basic .Net, incluimos la etiqueta mostrada arriba. Los parmetros ContentType y ResposeEncoding indican el tipo de contenido y de codificacin que se enviar. Comentarios: Los comentarios se indican, atravs del signo de apstrofe (). Los comentarios multilinea no existen, por lo que para comentar entre varias lineas, habr que colocar un apstrofe por cada lnea de comentario.
Declaracin de variables
La palabra reservada Dim permite declarar variables. Puede indicarse el tipo de dato de la variable incluyendo As [Type]. Tambin puede definirse valores de inicializacin para las variables recin 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 ms de una instruccin por lnea. Acceso a Propiedadades Indexadas: En Visual Basic .Net, el acceso a propiedades indexadas se realiza indicando entre parntesis 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 tamao 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 sintxis de Visual Basic para la definicin 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 definicin no es Switch sino Select Case y por que no existe la instruccin 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 coleccin, como un vector de un tipo especfico 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 instruccin 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 programacin modular es beneficiosa, por que permite fragmentar un programa complejo en varios subprogramas, permitiendo al programador, centrarse en procedimientos que ejecutan instrucciones especficas. Visual Basic .Net, no escapa de
Desarrollo web
64

La sintxis anterior describe la definicin de un procedimiento o funcin 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 sintxis para la declaracin de funciones en Visual Basic, difera en que el valor de retorno se indicaba igualando una variable con el nombre de la funcin, con el valor a devolver. Ahora, la nueva sintxis 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 funcin. Si se reciben parmetros, estos se indican dentro de parntesis, junto con el tipo de dato. Finalmente, se termina la definicin, indicando el tipo de dato que regresar la funcin. Dim s1 As String = StringFunction() Dim s2 As String = ParmFunction("Hello", "World!")
Clases en VB.Net
Siempre ser importante, la utilizacin 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 Public Sub New() MyBase.New() x=4 End Sub En este caso, una propiedad
Crea el objeto, utilizando New()
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
Plataforma Microsoft .NET

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

Qu es la plataforma Microsoft .NET?
La plataforma .NET proporciona: Un modelo de programacin coherente e independiente del lenguaje para todas las capas o niveles de una aplicacin. -Una interoperabilidad transparente entre tecnologas. -Una fcil migracin desde tecnologas existentes. -Un completo soporte de tecnologas de Internet independientes de la plataforma y basadas en estndares, incluyendo Hypertext Transfer Protocol (HTTP), Extensible Markup Language (XML) y Simple Object Access Protocol (SOAP). La plataforma .NET es un conjunto de tecnologas diseadas para transformar Internet en una plataforma informtica 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 Framework
El .NET Framework se basa en un nuevo entorno de ejecucin de lenguaje comn (CLR - Common Language Runtime). Este motor de ejecucin proporciona un conjunto de servicios comunes para los proyectos generados en Visual Studio .NET, con independencia del lenguaje. Estos servicios proporcionan bloques de desarrollo
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 estn 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 travs de Internet. Los servicios .NET Building Blocks pueden utilizarse desde cualquier plataforma que soporte el protocolo SOAP. Los servicios pueden incluir identidad, notificacin y mensajera, personalizacin, almacenamiento esquematizado, calendario, directorio, bsqueda y distribucin 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 tecnologas fundamentales para simplificar la creacin, implantacin y evolucin constante de aplicaciones y Servicios Web seguros, escalables y de alta disponibilidad. Tambin permite crear una nueva generacin de aplicaciones basadas en Windows con numerosas y nuevas caractersticas 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 ejecucin robusto y seguro, soporta mltiples lenguajes, simplifica la implantacin y administracin 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 automtica. 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 caractersticas del entorno de ejecucin y proporciona en una jerarqua de objetos otros servicios de alto nivel que todo programador necesita. Esta jerarqua de objetos se denomina espacio de nombres. Visual Basic .NET. Por ejemplo, el espacio de nombres Collections aade numerosas posibilidades nuevas, como clasificacin, colas, pilas y matrices de tamao automtico. La clase de sistema Threading tambin 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 comnmente utilizados, eventos y descriptores de eventos, interfaces, atributos y procesamiento de excepciones. Otras clases proporcionan servicios como la conversin de tipos de datos o la manipulacin de parmetros de mtodos, operaciones matemticas, invocacin local y remota de programas, administracin de los entornos de aplicaciones y la supervisin 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 mltiples 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 podra ser XML, otra podra ser OLE DB, y una tercera fuente de datos podra ser el adaptador directo para SQL Server. ASP.NET: Formularios Web y Servicios Web ASP.NET es un marco de trabajo de programacin 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 fcil y potente de generar interfaces de usuario (IUs) Web dinmicos. Los Servicios Web de ASP.NET proporcionan las piezas para construir aplicaciones distribuidas basadas en la Web. Los Servicios Web estn basados en estndares abiertos de Internet, como HTTP y XML. Podemos pensar en un Servicio Web como un componente reutilizable accesible a travs 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 abstraccin de programacin 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 estndares 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 ms habituales se describen en los siguientes prrafos.
Espacio de nombres
En el espacio de nombres System.Web, existen servicios como la gestin de cach, seguridad, configuracin 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 tambin otros controles WebControl ms 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 ms 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 estndar en nuestras aplicaciones .NET. Muchas funciones a las que anteriormente slo podan accederse mediante llamadas a la API (Application Programming Interface) estn ahora disponibles como parte de los propios formularios, lo cual hace el desarrollo mucho ms fcil y potente. Espacio de nombres System.Drawing El espacio de nombres System.Drawing proporciona acceso a la funcionalidad de grficos bsica de GDI+. Los espacios de nombres System.Drawing.Drawing2D, System.Drawing.Imaging y System.Drawing.Text ofrecen funcionalidades ms avanzadas.
Desarrollo web
72
ASP.NET 2.0
Introduccin ASP.NET Planear un Sitio web de ASP.NET Requisitos Instalacin de IIS Entorno desarrollador Visual Studio.NET Crear Formularios Web Forms con ASP.NET Uso de controles de Servidor Crear cdigo HTML especfico del navegador Tipos de controles de servidor Agregar cdigo a un formulario Web Form con Microsoft ASP.NET Qu son las pginas de cdigo subyacente? Uso de los eventos de pgina Acceso a datos con Microsoft ADO.NET Conexin a una base de datos Acceso a datos con DataSets. Utilizar un DataView Administracin del estado Tipos de administracin del estado El archivo Global.asax Variables de aplicacin y de sesin 74 76 82 82 85 86 90 91 92 104 105 109 114 116 119 122 124 125 127 129
Desarrollo web
73
ASP .NET
Que es ASP.NET?
ASP.NET es un marco de programacin basado en el .NET Framework que se utiliza para generar aplicaciones Web. Los formularios Web Forms ASP.NET, que forman parte de una aplicacin Web ASP.NET, proporcionan un modo fcil de generar sitios Web dinmicos. ASP.NET tambin incluye la tecnologa necesaria para generar servicios Web XML, que proporcionan los bloques bsicos 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 pgina Web que los usuarios visualizan en un navegador. Una aplicacin Web ASP.NET consta de uno o ms formularios Web Form. Un Web Form es una pgina dinmica que puede acceder a recursos del servidor. Por ejemplo, una pgina Web tradicional puede ejecutar scripts en el cliente para realizar tareas bsicas. En cambio, un formulario Web Form ASP.NET tambin puede ejecutar cdigo en el lado servidor para acceder a una base de datos, generar formularios Web Forms adicionales, o aprovechar la seguridad incorporada en el servidor. Adems, 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 prcticamente 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. Aplicacin Web ASP.NET Las partes de una aplicacin Web ASP.NET incluyen: -Formularios Web Forms o pginas .aspx Los formularios Web Forms y las pginas .aspx proporcionan la interfaz de usuario para la aplicacin Web. -Pginas con cdigo trasero Las pginas con cdigo trasero estn asociadas a los formularios Web Forms y contienen el cdigo del servidor
Desarrollo web
74
ASP .NET
para el formulario Web Form. -Archivos de configuracin Los archivos de configuracin son archivos XML que definen la configuracin predeterminada para la aplicacin Web y para el servidor Web. Cada aplicacin Web tiene un archivo de configuracin Web.config. Adems, cada servidor Web tiene un archivo machine.config. -Archivo Global.asax Los archivos Global.asax contienen el cdigo necesario para responder a los eventos a nivel de aplicacin provocados por ASP.NET. -Enlaces a servicios Web XML Los enlaces a servicios Web XML permiten a la aplicacin Web enviar y recibir datos de un servicio Web XML. -Conectividad a bases de datos La conectividad a bases de datos permite a la aplicacin Web transferir datos desde y hacia fuentes de base de datos. -Cach El uso de cach permite a la aplicacin Web devolver ms rpidamente formularios Web Forms y datos tras la primera peticin. Modelo de ejecucin de ASP.NET Cuando el cliente solicita una pgina Web por primera vez, se genera el siguiente conjunto de eventos: 1. El navegador cliente enva una solicitud GET HTTP al servidor. 2. El parseador ASP.NET interpreta el cdigo fuente. 3. Si el cdigo no se ha compilado todava en una biblioteca de enlace dinmico (DLL), ASP.NET invoca el compilador. 4. El CLR carga y ejecuta el cdigo Microsoft intermediate language (MSIL).
Desarrollo web
75
ASP .NET
Cuando el usuario invoca la misma pgina Web por segunda vez, se genera el siguiente conjunto de eventos: 1. El navegador cliente enva una solicitud GET HTTP al servidor. 2. El CLR carga y ejecuta inmediatamente el cdigo MSIL que ya se ha compilado durante el primer intento de acceso del usuario.
Planear un sitio web de ASP.NET

Antes de crear un sitio web, es decir, antes de empezar a crear las pginas y escribir el cdigo, siempre es til planear el sitio. Esto puede facilitar el diseo de la apariencia total del sitio y de su navegacin. El tamao de un sitio web a menudo puede determinar la cantidad de planeacin que se debe realizar. Un pequeo sitio web de tipo folleto que simplemente proporcione informacin esttica puede ser un sitio relativamente bsico que requiera poco planeamiento. Un sitio web que tiene acceso a un almacn de datos, autentica a los usuarios y presenta restricciones de localizacin y accesibilidad, pueden requerir una mayor planeacin. Si disponemos de un plan, ahorrar tiempo en el desarrollo y el mantenimiento del sitio. En los temas siguientes se trata informacin relacionada con el sitio web en conjunto, que incluye informacin sobre los siguientes aspectos: -El tipo de sitio web que selecciona. -Cmo se navega por el sitio. -Maneras de crear un aspecto y un diseo coherentes para todas las pginas del sitio. -Cmo tener acceso a los datos de un almacn 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 ningn archivo de proyecto y todos los archivos del directorio forman parte del proyecto. En un proyecto de aplicacin web, sin embargo, slo forman parte del proyecto los archivos a los que se hace referencia de forma explcita en el archivo de proyecto de la solucin. Estos archivos se muestran en el Explorador de soluciones y son los nicos archivos que se compilan en una compilacin. El archivo de proyecto de un proyecto de aplicacin web facilita la implementacin de algunos escenarios. Por ejemplo, puede subdividir una aplicacin ASP.NET en varios proyectos de Visual Studio si hace referencia a los archivos en diferentes archivos de proyecto. Tambin puede excluir fcilmente archivos del proyecto.
Desarrollo web
76
ASP .NET
Tener acceso a datos de un almacn de datos El enlace de datos de ASP.NET permite enlazar componentes con orgenes de datos y con propiedades, colecciones, expresiones y mtodos simples. Esto proporciona mayor flexibilidad a la hora de utilizar datos de una base de datos u otros orgenes. Si el sitio web tiene acceso a un almacn de datos, debe plantearse la utilizacin de controles de origen de datos, ya que forman parte de un modelo de datos comn. Este modelo de datos separa el cdigo de acceso a datos y el cdigo de lgica empresarial de las pginas web que forman la capa de presentacin del sitio web. Una capa de acceso a datos consta de mtodos que se utilizan para tener acceso a un almacn de datos. Una capa de lgica empresarial agrega reglas a la capa de acceso a datos, como la restriccin del acceso para ver o cambiar los datos. La capa de presentacin consta de pginas a las que tienen acceso los usuarios para ver y modificar los datos. Tambin debe considerar si el sitio web debe utilizar datos en memoria (almacenados en memoria cach). Si una parte significativa de los datos de aplicacin no cambia con frecuencia y es comn entre diferentes sesiones o usuarios, puede mantener los datos en memoria en el servidor web. De esta forma puede reducir el nmero 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 aplicacin introducir subconjuntos de datos de uno o ms orgenes de datos en el espacio de la aplicacin. Navegacin en sitios Cuando un sitio crece y cuando se mueven sus pginas, rpidamente puede hacerse complicado administrar todos los vnculos. La navegacin 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 vnculos a todas las pginas en una ubicacin central (normalmente un archivo XML). Puede representar esos vnculos en listas o mens de navegacin en cada pgina incluyendo un control SiteMapDataSource para leer informacin del sitio.Una parte clave de la navegacin 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 informacin de navegacin. 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 homognea del sitio web Varias caractersticas de ASP.NET ayudan a crear y mantener un aspecto y un diseo homogneos del sitio web, como los temas de ASP.NET y las pginas maestras de ASP.NET. Estas caractersticas se pueden utilizar en las primeras fases del proceso de desarrollo para proporcionar un aspecto homogneo del sitio web.
Desarrollo web
77
ASP .NET
Los temas de ASP.NET definen el aspecto de pginas y controles en el sitio web. Un tema de ASP.NET puede incluir archivos de mscara, que definen valores de propiedad para los controles de servidor web de ASP.NET. Tambin puede incluir archivos de hoja de estilos en cascada (archivos .css) y grficos. Cuando aplica un tema, puede dar a las pginas del sitio web un aspecto ms 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 pgina que crea. Las pginas maestras de ASP.NET permiten crear un diseo de pgina (una pgina maestra) que se puede aplicar en pginas seleccionadas (pginas de contenido) del sitio web. Las pginas maestras pueden simplificar en gran medida la tarea de crear un aspecto coherente para el sitio. Tambin se pueden anidar pginas principales. Por ejemplo, puede utilizar pginas maestras anidadas para crear un diseo maestro del sitio completo y otro diseo maestro para secciones individuales de un sitio. Tambin puede utilizar pginas maestras con temas. . Utilizar caractersticas de administracin 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 mayora de las aplicaciones web, resulta til mantener el estado entre las distintas solicitudes. ASP.NET proporciona funcionalidad de administracin de estado intrnseca que permite almacenar informacin entre las solicitudes de pgina, como la informacin de clientes o el contenido del carro de la compra. Puede guardar y administrar informacin especfica de la aplicacin, especfica de la sesin, especfica de la pgina, especfica del usuario y definida por el desarrollador. ASP.NET dispone de varios mtodos de administracin de estados que se pueden seleccionar, entre los que se incluyen la utilizacin de cookies, el estado de vista, el estado de sesin, el estado de aplicacin y las propiedades de perfil. Esta informacin puede ser independiente de cualquier control de la pgina, Al planear un sitio web, debe considerar qu mtodos de administracin 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 ms frecuencia y cuya creacin requiere un tiempo de procesamiento significativo. Por ejemplo, si la aplicacin procesa grandes cantidades de datos utilizando una lgica compleja y, a continuacin, los devuelve en un formato de informe, resulta eficiente evitar la creacin de dicho informe cada vez que un usuario lo solicita. De manera similar, si la aplicacin incluye una pgina que procesa datos complejos pero que no se actualiza frecuentemente, no resulta eficiente que el servidor vuelva a crear dicha pgina 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
ms avanzada que expone servicios de expiracin y de dependencia de cambios. Para ayudarle a aumentar el rendimiento de la aplicacin 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 pginas, que permite guardar los resultados del procesamiento de pginas y reutilizarlo, en lugar de volver a procesar la pgina cada vez que un usuario la solicite de nuevo. Si el diseo del sitio web tiene en cuenta el almacenamiento en cach de pginas determinadas, puede crear un sitio web ms eficaz. Infraestructura de seguridad -Adems de las caractersticas 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 autenticacin de Windows que proporciona IIS. Tambin puede administrar la autenticacin mediante la autenticacin de formularios de ASP.NET y la pertenencia de ASP.NET. Adems, puede administrar la autorizacin para el acceso a los recursos de la aplicacin 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 fcil quitar, agregar o reemplazar estos esquemas dependiendo de las necesidades de la aplicacin. ASP.NET siempre se ejecuta con una identidad particular de Windows de modo que puede asegurar su aplicacin 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, tambin debe tener en cuenta los temas de esta seccin. Si incorpora la informacin de estos temas en la planeacin, puede ahorrar tiempo y conseguir un sitio conforme a las normas actuales de web. Accesibilidad La programacin de accesibilidad es el proceso que se encarga de disear y desarrollar aplicaciones que funcionen con el sistema operativo de un equipo para adaptarse a deficiencias especficas, como por ejemplo, una limitacin de movimiento o problemas de visin. ASP.NET puede ayudarle a crear aplicaciones Web con un acceso ms fcil para personas con discapacidades. Las aplicaciones Web accesibles permiten utilizar tecnologas de ayuda, como lectores de pantalla, para trabajar con pginas Web. Las aplicaciones Web accesibles ofrecen las ventajas siguientes:
Desarrollo web
79
ASP .NET
-Pueden utilizarlas un mayor nmero de personas. -Implican principios de diseo que con frecuencia benefician a todos los usuarios, no slo 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 cmo puede ayudarle ASP.NET a seguirlos le permitirn crear aplicaciones con las que las personas que tienen discapacidades tendrn la posibilidad de interaccionar con mayor facilidad. En la mayora de las ocasiones, los controles ASP.NET representan marcado que crea pginas que cumplen las normas de accesibilidad. Tambin pueden exponer propiedades que puede establecer de forma que la pgina cumpla los criterios de accesibilidad. Sin embargo, hay veces en que los controles ASP.NET representan resultados que no cumplen con los estndares de accesibilidad. Globalizacin y localizacin La globalizacin es el proceso mediante el cual se disean y desarrollan aplicaciones que pueden funcionar con diversas referencias culturales. Localizacin es el proceso mediante el cual se personaliza una aplicacin para una referencia cultural y configuracin regional determinadas. Si crea pginas web que leern personas que hablan idiomas diferentes, debe permitir que los lectores vean las pginas en su propio idioma. ASP.NET permite crear una pgina que puede obtener contenido y otros datos basndose en la configuracin de idioma preferido del explorador o en la eleccin explcita 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 orgenes. En la pgina Web ASP.NET, configure controles para obtener los valores de sus propiedades de los recursos. En tiempo de ejecucin, las expresiones de recursos se reemplazan con recursos del archivo de recursos adecuado. Generar pginas individuales y precompilar La generacin de una pgina 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 compilacin que pueden producirse en cualquier parte del sitio. Aunque el proceso de compilacin compila las pginas, 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 produccin. Cuando los usuarios solicitan pginas del servidor de produccin, ASP.NET compila dinmicamente el sitio, realizando de hecho los mismos pasos que el proceso de compilacin realiza en Visual Studio. ASP.NET almacena en cach los resultados que se obtienen para que las pginas 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 publicacin realiza los mismos pasos de compilacin que el proceso de generacin, 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 produccin.
Desarrollo web
81
ASP .NET
Requisitos previo a la continuacin de esta lectura
El alumno y el catedrtico debe contar con lo siguiente: -Procesador Pentium 4 o superiores -Memoria mnima 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 aplicacin fuera del entorno desarrollador Net. Ademas el Net.Framewok se instala con Microsoft Visual Estudio 2005 o 2003
Instalacin de IIS
Instalacin desde el CD de Windows Insertamos el CD, y vamos a Instalacin de Componentes Opcionales de Windows o bien .. Instalacin desde el Panel de Control Vamos al Panel de Control (con Inicio, Configuracin, 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 Control Con estos sencillos pasos estara 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://localhost Hagamos 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
ASP .NET
Entorno desarrollador Visual Studio.NET
Pestaas aspx, aspx.vb Menu
Explorador de Soluciones
Caja de Herramientas
Escenario
Propiedades
Menu de Diseo, Codigo HTML
Sobre este escenario trabajremos durante este periodo. El entorno desarrollador cuenta con una serie de panales pero lo mas usados son los que estn viendo en la imagen superior. Los dems panales los pueden ver solo basta con entrar a la aplicacin y darse un vistazo para ambientarse a este entorno.
Desarrollo web
85
ASP .NET
Crear formularios Web Forms con ASP.NET
Estudiaremos cmo crear y poblar formularios Web Forms. Los formularios Web Forms son pginas Web programables que sirven como interfaz de usuario (IU) para un proyecto de aplicacin Web utilizando ASP.NET. Un formulario Web Form presenta informacin al usuario visualizable en cualquier tipo de navegador, e implementa lgica de aplicacin utilizando cdigo ejecutable en el servidor Los formularios Web Forms estn formados por una combinacin de HTML, cdigo 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 enva al navegador, mientras que el cdigo de soporte y los controles que la componen permanecen en el servidor Web. Esta divisin entre el interfaz en el cliente y el cdigo en el servidor es una importante diferencia entre los formularios Web Forms y las pginas Web tradicionales. Mientras una pgina Web tradicional requiere que todo el cdigo se enve y se procese en el navegador, los formularios Web Forms nicamente necesitan enviar al navegador los controles de la interfaz, y el proceso de las pginas se mantiene en el servidor. Esta divisin entre IU y cdigo aumenta el nmero de navegadores soportados e incrementa la seguridad y funcionalidad de la pgina Web. Extensin .aspx -Atributos de pgina -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> Extensin .aspx Los formularios Web Forms se denominan habitualmente pginas ASP.NET o pginas ASPX. Los formularios Web Forms tienen una extensin .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 pgina Las funciones de un formulario Web Form estn definidas por tres niveles de atributos. Los atributos de pgina definen las funciones globales, los atributos de cuerpo definen cmo se mostrar una pgina y los atributos de formulario definen cmo se procesarn los grupos de controles. La etiqueta <@Page> define atributos especficos de la pgina que utiliza el parseador de pginas ASP.NET y el compilador. nicamente podemos incluir una etiqueta <@ Page> por archivo .aspx. Los siguientes ejemplos son etiquetas <@ Page> tpicas 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: -Language El atributo Language define el lenguaje en el que est escrito el script de la pgina Web. Algunos de los valores de este atributo son: vb, c# y Jscript. -Pgina Codebehind El atributo de pgina Codebehind identifica la pgina de cdigo subyacente que tiene la lgica que soporta el formulario Web Form. Cuando Visual Studio .NET crea un formulario Web Form, como WebForm1.aspx, tambin crea una pgina de cdigo subyacente, WebForm1.aspx.vb o WebForm1.aspx.cs. -SmartNavigation El 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 posicin de desplazamiento y se mantiene la "ltima pgina" en el historial. Smartnavigation nicamente est disponible para los usuarios con Microsoft Internet Explorer 5 o superior. Atributos del cuerpo Los atributos de la etiqueta <Body> definen el aspecto de los objetos que se muestran en el navegador del cliente. La siguiente es una etiqueta <Body> Tpica: <body ms_positioning="GridLayout"> Los atributos de una etiqueta <Body> incluyen:
Desarrollo web
87
ASP .NET
-PageLayout El atributo pageLayout (etiquetado como ms_positioning) determina cmo se posicionan los controles y el texto en la pgina. Existen dos opciones para pageLayout: FlowLayout En FlowLayout, el texto, las imgenes y los controles fluyen por la pantalla, dependiendo del ancho de la ventana del navegador. GridLayout En GridLayout, los campos de texto, las imgenes y los controles de una pgina estn fijados por coordinadas absolutas. GridLayout es el valor de pageLayout predeterminado para Visual Studio .NET. El siguiente cdigo de ejemplo muestra cmo 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 cmo se procesarn los grupos de controles. La etiqueta <Form> es diferente del trmino Web Form utilizado para definir la pgina Web completa. Los atributos de la etiqueta <Form> definen cmo se procesarn los controles. Aunque podemos tener muchos formularios HTML en una pgina, nicamente podemos tener un formulario del lado del servidor en una pgina .aspx. El siguiente ejemplo es de una etiqueta <Form> tpica: <form id="Form1" method="post" runat="server"> ... </Form> Los atributos de una etiqueta <Form> incluyen: -Method El atributo Method identifica el mtodo para enviar valores de control de retorno al servidor. Las opciones de este atributo son: Post Los datos se pasan en pares nombre/valor dentro del cuerpo de la
Desarrollo web
88
ASP .NET
peticin HTTP (Hypertext Transfer Protocol). Get Los datos se pasan en una cadena de consulta. -Runat Una de las principales caractersticas de un formulario Web Form es que los controles se ejecutan en el servidor. El atributo runat="server" hace que el formulario publique informacin de control de retorno a la pgina ASP.NET en el servidor donde se ejecuta el cdigo 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 Visual Studio.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 nuevas Cuando creamos un nuevo proyecto en Visual Studio .NET, se incluye automticamente en el proyecto un formulario Web Form predeterminado denominado WebForm1.aspx. Crear un nuevo proyecto de aplicacin Web ASP.NET y un formulario Web Form predeterminado 1. En Visual Studio .NET, en la Pgina de inicio, hacer clic en Nuevo proyecto.
Desarrollo web
89
ASP .NET
2. En el cuadro de dilogo Nuevo proyecto, hacer clic en Aplicacin Web ASP.NET, escribir el nombre del proyecto en el campo Ubicacin y hacer clic en Aceptar. Visual Studio .NET crea una nueva aplicacin Web y un formulario Web Form predeterminado denominado WebForm1.aspx. Crear formularios Web Forms adicionales Si estamos expandiendo un proyecto existente, podemos utilizar el Explorador de soluciones para agregar rpidamente formularios Web Forms adicionales. - Agregar formularios Web Forms adicionales a un proyecto de aplicacin Web 1. En la ventana del Explorador de soluciones, hacer clic con el botn derecho en el nombre del proyecto, seleccionar Agregar, y hacer clic en Agregar formulario Web Form. Se abrir el cuadro de dilogo Agregar nuevo elemento - NombreProyecto. 2. En el cuadro de dilogo 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 cmo 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 lgica 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 dems funcionalidades relacionadas. Los controles de servidor se utilizan en pginas ASP.NET y en las clases de cdigo 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 lgica 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 accin en el servidor.
Desarrollo web
90
ASP .NET
Funcionalidad incluida La funcionalidad de un control es lo que se produce cuando el usuario hace clic en un botn 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 comn En ASP.NET, los controles de servidor se basan en un modelo de objetos comn, 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 del control. El cdigo HTML siguiente del botn de un control de servidor Web muestra algunos de los atributos tpicos de un control de servidor:
Crear cdigo HTML especfico del navegador

Cuando un navegador interpreta una pgina, los controles de servidor Web determinan el tipo de navegador que solicita la pgina, y enva el cdigo HTML adecuado. Por ejemplo, si el navegador soporta scripting de cliente, como Internet Explorer versin 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 cdigo del lado del servidor y requieren ms viajes de ida y vuelta al servidor para obtener el mismo comportamiento. El siguiente ejemplo es el cdigo HTML de ASP.NET en un formulario Web Form que deberamos 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 pgina, el CLR crea el siguiente cdigo HTML personalizado para Internet Explorer 6: <input name="TextBox1" type="text" value="Introduzca su nombre de usuario" id="TextBox1" style="height:25px;width:238px" /> Como el control de servidor crea cdigo HTML personalizado en funcin de las caractersticas disponibles en el navegador del cliente, podemos escribir cdigo para las ltimas versiones de navegadores sin tener que preocuparnos de que los usuarios que no estn 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 aplicacin que estamos creando. Por defecto, el servidor no tiene disponibles los elementos HTML de una pgina de un formulario Web Form; los elementos HTML son tratados como texto opaco que pasa a travs del navegador. Sin embargo, al agregar el atributo runat="server" se convierten los elementos HTML en controles de servidor HTML, exponindolos por tanto como elementos que podemos programar con cdigo del lado del servidor. Controles de servidor Web Los controles de servidor Web no slo incluyen controles de tipo formulario, como botones y cuadros de texto, sino tambin controles con funcionalidad especial, como el control calendario. Los controles de servidor Web son ms 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 intrnsecos Los controles intrnsecos 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 validacin Los controles de validacin incorporan lgica que permite verificar la entrada de datos de un usuario. Para probar la entrada de un usuario, adjuntamos un control de validacin al control de entrada y especificamos las condiciones de entrada de datos de usuario correctas. Mdulo Validar la entrada de datos de usuario. -Controles ricos estndar Los controles estndar son controles complejos que incluyen mltiples funciones. Ejemplos de controles estndar 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 listas Los controles enlazados a listas pueden mostrar listas de datos en una pgina 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 cdigo HTML de tres controles de tipo botn: un botn HTML, un botn de control de servidor HTML y un botn de control de servidor Web. Todos los controles botn parecen idnticos en el navegador del usuario. El botn HTML nicamente puede invocar eventos del lado del cliente, mientras que el botn de control de servidor HTML y el botn de control de servidor Web producen eventos del lado del servidor. -El siguiente es el cdigo de un control de botn HTML: <INPUT type="button" value="HTML Button"> -Si agregamos el atributo runat="server" el control de botn HTML anterior se convierte en un control de servidor HTML que se ejecutar en el servidor. Adems del atributo runat="server", tambin debemos agregar un atributo id para que el control funcione como un control de servidor. El botn de control de servidor HTML se muestra en el siguiente ejemplo: <INPUT type="button" value="HTML Server Control" id="button1" runat="server"> -El botn de control de servidor Web utiliza cdigo HTML de ASP.NET: <asp:Button id="Button1" runat="server" Text="Web control"/> Guardar el estado de la vista Uno de los retos de los sitios Web es resolver el almacenamiento del estado de los controles (configuracin o entrada de datos del usuario) en una pgina Web mientras el cdigo HTML viaja entre el cliente y el servidor. Como con cualquier tecnologa basada en HTTP, los formularios Web Forms no tienen estado, lo que significa que el servidor no conserva ninguna informacin 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 aade al formulario del lado del servidor indicado por la etiqueta <Form runat="server">, y nicamente registra el estado de los controles en esta seccin. Mientras la pgina viaja desde el cliente al servidor, el estado del control de servidor Web se almacena con la pgina y puede actualizarse en cualquier extremo de la transaccin (en el cliente o el servidor). Como el estado de la pgina Web se guarda dentro del formulario del servidor, la pgina 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 diseo de la pgina 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 peticin, el control _VIEWSTATE se actualiza y se enva 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 configuracin de la pgina permanece coherente de una solicitud a la siguiente. El siguiente ejemplo incluye el cdigo 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 ViewState De 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 mltiples controles, el tamao del campo valor de las propiedades _VIEWSTATE puede ralentizar el rendimiento. Para maximizar el rendimiento de la pgina, podemos deshabilitar el atributo ViewState a nivel de pgina y habilitar ViewState nicamente para determinados controles. Para deshabilitar el almacenamiento del estado de la vista a nivel de pgina Web, estableceremos el atributo EnableViewState de la directiva @Page, como se muestra en el siguiente cdigo: <%@ Page EnableViewState="False" %> Para habilitar el almacenamiento del estado de la vista de un control especfico,estableceremos el atributo EnableViewState del control, como se muestra en el siguiente cdigo: <asp:ListBox id="ListName" EnableViewState="true" Runat="server"></asp:ListBox> Controles de servidor Web Los controles de servidor Web se basan en un modelo de objetos comn; 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 intrnsecos
Control de servidor Web <Asp:button> <Asp:checkbox> Control HTML equivalente <input type=submit> <input type=checkbox> Funcin del control de servidor Web Crea un botn que enva una peticin al servidor. Crea una casilla de verificacin que puede seleccionarse haciendo clic. Crea un hiperenlace a una etiqueta anchor HTML. Crea un rea que se utiliza para Mostrar una imagen. Crea un botn que incorpora la visualizacin de una imagen en lugar de texto. Crea un botn que tiene el Aspecto de un hiperenlace. Crea texto que los usuarios no pueden modificar. Crea una lista de opciones. Permite mltiples selecciones. Crea una divisin sin bordes en el formulario que se utiliza como contenedor para otros controles. Crea un nico control de botn de Opcin. Crea una tabla. Crea un control de cuadro de texto.
<Asp:hyperlink> <Asp:image> <Asp:imagebutton>
<a href=""> </A> <img src=""> <input type=image>
<asp linkButton> <Asp:label> <Asp:listbox> <Asp:panel>
Ninguno <span> </span> <select size="5"> </Select> <div> </div>
<Asp:radiobutton> <Asp:table> <Asp:textbox> Controles de validacin
<input type=radiobutton> <table> </table> <input type=text>
Los controles de validacin son controles ocultos que validan la entrada de datos del usuario comparndolos con patrones predeterminados. La siguiente tabla muestra algunos de los controles de validacin que se utilizan ms habitualmente. Control CompareValidator CustomValidator Funcin Requiere que la entrada concuerde con una segunda entrada o campo existente. Requiere que la entrada concuerde con una condicin como que sean nmeros primos o
Desarrollo web
95
ASP .NET
RangeValidator Requiere que la entrada concuerde con un intervalo especificado. Requiere que la entrada concuerde con un formato especificado como un nmero de telfono de un determinado pas o una contrasea que tenga nmeros y letras. Requiere que el usuario introduzca algn valor antes de que el control sea procesado. Recopila todos los mensajes de error de los controles de validacin para una visualizacin centralizada.
RegularExpressionValidator
RequiredFieldValidator ValidationSummary
Controles ricos estndares Los controles estndares proporcionan una rica funcionalidad a nuestro formulario Web Form insertando funciones complejas. La siguiente tabla muestra los controles ricos disponibles actualmente.. Contro AdRotator lFuncin Muestra una secuencia (predefinida o aleatoria) de imgenes. Muestra un calendario grfico en el que los usuarios pueden seleccionar fechas.
Calendar
Controles enlazados a listas Los 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 CheckBoxList Repeater Funcin Muestra datos como una columna de casillas de verificacin. Muestra informacin 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 ms opciones de formato y presentacin, incluyendo la posibilidad de mostrar informacin en una tabla. El control DataList tambin nos permite especificar el comportamiento de edicin. Muestra informacin, normalmente enlazada a datos en forma tabular, con columnas. Tambin proporciona mecanismos para permitir editar y clasificar. Muestra datos en un men desplegable. Muestra datos en una ventana. Muestra datos en una columna de botones de Opcin.
DataGrid
DropDownList Listbox RadioButtonList
Actividad:
Identificar el cdigo HTML generado por los controles de servidor Web En esta actividad, agregaremos controles de servidor Web a un formulario Web Form y visualizaremos el cdigo fuente en un navegador para determinar qu cdigo HTML se ha enviado al cliente. 1. Iniciar Visual Studio .NET. 2. Crear un proyecto de aplicacin Web y establecer la ubicacin en http://localhost/Practices03. 3. Abrir la pgina WebForm1.aspx. 4. Agregar los controles TextBox, Button, Label, ListBox, Image, Hyperlink y Calendar al formulario Web Form. 5. Hacer clic con el botn derecho en WebForm1.aspx en el Explorador de soluciones y clic en Generar y examinar. 6. Hacer clic con el botn derecho en el navegador y clic en Ver fuente para ver el cdigo HTML enviado al cliente. 7. Cumplimentar la siguiente tabla con las etiquetas HTML del control. Ingrese los siguientes controles asp:textbox asp:button Asp:label asp:listbox asp:image asp:hyperlink asp: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 direccin : http://localhost/ejercicio -Click en aceptar -En el panel de soluciones Explore haga click derecho sobre http://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 Pas -Arrastre 2 botones de radio -A los radio cambie el texto a cada uno "Casado" y "Civil" -Arrastre un botn y cambie el texto por guardar Siga las pantallas para uno mejor orientacin. Se da por entendido que el alumno de programacin 4 ya conoce este entorno por tal no hago mucho incapie en conocer el entorno pero har un pequeo 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
ASP .NET
-En el panel de soluciones Explore haga click derecho sobre http://localhost/ejecicio y luego elija Add Item
Seleccionamos en la caja de herramientas el control calendar y lo arrastramo hacia el escenario
Desarrollo web
101
ASP .NET
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.
Desarrollo web
102
ASP .NET
Arrastramos tres controles label de la caja de herramienta al escenario y cambiamos el texto por: Nombre, Edad, Pas
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.
Desarrollo web
103
ASP .NET
Agregar cdigo a un formulario Web Form con Microsoft ASP.NET
Estudiaremos los distintos mtodos que pueden utilizarse para agregar cdigo a nuestra aplicacin Web con Microsoft ASP.NET. Tambin estudiaremos los procedimientos de evento para los controles de servidor Web, cmo utilizarlos y el orden en que funcionan. Estudiaremos el uso de las pginas de cdigo subyacente, que son el mtodo preferido de Microsoft Visual Studio .NET para agregar cdigo a pginas Web. Finamente, estudiaremos cmo se utilizan los eventos de pgina, en particular al evento Page_Load. Tambin estudiaremos cmo se utilizan las pginas de cdigo subyacente y en qu se diferencian del cdigo en lnea. Tres mtodos para agregar cdigo: -Ubicar el cdigo en el mismo archivo que el contenido (mezclado) -Ubicar el cdigo en una seccin distinta del archivo de contenido (cdigo en lnea ) -Ubicar el cdigo en un archivo distinto (pginas de cdigo subyacente) -Las pginas de cdigo subyacente son el mtodo predeterminado de Visual Studio .NET Cdigo mezclado. El cdigo se encuentra en el mismo archivo que el contenido Web, entremezclado con el contenido Hypertext Markup Language (HTML). Este mtodo es el menos elegido, ya que es difcil leer y trabajar con un archivo de este tipo. Sin embargo, es un mtodo utilizado con frecuencia en pginas Active Server Pages (ASP). Cdigo en lnea. El cdigo se encuentra en el mismo archivo en una seccin SCRIPT distinta, al igual que el contenido HTML. Cdigo subyacente. El cdigo se encuentra en un archivo distinto del contenido HTML. El archivo de cdigo se denomina pgina de cdigo subyacente. Cuando se utiliza Visual Studio .NET, el mtodo predeterminado es ubicar todo el cdigo en una pgina de cdigo 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
Desarrollo web
104
ASP .NET
</SCRIPT> Cuando se utiliza cdigo en lnea en una pgina Web, el HTML y el cdigo se encuentran en secciones distintas de un nico archivo .aspx. Esta separacin se produce para ofrecer claridad en la lectura de la pgina; la funcionalidad, el cdigo y HTML pueden coexistir en cualquier lugar de la pgina.
Qu son las pginas de cdigo subyacente?

El mtodo predeterminado para implementar cdigo en el lado del servidor en Visual Studio .NET es utilizar pginas de cdigo subyacente. Cuando utilizamos pginas de cdigo subyacente, la lgica de programacin se encuentra en un archivo distinto de los elementos visuales de la pgina. Separar la lgica del diseo permite a los desarrolladores trabajar en la pgina de cdigo subyacente mientras los diseadores de la interfaz de usuario (IU) trabajan en la pgina ASP.NET. Poner nombre a las pginas de cdigo subyacente Las pginas de cdigo subyacente contienen toda la lgica de programacin para una sola pgina Web. Cada pgina de una aplicacin Web tiene su propia pgina de cdigo subyacente. De forma predeterminada, una pgina de cdigo subyacente tiene el mismo nombre que la pgina Web a la que est asociada; sin embargo, la pgina de cdigo subyacente tambin tiene una extensin .aspx.vb o .aspx.cs, dependiendo del lenguaje utilizado en la pgina de cdigo subyacente. Por ejemplo la pgina Web PRACTICA2.aspx tendr una pgina de cdigo subyacente Microsoft Visual Basic .NET denominada PRATICA.aspx.vb.
Cmo funcionan las pginas de cdigo subyacente -Crean archivos distintos para la interfaz de usuario y la lgica de la interfaz -Utilizan la directiva @ Page para enlazar los dos archivos -Pre-compilacin o compilacin JIT
Desarrollo web
105
ASP .NET
Para que las pginas de cdigo subyacente funcionen, cada pgina .aspx debe estar asociada a una pgina de cdigo subyacente, y esa pgina de cdigo subyacente debe estar compilada antes de que la informacin se enve de vuelta a un navegador cliente que la solicite. Aunque cada pgina Web Form est formada por dos archivos distintos (la pgina .aspx y la pgina de cdigo subyacente), ambos archivos forman una nica unidad cuando se ejecuta la aplicacin Web. La pgina de cdigo subyacente puede ser precompilada por Visual Studio .NET cuando generamos el proyecto de aplicacin Web, o puede ser compilada just-in-time (JIT) la primera vez que un usuario accede a la pgina. Enlazar los dos archivos La pgina .aspx debe estar asociada a la pgina de cdigo subyacente. Visual Studio .NET agrega los tres atributos siguientes a la directiva @ Page de la pgina .aspx para conseguir esta asociacin: <% @ 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 pgina de cdigo subyacente, y se utiliza si la aplicacin Web no est precompilada. -Inherits. Este atributo permite a la pgina .aspx heredar clases y objetos de la pgina de cdigo subyacente. Compilacin JIT Cuando una pgina est compilada JIT, las pginas de cdigo subyacente se compilan la primera vez que un cliente solicita la pgina .aspx. Tras la primera peticin, las siguientes utilizan el archivo compilado existente. Por tanto, la primera peticin de una pgina dura ms, pero las siguientes peticiones son ms rpidas.
Desarrollo web
106
ASP .NET
Si se desea utilizar la compilacin JIT para una pgina, debera utilizarse el atributo Src de la directiva @ Page. Agregar procedimientos de evento a controles de servidor Web Los formularios Web Forms dinmicos 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 interacta con un formulario Web Form, se genera un evento. Diseamos nuestra aplicacin Web para realizar una determinada tarea cuando se genera el evento. Un procedimiento de evento es la accin que ocurre en respuesta al evento generado. Ejemplo de un procedimiento de evento Cuando 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 tambin agrega la palabra clave Handles, que adjunta el procedimiento de evento al control. La palabra clave Handles permite crear mltiples procedimientos de evento a un nico evento. <form id="form1" method="post" runat="server"> <asp:Button id="cmd1" runat="server"/> </Form> El siguiente cdigo Visual Basic .NET muestra la declaracin de variables necesaria en la pgina de cdigo subyacente. Protected WithEvents cmd1 As _ System.Web.UI.WebControls.Button En el cdigo 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 cdigo 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 informacin adicional; sin embargo, para algunos controles, es de un tipo que es especfico para ese control. Por ejemplo, para un control Web ImageButton, el segundo argumento es de tipo ImageClickEventArgs, que incluye informacin sobre las coordenadas donde el usuario ha hecho clic. El siguiente procedimiento de evento enva las coordenadas de la ubicacin 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.Click Label1.Text = e.X & ", " & e.Y End Sub .
Recreacin 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 extrao 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 pgina

Estudiaremos cmo utilizar los eventos de pgina. En primer lugar, estudiaremos el ciclo de vida de los eventos de pgina. A continuacin, veremos cmo funciona el proceso de postback, y estudiaremos el orden de los eventos. Tambin veremos cmo trabajar con el evento Page_Load. Ciclo de vida de los eventos de pgina
Cuando se solicita una pgina ASP.NET, se producen una serie de eventos de pgina. Estos eventos siempre ocurren en el mismo orden, denominado ciclo de vida de los eventos de pgina. El ciclo de vida de los eventos de pgina consta de los siguientes eventos de pgina, que ocurren en el siguiente orden: 1. Page_Init. Este evento de pgina inicializa la pgina creando e inicializando los controles de servidor Web de la pgina. 2. Page_Load. Este evento de pgina se ejecuta cada vez que se solicita la Pgina. 3. Eventos Control. Este evento de pgina incluye eventos de cambio (por ejemplo, Textbox1_Changed) y eventos de accin (por ejemplo, Button1_Click).
Desarrollo web
109
ASP .NET
4. Page_Unload. Este evento de pgina ocurre cuando la pgina se cierra o cuando el control pasa a otra pgina. El final del ciclo de vida de los eventos de pgina incluye el borrado de la pgina en memoria. La mayora de eventos de control no ocurren hasta que el formulario Web Form se enve de nuevo al servidor. Por ejemplo, los eventos Change se gestionan en orden aleatorio en el servidor despus 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 botn Submit, los eventos Change de los controles de texto no se procesarn hasta que el evento Click enve el formulario al servidor. Postbacks En ASP.NET, los formularios estn diseados para enviar informacin de retorno a la pgina 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 cdigo 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: <%@ 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: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
Gestin de los eventos Page.IsPostback

El evento Page_Load se ejecuta en cada peticin de una pgina, tanto si es la primera peticin de la pgina o un postback. Debido a que el evento Page_Load se ejecuta con cada peticin de una pgina, todo el cdigo del evento Page_Load se ejecutar cada vez que la pgina sea solicitada. Sin embargo, cuando utilizamos eventos postback, es posible que no deseemos que se ejecute nuevamente todo el cdigo. Si ste es el caso, podemos utilizar la propiedad Page.IsPostBack para controlar qu cdigo se ejecuta nicamente cuando la pgina se solicita por primera vez, como muestra el siguiente cdigo: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then 'ejecucin slo en la carga de pgina inicial End If 'este cdigo se ejecuta en cada peticin End Sub
Desarrollo web
111
ASP .NET
Vnculo 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 cdigo de ejemplo muestra cmo vincular un control Label al contenido 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 cdigo de un formulario Web Form que se utiliza para vincular el control Label al cuadro de lista: <%@ 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"> <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 mtodo DataBind de toda la pgina o del control Label, como muestra el siguiente cdigo: Sub Page_Load (s As Object, e As EventArgs) _ Handles MyBase.Load LblSelectedValue.DataBind() End Sub
Desarrollo web
113
ASP .NET
Acceso a datos con Microsoft ADO.NET
Crear un sitio Web dinmico que responda a las peticiones de los usuarios con datos personalizados puede requerir que vinculemos nuestra aplicacin Web a varias fuentes de datos. Microsoft ADO.NET es la herramienta que nos permite acceder programticamente a fuentes de datos desde un formulario Web Form. ADO.NET est diseado para cargar datos desde una fuente de datos y trabajar con esos datos en modo desconectado. Este estado de desconexin permite al formulario Web Form operar de forma semi-independiente de las fuentes de datos, reduciendo as el trfico de red. ADO.NET utiliza Extensible Markup Language (XML) como formato universal de transmisin de datos, lo cual garantiza la interoperabilidad con cualquier plataforma donde est disponible un parser XML. Uso de DataSets frente a DataReaders DataSet Acceso lectura/escritura a Datos Incluye mltiples tablas de distintas bases de datos Desconectado Vinculado a mltiples controles Bsqueda de datos hacia delante y hacia atrs Soportado por las herramientas de Visual Studio .NET DataReaders Slo lectura Basado en una instruccin SQL de una base de datos Conectado Vinculado a un nico control Slo hacia delante Codificacin manual
Los objetos DataSet son objetos complejos que nos permiten almacenar mltiples tablas de datos DataTables desde una fuente de datos. Los objetos DataSet son como una base de datos virtual ubicada dentro de una aplicacin Web. Los objetos DataSet tambin 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 slo hacia delante (forward-only) y de slo lectura (read-only) a los datos de una base de datos.
Desarrollo web
114
ASP .NET
La eleccin entre utilizar objetos DataSet u objetos DataReader debera 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 contrasea almacenada, o se cumplimenta un control enlazado a una lista. Los objetos DataSet se utilizan para un acceso a datos ms complejo, como el acceso a todo el historial de pedidos de un cliente. Algunos de los aspectos relativos al acceso a datos que se deben tener en cuenta a la hora de decidir entre objetos DataSet y DataReader incluyen: - Acceso a datos Si nuestra intencin es leer y escribir a nuestra fuente de datos, debemos utilizar un objeto DataSet. Los objetos DataReader son conexiones de slo lectura y deberan utilizarse nicamente cuando los datos vayan a utilizarse en una situacin de slo lectura. -Acceso a mltiples bases de datos Si nuestra intencin es combinar tablas de una o ms bases de datos, debemos utilizar un objeto DataSet. Los objetos DataReader se basan en una nica instruccin SQL de una sola base de datos. -Enlace a controles Si nuestra intencin es enlazar los datos a ms de un control, debemos utilizar un objeto DataSet. Los objetos DataReader slo pueden vincularse a un nico control. Modo conexin Si nuestra intencin es trabajar en un modo desconectado, debemos utilizar un objeto DataSet. Los objetos DataReader deben ejecutarse en modo conectado. - Bsqueda (scanning) de datos Si nuestra intencin es buscar los datos hacia atrs 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 acceso Si necesitamos acceso de alta velocidad a nuestra fuente de datos, utilizaremos un objeto DataReader. Los objetos DataSet son ms 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. Tambin la sobrecarga es mayor en la creacin del objeto DataSet debido a la capacidad de leer y escribir datos y bsqueda hacia delante y hacia atrs.
Desarrollo web
115
ASP .NET
Los objetos DataReader son ms rpidos debido a la naturaleza del objeto ms ligera. Hay muy poca sobrecarga para el objeto DataReader, ya que ste trabaja slo hacia delante y slo de lectura. -Soporte de herramientas Si nuestra intencin es utilizar Microsoft Visual Studio .NET para crear la conexin a datos, utilizaremos objeto DataSet. Con los objetos DataSet, podemos elegir entre escribir nuestro propio cdigo o utilizar el cdigo mquina de Visual Studio .NET. Con los objetos DataReader, debemos escribir todo el cdigo de soporte. Conexin a una base de datos -Seguridad SQL Server -Crear la conexin -Demostracin: establecer la seguridad SQL Server El primer paso en el uso de una base de datos para soportar nuestra aplicacin Web es crear una conexin segura a la base de datos. Las conexiones no seguras pueden exponer a ataques mal intencionados tanto la aplicacin 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 enva una peticin a la aplicacin Web, y sta se conecta a la base de datos SQL Server para satisfacer la solicitud. Existen dos mtodos principales para que una aplicacin Web se conecte a una base de datos SQL Server: autenticacin en modo mixto y autenticacin en modo slo Windows. El mtodo ms utilizado es la autenticacin slo Windows. Autenticacin En modo mixto La autenticacin en modo mixto utiliza la configuracin predeterminada de ASP.NET y de la aplicacin Web. Cada usuario de la aplicacin Web debe tener una cuenta de usuario aadida al grupo logins de SQL Server. El punto dbil de la autenticacin en modo mixto
Desarrollo web
116
ASP .NET
es que los nombres de usuario y las contraseas se envan al equipo que ejecuta SQL Server en cdigo HTML no encriptado. Estos datos expuestos podran permitir a terceros obtener las credenciales de inicio de sesin. Adems, es necesario administrar cuentas de usuario tanto en el servidor Web como en el equipo que ejecuta SQL Server. Para utilizar la autenticacin en modo mixto, configurar SQL Server en modo de autenticacin mixto (SQL Server y Windows). El siguiente cdigo puede utilizarse para conectar a un SQL Server con autenticacin en modo mixto: Dim strConn As String = "data source=localhost; " & _"initial catalog=northwind; " & _ "user id=CohoUser;password=1Coho Dim conn As New SqlConnection(strConn) Autenticacin slo Windows La autenticacin en modo slo Windows es el mtodo ms utilizado para conectar una aplicacin Web a una base de datos SQL Server. Cuando utilizamos la autenticacin en modo slo Windows, SQL Server no necesita el nombre de usuario y la contrasea. Slo se requiere una confirmacin de que el usuario ha sido autenticado por una fuente de confianza para procesar la peticin a la base de datos. El proceso de la autenticacin en modo slo Windows utiliza una sola cuenta denominada ASPNET para todos los accesos a SQL Server desde la aplicacin Web. Esta nica cuenta elimina los problemas de transmitir nombres de usuario y contraseas no encriptados entre la aplicacin Web y SQL Server, junto con la necesidad de mantener cuentas de usuario en ambos servidores. Con la autenticacin en modo slo Windows, los usuarios acceden al formulario Web Form como usuarios annimos. 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 aplicacin Web. Finalmente, el formulario Web Form que incluye los datos solicitados se devuelven al usuario. Para utilizar la autenticacin en modo slo Windows, configuramos SQL Server con la autenticacin en modo slo Windows. El siguiente cdigo puede utilizarse para conectar a un SQL Server con autenticacin en modo slo 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 autenticacin en modo mixto o slo Windows Cuando utilizamos la autenticacin en modo slo Windows, podemos mantener a SQL Server en el modo de autenticacin predeterminado de slo Windows. Si utilizamos la autenticacin en modo mixto, necesitamos modificar el modo de autenticacin de SQL Server Crear la conexin Para ello, debemos identificar el nombre del servidor de base de datos, el nombre de la base de datos, y la informacin de inicio de sesin 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 conexin que proporciona los parmetros necesarios para crear una conexin a una fuente de Datos. Dim strConn As String = _"data source=localhost; " & _"initial catalog=northwind; " & _ "integrated security=true" Dim conn As New SqlConnection(strConn) Parmetros de la cadena de conexin La siguiente tabla describe algunos de los parmetros ms habituales de un objeto de conexin: Connection Timeout: El intervalo de tiempo de espera en segundos en una conexin al servidor antes de finalizar el intento y generar una excepcin. 15 segundos es el tiempo predeterminado. Data Source: El nombre del servidor SQL Server utilizado cuando se abre una conexin, o el nombre del archivo que se utiliza cuando en la conexin a una base de datos Microsoft Access. Initial Catalog: El nombre de la base de datos. Integrated Security: El parmetro que determina si la conexin es o no segura. Los valores posibles son True, False y SSPI. SSPI es el equivalente a True.
Desarrollo web
118
ASP .NET
Password: La contrasea de inicio de sesin en la base de datos SQL Server. Persist Security Info: Cuando est establecido a False no se devuelve informacin sensible a la seguridad (como la contrasea) como parte de la conexin, si la conexin est abierta o ha estado en un estado abierto. Establecer esta propiedad a True puede constituir un riesgo de seguridad. La configuracin predeterminada es False. Provider: La propiedad que se utiliza para establecer o devolver el nombre del proveedor de la conexin; este parmetro se utiliza nicamente para objetos OleDbConnection. User ID: El nombre de cuenta de inicio de sesin de SQL Server
Acceso a datos con DataSets.

El objeto DataSet representa una copia local de los datos que provienen de una o ms 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 gestin de datos real, un objeto DataSet debe poder interactuar con una o ms fuentes de datos. Para conseguir esta interaccin, el .NET Framework proporciona las clases SqlDataAdapter y OleDbDataAdapter. Un objeto DataAdapter acta 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 conexin 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 disposicin dos clases principales DataAdapter para su uso con bases de datos: -Clase OleDbDataAdapter Esta clase es adecuada para utilizarse con cualquier fuente de datos expuesta por un OLE DB Data Provider. -Clase SqlDataAdapter Esta clase es especfica para una base de datos SQL Server versin 7.0 o posterior. El objeto SqlDataAdapter es ms rpido que el objeto OleDbDataAdapter porque funciona directamente con SQL Server y no debe funcionar a travs 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 instruccin SQL o invocan un procedimiento almacenado. Las propiedades que estn disponibles con la clase DataAdapter se muestran en 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 del DataSet a la fuente de datos. DeleteCommand: La propiedad DeleteCommand elimina filas en la fuente de Datos. 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 DataAdapter Dim 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 cdigo 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 mtodo Fill en el objeto DataAdapter y especificamos el objeto DataTable que deseamos rellenar. El siguiente cdigo rellena la tabla Authors del objeto DataSet ds utilizando un DataAdapter denominado da: da.Fill(ds, "Authors") El mtodo Fill ejecuta implcitamente 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 cdigo de ejemplo muestra cmo crear un objeto SqlDataAdapter da, e invocar a continuacin el mtodo 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 DataSet Dim ds As New DataSet() 'Create the DataAdapter Dim da As New SqlDataAdapter _("select * from Authors", conn) 'Fill the DataSet ds da.Fill(ds, "Authors") Una vez insertados los datos en un objeto DataSet, podemos acceder programticamente a los datos. Como muestra el siguiente cdigo, cada objeto DataSet est formado por uno o ms objetos DataTable a los que podemos hacer referencia por su nombre o posicin ordinal: ds.Tables("Authors") -ods.Tables(0) Las clases DataRow y DataColumn son los componentes principales de una clase DataTable. Utilizaramos un objeto DataRow con sus propiedades y mtodos 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 programtico a DataRowCollection. La propiedad Columns del objeto DataTable proporciona acceso programtico a DataColumnCollection. El siguiente cdigo de ejemplo agrega los nombres de columnas de un objeto DataSet al control ListBox denominado lstItems: Dim col As DataColumn For 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 nmero de filas o columnas de un objeto DataTable, como muestra el siguiente cdigo de ejemplo: ds.Tables("Authors").Rows.Count ds.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 posicin ordinal (basada-en-0) o por el nombre. En el siguiente cdigo, 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 cdigo 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 DataRow Dim str As String For Each r in ds.Tables("Authors").Rows str &= 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
Despus 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 personalizacin 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 cdigo muestra cmo 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
Administracin del estado
Microsoft ASP.NET permite administrar el estado de una aplicacin Web. El estado es la capacidad de una aplicacin Web de conservar la informacin del usuario. La conexin que se establece entre un usuario (el equipo cliente) y un servidor Web se denomina sesin. Las sesiones pueden abarcar mltiples pginas Web y su seguimiento se realiza mediante la administracin del estado. La administracin del estado es el proceso por el cual mantenemos la misma informacin a travs de mltiples peticiones para las mismas o distintas pginas Web.
Al igual que las tecnologas basadas en Hypertext Transfer Protocol (HTTP), los formularios Web Forms no tienen estado, lo que significa que no indican automticamente si las peticiones de una secuencia son todas del mismo cliente ni si una nica instancia de navegador sigue visualizando de forma activa una pgina Web o un sitio Web. Adems, las pginas Web se destruyen y vuelven a crearse a continuacin con cada nueva peticin al servidor Web; por tanto, la informacin de las pginas no existe ms all del ciclo de vida de una nica pgina. ASP.NET ofrece una administracin del estado que guarda informacin en el servidor entre pginas, que ayuda a mantener la continuidad de la informacin del usuario (estado) durante una visita a un sitio Web. Si se mantiene el estado entre pginas, la informacin suministrada originalmente por los usuarios puede ser reutilizada; por ello, los usuarios no necesitan volver a introducir la misma informacin varias veces cada vez que se enva una pgina de retorno al servidor. Por ejemplo, en la ilustracin anterior, el usuario, John Chen, introduce su nombre en el
Desarrollo web
124
ASP .NET
formulario login.aspx. Despus de introducir sus datos personales, esa informacin se enva al servidor y se muestra la pgina siguiente, el formulario greetings.aspx. Sin administracin del estado, la informacin que el usuario ha introducido en la primera pgina se ha perdido. Sin embargo, si se utiliza administracin del estado en la aplicacin Web, puede mantenerse el estado a travs de varias pginas Web. Por tanto, cuando la informacin personal del usuario se enva al servidor, la segunda pgina, 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 pgina de la aplicacin Web.
Tipos de administracin del estado

Administracin del estado en el lado del servidor
Estado de la aplicacin - La informacin est disponible para todos los usuarios de una aplicacin Web Estado de sesin -La informacin est disponible nicamente para el usuario de una sesin especfica Base de datos -En algunos casos, se utiliza el soporte de base de datos para mantener el estado en el sitio Web
Administracin del estado en el lado del cliente

Cookies - Archivo de texto que almacena informacin para mantener el Estado Propiedad ViewState -Conserva valores entre mltiples peticiones para la misma pgina Cadenas de consulta -Informacin aadida al final de una URL
ASP.NET proporciona dos tipos de administracin del estado que pueden utilizarse para mantener el estado entre envos y respuestas al servidor. La eleccin de uno de los dos tipos de administracin del estado disponibles en ASP.NET depende principalmente de la naturaleza de la aplicacin Web. Los dos tipos de administracin del estado son: -Lado servidor Las opciones de la administracin del estado en el lado del servidor utilizan recursos del servidor para almacenar la informacin del estado. La seguridad de estas opciones es mayor que en el lado del cliente. -Lado cliente La administracin del estado en el lado del cliente no utiliza recursos del servidor para almacenar la informacin del estado. Las opciones en el lado del cliente tienden a tener
Desarrollo web
125
ASP .NET
seguridad mnima, pero ofrecen un rpido rendimiento del servidor porque no existe demanda en el servidor para mantener el estado. La administracin del estado en el lado del servidor contiene diferentes opciones a escoger, incluyendo: - Estado de aplicacin En el estado de aplicacin, la informacin est disponible para todos los usuarios de una aplicacin Web; por ejemplo, almacenar el nmero de visitantes a una aplicacin Web. -Estado de sesin En el estado de sesin, la informacin est disponible nicamente para un usuario de una sesin especfica de una aplicacin Web; por ejemplo, almacenar el esquema de colores preferido de un usuario. Base de datos Microsoft SQL Server o un servidor de estado Otra opcin de la administracin del estado en el lado del servidor es utilizar la tecnologa de bases de datos. Podemos utilizar una base de datos SQL Server o un servidor de estado para almacenar informacin especfica del usuario cuando el almacn de informacin es de gran tamao. La base de datos SQL Server o un servidor de estado pueden utilizarse conjuntamente con el estado de sesin y cookies. -El objeto Cache Tambin podemos utilizar el objeto Cache para administrar el estado a nivel de aplicacin. Del lado del Cliente La administracin del estado en el lado del cliente tambin ofrece distintas opciones para mantener el estado. Estas opciones incluyen: -Cookies Una cookie es un archivo de texto que puede utilizarse para almacenar pequeas cantidades de informacin necesarias para mantener el estado. -La propiedad ViewState Los formularios Web Forms proporcionan la propiedad ViewState como una estructura incluida para conservar automticamente valores entre mltiples peticiones a la misma pgina. La propiedad ViewState se mantiene como un campo oculto en la pgina. -Cadenas de consulta Una cadena de consulta es informacin que se aade al final de una URL (Uniform Resource Locator). Un ejemplo tpico podra 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 interrogacin (?) e incluye dos pares atributo-valor, categora y precio.
El archivo Global.asax
El archivo global.asax es un archivo declarativo que se utiliza para la gestin de eventos mientras la aplicacin Web se est ejecutando. Algunas de las caractersticas del archivo global.asax son: -Por cada aplicacin Web ASP.NET se soporta un archivo global.asax. -El archivo global.asax se almacena en la raz del directorio virtual de la aplicacin Web. -El archivo global.asax puede gestionar eventos de aplicacin y de sesin (inicio y final) que pueden utilizarse para inicializar variables de aplicacin y de sesin. -El archivo global.asax es opcional. Si no definimos el archivo, el marco de trabajo de las pginas ASP.NET asume que no hemos definido ningn controlador de eventos de aplicacin o sesin El archivo global.asax soporta tres categoras de eventos: -Eventos que se invocan cuando se solicita una pgina. -Eventos que se invocan cuando se enva la pgina solicitada. -Eventos de aplicacin condicionales. La siguiente tabla lista los eventos que se invocan cuando se solicita una Pgina. Application_BeginRequest: Este evento se invoca cada vez que se recibe una nueva peticin. Application_AuthenticateRequest: Este evento indica que la peticin est preparada para ser autenticada. Application_AuthorizeRequest: Este evento indica que la peticin est preparada para ser autorizada. Application_ResolveRequestCache: Este evento es utilizado por el mdulo de la cach de salida para detener el procesamiento de peticiones que han sido almacenadas en cach. Application_AcquireRequestState: Este evento indica que debera obtenerse el estado para cada peticin.
Desarrollo web
127
ASP .NET
Application_PreRequestHandlerExecute: Este evento indica que el gestor de peticiones est a punto de ejecutarse. Eventos invocados cuando se enva la pgina solicitada Global.asax tambin incluye eventos invocados cuando la pgina solicitada se enva de vuelta al cliente. La siguiente tabla lista estos eventos. Application_PostRequestHandlerExecute: Este evento es el primero disponible despus de que el controlador, como una pgina ASP.NET o un servicio Web, haya finalizado su trabajo. Application_ReleaseRequestState: Este evento se invoca cuando el estado de la peticin debe almacenarse, porque la aplicacin Web ASP.NET finaliza con l. Application_UpdateRequestCache: Este evento indica que el procesamiento de cdigo 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 aplicacin Web ASP.NET. Eventos de aplicacin condicionales Los eventos de aplicacin condicionales son eventos que pueden o no ser lanzados durante le procesamiento de una peticin. La siguiente tabla muestra algunos de los eventos de aplicacin condicionales ms habituales. Application_Start: Este evento se invoca cuando se inicia una aplicacin Web ASP.NET. Application_End: Este evento es otro evento de ocurrencia nica. Es el evento ecproco de Session_Start: Este evento se invoca cuando se inicia la Session de un usuario en una aplicacin Web ASP.NET. Session_End: Este evento es un evento reciproco de Session_Start; este evento se invoca cuando finaliza la sesin de un usuario. Application_Error: Este evento se invoca cuando ocurre un error no controlado en una aplicacin Web ASP.NET.
Desarrollo web
128
ASP .NET
Variables de aplicacin y de sesin
Podemos utilizar las variables de aplicacin y de sesin para compartir informacin entre las pginas de una aplicacin Web ASP.NET. Estudiaremos cmo inicializar y utilizar las variables de aplicacin y de sesin. Tambin estudiaremos cmo especificar la duracin de las variables de aplicacin y de sesin y cmo afectan al almacenamiento escalable. Finalmente, estudiaremos cmo almacenar las variables de aplicacin y de sesin en una base de datos. Inicializamos las variables de aplicacin y de sesin en los procedimientos de eventos Start de los objetos Application y Session del archivo global.asax. Utilizamos el objeto Session para almacenar la informacin necesaria de una sesin de usuario concreta. Las variables que se almacenan en el objeto Session no se desecharn cuando el usuario viaje por las distintas pginas de la aplicacin Web. En lugar de ello, estas variables persistirn durante toda la sesin del usuario. El siguiente cdigo de ejemplo muestra cmo se utilizan las variables de sesin para almacenar el esquema de colores preferido de una determinada sesin de Usuario: 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 informacin de estado entre todos los usuarios de una aplicacin Web. Cuando el primer usuario de la aplicacin Web solicita un archivo .aspx, se crea un objeto Application. El objeto Application se destruye cuando todos los usuarios han abandonado la aplicacin Web y, a continuacin, se descarga la aplicacin Web. Por ejemplo, podramos almacenar el nmero total de visitantes de un sitio Web en una variable de nivel de aplicacin: Sub Application_Start(ByVal Sender As Object, _ByVal e As EventArgs) Application("Numero_visitantes") = 0 End Sub Para utilizar variables de aplicacin y de sesin en ASP.NET, simplemente utilizamos una clave de cadena y establecemos un valor. Para establecer la variable de sesin, debemos proporcionar una clave que identifique el elemento que estamos almacenando, utilizando una instruccin
Desarrollo web
129
ASP .NET
como la siguiente: Session("Color") = "azul La instruccin anterior agrega una clave, denominada Color, al estado de sesin con el valor azul. Puede accederse a las variables de aplicacin en un entorno de mltiples usuarios; por ello, cuando se actualicen los datos de Application, debemos evitar que otros usuarios o aplicaciones actualicen los datos simultneamente. ASP.NET proporciona un sencillo conjunto de mtodos de bloqueo, Application.Lock() y Application.UnLock(), que pueden utilizarse para evitar el acceso mltiple y simultneo de la variable de aplicacin. El siguiente cdigo muestra el uso de los mtodos Application.Lock() y Application.UnLock(): Application.Lock() Application("Numero_visitante") += 1 Application.UnLock() Para utilizar una variable de sesin o de aplicacin en una pgina 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)+=3 Label1.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)+=4 Label1.Text= Session(contador) + 1
Sesiones con y sin cookies

Las cookies son un medio por el cual la aplicacin Web que se ejecuta en el servidor Web puede hacer que un cliente devuelva informacin al servidor Web con cada solicitud HTTP. La devolucin de informacin puede utilizarse para mantener el estado con el cliente entre mltiples peticiones. Las cookies se envan al cliente como parte del encabezado HTTP en una solicitud del cliente, o se envan en una respuesta del servidor. Podemos crear cookies utilizando la propiedad Cookies del objeto Response y la clase Request. La propiedad Cookies representa una coleccin de cookies y es una instancia de la clase HttpCookieCollection. El siguiente cdigo crea una nueva cookie denominada myCookie: Dim objCookie As New HttpCookie("myCookie") Dim now As DateTime = DateTime.Now El siguiente cdigo 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 cdigo establece en una hora el tiempo de expiracin de la cookie: objCookie.Expires = now.AddHours(1) Si no agregamos el cdigo anterior cuando creamos una cookie, sta ser una cookie temporal. La cookie temporal se aade 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 cdigo sobre el tiempo de expiracin 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 pgina Web otra vez hasta que la cookie persistente expire. La expiracin de la
Desarrollo web
131
ASP .NET
cookie persistente depende del tiempo de expiracin establecido en el cdigo. En el cdigo anterior, la cookie persistente se eliminar transcurrida una hora. El siguiente cdigo agrega la nueva cookie a la coleccin 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 cdigo: Set-Cookie: Username=John+Chen; path=/; domain=microsoft.com; Expires=Tuesday, 01-Feb-05 00.00.01 GMT El encabezado del cdigo 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 cdigo de ejemplo anterior limita el dominio dnde el navegador puede enviar la cookie. En el cdigo de ejemplo anterior, la cookie nicamente puede enviarse al sitio Web Microsoft.com. La cookie nunca se enviar a ningn otro sitio Web de Internet. Despus de que el servidor Web cree una cookie, el navegador la devuelve en cada peticin que realiza a ese sitio Web. El explorador devuelve la cookie en un 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, el formato del archivo de texto es: NombreUsuario@NombreDominio.txt 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 tectologa 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 cdigo 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 pgina 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; fontsize: 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">Pgina 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 botn (<b>asp:button</b>) que forman parte de un formulario Web (<b>asp:form</b>). Tambin hay un control imagen (<b>asp:image</b>) que slo se hace visible al pulsar el botn.<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 cdigo tendrn 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

Desarrolloweb, Programacion IV

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Desarrolloweb, Programacion IV

Caricato da

Copyright:

Formati disponibili

DESARROLLO WEB Programacin Web

Universidad Cristiana Evangelica Nuevo Milenio

PROGRAMACIN IV HTML CSS VB ASP.NET

Lenguaje de Marcas de Hipertexto

Concepto Basicos y Estuctura de HTML

Parte del Documento

Partes de un documento HTML

Concepto Basicos y Estuctura de HTML

Parte del Documento

Nuestra primera pagina

Concepto Basicos y Estuctura de HTML

Parte del Documento

Formato de prrafos en HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Atributos para pginas

Concepto Basicos y Estuctura de HTML

Ejemplo de fondo <body bgcolor="black"> <body background="fondo.jpg">

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

</tr> </table> </body> </Html>

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

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

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

<input type="text" name="nombre" value="Perico Palotes"> Genera un campo de este tipo:

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Formularios Otros elementos de formulario

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Concepto Basicos y Estuctura de HTML

Actividades de este capitulo:

Hojas de Estilo en Cascada

Conceptos Basicos de CSS

Conceptos Basicos de CSS

Creacin y hojas de Estilo

Conceptos Basicos de CSS

Conceptos Basicos de CSS

Conceptos Basicos de CSS

Conceptos Basicos de CSS

Conceptos Basicos de CSS

<style type="text/css"> .PRINCIPAL { line-height: 20pt; font-size:15pt;

Conceptos Basicos de CSS

Conceptos Basicos de CSS

Conceptos Basicos de CSS