PROCESAMIENTO DEL LADO DEL CLIENTE

Unidad 4

Materia:

Programación Web

Docente. Lic. Coronado Rosales Martha Beatriz

Presenta.

LUGO MUÑOZ LUIS CARLOS

Carrera:

Ing. En Sistemas Computacionales Octavo Semestre

Matehuala, San Luis Potosí a, 28 De Mayo De 2015

Programación Web Instituto Tecnológico de Matehuala

UNIDAD 4: Procesamiento del lado del Cliente

4.1 Lenguaje Script del cliente. JavaScript es un lenguaje interpretado que posee una característica que lo hace especialmente idóneo para trabajar en Web, ya que son los navegadores que utilizamos para viajar por el a los que interpretan y por tanto ejecutan los programas escritos en JavaScript. De esta forma, podemos enviar documentos a través de la Web que incorporan el código fuente de un programa, convirtiéndose de esta forma en documentos dinámicos, y dejando de ser simples fuentes de información estáticas. Los programas escritos en JavaScript se ejecutan en el navegador del cliente, sin necesidad de que intervenga el servidor. De esta forma, una sola transacción basta para cargar la página en la que se encuentra tanto el formulario, para los datos de entrada, como el programa en JavaScript que proporciona los resultados. Las dos principales características de JavaScript son, por un lado que es un lenguaje basado en objetos y por otro que es un lenguaje orientado a eventos, debido al tipo de entornos en los que se utiliza. Esto implica que gran parte de la programación en JavaScript se centra en describir objetos y escribir funciones que respondan a movimientos del ratón, pulsación de teclas, apertura y cerrado de ventanas o carga de una página, entre otros eventos. Javascript no permite un control absoluto sobre los recursos de la computadora. Cada programa en JavaScript solo tiene acceso al documento HTML en el que va inmerso y, si acaso, a las ventanas en las que se ejecuta el navegador dentro del cual se está ejecutando el programa en JavaScript. Los elementos básicos de JavaScript son:

Variables. En JavaScript no es necesario declarar una variable, pero cuando se hace es por medio de la palabra reservada var. Una variable, cuando no es declarada, tiene siempre ámbito global, mientras que en caso contrario será de ámbito global si está definida fuera de una función, y local si está definida dentro:

var x; // Accesible fuera y dentro de la función

y = 2; // Accesible fuera y dentro de la función

Se pueden declarar varias variables en una misma sentencia separándolos por comas: var x, y, z;

El tipo de datos de la variable será aquel que tenga el valor que asignemos a la misma, en este caso el tipo de dato sería entero: b = 200;

Operadores. Existen varios tipos de operadores en JavaScript:

1. Asignación: este tipo de operador se utiliza para asignar valores a las variables. var resultado=50

Asigna a la variable “resultado” el valor 50. 2. Comparación: en JavaScript, se pueden comparar variables de distinto tipo, pues es capaz de forzar conversiones:

== Devuelve true si son iguales. Fuerza conversiones de tipo.

!= Devuelve true si son distintos. Fuerza conversiones de tipo.

=== Devuelve true si son iguales y del mismo tipo.

!== Devuelve true si son distintos o de distinto tipo.

>Devuelve true si la variable de la izquierda es mayor que la variable de la derecha

< Devuelve true si la variable de la derecha es mayor que la variable de la izquierda

>= Devuelve true si la variable de la izquierda es mayor o igual que la variable de la derecha

<= Devuelve true si la variable de la izquierda es menor o igual que la variable de la derecha

3. Aritméticos: los operadores aritméticos, a partir de varios operandos, devuelven un solo valor; resultado de la operación realizada con los anteriores operandos. En JavaScript existe notación postfija y prefija, por lo que variable++ y ++variable son dos formas distintas de incrementar una variable. En primer lugar, se procesa la variable, y luego se incrementa. Sin embargo, en el segundo caso, primero se incrementa la variable y después se procesa. Estos son los operadores aritméticos más importantes:

Multiplicación

Programación Web Instituto Tecnológico de Matehuala / División

+ Suma

- Resta

% Resto de una división.

++ Incrementa el valor de la variable.

-- Disminuye el valor de una variable.

4. Lógicos: estos operadores permiten realizar expresiones aritméticas. && Y

|| O

! Negación

Es importante saber que si en la primer evaluación ya se conoce el resultado, no se evalúa la segunda expresión, es decir para el operador && si la primer expresión es falsa entonces automáticamente la evaluación es falsa y para el operador || si la primer expresión es verdadera entonces automáticamente la evaluación es verdadera.

Estructuras de Control. En todo lenguaje de programación existen estructuras que nos permiten variar el orden

de ejecución dependiendo de ciertas condiciones. Estas estructuras se pueden clasificar en dos grandes grupos: bifurcaciones

condicionales y bucles.

Una bifurcación condicional en una estructura que realiza una tarea u otra dependiendo del resultado de evaluar una

condición. Estas son la sentencia if…else y la sentencia switch:

1. La sentencia if..else evalúa una condición y en caso que resulte verdadera ejecuta una acción determinada y en caso

contrario ejecuta otra, la sintaxis de esta sentencia es la siguiente:

if(condición) { acciones }

else { acciones }

Hay que indicar que el else es opcional.

2. La sentencia switch toma una variable, y la evalúa según unos posibles valores: La sintaxis de esta sentencia es la

siguiente:

switch(variable)

{

case valor1:

acciones1;

break;

case valor2:

acciones2;

break;

case valorN:

accionesN;

break;

default acciones;

}

Un bucle es una estructura que permite repetir una tarea un número de veces, determinado por una condición. Para hacer

bucles podemos utilizar las estructuras while y do…while. Su sintaxis es la siguiente:

while (condicion)

{

acciones;

}

do {

acciones;

} while (condicion);

Estos bucles iteran indefinidamente mientras se cumpla una condición. La diferencia entre ellas es que la primera

comprueba dicha condición antes de realizar cada iteración y la segunda lo hace después, es decir, el while

comprueba primero si la condición se cumple y si no se cumple no se ejecuta el código que tiene dentro del bucle. En cambio,

el do…while primero ejecuta el código y luego comprueba si la condición se cumple, en caso de que no se cumpla ya no

continúa con el bucle. Con la sentencia “break“, se puede salir de una sentencia de bucle sin limitaciones. Con la sentencia

“continue“, se termina el bucle actual y se comienza con el siguiente.

También existe el bucle for, este tiene la siguiente sintaxis:

for (inicio; condición; incremento)

{ codigo; }

Programación Web Instituto Tecnológico de Matehuala El código contenido en el bucle se ejecutará mientras la condición se cumpla. Antes de comenzar la primera iteración del bucle se ejecutará la sentencia inicio y en cada iteración se ejecutara la sentencia incremento.

4.2 Objetos lenguaje Script ínter construidos. JavaScript dispone de varios objetos predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el

manejo de arreglos o el de fechas. En algunos casos es imperceptible el uso de objetos, ya que los usos más habituales de los mismos disponen de

abreviaturas que esconden el hecho de que sean objetos.

Objeto Array. Este objeto permite crear arreglos. Se inicializa de cualquiera de las siguientes maneras:

vector = new Array(longitud);

vector = new Array(elemento1, elemento2, …, elementoN);

En el primer caso se crea un arreglo con el número especificado de elementos, mientras que en el segundo tendremos un arreglo que contiene los elementos indicados y de longitud N. El primer elemento del arreglo siempre es el número cero. El objeto Array tiene, entre otros, los siguientes métodos y propiedades:

1. length. Propiedad que contiene el número de elementos del arreglo. 2. concat(arreglo2). Añade los elementos de arreglo2 al final de los del arreglo que invoca el método, devolviendo

el resultado. 3. sort(funcionComparacion). Ordena los elementos del arreglo alfabéticamente.

Si se añadeuna función de comparación como parámetro los ordenará utilizando ésta. Dicha función debe aceptar dos parámetros y devolver 0 si son iguales, menor que cero si el primer parámetro es menor que el segundo y mayor que cero si es al revés.

Objeto Date. Este objeto nos permitirá manejar fechas y horas. Se invoca así: fecha = new Date(); fecha = new Date(año, mes, dia); fecha = new Date(año, mes, dia, hora, minuto, segundo);

Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales, obtenidas del reloj del sistema. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Así, por ejemplo: navidad99 = new Date(1999, 11, 25)

El objeto Date dispone, entre otros, de los siguientes métodos:

getTime() setTime(milisegundos). Obtienen y establecen, respectivamente, la fecha y la hora tomados como

milisegundos transcurridos desde el 1 de enero de 1970.

getYear() setYear(año). Obtienen y establecen, respectivamente, el año de la fecha. Éste se devuelven como números de 4

dígitos excepto en el caso en que estén entre 1900 y 1999, en cuyo caso se devolverán las dos últimas cifras.

getFullYear() setFullYear(año). Realizan la misma función que los anteriores, pero sin tantos líos, ya que siempre

devuelven números con todos sus dígitos.

getMonth() setMonth(mes) getDate() setDate(dia) getHours() setHours(horas) getMinutes()

setMinutes(minutos) getSeconds() setSeconds(segundos). Obtienen y establecen, respectivamente, el mes, día,

hora, minuto y segundo de la fecha, también respectivamente hablando.

getDay(). Devuelve el día de la semana de la fecha en forma de número que va del 0 (domingo) al 6 (sábado).

Objeto Math. Este objeto funciona como un contenedor para los siguientes métodos matemáticos:

Programación Web Instituto Tecnológico de Matehuala

Objeto Number. Este objeto contiene como propiedades los siguientes valores numéricos

Objeto String. Este es un objeto que se puede confundir con los datos normales de tipo cadena. Este objeto tiene los

algunos métodos, entre los que cabe destacar: 1. charAt(pos) charCodeAt(pos). Devuelven el caracter o el código numérico del carácter que está en la posición

indicada de la cadena. 2. indexOf(subcadena). Devuelven la posición de la subcadena dentro de la cadena, ó -1 en caso de no estar. 3. split(separador). Devuelven un arreglo con subcadenas obtenidas separando la cadena por el carácter

separador. cadena = “Navidad,Semana Santa,Verano”; arreglo = cadena.split(“,”); En el ejemplo, el arreglo

tendrá tres elementos con cada una de las temporadas de vacaciones. 4. concat(cadena2). Devuelve el resultado de concatenar cadena2 al final de la cadena. 5. substr(indice, longitud) substring(indice1, indice2). Devuelven una subcadena de la cadena, ya sea un

número de caracteres a partir de un índice o todos los caracteres entre dos índices. 6. toLowerCase() toUpperCase(). Transforman la cadena a minúsculas y mayúsculas, respectivamente.

4.3 Eventos con lenguaje Script. La programación orientada a objetos se ha popularizado enormemente en los últimos días, y ya resulta difícil encontrar lenguajes de programación que no tengan una versión o que no estén basados en esta filosofía. JavaScript no se queda al margen de esta tendencia, y aunque no permite dos de las características clásicas de los lenguajes orientados a objetos ni la herencia ni el polimorfismo, sí permite la creación y manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos objetos. El DOM(Document Object Model) es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador, así como otras características del proceso de navegación como son el historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador. Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aísla al programador de la necesidad de conocer cómo están implementadas internamente dichas funciones. De este modo, la programación orientada a objetos resulta muy intuitiva, y más próxima al conocimiento humano. Como vemos en el siguiente ejemplo de JavaScript, para escribir un mensaje

en un cuadro de diálogo utilizamos: window.alert(“¡Hola mundo!”)

Si bien no conocemos como funciona internamente la función alert(), sabemos cómo invocarla. La abstracción es tal que nos basta con saber que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades.

Objeto Window: Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye los objetos referentes a la barra de

tareas, el documento o la secuencia de direcciones de la última sesión. Aún cuando el objeto se llame Window, disponemos siempre de una

referencia a él llamada window, y todas las propiedades y métodos que l amamos sin utilizar ninguna referencia, en realidad se hacen

utilizando esa referencia window. Este hecho es común a todos los objetos del Modelo. Los métodos más comunes del objeto son los

siguientes:

1. open(URL, nombre, propiedades).Permite crear y abrir una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos deberemos asignarle una variable, sino simplemente invocamos el método: el navegador automáticamente sabrá que pertenece al objeto Window. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco, la ventana se abrirá con una página en blanco. El nombre será el que queramos que se utilice como parámetro de un TARGET y las propiedades son una lista separada por comas de algunos de los siguientes elementos:

toolbar[=yes|no]

location[=yes|no]

directories[=yes|no]

status[=yes|no]

menubar[=yes|no]

scrollbars[=yes|no]

resizable[=yes|no]

width=pixels

height=pixels

2. close() . Cierra la ventana, esta mostrará al usuario una ventana de confirmación para que decida él si quiere

o no cerrarla, esto se hace por motivos de seguridad. 3. alert(mensaje).Muestra una ventana de diálogo con el mensaje especificado.

Programación Web Instituto Tecnológico de Matehuala 4. confirm(mensaje).Muestra una ventana de diálogo con el mensaje especificado y dos botones. Si el usuario

pulsa OK, el método devuelve true. Si, en cambio, pulsa Cancelar, devolverá false. 5. prompt(mensaje, sugerencia). Muestra una ventana de diálogo con el mensaje especificado y un campo de

texto en el que el usuario pueda teclear, cuyo valor inicial será igual a sugerencia. Si el usuario pulsa OK, el método devuelve la cadena introducida en el campo de texto. Si, por el contrario, pulsa Cancelar, devolverá el valor null. Dado que este valor se considera igual a false, podemos comprobarlo directamente en una condición para ver que ha hecho el usuario. Por ejemplo, el siguiente código muestra un saludo sólo si el usuario ha pulsado el botón de Aceptar:

var contestacion = prompt(“¿Cómo te llamas?”, “”); if (contestacion) alert(“Hola, ” + contestacion);

6. status.Define la cadena de caracteres que saldrá en la barra de estado en un momento dado. 7. defaultStatus. Define la cadena de caracteres que saldrá por defecto en la barra de estado. Cuando no la

especificamos, defaultStatus será igual al último valor que tomó status. 8. setTimeout(“función”,tiempo). Llama a función cuando hayan pasado tiempo milisegundos.

Imprescindible a la hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.

Objeto Frame: Para acceder al código o a objetos como Window o Document de otros frames, Javascript

utiliza el objeto Frame con las etiquetas FRAME y FRAMESET, este objeto permite acceder a los frames que

hemos declarado en él por medio del arreglo frames. Es decir, si en nuestro documento estuviera la siguiente línea:

<FRAME NAME=”principal” SRC=”MiPagina.html”>

Podríamos acceder a su objeto Window por medio de la referencia window.frames[“principal”], a su vez, desde el documento

“hijo”, es decir, desde el documento que está encerrado en un marco, podemos acceder al padre por medio de la

referencia parent. También podemos acceder al documento que esté arriba del todo en esta jerarquía por medio de top. Por

ejemplo:

window == window.top

Esta igualdad comprobará si nuestro documento está en la ventana principal o en un frame.

Objeto Document. Este objeto representa el documento HTML en el que estamos. Se accede a él por medio de la referencia document. Su mayor importancia viene por el número de arreglos que posee, que referencian a objetos Image, Form o Link, los cuales permiten acceder a las imágenes, formularios y enlaces del documento, respectivamente. Entre sus métodos y propiedades más importantes se encuentran los siguientes:

1. lastModified. Contiene la fecha y hora en que se modificó el documento por última vez y se suele usar en conjunción con write para añadir al final del documento estas características.

2. bicolor. Modifica el color de fondo del documento. El color deberá estar en el formato usado en HTML. Es decir, puede ser red o FF0000.

3. forms[]. Arreglo que contiene los formularios del documento. El primero será el número 0, el segundo el 1, etc. 4. images[]. Arreglo que contiene las imágenes del documento. Se ordenan igual que en el anterior caso, aunque también permiten ser accedidas con el nombre como índice. Es decir, a una imagen definida como <IMG SRC=”..” NAME=”miImagen”> se puede acceder con document.inages[“miImagen”].

5. links[]. Arreglo que contiene los enlaces del documento. Se ordenan igual que en los dos anteriores, aunque no se suele utilizar en el código Javascript. Su razón de ser es que, al ser los enlaces objetos, permiten incluir código Javascript en ellos por medio de la pseudo-URL javascript:codigo.

6. write(cadena) writeln(cadena). Escribe el código HTML indicado en cadena en nuestro documento HTML. writeln hace lo mismo, pero incluyendo al final un retorno de carro.

7. open(). Abre un nuevo documento para escribir. Un documento debe estar abierto para poder escribir en él. Sin embargo, no se utiliza mucho ya que los dos métodos anteriores abren automáticamente el documento si no lo está ya.

8. close(). Cierra el documento, impidiendo escribir de nuevo en él.

Objeto Image. Este objeto representa a una imagen. Se puede acceder a las diversas imágenes del documento por medio del arreglo de referencias document.images[]. Sus propiedades más importantes son:

1. src. Contiene el archivo de la imagen. 2. complete. Valor lógico que será true si la imagen ha terminado ya de cargarse. También dispone de diversas propiedades de sólo lectura que se corresponden con los atributos de la etiqueta <IMG> como, por ejemplo, width o border.

Objeto Form. Cada forma en un documento crea un objeto Form, Porque un documento puede contener más de una forma. Los objetos Forma son almacenados en un arreglo llamado forms. La primer forma en la página es forms[0] y así sucesivamente. Los métodos y propiedades más importantes del objeto Form son los siguientes:

1. submit(). Envía el formulario. 2. reset(). Devuelve los valores de un formulario a su estado inicial. 3. elements[]. Contiene todos y cada uno de los elementos de los que consta el formulario, es decir,

los botones, cajas de textos, listas desplegables, etc. que componen un formulario. Cada elemento puede ser un objeto distinto, por lo que deberemos averiguar de qué tipo son por medio de la propiedad común type.

Programación Web Instituto Tecnológico de Matehuala Objetos Text. Cuatro elementos HTML distintos (text, textarea, password y hidden) son, objetos muy parecidos entre sí.

Tienen tres propiedades verdaderamente importantes: 1. name. Nombre del elemento, indicado en el atributo NAME de su etiqueta HTML. Este atributo está presente en

todos los objetos que son elementos de un formulario. 2. type. Tipo del elemento. Al igual que el anterior, esta propiedad está presente en todos los objetos que

representan elementos de un formulario. En este caso valdrá siempre “text”. 3. value. Contiene el valor, es decir, el texto tecleado por el usuario.

Objetos Checkbox y Radio. En estos objetos el estado del elemento es de tipo lógico: puede estar seleccionado o no. Este valor lógico se contiene en la propiedad checked

Objetos Select y Option. El objeto Select es el más complicado. Esto es debido a que contiene en su interior un arreglo de objetos Option. Dispone de dos propiedades:

1. selectedIndex. Empezando a contar a partir de cero, indica qué opción está seleccionada. Si hay varias seleccionadas, indica la opción con el índice más bajo. 2. options[]. Arreglo que contiene los objetos Option correspondientes a todas y cada una de las opciones. El objeto Option, por otro lado, dispone de otras dos propiedades:

1. selected. Valor lógico que será verdadero si la opción está seleccionada. 2. text. Texto que acompaña a la opción. Otros objetos. El modelo de objetos del documento define varios objetos, por así decirlo, “menores”, que no tienen relación con nada físico de la página en la que estamos. Es decir, no guardan relación con las etiquetas HTML que estén en ellas escritas. Son los siguientes:

Objeto History. Se accede a este objeto por medio de la referencia document.history y contiene todas las direcciones que se han visitado en la sesión actual. Aunque no permite acceder a él, dispone de varios métodos para sustituir el documento actual por alguno que el usuario ya haya visitado:

1. back(). Volver a la página anterior, la sintaxis para utilizarlo es la siguiente: window.history.back(); 2. forward(). Ir a la página siguiente. 3. go(donde). Ir a donde se indique, siendo donde un número tal que go(1)=forward() y go(-1)=back().

Objeto Location. Se accede a este objeto por medio de la referencia document.location y contiene información sobre la dirección de la página actual en varias propiedades.

1. href. Permite el acceso a la dirección de la página actual. Si lo cambiamos cambiaremos de página. 2. protocol. Protocolo de la página actual. Habitualmente http. 3. host. Máquina donde se alberga la página actual.

4. pathame. Camino de la página actual 5. search. Esta propiedad permite acceder a la última parte de la dirección, a partir de la interrogación, que son los parámetros. Puede ser útil para pasar parámetros de una página a otra.

Objeto Screen. Se puede acceder a este objeto por medio de la referencia screen. Nos permitirá conocer la configuración de la pantalla del usuario, todos sus atributos son de sólo lectura.

1. height. Altura de la resolución de la pantalla. 2. width. Anchura de la resolución de la pantalla. 3. pixelDepth. Número de bits por pixel.

4.4 Modelo de objetos con lenguaje Script. Evento se considera cualquier acción que el usuario realiza con el sistema: hacer click, posicionarse con el ratón en un lugar determinado, enviar un formulario, posicionarse en un cuadro para texto, etc. Para referirnos a un evento en HTML, el nombre del evento irá precedido por on. Por ejemplo, el gestor de eventos de “Click” será “onClick“. La forma de llamar a un evento es la siguiente. Si tenemos un botón en un formulario, y queremos que al presionarlo realice una

acción determinada: <form ….> <input type=”button” onClick=”función([parámetros])”> </form ….>

Con esta acción, asociamos al evento click sobre el botón las acciones que realice la función. Aquí se presenta la Lista de eventos más comunes:

Programación Web Instituto Tecnológico de Matehuala

4.5 Validación de entrada de datos del lado del cliente. La validación de datos es una de las áreas más importantes a tener en cuenta en el desarrollo de sistemas La validación de datos del lado del cliente permite, por ejemplo, avisarle al usuario que el campo de email que acaba de llenar no contiene una dirección de email válida. También permite avisar si falta rellenar campos o si se están utilizando caracteres no válidos, etc. Aunque existen muchos casos en el que el uso exclusivo de JavaScript para la validación de datos es insuficiente y la utilización de algún lenguaje de servidor es necesaria. Por ejemplo, no se pueden validar los datos de acceso mediante JavaScript ya que el login y el password deberán de estar almacenados en alguna parte segura y JavaScript no ofrece esa seguridad, ya que el código de JavaScript se puede ver en el navegador.

4.6 Consideraciones del soporte del navegador. En los primeros días de la web, HTML era muy simple, no estandarizado y no incluía ninguna capacidad para scripts del lado cliente. HTML en sí mismo no se estandarizó hasta que se presentó HTML 2.0 a finales de 1995 y ni siquiera incluía tablas. Los suministradores de navegadores como Netscape y Microsoft competían para añadir características atractivas al HTML que implementaban en sus navegadores para proporcionar el contenido más atractivo y rico a sus usuarios. Las capacidades de los navegadores para incluir lo último y mejor en contenidos cambiaban casi diariamente. Netscape Navigator 2 introdujo la capacidad de ejecutar JavaScript en los navegadores web. A medida que la evolución de los navegadores continuó, aparecieron las diferencias en la implementación del script y los objetos admitidos por el navegador. Gracias a esto se podía ejecutar scripts en el lado cliente que podían usarse para distinguir navegadores. Una de las primeras aproximaciones a la detección de navegadores en el lado cliente incluía probar si el navegador implementaba determinados objetos. Un ejemplo de esta aproximación era probar la existencia del objeto document.images. Netscape Navigator 4 e Internet Explorer 4 introdujeron la capacidad de manipular el contenido HTML en un navegador (Dynamic HTML o DHTML) en lugar de en el servidor web y comenzaron la introducción de las implementaciones de CSS para proporcionar estilos al contenido. Esta generación de navegadores, además de compartir varias características que no estaban disponibles en versiones previas, implementaban cada una su propias e incompatibles capacidades competidoras para manipular contenido en una página web. Dado que los navegadores de cada suministrador implementaban diferentes objetos para ejecutar DHTML, hubo que distinguir al suministrador a través de la existencia de objetos JavaScript concretos. La existencia de document.layers era suficiente para estar seguro de que el navegador era Netscape Navigator 4 mientras que la existencia de document.all era suficiente para estar seguro de que el navegador era Microsoft Internet Explorer 4. A continuación se presentan algunas consideraciones a tomar en cuenta para determinar el soporte del navegador:

1. Centrarse en los estándares y no en navegadores concretos. Si bien el período de 1994 a 2000 estuvo dominado por navegadores incompatibles y no estándares de Netscape y Microsoft, ahora el factor dominante en el desarrollo web son los estándares propuestos por el World Wide Web Consortium (W3C). Orientar el contenido de una web a suministradores concretos ignora la posibilidad de que puedan aparecer otros navegadores que implementen los mismos estándares en el futuro. Un problema común en la web hoy en día es la suposición de que los únicos navegadores en el mundo son Netscape Navigator y Microsoft Internet Explorer. Esto ignora la existencia de otros navegadores que se están usando para acceder a la web ahora y en el futuro.

Programación Web Instituto Tecnológico de Matehuala 2. Proporcionar una alternativa a los navegadores desconocidos. Proporcionar siempre contenido y bifurcaciones de

código para cuando se utiliza un navegador desconocido. La aproximación recomendada es asumir que cualquier navegador no conocido implementa los estándares básicos de HTML y CSS y hasta cierto nivel JavaScript

y DOM de W3C. Esto garantizará que el contenido será admitido hoy y en el futuro por cualquier navegador que implemente los estándares.

3. También se puede usar información detal ada con respecto a la versión de un navegador para solventar fallos en versiones específicas de un navegador. Sin embargo, esto puede derivar rápidamente en una pesadil a para el mantenimiento si no es cuidadoso. Se recomienda que se tome estas medidas sólo con carácter temporal y, tan pronto como se corrijan en versiones más modernas del navegador, corregir también el código.

4. Proporcionar páginas básicas para los navegadores más antiguos. Ningún sitio web comercial de hoy en día considera un requisito que se visualice correctamente en Netscape Navigator versiones 1, 2 o 3, o Microsoft Internet Explorer 3. Las razones son que las capacidades de esos navegadores son demasiado limitadas comparadas con los navegadores más modernos, los requerimientos añadidos de desarrollo y control de calidad incrementan demasiado el costo de desarrollo de los sitios web y la cuota de mercado de tales navegadores no justifica el costo de tenerlos en cuenta. Una de las aproximaciones más comunes en los sitios web más importantes es proporcionar una versión de bajo nivel de una página web a los navegadores más antiguos a la vez que proporciona una página más rica que usa CSS y JavaScript avanzados a los navegadores más modernos.

5. Usar detección no basada en script cuando sea posible. Los navegadores más antiguos tienen muchas limitaciones que hacen que ignoren las características más avanzadas. El uso juicioso de estas limitaciones en los navegadores más antiguos le permitirá incluir contenido moderno sin dejar de prestar asistencia a los navegadores antiguos.

Referencias

1. http://www.sistemas.ith.mx/patricia/proweb/clases/UNIDAD4/unidad4-5y6.htm 2. www.galeon.com/itch2leonardo/archivos/ProgWebUni4.ppt 3. www.itlalaguna.edu.mx/academico/carreras/sistemas/.../Unidad4.doc