Prácticas

MANUAL DE
PRCTICAS
PROGRAMACIN WEB
AEB 1055
PLAN ISIC-2010224
INGENIERA EN SISTEMAS
COMPUTACIONALES
ndice
INTRODUCCIN-----------------------------------------------------------------------------------------------------------------1
PRCTICA 1
Instalacin, configuracin y administracin de sitios web------------------------------------------------------2

PRCTICA 2
Compatibilidad con diferentes navegadores-------------------------------------------------------------------------8

PRCTICA 3
Programas con y sin Hojas de Estilo en Cascada-----------------------------------------------------------------17

PRCTICA 4
Controles de formulario en pginas web------------------------------------------------------------------------------27

PRCTICA 5
Validacin de prototipos web-----------------------------------------------------------------------------------------------32

PRCTICA 6
Mecanismos de seguridad--------------------------------------------------------------------------------------------------37
PRCTICA 7
Estndares internacionales-------------------------------------------------------------------------------------------------45
PRCTICA 8
Agenda electrnica------------------------------------------------------------------------------------------------------------49
PRCTICA 9
Contador de Visitas------------------------------------------------------------------------------------------------------------61
PRCTICA 10
Herramientas de interaccin dinmica---------------------------------------------------------------------------------66

PRCTICA 11
Programas dinmicos del lado del servidor--------------------------------------------------------------------------78

PRCTICA 12
Servicios web--------------------------------------------------------------------------------------------------------------------88
LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR---------------------------------------------------------97

LISTA DE BIBLIOGRAFA REQUERIDA----------------------------------------------------------------------------------97
CONTROL DE CAMBIOS DEL MANUAL DE PRCTICAS
98
Programacin Web [AEB-1055]
INTRODUCCIN
La importancia de la materia se centra en conocer y desarrollar cada una de las

etapas de la programacin para la solucin de problemas en un lenguaje de
programacin en ambiente web, por lo que en el siguiente manual se desarrollan las
prcticas que el alumno debe realizar. Se elaboraron un total de doce prcticas que
nos permiten abarcar todos los conceptos necesarios que requiere el alumno para
crear diferentes sitios web, con programacin del lado del cliente y del servidor, hasta
hacer una conexin a una base de datos para consultar la informacin.
Tambin se disearon prcticas que permiten al alumno hacer pginas dinmicas para
que el usuario final tenga una mayor interaccin con el sitio web y de esa forma no se
le haga aburrida y pesada su visita por el portal web.
Fecha de Actualizacin
15/04/2014
Pgina 1
Prctica
INSTALACIN, CONFIGURACIN Y
ADMINISTRACIN DE SITIOS WEB
Observaciones: Esta prctica incluye a las prcticas # 1,2 y 3 del temario de
Programacin Web que dicen Instalar y configurar: base de datos,
servidores web y lenguajes de programacin del lado servidor,

Instalar y configurar: editores de web para la construccin y edicin
de sitios y aplicaciones web y Configurar y administrar sitios web
respectivamente
1.-OBJETIVO
Instalar, configurar y administrar software que permita el manejo de bases de datos, la programacin y
edicin de sitios o aplicaciones web.
2.- MARCO TERICO
Sistemas Gestores de Bases de Datos.
Los sistemas gestores de bases de datos son aplicaciones que permiten a los usuarios definir, crear y
mantener la base de datos, y proporciona un acceso controlado a la misma. El SGBD es la aplicacin
que interacta con los usuarios de los programas de aplicacin y la base de datos.
Algunos de los SGBD ms conocidos son: SQL Server, MySQL, Postgres, FoxPro, Access, DBase,
Oracle y DB2.
Objetivos de los SGBD
Definir la base de datos mediante el lenguaje de definicin de datos (DDL), el cual permite
especificar la estructura, tipos de datos y las restricciones sobre los datos, almacenndolo todo en
la base de datos.
Separar la descripcin y manipulacin del dato, permitiendo un mayor entendimiento de los
objetos, adems de flexibilidad de consulta y actualizacin de datos.

Permitir la insercin, eliminacin, actualizacin, consulta de los datos mediante el lenguaje de
manejo de datos (DML), lo que permite resolver el problema que presentan los sistemas de
archivos, donde hay que trabajar con un conjunto fijo de consultas o la necesidad de tener muchos
programas de aplicaciones.
Proporciona acceso controlado a la base de datos.
15/04/2014
Pgina 2
Gestionar la estructura fsica de los datos y su almacenamiento, proporcionando eficiencia en las
operaciones de la base de datos y el acceso al medio de almacenamiento.

Proporcionar un mecanismo de vistas, que permita a cada usuario tener su propia vista o visin de
la base de datos, el DDL nos permite definir las vistas como subconjuntos de la base de datos.
Eliminar la redundancia de datos, establecer una mnima duplicidad en los datos y minimizar el
espacio en disco utilizado.

Proveer interfaces procedimentales y no procedimentales, permitiendo la manipulacin por
usuarios interactivos y programadores.

Independizar la estructura de la organizacin lgica de los datos (independencia fsica).
Independizar la descripcin lgica de la base de datos y las descripciones particulares de los
diferentes puntos de vista de los usuarios.

Permitir una fcil administracin de los datos.
Servidores Web
Un servidor web es un programa que sirve para atender y responder a las diferentes peticiones de los
navegadores, proporcionndo los recursos que soliciten usando el protocolo HTTP o el protocolo
HTTPS (la versincifrada y autenticada). Un servidor web bsico cuenta con un esquema de
funcionamiento muy simple, basado en ejecutar infinitamente el siguiente bucle:
Espera peticiones en el puerto TCP indicado (el estndar por defecto para HTTP es el 80).
Recibe una peticin.
Busca el recurso.
Enva el recurso utilizando la misma conexin por la que recibi peticin.
Vuelve al segundo punto.
Un servidor web que siga el esquema anterior cumplir todos los requisitos bsicos de los servidores
HTTP, aunque slo podr servir ficheros estticos.
A partir del anterior esquema se han diseado y desarrollado todos los servidores de HTTP que existen,
variando slo el tipo de peticiones (pginas estticas, CGIs, Servlets, etc.) que pueden atender, en
funcin de que sean o no sean multi-proceso o multi-hilados, etc.
Los tipos de servidores que existen son:
Servidor dedicado: Que se refiere a una computadora servidor dedicada exclusivamente al sitio del
cliente
Servidor Compartido:Quiere decir que en un mismo servidor se usara para varios clientes
compartiendo los recursos
Entre los tipos ms encontrados de servidores Web podemos encontrar:
15/04/2014
Pgina 3
Apache: Este es el ms comn y ms utilizado en todo el mundo. Adems, es gratuito, y de
cdigo abierto, as que podramos decir que corre sobre cualquier plataforma.
Microsoft IIS: Slo funciona sobre sistemas Windows,Si se quiere empalar sobre otro sistema,
se deber utilizar una mquina virtual.

Sun Java System Web Server: Este producto pertenece a la casa Sun, y suele empalarse
sobre entorno de este sistema.Sin embargo, como Apache, es multiplataforma, y recientemente

Sun ha decidido distribuirlo con licencias de cdigo abierto (BSD concretamente).
Ngnix: Este es un servidor Web muy ligero y corre sobre sistemas Unix y Windows.Se ha
convertido en el 4 servidor HTTP ms popular de la red y tambin se distribuye bajo licencia

BSD.
Lighttp: Este servidor Web es otro de los ms ligeros que hay en el mercado. Est
especialmente pensado para hacer cargas pesadas sin perder balance, utilizando poca RAM y
poca de CPU. Algunas pginas populares que lo usan son Youtube, Wikipedia y otras que
soportan gran trfico diariamente. Tambin es gratuito y se distribuye bajo licencia BSD.
Editores Web
Algunos de los editores web ms populares son:
Expression Web: es una herramienta profesional con todas las funciones de disear,
desarrollar y publicar sitios web atractivos, caractersticas importantes que se ajusten a los
estndares web.
KompoZer: es un editor de fuente abierta basado en el, ahora descontinuado.
Adobe Dreamweaver: es una aplicacin en forma de estudio (basada en la forma de estudio
de Adobe Flash) que est destinada a la construccin, diseo y edicin de sitios, vdeos y
aplicaciones Web basados en estndares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems) es uno de los programas ms utilizados en el sector del diseo
y la programacin web, por sus funcionalidades, su integracin con otras herramientas como
Adobe Flash y, recientemente, por su soporte de los estndares del World Wide Web
Consortium.
ASP.NET: es un framework para aplicaciones web desarrollado y comercializado por Microsoft.
Es usado por programadores y diseadores para construir sitios web dinmicos, aplicaciones
web y servicios web XML. Apareci en enero de 2002 con la versin 1.0 del .NET Framework, y
es la tecnologa sucesora de la tecnologa Active Server Pages (ASP). ASP.NET est
construido sobre el Common Language Runtime, permitiendo a los programadores escribir
cdigo ASP.NET usando cualquier lenguaje admitido por el .NET Framework.
3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR
Computadora porttil o de escritorio
15/04/2014
Pgina 4
Sistema Operativo Windows

Servidor Web IIS
Editor de sitios web (Visual Studio Express)
Navegador web (Internet Explorer, Mozilla Firefox, Google Chrome, Opera o Safari)
4.- COMPETENCIAS ESPECFICAS

Instalar MySQL
1. Descargar MySQL de la pgina oficial: http://dev.mysql.com/downloads/mysql/
2. Del panel izquierdo seleccionar MySQL Workbench
3. Seleccionar la plataforma para instalar (Microsoft Windows)
4. Elegir el archivo msi para instalar el software
5. Crear una cuenta con Oracle
6. Continuar con la descarga de MySQL Workbench
7. Una vez descargado el archivo, dar doble clic para ejecutarlo
8. Cuando aparezca el asistente pulsar: Next Next Next Install
9. Esperar unos minutos a que se instale
10. Ejecutar el programa instalado
11. Revisar el contenido de las ventanas (creacin de bases de datos, tablas, columnas, etc).
Instalar SQL Server Express

1. Descargar SQL Server Express del sitio: http://msdn.microsoft.com/enus/evalcenter/dn434042.aspx
2. Debe acceder a su cuenta Microsoft con su nombre de usuario y contrasea
3. Seleccionar la opcin de Server Management Studio Express para descargar. Clic en Continue
4. Seleccionar la opcin de bits del sistema operativo a trabajar (32 o 64 bits). Clic en Continue
5. Seleccionar el idioma a descargar (Spanish). Clic en Continue
6. Si aparece la ventana de instalacin de Akamai NetSession Interface, dar clic en descargar el
instalador. Tras unos segundos se inicia la descarga
7. Dar clic en el botn Guardar archivo.
8. Despus de haber descargado el archivo, ejecutar el instalador
9. Apareciendo la ventana de Contrato de licencia, pulsar en Acepto y luego en siguiente.
10. Puede aparecer la opcin de Firewall de Windows, si es el caso, dar clic en Permitir Acceso.
11. Al terminar la instalacin, aparecer la ventana de Instalacin completada, pulsar en el botn
Cerrar.
12. Regresar al navegador para continuar la descarga, para ello, hay que actualizar la pgina
13. Nos mostrar el cuadro de dialogo Guardar Como, elegimos una ubicacin y pulsamos en el botn
Guardar.
14. Dar doble clic para ejecutar el asistente
15. Seguir los pasos del asistente.
16. Ejecutar el SQL Management Studio
17. Revisar el contenido de las ventanas (creacin de bases de datos, tablas, columnas, etc).
Configurar IIS de Microsoft Windows
1. Abrir la ventana principal de Windows
2. Abrir configuracin seguido de panel de control
15/04/2014
Pgina 5

3. Buscar la opcin programas y caractersticas, dar clic para abrirlo
4. En la ventana que aparece, del panel izquierdo dar clic en Activar o desactivar las caractersticas
de Windows
5. Esperar a que aparezca la ventana emergente de Caractersticas de Windows
6. Buscar y activar todas las casillas de verificacin de Internet Information Services
7. Dar clic en Aceptar
8. Esperar unos minutos a que configure el servidor IIS
9. Abrir un navegador de internet
10. En la barra de direcciones escribir: http://localhost
11. Deber aparecer la pgina de IIS8
12. Cerrar el navegador
13. Abrir una ventana del explorador de archivos
14. Entrar a la unidad C: y verificar que este la carpeta inetpub. En el interior de esa carpeta se
guardarn todos nuestros sitios web.
Instalar Visual Studio Express
1. Descargar Visual Studio Express 2013 del sitio:
http://www.visualstudio.com/downloads/download-visual-studio-vs
2. Seleccionar Visual Studio Express 2013 para Web
3. En la seccin Idiioma de Descarga, seleccionar la opcin Descargar
4. Guardar el archivo en C:
5. Instalar el ejecutable
5. RESULTADOS
Al terminar esta prctica, el alumno deber haber instalado, configurado y podr administrar un sistema
gestor de bases de datos, un servidor web y un sistema de edicin para sitios web. Se observar que el
servidor web esta configurado correctamente cuando en la barra de direcciones de un navegador se
teclee http://localhost y nos muestre la ventana de IIS8, en prcticas posteriores se har la conexin a
la base de datos desde el editor de sitios web para comprobar que se configur correctamente la base
de datos MySQL o SQL Server Express. El editor de Visual Studio Express puede ser reemplazado por
Visual Studio Ultimate si se contara con licencia para su uso.
6. CONCLUSIONES
Esta prctica ayuda a los alumnos a saber instalar, configurar y administrar manejadores de bases de
datos, el servidor Web IIS y un editor de sitios web.
7.-REFERENCIAS
http://dev.mysql.com
http://www.visualstudio.com/downloads/download-visual-studio-vs
http://msdn.microsoft.com/en-us/evalcenter/dn434042.aspx
http://msdn.microsoft.com/es-MX/default.aspx
15/04/2014
Pgina 6
15/04/2014
Pgina 7
Prctica
COMPATIBILIDAD CON DIFERENTES

NAVEGADORES
Observaciones: Esta prctica incluye a la prctica # 4 del temario de
Programacin Web que dice Ejecutar los programas realizados en clase en
diferentes navegadores para verificar la compatibilidad del cdigo.
1.- OBJETIVO
Realizar un sitio web el cual tenga diferentes elementos que puedan ser visualizados en diferentes
navegadores y en otros no.
2.- MARCO TERICO

Los navegadores sirven para interpretar la informacin contenida en los sitios web. Han ido
evolucionando muchsimo a lo largo de los aos y cada vez incorporan ms y ms funciones.
Google Chrome
Se trata del navegador web de Google que se ha hecho rpidamente con una cuota inmensa de
usuarios gracias a su sencillez, rapidez y estabilidad. Destaca tambin por la gestin de sus pestaas
as por su alta capacidad de personalizacin a travs de temas y extensiones. Sitio web:
http://www.google.com/intl/es-419/chrome/browser/
Firefox
Se trata de uno de los navegadores ms fiables. Sus constantes mejoras y todo el elenco de
complementos que se pueden descargar para dotarlo de ms funciones hacen de l uno de los
transatlnticos de la navegacin web.Sitio Web: http://www.mozilla.org/es-MX/firefox/new/
Opera
Sin duda uno de los mejores productos por su fiabilidad y altas prestaciones. Compatible con
prcticamente todos los estndares web, utiliza el mismo motor de navegacin que las consolas
Nintendo DS y Wii. Dispone de opciones como cliente de correo integrado o el llamado Opera Turbo,
elemento cuya funcin es sacar un mayor partido a conexiones Wi-Fi saturadas. Sitio web:
http://www.opera.com/es-419
Safari
Safari es el navegador de Apple que ha dado el salto a Windows. Se trata de una herramienta rpida y
ligera con una interfaz de cuidado diseo que lo convierte en una opcin muy a tener en cuenta para
15/04/2014
Pgina 8

moverse en Internet. Dispone de interesantes caractersticas como su lector de RSS o el zoom para
mejorar la lectura de pginas. Sitio Web:
http://support.apple.com/kb/dl1531?viewlocale=es_ES&locale=es_ES
Internet Explorer
Sin duda el navegador ms popular del mercado. A partir de la versin 9 se ha mejorado el rendimiento
en cuanto a los grficos y se ha dotado de un aspecto ms sobrio y minimalista. Se ha mejorado
tambin la seguridad gracias al filtro SmartScreen para una navegacin ms segura o el de contenido
ActiveX para slo activar el que sea de confianza. Sitio Web: http://windows.microsoft.com/eses/internet-explorer/download-ie
HTML5:
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web
modernos. Algunos de ellos son tcnicamente similares a las etiquetas <div> y <span>, pero tienen un
significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio web) y <footer>. Otros
elementos proporcionan nuevas funcionalidades a travs de una interfaz estandarizada, como los
elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los
navegadores ms importantes (Mozilla, Chrome, Opera, Safari e IE).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de
presentacin, como <font> y <center>, cuyos efectos son manejados por Hojas de estilo en cascada.
Tambin hay un renovado nfasis en la importancia del scripting DOM (Data Access Model) para el
comportamiento de la web. 2.0.
Diferencias entre HTML5 y HTML4
Etiqueta
Atributos de la etiqueta

Estndar o ninguno
<!DOCTYPE>
Estndar o ninguno
Comentarios
Atributo Aadido:
media
<a>
href | target | rel | hreflang | media | type
<abb>
Estndar o ninguno
<acronym>
<address>
Etiqueta Eliminada
Estndar o ninguno
<applet>
Etiqueta eliminada
<area>
Estndar o ningunos
<article>
Atributos globales
15/04/2014
Atributo
cambiado: Target
Nueva etiqueta
Pgina 9

<aside>
Atributos globales
Nueva etiqueta
<audio>
autobuffer | autoplay | controls | loop | src
Nueva etiqueta
<b>
Atributos globales
Etiqueta cambiada
<base>
Estndar o ninguno
<basefont>
Etiqueta eliminada
<bb>
Estndar o ninguno
<bdo>
Estndar o ninguno
<big>
Etiqueta eliminada
<blockquote>
Estndar o ninguno
<body>
Estndar o ninguno
<br>
Estndar o ninguno
<button>
Estndar o ninguno
<canvas>
height | width
<caption>
Estndar o ninguno
<center>
Nueva etiqueta
Etiqueta eliminada
<cite>
Atributos globales
<code>
Estndar o ninguno
<col>
Estndar o ninguno
<colgroup>
Estndar o ninguno
<command>
checked | default | disabled | hidden | icon | label |

radiogroup | type
<datagrid>
Estndar o ninguno
<datalist>
Atributos globales
<dd>
Estndar o ninguno
<del>
Estndar o ninguno
<details>
open
Nueva etiqueta
<dialog>
Atributos globales
Nueva etiqueta
<dir>
Estndar o ninguno
<dfn>
Estndar o ninguno
<dl>
Estndar o ninguno
<dt>
Estndar o ninguno
<em>
Estndar o ninguno
<embed>
height | src | type | width
<fieldset>
Estndar o ninguno
<figure>
Atributos globales
<font>
15/04/2014
Nueva etiqueta
Nueva etiqueta
Etiqueta eliminada
<div>
<footer>
Etiqueta cambiada
Nueva etiqueta
Nueva etiqueta
Etiqueta eliminada
Atributos globales
Nueva etiqueta
Pgina 10

<form>
Estndar o ninguno
<frame>
Etiqueta eliminada
<frameset>
Etiqueta eliminada
<h1> ... <h6>
Estndar o ninguno
<head>
Estndar o ninguno
<header>
Atributos globales
hgroup ha sido
eliminada de la
especificacin
HTML5
<hgroup>
<hr>
Ninguno
<html>
Estndar o ninguno
<i>
Ninguno
<iframe>
Estndar o ninguno
<img>
Estndar o ninguno
<input>
<ins>
Nueva etiqueta
Etiqueta cambiada
Etiqueta cambiada
accept | alt | auto-complete | autofocus | cheked |

disabled | form | formaction | formenctype | formmethod | Etiqueta cambiada:
formnovalidate | formtarget | height | list | max |
Aadidos 13
maxlength | min | multiple | name | pattern | placeholder | elementos a type
readonly | required | size | src | step | type | value | width
Estndar o ninguno
<isindex>
Etiqueta eliminada
<kbd>
Estndar o ninguno
<label>
Estndar o ninguno
<legend>
Estndar o ninguno
<li>
Estndar o ninguno
<link>
Estndar o ninguno
<mark>
Atributos globales
<map>
Estndar o ninguno
<menu>
Estndar o ninguno
<meta>
Estndar o ninguno
<meter>
high | low | max | min | optimum | value
Nueva etiqueta
<nav>
Atributos globales
Nueva etiqueta
<noframes>
Etiqueta eliminada
<noscript>
Estndar o ninguno
<object>
Estndar o ninguno
<ol>
Estndar o ninguno
<optgroup>
Estndar o ninguno
15/04/2014
Nueva etiqueta
Pgina 11

<option>
Estndar o ninguno
<output>
form
<p>
Estndar o ninguno
<param>
Estndar o ninguno
<pre>
Estndar o ninguno
<progress>
max | value
Nueva etiqueta
<ruby>
cite
Nueva etiqueta
<rp>
Atributos globales
Nueva etiqueta
<rt>
Atributos globales
Nueva etiqueta
Nueva etiqueta
<q>
<s>
Etiqueta eliminada
<samp>
Estndar o ninguno
<script>
Estndar o ninguno
<section>
cite
<select>
Estndar o ninguno
<small>
Atributos globales
Etiqueta Cambiada
<source>
media | src | type
Nueva etiqueta
<span>
Estndar o ninguno
<strike>
Etiqueta eliminada
<strong>
Estndar o ninguno
<style>
Estndar o ninguno
<sub>
Estndar o ninguno
<sup>
Estndar o ninguno
<table>
Estndar o ninguno
<tbody>
Estndar o ninguno
<td>
Estndar o ninguno
<textarea>
Estndar o ninguno
<tfoot>
Estndar o ninguno
<th>
Estndar o ninguno
<thead>
Estndar o ninguno
<time>
datetime | pubdate
<title>
Estndar o ninguno
<tr>
Estndar o ninguno
<tt>
Nueva etiqueta
Etiqueta eliminada
<u>
Define texto que debe tener un estilo diferente del texto

normal3
<ul>
Estndar o ninguno
<var>
Estndar o ninguno
15/04/2014
Nueva etiqueta
Pgina 12
<video>
src | poster | autobuffer | autoplay | loop | controls | width

| height
<xmp>
Nueva etiqueta
Etiqueta eliminada
Notas:En amarillo aquellas etiquetas introducidas en esta nueva versin (en rojo aquellas que fueron
eliminadas de la especificacin HTML5), en azul las etiquetas que han sido cambiadas todo o en parte
y en gris las etiquetas eliminadas de esta versin. Si bien en la prctica los navegadores no lo estn
teniendo en cuenta para evitar perder cuota de mercado.
Estas diferencias entre HTML5 y HTML4 hacen que para cada navegador actual, se observen de
manera diferente los cambios que cada sitio web puede tener. Aunque HTML5 ya es un estndar
liberado para su desarrollo y uso, algunos navegadores web aun no incorporan el uso de HTML5 por lo
que podemos tener diferentes resultados en la visualizacin de sitios web, como ejemplo, algunos
navegadores aun no soportan el manejo de transiciones y animaciones grficas.
Para una mayor documentacin, revisar las referencias de esta prctica

Servidor Web IIS
Editor de sitios web (Visual Studio Express)
Diferentes navegadores web (Internet Explorer, Mozill Firefox, Opera, Google Chrome, Safari, etc.)

1. Abrir Visual Studio Express
2. Ir a men archivo Nuevo Proyecto
3. De la ventana Nuevo Proyecto, seleccionar del panel izquierdo la opcin Instalado Plantillas C#
- Web.
4. En el panel central seleccionar Aplicacin web vacia de ASP.NET
5. En el campo nombre escribir: compatibilidadNavegadores
6. En el campo ubicacin escribir: c:\PW\pr02
7. Clic en el botn Aceptar
8. En el explorador de soluciones, clic derecho sobre el nombre del proyecto Agregar Pgina
HTML
9. Nombre del elemento: compatibilidad
10. Clic en Aceptar
11. En la vista Cdigo localizar la etiqueta <body> y colocar las siguientes lneas de cdigo dentro de
esa etiqueta:
<body>
15/04/2014
Pgina 13

Pgina que muestra que no todos los navegadores son compatibles con cdigo HTML5
<video src="\videoTusIniciales.mp4" controls style="height: 500px; width:500px">
<track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt" default>
<br /> Tu navegador no soporta videos de HTML5
</video>
</body>
Cambia TusIniciales por las iniciales de tu nombre

12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
Entra al explorador de archivos

Da clic sobre Disco Local (C:)
Presiona Ctrl. + B
Escribe *.mp4 y presiona enter
De los resultados que aparecen, da clic sobre el primero
Presiona ctrl. + C
Abre la ruta: c:\PW\pr02\compatibilidadNavegadores\compatibilidadNavegadores
Presiona la secuencia de teclas Ctrl. + V
Selecciona el archivo que se copio a esa carpeta
Presiona la tecla F2
Escribe: videoTusIniciales y presiona la tecla enter
Cambia TusInicialespor las iniciales de tu nombre.
Cmbiate a la ventana de Visual Studio
Presiona las teclas Ctrl + S para guardar los cambios.
Ve al men Depurar Iniciar sin depurar
Se ejecutar el navegador por defecto con la informacin correspondiente
Da clic en el botn Play del video
Da clic en la barra de direcciones
Presiona ctrl + C
Abre otro navegador
Da clic en la barra de direcciones
Presiona ctrl + V y despus presiona Enter
Realiza los pasos 28 al 33 en diferentes navegadores
Observa que cada navegador muestra los resultados de una forma diferente
Se muestra una tabla con los diferentes resultados que los navegadores mostraron en el momento de
realizar esta prctica:
Tabla 1: Comparacin con diferentes navegadores
Internet
Explorer 10
Muestra el video
15/04/2014
NO
Mozilla
Firefox
29.01
SI
Opera
21.0.1432.67
No
Google
Crhorme
35.0.1916.114
m
SI
Safari
5.1.7
NO
Pgina 14
Ejecuta el video
NO
SI
No
SI
NO
Muestra texto de no
compatibilidad
NO
NO
NO
NO
SI
Compatibilidad
completa
NO
SI
No
SI
NO
5. RESULTADOS
Al finalizar sta prctica, el alumno podr observar las diferentes vistas que puede tener una pgina
web en diferentes navegadores. Tambin deber crear una tabla con los navegadores actuales y sus
versiones con las que se ejecut la pgina.
6. CONCLUSIONES
Muchas personas creen que si abren una pgina web en un navegador se va a visualizar igual que en
otros, pero la realidad es que no todos los navegadores muestran la informacin de la misma forma, el
alumno podr darse cuenta de esto y a la hora que realice un sistema web ser capaz de verificar que
se muestre en varios navegadores la informacin necesaria y as tener la satisfaccin del cliente
7.- REFERENCIAS
http://www.w3.org/TR/html5/
http://www.w3schools.com/html/html5_intro.asp
http://support.apple.com/kb/dl1531?viewlocale=es_ES&locale=es_ES
https://support.google.com/chrome/answer/95346?hl=es-419
http://www.opera.com/es-419
http://www.mozilla.org/es-MX/firefox/new/
http://windows.microsoft.com/es-es/internet-explorer/download-ie
15/04/2014
Pgina 15
Prctica
PROGRAMAS CON Y SIN HOJAS DE

ESTILO EN CASCADA
Observaciones: Esta prctica incluye a las prcticas # 5y 6 del temario de
Programacin Web que dicen Realizar programas donde no se haga el uso de
archivos CSS y Modificar los programas elaborados y aadirle hojas de
estilos externos respectivamente
1.- OBJETIVO
Realizar pginas web que no se utilicen CSS para posteriormente modificarlos y agregarles CSS
observando las mejoras.
2.- MARCO TERICO

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los
documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentacin y es imprescindible para crear pginas web complejas.
Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas ventajas, ya
que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (tambin
llamados "documentos semnticos"). Adems, mejora la accesibilidad del documento, reduce la
complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos
diferentes.
Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular,
texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento:
color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada
elemento dentro de la pgina, etc.
El trabajo del diseador web siempre est limitado por las posibilidades de los navegadores que utilizan
los usuarios para acceder a sus pginas. Por este motivo es imprescindible conocer el soporte de CSS
en cada uno de los navegadores ms utilizados del mercado.
Internamente los navegadores estn divididos en varios componentes. La parte del navegador que se
encarga de interpretar el cdigo HTML y CSS para mostrar las pginas se denomina motor. Desde el
15/04/2014
Pgina 16

punto de vista del diseador CSS, la versin de un motor es mucho ms importante que la versin del
propio navegador.
La tabla 2 muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores ms utilizados por
los usuarios:
Tabla 2 Soporte de Hojas de Estilo en Cascada en diferentes Navegadores
Navegador
Moto
r
CSS 1
CSS
2.1
CSS 3
Google
Chrome
Internet
Explorer
WebKit
Complet
o
Complet
o
Firefox
Gecko
Complet
o
Todos los selectores, pseudo-clases y

muchas propiedades
muchas propiedades a partir de la
versin 10.0 del navegador
muchas propiedades
Safari
WebKit
Opera
Presto
Completo desde la
versin 85 del motor
Completo desde la
versin 7.0 del
navegador
Completo desde la
versin 1.0 del
navegador
Completo desde la
versin 85 del motor
Completo desde la
versin 1.0 del
navegador
Complet
o
Complet
o

muchas propiedades
muchas propiedades
Trident
Los navegadores Firefox, Chrome, Safari y Opera son los ms avanzados en el soporte de CSS, ya que
incluyen muchos elementos de la futura versin CSS 3 y un soporte casi perfecto de la actual version
2.1.
Por su parte, el navegador Internet Explorer slo puede considerarse adecuado desde el punto de vista
de CSS a partir de su versin 7. Internet Explorer 6, utilizado todava por un nmero no despreciable de
usuarios, sufre carencias muy importantes y contiene decenas de errores en su soporte de CSS.
Internet Explorer 8 soporta casi todas las propiedades y caractersticas de CSS 2.1.
La tabla anterior ha sido elaborada a partir de la informacin que se puede encontrar en la pgina
Comparison of layoutengines de la Wikipedia, donde se muestra una comparacin exhaustiva sobre el
soporte de todas las caractersticas de CSS por parte de cada navegador.
Antes de que se generalizara el uso de CSS, los diseadores de pginas web utilizaban etiquetas
HTML especiales para modificar el aspecto de los elementos de la pgina. El siguiente ejemplo muestra
una pgina HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

15/04/2014
Pgina 17

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy
largo.</font></p>
</body>
</html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el
tipo y el tamao de letra de cada elemento de la pgina.
El problema de utilizar este mtodo para definir el aspecto de los elementos se puede ver claramente
con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra que insertar 50 etiquetas
<font>. Si el sitio web entero se compone de 10.000 pginas diferentes, habra que definir 500.000
etiquetas <font>. Como cada etiqueta <font> tiene tres atributos, habra que definir 1.5 millones de
atributos.
Como el diseo de los sitios web est en constante evolucin, es habitual modificar cada cierto tiempo
el aspecto de las pginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio
requerira modificar 500.000 etiquetas y 1.5 millones de atributos.
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial;
font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
15/04/2014
Pgina 18

<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En el ejemplo
anterior, dentro de la propia pgina HTML se crea una zona especial en la que se incluye toda la
informacin relacionada con los estilos de la pgina.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el cdigo
HTML de los contenidos con etiquetas <font>. Como se ver ms adelante, la etiqueta <style> crea una
zona especial donde se incluyen todas las reglas CSS que se aplican en la pgina.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la pgina se
deben ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande. Adems, las
etiquetas <p> de la pgina se deben ver de color gris, con un tipo de letra Verdana y con un tamao de
letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solucin
anterior, pero sigue sin ser una solucin ideal. Como los estilos CSS slo se aplican en la pgina que
los incluye, si queremos que las 10.000 pginas diferentes del sitio tengan el mismo aspecto, se
deberan copiar 10.000 veces esas mismas reglas CSS. Ms adelante se explica la solucin que
propone CSS para evitar este problema.
Una de las principales caractersticas de CSS es su flexibilidad y las diferentes opciones que ofrece
para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento
HTML.
Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona especfica del propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la cabecera del documento (slo dentro de la
seccin <head>).
Ejemplo:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/>
<title>Ejemplo de estilos CSS en el propio documento</title>
<styletype="text/css">
p { color: black; font-family: Verdana; }
</style>
15/04/2014
Pgina 19

</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Este mtodo se emplea cuando se define un nmero pequeo de estilos o cuando se quieren incluir
estilos especficos en una determinada pgina HTML que completen los estilos que se incluyen por
defecto en todas las pginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificacin en los estilos definidos, es
necesario modificar todas las pginas que incluyen el estilo que se va a modificar.
Los ejemplos mostrados en este libro utilizan este mtodo para aplicar CSS al contenido HTML de las
pginas. De esta forma el cdigo de los ejemplos es ms conciso y se aprovecha mejor el espacio.
Definir CSS en un archivo externo.
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML
enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es ms que un archivo simple de texto
cuya extensin es .css Se pueden crear todos los archivos CSS que sean necesarios y cada pgina
HTML puede enlazar tantos archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los
siguientes pasos:
1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:
p{color:black;font-family: Verdana;}
2) Se guarda el archivo de texto con el nombreestilos.cssSe debe poner especial atencin a que el
archivo tenga extensin.css y no .txt
3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta<link>:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<linkrel="stylesheet"type="text/css"href="/css/estilos.css"media="screen"/>
</head>
15/04/2014
Pgina 20

<body>
</body>
</html>
Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus contenidos
tambindescarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a
los contenidos de la pgina.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:
rel: indica el tipo de relacin que existe entre el recurso enlazado (en este caso, el archivo CSS) y
la pgina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores estn estandarizados y para los archivos CSS
su valor siempre es text/css

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o
absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Ms adelante se
explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con mucha
diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de pginas
HTML, por lo que se garantiza la aplicacin homognea de los mismos estilos a todas las pginas que
forman un sitio web.
Con este mtodo, el mantenimiento del sitio web se simplifica al mximo, ya que un solo cambio en un
solo archivo CSS permite variar de forma instantnea los estilos de todas las pginas HTML que
enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, tambin se
puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a
continuacin:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<styletype="text/css"media="screen">
@import '/css/estilos.css';
</style>
</head>
15/04/2014
Pgina 21

<body>
</body>
</html>
En este caso, para incluir en la pgina HTML los estilos definidos en archivos CSS externos se utiliza
una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla
CSS (con la nica excepcin de la regla @charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas
simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas @import
son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@importurl('/css/estilos.css');
@importurl("/css/estilos.css");

Servidor Web
Editor de sitios web Visual Studio Express
Navegadores Web (Internet Explorer, Mozill Firefox, Opera, Google Chrome, Safari, etc.)

1. Abrir una ventana de visual studio express
2. Men archivo nuevo proyecto
3. Del panel derecho, seleccionar: Plantillas Visual C# - Web
4. En el panel central seleccionar Aplicacin Web vaca de ASP.NET
5. En el campo nombre colocar: hojasEstilo
6. En el campo ubicacin: c:\PW\pr03
8. En el explorador de soluciones, dar clic derecho sobre el nombre de nuestro proyecto Agregar
Pgina HTML
9. En el campo Nombre de elemento escribir: hojascss
11. En la vista cdigo escribir dentro de la etiqueta body lo siguiente:
<body>
<div id_="encabezado">
<h1>
Conferencias Magistrales
</h1>
15/04/2014
Pgina 22

</div>
<br />
<div id="central">
<table border="3">
<tr>
<th>Ponenete</th>
<th>Conferencia</th>
<th>Horario</th>
</tr>
<tr>
<td>Dr. Aaron Diaz Mazariego</td>
<td>Modal Logic</td>
<td>9:00 - 10:00</td>
</tr>
<tr>
<td>Dr. Heriberto Contreras Jurez</td>
<td>Razonamiento matemtico</td>
<td>10:00 - 11:00</td>
</tr>
<tr>
<td>Dr. Efren Diaz Jimenez</td>
<td>El amor por las matemticas</td>
<td>11:00 - 12:00</td>
</tr>
<tr>
<td>Dr. Everardo Altamirano Sierra</td>
<td>El nmero de oro y la ciencia de la computacin</td>
<td>12:00 - 13:00</td>
</tr>
</table>
</div>
<div id="inferior">
<p>Informes con la Dra. Diana Rodriguez Hernndez</p>
</div>
</body>
12.
13.
14.
15.
Presionar la secuencia de teclas Ctrl + shift + S

Ir al men Depurar Iniciar sin depurar
Se abrir el navegador por defecto.
Observar los resultados obtenidos
Ahora se aplicarn estilos a esa pgina

1. Cmbiate a la ventana de Visual Studio
2. En el explorador de soluciones Clic derecho sobre el nombre del proyecto, seleccionar Agregar Hoja de estilos
3. Escribir misEstilos en el cuadro de dialogo. Clic en Aceptar
4. Se abrir el archivo misEstilos.css, agregar el siguiente cdigo:
body {
background-color:burlywood;
15/04/2014
Pgina 23

}
h1{
font-family:'Bookman Old Style';
text-align:center;
}
p{
font-family:'Courier New';
color:forestgreen;
}
table {
border-style:groove;
border-color:red;
}
div#inferior {
font-family:Calibri;
font-size:10px;
}
div#central {
font-family:'Cambria Math';
font-size:13px;
color:blue;
}
th {
color:red;
background-color:black;
}
5. Presiona la secuencia de teclas Ctrl. + S para guardar los cambios.

6. Cmbiate a la ventana de hojascss.html
7. Localiza la etiqueta <head> y escribe antes de cerrar esa etiqueta la siguiente lnea <link
href="misEstilos.css" rel="stylesheet" />
<link href="misEstilos.css" rel="stylesheet" />

</head>
8.
9.
10.
11.
Ve al men Depurar iniciar sin depurar

Se abre la ventana del navegador por defecto
Observa los cambios en la pgina
Cierra el navegador
5. RESULTADOS
Al finalizar esta prctica, el alumno podr observar los cambios de diseo en un sitio web que no tiene
incluido las hojas de estilo en cascada y al modificarlo para incluirle un archivo que contenga
instrucciones para la hoja de estilo.
15/04/2014
Pgina 24
6. CONCLUSIONES
Esta prctica ayuda a los estudiantes a escribir menos cdigo y as estandarizar las pginas web de su
sitio web. Las hojas de estilo en cascada (CSS por sus siglas en ingls) pueden ser almacenadas en
diferentes archivos con extensin .css o las instrucciones pueden ser escritas dentro de la etiqueta
<head> de las pginas web, solo haciendo referencia a la instruccin deseada
7.- REFERENCIAS
http://librosweb.es/css/
http://www.w3schools.com/css/DEFAULT.asp
http://www.w3.org/Style/CSS/
15/04/2014
Pgina 25
Prctica
CONTROLES DE FORMULARIO EN
PGINAS WEB
Observaciones: Esta prctica incluye a las prcticas 7, 8, 9, 10 y 11 # 4 del
temario de Programacin Web que dicen Realizar programas en donde se
haga el uso de los controles y modifiquen sus propiedades, Realizar
programas en donde se haga el uso de paso de parmetros entre pginas
web, Realizar programas en donde se le aplique estilos a los diferentes
controles de los formularios, Realizar programas en donde se haga el uso de
cuadros de lista dependientes, como por ejemplo: pases y estados y
Realizar programas donde se manipulen los controles a travs del lenguaje
de programacin del lado cliente respectivamente.
1.- OBJETIVO
Crear pginas web que permitan utilizar diferentes controles dentro de un formulario para una mayor
interaccin con el usuario.
2.- MARCO TERICO

Un formulario web dentro de una pgina web permite al usuario introducir datos los cuales son
enviados a un servidor para ser procesados. Los formularios web se parecen a los formularios de papel
porque los internautas llenan dichos formularios usando casillas de seleccin, botones de opcin, o
campos de texto. Por ejemplo, los formularios web pueden ser usados para introducir datos de envo o
datos de una tarjeta de crdito con el objetivo de solicitar un producto o bien ser utilizada para solicitar
datos (p. ej., al buscar en un motor de bsqueda).
Adems de servir como plantillas para nueva informacin, los formularios web tambin pueden ser
usados para consultar y mostrar informacin existente en forma similar a los formularios de
combinacin de correspondencia, incorporando las mismas ventajas. La separacin entre la estructura
y los datos subyacentes de un mensaje permite a ambos variar independientemente. El uso de
formularios webs para este propsito evita los problemas asociados con la creacin explcita de pginas
web separadas para cada registro en una base de datos.
Los formularios web estn definidos en lenguajes de programacin como HTML, Perl, Java o .NET. Las
implementaciones de estos lenguajes usualmente invocan automticamente los idiomas de la interfaz
15/04/2014
Pgina 26

de usuario y otras de sus caractersticas, tales como el diseo estructural, y tema, minimizando el
tiempo, el costo y el tiempo de programacin.
Los controles de servidor Web ASP.NET son objetos de pginas Web ASP.NET que se ejecutan cuando
se solicita la pgina y representan el formato en un explorador. Muchos controles de servidor Web son
similares a elementos HTML conocidos, como botones y cuadros de texto. Sin embargo, otros controles
abarcan un comportamiento complejo, por ejemplo un control de calendario o los controles que
administran conexiones de datos.
Dentro de visual studio 2010, para el desarrollo web, tenemos las siguientes clasificaciones de
controles y algunos de los controles ms comunes:
Controles estndar del Cuadro de herramientas
Calendar (Control de servidor Web, Visual Studio)
CheckBox y CheckBoxList (Controles de servidor Web, Visual Studio)
DropDownList (Control de servidor Web, Visual Studio)
FileUpload (Control de servidor Web, Visual Studio)
HiddenField (Control de servidor Web, Visual Studio)
HyperLink (Control de servidor Web, Visual Studio)
Image (Control de servidor Web, Visual Studio)
ImageMap (Control de servidor Web, Visual Studio)
Label (Control de servidor Web, Visual Studio)
ListBox (Control de servidor Web, Visual Studio)
Literal (Control de servidor Web, Visual Studio)
Localize (Control de servidor Web, Visual Studio)
MultiView y View (Controles de servidor Web, Visual Studio)
Panel (Control de servidor Web, Visual Studio)
PlaceHolder (Control de servidor Web, Visual Studio)
RadioButton y RadioButtonList (Controles de servidor Web, Visual Studio)
Substitution (Control de servidor Web, Visual Studio)
Table, TableRow y TableCell (Controles de servidor Web, Visual Studio)
TextBox (Control de servidor Web, Visual Studio)
Wizard (Control de servidor Web, Visual Studio)
XML (Control de servidor Web, Visual Studio)
Seguridad de controles estndar
15/04/2014
Pgina 27
Controles de datos del Cuadro de herramientas

Controles de validacin del Cuadro de herramientas
Controles de exploracin del Cuadro de herramientas
Controles de inicio de sesin del Cuadro de herramientas
Controles HTML para pginas Web ASP.NET
Controles de usuario Web ASP.NET (Visual Studio)
Servidor Web
Editor de sitios web
Navegador Web

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
Abrir una ventana de Visual Studio 2012

Abrir men Archivo Nuevo Proyecto
En la ventana nuevo proyecto, dar clic en Plantillas Visual C# - Web
Del panel central, seleccionar Aplicacin Web vaca de ASP.NET
Llena el campo nombre con: controlesFormulario
El campo ubicacin llnalo con: c:\PW\pr04
Revisa que la opcin Crear directorio para la solucin este activado
Clic en Aceptar
En el explorador de soluciones, dar clic derecho en el nombre de nuestro proyecto
Seleccionar la opcin agregar pgina HTML
En el cuadro de dilogo: Especificar nombre para el elemento escribir formulariosWeb
Clic en Aceptar
Agrega un primer nivel de encabezado dentro de la etiqueta <body>
<h1>Contacta con los organizadores del Congreso</h1>
14. Agrega la direccin de la compaa usando dos prrafos y un salto de lnea:

<h1>Contacta con los organizadores del Congreso</h1>
<p>Conferencias Multidisciplinarias</p>
<p>Avenida Insurgentes No. 1192-A<br />
15/04/2014
Pgina 28

San Martn Texmelucan<br />
Puebla<br />
<em>Mxico</em></p>
15. Agrega un enlace a la direccin de correo electrnico de la empresa

<p>
<a href="mailto:contact@multicong.com">
contact@multicong.com</a>
</p>
16. Agrega el siguiente prrafo para invitar a los usuarios a ponerse en contacto con la empresa
organizadora de congresos:
<p>
Si desea mas informacin sobre las conferencias o sobre la empresa multicong para
solicitar nuestros servicios, favor de llenar el siguiente formulario. Los campos marcados
con <strong>Negrita </strong> son obligatorios.
</p>
17. Guarda el archivo

18. Escribe la siguiente etiqueta debajo del cdigo escrito anteriormente
<form method="Post" action="soporte.aspx">
</form>
19. Agrega el elemento <fieldset> y el botn submit en el formulario (deber ir entre las etiquetas
<form > y </form>) Escribe las instrucciones para colocar dentro del formulario los campos de
nombre, Telefono, correo electrnico y mensaje. El cdigo resultante deber ser como el siguiente:
<form method="Post" action="soporte.aspx">
<fieldset>
<legend>
Tus datos y comentarios
</legend>
<ol>
<li>
<label>
<strong>Nombre</strong><br />
<input type="text"
name="NombreUsuario" />
</label>
</li>
<li>
<label>
Telefono<br />
<input type="text"
name="Telefono" />
</label>
</li>
<li>
<label>
Correo Electrnico<br />
<input type="text"
name="correoE" />
15/04/2014
Pgina 29

</label>
</li>
<li>
<label>
<strong>Mensaje</strong><br />
<textarea name="Mensaje"
cols="30" rows="10">Escribe aqui tu mensaje
</textarea>
</label>
</li>
</ol>
<input type="submit" value="Enviar" />
</fieldset>
</form>
20. Guarda los cambios

21. Presiona la tecla F5 para abrir el navegador
22. Observa los cambios efectuados
5. RESULTADOS
Al finalizar esta prctica el alumno mostrar una pgina web con un formulario que deber llenar; el
formulario deber contener etiquetas, cuadros de texto, textarea y un botn de submit. Solicitar a los
alumnos agreguen ms controles web dentro del formulario. Los controles web que se agregarn
dependern del profesor que este impartiendo el curso. As mismo el instructor podr solicitar que cada
pgina creada tenga hojas de estilo en cascada para ir aplicando los conocimientos de prcticas
anteriores.
6. CONCLUSIONES
Esta prctica hace uso de diferentes controles web dentro de una pgina web, los controles web nos
ayudan a manejar un formulario para el llenado de datos y envo de informacin hacia un servidor de
base de datos, de correo electrnico o algn otro tipo.
7.- REFERENCIAS
http://msdn.microsoft.com/es-mx/library/bs302eat%28v=vs.80%29.aspx
http://www.es-asp.net/tutoriales-asp-net/tutorial-61-121/introduccion-a-los-controles-elementosweb.aspx
15/04/2014
Pgina 30
Prctica
VALIDACIN DE PROTOTIPOS WEB

Observaciones: Esta prctica incluye a las prcticas # 12y 13 del temario de
Programacin Web que dicen Realizar prototipos de proyectos web
completos y Realizar programas en donde se lleve a cabo la validacin de
entrada de datos desde el lado del cliente y el lado servidor respectivamente.
1.- OBJETIVO
Crear pginas web que permitan validar diferentes campos dentro de un formulario para tener una
mayor seguridad y consistencia en la informacin que enva el usuario.
2.- MARCO TERICO

La validacin de formularios del lado del cliente ha sido un problema que siempre se ha solucionado
con la utilizacin de Javascript, ya sea con cdigo propio o de terceros. Esto es debido a que en el
pasado era siquiera impensable el tener una solucin con HTML puro, pero con la llegada del conjunto
de especificaciones y tecnologas que componen el actual HTML5, ahora esto es posible, aunque con
la clara desventaja de que todava no es soportado por la mayora de los navegadores y quienes los
soportan tienen su forma particular de ejecutarse, sin embargo es importante tenerlo presente, ya que
en el futuro prximo ser de una utilidad invaluable.
El atributo required
Al incluir el atributo required dentro de un elemento <input>, automticamente se hace obligatorio su
llenado y al ser un atributo tipo booleano, solo se requiere su presencia sin ms.
Cdigo:
<inputtype="text"name="nombre"required>
El atributo title
15/04/2014
Pgina 31

En el momento en que se encuentra un error de validacin se ejecuta la accin por defecto del
navegador, normalmente aparece un pequeo globo emergente (tooltip) conteniendo un texto de
advertencia. Aadiendo el atributo title en la etiqueta <input>, se puede extender la informacin
mostrada.
Cdigo:
<input type="text" name="nombre" title="Se necesita un nombre" required>
El atributo pattern y los tipos de <input>

Como se mencion anteriormente, con required slo se necesita de cualquier valor en el elemento
<input> para ser vlido, pero utilizando el atributo pattern en conjunto, se logra que se verifique no solo
la presencia de un valor, sino que este valor debe contener un formato, una longitud o un tipo de dato
especifico. Esto ltimo se logra definiendo un patrn con expresiones regulares.
input type="text" pattern=
Cdigo:
<inputtype="text"pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+
(?:\.[a-zA-Z0-9-]+)*$"name="email"required>
Con el patrn anterior se valida un formato valido de correo electrnico (mail@example.com), pero en
la prctica esto resulta un tanto absurdo, ya que definiendo un tipo email en la etiqueta <input>, el
navegador por s mismo hace la validacin del tipo en cuestin.
input type="email"
Cdigo:
<input type="email" name="email" required>
Es lo mismo con el resto de los tipos de <input>: search, url, tel, email, password, date pickers, number,
checkbox, radio y file. Por lo tanto el potencial del atributo pattern recae en ser ms especfico en el tipo
de formato y longitud que se requiere. Por ejemplo, supongamos que se necesita que el usuario ingrese
una direccin valida de IPV4, lo hacemos de la siguiente manera:
Cdigo :
15/04/2014
Pgina 32

<input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
title="0.0.0.0" name="ipv4">
Cuatro bloques de uno a tres dgitos divididos por puntos, es la notacin punto-decimal de una
direccin vlida de IPV4.

Servidor Web
Navegador web

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
Abrir una ventana de visual Studio

Llena el campo nombre con: validacionesWeb
Clic en Aceptar
Seleccionar la opcin agregar pgina HTML
En el cuadro de dilogo: Especificar nombre para el elemento escribir datosEntrada
Clic en Aceptar
En la vista Cdigo, entre las etiquetas <body> y </body> escribir las siguientes lneas de cdigo
para crear un formulario:
<h1>Nuevo Registro</h1>
<p>Por favor llena los siguientes campos para completar tu registro:</p>
<form id="frmRegistro" name="registro" method="post" action="registro.aspx">
<fieldset>
<legend>Nuevo Usuario</legend>
<label>Nombre</label><br />
<input id="nombreContacto" name="nombreContacto" type="text" placeholder="Nombre"
required="required" />
<input id="Apellidos" name="Apellidos" type="text" placeholder="Apellidos"
required="required" /><br />
<label>Correo</label><br />
<input id="correoE" name="correoE" type="email" placeholder="Correo Electrnico"
required="required" /><br />
15/04/2014
Pgina 33

<label>Contrasea para acceder</label><br />
<input id="contrasenia" name="contrasenia" type="password" placeholder="Contrasea para
este sitio" required="required" title="Contrasea para ingresar a este sitio"/><br />
<label>Edad</label><br />
<input id="edad" name="edad" type="number" placeholder="Escribe tu edad" title="Debes
ser mayor de edad"/><br />
<label>Numero de Referencia</label><br />
<input id="referencia" name="referencia" type="text" pattern="[0-9]{2}[A-Z]{3}"
placeholder="2 digitos y 3 letras maysculas" title="2 digitos y 3 letras maysculas"/><br />
<label>Sitio Web</label><br />
<input id="website" name="website" type="url" placeholder="Sitio Web" title="Escribe tu sitio
web" required="required"/><br />
<button type="submit" value="Enviar">Enviar</button>
</fieldset>
</form>
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Guarda los cambios efectuados

Presiona la secuencia de teclas Ctrl. + F5 para ejecutar sin depurar
Observa el formulario en el navegador (preferentemente Firefox)
En algunos navegadores los resultados sern diferentes a los esperados
Presiona el botn Enviar
Observa los cambios en el formulario
Llena los datos correctos en los campos Apellidos y contrasea.
Llena el formulario con datos incorrectos en los campos de correo, nmero de referencia y sitio
web
Pulsa en el botn enviar.
Escribe correctamente el campo Nombre
Pulsa el botn enviar.
Cierra el navegador.
5. RESULTADOS
Los resultados obtenidos con sta prctica son que el usuario valide diferentes tipos de campos de
entrada utilizando tecnologa de HTML5, al llenar el formulario el usuario deber colocar datos errneos
en algunos campos y otros campos no los deber llenar, eso le arrojar mensajes de validacin de los
campos requeridos o que el formato que se esta colocando es errneo.
6. CONCLUSIONES
Al finalizar sta prctica, el alumno podr observar como se pueden validar campos de entrada en
formularios para que al momento de enviar la informacin, sea la correcta y este completa.
15/04/2014
Pgina 34

7.- REFERENCIAS
https://developer.mozilla.org/es/docs/HTML/HTML5/Forms_in_HTML5
http://www.programacion.com/articulo/validar_formularios_en_html_5_sin_la_necesidad_de_utilizar_jav
ascript_506
15/04/2014
Pgina 35
Prctica
MECANISMOS DE SEGURIDAD
Programacin Web que dice Realizar programas en donde se implementen
mecanismos de seguridad para el acceso de informacin.
1.- OBJETIVO
Realizar pginas web que permitan controlar el acceso de informacin a usuarios no autorizados.
2.- MARCO TERICO
Cookies
Las cookies proporcionan un medio para almacenar informacin especfica del usuario en las
aplicaciones Web. Por ejemplo, cuando un usuario visita un sitio, las cookies pueden emplearse para
almacenar las preferencias del usuario u otra informacin. Cuando el usuario visite el sitio Web de
nuevo, la aplicacin podr recuperar la informacin que almacen previamente.
Qu son las cookies?
Una cookie es un pequeo fragmento de texto que acompaa a las solicitudes y a las pginas mientras
stas se transmiten del servidor Web al explorador y viceversa. La cookie contiene informacin que la
aplicacin Web puede leer cada vez que el usuario visita el sitio.
Por ejemplo, si un usuario solicita una pgina de un sitio y la aplicacin no solo enva una pgina, sino
tambin una cookie que contiene la fecha y la hora, cuando el explorador del usuario obtenga la pgina,
tambin obtendr la cookie, que se almacenar en una carpeta en el disco duro del usuario.
Ms adelante, si el usuario solicita de nuevo una pgina del mismo sitio, cuando introduzca la direccin
URL, el explorador buscar en el disco duro local una cookie asociada a dicha direccin. Si la cookie
existe, el explorador la enviar al sitio junto con la solicitud de la pgina. A continuacin, la aplicacin
podr determinar la fecha y hora en que el usuario visit el sitio por ltima vez. Podra utilizar dicha
informacin para mostrar un mensaje al usuario o comprobar una fecha de caducidad.
Las cookies estn asociadas a un sitio Web, no a una pgina especfica, por lo que el explorador y el
servidor intercambiarn informacin de cookies independientemente de la pgina que el usuario solicite
en su sitio. Todos los sitios que visita el usuario pueden enviar una cookie al explorador del usuario;
ste las almacenar independientemente.
15/04/2014
Pgina 36
Las cookies permiten a los sitios Web almacenar informacin sobre los visitantes. De forma ms
general, las cookies son una manera de mantener la continuidad en una aplicacin Web, es decir, de
realizar la administracin de estados. Excepto durante los breves momentos en los que estn
realmente intercambiando informacin, el explorador y el servidor Web estn desconectados. Las
solicitudes que realiza un usuario a un servidor Web se tratan por separado unas de las otras. Sin
embargo, muchas veces, es til para el servidor Web reconocer a los usuarios cuando solicitan una
pgina. Por ejemplo, el servidor Web de un sitio de compras efecta el seguimiento de cada uno de los
compradores para poder administrar los carros de la compra y la informacin especfica del usuario.
Por consiguiente, una cookie acta como una especie de tarjeta de llamada, que presenta la
identificacin necesaria para que la aplicacin sepa cmo continuar.
Las cookies se utilizan para muchos propsitos, todos ellos destinados a facilitar al sitio Web el
reconocimiento de los usuarios. Por ejemplo, un sitio que lleva a cabo un sondeo podra utilizar una
cookie simplemente como un valor booleano para indicar si el explorador del usuario ya ha participado
en la votacin, a fin de evitar que el usuario vote dos veces. Un sitio que solicita a un usuario que inicie
una sesin podra utilizar una cookie para registrar dicho inicio de sesin a fin de que el usuario no
tenga que seguir proporcionando sus credenciales.
Escribir cookies
En un sistema de usuario, el explorador es el responsable de la administracin de las cookies. stas se
envan al explorador a travs del objeto HttpResponse, que expone una coleccin
denominada Cookies. Puede tener acceso al objeto HttpResponsecomo la propiedad Response de la
clase Page. Las cookies que desee enviar al explorador se deben agregar a esta coleccin. Al crear
una cookie, debe especificar las propiedades Name y Value. Cada una de las cookies debe tener un
nombre nico a fin de que despus se las pueda identificar al leerlas desde el explorador. Dado que las
cookies se almacenan por nombre, asignar el mismo nombre a dos cookies ocasionar que una de
ellas se sobrescriba.
Tambin se puede establecer la fecha y hora de caducidad de una cookie. El explorador elimina las
cookies caducadas cuando un usuario visita el sitio que las escribi. La caducidad de una cookie
debera establecerse en funcin del tiempo que su aplicacin considere que el valor de la misma
seguir siendo vlido. Para que una cookie no caduque nunca, puede establecer la fecha de caducidad
en 50 aos a partir de ahora.
Si no establece la caducidad de la cookie, sta se crea pero no se almacena en el disco duro del
usuario. En su lugar, la cookie se mantiene como parte de la informacin de sesin del usuario. Cuando
el usuario cierra el explorador, la cookie se descarta. Una cookie no persistente de este tipo resulta til
para la informacin que se debe almacenar durante perodos cortos de tiempo o que, por motivos de
seguridad, no se debera escribir en el disco del equipo cliente. Por ejemplo, las cookies no persistentes
son tiles si el usuario est trabajando en un equipo pblico en cuyo disco no desea que se escriba la
cookie.
15/04/2014
Pgina 37
Puede agregar cookies a la coleccin Cookies de varias maneras. El ejemplo siguiente muestra dos
mtodos para escribir cookies en el lenguaje C#:
Response.Cookies["userName"].Value = "patrick";
Response.Cookies["userName"].Expires = DateTime.Now.AddDays(1);
HttpCookieaCookie = newHttpCookie("lastVisit");
aCookie.Value = DateTime.Now.ToString();
aCookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(aCookie);
El ejemplo agrega dos cookies a la coleccin Cookies, una denominada userName y la otra
denominada lastVisit. Para la primera cookie, los valores de la coleccin Cookies se establecen
directamente. Puede agregar valores a la coleccin de esta forma porque Cookies se deriva de una
coleccin especializada de tipo NameObjectCollectionBase.
Para la segunda cookie, el cdigo crea una instancia de un objeto de tipo HttpCookie, establece sus
propiedades y, a continuacin, lo agrega a la coleccin Cookies a travs del mtodo Add. Cuando se
crea una instancia de un objetoHttpCookie, se debe pasar el nombre de la cookie como parte del
constructor.
Leer las cookies
Cuando un explorador realiza una solicitud al servidor, enva las cookies para ese servidor junto con la
solicitud. En sus aplicaciones ASP.NET, puede leer las cookies mediante el objeto HttpRequest, que
est disponible como propiedad Requestde la clase Page. La estructura del objeto HttpRequest es
esencialmente la misma que la del objeto HttpResponse, por lo que la lectura de las cookies del
objeto HttpRequest se realiza de manera similar a la escritura de las cookies en el objetoHttpResponse.
En el ejemplo de cdigo siguiente se muestran dos maneras de obtener el valor de una cookie
denominadausername y mostrar su valor en un control Label:
if(Request.Cookies["userName"] != null)
15/04/2014
Pgina 38

Label1.Text = Server.HtmlEncode(Request.Cookies["userName"].Value);
if(Request.Cookies["userName"] != null)
{
HttpCookieaCookie = Request.Cookies["userName"];
Label1.Text = Server.HtmlEncode(aCookie.Value);
}
Estados de sesiones:
El estado de sesin de ASP.NET permite almacenar y recuperar los valores de un usuario cuando el
usuario explora diferentes pginas ASP.NET que conforman una aplicacin Web. HTTP es un protocolo
sin estado, lo que significa que el servidor Web trata cada solicitud HTTP de una pgina como una
solicitud independiente; el servidor no retiene informacin alguna sobre los valores de las variables que
se utilizan durante las solicitudes anteriores. El estado de sesin de ASP.NET identifica las solicitudes
recibidas desde el mismo explorador durante un perodo limitado de tiempo como una sesin y
proporciona la capacidad de conservar los valores de las variables durante la duracin de esa sesin.
El estado de sesin de ASP.NET se habilita de forma predeterminada en todas las aplicaciones
ASP.NET.
Otras alternativas al estado de sesin son el estado de la aplicacin (vea la propiedad Application), que
almacena variables a las que todos los usuarios de una aplicacin ASP.NET pueden tener acceso; el
espacio de nombres System.Web.Profile, que mantiene los valores de usuario en un almacn de datos
sin que caduquen pasado un perodo de espera; el espacio de nombres System.Web.Caching, que
almacena los valores de uso frecuente en una memoria que est disponible a todas las aplicaciones
ASP.NET; el espacio de nombres System.Web.UI.WebControls de ASP.NET, que mantiene los valores
del control en la propiedad ViewState; el objeto Cookies; el objeto QueryString, y los campos de un
formulario HTML que estn disponibles en un comando HTTP POST que utiliza la coleccin Form.
Variables de sesin
Las variables de sesin se almacenan en la clase SessionStateItemCollection que est disponible a
travs de la propiedadSystem.Web.HttpContext.Session. La coleccin de las variables de sesin est
indizada por el nombre de la variable o por un ndice de enteros. Las variables de sesin se crean
sencillamente estableciendo referencias a la variable de sesin por el nombre. No necesita declarar una
variable de sesin ni agregarla explcitamente a la coleccin. Por ejemplo, en el ejemplo de cdigo
15/04/2014
Pgina 39

siguiente se crean variables de sesin para el nombre y el apellido de un usuario y se establecen en
valores recuperados de los controles TextBox.
Un ejemplo en C#:
Session["FirstName"] = FirstNameTextBox.Text;
Session["LastName"] = LastNameTextBox.Text;

Servidor Web

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Llena el campo nombre con: manejoSesiones
Clic en Aceptar
Seleccionar la opcin agregar Formularios Web Forms
En el cuadro de dilogo: Especificar nombre para el elemento escribir sesiones
Clic en Aceptar
Cmbiate a la vista Diseo,
De la caja de herramientas, en la seccin estndar, arrastra los siguientes controles con sus
respectivas propiedades:
Tabla 3: Controles y propiedades de la pantalla sesiones
Control
Label
Propiedad ID
lblTitulo
15/04/2014
Propiedad Text
Manejo de sesiones en
Propiedad TextMode
Pgina 40
Label
Label
TextBox
TextBox
Button
lblUsuario
lblContrasea
txtUsuario
txtContrasea
cmdEnviar
ASP.NET
Usuario
Contrasea
Password
Enviar
Deber tener la siguiente forma:
Ilustracin 1: Controles de la pgina Sesiones
15. Pulsamos la tecla F7 para cambiar a la vista Code behind

16. Dentro del evento Page_Load escribimos dos variables de tipo string que obtendrn los valores de
los controles de texto
String usr = txtUsuario.Text;
String pas = txtContrasea.Text;
17. Creamos dos sesiones que tendrn los valores de las variables creadas anteriormente
Session["usuario"] = usr;
Session["password"] = pas;
18.
19.
20.
21.
22.
23.
En el explorador de soluciones damos clic derecho sobre el nombre de nuestro proyecto

Seleccionamos Agregar Formularios Web Forms
En el cuadro de dialogo que aparece, escribimos datosEnviados
Clic en Aceptar
Nos cambiamos a la vista diseo
De la caja de herramientas, en la seccin estndar, arrastra los siguientes controles con sus
respectivas propiedades:
Tabla 4 Controles y Propiedades de la pgina datosEnviados
Control
Label
15/04/2014
Propiedad ID
lblTitulo
Propiedad Text
Datos recibidos
Pgina 41

Label
Label
Label
Label
lblUsuario
lblContrasea
lbUsuarioRecibido
lblContraseaRecibida
Usuario
Contrasea
Deber tener la siguiente forma:
Ilustracin 2: Controles de la pgina datosEnviados
24.
25.
26.
27.
28.
Presiona Ctrl + Shift + S para guardar todos los cambios

Cmbiate a la ventana Sesiones.aspx
Damos doble clic sobre el botn Enviar
Se crea el cdigo para el evento Clic del botn
Nos re direccionamos a la ventana de datosEnviados.aspx
protected void cmdEnviar_Click(object sender, EventArgs e)

{
Response.Redirect("/datosEnviados.aspx");
}
29. Cambiamos ahora a la ventana de datosEnviados

30. Nos cambiamos a la vista Code Behind (F7)
31. Dentro del evento Page_Load recibimos las dos sesiones que vienen de la pgina sesiones.aspx y
las guardamos en dos variables de tipo String. El cdigo lo colocaremos dentro de un bloque try
catch para que en el momento que un usuario solo copie la direccin de datosEnviados.aspx y la
quiera colocar en otro navegador, le marque un error:
try
{
String usr = Session["usuario"].ToString();
String pas = Session["password"].ToString();
32. Mandamos a pantalla los valores de las sesiones recibidas
15/04/2014
Pgina 42

lblUsuarioRecibido.Text = usr;
lblContraseaRecibida.Text = pas;
}
33. Colocamos el bloque catch cuando no se encuentre una sesin abierta:

catch {
lblTitulo.Text = "Error de sesiones";
}
34. Los pasos 31 al 33 los podemos sustituir tambin por las siguientes lneas de cdigo:
if (Session["usuario"]==null && Session["password"]==null) {
lblTitulo.Text = "Error de sesiones";
}
else {
String usr = Session["usuario"].ToString();
String pas = Session["password"].ToString();
lblUsuarioRecibido.Text = usr;
lblContraseaRecibida.Text = pas;
}
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
Presione las teclas Ctrl + shift + S para guardar todos los cambios
Cmbiese a la ventana de sesiones.aspx
Presione la tecla F5 para mostrar la pgina en el navegador
Aparecer la ventana de sesiones.aspx, llena los campos Usuario y Contrasea con los siguientes
datos respectivamente: Diana; 123456
Pulsa el botn enviar
Observa que aparece la ventana datosEnviados.aspx con los datos que se colocaron previamente
Da clic en la barra de direcciones del navegador
Copia toda la direccin Ctrl + C
Cierra el navegador
Abre nuevamente una ventana del navegador
En la barra de direcciones pega la direccin copiada. Ctrl + V
Observa el resultado obtenido
Abre un navegador diferente
En la barra de direcciones pega la direccin copiada. Ctrl + V
Observa el resultado obtenido
Si no se ha detenido el proyecto, en la ventana de visual studio presiona Shift + F5
5. RESULTADOS
El alumno deber mostrar una pantalla con los datos correctos una vez que se hayan iniciado las
sesiones y cuando solo copie las direcciones y pegue en otro navegador, se mostrar la ventana con un
error de sesiones, deber proponer algunos escenarios donde se apliquen el manejo de sesiones.
15/04/2014
Pgina 43
6. CONCLUSIONES
Esta prctica ayuda a los estudiantes a identificar la importancia de utilizar sesiones en su portal para
que no puedan acceder en cualquier momento usuarios mal intencionados al sistema.
7.- REFERENCIAS
http://msdn.microsoft.com/es-mx/library/ms178581%28v=vs.100%29.aspx
http://www.devtroce.com/2010/06/17/crear-y-utilizar-sesiones-en-asp-net/
15/04/2014
Pgina 44
Prctica
ESTNDARES INTERNACIONALES
Programacin Web que dice Comprobar el cumplimiento de los estndares
internacionales de las aplicaciones web desarrolladas en cada unidad
1.- OBJETIVO
Crear pginas web que cumplan con estndares internacionales para el desarrollo de sitios web.
2.- MARCO TERICO
Los estndares W3C definen una Plataforma Web Abierta para el desarrollo de aplicaciones con un
potencial sin precedentes para que los desarrolladores puedan construir interfaces con una gran
experiencia interactiva
W3C standards define an Open Web Platform for application development that has the unprecedented
potential to enable developers to build rich interactive experiences, impulsado por grandes almacenes
de datos, que estn disponibles en cualquier dispositivo. Pero toda la fuerza de la plataforma se basa
en muchas ms tecnologas que el W3C y sus socios estn creando, incluyendo CSS, SVG, WOFF, la
pila de Web Semntica, XML, y una variedad de APIs.
W3C desarrolla estas especificaciones tcnicas y directrices a travs de un proceso diseado para
maximizar el consenso sobre el contenido de un informe tcnico, para garantizar una alta calidad
tcnica y editorial, y para ganar la aprobacin por el W3C y la comunidad en general.
Por qu cumplir con los estndares?
El objetivo principal es aumentar el potencial de la web, asegurando que las tecnologas relacionadas a
ella, sean compatibles entre s. De este modo, el hardware y software usado para acceder a los sitios
web trabaja en conjunto. A esto se le denomina interoperabilidad web. Interoperabilidad es la
capacidad, conocimiento y acuerdo de dos o ms partes de un todo, para que funcionen de manera
conjunta y mancomunada, con el objetivo de lograr un fin determinado. De acuerdo al cumplimiento de
estos estndares se hacen las mediciones de los sitios web.
Cmo se realiza la medicin y verificacin en el cumplimiento de los estndares internacionales?
La medicin y verificacin del cumplimiento de los estndares, se realiza mediante diferentes
herramientas de validacin disponibles a travs de la web http://www.w3c.org
15/04/2014
Pgina 45

Verificacin XHTML: Es un test de validacin del contenido XHTML de un sitio web. A travs de una
revisin del cdigo del mismo, se detectan inconsistencias, falencias y cdigo html no utilizado o
errneo.
Verificacin de CSS: Es un test de validacin del contenido CSS de una web. A travs de una revisin
del cdigo de la misma, se detectan inconsistencias, falencias y cdigo CSS no utilizado o errneo.
Verificacin de enlaces rotos: Es un test de validacin de los enlaces (links) existentes en un sitio
web. Se analiza cada uno de ellos, detectando los que estn rotos o invlidos.
Cumplimiento de los estndares internacionales de calidad.
Se deben cumplir los estndares internacionales de calidad establecidos por la World Wide Web
Consortium, para verificar el cumplimiento de las mismas se deben ejecutar los test de validacin
disponible en el sitio web de la W3C, lo cual comprende:
Verificacin del uso de cdigo XHTML: Los sitios web deben estar construidos en lenguaje XHTML o
superior con tal de garantizar la correcta accesibilidad a los mismos, este cdigo podr ser validado a
travs de la herramienta http://validator.w3.org.
Verificacin del uso de CSS: Los sitios web deben estar construidos usando hojas de estilo en cascada
o CSS, la cual representa el estndar de presentacin de contenidos de un sitio web que permite definir
la forma en que sern visualizados los datos., este cdigo podr ser validado a travs de la herramienta
http://validator.w3.org/css-validator.
Verificacin de enlaces rotos: Los sitios web no deben contener links hacia pginas o sistemas que no
existan, para lo cual la W3C dispone de una herramienta que permite analizar cada uno de ellos,
detectando los que estn rotos o invlidos. Esta validacin se realiza a travs de la herramienta
http://validator.w3.org/checklink

Servidor Web

Revisar que las prcticas anteriores cumplan con las siguientes caractersticas:
15/04/2014
Pgina 46
Punto a Evaluar
Caractersticas
Imgenes y
animaciones
En el tratamiento de las imgenes y animaciones se debe

utilizar el atributo alt para describir la funcin de cada
elemento visual.
Utilizar el elemento map y texto para las zonas activas.
Mapas de
imagen
Multimedia
Enlaces de
hipertexto
Organizacin de
las pginas
Figuras y
Diagramas
Marcos
Tablas
Revisar Sitio
Men Principal
Sub mens en
pginas
Cumpl
e
No
cumple
A los archivos multimedia que se suban en el sitio web, deben

incluir subttulos y trascripcin del sonido y descripcin del
vdeo
Se debe utilizar texto que tenga sentido con lo que
se quiere decir en el enlace, adems los colores deben ser
estndares y subrayados, por ejemplo, evitar da clic aqu
Si el enlace es direccionado a la descarga de un archivo, este
debiera indicar el tamao y nombre del archivo con su
extensin. Por ejemplo, descargar manual: manual.pdf (500
kb)
Para la organizacin de las pginas dentro del sitio, siempre
se debe utilizar encabezados, listas y estructura consistente.
Adems en lo mayor posible utilizar CSS para la
maquetacin.
Las figuras y diagramas deben ser descritos brevemente en
la pgina.
Para la implementacin de marcos se debe utilizar el
elemento noframes y ttulos con sentido respecto al
contenido.
Es necesario facilitar la lectura lnea a lnea, por lo tanto se
debe resumir los textos de lo que se desea informar.
Para evaluar que el desarrollo del sitio cumpla con
estndares de accesibilidad web se debe verificar en la
direccin de la W3C : http://validator.w3.org/
Se debe disponer siempre el men principal visible desde
todas o casi todas las pginas del sitio
Si una seccin del sitio web tiene secciones temticas
grandes, se debe incluir un submen adicional que lleve a las
diferentes pginas existentes.
5. RESULTADOS
15/04/2014
Pgina 47

Con esta prctica se espera que se estandaricen todas las prcticas anteriores, incluso el proyecto final
se debe evaluar con stos puntos y todas las recomendaciones que se han hecho durante la
explicacin de la teora. Para lo cual se puede agregar una nueva tabla con todas las observaciones
necesarias para evaluar si el proyecto cumple con los estndares de calidad. El alumno deber
entregar esta tabla evaluada para cada prctica que se haya desarrollado en la materia.
6. CONCLUSIONES
Es una excelente prctica evaluar si los sistemas que realizamos en clases cumplen con los estndares
mnimos evaluados por la W3C
7.- REFERENCIAS
http://validator.w3.org/
http://www.w3.org/
http://campuscurico.utalca.cl/
15/04/2014
Pgina 48
Prctica
AGENDA ELECTRNICA
Observaciones: Esta prctica incluye a las prcticas # 16 y 17 del temario de
Programacin Web que dicen Realizar programas en donde se elabore una
agenda con conexin a base de datos y archivos de texto y Realizar el
programa anterior en otro lenguaje de programacin web para su evaluacin
respectivamente
1.- OBJETIVO
Crear un sitio web que permita almacenar en una base de datos, la informacin de una agenda de
contactos.
2.- MARCO TERICO

SQL Server 2012
Es un sistema para la gestin de bases de datos producido por Microsoft basado en el modelo
relacional. Sus lenguajes para consultas son T-SQL y ANSI SQL. Microsoft SQL Server constituye la
alternativa de Microsoft a otros potentes sistemas gestores de bases de datos como son Oracle,
PostgreSQL o MySQL.
SQL Server 2012 integra funcionalidad que, adems de aportar fiabilidad, permite revelar informacin
til mediante el uso de herramientas de anlisis conocidas y soluciones Big Data preparadas para la
empresa. Su arquitectura y herramientas comunes para entornos locales y en nube hacen posibles las
infraestructuras de TI hbridas. SQL Server 2014 incluye nueva funcionalidad en memoria en la base de
datos principal y tambin proporciona nuevas funciones preparadas para la nube que simplifican su
adopcin.
Caractersticas:
Soporte de transacciones.
Soporta procedimientos almacenados.
Incluye tambin un entorno grfico de administracin, que permite el uso de comandos DDL y
DML grficamente.
15/04/2014
Pgina 49
Permite trabajar en modo cliente-servidor, donde la informacin y datos se alojan en el servidor

y los terminales o clientes de la red slo acceden a la informacin.
Adems permite administrar informacin de otros servidores de datos.
Este sistema incluye una versin reducida, llamada MSDE con el mismo motor de base de datos pero
orientado a proyectos ms pequeos, que en sus versiones 2005 y 2008 pasa a ser el SQL Express
Edition, que se distribuye en forma gratuita.
ADO.NET
ADO.NET es un conjunto de clases que exponen servicios de acceso a datos para programadores
de .NET Framework. ADO.NET ofrece abundancia de componentes para la creacin de aplicaciones de
uso compartido de datos distribuidas. Constituye una parte integral de .NET Framework y proporciona
acceso a datos relacionales, XML y de aplicaciones. ADO.NET satisface diversas necesidades de
desarrollo, como la creacin de clientes de base de datos front-end y objetos empresariales de nivel
medio que utilizan aplicaciones, herramientas, lenguajes o exploradores de Internet.
DataAdapters y DataReaders
Puede usar el DataReader de ADO.NET para recuperar flujos de datos de solo lectura y solo avance de
una base de datos. Los resultados se devuelven a medida que se ejecuta la consulta y se almacenan
en el bfer de red del cliente hasta que se solicitan con el mtodo Read del DataReader. Con el
DataReader puede aumentar el rendimiento de la aplicacin al recuperar datos en cuanto estn
disponibles y almacenar (de forma predeterminada) una sola fila cada vez en memoria, lo que reduce la
sobrecarga del sistema.
Un DataAdapter se utiliza para recuperar datos de un origen de datos y llenar tablas con un DataSet.
DataAdapter tambin resuelve los cambios realizados en DataSet de vuelta al origen de datos.
Mediante el objeto Connection del proveedor de datos .NET Framework, DataAdapter se conecta a un
origen de datos y utiliza objetos Command para recuperar datos del origen de datos y resolver los
cambios a dicho origen.
SqlDataAdapter adaptador = new SqlDataAdapter(consulta, conexion);
Dataset
Representa una memoria cach de datos en memoria.
DataSet ds = new DataSet();
15/04/2014
Pgina 50
SqlConnection
Representa una conexin abierta a una base de datos de SQL Server. Esta clase no puede heredarse.
SqlConnection conexion = new SqlConnection("Data Source=NombreServidor; Initial
Catalog=nombreBD; Integrated Security= True");
SqlCommand
Ejecuta una instruccin de Transact-SQL en la conexin y devuelve el nmero de filas afectadas.
SqlCommand comando = new SqlCommand(instruccinSQL, conexion);
Datatable
Representa una tabla de datos en memoria.
dt = ds.Tables["alias"];
GridView
Muestra los valores de un origen de datos en una tabla donde cada columna representa un campo y
cada fila representa un registro. El control GridView permite seleccionar, ordenar y modificar estos
elementos.
GridView1.DataSource = dt;
GridView1.DataBind();

Servidor Web IIS
Visual Studio 2012 (versin express)

1. Abrir una ventana de visual Studio
2. Abrir men Archivo Nuevo Proyecto
3. En la ventana nuevo proyecto, dar clic en Plantillas Visual C# - Web
4. Del panel central, seleccionar Aplicacin Web vaca de ASP.NET
5. Llena el campo nombre con: agendaElectronica
6. El campo ubicacin llnalo con: c:\PW\pr08
7. Revisa que la opcin Crear directorio para la solucin este activado
8. Clic en Aceptar
9. En el explorador de soluciones, dar clic derecho en el nombre de nuestro proyecto
10. Seleccionar la opcin agregar Formularios Web Forms
15/04/2014
Pgina 51

11.
12.
13.
14.
En el cuadro de dilogo: Especificar nombre para el elemento escribir pricnipal

Clic en Aceptar
Cmbiate a la vista Diseo,
Del cuadro de herramientas, en la seccin Estndar, localiza la herramienta Label y coloca una
dentro del formulario
15. En la propiedad Text del Label, coloca el texto: Agenda Electrnica
16. Localiza la seccin Navegacin del cuadro de herramientas.
17. Da clic en el elemento Men y arrstralo al centro del formulario.
18. Presiona en el smart tag del men y luego en Editar elementos de men
19. Del panel izquierdo (Elementos) presiona sobre el icono de Agregar un elemento de raz
20. En las propiedades coloca lo siguiente:
a. NavigateURL: principal.aspx
b. Text: Principal
21. En las propiedades coloca lo siguiente:
a. NavigateURL: registro.aspx
b. Text: Registro
22. Repetir el paso 19 y 20
a. NavigateURL: consulta.aspx
b. Text: Consulta
a. NavigateURL: actualiza.aspx
b. Text: Actualiza
a. NavigateURL: elimina.aspx
b. Text: Elimina
25. Pulsa en el botn Aceptar
26. En las propiedades del men, localiza: Orientacin y cambia el valor a Horizontal
27. Localiza nuevamente el smart tag del men y elige el elemento Formato Automtico
28. En la seccin Seleccione un esquema dar clic en Clsica y luego en Aceptar.
29. En las propiedades de men, localiza Font y dentro de ella, la opcin size, cambia la propiedad a
Large
30. Cambia a la vista Cdigo y localiza la etiqueta: </div>
31. Da clic derecho en el nombre del proyecto, Agregar, Formularios Web Forms.
32. Coloca en Nombre del elemento: registro
35. Coloca en Nombre del elemento: consulta
38. Coloca en Nombre del elemento: actualiza
41. Coloca en Nombre del elemento: elimina
43. Ve a la pgina principal.aspx y abre la seccin de cdigo.
44. Localiza la etiqueta </div>
45. Copia todo el cdigo del men, que incluye a las etiquetas <asp:Menu > y </asp:Menu>
(presiona Ctrl. + C).
46. Abre la pgina registro.aspx
47. En la seccin de cdigo, localiza la etiqueta <div> y escribe: <h1>Pgina de registro</h1>
48. Al termino de la etiqueta </div>, presiona Ctrl. + V para pegar el cdigo del men principal
49. Abre la pgina consulta.aspx
50. En la seccin de cdigo, localiza la etiqueta <div> y escribe: <h1>Pgina de Consulta</h1>
Pgina 52
15/04/2014

51. Al termino de la etiqueta </div>, presiona Ctrl. + V para pegar el cdigo del men principal
52. Abre la pgina actualiza.aspx
53. En la seccin de cdigo, localiza la etiqueta <div> y escribe: <h1>Pgina de
actualizacin</h1>
54.
55.
56.
57.
58.
Al termino de la etiqueta </div>, presiona Ctrl. + V para pegar el cdigo del men principal
Abre la pgina elimina.aspx
En la seccin de cdigo, localiza la etiqueta <div> y escribe: <h1>Pgina de eliminacin</h1>
Al termino de la etiqueta </div>, presiona Ctrl. + V para pegar el cdigo del men principal
Cuida que todos los mens que se hayan pegado estn antes de la etiqueta de cierre de formulario
</form>
59. Ve al men Archivo, Guardar Todo (Ctrl. + Shift + S)

60. Da clic derecho sobre la ficha de la pgina registro.aspx y selecciona la opcin Cerrar todo
excepto esta ventana
61. En la vista cdigo, despus de la declaracin del men, escribiremos las siguientes lneas:
<p>Llena todos los campos que se te solicitan a continuacin y posteriormente pulsa el botn
de enviar para mandar toda la informacin a nuestra base de datos</p>
<div id="datos">
<fieldset>
<legend>
Datos Personales
</legend>
</fieldset>
</div>
62. Cmbiate a la vista Diseo y dentro del fieldset, coloca una tabla de la seccin HTML de la barra
de herramientas estndar
63. Colcate en la ltima fila de la tabla, presiona el botn derecho del mouse y selecciona: Insertar
filas o columnas
64. Del cuadro de dilogo Insertar Filas o columnas, selecciona el botn Filas; en Nmero de filas
coloca el valor 3
65. En la seccin Ubicacin, asegrate de que este seleccionada la opcin Por debajo de la
seleccin
66. Presiona el botn Aceptar
67. Colcate en la ltima columna de la tabla, presiona el botn derecho del mouse y selecciona:
Insertar columna a la derecha
68. Ahora ya tenemos una tabla con 6 filas y 4 columnas dentro del fieldset
69. En la primer fila de la tabla, colocaremos los siguientes elementos ubicados en una celda
independiente:
Elemento
Label
TextBox
Label
TextBox
Propiedad ID
lblNombre
txtNombre
lblApellidos
txtApellidos
Propiedad Text
Nombre
Apellidos
70. En la segunda fila de la tabla, colocaremos los siguientes elementos ubicados en una celda
independiente.
Elemento
15/04/2014
Propiedad ID
Propiedad Text
Pgina 53

Label
TextBox
Label
TextBox
lblColonia
txtColonia
lblCalle
txtCalle
Colonia
Calle
71. En la tercer fila de la tabla, colocaremos los siguientes elementos ubicados en una celda
independiente
Elemento
Label
TextBox
Label
TextBox
Propiedad ID
lblTelCasa
txtTelCasa
lblTelCelular
txtTelCelular
Propiedad Text
Telfono Casa
Telfono Celular
72. En la cuarta fila de la tabla, colocaremos los siguientes elementos ubicados en una celda
independiente
Elemento
Label
TextBox
Propiedad ID
lblCorreo
txtCorreo
Propiedad Text
Correo Electrnico
73. En la sexta fila de la tabla, colocaremos en la segunda celda el siguiente elemento

Elemento
Button
Propiedad ID
cmdEnviar
Propiedad Text
Enviar
74. Nos quedar el siguiente resultado:
75. Guarda los cambios efectuados (Ctrl. + Shift + S)

Hasta este momento solo hemos dado el diseo del sitio, ahora vamos a almacenar la
informacin dentro de la base de datos, para ello, realizaremos los siguientes pasos:
76. Pulsa la tecla F7 para cambiar a la ventana de code behind (registro.aspx.cs)
77. Importa la librera using System.Data.SqlClient; para poder acceder a las opciones de ado.net
para lograr la conexin con la bases de datos de SQL Server.
15/04/2014
Pgina 54

78. Despus de la declaracin de la clase y de abrir la llave, crearemos la seccin de declaracin de
variables escribiendo los comentarios:
//Inicio de la declaracin de variables y objetos y //Fin de la declaracin de variables y
objetos
79. Dentro de la declaracin de variables y objetos declaramos los siguientes puntos:

80. Declararemos una variable de tipo string que contendr la cadena de conexin a la Base de Datos:
String cadena = "Data Source=nombreServidorBD; Initial Catalog=agenda; Integrated
Security= True";
81. Cambia nombreServidorBD por el nombre de tu servidor de Bases de Datos.

82. Declaramos las variables de tipo string: nombre, apellidos, colonia, calle, telCasa, telCelular y
correo.
83. Creamos un objeto de tipo SqlConnection para crear la conexin, inicializarla y cerrarla:
SqlConnection conexion;
84. Despus de la lnea //Fin de la declaracin de variables y objetos escribiremos un mtodo que
permitir realizar diferentes acciones con la conexin.
85. Creamos el mtodo conectar de manera pblica y sin parmetros: public void conectar() {}
86. Dentro del mtodo conectar, crearemos un objeto llamado comando de tipo SqlCommand:
SqlCommand comando;
87. Despus de crear comando, inicializamos el objeto conexin con parmetro cadena, para que
establezca la cadena de conexin y nos cree la conexin: conexion = new
SqlConnection(cadena);
88. Ahora se crear un bloque try catch finally para abrir la conexin, cerrarla y en su caso,
mandarnos un mensaje de error si no se lograra abrir la conexin.
try{
}
catch (Exception ex){
}
finally {
}
89. Dentro del try asignaremos a cada variable, el valor que tomar del contenido de cada uno de los
textbox que se encuentran en el formulario:
nombre = txtNombre.Text;
apellidos = txtApellidos.Text;
colonia = txtColonia.Text;
calle = txtCalle.Text;
telCasa = txtTelCasa.Text;
telCelular = txtTelCelular.Text;
correo = txtCorreo.Text;
15/04/2014
Pgina 55

90. Ahora crearemos una variable que permita insertar los datos dentro de la base de datos:
var inserta = "insert into Contactos values ('" + nombre + "', '" + apellidos + "',2,1, '" +
colonia + "', '" + calle + "', '" + telCasa + "', '" + telCelular + "', '" + correo + "')";
91. A continuacin abriremos la conexin: conexion.Open();

92. Inicializaremos el objeto comando con los parmetros inserta y conexin; posteriormente
ejecutaremos ese comando con la instruccin ExecuteNonQuery:
comando = new SqlCommand(inserta, conexion);
comando.ExecuteNonQuery();
93. Dentro del bloque catch mandaremos un mensaje de error:

Response.Write("Conexin fallida!" + ex);
94. Ahora en el bloque finally, ocurra la insercin satisfactoria o no, cerramos la conexin a la base de
datos y luego nos re direccionamos a la pgina principal:
conexion.Close();
Response.Redirect("Principal.aspx");
95. Cmbiate a la pestaa registro.aspx.

96. Da doble clic sobre el botn enviar para activar el evento click
97. Dentro del evento clic del botn, mandaremos a llamar al mtodo conectar:
conectar();
98. Guarda los cambios realizados hasta el momento (Ctrl + shift + S)

99. Ve al men Depurar y despus a Iniciar Depuracin (F5 en algunos casos)
100. Tardara unos segundos en abrir el navegador, una vez que abra, llena el formulario con tus
datos personales y al finalizar, presiona el botn Enviar.
101. Te deber quedar algo semejante a la siguiente figura:
15/04/2014
Pgina 56
Hasta este momento solo hemos almacenado la informacin, el siguiente paso es visualizarla, para ello,
realizaremos los siguientes pasos:
102. Cierra la ventana del navegador
103. En el panel de Explorador de Soluciones, daremos doble clic sobre consulta.aspx
104. Daremos clic derecho sobre la pestaa del formulario que se abri y seleccionaremos la opcin
Cerrar todo excepto esta ventana
105. Nos cambiaremos a la vista Cdigo y posterior al cierre de la etiqueta de la creacin del men,
escribiremos las siguientes lneas:
<p>Escribe en el cuadro el nombre del usuario que deseas consultar</p>

<p>
<asp:Label ID="Label1" runat="server" Text="Nombre: "></asp:Label>
<asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
<asp:Button ID="cmdBuscar" runat="server" OnClick="cmdBuscar_Click" Text="Buscar" />
</p>
106. Nos cambiamos a la vista diseo y del cuadro de herramientas, en la seccin Datos,
seleccionaremos el control GridView y lo arrastramos a nuestro formulario
107. Seleccionaremos el SmartTag del GridView y daremos clic en Formato Automtico
108. Del cuadro de dilogo Autoformato, seleccionamos del panel izquierdo la opcin Profesional y
luego clic en Aceptar
109. Daremos doble clic en el botn Buscar para poder escribir el cdigo al evento clic de ese botn.
110. Importaremos las clases Data y SqlClient:
using System.Data;
using System.Data.SqlClient;
15/04/2014
Pgina 57

111.Antes de la declaracin del mtodo protected void cmdBuscar_Click(object sender, EventArgs
e) crearemos las variables que nos permitirn conectarnos a la base de datos, crear el dataset y
los adaptadores:
static String cadena = "Data Source=nombreServidor; Initial Catalog=agenda; Integrated
Security= True";
SqlConnection conexion = new SqlConnection(cadena);
SqlDataAdapter adaptador;
DataSet ds = new DataSet();
static DataTable dt = new DataTable();
112.
113.
Cambia nombreServidor por el nombre del servidor de tu mquina local.

Dentro de la declaracin del mtodo protected void cmdBuscar_Click(object sender,
EventArgs e) colocaremos un bloque try catch finally para poder abrir la conexin a la base
de datos, seleccionar los datos y por ltimo, cerrar la conexin:
try
{
}
catch (Exception)
{
throw;
}
finally
{
}
114.
Dentro del bloque try, abriremos la conexin, declaramos una variable para almacenar el
nombre a buscar, otra variable para hacer la declaracin de la consulta,
conexion.Open();
string nombre = txtNombre.Text;
string consulta = "Select CONCAT(Nombre, apellidos) as Nombre, Colonia, Calle,
Telefonocasa as [Telfono de Casa], telefonocelular as [Telfono Celular], correoE as [Correo
Electrnico]"
+ "from contactos where nombre like '%" + nombre + "%'";
115.
Inicializaremos el adaptador y luego lo llenamos con el dataSet asignndole un alias:
adaptador = new SqlDataAdapter(consulta, conexion);

adaptador.Fill(ds, "s");
116. Llenaremos el dataTable con el resultado del Dataset y mandaremos la informacin obtenida al
GridView:
dt = ds.Tables["s"];
GridView1.DataSource = dt;
GridView1.DataBind();
15/04/2014
Pgina 58

117. Dentro del bloque catch mandaremos un mensaje de error por si no se ha logrado realizar la
consulta con xito:
Response.Write("Error al consultar la informacin: <br> "+ex.ToString());
118.
Dentro del bloque finally, cerraremos la conexin a la base de datos.
conexion.Close();
119.
120.
121.
122.
123.
124.
125.
Ve al men Archivo y selecciona la opcin Guardar Todo (Ctrl + shift + S)

Del explorador de soluciones, da doble clic en la pgina principal.aspx
Da clic en el men Depurar y selecciona la opcin iniciar Depuracin (F5)
Da clic en el elemento Registro, llena el formulario con tus datos y luego clic en Enviar
Da clic en el elemento Consulta escribe tu nombre y luego clic en Buscar
Observars que te muestra los datos que has ingresado.
Cierra la ventana del navegador.
5. RESULTADOS
Al finalizar esta prctica, el alumno deber ser capaz de aplicar los conocimientos de la tecnologa
ADO.NET para poder almacenar y consultar informacin en una base de datos, Obtendr un pequeo
portal con diferentes vistas, las ms importantes son las de registro y consulta de contactos. Podr
registrar los datos principales de sus contactos y posteriormente consultar esa informacin por medio
del nombre de contacto.
6. CONCLUSIONES
Con sta prctica se pone a trabajar todos los conceptos que se utilizan para conectarse a una base de
datos mediante ADO.NET, los conceptos son para insertar, consultar, eliminar y actualizar informacin.
7.- REFERENCIAS
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.calendar.dayrender
%28v=vs.110%29.aspx
http://msdn.microsoft.com/en-us/library/k4t1kwcd%28v=vs.85%29.aspx
http://www.microsoft.com/es-es/server-cloud/products/sql-server/#fbid=aDQ8H78KUBr
https://www.connectionstrings.com/sql-server/
15/04/2014
Pgina 59
Prctica
CONTADOR DE VISITAS
Programacin Web que dice Realizar programas en donde se lleve a cabo el
contador de visitas diarias, semanales y mensuales.
1.- OBJETIVO
Realizar pginas web que tengan la opcin de un contador de visitas al sitio para ver qu tan
frecuentemente lo visitan.
2.- MARCO TERICO

Global.asax
El archivo Global.asax nos permite manejar eventos de Aplicacin y de Session en nuestra aplicacin
ASP.NET. El archivo Global.asax reside en el directorio raz de una aplicacin de ASP.NET. Este archivo
se compila en tiempo de ejecucin, no es accesible por URL y debe ubicarse en el directorio raz de la
solucin.
El uso clsico es el contador de visitas que debe sumar por cada usuario que ingrese al sitio web. El
evento que se ejecuta por cada ingreso es Session_Start.
Ejemplo:
Cdigo en Gobal.asax: Inicializamos una variable en 0 al iniciar la aplicacin y luego por cada inicio de
sesin la incrementamos y la cargamos a una variable de sesin para poder acceder a ella desde el
resto de la aplicacin.
private int cnt;
void Application_Start(object sender, EventArgs e)
{
// Codigo que se ejectura cuando inicia la aplicacion
cnt = 0;
}
void Session_Start(object sender, EventArgs e)

15/04/2014
Pgina 60

{
// Codigo que se ejectura cuando se inicia la sesion.
Session["cv"] = cnt++;
}
La ventaja de manejarlo de esta forma es que vamos a lograr un contador de visitas reales, es decir,
slo sumar cada inicio de sesin en lugar de sumar cada solicitud a la pgina.
Web.config
El archivo Web.config es el archivo principal de configuraciones de toda aplicacin ASP.NET. Es un
archivo XML que controla el funcionamiento del sitio web.
Control de seguridad.
Conexiones a bases de datos.
Estado de las sesiones.
Control de errores.
Configuraciones personalizadas.
Al igual que el global.asax debe ser colocado en la raz de la aplicacin.
sessionState
El elemento sessionState configura las opciones de estado de la sesin para la aplicacin actual.
Cuando un cliente nuevo empieza a interactuar con una aplicacin Web, se emite un identificador de
sesin que se asocia a todas las solicitudes subsiguientes del mismo cliente durante el tiempo de
validez de la sesin. Este identificador se utiliza para mantener el estado del servidor asociado a la
sesin del cliente en las solicitudes. El elemento sessionState controla cmo la aplicacin ASP.NET
establece y mantiene esta asociacin para cada cliente.
Este mecanismo es muy flexible y permite alojar la informacin de estado de la sesin fuera de proceso
y realizar un seguimiento del estado sin utilizar cookies, entre otras opciones.
Se puede sobrepasar el tamao mximo del identificador URI cuando se enva el identificador de
sesin en el identificador URI. Si la combinacin del vale de identificacin annimo, el vale de
autenticacin de los formularios, el identificador de sesin y los datos de usuario es mayor que la
longitud mxima permitida del identificador URI, se generar el error 400 de solicitud incorrecta.
Para utilizar el modo StateServer
1. Hay que asegurarse de que el servicio de estado de ASP.NET se est ejecutando en el servidor
remoto donde se va a almacenar la informacin de estado de la sesin.
2. El servicio de estado de ASP.NET se instala con ASP.NET y se encuentra de manera
predeterminada en %SystemRoot
%\Microsoft.NET\Framework\nmeroDeVersin\aspnet_state.exe.
15/04/2014
Pgina 61

3. En el archivo Web.config de la aplicacin, establezca el valor de mode en "StateServer" y el valor
de stateConnectionString en, por ejemplo, "tcpip=dataserver:42424".
Para utilizar el modo SQLServer
1. Ejecute InstallSqlState.sql en el equipo con SQL Server donde se va a almacenar el estado de la
sesin.
2. De manera predeterminada, InstallSqlState.sql se encuentra en %SystemRoot
%\Microsoft.NET\Framework\nmeroDeVersin.
3. De este modo, se crea una base de datos denominada ASPState con nuevos procedimientos
almacenados y tablas denominadas ASPStateTempApplications y ASPStateTempSessions en la
base de datos TempDB.
4. En el archivo Web.config de la aplicacin, establezca el valor de mode en "SQLServer" y el valor
de sqlConnectionString en, por ejemplo, "data source=localhost;Integrated Security=SSPI;Initial
Catalog=northwind".

Servidor Web
Visual Studio con framework 3.5 o superior
Al menos 3 browser diferentes (Firefox, Internet Explorer, Opera, Google Chrome, Safari, etc.)

1. Abrir visual studio 2010 o superior
2. Archivo Nuevo Proyecto
3. De la ventana Nuevo Proyecto, seleccionar Plantillas Visual C# - Web Aplicacin ASP.NET Web
Forms
4. En el campo nombre colocar: contadorVisitas
5. En el campo ubicacin seleccionar: C:\PW\pr09
6. Revisar que la opcin Crear directorio para la solucin est habilitada
7. Pulsar el botn Aceptar
8. En el explorador de soluciones, doble clic sobre el archivo Global.asax
9. Declarar una variable pblica de tipo entero llamada contador.
public int contador;
10. En el mtodo void Application_Start(object sender, EventArgs e) agregar la siguiente

lnea de cdigo:
void Application_Start(object sender, EventArgs e)

{
// Agregar la siguiente lnea de cdigo:
contador = 1;
15/04/2014
Pgina 62

// Cdigo que se ejecuta al iniciarse la aplicacin
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterOpenAuth();
}
11. Crear un mtodo Session_Start el cual tendr asignada la sesin cv la cual contendr el valor de la
variable contador incrementada en 1 cada que se inicie la sesin:
void Session_Start(object sender, EventArgs e) {
Session["cv"] = contador++;
}
12.
13.
14.
15.
Damos clic derecho sobre el nombre de nuestro proyecto, agregar Formularios Web Forms
Escribimos el nombre de contador
En la vista diseo escribimos el texto: Numero de visitantes:
Agregamos un label enfrente del texto que acabamos de agregar con las siguientes propiedades:
a. ID: lblContador
b. Name: [borramos el nombre]
16. Cambiamos a la vista code behind pulsando la tecla F7

17. Dentro del mtodo Page_Load llamamos a la variable de sesin cv y la asignamos al lblContador:
protected void Page_Load(object sender, EventArgs e)

{
lblContador.Text = Session["cv"].ToString();
}
18.
19.
20.
21.
22.
23.
24.
Ir al men Depurar Iniciar Depuracin (F5)

Al cargar el browser por defecto, observar que marca Nmero de visitantes = 0
Ir a la barra de direcciones del browser, seleccionar toda la direccin
Presionar Ctrl + C
Ir a la ventana de inicio y abrir un nuevo browser
En la barra de direcciones seleccionar toda la direccin
Presionar Ctrl + V
25. Realizar los pasos 20 al 24

26. Observar que en cada nuevo navegador, cambia el valor: Nmero de visitantes = 1 y Nmero
de visitantes = 2 respectivamente.
5. RESULTADOS
Al concluir esta prctica, el alumno observar la manera en que se programa un contador de visitas
para una aplicacin web, mediante el uso de variables de sesin y el archivo Global.asax
Pgina 63
15/04/2014
6. CONCLUSIONES
Con sta prctica el alumno ha comprendido una de las principales funciones del manejo del archivo
global.asax para realizar un contador de visitas, conociendo ms a fondo los mtodos que ste archivo
contiene como son: Application_Start y Session_Start. Esto ayuda a que el alumno no solamente
descargue una aplicacin para colocar su propio contador de visitas.
7.- REFERENCIAS
http://msdn.microsoft.com/es-MX/library/2027ewzw%28v=vs.80%29.aspx
http://msdn.microsoft.com/es-mx/library/ms178581%28v=vs.100%29.aspx
15/04/2014
Pgina 64
Prctica
10
HERRAMIENTAS DE INTERACCIN
DINMICA
Observaciones: Esta prctica incluye a las prctica # 19 y 20 del temario de
Programacin Web que dicen Realizar programas en donde se haga el uso de
Ajax y Realizar programas en donde se apliquen las libreras JQuery y
Mootools respectivamente.
1.- OBJETIVO
Realizar pginas web que permitan una interaccin ms dinmica con el usuario utilizando diferentes
herramientas como es Ajax, JQuery y Mootools.
2.- MARCO TERICO

AJAX
El trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que se puede traducir como
"JavaScript asncrono + XML".
Las tecnologas que forman AJAX son:
1. XHTML y CSS, para crear una presentacin basada en estndares.
2. DOM, para la interaccin y manipulacin dinmica de la presentacin.
3. XML, XSLT y JSON, para el intercambio y la manipulacin de informacin.
4. XMLHttpRequest, para el intercambio asncrono de informacin.
5. JavaScript, para unir todas las dems tecnologas.
15/04/2014
Pgina 65
Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las
tecnologas anteriores.
En las aplicaciones web tradicionales, las acciones del usuario en la pgina (pinchar en un botn,
seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la
peticin del usuario, el servidor devuelve una nueva pgina HTML al navegador del usuario.
Esta tcnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena
sensacin al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se
recargue la pgina con los cambios solicitados. Si la aplicacin debe realizar peticiones continuas, su
uso se convierte en algo molesto
AJAX permite mejorar completamente la interaccin del usuario con la aplicacin, evitando las recargas
constantes de la pgina, ya que el intercambio de informacin con el servidor se produce en un
segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de pginas mediante la creacin
de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la
respuesta de la aplicacin, ya que el usuario nunca se encuentra con una ventana del navegador vaca
esperando la respuesta del servidor.
Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al elemento
encargado de AJAX. Las peticiones ms simples no requieren intervencin del servidor, por lo que la
respuesta es inmediata. Si la interaccin requiere una respuesta del servidor, la peticin se realiza de
forma asncrona mediante AJAX. En este caso, la interaccin del usuario tampoco se ve interrumpida
por recargas de pgina o largas esperas por la respuesta del servidor.
Desde su aparicin, se han creado cientos de aplicaciones web basadas en AJAX. En la mayora de
casos, AJAX puede sustituir completamente a otras tcnicas como Flash. Adems, en el caso de las
aplicaciones web ms avanzadas, pueden llegar a sustituir a las aplicaciones de escritorio.
Mootools
MooTools (My object oriented tools) es un Framework web orientado a objetos para JavaScript, de
cdigo abierto, compacto y modular. El objetivo de MooTools es aportar una manera de desarrollar
JavaScript sin importar en qu navegador se ejecute de una manera elegante. MooTools aporta una
API documentada ms enfocada a la orientacin de objetos que la implementacin estndar soportada
por los navegadores web.
15/04/2014
Pgina 66

El cdigo de Mootools est repartido en varios mdulos o libreras, pero nuestras pginas web puede
que no realicen todas las acciones que permiten los distintos mdulos. Es decir, puede que
descarguemos slo Mootools para realizar efectos con capas, o para invocar fcilmente procesos Ajax.
As que, en la hora de descargar el framework, podemos elegir qu mdulos traernos y as liberar a los
usuarios que visitan nuestras webs de tiempo de descarga de las libreras y tiempo de interpretacin
por parte del navegador.
Tipo de compresin de la descarga:
Adems tambin tenemos que seleccionar el tipo de compresin. Esto es para hacer la descarga de un
archivo con las libreras con unas caractersticas especficas que lo hacen pesar ms o menos. Todos
los archivos son de texto, con el cdigo listo para incluir en nuestras pginas, pero en unos estn los
comentarios al cdigo, otros no tienen saltos de lnea o espacios, en otros incluso de han cambiado los
nombres de variables internas por otros ms cortos, etc.
Lo que est claro que cuanta mayor compresin, menos ocupar el archivo y menor ser por tanto el
tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos conviene una
versin con todo el cdigo y la documentacin en el propio archivo, para que podamos guiarnos con
ella para depurar cualquier fallo.
Mootools, aparte de ofrecer un nutrido grupo de libreras para realizar efectos interesantes en
Javascript, tiene una gentil comunidad de desarrolladores que crean componentes que se pueden
utilizar en las pginas web que estemos realizando. As que podemos beneficiarnos del esfuerzo de
desarrollo de otras personas para realizar pginas con efectos impactantes rpidamente.
Instanciar objetos es el proceso de generar un ejemplar de una clase, es decir, la clase es como una
declaracin de una forma y el objeto es un caso o elemento concreto que responde a esa forma.
Los objetos se crean a partir de una clase. Con el nombre del objeto (o la variable que va a contener
ese objeto que deseamos crear), seguido de un signo igual y luego la palabra new seguida del nombre
de la clase y unos parntesis.
Para la clase que habamos declarado en el ejemplo de las propiedades, la clase MiClasePropiedades,
podramos crear instancias de esta de la siguiente manera:
miObjeto = new MiClasePropiedades();
Podemos crear infinitos objetos a partir de una clase, cada uno sera una instancia de la clase o un
ejemplar de esa clase.
miSegundoObjeto = new MiClasePropiedades();
otroObjeto = new MiClasePropiedades();
15/04/2014
Pgina 67

Un constructor de una clase Mootools se declara como si fuera un mtodo corriente, pero con un
nombre fijo: initialize. Dicho mtodo ser una funcin que puede recibir parmetros. Dentro de la
funcin se podrn realizar diversas acciones, siendo lo ms corriente la asignacin de valores a las
propiedades del objeto.
Veamos un ejemplo de clase con su constructor:
var ClaseConstructor = new Class({
propiedad1: null,
initialize: function(){
this.propiedad1 = 1;
}});
Como se puede ver, el objeto se ha creado con una propiedad, definida en la lista de propiedades con
valor null. Luego, en el constructor se actualiza el valor de la propiedad y se le asigna 1.
Habra que remarcar aqu la utilizacin de this, que en lneas generales sirve para referenciar al objeto
sobre el que se est invocando el mtodo. Como hemos dicho, un constructor se ejecuta cuando se
est creando un objeto, durante el proceso de instanciacin. Por lo tanto, this servir para hacer
referencia al objeto que se est construyendo.
Dado el constructor que hemos creado, todos los objetos de la clase ClaseConstructor, en el momento
de su creacin, tendrn el valor de propiedad1 = 1.
La clase Element de Mootools tiene un constructor que sirve para realizar las tareas de creacin de un
elemento nuevo, a la vez que nos ofrece herramientas para su inicializacin. El constructor es muy
sencillo y recibe dos parmetros, como podemos ver a continuacin:
miElemento = new Element(etiqueta, caracteristicas);
Los parmetros del constructor son los siguientes:
Etiqueta: es el nombre de una etiqueta HTML. Por ejemplo si ponemos p estaremos creando un
elemento tipo prrafo, o si colocamos img estaremos creando un elemento o etiqueta imagen.
Caractersticas: son una lista de caractersticas de la etiqueta o elemento que se est creando. Estas
caractersticas son opcionales.
Por ejemplo, podemos construir elementos de esta manera:
Construyo un elemento prrafo, etiqueta P:
var nuevoElemento = new Element ("p");
15/04/2014
Pgina 68

Construyo un elemento enlace, etiqueta A, y aparte le doy una serie de caractersticas del enlace, para
inicializar el texto del enlace, la URL a la que va dirigido, y algunos estilos CSS.
var otroElemento = new Element("a", {
"html": "texto del enlace",
"href": "url_del_enlace",
"styles": {
"background-color": "red",
"color": "white"
}
});
Al construir un elemento este simplemente se genera internamente en la memoria con Javascript, pero
no aparece en ningn lugar de la pgina. Para incluirlo en la pgina tendremos que insertar el elemento
jQuery
jQuery es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los
documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar
interaccin con la tcnica AJAX a pginas web.
Antes de iniciar con jQuery, se deben tener conocimientos previos de HTML, CSS y JavaScript
jQuery es una biblioteca ligera de JavaScript que su lema es: Escribir menos, hacer ms
El propsito de jQuery es hacer ms fcil el uso de JavaScript en las pginas web
Para agregar jQuery a los sitios web, hay dos maneras: la primera es descargando las libreras de
jQuery desde la pgina oficial: http://jquery.com/ y, la segunda es incluir a jQuery como CDN (Content
Delivery Network) por sus siglas en ingls).
Si optas por la opcin de descarga, hay dos tipos de archivo:
Versin de produccin: un archivo comprimido que tiene caractersticas mnimas pero eficientes para
la puesta en marcha de la pgina web.
Versin de desarrollo: esta versin es para test y desarrollo, muestra el contenido del cdigo fuente ya
que el archivo no est comprimido.
Ambas versiones se descargan de manera gratuita de la pgina oficial escrita lneas anteriores.
15/04/2014
Pgina 69

Debemos hacer referencia dentro de nuestro cdigo html al uso de jQuery, para ello debemos colocar
dentro de la etiqueta <script> </script> la lnea: src="jquery-1.11.1.min.js">, sin olvidar que la etiqueta
<script va dentro de la etiqueta <head>, por lo que nos deber quedar de la siguiente manera:
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
Es conveniente colocar el archive descargado en la misma carpeta en la que se encuentran los
archivos web.
Si no deseas descargar la biblioteca de jQuery, recuerda que puedes utilizar las herramientas de jQuery
desde Google o Microsoft mediante el CDN (Content Delivery Network) de la siguiente manera:
En Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
En Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>
Sintaxis:
La sintaxis bsica en jQuery es: $(selector).action()
Un signo $ para definir/acceder a jQuery

Un selector (query) para los elementos HTML
Una accin jQuery para realizar en el elemento
Ejemplos:
$(this).hide() oculta el element actual.

$("p").hide() oculta todos los elementos <p>.
$(".test").hide() oculta todos los elementos con clase ="test".
$("#test").hide() oculta el element con id ="test".
El evento Document Ready: todos los mtodos jQuery debern colocarse dentro de ste evento, la
sintaxis es:
15/04/2014
Pgina 70
$(document).ready(function(){
// los mtodos jQuery van aqu
});
Otra manera de crear los mtodos es la siguiente:
$(function(){
//los mtodos jQuery van aqu
});
Selectores: son uno de los elementos ms importantes dentro de jQuery, nos ayudan a seleccionar y
manipular elementos HTML, podemos seleccionarlos mediante el id, class, tipos, atributos, entre otros.
Todos los selectores inician con el signo de dollar y parntesis: $(). A continuacin veremos diferentes
selectores:
El selector de elemento:
Selecciona los elementos HTML mediante el nombre del elemento; por ejemplo, si deseamos
seleccionar todos los elementos tipo prrafo (<p>) utilizamos: $("p"). de manera ms concreta:
$("button").click(function(){
$("p").hide();
});
});
En ejemplo anterior, cuando se seleccione un botn, a todos los elementos p, los ocultar.
El selector #id:
El selector #id de jQuery, utiliza el atributo id de los elementos HTML para localizar un elemento en
especfico, por ejemplo: $("#test"), de manera ms completa tenemos:
$("#test").hide();
});
});
El selector .class:
Localiza los elementos de una clase especfica, lo utilizamos de la siguiente manera: $(".test"). por
ejemplo:
15/04/2014
Pgina 71

$(".test").hide();
});
});
Ms ejemplos de selectors jQuery:
Sintaxis
Descripcin
$("*")
Selecciona todos los elementos
$(this)
Selecciona el elemento HTML actual
$("p.intro")
Selecciona todos los elementos <p> con class="intro"
$("p:first")
Selecciona el primer elemento <p>
$("ul li:first")
Selecciona el primer elemento <li>de la primer lista <ul>
$("ul li:first-child")
Selecciona el primer elemento <li> de cada lista <ul>
$("[href]")
Selecciona todos los elementos con atributo href
$("a[target='_blank']")
Selecciona todos los elementos <a> con el atributo target= "_blank"
$("a[target!='_blank']")
Selecciona todos los elementos <a> con el atributo target distinto a "_blank"
$(":button")
Selecciona todos los elementos <button> y <input> de con type="button"
Archivos separados:
Se pueden colocar las funciones en archivos separados para un mejor mantenimiento del sitio web,
solo hay que guardarlos con extensin .js y hacer referencia a ellos mediante las siguientes lneas de
cdigo:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
15/04/2014
Pgina 72
Eventos:
Los diferentes eventos que podemos tener en nuestro sitio web son:
Mouse Events
click
dblclick
mouseenter
mouseleave
Keyboard Events
keypress
keydown
keyup
Form
Events
submit
change
focus
blur
Document/Wi
ndow Events
load
resize
scroll
unload
La sintaxis para crear esos eventos es la siguiente:

$("elementoHTML").evento(function(){
// aqu van las acciones del evento
});
Algunos ejemplos son:
Click():
$("p").click(function(){
$(this).hide();
});
dblclick():
$("p").dblclick(function(){
$(this).hide();
});
mouseenter():
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave():
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
15/04/2014
Pgina 73
mousedown():
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup():
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover();
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus():
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur():
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

Servidor Web
Visual Studio 2012 versin express
Internet Information Services 8 (IIS8)
Navegador web Firefox, Internet Explorer, Google Chrome o algun otro.
15/04/2014
Pgina 74

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Llena el campo nombre con: practicajQuery
Clic en Aceptar
Seleccionar la opcin agregar Pgina HTML
En el campo nombre delemento, escribir: ejemplojQuery
Clic en Aceptar
Escribir el siguiente cdigo:
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function () {
$("button").click(function () {
var div = $("div");
div.animate({ height: '300px', opacity: '0.4' }, "slow");
div.animate({ width: '300px', opacity: '0.8' }, "slow");
div.animate({ height: '100px', opacity: '0.4' }, "slow");
div.animate({ width: '100px', opacity: '0.8' }, "slow");
});
});
</script>
</head>
<body>
<button>Iniciar animacin</button>
<p>Por defecto, todos los elementos HTML tienen una posicin esttica, y no se pueden mover.
Para manipular la posicin, recuerde establecer primero la propiedad position de CSS del
elemento al respecto, fija o absoluta!</p>
<div style="background:#ffd800;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
14.
15.
16.
17.
18.
Guarda los cambios realizados (Ctrl. + S)

Ejecuta el proyecto (Menu Depurar Iniciar depuracin o F5)
Da clic en el botn Iniciar animacin.
Observa cmo cambia de color y tamao la divisin.
Cierra la pgina del navegador.
5. RESULTADOS
15/04/2014
Pgina 75

Al terminar esta prctica, se podr observar cmo con jQuery se pueden hacer animaciones en las
pginas web, en la pgina que se muestra, se deber observar cmo al dar clic en un botn, se
empieza a animar la divisin de esa pgina, cambiando la opacidad y tamao del contenido de la
divisin.
6. CONCLUSIONES
Con sta prctica, se podr comprender los conceptos bsicos del uso de jQuery en pginas HTML
para poder interactuar de manera ms fcil entre el usuario y el sitio web.
7.- REFERENCIAS
http://api.jquery.com/jquery.ajax/
http://www.w3schools.com/ajax/
http://librosweb.es/ajax/
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/
http://mootools.net/
http://jquery.com/
15/04/2014
Pgina 76
Prctica
11
PROGRAMAS DINMICOS DEL LADO DEL

SERVIDOR
Observaciones: Esta prctica incluye a las prctica # 21 y 22 del temario de
Programacin Web que dicen Realizar pruebas de mltiples usuarios en el
servidor y Realizar programas en donde se generen formularios dinmicos
con un lenguaje de programacin del lado del servidor respectivamente.
1.- OBJETIVO
Realizar pginas web programadas del lado del servidor que puedan tener una interaccin ms
dinmica con los usuarios.
2.- MARCO TERICO
AJAX
El trmino AJAX es un acrnimo de Asynchronous JavaScript + XML, que se puede traducir como
"JavaScript asncrono + XML".
Las tecnologas que forman AJAX son:
6. XHTML y CSS, para crear una presentacin basada en estndares.
7. DOM, para la interaccin y manipulacin dinmica de la presentacin.
8. XML, XSLT y JSON, para el intercambio y la manipulacin de informacin.
9. XMLHttpRequest, para el intercambio asncrono de informacin.
10. JavaScript, para unir todas las dems tecnologas.
15/04/2014
Pgina 77

Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las
tecnologas anteriores.
En las aplicaciones web tradicionales, las acciones del usuario en la pgina (pinchar en un botn,
seleccionar un valor de una lista, etc.) desencadenan llamadas al servidor. Una vez procesada la
peticin del usuario, el servidor devuelve una nueva pgina HTML al navegador del usuario.
Esta tcnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena
sensacin al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se
recargue la pgina con los cambios solicitados. Si la aplicacin debe realizar peticiones continuas, su
uso se convierte en algo molesto
AJAX permite mejorar completamente la interaccin del usuario con la aplicacin, evitando las recargas
constantes de la pgina, ya que el intercambio de informacin con el servidor se produce en un
segundo plano.
Las aplicaciones construidas con AJAX eliminan la recarga constante de pginas mediante la creacin
de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la
respuesta de la aplicacin, ya que el usuario nunca se encuentra con una ventana del navegador vaca
esperando la respuesta del servidor.
Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se realizan al elemento
encargado de AJAX. Las peticiones ms simples no requieren intervencin del servidor, por lo que la
respuesta es inmediata. Si la interaccin requiere una respuesta del servidor, la peticin se realiza de
forma asncrona mediante AJAX. En este caso, la interaccin del usuario tampoco se ve interrumpida
por recargas de pgina o largas esperas por la respuesta del servidor.
Desde su aparicin, se han creado cientos de aplicaciones web basadas en AJAX. En la mayora de
casos, AJAX puede sustituir completamente a otras tcnicas como Flash. Adems, en el caso de las
aplicaciones web ms avanzadas, pueden llegar a sustituir a las aplicaciones de escritorio.
Mootools
MooTools (My object oriented tools) es un Framework web orientado a objetos para JavaScript, de
cdigo abierto, compacto y modular. El objetivo de MooTools es aportar una manera de desarrollar
JavaScript sin importar en qu navegador se ejecute de una manera elegante. MooTools aporta una
API documentada ms enfocada a la orientacin de objetos que la implementacin estndar soportada
por los navegadores web.
El cdigo de Mootools est repartido en varios mdulos o libreras, pero nuestras pginas web puede
que no realicen todas las acciones que permiten los distintos mdulos. Es decir, puede que
descarguemos slo Mootools para realizar efectos con capas, o para invocar fcilmente procesos Ajax.
15/04/2014
Pgina 78

As que, en la hora de descargar el framework, podemos elegir qu mdulos traernos y as liberar a los
usuarios que visitan nuestras webs de tiempo de descarga de las libreras y tiempo de interpretacin
por parte del navegador.
Tipo de compresin de la descarga:
Adems tambin tenemos que seleccionar el tipo de compresin. Esto es para hacer la descarga de un
archivo con las libreras con unas caractersticas especficas que lo hacen pesar ms o menos. Todos
los archivos son de texto, con el cdigo listo para incluir en nuestras pginas, pero en unos estn los
comentarios al cdigo, otros no tienen saltos de lnea o espacios, en otros incluso de han cambiado los
nombres de variables internas por otros ms cortos, etc.
Lo que est claro que cuanta mayor compresin, menos ocupar el archivo y menor ser por tanto el
tiempo de descarga en nuestra web. Pero cuando estamos desarrollando igual nos conviene una
versin con todo el cdigo y la documentacin en el propio archivo, para que podamos guiarnos con
ella para depurar cualquier fallo.
Mootools, aparte de ofrecer un nutrido grupo de libreras para realizar efectos interesantes en
Javascript, tiene una gentil comunidad de desarrolladores que crean componentes que se pueden
utilizar en las pginas web que estemos realizando. As que podemos beneficiarnos del esfuerzo de
desarrollo de otras personas para realizar pginas con efectos impactantes rpidamente.
Instanciar objetos es el proceso de generar un ejemplar de una clase, es decir, la clase es como una
declaracin de una forma y el objeto es un caso o elemento concreto que responde a esa forma.
Los objetos se crean a partir de una clase. Con el nombre del objeto (o la variable que va a contener
ese objeto que deseamos crear), seguido de un signo igual y luego la palabra new seguida del nombre
de la clase y unos parntesis.
Para la clase que habamos declarado en el ejemplo de las propiedades, la clase MiClasePropiedades,
podramos crear instancias de esta de la siguiente manera:
miObjeto = new MiClasePropiedades();
Podemos crear infinitos objetos a partir de una clase, cada uno sera una instancia de la clase o un
ejemplar de esa clase.
miSegundoObjeto = new MiClasePropiedades();
otroObjeto = new MiClasePropiedades();
Un constructor de una clase Mootools se declara como si fuera un mtodo corriente, pero con un
nombre fijo: initialize. Dicho mtodo ser una funcin que puede recibir parmetros. Dentro de la
15/04/2014
Pgina 79

funcin se podrn realizar diversas acciones, siendo lo ms corriente la asignacin de valores a las
propiedades del objeto.
Veamos un ejemplo de clase con su constructor:
var ClaseConstructor = new Class({
propiedad1: null,
initialize: function(){
this.propiedad1 = 1;
}});
Como se puede ver, el objeto se ha creado con una propiedad, definida en la lista de propiedades con
valor null. Luego, en el constructor se actualiza el valor de la propiedad y se le asigna 1.
Habra que remarcar aqu la utilizacin de this, que en lneas generales sirve para referenciar al objeto
sobre el que se est invocando el mtodo. Como hemos dicho, un constructor se ejecuta cuando se
est creando un objeto, durante el proceso de instanciacin. Por lo tanto, this servir para hacer
referencia al objeto que se est construyendo.
Dado el constructor que hemos creado, todos los objetos de la clase ClaseConstructor, en el momento
de su creacin, tendrn el valor de propiedad1 = 1.
La clase Element de Mootools tiene un constructor que sirve para realizar las tareas de creacin de un
elemento nuevo, a la vez que nos ofrece herramientas para su inicializacin. El constructor es muy
sencillo y recibe dos parmetros, como podemos ver a continuacin:
miElemento = new Element(etiqueta, caracteristicas);
Los parmetros del constructor son los siguientes:
Etiqueta: es el nombre de una etiqueta HTML. Por ejemplo si ponemos p estaremos creando un
elemento tipo prrafo, o si colocamos img estaremos creando un elemento o etiqueta imagen.
Caractersticas: son una lista de caractersticas de la etiqueta o elemento que se est creando. Estas
caractersticas son opcionales.
Por ejemplo, podemos construir elementos de esta manera:
Construyo un elemento prrafo, etiqueta P:
var nuevoElemento = new Element ("p");
Construyo un elemento enlace, etiqueta A, y aparte le doy una serie de caractersticas del enlace, para
inicializar el texto del enlace, la URL a la que va dirigido, y algunos estilos CSS.
15/04/2014
Pgina 80
var otroElemento = new Element("a", {

"html": "texto del enlace",
"href": "url_del_enlace",
"styles": {
"background-color": "red",
"color": "white"
}
});
Al construir un elemento este simplemente se genera internamente en la memoria con Javascript, pero
no aparece en ningn lugar de la pgina. Para incluirlo en la pgina tendremos que insertar el elemento
jQuery
jQuery es una biblioteca de JavaScript, que permite simplificar la manera de interactuar con los
documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar
interaccin con la tcnica AJAX a pginas web.
Antes de iniciar con jQuery, se deben tener conocimientos previos de HTML, CSS y JavaScript
jQuery es una biblioteca ligera de JavaScript que su lema es: Escribir menos, hacer ms
El propsito de jQuery es hacer ms fcil el uso de JavaScript en las pginas web
Para agregar jQuery a los sitios web, hay dos maneras: la primera es descargando las libreras de
jQuery desde la pgina oficial: http://jquery.com/ y, la segunda es incluir a jQuery como CDN (Content
Delivery Network) por sus siglas en ingls).
Si optas por la opcin de descarga, hay dos tipos de archivo:
Versin de produccin: un archivo comprimido que tiene caractersticas mnimas pero eficientes para
la puesta en marcha de la pgina web.
Versin de desarrollo: esta versin es para test y desarrollo, muestra el contenido del cdigo fuente ya
que el archivo no est comprimido.
Ambas versiones se descargan de manera gratuita de la pgina oficial escrita lneas anteriores.
15/04/2014
Pgina 81

Debemos hacer referencia dentro de nuestro cdigo html al uso de jQuery, para ello debemos colocar
dentro de la etiqueta <script> </script> la lnea: src="jquery-1.11.1.min.js">, sin olvidar que la etiqueta
<script va dentro de la etiqueta <head>, por lo que nos deber quedar de la siguiente manera:
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
Es conveniente colocar el archive descargado en la misma carpeta en la que se encuentran los
archivos web.
Si no deseas descargar la biblioteca de jQuery, recuerda que puedes utilizar las herramientas de jQuery
desde Google o Microsoft mediante el CDN (Content Delivery Network) de la siguiente manera:
En Google CDN:
<head>
</head>
En Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>
Sintaxis:
La sintaxis bsica en jQuery es: $(selector).action()
Un signo $ para definir/acceder a jQuery

Un selector (query) para los elementos HTML
Una accin jQuery para realizar en el elemento
Ejemplos:
$(this).hide() oculta el element actual.

$("p").hide() oculta todos los elementos <p>.
$(".test").hide() oculta todos los elementos con clase ="test".
$("#test").hide() oculta el element con id ="test".
El evento Document Ready: todos los mtodos jQuery debern colocarse dentro de ste evento, la
sintaxis es:
15/04/2014
Pgina 82
// los mtodos jQuery van aqu
});

Servidor Web

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

Del panel central, seleccionar Aplicacin ASP.NET Web Forms
Llena el campo nombre con: programasDinamicos
Clic en Aceptar
Seleccionar la opcin agregar ADO.NET Entity Data Model
En el cuadro de dialogo que aparece, colocar el nombre: miModelo
Pulsar el botn Aceptar.
Del cuadro de dilogo Asistente para Entity Data Model, seleccionar la opcin Generar desde la
Base de Datos.
14. Clic en siguiente
15. Pulsa el botn Nueva Conexin.
16. En el cuadro de dialogo, llena los campos con los siguientes datos:
Nombre del servidor: (local)
Conexin con el servidor: Usar Autentificacin de Windows
Seleccione o escriba el nombre de la base de datos: agenda
17. Pulsar sobre el botn Aceptar
18. Asegrate de que este activada la casilla de verificacin: Guardar configuracin de conexin de
entidad en Web.Config como:
19. En el campo que esta disponible, escribe: agendaEntities
20. Clic en el botn Siguiente.
21. En la ventana de Elegir los objetos y la configuracin de la base de datos, da clic sobre la casilla
de verificacin: Tablas.
22. Clic en el botn Finalizar.
15/04/2014
Pgina 83

23. En el explorador de servidores, da clic derecho sobre el elemento:
agendaEntityes(programasDinamicos) y pulsa sobre la opcin Actualizar.
24. En el Explorador de Soluciones da clic derecho sobre el nombre del proyecto y selecciona la
Opcin Agregar Nievo elemento.
25. Selecciona la opcin Formulario Web Forms que usa una pgina maestra
26. En el campo Nombre, escribe: contactos
27. Pulsa el botn Agregar.
28. Pulsa el botn Aceptar.
29. Localiza la lnea de cdigo:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
30. Despus de esa lnea da un enter y escribe las siguientes lneas de cdigo:
<h3>Auto Complete Textbox without using Web Service</h3>
<table>
<tr>
<td>Type Company Name: </td>
<td>
<div class="ui-widget" style="text-align:left">
<asp:TextBox ID="txtCompanyName" runat="server" Width="350px"
CssClass="textboxAuto" Font-Size="12px" />
</div>
</td>
</tr>
</table>
31. Despus, escribe las siguientes lneas de cdigo JavaScript:

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jqueryui.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$('#<%=txtCompanyName.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
url: "Default.aspx/GetCompanyName",
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
15/04/2014
Pgina 84

return { value: item }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
}
});
}
});
});
</script>
32. Pulsa la tecla F7 para cambiarte al cdigo de C# y escribe las siguientes lneas de cdigo:
[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<string> GetCompanyName(string pre)
{
List<string> allCompanyName = new List<string>();
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
allCompanyName = (from a in dc.TopCompanies
where a.CompanyName.StartsWith(pre)
select a.CompanyName).ToList();
}
return allCompanyName;
}
33. Importa las libreras:

using System.Web.Script.Services;
using System.Web.Services;
34.
35.
36.
37.
Ejecuta la aplicacin con la tecla F5

Escribe las primeras letras de tu nombre
Observa como aparece el autocomplet
Cierra la ventana del navegador.
5. RESULTADOS
Al finalizar esta prctica, se obtendr un formulario que lea el nombre de un contacto y nos muestre la
funcin de autocompletado, mostrando los resultados ms cercanos a la bsqueda.
15/04/2014
Pgina 85

6. CONCLUSIONES
Con ste ejercicio, se pondr en prctica los conocimientos adquiridos en las dos prcticas anteriores,
uniendo todos los conocimientos y habilidades.
7.- REFERENCIAS
http://api.jquery.com/jquery.ajax/
http://www.w3schools.com/ajax/
http://mootools.net/
http://jquery.com/
15/04/2014
Pgina 86
Prctica
12
SERVICIOS WEB
Programacin Web que dice Realizar programas en donde se apliquen los
servicios web y estos puedan ser consultados de manera remota por los
compaeros de clases.
1.- OBJETIVO
Desarrollar servicios web para que puedan ser consumidos por diferentes aplicaciones web en tiempo
real.
2.- MARCO TERICO

Servicios Web:
Un servicio web (en ingls, Web Service o Web services) es una tecnologa que utiliza un conjunto de
protocolos y estndares que sirven para intercambiar datos entre aplicaciones. Distintas aplicaciones
de software desarrolladas en lenguajes de programacin diferentes, y ejecutadas sobre cualquier
plataforma, pueden utilizar los servicios web para intercambiar datos en redes de ordenadores como
Internet. La interoperabilidad se consigue mediante la adopcin de estndares abiertos. Las
organizaciones OASIS y W3C son los comits responsables de la arquitectura y reglamentacin de los
servicios Web. Para mejorar la interoperabilidad entre distintas implementaciones de servicios Web se
ha creado el organismo WS-I, encargado de desarrollar diversos perfiles para definir de manera ms
exhaustiva estos estndares. Es una mquina que atiende las peticiones de los clientes web y les enva
los recursos solicitados.
Estndares:
Web Services Protocol Stack: As se le denomina al conjunto de servicios y protocolos de los
servicios Web.
XML (Extensible Markup Language): Es el formato estndar para los datos que se vayan a
intercambiar.
SOAP (Simple Object Access Protocol) o XML-RPC (XML Remote Procedure Call): Protocolos
sobre los que se establece el intercambio.

Otros protocolos: los datos en XML tambin pueden enviarse de una aplicacin a otra mediante
protocolos normales como HTTP (Hypertext Transfer Protocol), FTP (File Transfer Protocol), o
SMTP (Simple Mail Transfer Protocol).
15/04/2014
Pgina 87
WSDL (Web Services Description Language): Es el lenguaje de la interfaz pblica para los
servicios Web. Es una descripcin basada en XML de los requisitos funcionales necesarios
para establecer una comunicacin con los servicios Web.
UDDI (Universal Description, Discovery and Integration): Protocolo para publicar la informacin
de los servicios Web. Permite comprobar qu servicios web estn disponibles.

WS-Security (Web Service Security): Protocolo de seguridad aceptado como estndar por
OASIS (Organization for the Advancement of Structured Information Standards). Garantiza la
autenticacin de los actores y la confidencialidad de los mensajes enviados.
Servidores de aplicaciones para servicios Web:
Oracle Fusion Middleware

Axis y el servidor Jakarta Tomcat (de Apache)
ColdFusion MX de Macromedia
Java Web Services Development Pack (JWSDP) de Sun Microsystems (basado en Jakarta
Tomcat)
Microsoft .NET
WebLogic
WebSphere
JAX-WS con GlassFish
Zope es un servidor de aplicaciones Web orientado a objetos desarrollado en el lenguaje de
programacin Python
PHP
El siguiente grfico muestra cmo interacta un conjunto de Servicios Web:
15/04/2014
Pgina 88

Servidor Web

Como primer punto, veremos como crear un servicio web:
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

Llena el campo nombre con: serviciosWeb
Clic en Aceptar
Seleccionar la opcin agregar Servicio web
En el cuadro de dialogo que aparece, colocar el nombre: datos
Pulsar el botn Aceptar.
Aparecer una nueva ventana con cdigo, localiza la lnea siguiente:
[WebService(Namespace = "http://tempuri.org/")]
51. Cambia el cdigo anterior por el siguiente:

[WebService(Namespace = "http://localhost/consumoServiciosWeb", Name=" Consumo
servicios Web", Description="Accedemos a una base de datos SQL Server mediante el uso de
Web Services")]
52. En la lnea de cdigo anterior, especificamos el Namespace para acceder a nuestra Web Service,
le damos un nombre y una descripcin que se mostrar posteriormente en el navegador.
53. Importa las bibliotecas SqlClient y Data para trabajar con ADO.NET que nos ayudar a la conexin
con nuestra base de datos:
using System.Data.SqlClient;
using System.Data;
54. Localiza las lneas de cdigo siguientes y brralas:

[WebMethod]
public string HelloWorld()
{
return "Hola a todos";
}
15/04/2014
Pgina 89

55. Crearemos nuestro web service colocando la instruccin [WebMethod]
56. Ahora escribiremos el servicio web de tipo List llamado consumirDatos con un parmetro de tipo
string para recibir el nombre:
public List<string> consumirDatos(string nombre)
{
}
57. Agregaremos un objeto de tipo List, el cual almacenar los resultados de nuestra consulta:
List<string> lista = new List<string>();
58. Ahora tres variables de tipo String que nos permitirn: tener nuestra cadena de conexin,
seleccionar los datos de nuestra base de datos y por ltimo una variable para manejo de errores:
String cadena = "Data Source=nombreServidor; Initial Catalog=agenda; Integrated Security=
True";
String consulta = "Select * from contactos where nombre like '%" + nombre + "%'";
String error = null;
59. Creamos una variable de tipo SqlConnection para conectarnos a la base de datos y le pasamos
como parmetro la cadena de conexin:
SqlConnection conexion = new SqlConnection(cadena);
60. Creamos una variable de tipo SqlCommand para poder ejecutar nuestra consulta y abrir la
conexin, le pasaremos dos parmetros: la consulta y la conexin.
SqlCommand comando = new SqlCommand(consulta, conexion);
61. Creamos ahora un objeto de tipo DataTable y otro de tipo SqlDataAdapter:

DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter();
62. Ejecutamos nuestro comando mediante el DataAdapter:

da.SelectCommand = comando;
63. Creamos un bloque try.. catch

try
{
15/04/2014
Pgina 90

}
catch (System.Exception ex)
{
}
64. Dentro del bloque try, llenaremos el adaptador con el DataTable y recorreremos cada fila resultante
con el DataRow. El resultado de cada DataRow lo almacenaremos en la lista. Recordemos que los
resultados que necesitamos son las columnas de nombre, apellidos y telfono celular. Esos se irn
concatenando en la lista.
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
lista.Add(dr["nombre"].ToString() + " " + dr["apellidos"].ToString() + " " +
dr["telefonoCelular"].ToString());
}
65. Dentro del bloque catch colocaremos un mensaje de error por si hay algn problema al momento
de ejecutar la consulta:
error = "Error: " + ex.Message;
66. Al finalizar el bloque trycatch regresaremos la lista obtenida por la consulta

return lista;
67. Guarda los cambios realizados (Ctrl + S)

A continuacin, como segunda tarea, veremos cmo se consume el servicio web, por lo que
necesitaremos crear otro proyecto que nos consuma el servicio que acabamos de crear.
68. En el panel Explorador de Soluciones, da clic derecho en el nombre de la solucin (Solucin

serviciosWeb)y selecciona la opcin Agregar Nuevo Proyecto.
69. En la ventana Agregar nuevo proyecto, del panel izquierdo, selecciona instalado Visual C# - Web
70. En el panel central selecciona el elemento Aplicacin web vaca de ASP.NET
71. En el campo Nombre, escribe: cliente
72. Pulsa el botn Aceptar
73. En el Explorador de Soluciones, da clic derecho sobre el nombre de proyecto cliente y selecciona
la opcin Agregar Formularios Web Forms
74. En el cuadro que aparece, escribe en el campo Nombre de elemento: consultarInformacin
75. Pulsa en el botn Aceptar.
76. Cmbiate a la vista diseo
77. Ahora colocaremos los siguientes elementos del cuadro de herramientas con sus respectivas
propiedades:
15/04/2014
Pgina 91
Elemento
Label
Textbox
Button
GridView1
Propiedad ID
lblNombre
txtNombre
cmdConsultar
gvInformacion
Propiedad Text
Nombre:
Consultar
Seccin
Estndar
Estndar
Estndar
Datos
78. Cmbiate a la vista cdigo.

79. Antes de la lnea de cdigo <asp:GridView ID="gvInformacion" runat="server"> escribe la
lnea para crear un fieldset con la leyenda: Informacin solicitada: y despus de la lnea
</asp:GridView>, cierra el campo de fieldset, debers tener el siguiente cdigo:
<fieldset>
<legend>Informacin Solicitada:</legend>
<asp:GridView ID="gvInformacion" runat="server">
</asp:GridView>
</fieldset>
80. El resultado deber ser similar al siguiente:
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
Guarda los cambios efectuados (Ctrl + S)

Da clic derecho sobre el archivo datos.asmx que esta en el proyecto serviciosWeb.
Da clic en la opcin Ver en explorador (explorador por default)
Se abrir le ventana del explorador con el nombre de nuestro WebMethod que creamos
(consumirDatos).
En la barra de direcciones del navegador, selecciona y copia (Ctrl + C) la direccin que aparece,
por ejemplo: http://localhost:3908/datos.asmx
Da clic en el nombre de nuestro WebMethod
Aparecer una nueva ventana en la que puedes dar clic en el botn Invocar para observar todos
los registros guardados en la base de datos.
Cierra el navegador
En la ventana del explorador de soluciones, da clic derecho sobre el elemento Referencias.
Selecciona la opcin Agregar referencia de servicio.
15/04/2014
Pgina 92

91. En la ventana resultante, en el campo Direccin, pega la direccin que habas copiado
previamente (Ctrl. + V)
92. Presiona el botn Ir.
93. Observa que en la seccin Servicios, aparece el nombre de nuestro Web Service.
94. En el campo Espacio de nombres escribe: consumoDatos.
95. Pulsa el botn Aceptar.
96. Observa que en el Explorador de soluciones, en la seccin de Referencias, aparece una nueva
carpeta llamada Service References y dentro aparece el nombre de nuestro Web Service:
consumoDatos.
97. En el Explorador de Soluciones, da doble clic en el archivo consultarInformacin.aspx
98. Da doble clic sobre el botn Consultar para agregar el cdigo que hace referencia al web service
99. Escribimos una variable de tipo string que almacenar el nombre que se recibe del cuadro de texto
txtnombre, adems de una variable para almacenar un posible error.
string nombre = txtnombre.Text, error;
100. Ahora, lo importante para poder utilizar nuestro web service es crear un objeto que debe hacer
referencia al namespace que habamos creado previamente y luego hacemos referencia al nombre
de nuestro web service: Consumo servicios Web especificando que ser servicio Soap trabajando
del lado del cliente:
consumoDatos.ConsumoserviciosWebSoapClient consumo = new
consumoDatos.ConsumoserviciosWebSoapClient();
101. Creamos un bloque try catch para mandar a imprimir la informacin en nuestra pgina web
dentro del GridView:
try
{
}
catch (Exception ex)
{
}
102. Dentro del bloque try, llenaremos nuestro GridView con la llamada al Web Service y pasaremos
como parmetro una variable nombre que extrae el nombre del cuadro de texto, despus
haremos un bind a nuestro GridView
gvInformacion.DataSource = consumo.consumirDatos(nombre);
gvInformacion.DataBind();
15/04/2014
Pgina 93

103. Dentro del bloque catch mandaremos el mensaje de error si es que lo hubiera a la hora de
extraer la informacin desde el Web Service:
error = ex.Message;
104. Ahora, cmbiate a la seccin de cdigo de cargar pgina y escribe la instruccin para que cada
que se inicialice la pgina, el cuadro de texto txtNombre obtenga el foco, tu cdigo deber quedar
igual al siguiente:
protected void Page_Load(object sender, EventArgs e)
{
txtnombre.Focus();
}
105. Da clic derecho sobre el nombre del proyecto cliente. Selecciona la opcin: Establecer como
proyecto de inicio
106. Guarda todos los cambios efectuados (Ctrl. + shift + S)
107. Ejecuta el proyecto (Men Depurar Iniciar depuracin o F5)
108. Una vez abierta la pgina del navegador, escribe las primeras tres palabras de tu nombre en el
cuadro de texto y luego presiona el botn Consultar, deber aparecerte los datos que se solicitan
para ese contacto. En caso de que existan ms personas cuyas tres primeras letras de su nombre
coincidan con el que pusiste, las mostrar en el gridview.
109. Cierra la ventana del navegador.
5. RESULTADOS
Al concluir esta prctica el alumno deber ser capaz de crear y consumir un servicio web aplicando la
tecnologa .net y podr aplicar los conocimientos a cualquier plataforma de desarrollo. Cuando
consuma su servicio web podr consultar los datos almacenados en SQL Server con la base de datos
creada anteriormente.
6. CONCLUSIONES
Con sta prctica el alumno es capaz de aplicar los conocimientos necesarios en el desarrollo de
Servicios web y as facilitar la comunicacin con diferentes tecnologas de desarrollo como Java, .Net,
entre otras.
7.- REFERENCIAS
http://www.w3.org/TR/soap/
http://code.msdn.microsoft.com/Ejemplo-Web-Service-3e5d316b
http://msdn.microsoft.com/es-mx/library/8wbhsy70%28v=vs.100%29.aspx
15/04/2014
Pgina 94
15/04/2014
Pgina 95
LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR

FOLIO
NOMBRE DEL MATERIAL, EQUIPO O REACTIVO
CANT.
Computadora con internet
30
Navegador de Internet
30
Internet Information Services
30
Visual Studio 2010 o superior
30
Microsoft SQL Server 2005
30
UNIDAD
LISTA DE BIBLIOGRAFA REQUERIDA

FOLIO
1
2
3
4
5
6
BIBLIOGRAFIA
CANT
Michael Bowers.Pro CSS and HTML DesignPatterns. Editorial Apress

Domine HTML Y DHTML 2 edicin. Jos Lpez Quijado. Editorial Alfaomega.
PHP 6 AND MYSQL 5. LARRY ULLMAN. Editorial PeachpitPress.
Olivier HEURTEL. PHP 5.3 Desarrollar un Sitio Web dinmico e interactivo.
Editorial ENI.
JesseLiberty& Dan Hurwitz. Programming ASP.NET. Editorial Oreily
Jos Manuel Alarcn Agun. Programacin Web con Visual Studio y ASP.NET
2.0. Editorial KrasisPress.
15/04/2014
Pgina 96
CONTROL DE CAMBIOS DEL MANUAL DE PRCTICAS
DATOS GENERALES
FECHA DE
ACTUALIZAC
ION
30/08/2013
15/04/2014
ELABOR Y/O
ACTUALIZ
DESCRIPCIN DE LA ACTUALIZACIN
LIC. YESENIA PREZ REYES
Se elabor por primera vez
LIC. IVAN RAFAEL SNCHEZ

JUREZ
Se cambi el nmero total de prcticas, as como el nombre de cada una de ellas, el contenido de
cada prctica se reestructur. Las prcticas que estaban en el manual anterior se mejoraron en su
totalidad.
Fecha de Actualizacin 15/04/2014
Pgina 97

Prácticas

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Prácticas

Hochgeladen von

Copyright:

Verfügbare Formate

MANUAL DE

Instalacin, configuracin y administracin de sitios web------------------------------------------------------2

Compatibilidad con diferentes navegadores-------------------------------------------------------------------------8

Programas con y sin Hojas de Estilo en Cascada-----------------------------------------------------------------17

Controles de formulario en pginas web------------------------------------------------------------------------------27

Validacin de prototipos web-----------------------------------------------------------------------------------------------32

Herramientas de interaccin dinmica---------------------------------------------------------------------------------66

Programas dinmicos del lado del servidor--------------------------------------------------------------------------78

LISTA DE MATERIAL, EQUIPO O REACTIVO A UTILIZAR---------------------------------------------------------97

Programacin Web [AEB-1055]

La importancia de la materia se centra en conocer y desarrollar cada una de las

Programacin Web [AEB-1055]

servidores web y lenguajes de programacin del lado servidor,

objetos, adems de flexibilidad de consulta y actualizacin de datos.

Programacin Web [AEB-1055]

Gestionar la estructura fsica de los datos y su almacenamiento, proporcionando eficiencia en las

operaciones de la base de datos y el acceso al medio de almacenamiento.

espacio en disco utilizado.

usuarios interactivos y programadores.

diferentes puntos de vista de los usuarios.

Entre los tipos ms encontrados de servidores Web podemos encontrar:

Programacin Web [AEB-1055]

Apache: Este es el ms comn y ms utilizado en todo el mundo. Adems, es gratuito, y de

se deber utilizar una mquina virtual.

sobre entorno de este sistema.Sin embargo, como Apache, es multiplataforma, y recientemente

convertido en el 4 servidor HTTP ms popular de la red y tambin se distribuye bajo licencia

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR

Computadora porttil o de escritorio

Programacin Web [AEB-1055]

Sistema Operativo Windows

4.- COMPETENCIAS ESPECFICAS

Instalar SQL Server Express

Programacin Web [AEB-1055]

Programacin Web [AEB-1055]

Programacin Web [AEB-1055]

COMPATIBILIDAD CON DIFERENTES

2.- MARCO TERICO

Programacin Web [AEB-1055]

href | target | rel | hreflang | media | type

Programacin Web [AEB-1055]

autobuffer | autoplay | controls | loop | src

checked | default | disabled | hidden | icon | label |

height | src | type | width

Programacin Web [AEB-1055]

<h1> ... <h6>

accept | alt | auto-complete | autofocus | cheked |

high | low | max | min | optimum | value

Programacin Web [AEB-1055]

media | src | type

Define texto que debe tener un estilo diferente del texto

Programacin Web [AEB-1055]

src | poster | autobuffer | autoplay | loop | controls | width

3.- MATERIAL, EQUIPO, REACTIVO o SOTFWARE A UTILIZAR

Computadora porttil o de escritorio

4.- COMPETENCIAS ESPECFICAS

Programacin Web [AEB-1055]

Cambia TusIniciales por las iniciales de tu nombre

Entra al explorador de archivos

Programacin Web [AEB-1055]

Programacin Web [AEB-1055]

PROGRAMAS CON Y SIN HOJAS DE

2.- MARCO TERICO

Programacin Web [AEB-1055]

Tabla 2 Soporte de Hojas de Estilo en Cascada en diferentes Navegadores