- Título de la unidadformacion.desarrollando.net/cursosfiles/formacion/curso... · 2011-10-18 ·...

1 UNIDAD DIDÁCTICA 3.DESARROLLO DE APLICACIONES WEB ASP.NET

U1 - Título de la unidad

En esta unidad vamos a ver las principales características de una aplicación web.

Al finalizar el estudio de estas lecciones serás capaz de:

• Utilización de CSS.

• Crear una aplicación.

• Utilización de Javascript.

UNIDAD DIDÁCTICA 3.DESARROLLO DE APLICAC

L1 – ¿Qué es ASP.NET

ASP.Net es framework para aplicaciones web.

Fue desarrollado y comercializado por

Es el sucesor de Active Server Pages (ASP).

ASP.NET está construido sobre escribir código ASP.Net desde cualquier lenguaje admitido

Definición

ASP (Active Server Page) es un ambiente de aplicación gratuitacombinar HTML, JavaScript, Php,… para desarrollar páginas dinámicas.

ASP.Net nos permite crear aplicaciones webinteractividad por parte del

Para desarrollar este tipo de (Internet Information Server).

Definición

IIS (Internet Information Server) es un conjunto de servicios para servidores, convierte cualquier ordenador en un servidor de Internet, a través del cual se pueden publicar webs de manera local o remota.

ESARROLLO DE APLICACIONES WEB ASP.NET

¿Qué es ASP.NET ?

para aplicaciones web.

Fue desarrollado y comercializado por Microsoft.

de Active Server Pages (ASP).

construido sobre Common Language Runtime, esto nos permite escribir código ASP.Net desde cualquier lenguaje admitido por: NET framework.

ASP (Active Server Page) es un ambiente de gratuita y abierta que nos permite

combinar HTML, JavaScript, Php,… para desarrollar páginas dinámicas.

crear aplicaciones web dinámicas, es decir, nos permite la interactividad por parte del usuario.

Para desarrollar este tipo de aplicaciones es necesario tener instalado el iis (Internet Information Server).

IIS (Internet Information Server) es un conjunto de servicios para servidores, convierte cualquier ordenador en un servidor de Internet, a través del

pueden publicar webs de manera local o

2

, esto nos permite framework.

dinámicas, es decir, nos permite la

aplicaciones es necesario tener instalado el iis


L2 – Instalación de IIS

Vamos a instalar IIS desde dos tipos de Sistemas Operativos que son los más comunes.

Windows XP

Iremos a Inicio

(IIS_1)

Después a “Panel de Control”

(IIS_2)


Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Agregar o quitar componentes de Windows”

(IIS_3)

Este es la pantalla del “Asistente para componentes de Windows”.

Veremos en una lista todos los componentes y además los que tengamos instaladas tendrán marcado un check a la izquierda.

Iremos a la opción “Servicios de Internet Information Server”, marcaremos la opción y pulsaremos el botón de “Siguiente”

(IIS_4)


Ahora empezará la instalación, una vez terminada, nos aparecerá la siguiente ventana.

(IIS_5)

Para comprobar que se nos ha instalado correctamente abriremos nuestro navegador Internet Explorer y en la barra de direcciones escribiremos “localhost”

Se nos tendrán que abrir dos ventanas.

(IIS_6)


Windows 7

Iremos a inicio

(IIS_7)

Después a “Panel de Control”

(IIS_8)


Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Programas y características”

(IIS_9)

Se nos abrirá una nueva pantalla donde seleccionaremos la opción de “Agregar o quitar componentes de Windows”.

(IIS_10)


Este es la pantalla del “Asistente para componentes de Windows”.

Veremos en una lista todos los componentes y además los que tengamos instaladas tendrán marcado un check a la izquierda.

Iremos a la opción “Servicios de Internet Information server”, marcaremos la opción y pulsaremos el botón de “Aceptar”


L3 – Estructura de una aplicación web.

Una aplicación web normalmente está estructurada como una aplicación de tres capas.

El navegador sería la primera capa, el cual manda peticiones a la capa intermedia (lugar donde estaría nuestro código) y a su vez manda peticiones de consulta a la base de datos y proporciona la interfaz de usuario.

La estructura de una página web se puede dividir en dos partes:

• Externa • Interna.

Estructura Externa.

Todas las páginas web que creemos deben de tener esta estructura.

(ESTRUC_1)


A continuación vamos a detallar cada una de las partes.

• Cabecera + menú (opcional): aquí pondremos una cabecera que generalmente será una imagen, como si fuera un logo. Opcionalmente puede ir el menú donde se encuentren todos los enlaces a las diferentes páginas que tengamos.

• Columna 1: esta parte la podemos utilizar para poner el menú sino lo hemos querido incluir en la cabecera. Además podemos insertar elementos, como por ejemplo combos, imágenes, enlaces,…

• Contenido: aquí pondremos el contenido personal y único de cada web. • Columna 2: realizará la misma funcionalidad que la columna 1. • Pie: en este apartado es donde se incluirá todos los enlaces a las diferentes

páginas de nuestra web, y además pequeñas imágenes como logo.

Las columnas 1 y 2 no son obligatorias que estén en nuestras páginas, si no las incluimos esa parte será absorbida por el “Contenido”.

Estructura Interna.

La estructura interna nos referimos a la parte de la programación y del código HTML.

En la parte del código HTML tendremos el código para estructurar la página, las llamadas a archivos css, y las referencias a javascript (las cuales pueden estar en la misma página o sin son comunes a varias en un archivo aparte).

En la parte de código es donde se realizarán todas las consultas a base de datos, código de validación de datos,… todas estas clases o métodos podrán estar en la misma página o en una clase independiente si es común para varias páginas.


L4 – Configuración de una aplicación web ASP.NET.

Estructura de una aplicación web.

Una aplicación web normalmente está estructurada como una aplicación de dos o tres capas.

Dos capas.

Se basa en un ordenador que pide los datos (cliente) y luego otro ordenador que se encarga de procesarlas (servidor).

Se trata de un modelo no conectado.

Tres capas.

Se basa en un ordenador que pide los datos (cliente) y luego otro dos ordenadores, el primero será el servidor de aplicaciones y el segundo el servidor de base de datos.

Se trata de un modelo no conectado.


L5 – Los webForm o formularios web.

Los formularios web los utilizamos para solicitar datos a los usuarios mediante documentos, cuestionarios,….

Los usos más frecuentes de un formulario son para la reregistros, envió de consultas,…

Los formularios constan de dos partes:

• Cliente: contiene el código HTML, CSS y JavaScript.• Servidor: se encuentra el lenguaje de programación.

Definición

Los formularios web son un tipo de se ve desde cualquier navegador, pudiéndose ser rellenado y enviado a través de internet.

Estos tipos de formularios pueden contener campos de carácter

Una vez enviado el formulario hay comunes:

• El usuario reciba de forma agradecimiento.

• Avisándole que en breve recibirá un • Indicándole que sus datos han sido

En cuanto a los datos que llegan al servidor, se rpara su procesamiento, este programa se encuentra instalado en el servidor y mediante páginas ASP (Active Server Pages

En el caso de estas páginaspara las ASP.

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar una solicitud…


Los webForm o formularios web.

Los formularios web los utilizamos para solicitar datos a los usuarios mediante documentos, cuestionarios,….

Los usos más frecuentes de un formulario son para la realización de inscripciones, registros, envió de consultas,…

Los formularios constan de dos partes:

: contiene el código HTML, CSS y JavaScript. : se encuentra el lenguaje de programación.

Los formularios web son un tipo de formulario, que se ve desde cualquier navegador, pudiéndose ser rellenado y enviado a través de internet.

Estos tipos de formularios pueden contener campos de carácter obligatorio

Una vez enviado el formulario hay tres tipos de respuestas que son las más

El usuario reciba de forma inmediata un correo electrónico dándole nuestro

Avisándole que en breve recibirá un correo electrónico. Indicándole que sus datos han sido enviados correctamente

a los datos que llegan al servidor, se requiere de un programa especial para su procesamiento, este programa se encuentra instalado en el servidor y

Active Server Pages).

páginas, contienen trozos de código escrito en Visual Basic

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar

12

Los formularios web los utilizamos para solicitar datos a los usuarios mediante

alización de inscripciones,

obligatorio.

de respuestas que son las más

un correo electrónico dándole nuestro

correctamente.

equiere de un programa especial para su procesamiento, este programa se encuentra instalado en el servidor y

to en Visual Basic

Con estos medios podemos ingresar los datos del formulario recibido a una base de datos, enviar de forma automática un mensaje de respuesta al usuario, autorizar


L6 – Los controles de servidor web.

Definición

Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se ejecutan cuando el usuario realiza alguna acción.

ASP.NET contiene un numerososencillos cuadros de texto hasta complejos calendarios.

Muchos controles de servidor Web son como botones y cuadros de texto.

Los controles de servidor incluyen características más avanzadas que elas que cabe destacar:

Un modelo de programación

La posibilidad de controlar

La compatibilidad con temas visuales, que aportan una consistencia visual a todos los controles que utilicemo

La existencia de eventos que nos permite ejecutar código.

La sintaxis para agregar un

<asp:NombreControl id="Identificador"</asp:NombreControl>

“NombreControl” es el nombre del control de servidor que deseemos agregar.

“Identificador” es un nombre único del control y que no podrá estar repetido en otro control.

“Atributos”: definen las propiedades y sus valores


Los controles de servidor web.

Los controles de servidor Web ASP.NET son objetos de páginas Web ASP.NET que se ejecutan cuando el usuario realiza alguna acción.

numeroso conjunto de controles de servidor: desde sencillos cuadros de texto hasta complejos calendarios.

Muchos controles de servidor Web son similares a elementos HTML conocidos, como botones y cuadros de texto.

Los controles de servidor incluyen características más avanzadas que e

de programación más rico y seguro.

controlar su propio aspecto mediante plantillas.

La compatibilidad con temas visuales, que aportan una consistencia visual a todos los controles que utilicemos en nuestra aplicación web.

La existencia de eventos que nos permite ejecutar código.

La sintaxis para agregar un control de servidor es la siguiente:

="Identificador" atributos runat="server" >

s el nombre del control de servidor que deseemos agregar.

” es un nombre único del control y que no podrá estar repetido en

”: definen las propiedades y sus valores específicos del control.

13

de servidor: desde

a elementos HTML conocidos,

Los controles de servidor incluyen características más avanzadas que estos, entre

La compatibilidad con temas visuales, que aportan una consistencia visual a todos

s el nombre del control de servidor que deseemos agregar.

” es un nombre único del control y que no podrá estar repetido en

del control.


Recuerde

El “Identificador” será único de cada control.

Las principales propiedades control son las siguientes:

• BackColor: obtiene o establece el color de fondo.• BorderColor: obtiene o establece el color del • BorderStyle: obtiene o establece el estilo del borde.• BorderWith: obtiene o • CssClass: obtiene o establece la clase CSS.• Enabled: obtiene o establece si el control esta activo o no.• Font: obtiene o establece la fuente.• ForeColor: obtiene o establece el color de la fuente.• Height: obtiene o establece la altura.• ID: obtiene o establece el nombre único.• Visible: obtiene o establece si el control es visible para el usuario o no.• Text: obtiene o establece el texto que se va a• Width: obtiene o establece la anchura.

A continuación vamos a ver los principales controles que nos podemos encontrar en cualquier aplicación que desarrollemos.


“Identificador” será único de cada control.

propiedades que nos vamos a encontrar en todos los elementos de control son las siguientes:

: obtiene o establece el color de fondo. : obtiene o establece el color del borde. obtiene o establece el estilo del borde.

: obtiene o establece el ancho del borde. : obtiene o establece la clase CSS. : obtiene o establece si el control esta activo o no.

: obtiene o establece la fuente. : obtiene o establece el color de la fuente.

: obtiene o establece la altura. : obtiene o establece el nombre único.

: obtiene o establece si el control es visible para el usuario o no.: obtiene o establece el texto que se va a mostrar al inicio.: obtiene o establece la anchura.

a ver los principales controles que nos podemos encontrar en cualquier aplicación que desarrollemos.

14

todos los elementos de

: obtiene o establece si el control es visible para el usuario o no. mostrar al inicio.

a ver los principales controles que nos podemos encontrar en


TextBox

Es un control que permite al usuario escribir texto.

Su representación es la siguiente:

(CONTROL_2)

Las principales propiedades de este control con las que vamos a trabajar son las siguientes:

• Columns: obtiene o establece el ancho, expresado en caracteres. • MaxLength: obtiene o establece el número máximo de caracteres que el

usuario puede introducir. • ReadOnly: obtiene o establece el valor de si podemos modificar el

contenido o es de sólo lectura. • TextMode: indica si va en el control se va a poder escribir una línea

(SingleLine), varias líneas (MultiLine) o se trata de una contraseña (Password, los caracteres que escribamos no se verán, se visualizarán puntos).

Su evento principal es “Textchanged”, el cual no se produce con cada tecla que pulsemos, simplemente cuando salimos del textBox.


Button

Es un control que representa un botón. Su representación es la siguiente:

(CONTROL_3)

Recuerde

Si la acción solo se va a ejecutar en el lado del cliente pondríamos un control de HTML.

Por ejemplo si solo queremos que al nos saque una alerta.


• CommandArgumental evento command junto con el valor de la

• CommandName: al evento Command del control.

• OnClientClick: obtiene o ejecutar cuando se genera un evento de Click.

• PostBackUrl: obtiene el control.

• Text: establece el texto que aparece dentro del control.

Sus eventos principales son los siguientes:

• Click: señala un click sobre el control.• Command: señala un click sobre el control, y env

propiedades CommandName y CommandArgument.


control que representa un botón.

Su representación es la siguiente:

(CONTROL_3)

Si la acción solo se va a ejecutar en el lado del cliente pondríamos un control de HTML.

Por ejemplo si solo queremos que al pulsar el botón nos saque una alerta.

s principales propiedades de este control con las que vamos a trabajar son las

CommandArgument: obtiene o establece un valor opcional que se envía al evento command junto con el valor de la propiedad CommandName.

: obtiene o establece el nombre del comando que se envía al evento Command del control.

btiene o establece todos los comandos que se van a ejecutar cuando se genera un evento de Click.

btiene o establece la url de destino cuando se hace click en

: establece el texto que aparece dentro del control.


: señala un click sobre el control. : señala un click sobre el control, y envía los valores de las


16

s principales propiedades de este control con las que vamos a trabajar son las

establece un valor opcional que se envía propiedad CommandName.

establece el nombre del comando que se envía

establece todos los comandos que se van a

establece la url de destino cuando se hace click en

ía los valores de las


ImageButton

Es un control que representa una imagen y realiza un evento con cada click del usuario. Su representación es la siguiente:

(CONTROL_4)


• AlternateText: obtiene o establece el texto alternativo que se muestren el control cuando no está disponible la imagen.

• CommandArgument: obtiene o establece un valor opcional que se envía al evento Command junto con el valor de la propiedad CommandName asociada al control.

• CommandName: obtiene o establece el nombre del comando que se envía al evento Command del control.

• ImageAlign: obtiene o establece la alineación de la imagen con respecto a otros elementos de la página Web.

• ImageUrl obtiene o establece la dirección URL de la imagen que se muestra en el control.

• OnClientClick: obtiene o establece la secuencia de comandos de cliente que se ejecuta cuando se genera un evento Click del control.

• PostBackUrl: Obtiene o establece la dirección URL de la página de destino cuando se hace clic en el control.


• Click: señala un click sobre el control. • Command: señala un click sobre el control, y envía los valores de las



LinkButton

Es un control que representa una imagen y realiza un evento con cada click del usuario. Su representación es la siguiente:

(CONTROL_5)


• CommandArgument: Obtiene o establece un valor opcional que se envía al evento Command junto con el valor de la propiedad

• CommandName asociada al control. • CommandName: Obtiene o establece el nombre del comando que se envía

al evento Command del control. • OnClientClick: Obtiene o establece la secuencia de comandos de cliente

que se ejecuta cuando se genera un evento Click del control. • PostBackUrl: Obtiene o establece la dirección URL de la página de destino

cuando se hace clic en el control. • Text: Obtiene o establece el título de texto que se muestra en el control.


• Click: señala un click sobre el control. • Command: señala un click sobre el control, y envía los valores de las



CheckBox

Es un control que representa un texto el cual el usuario puede activarlo o desactivarlo. Su representación es la siguiente:

(CONTROL_6)


• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una evolución de datos automática al servidor cuando el usuario hace clic en el control.

• Checked: Obtiene o establece un valor que indica si el control está activado.

• InputAttributes: Obtiene la colección de atributos HTML para el elemento <INPUT> representado del control.

• LabelAttributes: Obtiene la colección de atributos HTML para el elemento <LABEL> representado del control.

• Text: Obtiene o establece la etiqueta de texto asociada al control. • TextAlign: Obtiene o establece la alineación de la etiqueta de texto

asociada al control.

Su evento principal es el siguiente:

• CheckedChanged: Señala un cambio en el valor de la propiedad Checked del control entre cada envío al servidor.


CheckBoxList

Es un control que representa una serie de textos el cual el usuario puede activarlos o desactivarlos. Podemos marcar todos los que queramos. Su representación es la siguiente:

(CONTROL_7)


• AutoPostBack:Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en uno de los controles de entrada del control.

• DataTextField:Obtiene o establece el campo del origen de datos que proporciona el contenido de texto de los elementos del control.

• DataTextFormatString: Obtiene o establece la cadena de formato que controla cómo se muestran los datos enlazados al control.

• DataValueField: Obtiene o establece el campo del origen de datos que proporciona el valor de cada elemento del control.

• Items: Obtiene la colección de elementos del control. • SelectedIndex: Obtiene o establece el índice inferior de los elementos

seleccionados en el control. • SelectedItem: Obtiene el elemento seleccionado con el índice inferior en el

control. • SelectedValue: Obtiene el valor del elemento seleccionado en el control o

selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control.


• SelectedIndexChanged: Señala un cambio en las opciones activas del control entre cada envío al servidor.

• TextChanged: Señala un cambio en el valor de las propiedades Text y/o SelectedValue del control entre cada envío al servidor.

Su método principal es el siguiente:

• ClearSelection: Desactiva todas las opciones de la lista.


RadioButton

Es un control que representa un texto de opción el cual el usuario puede activar o desactivar. Su representación es la siguiente:

(CONTROL_8)


• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en el control.

• Checked: Obtiene o establece un valor que indica si el control está activado.

• GroupName: Obtiene o establece el nombre del grupo al que pertenece el control.

• InputAttributes: Obtiene la colección de atributos HTML para el elemento <INPUT> representado del control.

• LabelAttributes: Obtiene la colección de atributos HTML para el elemento <LABEL> representado del control.

• Text: Obtiene o establece la etiqueta de texto asociada al control. • TextAlign: Obtiene o establece la alineación de la etiqueta de texto

asociada al control.

Su evento principal es el siguiente:

• CheckedChanged: Señala un cambio en el valor de la propiedad Checked del control entre cada envío al servidor.


RadioButtonList

Es un control que representa una serie de textos de opción los cuales el usuario puede marcarlos o no. Sólo puede marcar uno. Su representación es la siguiente:

(CONTROL_9)


• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario hace clic en uno de los controles de entrada del control.

• CellPadding: Obtiene o establece el valor del atributo HTML cellpadding para el elemento <TABLE> representado del control.

• CellSpacing: Obtiene o establece el valor del atributo HTML cellspacing para el elemento <TABLE> representado del control.

• DataTextField: Obtiene o establece el campo del origen de datos que proporciona el contenido de texto de los elementos del control.



• Items: Obtiene la colección de elementos del control. • RepeatColumns: Obtiene o establece el número de columnas que se

muestran en el control. • RepeatDirection: Obtiene o establece la dirección en la que se muestran

los elementos del control. • RepeatLayout: Obtiene o establece la disposición de los elementos en el

control. • SelectedIndex: Obtiene o establece el índice inferior de los elementos

seleccionados en el control. • SelectedItem: Obtiene el elemento seleccionado en el control. • SelectedValue: Obtiene el valor del elemento seleccionado en el control o

selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control. • TextAlign: Obtiene o establece la alineación del texto de los elementos del

control.






• ClearSelection: Desactiva todas las opciones de la lista.


ListBox

Es un control que representa una lista de valores que permite al usuario seleccionar una o varias opciones. Su representación es la siguiente:

(CONTROL_10) Existe otra forma de verlo representado, que es como si fuera una lista desplegable:

(CONTROL_11)


• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario selecciona uno de los elementos del control.


• DataTextFormatString: controla cómo se muestran los datos enlazados al control.


• Items: Obtiene la colección de elementos del control. • Rows: Obtiene o establece el número de filas que se muestran en el

control. • SelectedIndex: Obtiene o establece el índice inferior de los elementos

seleccionados en el control. • SelectedItem: Obtiene el elemento seleccionado con el índice inferior en el

control. • SelectedValue: Obtiene el valor del elemento seleccionado en el control o

selecciona el elemento en el control que contiene el valor especificado. • SelectionMode: Obtiene o establece el modo de selección del control. • Text: Obtiene o establece la propiedad SelectedValue del control.






• ClearSelection: Desactiva todas las opciones de la lista. • GetSelectedIndices: Obtiene la matriz de valores de índice de los

elementos seleccionados en el control.


DropdownList

Es un control que representa una lista de valores desplegables que permite al usuario seleccionar una única opción. Su representación es la siguiente:

(CONTROL_12)


• AutoPostBack: Obtiene o establece un valor lógico que indica si se produce una devolución de datos automática al servidor cuando el usuario modifica el elemento en el control.




• Items: Obtiene la colección de elementos del control. • SelectedIndex: Obtiene o establece el índice del elemento seleccionado en

el control. • SelectedItem. Obtiene el elemento seleccionado en el control. • SelectedValue: Obtiene el valor del elemento seleccionado en el control o

selecciona el elemento en el control que contiene el valor especificado. • Text: Obtiene o establece la propiedad SelectedValue del control.


• SelectedIndexChanged: Señala un cambio en los elementos seleccionados del control entre cada envío al servidor.



Panel

Es un control que representa un contenedor de otros controles, es decir, es un control en el cual dentro del mismo podemos insertar otros controles con el fin de tenerlos agrupados.


• BackImageUrl: Obtiene o establece la dirección URL de la imagen de fondo del control.

• DefaultButton: Obtiene o establece el identificador ASP.NET del botón predeterminado incluido en el control.

• Direction: Obtiene o establece la dirección en la que se muestran los controles que incluyen texto en el control.

• GroupingText: Obtiene o establece el título del grupo de controles contenido en el control.

• HorizontalAlign: Obtiene o establece la alineación horizontal del contenido del panel.

• ScrollBars: Obtiene o establece la visibilidad y la posición de las barras de desplazamiento del control.

• Wrap: Obtiene o establece un valor lógico que indica si el contenido se ajusta dentro del control.

L7 – ¿Qué es el ViewState

Definición

Se trata de un diccionario compuesto de información que permite estado de un control de servidor.

Para guardar en el viewState el estado de un control utilizaríamos el siguiente código:

'Almacena en el estado de vista el valor de la fecha actual con la clave FechaInicioMe.ViewState("FechaInicial"

Para posteriormente recuperar este valor realizaríamos el siguiente código:

'Recupera el estado de vista el valor con la clave'FechaInicial y lo almacena en la variable Fecha'Si este valor no habría sido guardado anteriorme'establecemos la fecha actual como valor por defecto.Dim fecha As DateTime If Me.ViewState("FechaInicial"

fecha = DateTime.NowElse

fecha = CType(Me.ViewState(End If

No todos los valores de los controles son introducidos por el usuario: algunos de ellos son obtenidos mediante la lógica de la aplicación.

En estos casos no es necesario almacenar dichos valores en el estado de vista, ya que podemos obtenerlos nuevamente ejecutando la lógica de la aplicación.

ASP.NET nos permite deshabilitar el almacenamienun control de servidor en el estado de viEnableViewState en Falso.

Para ello pondremos lo siguiente en el control:

 runat="server" enableViewState="false" />

28

Para guardar en el viewState el estado de un control utilizaríamos el siguiente

'Almacena en el estado de vista el valor de la fecha actual con la clave FechaInicio


los valores de los controles son introducidos por el usuario: algunos de

necesario almacenar dichos valores en el estado de vista, ya que podemos obtenerlos nuevamente ejecutando la lógica de la aplicación.

to automático de los valores de ciendo el valor de su propiedad


L8 – Controles de validación de datos.

En cualquier aplicación Web dinámica, en la que existe interacción con el usuario, se produce un intercambio de información bidireccional hacia y desde la misma.

La información que suministra el usuario puede ser errónea, bien sea por error del mismo o por tratarse de un ataque malintencionado.

En cualquier caso, esta información errónea puede causar un mal funcionamiento de la aplicación Web, por lo que ésta debe estar preparada para hacer frente a estas situaciones.

El objetivo último de un formulario es recopilar información proporcionada por el usuario y enviarla hasta el lado servidor de la aplicación Web para su proceso.

El entorno de trabajo de ASP.NET simplifica el diseño y la programación de formularios, poniendo a nuestra disposición un potente conjunto de herramientas: formularios Web, controles HTML, controles de servidor…

Sin embargo, independientemente de que se trate de una aplicación Web o de escritorio, debemos enfrentarnos al hecho de que la información proporcionada por el usuario puede ser errónea.

Esta problemática se debe a causas muy variadas, desde un error al introducir los datos hasta información con carácter malicioso…

Por lo tanto, nuestra aplicación debe estar preparada ante esta realidad, y actuar activamente validando la información proporcionada por el usuario.

Sólo así garantizaremos el buen funcionamiento de la misma y evitaremos resultados erróneos con consecuencias de mayor o menor gravedad.

Sabemos que una aplicación Web se ejecuta en dos contextos bien diferenciados: el lado cliente y el lado servidor.

Al diseñar el mecanismo de validación de nuestra aplicación, una primera cuestión fundamental que debemos responder es dónde tendrá lugar ésta.

Puesto que queremos validar la información introducida por el usuario, y estas entradas tienen lugar en el navegador Web, la respuesta obvia parece ser que la validación debería efectuarse en el lado cliente de la aplicación, utilizando un lenguaje como JavaScript.


(VAL_1)

Esta aproximación presenta la ventaja de que la información se valida antes de ser enviada al servidor, por lo que el usuario obtiene inmediatamente el resultado de la validación de datos.

Sin embargo… ¿qué sucede si el navegador del usuario no soporta JavaScript? ¿O si lo tiene deshabilitado? La información llegará hasta el servidor sin validar.

Para resolver este problema, podemos plantear la validación de los datos en el lado servidor de la aplicación, utilizando un lenguaje como ASP.NET:

(VAL_2)

De este modo la información siempre se valida antes ser procesada por la aplicación Web, no presenta la inmediatez de la validación en el lado cliente: es preciso un envío y devolución de datos al servidor para notificar cualquier problema con los datos.


Si queremos lo mejor de los dos enfoques (inmediatez de respuesta y validación asegurada) debemos implementar la lógica de validación en los lados cliente y servidor de la aplicación:

(VAL_3)

El inconveniente es que tenemos que escribir código de validación en ambos lados de la aplicación, por lo que la productividad del ciclo de desarrollo disminuye.

Para resolver esta situación ASP.NET nos ofrece los denominados controles de validación.

(VAL_4)

En el caso de la validación del lado cliente, ASP.NET genera el código más adecuado al entorno en que se ejecuta la aplicación.


Esto permite que el código de validación del lado cliente se adapte al navegador Web del usuario, manteniendo las características y comportamientos abstractos que definen el control de validación.

Todos los controles de validación nos proporcionan, además de miembros específicos, una interfaz de programación común.

Las principales propiedades comunes de los controles de validación son las siguientes:

• ControlToValidate: Obtiene o establece el identificador ASP.NET del control de entrada que va a validar el control.

• Display: Obtiene o establece el comportamiento de presentación del mensaje de error del control.

• EnableClientScript: Obtiene o establece un valor lógico que indica si se habilita la validación en el cliente.

• Enabled: Obtiene o establece un valor lógico que indica si está habilitado el control.

• ErrorMessage: Obtiene o establece el texto del mensaje de error que el control muestra en un resumen de validación cuando el control de entrada no es válido.

• ForeColor: Obtiene o establece el color del mensaje que el control muestra cuando el control de entrada no es válido.

• IsValid: Obtiene o establece un valor lógico que indica si el control de entrada asociado es válido.

• SetFocusOnError. Obtiene o establece un valor lógico que indica si el foco del teclado se establece en el control de entrada cuando éste no es válido.

• Text: Obtiene o establece el texto mostrado en el control cuando el control de entrada no es válido.

• ValidationGroup: Obtiene o establece el nombre del grupo de validación al que pertenece el control.

El método común a los controles de validación es el siguiente:

• Validate: Realiza la validación en el control de entrada y actualiza el valor de la propiedad IsValid.

Tipos de controles validación de datos.

RequieredFieldValidator

El control de validación RequiredFieldValidator determina la validez de un control de entrada comprobando si el valor del mismo es diferente de un valor inicial dado.

La principal propiedad de este control con la que vamos a trabajar es la siguiente:

• InitialValue: Obtiene o establece el valor inicial del control de entrada.

Así para poner en un control de servidor web será el siguiente:

 <asp:textbox id="cp" runat="server" text="00000"/> <asp:RequieredFieldValidator id="cpValidator" runat="server" ControlToValidate="cp" ErrorMessage="CP incorrecto" InitialValue="00000" ></asp:RequieredFieldValidator>

CompareValidator

El control de validación CompareValidator determina la validez de un control de entrada comparándolo con otro control del formulario Web.

Las principales propiedades son las siguientes:

• ControlToCompare: Obtiene o establece el identificador ASP.NET del control de entrada con el que se ha de comparar el control.

• Operator: Obtiene o establece la operación de comparación utilizada en la validación del control.

• Type: Obtiene o establece el tipo de datos de los dos valores que se van a comparar.

• ValueToCompare: Obtiene o establece el valor que se va a comparar.

 <asp:TextBox id="Campo1" runat="server" /> <asp:TextBox id="Campo2" runat="server" /> <asp:CompareValidator id="campoValidator" runat="server" ControlToValidate="Campo1" ControlToCompare="Campo2" Operator="GreaterThanEqual" Type="Double" ErrorMessage="Valor Incorrecto" ></asp:CompareValidator>

RangeValidator

El control de validación RangeValidator determina la validez de un control de entrada comprobando si el valor del mismo está en un intervalo de valores dados.


• MaximumValue: Obtiene o establece el valor máximo del rango de validación del control.

• MinimumValue: Obtiene o establece el valor mínimo del rango de validación del control.

• Type: Obtiene o establece el tipo de datos de los dos valores que se van a comparar.

 <asp:TextBox id="Fecha" runat="server" /> <asp:RangeValidator id="campoValidator" runat="server" ControlToValidate="Fecha" Type="Date" MinimumValue="2005/05/10" MaximumValue="2020/12/31" ErrorMessage="Fecha Incorrecta" ></asp:CompareValidator>

RegularExpressionValidator

El control de validación RegularExpressionValidator determina la validez de un control de entrada comprobando si el valor del mismo coincide con el patrón de una expresión regular dada.


• ValidationExpression: Obtiene o establece el patrón de la expresión regular utilizada para validar un control.

ValidationSummary

El control ValidationSummary muestra, de forma agrupada, todos los mensajes de error que han generado los controles de validación de una página Web.


• DisplayMode: Obtiene o establece el modo de presentación del resumen de validación.

• HeaderText: Obtiene o establece el texto de encabezado que aparece en la parte superior del resumen.

• ShowMessageBox: Obtiene o establece un valor lógico que indica si el resumen de validación aparece en un cuadro de mensaje.

• ShowSummary: Obtiene o establece un valor lógico que indica si el resumen de validación se muestra en línea.

 <asp:validationSummary id="ResumenValidation" runat="server" ShowMessageBox="True" showSummary="False" DisplayMode="SingleParagraph" />


L9 – Instalación de Visual Studio Express Web Developer.

Lo primero que vamos a realizar en este momento es instalar el visual studio, el cual utilizaremos para desarrollar nuestras posteriores aplicaciones.

Accederemos a la url:

http://www.microsoft.com/spain/visualstudio/download

Nos aparecerá la siguiente ventana:

(INST_1)


Seleccionaremos la opción de “Probar Visual Studio 2010 Ultimate”.

Nos llevará a otra pantalla, donde en el combo que pone “English” lo desplegaremos y seleccionaremos el idioma “Spanish”.

(INST_2)

Al seleccionar “Spanish” nos redirigirá automáticamente a otra ventana.


(INST_3)

Pulsaremos el botón de “Descargar”

Nos llevará a otra pantalla, en la que se nos abrirá un pop-up para que guardemos el archivo.


(INST_4)

(INST_5)

Una vez terminada la descarga.


(INST_6)

Pulsaremos dos veces sobre el icono de descarga para empezar con la instalación.

Nos aparecerá una pantalla del visual studio donde recopila información necesaria para su instalación.


(INST_7)

Desmarcaremos (si queremos) la opción de “Si, enviar a Microsoft Corporation información sobre la instalación”

(INST_8)


En la siguiente pantalla marcaremos el check de “He leído los términos de la licencia y los acepto” y después el botón de “Siguiente”

(INT_9)

A continuación elegiremos las características que queremos que se nos instalen, marcaremos la opción de “Todos” y pulsaremos el botón de instalar.


(INST_10)

Cuando pulsemos el botón de “Instalar”, comenzará la instalación en un recuadro en el cual podremos ir viendo su progreso.

(INST_11)


(INST_12)

(INST_13)


L10 – Envió de emails.

Esta lección se deja aplazada hasta el final debido a que en el ejercicio que expliquemos se detallarán todas las clases que hacen falta para el envió de emails, así como su configuración.

Además recogeremos ciertos campos a través de un formulario.


L11 – Introducción a CSS

Definición

CSS es un lenguaje en el que se utilizan hojas de estilos (con extensión “.css”) las cuales se utilizan para proporcionar un aspecto visual único y diferente a nuestras aplicaciones web

Su funcionalidad es separar

Las ventajas de utilizar CSS son:

• Mayor accesibilidad al documento.• Reduce la complejidad del documento.• Mejor mantenimiento.

Antiguamente las web se hacían misma línea todo el contenido, de tamaño de la fuent

Un ejemplo sería el siguiente:

<head> <title>Título de la página web</head> <body> <h1> <font color="blue"CSS</font> </h1> <p> <font color="red"web</font> </p> </body>

La problemática del uso de este sistema es que si por necesidades queremos cambiar el color del texto, tendríamos que ir línea por línea viendo donde está el texto y ponerle otro color diferente. Sin embargo aplicando estilos la aplicación anterior quedaría de la siguiente manera.


Introducción a CSS

CSS es un lenguaje en el que se utilizan hojas de estilos (con extensión “.css”) las cuales se utilizan para proporcionar un aspecto visual único y

nte a nuestras aplicaciones web.

separar los contenidos de su definición.

ventajas de utilizar CSS son:

Mayor accesibilidad al documento. Reduce la complejidad del documento. Mejor mantenimiento.

las web se hacían sin hojas de estilos, donde había que poner en la misma línea todo el contenido, de tamaño de la fuente, tipo, color,….

Un ejemplo sería el siguiente:

Título de la página web</title>

="blue" face="Verdana" size="12">Mi web sin estilos

="red" face="Arial" size="5">Contenido de mi página

La problemática del uso de este sistema es que si por necesidades queremos cambiar el color del texto, tendríamos que ir línea por línea viendo donde está el texto y ponerle otro color diferente.

rgo aplicando estilos la aplicación anterior quedaría de la siguiente

46

hojas de estilos, donde había que poner en la e, tipo, color,….

Mi web sin estilos

Contenido de mi página

La problemática del uso de este sistema es que si por necesidades queremos cambiar el color del texto, tendríamos que ir línea por línea

rgo aplicando estilos la aplicación anterior quedaría de la siguiente


<head> <title>Título de la página web</title> <style type="text/css"> h1 {color: blue; face:Verdana size:12} p {color: red; face:Arial size:5} </style> </head> <body> <h1>Mi web sin estilos CSS</h1> <p>Contenido de mi página web</p> </body>

Tipos de incluir archivos CSS

Existen tres maneras de incluir los estilos css:

• En el mismo documento HTML. • En un archivo externo. • En los elementos HTML.

En el mismo documento HTML

Aquí los estilos se definen en una región dentro de la cabecera (head).

Estos estilos solo afecta a la página donde están escritos.

Solo los emplearemos cuando queremos crear una aplicación web muy pequeña, o queramos darle unos estilos a unos elementos concretos del documento.

En un archivo externo.

Aquí los estilos se incluyen dentro de un fichero con la extensión .css

Este archivo se podrá incluir en todas aquellas páginas que queramos mediante la etiqueta <link>, la cual hare relación al directorio donde se encuentra nuestro archivo.

El atributo link viene preferido de 4 elementos:

• Rel: indica el tipo de relación del archivo vamos a cargar. • Type: indica el tipo de archivo que vamos a cargar. • Href: ruta relativa de donde se enc8uentra nuestra hoja de estilos. • Media: indica el medio en el que se van a aplicar los estilos.


A continuación vemos en una tabla los principales tipos de media que existen.

Media Descripción

All Todos los medios

Handheld Móviles, PDA.

Print Impresoras

Projection Proyectores.

Screen Pantallas de PC

Esta es la mejor forma de utilizar CSS en cualquier aplicación, debido a que un cambio en este archivo se refleja de manera automática en toda la web donde se haya incluido el archivo.

En los elementos HTML

Aquí los estilos van al mismo nivel que los párrafos.

Es la peor manera de trabajar con estilos, ya que para realizar un cambio tenemos que buscar en cada página y en cada elemento el atributo.

Sólo se utiliza en determinadas ocasiones en las que tenemos que incluir un estilo muy específico a un elemento.


Los partes de los estilos CSS se podrían definir así:

(CSS_3)

Regla: cada uno de los diferentes elementos que componen la hoja de estilos.

Elemento: indica el elemento al cual se la van a dar unas propiedades y valores.

Declaración: se componen de las propiedades y valores que van a darle a un elemento.

Propiedad: característica específica del elemento que queremos modificar.

Valor: indica el nuevo valor de la propiedad que hemos mencionado anteriormente.


Reglas @media y @import

Reglas @media

La regla @media se utiliza para dar a aquellos elementos que se empleen para diferentes media.

@media print screen {

H1 {Font size: 12; color:red}

}

Reglas @import

La regla @import se utiliza para importan archivos externos dentro de un css.

@import url(“estilosCoches.css”) screen;

Etiqueta Class

La etiqueta class en un elemento se emplea cuando tenemos diferentes elementos y no queremos que todos tengan el mismo estilo.

Por ejemplo si tenemos en nuestra aplicación el siguiente párrafo:

<body> <h1>Mi web de estilos CSS</h1> <p>Contenido de mi página web</p> <p>En mi página vamos a tratar de aclarar diferente temas</p> <p>como por ejemplo, si preferimos</p> <p>los coches de gasolina o gasoil</p> <p>La cuestión que se plantea es la siguiente</p> <p>¿merece pagar más por un gasoil que por un gasolina?</p> </body>

Si queremos darle estilos diferentes a cada párrafo los haría mediante el atributo class, seguido del nombre de nuestra clase, dicho texto quedaría de la siguiente manera:

<body> <h1 class="titulo">Mi web de estilos CSS</h1> <p class="principal">Contenido de mi página web</p> <p class="texto">En mi página vamos a tratar de aclarar diferente temas</p> <p class="texto">como por ejemplo, si preferimos</p> <p class="texto">los coches de gasolina o gasoil</p> <p class="cuestion">La cuestión que se plantea es la siguiente</p> <p class="pregunta">¿merece pagar más por un gasoil que por un gasolina?</p> </body>


Donde en nuestro archivo css tendríamos los siguientes estilos:

#titulo{ color: red; size: 15px; text-align:center; border: 1px solid black} #principal{ color: blue; } #texto { font-size: 8px; float: right; } #cuestion{ padding-left: 20px; color: yellow; } #pregunta{ padding-right: 10px border: 1px solid black size: 23px; }

Nota

Los comentarios en los archivos CSS, /* y al final ponemos */


en nuestro archivo css tendríamos los siguientes estilos:

black;

;

10px; black;

Los comentarios en los archivos CSS, empiezan por /* y al final ponemos */

51


Etiqueta ID

La etiqueta id funciona de la misma manera que lo hace la etiqueta class. La única diferencia es que un elemento con id sólo se refiere a un elemento en concreto de la página, debido a que este id es único para cada elemento. En el ejemplo anterior quedaría: <body> <h1 id="titulo">Mi web de estilos CSS</h1> <p id="principal">Contenido de mi página web</p> <p id="texto1">En mi página vamos a tratar de aclarar diferente temas</p> <p id="texto2">como por ejemplo, si preferimos</p> <p id="texto3">los coches de gasolina o gasoil</p> <p id="cuestion">La cuestión que se plantea es la siguiente</p> <p id="pregunta">¿merece pagar más por un gasoil que por un gasolina?</p> </body> En la hoja de estilos estarían los mismos elementos que hemos visto anteriormente, pero en vez de ir precedidos con “.”, van con “#”. La hoja de estilos quedaría así: #titulo{ color: red; size: 15px; text-align:center; border: 1px solid black; } #principal{ color: blue; } #texto1 { font-size: 8px; float: right; } #texto2 { font-size: 8px; float: right; } #texto3 { font-size: 8px; float: right; } #cuestion{ padding-left: 20px; color: yellow; } #pregunta{ padding-right: 10px; border: 1px solid black;


size: 23px; }

Como vemos aunque en texto1, 2 y 3 tienen los mismos atributos a tratarse de id diferentes los tenemos que triplicar el mismo estilo.

Unidades de medida relativa

Existen tres tipos de medida: • em, (no confundir con la etiqueta <em> de HTML) relativa respecto del

tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando

• ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando

• px, (píxel) relativa respecto de la pantalla del usuario

Unidades de medida absolutas

Existen diferentes tipos de medida absolutas: • in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros) • cm, centímetros • mm, milímetros • pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35

milímetros) • pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

Principales propiedades de los CSS

• height: altura • margin-top: margen superior. • margin-left: margen izquierdo. • margin-right: margen derecho. • margin-bottom: margen inferior. • padding-top: relleno superior. • padding -left: relleno izquierdo. • padding -right: relleno derecho. • padding -bottom: relleno inferior. • border-top-width: Anchura del borde superior • border-right-width: Anchura del borde derecho • border-bottom-width: Anchura del borde inferior. • border-left-width: Anchura del borde izquierdo. • border-top-color: Color del borde superior • border-right-color: Color del borde derecho. • border-bottom-color: Color del borde inferior. • border-left-color: Color del borde izquierdo • border-top-style: Estilo del borde superior


• border-right-style: Estilo del borde derecho. • border-bottom-style: Estilo del borde inferior. • border-left-style: Estilo del borde izquierdo. • background-color: Color de fondo • background-image: Imagen de fondo • background-repeat: Repetición de la imagen de fondo • background-position: Posición de la imagen de fondo • background-attachment: Comportamiento de la imagen de fondo • background: Fondo de un elemento • position Posicionamiento • top: Desplazamiento superior • right: Desplazamiento lateral derecho • bottom: Desplazamiento inferior • left: Desplazamiento lateral izquierdo • clear: Despejar los elementos flotantes adyacentes • overflow: Parte sobrante de un elemento • z-index: Orden tridimensional • color: Color del texto • font-family: Tipo de letra • font-size: Tamaño de letra • font-weight: Anchura de la letra • font-style: Estilo de la letra • text-align: Alineación del texto • line-height: Interlineado • vertical-align: Alineación vertical • text-indent: Tabulación del texto


L12 – Introducción a Javascript

Definición

JavaScript es un lenguaje de programación que se utiliza principalmente para creardinámicas.

Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (

<!DOCTYPE html PUBLIC ""http://www.w3.org/TR/xhtml1/DTD/xhtml1<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content/> <title>Primer Ejemplo <script type="text/javascript"> alert("Hola"); </script> </head> <body> <p>Se va a mostrar una alerta. </body> </html>

Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden JavaScript que los documentos XHTML enlazan mediante la etiqueta <script>. Se pueden crear todos los archivos JavaScript que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content/>


Introducción a Javascript

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web

Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas <script> y se incluye en del documento. Aunque es correcto incluir cualquier bloque de código en

de la página, se recomienda definir el código JavaScript dentro de la documento (dentro de la etiqueta <head>):

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

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

="Content-Type" content="text/html; charset=iso

Primer Ejemplo de JavaScript</title> ="text/javascript">

Se va a mostrar una alerta.</p>

Definir JavaScript en un archivo externo

Las instrucciones JavaScript se pueden incluir en un archivo externoque los documentos XHTML enlazan mediante la etiqueta <script>. Se

todos los archivos JavaScript que sean necesarios y cada documento antos archivos JavaScript como necesite.

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

="Content-Type" content="text/html; charset=iso

55

y se incluye en cualquier del documento. Aunque es correcto incluir cualquier bloque de código en

de la página, se recomienda definir el código JavaScript dentro de la

XHTML 1.0 Transitional//EN"

="text/html; charset=iso-8859-1"

incluir en un archivo externo de tipo que los documentos XHTML enlazan mediante la etiqueta <script>. Se

todos los archivos JavaScript que sean necesarios y cada documento

="text/html; charset=iso-8859-1"


<title>Primer Ejemplo de JavaScript</title> <script type="text/javascript" src="js/alertas.js"></script> </head> <body> <p>Se va a mostrar una alerta.</p> </body> </html>

Y dentro del fichero alertas.js irá: alert("Hola");

Además del atributo type, este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar. Cada etiqueta <script> solamente puede enlazar un único archivo, pero en una misma página se pueden incluir tantas etiquetas <script> como sean necesarias.

Incluir JavaScript en los elementos XHTML

Este último método es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro del código XHTML de la página:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Primer Ejemplo de JavaScript</title> </head> <body> <p onclick="alert('Hola');">Se va a mostrar una alerta.</p> </body> </html>


Etiqueta noscript

Algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que así navegan de forma más segura.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Primer Ejemplo de JavaScript</title> </head> <body> <noscript> <p>Esta página requiere el uso de javascript. Por favor actívelo. Gracias.</p> </noscript> <p onclick="alert('Hola');">Se va a mostrar una alerta.</p> </body> </html>

Sintaxis

No se tienen en cuenta los espacios en blanco y las nuevas líneas. Se distinguen las mayúsculas y minúsculas. No se define el tipo de las variables. Se pueden incluir comentarios de una línea se pone delante //, si por el contrario queremos poner un comentario de varias líneas ponemos primero /* y al final */

Variables

Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. <script type="text/javascript"> var num1 = 3; var num2 = 5; var resultado = 0; resultado = num1 + num2; alert(resultado); </script>


Normas

• Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _ (guión bajo).

• El primer carácter no puede ser un número. • Una nueva línea \n • Un tabulador \t • Una comilla simple \' • Una comilla doble \" • Una barra inclinada \\

Arrays

Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente.

var mes1 = "Enero"; var mes2 = "Febrero"; ... var dia7 = "Diciembre"; var semana = ["Enero", "Febrero", ..., "Diciembre"];

Booleanos

Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true (verdadero) o false (falso).

var esCierto = false; var estaSeguro = true;

Matemáticos

Los operadores definidos son: suma (+), resta (-), multiplicación (*) y división (/).

Modulo

El modulo se utiliza para saber si la división de dos números es exacta o no. var variable1 = 10; var variable2 = 5; var resultado = 0; resultado = variable1 % variable2; // resultado = 0 variable1 = 9; variable2 = 5; resultado = variable1 % variable2; // resultado = 4


Or

La operación lógica OR también combina dos valores booleanos. El operador se indica mediante el símbolo || y su resultado es true si alguno de los dos operandos es true (verdadero).

And

La operación lógica AND obtiene su resultado combinando dos valores booleanos. El operador se indica mediante el símbolo && y su resultado solamente es true si los dos operandos son true

Relacionales

Mayor que (>) Menor que (<) Mayor o igual (>=) Menor o igual (<=) Igual que (==) Distinto de (!=)

IF

La estructura más utilizada en es la estructura if. Se emplea definición formal es: If (condicion) { ... }

If Else

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple la condición, hazlo; si no se cumple, no hagas nada". Normalmente las condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro". Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su definición formal es la siguiente: if(condicion) { ... }else{ ... }

For

La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla. for(inicializacion; condicion; actualizacion) { //acciones a realizar }


For In

Una estructura de control derivada de for es la estructura for...in. Su definición exacta implica el uso de objetos, que es un elemento de programación avanzada que no se va a estudiar. Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su definición formal adaptada a los arrays es: for(indice in array) { //acciones a realizar }

While

La estructura while permite crear bucles que se ejecutan ninguna o más veces, dependiendo de la condición indicada. while(condicion) { //acciones a realizar }

Do While

El bucle de tipo do...while es muy similar al bucle while, salvo que en este caso siempre se ejecutan las instrucciones del bucle al menos la primera vez. do{ //acciones a realizar } while(condicion)

Switch

La estructura if...else se puede utilizar para realizar comprobaciones múltiples y tomar decisiones complejas. Sin embargo, si todas las condiciones dependen siempre de la misma variable, el código JavaScript resultante es demasiado redundante: switch(variable) { case valor_1: //acciones a realizar break; case valor_2: //acciones a realizar break; //acciones a realizar case valor_n: //acciones a realizar break; default: //acciones a realizar break; }


L13 – Master Pages y Content Pages

Lo más habitual cuando se crea una aplicación o un sitio Web es que las páginas que lo conforman sean todas bastante parecidas o al menos que existan varios grupos de páginas similares que sólo varían ciertos contenidos entre ellas. Por ejemplo, puede haber una categoría de páginas para mostrar artículos en el que todas son iguales excepto por el contenido del propio artículo en su parte central, mientras que en otra zona de la aplicación el diseño es completamente diferente pero sus páginas se parecen todas entre sí

Una Master Page proporciona una forma de definir una estructura e interfaz comunes para un grupo de páginas pertenecientes a un mismo sitio Web. Esta estructura común se almacena en un único archivo independiente. Ello facilita mucho su mantenimiento puesto que, para actualizar todas las páginas que lo utilizan, basta con editar dicho archivo.

Una MP es en realidad como una página ASPX normal que contiene código, elementos HTML y controles Web de servidor. Sin embargo posee una extensión diferente (.master) y utilizan una directiva <% @ master %> en lugar de una directiva <% @page %>. Por lo demás se pueden considerar prácticamente equivalentes. Esto es importante porque significa que ya sabemos todo lo necesario para crearlas.

Una página ASPX normal puede derivar su estructura a partir de una MP simplemente añadiendo un atributo MasterPageFile a su directiva de página, así

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

Al abrir una MP aparece un diseñador idéntico al de una página ASPX normal.

Podemos arrastrar sobre su superficie cualquier control así como editar su HTML de la manera usual. También lleva un archivo de código asociado en el que se puede responder a sus diversos eventos. La única diferencia apreciable a simple vista respecto a una página normal es que contiene por defecto un control de tipo ContentPlaceHolder.

La sintaxis de este control es análoga a la siguiente:

<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>

Su única propiedad interesante es precisamente su identificador ya que este tipo de control se utiliza para marcar las posiciones en las que irán los diferentes contenidos de las páginas derivadas dentro de la plantilla de estructura que es una Master Page.

De este modo, cuando una página normal derive de una MP, sólo se podrá introducir código dentro de las zonas definidas por estos comodines de contenido.

Cuando añadimos una nueva página ASPX a nuestro proyecto y existe al menos una Master Page, podemos marcar una opción para que, antes de crearla, nos permita seleccionar de qué MP derivará

Esto nos evita tener que escribir el atributo Master Page File manualmente.

Al editar una página que deriva de una Master Page aparece el aspecto y estructura de la página principal en el diseñador, pero sólo se pueden tocar las partes correspondientes a los comodines de contenido.

La estructura de una página maestra sería la siguiente

<% @ Master Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server" > <title>Esta es mi Página Maestra</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td><asp:contentplaceholder id="Menu" runat="server" /></td> <td><asp:contentplaceholder id="Pie" runat="server" /></td> </tr> </table> </form> </body> </html>

Aquí vemos como tenemos dos controles que irían en todas las páginas, que serían el menú y el pie.

En la página de contenido asociada a esta maestra iría el siguiente contenido.

<% @ Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %> <asp:Content ID="contenidoMenu" ContentPlaceHolderID="Menu" Runat="Server">  </asp:Content> <asp:Content ID="contenidoContenido" ContentPlaceHolderID="Contenido" Runat="Server">  </asp:Content> <asp:Content ID="contenidoPie" ContentPlaceHolderID="Pie" Runat="Server" >  </asp:content>


L14 – Controles de navegación.

Cuando navegamos por diferentes webs, generalmente necesitamos mostrar un esquema para ayudar a guiar al usuario.

Se trata de una interfaz de usuario entre las diferentes páginas de nuestro sitio web.

Se utilizan archivos de extensión “.sitemap”.

La estructura de este archivo es:

1. Un solo elemento <siteMap> 2. Dentro del irán los elementos <siteMapNode> que queramos. 3. Dentro de este podemos ir creando todos los elementos <siteMapNode> que

necesitemos.

Dentro del elemento siteMapNode está compuesto de:

• Tittle: el nombre que vamos a enseñar a los usuarios. • Url: dirección url relativa o absoluta donde queramos que enlace nuestro

texto.

<siteMap> <siteMapNode title="Inicio" url="~/default.aspx" > <siteMapNode title="Informacion General" url="~/general/default.aspx"/> <siteMapNode title="Noticias" url="~/general/noticias.aspx"/> <siteMapNode title="Ejemplos" url="~/general/ejercicios.aspx"/> </siteMapNode> <siteMapNode title="Como crear una aplicacion" url="~/tema1/default.aspx"> <siteMapNode title="Primer Apartado" url="~/tema1/info.aspx"> <siteMapNode title="Estructura aplicacion" url="~/tema1/estructura.aspx"/> <siteMapNode title="Primeros Pasos" url="~/tema1/primero.aspx"/> <siteMapNode title="Codigo" url="~/tema1/codigo.aspx"/> </siteMapNode> <siteMapNode title="Enlaces Externos" url="~/enlaces/default.aspx"> <siteMapNode title="Introduccion" url="~/enlaces/introduccion.aspx"/> </siteMapNode> </siteMapNode> </siteMap>


L15 – Seguridad.

Cualquier aplicación Web es vulnerable a los ataques, la diferencia importante es que sean más vulnerables o, por el contrario tomando las medidas adecuadas, menos vulnerables.

Es importante que los servidores de Internet sean frecuentemente comprobados.

También lo es el hecho de que nosotros tomemos todas las prevenciones necesarias para desarrollar aplicaciones más seguras.

Después de tener una aplicación con niveles óptimos de seguridad viene la siguiente labor, tan importante como esta, realizar tareas de vigilancia y mantener al día las actualizaciones con las revisiones de seguridad que Microsoft va publicando.

Una forma de vigilar es observar si ocurren eventos fuera de lo común como podría ser una serie de intentos repetitivos por ingresar a la sesión o un número de solicitudes demasiado elevado.

Recomendaciones.

Copias de seguridad.

Es importante realizar frecuentemente copias de seguridad y guardarlas en un lugar seguro.

Ubicación del servidor.

Debe estar apartado, en un lugar al que no pueda tener acceso cualquier persona.

NTFS.

Procurar no utilizar el sistema de archivos FAT32 ya que el NTFS ofrece mucha más seguridad.

Contraseñas.

Para que una contraseña sea rigurosa debe contar con las siguientes características: tendrá como mínimo siete caracteres, combinando mayúsculas, minúsculas, números y otros caracteres especiales; no deben ser palabras que figuren en ningún diccionario, de ningún idioma. Además deben ser cambiadas con frecuencia y no estar anotadas, al menos en forma visible.

IIS.

Proteger los servicios IIS.


Puertos.

Aquellos puertos que no se utilicen deben ser cerrados. Y los servicios desactivados.

Tráfico.

Controlar el tráfico de entrada y salida con un programa antivirus.

Firewall.

Utilizar un firewall para controlar los accesos.

Registros.

Revisar frecuentemente los registros para detectar cualquier actividad que pueda parecer sospechosa. Por ejemplo, un elevado número de solicitudes, insistentes intentos de inicio de sesión.

Ejecutar aplicaciones con privilegios mínimos.

• Evitar ejecutar la aplicación como administrador. • Ejecutar la aplicación con usuarios de privilegios mínimos. • Disponer permisos poco permisivos en los recursos solicitados por la

aplicación. Un ejemplo son los archivos de sólo lectura. • Los archivos de la aplicación deben estar ubicados en un directorio inferior al

directorio raíz.

Protegerse con entradas malintencionadas.

• Filtrar las entradas provenientes desde el cliente para detectar secuencias de comandos ejecutables.

• Para las respuestas codificar los elementos HTML para asegurarse de presentar como texto estático cualquier entrada suministrada por el usuario y evitar los comandos ejecutables y los elementos HTML interpretados.

• Antes de almacenar, los datos suministrados por el usuario, en una base de datos deben ser filtrados.

• No almacenar información confidencial en lugares como campos ocultos, que son posibles de acceder desde el cliente.

Acceso seguro a base de Datos.

• Utilizar los propios sistemas de seguridad de la base de datos para restringir quien puede tener acceso o no a los recursos.

• Crear una consulta parametrizada estableciendo como valores las entradas de los usuarios en lugar utilizar instrucciones SQL para concatenar cadenas con los datos suministrados.

• Si es preciso almacenar el nombre de usuario y contraseña hacerlo en el archivo Web.config y configurarlo de modo protegido.


Mensajes de error seguros.

• Los mensajes de error no deben mostrar información que pueda ser utilizada de forma maliciosa.

• Crear mensajes de error propios. • Mostrar una página de error genérica creando un controlador de errores

que capture las excepciones no controladas.


L16 – Localización

Para explicar en consiste la locación en una web, tenemos que hablar con poco de sus orígenes.

En sus principios la World Wide Webestadounidenses y británicos.

Sin embargo, en los últimos años, debido al internet y de ordenadorescuando naveguen desean ver las páginas web

Los potenciales clientesestán más dispuestos a comprar productos en aquellos idioma materno.

Así que cualquier aplicación que desarrollemos idioma si desea sacar el mayor ofrece para acceder a diferentes mercados

Definición

Es el proceso de adaptar un sitio web a un idioma y una cultura diferente. Esto significa mucho más que simplemente traducir el contenido de las páginasEl contenido de una página web está formado por texto e imágenes, ambos deben ser traducidos y sometidos a una adaptación cultural. El usuario nunca debe notar que ese sitio fue originalmente creado en otro idioma.

En la mayoría de los casos, la falta de información lingüística y cultural afecta negativamente el proyecto antes mencionado. A fin de comprender mejor el impacto que tiene la cultura en la localización de sitios web, los siguientes ejemplos representan las áreas en las que es necesario un vasto conocimiento de la cultura receptora.


Localización.

Para explicar en consiste la locación en una web, tenemos que hablar con poco de

World Wide Web era un dominio exclusivo de los mercados estadounidenses y británicos.

timos años, debido al gran crecimiento de usuariosordenadores, ha surgido la problemática de que los usuar

n ver las páginas web en su propio idioma.

clientes que navegan por Internet a diario pasan más tiempo y están más dispuestos a comprar productos en aquellos sitios que están en su

cualquier aplicación que desarrollemos deberá salvar las barreras del mayor provecho del inmenso potencial que la Internet

diferentes mercados.

Es el proceso de adaptar un sitio web a un idioma y una cultura diferente. Esto significa mucho más que simplemente traducir el contenido de las páginas. El contenido de una página web está formado por texto e imágenes, ambos deben ser traducidos y sometidos a una adaptación cultural. El usuario nunca debe notar que ese sitio fue originalmente creado en otro idioma.

En la mayoría de los casos, la falta de información lingüística y cultural afecta negativamente el proyecto antes mencionado. A fin de comprender mejor el impacto que tiene la cultura en la localización de sitios web, los siguientes ejemplos

as áreas en las que es necesario un vasto conocimiento de la cultura

67

Para explicar en consiste la locación en una web, tenemos que hablar con poco de

era un dominio exclusivo de los mercados

usuarios de que los usuarios

que navegan por Internet a diario pasan más tiempo y que están en su

deberá salvar las barreras del del inmenso potencial que la Internet

En la mayoría de los casos, la falta de información lingüística y cultural afecta negativamente el proyecto antes mencionado. A fin de comprender mejor el impacto que tiene la cultura en la localización de sitios web, los siguientes ejemplos

as áreas en las que es necesario un vasto conocimiento de la cultura


L17 – Publicación de una web.

Lo primero en lo que tenemos que pensar a la hora de publicar una web, es en el dominio. Los dominios deben de ser direcciones básicas y fáciles de recordar para todos los usuarios. Una vez creada nuestra aplicación viendo que todo funciona correctamente, llega la hora de publicarla para que pueda ser vista por todos los usuarios. Ahora cogeremos todos los archivos de nuestra aplicación y los “subiremos” al servidor, para ello, emplearemos métodos como FTP. Vamos a indicar como instalar un servidor http en Windows server 2008. Iremos a Inicio Server Manager.

(PUB_1) Nos aparecerá una pantalla en la que Seleccionaremos Roles y agregaremos un nuevo Rol. En la opción Server Roles � marcaremos la opción de Web Server (IIS) y pulsaremos “next”

(PUB_2)


En la opción Web Server (IIS) � subopción Role Services marcaremos todas las opciones. Y pulsaremos “next”. Una vez elegidas todas las opciones en la opción de “confirmation2 le daremos a “install”. Una vez se ha terminado el proceso de instalación le daremos a “close” para cerrar la ventana. Ahora volveremos a ventana que nos ha aparecido cuando hemos pulsado “server manager”. Aquí en la lista desplegable de la izquierda nos iremos moviendo por las diferentes opciones: Server Manager � Roles � Web Server (IIS). En la ventana de la derecha seleccionaremos la opción de “FTP Publishing Service” e iniciaremos el servicio pulsando el botón de “Start”

(PUB_3) Dentro de C:\inetpub\ se nos tendrán que haber creado dos carpetas ftproot y wwwroot. Dentro de la carpeta wwwroot crearemos una carpeta que se llame “MiPrimeraWeb”. Ahora abriremos el Internet Information Services (IIS) Manager. Iremos a la opción de “site”, la marcaremos y con el botón derecho del ratón desplegaremos las opciones disponibles, de todas esas elegiremos “add web site”.


En esta pantalla pondremos: • Site name: el nombre del sitio que queramos pero tiene que ser algo

identificativo. • Physical Path: la ruta donde tenemos nuestra aplicación, nosotros la hemos

creado en c:\inetpub\wwwroot\miprimeraweb. • Host name: pondremos el nombre de nuestro dominio. • IP adress: asignaremos la ip, que podrá ser pública (para que la vea todo el

mundo) o privada (solo la veremos de forma local).

(PUB_4)


L18– Ejercicio.

Vamos a desarrollar una aplicación que va a consistir en una pantalla de bienvenida y luego otra que a través de un formulario enviará un correo a una dirección de correo que queramos.

Si se produce cualquier error, redirigiremos al usuario a una pantalla de error.

Para ello lo primero que haremos será abrir nuestra aplicación de visual studio.

(EJ_1)

Acto seguido pulsaremos la opción de “Nuevo Proyecto”.

Aquí pondremos la ruta donde se va a guardar el proyecto, así como el nombre del mismo.

Nosotros le hemos puesto “MiPrimerProyectoWeb”


(EJ_2)

Una vez elegidas todas las opciones mencionadas anteriormente, pulsaremos el botón de aceptar.

Por defecto se nos cargará un proyecto, el cual contendrá diferente aspx, clases,…

(EJ_3)


Lo primero que haremos será crear todos los aspx, js y css, que vayamos a emplear.

Nuestra estructura del proyecto debe quedar así:

(EJ_4)

En la página master el aspx pondremos los controles y las referencias al css y js que hemos creado para que lo tengan todas las páginas que hagan referencia a ese js.

En este aspx hemos incluido además la cabecera que la tendremos siempre la misma y el pie.

La parte del contenido es el que variará según en la página que nos encontremos.

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="MiPrimerProyectoWeb.Site" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="Scripts/validacion.js"></script> </head> <body> <form runat="server" id="formulario" method="post"> <div class="page"> <div class="header"> <div class="title"> <h1>Mi Primer Proyecto Web</h1> </div> <div class="clear"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items>


<asp:MenuItem NavigateUrl="~/Inicio.aspx" Text="Inicio"/> <asp:MenuItem NavigateUrl="~/Correo.aspx" Text="Correo"/> </Items> </asp:Menu> </div> </div> <div class="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> </div> <div class="clear"> </div> </div> <div class="footer"> <a href="Inicio.aspx" runat="server">Inicio</a> <a href="Correo.aspx" runat="server">Correo</a> </div> </form> </body> </html>

En la página de error simplemente pondremos el texto que se vaya a mostrar.

Esta página irá ajena a la página maestra.

Cuyo aspx será:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Error.aspx.vb" Inherits="MiPrimerProyectoWeb._Error" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Se ha producido un error</title> </head> <body> <form id="formularioError" runat="server"> <div> <p>Lo sentimos se ha producido un error.</p> <p>Por favor, inténtelo más tarde.</p> </div> </form> </body> </html> La pantalla de inicio.aspx será la que contenga el texto de bienvenida al usuario, su aspecto es el siguiente:


(EJ_5) El aspx de inicio.aspx será: <%@ Page Title="Página principal" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Inicio.aspx.vb" Inherits="MiPrimerProyectoWeb._Default" %> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <p class="titulo">Contenido Principal</p> <p class="resaltar">Bienvenido a nuestra primera aplicación.</p> <p>En esta aplicación va a consistir en tres apartados:</p> <p>1.-) Texto de bienvenida</p> <p>2.-) Envio de correo</p> <p>3.-) Página de Error, si existe un error</p> </asp:Content>


La pantalla de correo.aspx nos quedará con el siguiente aspecto.

(EJ_6) El código del aspx será el siguiente: <%@ Page Title="Acerca de nosotros" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Correo.aspx.vb" Inherits="MiPrimerProyectoWeb.About" %> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <table width="100%"> <tr><td colspan="2" class="titulo">Envío de Correo de Contacto</td></tr> <tr><td colspan="2" class="resaltar">Por favor, rellene los siguientes datos:</td></tr> <tr> <td class="obligatorio"> <p>(*) Nombre:</p> </td> <td> <input type="text" id="txtNombre" name="txtNombre" /> </td> </tr> <tr> <td><p>Primer Apellido:</p></td> <td><input type="text" id="txtApe1" name="txtApe1" /></td> </tr> <tr> <td><p>Segundo Apellido:</p></td> <td><input type="text" id="txtApe2" name="txtApe2" /></td> </tr> <tr> <td class="obligatorio"><p>(*) E-mail:</p></td> <td><input type="text" id="txtEmail" name="txtEmail" /></td> </tr>


<tr> <td class="obligatorio"><p>(*) Comentario:</p></td> <td><input type="text" id="txtComentario" name="txtComentario" /></td> </tr> <tr> <td colspan="2" class="obligatorioTexto"><p>Los campos marcados con (*) son obligatorios.</p></td> </tr> <tr> <td colspan="2"><input type="button" id="btnEnviar" onclick="obligatorioCorreo();" value="Enviar" /></td> </tr> </table> </asp:Content>

En el código de esta página es donde realizaremos el envió del correo.

Para ello recogeremos todos los valores del aspx y los pondremos en el cuerpo del mensaje.

Imports System.Net.Mail Imports System.Web Public Class About Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Try If Page.IsPostBack AndAlso Request.QueryString.Item("accion").ToUpper = "ENVIAR" Then 'Rellenamos el cuerpo del mensaje, por cada línea que ponemos, saltamos de línea también Dim cuerpo As String = "" cuerpo &= "Se ha enviado la siguiente consulta:" & vbCrLf cuerpo &= "Nombre: " & Request.Form.Item("txtNombre") & vbCrLf cuerpo &= "Apellido 1: " & Request.Form.Item("txtApe1") & vbCrLf cuerpo &= "Apellido 2: " & Request.Form.Item("txtApe2") & vbCrLf cuerpo &= "Email: " & Request.Form.Item("txtEmail") & vbCrLf cuerpo &= "Obervaciones: " & Request.Form.Item("txtObservaciones") & vbCrLf 'Creamos un nueva dirección de correo que será a quien va dirigido el correo Dim a As New MailAddress(Request.Form.Item("txtEmail"), "Usuario") 'Creamos una nueva dirección de correo que será desde quien se lo mandamos Dim desde As New MailAddress("[email protected]", "OSKAR") 'Creamos un nuevo objeto de correo Dim objCorreo As New MailMessage(a, desde) 'Añadimos al mensaje el cuerpo que hemos puesto anteriormente objCorreo.Body = cuerpo 'Le indicamos la prioridad que queramos que tenga el mensaje objCorreo.Priority = MailPriority.High


'Ponemos el asunto del correo objCorreo.Subject = "Correo de contacto" 'Creamos un nuevo objeto de servicio SMTP, el cual se emplea para enviar un correo Dim cliente As New SmtpClient() 'Ponemos las credenciales desde la cuenta que se va a enviar cliente.Credentials = New System.Net.NetworkCredential("[email protected]", "contraseña_micuenta") 'Opcionalmente pondremos el puerto desde el que se envía, si es necesario cliente.Port = 587 'Opcionalmente pondremos el host desde el que se envía, si es necesario cliente.Host = "smtp.gmail.com" 'Esto es para que vaya a través de SSL que es obligatorio con GMail cliente.EnableSsl = True 'Enviamos el correo cliente.Send(objCorreo) End If Catch ex As Exception Response.Redirect("error.aspx") End Try End Sub End Class

En la parte del código hemos comprobado que para que se envíe el correo se tienen que cumplir dos condiciones.

1. Que se haya producido un envió del formulario. 2. Que exista en la url la palabra acción y sea igual a enviar.

Antes de enviar el formulario en el evento onclick del botón le hemos puesto una función javascript para que compruebe que han escrito todos los campos obligatorios.

Dicha función se encuentra dentro del archivo validaciones.js

function obligatorioCorreo() { if (document.getElementById("txtNombre") && document.getElementById("txtEmail")) { var mensaje = ""; if (document.getElementById("txtNombre").value == "") { mensaje += "Debe introducir un nombre \n"; } if (document.getElementById("txtEmail").value == "") { mensaje += "Debe introducir un email \n"; } if (mensaje == "") { document.forms["formulario"].action = "correo.aspx?accion=enviar" document.forms["formulario"].submit(); } else { alert(mensaje); return false; } } else {


alert("Ha ocurrido un error, por favor, inténtelo mas tarde"); return false; } }

En esta función lo que realizamos es comprobar primero que existan los campos en el formulario, sino existen mostramos una alerta.

Si existen comprobamos que tengan un valor diferente de vacío, si uno de los dos es vacío o los dos, mostramos en una alerta los campos que estén vacíos para que el usuario pueda completarlos.

Si nos fijamos en el código de los controles aspx de las diferentes páginas vemos como muchos de ellos llevan un class.

Todos estos estilos los encontramos dentro del archivo Site.css

En cual todos los estilos que tendrá para que la aplicación se muestre tal y como están en las capturas de pantallas es la siguiente:

/* Cuerpo ----------------------------------------------------------*/ body { background: #b6b7bc; font-size: .80em; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; color: #696969; } /* Elementos Principales de la aplicacion ----------------------------------------------------------*/ .page { width: 960px; background-color: #fff; margin: 20px auto 0px auto; border: 1px solid #496077; } .header { position: relative; margin: 0px; padding: 0px; background: #4b6c9e; width: 100%;


} .header h1 { font-weight: 700; margin: 0px; padding: 0px 0px 0px 20px; color: #f9f9f9; border: none; line-height: 2em; font-size: 2em; } .main { padding: 0px 12px; margin: 12px 8px 8px 8px; min-height: 420px; } .footer { color: #4e5766; padding: 8px 0px 0px 0px; margin: 0px auto; text-align: center; line-height: normal; } /* Menu ----------------------------------------------------------*/ div.menu { padding: 4px 0px 4px 8px; } div.menu ul { list-style: none; margin: 0px; padding: 0px; width: auto; } div.menu ul li a, div.menu ul li a:visited { background-color: #465c71; border: 1px #4e667d solid; color: #dde4ec; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none;


white-space: nowrap; } div.menu ul li a:hover { background-color: #bfcbd6; color: #465c71; text-decoration: none; } div.menu ul li a:active { background-color: #465c71; color: #cfdbe6; text-decoration: none; } /* Mis estilos ----------------------------------------------------------*/ .resaltar { font-style:oblique; font-size:16px; } .titulo { font-size:20px; color:Black; text-align:center; } .obligatorio { color:Red; } .obligatorioTexto { color:Red; font-size:11px; }

- Título de la unidadformacion.desarrollando.net/cursosfiles/formacion/curso... · 2011-10-18 ·...

Documents

Transcript of - Título de la unidadformacion.desarrollando.net/cursosfiles/formacion/curso... · 2011-10-18 ·...